@hyvor/design 0.0.67 → 1.0.3

package/dist/components/IconButton/IconButton.svelte

@@ -1,39 +1,56 @@
-<script>export let size = "medium";
-export let color = "accent";
-export let variant = "fill";
-export let as = "button";
-const sizes = {
-  small: 26,
-  medium: 30,
-  large: 36
-};
-size = (typeof size === "number" ? size : sizes[size]) + "px";
-</script>
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
 
-<svelte:element
-    this={as}
-    class="button {color} {variant}"    
+	const bubble = createBubbler();
+
+	interface Props {
+		size?: 'small' | 'medium' | 'large' | number;
+		// export let color : 'accent' | 'soft' | 'invisible' | 'danger' = 'accent';
+		color?: 'accent' | 'gray' | 'input' | 'green' | 'red' | 'blue' | 'orange';
+		variant?: 'fill' | 'fill-light' | 'outline' | 'outline-fill' | 'invisible';
+		as?: 'button' | 'a';
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
 
-    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
+	let {
+		size = $bindable('medium'),
+		color = 'accent',
+		variant = 'fill',
+		as = 'button',
+		children,
+		...rest
+	}: Props = $props();
 
-    role="button"
-    tabindex="0"
+	const sizes = {
+		small: 26,
+		medium: 30,
+		large: 36
+	};
 
-    {...$$restProps}
+	size = (typeof size === 'number' ? size : sizes[size]) + 'px';
+</script>
+
+<svelte:element
+	this={as}
+	class="button {color} {variant}"
+	style:width={size}
+	style:height={size}
+	onkeyup={bubble('keyup')}
+	onkeydown={bubble('keydown')}
+	onkeypress={bubble('keypress')}
+	onfocus={bubble('focus')}
+	onblur={bubble('blur')}
+	onclick={bubble('click')}
+	onmouseover={bubble('mouseover')}
+	onmouseenter={bubble('mouseenter')}
+	onmouseleave={bubble('mouseleave')}
+	onchange={bubble('change')}
+	role="button"
+	tabindex="0"
+	{...rest}
 >
-    <slot />
+	{@render children?.()}
 </svelte:element>
 
 <style>.button {
@@ -239,4 +256,4 @@ size = (typeof size === "number" ? size : sizes[size]) + "px";
   cursor: not-allowed;
   opacity: 0.2;
   box-shadow: none !important;
-}</style>
+}</style>

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

@@ -1,33 +1,10 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        size?: number | "small" | "medium" | "large" | undefined;
-        color?: "input" | "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
-        variant?: "fill" | "fill-light" | "outline" | "invisible" | "outline-fill" | undefined;
-        as?: "button" | "a" | undefined;
-    };
-    events: {
-        keyup: KeyboardEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        click: MouseEvent;
-        mouseover: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        change: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type IconButtonProps = typeof __propDef.props;
-export type IconButtonEvents = typeof __propDef.events;
-export type IconButtonSlots = typeof __propDef.slots;
-export default class IconButton extends SvelteComponent<IconButtonProps, IconButtonEvents, IconButtonSlots> {
-}
-export {};
+declare const IconButton: import("svelte").Component<{
+    [key: string]: any;
+    size?: "small" | "medium" | "large" | number;
+    color?: "accent" | "gray" | "input" | "green" | "red" | "blue" | "orange";
+    variant?: "fill" | "fill-light" | "outline" | "outline-fill" | "invisible";
+    as?: "button" | "a";
+    children?: import("svelte").Snippet;
+}, {}, "size">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/IconMessage/IconMessage.svelte

@@ -1,57 +1,163 @@
-<script>import { IconBug, IconInbox, IconPatchExclamation } from "@hyvor/icons";
-export let icon = null;
-export let message = null;
-export let iconSize = 100;
-export let padding = 0;
-export let empty = false;
-export let error = false;
-export let iconColor = null;
-if (empty) {
-  message = message || "No results found";
-  icon = IconInbox;
-}
-if (error) {
-  message = message || "Something went wrong";
-  icon = IconPatchExclamation;
-  iconColor = iconColor || "var(--red)";
-}
-iconColor = iconColor || "var(--gray-dark)";
+<script lang="ts">
+	import { type Component, type Snippet } from 'svelte';
+	import { IconBug, IconInbox } from '@hyvor/icons';
+	import Button from '../Button/Button.svelte';
+
+	interface Props {
+		size?: 'small' | 'medium' | 'large';
+		icon?: Component;
+		iconSize?: number;
+		padding?: number;
+		empty?: boolean;
+		error?: boolean;
+		iconColor?: string;
+		cta?:
+			| {
+					text: string;
+					onClick: (e: MouseEvent) => void;
+					props?: Record<string, any>;
+			  }
+			| Snippet;
+
+		children?: Snippet;
+		message?: Snippet | string;
+	}
+
+	let {
+		size = 'medium',
+		icon,
+		iconSize,
+		padding,
+		empty = false,
+		error = false,
+		iconColor,
+		cta,
+
+		children,
+		message,
+
+		...rest
+	}: Props = $props();
+
+	// export let size: 'small' | 'medium' | 'large' = 'medium';
+
+	// export let icon: ComponentType | null = null;
+	// export let message: string | null = null;
+
+	// export let iconSize: number | undefined = undefined;
+	const iconsSizes = {
+		small: 35,
+		medium: 50,
+		large: 75
+	};
+	iconSize = iconSize || iconsSizes[size];
+
+	// export let padding: number | undefined = undefined;
+
+	const paddings = {
+		small: 15,
+		medium: 40,
+		large: 60
+	};
+
+	padding = padding === undefined ? paddings[size] : padding;
+
+	//console.log(icon?.prototype);
+	// $inspect(icon?.prototype, icon?);
+
+	// export let empty: boolean = false;
+	// export let error: boolean = false;
+
+	// export let iconColor: string | null = null;
+
+	if (empty) {
+		message = message || 'No results found';
+		icon = IconInbox;
+	}
+
+	if (error) {
+		message = message || 'Something went wrong';
+		icon = IconBug;
+		iconColor = iconColor || 'var(--gray-dark)';
+	}
+
+	const Icon = icon;
+
+	iconColor = iconColor || 'var(--gray-dark)';
+
+	// export let cta: {
+	// 	text: string;
+	// 	onClick: (e: MouseEvent) => void;
+	// 	props?: Record<string, any>;
+	// } | null = null;
+
+	function onCtaClick(e: MouseEvent) {
+		if (cta && typeof cta === 'object') {
+			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} {...rest}>
+		<Icon size={iconSize + 'px'} />
+	</div>
+
+	<div class="message">
+		{#if children}
+			{@render children()}
+		{:else if typeof message === 'string'}
+			{message}
+		{:else if message}
+			{@render message()}
+		{/if}
+	</div>
+
+	{#if cta}
+		<div class="cta">
+			{#if typeof cta === 'object'}
+				<Button on:click={onCtaClick} {size} {...cta.props}>
+					{cta.text}
+				</Button>
+			{:else}
+				{@render cta()}
+			{/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,27 +1,19 @@
-import { SvelteComponent } from "svelte";
-import type { ComponentType } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        icon?: ComponentType | null | undefined;
-        message?: string | null | undefined;
-        iconSize?: number | undefined;
-        padding?: number | undefined;
-        empty?: boolean | undefined;
-        error?: boolean | undefined;
-        iconColor?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        icon: {};
-        message: {};
-    };
-};
-export type IconMessageProps = typeof __propDef.props;
-export type IconMessageEvents = typeof __propDef.events;
-export type IconMessageSlots = typeof __propDef.slots;
-export default class IconMessage extends SvelteComponent<IconMessageProps, IconMessageEvents, IconMessageSlots> {
-}
-export {};
+import { type Component, type Snippet } from 'svelte';
+declare const IconMessage: Component<{
+    size?: "small" | "medium" | "large";
+    icon?: Component;
+    iconSize?: number;
+    padding?: number;
+    empty?: boolean;
+    error?: boolean;
+    iconColor?: string;
+    cta?: {
+        text: string;
+        onClick: (e: MouseEvent) => void;
+        props?: Record<string, any>;
+    } | Snippet;
+    children?: Snippet;
+    message?: Snippet | string;
+}, {}, "">;
+type IconMessage = ReturnType<typeof IconMessage>;
+export default IconMessage;

package/dist/components/Internationalization/InternationalizationProvider.svelte

@@ -1,11 +1,18 @@
-<script>import { setContext } from "svelte";
-import { InternationalizationService } from "./i18n.js";
-export let languages;
-const i18n = new InternationalizationService(languages);
-const locale = i18n.locale;
-setContext("i18n", i18n);
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import { InternationalizationService, type Language } from './i18n.js';
+
+	interface Props {
+		languages: Language[];
+		children?: import('svelte').Snippet;
+	}
+
+	let { languages, children }: Props = $props();
+	const i18n = new InternationalizationService(languages);
+	const locale = i18n.locale;
+	setContext('i18n', i18n);
 </script>
 
 {#key $locale}
-    <slot />
-{/key}
+	{@render children?.()}
+{/key}

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

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
-import { type Language } from "./i18n.js";
-declare const __propDef: {
-    props: {
-        languages: Language[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type InternationalizationProviderProps = typeof __propDef.props;
-export type InternationalizationProviderEvents = typeof __propDef.events;
-export type InternationalizationProviderSlots = typeof __propDef.slots;
-export default class InternationalizationProvider extends SvelteComponent<InternationalizationProviderProps, InternationalizationProviderEvents, InternationalizationProviderSlots> {
-}
-export {};
+import { type Language } from './i18n.js';
+declare const InternationalizationProvider: import("svelte").Component<{
+    languages: Language[];
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type InternationalizationProvider = ReturnType<typeof InternationalizationProvider>;
+export default InternationalizationProvider;

package/dist/components/Internationalization/LanguageToggle.svelte

@@ -1,63 +1,86 @@
-<script>import { getContext } from "svelte";
-import Dropdown from "../Dropdown/Dropdown.svelte";
-import Button from "../Button/Button.svelte";
-import {} from "./i18n.js";
-import ActionList from "../ActionList/ActionList.svelte";
-import ActionListItem from "../ActionList/ActionListItem.svelte";
-import Text from "../Text/Text.svelte";
-import { IconCaretDown } from "@hyvor/icons";
-import IconButton from "../IconButton/IconButton.svelte";
-export let position = "bottom";
-export let align = "start";
-export let caret = IconCaretDown;
-export let icon = false;
-export let size = "medium";
-const i18n = getContext("i18n");
-const currentLanguage = i18n ? i18n.localeLanguage : void 0;
-let show = false;
-function handleClick(language) {
-  i18n.setLocale(language.code);
-  show = false;
-}
-</script>
+<script lang="ts">
+	import { getContext, type Component, type ComponentProps } from 'svelte';
+	import Dropdown from '../Dropdown/Dropdown.svelte';
+	import Button from '../Button/Button.svelte';
+	import { type Language, type InternationalizationService } from './i18n.js';
+	import ActionList from '../ActionList/ActionList.svelte';
+	import ActionListItem from '../ActionList/ActionListItem.svelte';
+	import Text from '../Text/Text.svelte';
+	import { IconCaretDown } from '@hyvor/icons';
+	import IconButton from '../IconButton/IconButton.svelte';
 
+	interface Props {
+		position?: ComponentProps<typeof Dropdown>['position'];
+		align?: ComponentProps<typeof Dropdown>['align'];
+		caret?: Component;
+		icon?: boolean;
+		size?: 'medium' | 'small';
+	}
 
-{#if i18n && $currentLanguage}
+	let {
+		position = 'bottom',
+		align = 'start',
+		caret = IconCaretDown,
+		icon = false,
+		size = 'medium'
+	}: Props = $props();
+
+	const i18n = getContext<InternationalizationService>('i18n');
+	const currentLanguage = i18n ? i18n.localeLanguage : undefined;
+
+	let show = $state(false);
 
-    <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>
-    
+	function handleClick(language: Language) {
+		i18n.setLocale(language.code);
+		show = false;
+	}
+</script>
+
+{#if i18n && $currentLanguage}
+	<Dropdown bind:show {position} {align}>
+		{#snippet trigger()}
+			<span>
+				{#if icon}
+					<IconButton color="input" {size}>
+						{$currentLanguage.flag}
+					</IconButton>
+				{:else}
+					<Button color="input" {size}>
+						{#snippet start()}
+							<span>{$currentLanguage.flag}</span>
+						{/snippet}
+						{$currentLanguage.name}
+						{#snippet end()}
+							{@const SvelteComponent = caret}
+							<SvelteComponent size={12} />
+						{/snippet}
+					</Button>
+				{/if}
+			</span>
+		{/snippet}
+		{#snippet content()}
+			<ActionList>
+				{#each i18n.languages as language (language.code)}
+					<ActionListItem on:click={() => handleClick(language)}>
+						{#snippet start()}
+							<span class="flag">{language.flag}</span>
+						{/snippet}
+						<span class="name">
+							{language.name}
+						</span>
+						<Text small light>
+							{language.region}
+						</Text>
+					</ActionListItem>
+				{/each}
+			</ActionList>
+		{/snippet}
+	</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,22 +1,11 @@
-import { SvelteComponent } from "svelte";
-import { type ComponentProps, type ComponentType } from "svelte";
-import Dropdown from "../Dropdown/Dropdown.svelte";
-declare const __propDef: {
-    props: {
-        position?: ComponentProps<Dropdown>['position'];
-        align?: ComponentProps<Dropdown>['align'];
-        caret?: ComponentType | undefined;
-        icon?: boolean | undefined;
-        size?: "small" | "medium" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LanguageToggleProps = typeof __propDef.props;
-export type LanguageToggleEvents = typeof __propDef.events;
-export type LanguageToggleSlots = typeof __propDef.slots;
-export default class LanguageToggle extends SvelteComponent<LanguageToggleProps, LanguageToggleEvents, LanguageToggleSlots> {
-}
-export {};
+import { type Component, type ComponentProps } from 'svelte';
+import Dropdown from '../Dropdown/Dropdown.svelte';
+declare const LanguageToggle: Component<{
+    position?: ComponentProps<typeof Dropdown>["position"];
+    align?: ComponentProps<typeof Dropdown>["align"];
+    caret?: Component;
+    icon?: boolean;
+    size?: "medium" | "small";
+}, {}, "">;
+type LanguageToggle = ReturnType<typeof LanguageToggle>;
+export default LanguageToggle;