@hyvor/design 0.0.68 → 1.0.5

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

@@ -1,33 +1,11 @@
-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> {
+interface Props {
+    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;
+    [key: string]: any;
 }
-export {};
+declare const IconButton: import("svelte").Component<Props, {}, "size">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/IconMessage/IconMessage.svelte

@@ -1,71 +1,126 @@
-<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 = 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;
-if (empty) {
-  message = message || "No results found";
-  icon = IconInbox;
-}
-if (error) {
-  message = message || "Something went wrong";
-  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 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 {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 class="icon" style:color={iconColor} {...rest}>
+		<Icon size={iconSize + 'px'} />
 	</div>
 
 	<div class="message">
-		{#if $$slots.default}
-			<slot />
-		{:else if $$slots.message}
-			<slot name="message" />
-		{:else if message}
+		{#if children}
+			{@render children()}
+		{:else if typeof message === 'string'}
 			{message}
+		{:else if message}
+			{@render message()}
 		{/if}
 	</div>
 
-	{#if cta || $$slots.cta}
+	{#if cta}
 		<div class="cta">
-			{#if $$slots.cta}
-				<slot name="cta" />
-			{:else}
-				<Button on:click={onCtaClick} {size} {...cta?.props}>
-					{cta?.text}
+			{#if typeof cta === 'object'}
+				<Button on:click={onCtaClick} {size} {...cta.props}>
+					{cta.text}
 				</Button>
+			{:else}
+				{@render cta()}
 			{/if}
 		</div>
 	{/if}

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

@@ -1,35 +1,19 @@
-import { SvelteComponent } 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;
-        padding?: number | undefined;
-        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;
-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 />
+	{@render children?.()}
 {/key}

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

@@ -1,19 +1,8 @@
-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> {
+interface Props {
+    languages: Language[];
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const InternationalizationProvider: import("svelte").Component<Props, {}, "">;
+type InternationalizationProvider = ReturnType<typeof InternationalizationProvider>;
+export default InternationalizationProvider;

package/dist/components/Internationalization/LanguageToggle.svelte

@@ -1,54 +1,80 @@
-<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 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';
+	}
+
+	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);
+
+	function handleClick(language: Language) {
+		i18n.setLocale(language.code);
+		show = false;
+	}
 </script>
 
 {#if i18n && $currentLanguage}
 	<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>
+		{#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}
 

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

@@ -1,22 +1,12 @@
-import { SvelteComponent } from "svelte";
-import { type ComponentProps, type ComponentType } from 'svelte';
+import { type Component, type ComponentProps } 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> {
+interface Props {
+    position?: ComponentProps<typeof Dropdown>['position'];
+    align?: ComponentProps<typeof Dropdown>['align'];
+    caret?: Component;
+    icon?: boolean;
+    size?: 'medium' | 'small';
 }
-export {};
+declare const LanguageToggle: Component<Props, {}, "">;
+type LanguageToggle = ReturnType<typeof LanguageToggle>;
+export default LanguageToggle;