@hyvor/design 0.0.67 → 0.0.68

package/dist/components/HyvorBar/img/G2.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  G2Props */
+/** @typedef {typeof __propDef.events}  G2Events */
+/** @typedef {typeof __propDef.slots}  G2Slots */
+export default class G2 extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type G2Props = typeof __propDef.props;
+export type G2Events = typeof __propDef.events;
+export type G2Slots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/HyvorBar/img/Trustpilot.svelte

@@ -0,0 +1,11 @@
+<svg
+	fill="#000000"
+	width="12"
+	height="12"
+	viewBox="0 0 24 24"
+	role="img"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		d="M12,17.964l5.214-1.321l2.179,6.714L12,17.964z M24,9.286h-9.179L12,0.643L9.179,9.286 H0l7.429,5.357l-2.821,8.643l7.429-5.357l4.571-3.286L24,9.286L24,9.286L24,9.286L24,9.286z"
+	/>
+</svg>

package/dist/components/HyvorBar/img/Trustpilot.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  TrustpilotProps */
+/** @typedef {typeof __propDef.events}  TrustpilotEvents */
+/** @typedef {typeof __propDef.slots}  TrustpilotSlots */
+export default class Trustpilot extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TrustpilotProps = typeof __propDef.props;
+export type TrustpilotEvents = typeof __propDef.events;
+export type TrustpilotSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/IconButton/IconButton.svelte

@@ -11,29 +11,25 @@ size = (typeof size === "number" ? size : sizes[size]) + "px";
 </script>
 
 <svelte:element
-    this={as}
-    class="button {color} {variant}"    
-
-    style:width={size}
-    style:height={size}
-    
-    on:keyup
-    on:keydown
-    on:keypress
-    on:focus
-    on:blur
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    on:change
-
-    role="button"
-    tabindex="0"
-
-    {...$$restProps}
+	this={as}
+	class="button {color} {variant}"
+	style:width={size}
+	style:height={size}
+	on:keyup
+	on:keydown
+	on:keypress
+	on:focus
+	on:blur
+	on:click
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:change
+	role="button"
+	tabindex="0"
+	{...$$restProps}
 >
-    <slot />
+	<slot />
 </svelte:element>
 
 <style>.button {
@@ -239,4 +235,4 @@ size = (typeof size === "number" ? size : sizes[size]) + "px";
   cursor: not-allowed;
   opacity: 0.2;
   box-shadow: none !important;
-}</style>
+}</style>

package/dist/components/IconMessage/IconMessage.svelte

@@ -1,8 +1,23 @@
-<script>import { IconBug, IconInbox, IconPatchExclamation } from "@hyvor/icons";
+<script>import {} from "svelte";
+import { IconBug, IconInbox } from "@hyvor/icons";
+import Button from "../Button/Button.svelte";
+export let size = "medium";
 export let icon = null;
 export let message = null;
-export let iconSize = 100;
-export let padding = 0;
+export let iconSize = void 0;
+const iconsSizes = {
+  small: 35,
+  medium: 50,
+  large: 75
+};
+iconSize = iconSize || iconsSizes[size];
+export let padding = void 0;
+const paddings = {
+  small: 15,
+  medium: 40,
+  large: 60
+};
+padding = padding === void 0 ? paddings[size] : padding;
 export let empty = false;
 export let error = false;
 export let iconColor = null;
@@ -12,46 +27,82 @@ if (empty) {
 }
 if (error) {
   message = message || "Something went wrong";
-  icon = IconPatchExclamation;
-  iconColor = iconColor || "var(--red)";
+  icon = IconBug;
+  iconColor = iconColor || "var(--gray-dark)";
 }
 iconColor = iconColor || "var(--gray-dark)";
+export let cta = null;
+function onCtaClick(e) {
+  if (cta) {
+    cta.onClick(e);
+  }
+}
 </script>
 
-<div class="icon-message" style:padding={padding + "px"}>
-    <div class="icon" style:color={iconColor} {...$$restProps}>
-        {#if $$slots.icon}
-            <slot name="icon" />
-        {:else if icon}
-            <svelte:component this={icon} size={iconSize + "px"} />
-        {/if}
-    </div>
-
-    <div class="message">
-        {#if $$slots.message}
-            <slot name="message" />
-        {:else if message}
-            {message}
-        {/if}
-    </div>
+<div class="icon-message {size}" style:padding={padding + 'px'}>
+	<div class="icon" style:color={iconColor} {...$$restProps}>
+		{#if $$slots.icon}
+			<slot name="icon" />
+		{:else if icon}
+			<svelte:component this={icon} size={iconSize + 'px'} />
+		{/if}
+	</div>
+
+	<div class="message">
+		{#if $$slots.default}
+			<slot />
+		{:else if $$slots.message}
+			<slot name="message" />
+		{:else if message}
+			{message}
+		{/if}
+	</div>
+
+	{#if cta || $$slots.cta}
+		<div class="cta">
+			{#if $$slots.cta}
+				<slot name="cta" />
+			{:else}
+				<Button on:click={onCtaClick} {size} {...cta?.props}>
+					{cta?.text}
+				</Button>
+			{/if}
+		</div>
+	{/if}
 </div>
 
 <style>
-    .icon-message {
-        width: 100%;
-        height: 100%;
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        flex-direction: column; /* Change to column direction */
-        text-align: center;
-    }
-
-    .message {
-        /* Add message styles here */
-        color: var(--text-light);
-        margin-top: 15px;
-    }
+	.icon-message {
+		width: 100%;
+		height: 100%;
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		flex-direction: column; /* Change to column direction */
+		text-align: center;
+	}
+
+	.icon {
+		display: inline-flex;
+		align-items: flex-end;
+	}
+
+	.message {
+		/* Add message styles here */
+		color: var(--text-light);
+		margin-top: 10px;
+	}
+
+	.icon-message.small .message {
+		margin-top: 8px;
+	}
+	.icon-message.large .message {
+		margin-top: 13px;
+	}
+
+	.cta {
+		margin-top: 15px;
+	}
 </style>

package/dist/components/IconMessage/IconMessage.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponent } from "svelte";
-import type { ComponentType } from "svelte";
+import { type ComponentType } from 'svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        size?: "small" | "medium" | "large" | undefined;
         icon?: ComponentType | null | undefined;
         message?: string | null | undefined;
         iconSize?: number | undefined;
@@ -10,13 +11,20 @@ declare const __propDef: {
         empty?: boolean | undefined;
         error?: boolean | undefined;
         iconColor?: string | null | undefined;
+        cta?: {
+            text: string;
+            onClick: (e: MouseEvent) => void;
+            props?: Record<string, any> | undefined;
+        } | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         icon: {};
+        default: {};
         message: {};
+        cta: {};
     };
 };
 export type IconMessageProps = typeof __propDef.props;

package/dist/components/Internationalization/InternationalizationProvider.svelte

@@ -7,5 +7,5 @@ setContext("i18n", i18n);
 </script>
 
 {#key $locale}
-    <slot />
-{/key}
+	<slot />
+{/key}

package/dist/components/Internationalization/InternationalizationProvider.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type Language } from "./i18n.js";
+import { type Language } from './i18n.js';
 declare const __propDef: {
     props: {
         languages: Language[];

package/dist/components/Internationalization/LanguageToggle.svelte

@@ -21,43 +21,40 @@ function handleClick(language) {
 }
 </script>
 
-
 {#if i18n && $currentLanguage}
-
-    <Dropdown bind:show={show} {position} {align}>
-        <span slot="trigger">
-            {#if icon}
-                <IconButton color="input" {size}>
-                    {$currentLanguage.flag}
-                </IconButton>
-            {:else}
-                <Button color="input" {size}>
-                    <span slot="start">{$currentLanguage.flag}</span>
-                    {$currentLanguage.name}
-                    <svelte:component slot="end" this={caret} size={12} />
-                </Button>
-            {/if}
-        </span>
-        <ActionList slot="content">
-            {#each i18n.languages as language (language.code)}
-                <ActionListItem on:click={() => handleClick(language)}>
-                    <span class="flag" slot="start">{language.flag}</span>
-                    <span class="name">
-                        {language.name}
-                    </span>
-                    <Text small light>
-                        {language.region}
-                    </Text>
-                </ActionListItem>
-            {/each}
-        </ActionList>
-    </Dropdown>
-    
+	<Dropdown bind:show {position} {align}>
+		<span slot="trigger">
+			{#if icon}
+				<IconButton color="input" {size}>
+					{$currentLanguage.flag}
+				</IconButton>
+			{:else}
+				<Button color="input" {size}>
+					<span slot="start">{$currentLanguage.flag}</span>
+					{$currentLanguage.name}
+					<svelte:component this={caret} slot="end" size={12} />
+				</Button>
+			{/if}
+		</span>
+		<ActionList slot="content">
+			{#each i18n.languages as language (language.code)}
+				<ActionListItem on:click={() => handleClick(language)}>
+					<span class="flag" slot="start">{language.flag}</span>
+					<span class="name">
+						{language.name}
+					</span>
+					<Text small light>
+						{language.region}
+					</Text>
+				</ActionListItem>
+			{/each}
+		</ActionList>
+	</Dropdown>
 {/if}
 
 <style>
-    .flag {
-        margin-right: 6px;
-        font-size: 20px;
-    }
-</style>
+	.flag {
+		margin-right: 6px;
+		font-size: 20px;
+	}
+</style>

package/dist/components/Internationalization/LanguageToggle.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
-import { type ComponentProps, type ComponentType } from "svelte";
-import Dropdown from "../Dropdown/Dropdown.svelte";
+import { type ComponentProps, type ComponentType } from 'svelte';
+import Dropdown from '../Dropdown/Dropdown.svelte';
 declare const __propDef: {
     props: {
         position?: ComponentProps<Dropdown>['position'];

package/dist/components/Internationalization/T.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
-import { type ToDotPaths, type I18nStrings } from "./types.js";
-import { type ComponentType } from "svelte";
-import { type PrimitiveType } from "intl-messageformat";
+import { type ToDotPaths, type I18nStrings } from './types.js';
+import { type ComponentType } from 'svelte';
+import { type PrimitiveType } from 'intl-messageformat';
 declare class __sveltets_Render<StringsT extends I18nStrings> {
     props(): {
         key: ToDotPaths<StringsT>;

package/dist/components/Internationalization/i18n.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="svelte" />
-import type { PrimitiveType } from "intl-messageformat";
-import { type Readable, type Writable } from "svelte/store";
-import T from "./T.svelte";
-import type { ToDotPaths, I18nStrings } from "./types.js";
+import type { PrimitiveType } from 'intl-messageformat';
+import { type Readable, type Writable } from 'svelte/store';
+import T from './T.svelte';
+import type { ToDotPaths, I18nStrings } from './types.js';
 export type i18nLoaderType = () => Promise<any>;
 interface LanguageBase {
     name: string;

package/dist/components/Internationalization/i18n.js

@@ -1,7 +1,7 @@
-import { deepmerge } from "deepmerge-ts";
-import { writable, derived } from "svelte/store";
-import { t } from "./t.js";
-import T from "./T.svelte";
+import { deepmerge } from 'deepmerge-ts';
+import { writable, derived } from 'svelte/store';
+import { t } from './t.js';
+import T from './T.svelte';
 export class InternationalizationService {
     languages = [];
     locale;
@@ -10,7 +10,7 @@ export class InternationalizationService {
     stringsCache = new Map();
     defaultStrings;
     constructor(languages) {
-        const defaultLanguage = languages.find(l => l.default);
+        const defaultLanguage = languages.find((l) => l.default);
         if (!defaultLanguage) {
             throw new Error('Default language not found');
         }
@@ -19,7 +19,7 @@ export class InternationalizationService {
             throw new Error('Default strings not found for the default language');
         }
         this.locale = writable(defaultLanguage.code);
-        this.localeLanguage = derived(this.locale, $locale => this.languageByCode($locale));
+        this.localeLanguage = derived(this.locale, ($locale) => this.languageByCode($locale));
         this.defaultStrings = defaultStrings;
         this.strings.set(this.defaultStrings);
         this.stringsCache.set(defaultLanguage.code, this.defaultStrings);
@@ -39,7 +39,9 @@ export class InternationalizationService {
             this.locale.set(code);
         }
         else {
-            this.languageByCode(code)?.loader().then(({ default: strings }) => {
+            this.languageByCode(code)
+                ?.loader()
+                .then(({ default: strings }) => {
                 this.stringsCache.set(code, strings);
                 this.setStrings(code);
                 this.locale.set(code);
@@ -49,16 +51,16 @@ export class InternationalizationService {
     register(language) {
         this.languages.push({
             ...language,
-            loader: language.hasOwnProperty('strings') ?
-                () => Promise.resolve(language.strings) :
-                language.loader,
+            loader: language.hasOwnProperty('strings')
+                ? () => Promise.resolve(language.strings)
+                : language.loader
         });
     }
     found(code) {
         return !!this.languageByCode(code);
     }
     languageByCode(code) {
-        return this.languages.find(l => l.code === code);
+        return this.languages.find((l) => l.code === code);
     }
     t(key, params = {}) {
         return t(key, params, this);

package/dist/components/Internationalization/t.d.ts

@@ -1,6 +1,6 @@
-import { type PrimitiveType } from "intl-messageformat";
-import { type InternationalizationService } from "./i18n.js";
-import type { I18nStrings, ToDotPaths } from "./types.js";
+import { type PrimitiveType } from 'intl-messageformat';
+import { type InternationalizationService } from './i18n.js';
+import type { I18nStrings, ToDotPaths } from './types.js';
 type ParamValue = PrimitiveType | ((chunks: string | string[]) => string);
 type ParamsType = Record<string, ParamValue>;
 export declare function getMessage(key: string, params: ParamsType, $strings: Record<string, any>, $locale: string): string;

package/dist/components/Internationalization/t.js

@@ -1,7 +1,7 @@
-import { IntlMessageFormat } from "intl-messageformat";
-import { getContext } from "svelte";
-import { get } from "svelte/store";
-import { getStringByKey } from "./i18n.js";
+import { IntlMessageFormat } from 'intl-messageformat';
+import { getContext } from 'svelte';
+import { get } from 'svelte/store';
+import { getStringByKey } from './i18n.js';
 export function getMessage(key, params, $strings, $locale) {
     const string = getStringByKey($strings, key);
     if (string) {

package/dist/components/Internationalization/types.d.ts

@@ -2,6 +2,6 @@ export type I18nStrings = {
     [key: string]: string | I18nStrings;
 };
 export type ToDotPaths<T> = T extends object ? {
-    [K in keyof T]: `${Exclude<K, symbol>}${"" | `.${ToDotPaths<T[K]>}`}`;
+    [K in keyof T]: `${Exclude<K, symbol>}${'' | `.${ToDotPaths<T[K]>}`}`;
 }[keyof T] : never;
 export type FromDotPath<T, K extends string> = K extends keyof T ? T[K] : K extends `${infer K0}.${infer KR}` ? K0 extends keyof T ? FromDotPath<T[K0], KR> : never : never;

package/dist/components/Link/Link.svelte

@@ -4,69 +4,64 @@ export let underline = true;
 </script>
 
 <a
-    {href}
-
-    class="color-{color}"
-    class:underline={underline}
-
-    on:keyup
-    on:keydown
-    on:keypress
-    on:focus
-    on:blur
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    on:change
-
-    {...$$restProps}
+	{href}
+	class="color-{color}"
+	class:underline
+	on:keyup
+	on:keydown
+	on:keypress
+	on:focus
+	on:blur
+	on:click
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:change
+	{...$$restProps}
 >
+	{#if $$slots.start}
+		<span class="slot start-slot"><slot name="start" /></span>
+	{/if}
 
-    {#if $$slots.start}
-        <span class="slot start-slot"><slot name="start" /></span>
-    {/if}
-
-    <slot />
-
-    {#if $$slots.end}
-        <span class="slot end-slot"><slot name="end" /></span>
-    {/if}
+	<slot />
 
+	{#if $$slots.end}
+		<span class="slot end-slot"><slot name="end" /></span>
+	{/if}
 </a>
 
 <style>
-    a {
-        display: inline-flex;
-        align-items: center;
-        color: var(--local-color);
-    }
-    a.color-link {
-        --local-color: var(--link);
-    }
-    a.color-accent {
-        --local-color: var(--accent);
-    }
-    a.color-text {
-        --local-color: var(--text);
-    }
-    a.underline {
-        text-decoration: underline;
-        text-decoration-color: var(--local-color);
-    }
-    a:not(.underline):hover {
-        text-decoration: underline;
-    }
+	a {
+		display: inline-flex;
+		align-items: center;
+		color: var(--local-color);
+	}
+	a.color-link {
+		--local-color: var(--link);
+	}
+	a.color-accent {
+		--local-color: var(--accent);
+	}
+	a.color-text {
+		--local-color: var(--text);
+	}
+	a.underline {
+		text-decoration: underline;
+		text-decoration-color: var(--local-color);
+	}
+	a:not(.underline):hover {
+		text-decoration: underline;
+	}
 
-    .slot {
-        display: inline-flex;
-        align-items: center;
-    }
+	.slot {
+		display: inline-flex;
+		align-items: center;
+	}
 
-    .start-slot {
-        margin-right: 4px;
-    }
-    .end-slot {
-        margin-left: 4px;
-    }
-</style>
+	.start-slot {
+		margin-right: 4px;
+	}
+	.end-slot {
+		margin-left: 4px;
+	}
+</style>