@hyvor/design 0.0.68 → 1.0.3

package/dist/components/ActionList/ActionList.svelte

@@ -1,14 +1,27 @@
-<script>import { setContext } from "svelte";
-export let selection = "none";
-export let selectionAlign = "start";
-$:
-  setContext("action-list-selection", selection);
-$:
-  setContext("action-list-selection-align", selectionAlign);
+<script lang="ts">
+	import { run } from 'svelte/legacy';
+
+	import { setContext } from 'svelte';
+
+	interface Props {
+		selection?: 'none' | 'single' | 'multi';
+		selectionAlign?: 'start' | 'end';
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let { selection = 'none', selectionAlign = 'start', children, ...rest }: Props = $props();
+
+	run(() => {
+		setContext('action-list-selection', selection);
+	});
+	run(() => {
+		setContext('action-list-selection-align', selectionAlign);
+	});
 </script>
 
-<div class="action-list" {...$$restProps}>
-	<slot />
+<div class="action-list" {...rest}>
+	{@render children?.()}
 </div>
 
 <style></style>

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

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        selection?: "none" | "single" | "multi" | undefined;
-        selectionAlign?: "start" | "end" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ActionListProps = typeof __propDef.props;
-export type ActionListEvents = typeof __propDef.events;
-export type ActionListSlots = typeof __propDef.slots;
-export default class ActionList extends SvelteComponent<ActionListProps, ActionListEvents, ActionListSlots> {
-}
-export {};
+declare const ActionList: import("svelte").Component<{
+    [key: string]: any;
+    selection?: "none" | "single" | "multi";
+    selectionAlign?: "start" | "end";
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type ActionList = ReturnType<typeof ActionList>;
+export default ActionList;

package/dist/components/ActionList/ActionListGroup.svelte

@@ -1,10 +1,20 @@
-<script>import { setContext } from "svelte";
-export let title = void 0;
-export let divider = false;
-export let selection = void 0;
-$:
-  if (selection !== void 0)
-    setContext("action-list-selection", selection);
+<script lang="ts">
+	import { run } from 'svelte/legacy';
+
+	import { setContext } from 'svelte';
+
+	interface Props {
+		title?: string | undefined;
+		divider?: boolean;
+		selection?: undefined | 'single' | 'multi';
+		children?: import('svelte').Snippet;
+	}
+
+	let { title = undefined, divider = false, selection = undefined, children }: Props = $props();
+
+	run(() => {
+		if (selection !== undefined) setContext('action-list-selection', selection);
+	});
 </script>
 
 <div class="action-list-group" class:has-divider={divider}>
@@ -16,7 +26,7 @@ $:
 		<div class="title">{title}</div>
 	{/if}
 
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>

package/dist/components/ActionList/ActionListGroup.svelte.d.ts

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        title?: string | undefined;
-        divider?: boolean | undefined;
-        selection?: undefined | 'single' | 'multi';
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ActionListGroupProps = typeof __propDef.props;
-export type ActionListGroupEvents = typeof __propDef.events;
-export type ActionListGroupSlots = typeof __propDef.slots;
-export default class ActionListGroup extends SvelteComponent<ActionListGroupProps, ActionListGroupEvents, ActionListGroupSlots> {
-}
-export {};
+declare const ActionListGroup: import("svelte").Component<{
+    title?: string | undefined;
+    divider?: boolean;
+    selection?: undefined | "single" | "multi";
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type ActionListGroup = ReturnType<typeof ActionListGroup>;
+export default ActionListGroup;

package/dist/components/ActionList/ActionListItem.svelte

@@ -1,57 +1,81 @@
-<script>import { getContext, createEventDispatcher } from "svelte";
-import Checkbox from "../Checkbox/Checkbox.svelte";
-import { IconCheck } from "@hyvor/icons";
-import Selected from "./Selected.svelte";
-const selection = getContext("action-list-selection");
-const selectionAlign = getContext("action-list-selection-align");
-export let selected = false;
-selected = selection !== "none" && selected;
-export let disabled = false;
-export let type = "default";
-const dispatch = createEventDispatcher();
-function handleClick() {
-  dispatch("select");
-}
+<script lang="ts">
+	import { createBubbler, handlers } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+	import { getContext, createEventDispatcher } from 'svelte';
+	import Selected from './Selected.svelte';
+
+	const selection: 'none' | 'single' | 'multi' = getContext('action-list-selection');
+	const selectionAlign: 'start' | 'end' = getContext('action-list-selection-align');
+
+	interface Props {
+		selected?: boolean;
+		disabled?: boolean;
+		type?: 'default' | 'danger';
+		start?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+		description?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let {
+		selected = $bindable(false),
+		disabled = false,
+		type = 'default',
+		start,
+		children,
+		description,
+		end,
+		...rest
+	}: Props = $props();
+
+	selected = selection !== 'none' && selected;
+
+	const dispatch = createEventDispatcher();
+
+	function handleClick() {
+		dispatch('select');
+	}
 </script>
 
 <div
 	class="action-list-item"
 	class:disabled
 	class:danger={type === 'danger'}
-	on:click={handleClick}
+	onclick={handlers(handleClick, bubble('click'))}
 	role="button"
 	tabindex="0"
-	on:keyup={(e) => {
+	onkeyup={(e) => {
 		if (e.key === 'Enter') {
 			handleClick();
 		}
 	}}
-	{...$$restProps}
-	on:click
+	{...rest}
 >
 	{#if selectionAlign === 'start'}
 		<Selected {selection} bind:selected />
 	{/if}
 
-	{#if $$slots.start}
+	{#if start}
 		<span class="start">
-			<slot name="start" />
+			{@render start?.()}
 		</span>
 	{/if}
 
 	<span class="middle">
-		<slot />
+		{@render children?.()}
 
-		{#if $$slots.description}
+		{#if description}
 			<div class="description">
-				<slot name="description" />
+				{@render description?.()}
 			</div>
 		{/if}
 	</span>
 
-	{#if $$slots.end}
+	{#if end}
 		<span class="end">
-			<slot name="end" />
+			{@render end?.()}
 		</span>
 	{/if}
 

package/dist/components/ActionList/ActionListItem.svelte.d.ts

@@ -1,27 +1,29 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        selected?: boolean | undefined;
-        disabled?: boolean | undefined;
-        type?: "default" | "danger" | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        click: MouseEvent;
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        start: {};
-        default: {};
-        description: {};
-        end: {};
-    };
-};
-export type ActionListItemProps = typeof __propDef.props;
-export type ActionListItemEvents = typeof __propDef.events;
-export type ActionListItemSlots = typeof __propDef.slots;
-export default class ActionListItem extends SvelteComponent<ActionListItemProps, ActionListItemEvents, ActionListItemSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ActionListItem: $$__sveltets_2_IsomorphicComponent<{
+    [key: string]: any;
+    selected?: boolean;
+    disabled?: boolean;
+    type?: "default" | "danger";
+    start?: import("svelte").Snippet;
+    children?: import("svelte").Snippet;
+    description?: import("svelte").Snippet;
+    end?: import("svelte").Snippet;
+}, {
+    select: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "selected">;
+type ActionListItem = InstanceType<typeof ActionListItem>;
+export default ActionListItem;

package/dist/components/ActionList/Selected.svelte

@@ -1,7 +1,13 @@
-<script>import Checkbox from "../Checkbox/Checkbox.svelte";
-import { IconCheck } from "@hyvor/icons";
-export let selection;
-export let selected;
+<script lang="ts">
+	import Checkbox from '../Checkbox/Checkbox.svelte';
+	import { IconCheck } from '@hyvor/icons';
+
+	interface Props {
+		selection: 'none' | 'single' | 'multi';
+		selected: boolean;
+	}
+
+	let { selection, selected = $bindable(false) }: Props = $props();
 </script>
 
 {#if selection !== 'none'}

package/dist/components/ActionList/Selected.svelte.d.ts

@@ -1,17 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        selection: 'none' | 'single' | 'multi';
-        selected: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SelectedProps = typeof __propDef.props;
-export type SelectedEvents = typeof __propDef.events;
-export type SelectedSlots = typeof __propDef.slots;
-export default class Selected extends SvelteComponent<SelectedProps, SelectedEvents, SelectedSlots> {
-}
-export {};
+declare const Selected: import("svelte").Component<{
+    selection: "none" | "single" | "multi";
+    selected: boolean;
+}, {}, "selected">;
+type Selected = ReturnType<typeof Selected>;
+export default Selected;

package/dist/components/Avatar/Avatar.svelte

@@ -1,14 +1,21 @@
-<script>export let size = "medium";
-export let alt = "";
-const sizes = {
-  small: 24,
-  medium: 32,
-  large: 48
-};
-size = typeof size === "number" ? size : sizes[size];
+<script lang="ts">
+	interface Props {
+		size?: number | 'small' | 'medium' | 'large';
+		alt?: string;
+		[key: string]: any;
+	}
+
+	let { size = $bindable('medium'), alt = '', ...rest }: Props = $props();
+
+	const sizes = {
+		small: 24,
+		medium: 32,
+		large: 48
+	};
+	size = typeof size === 'number' ? size : sizes[size];
 </script>
 
-<img {alt} {...$$restProps} style={`width: ${size}px; height: ${size}px;`} />
+<img {alt} {...rest} style={`width: ${size}px; height: ${size}px;`} />
 
 <style>
 	img {

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

@@ -1,18 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        size?: number | "small" | "medium" | "large" | undefined;
-        alt?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AvatarProps = typeof __propDef.props;
-export type AvatarEvents = typeof __propDef.events;
-export type AvatarSlots = typeof __propDef.slots;
-export default class Avatar extends SvelteComponent<AvatarProps, AvatarEvents, AvatarSlots> {
-}
-export {};
+declare const Avatar: import("svelte").Component<{
+    [key: string]: any;
+    size?: number | "small" | "medium" | "large";
+    alt?: string;
+}, {}, "size">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/Avatar/AvatarStack.svelte

@@ -1,14 +1,20 @@
-<script>export let size = "medium";
-const sizes = {
-  small: 24,
-  medium: 32,
-  large: 48
-};
-size = typeof size === "number" ? size : sizes[size];
+<script lang="ts">
+	interface Props {
+		size?: number | 'small' | 'medium' | 'large';
+		children?: import('svelte').Snippet;
+	}
+
+	let { size = $bindable('medium'), children }: Props = $props();
+	const sizes = {
+		small: 24,
+		medium: 32,
+		large: 48
+	};
+	size = typeof size === 'number' ? size : sizes[size];
 </script>
 
 <div class="stack" style:--local-size={size + 'px'}>
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>

package/dist/components/Avatar/AvatarStack.svelte.d.ts

@@ -1,18 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        size?: number | "small" | "medium" | "large" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type AvatarStackProps = typeof __propDef.props;
-export type AvatarStackEvents = typeof __propDef.events;
-export type AvatarStackSlots = typeof __propDef.slots;
-export default class AvatarStack extends SvelteComponent<AvatarStackProps, AvatarStackEvents, AvatarStackSlots> {
-}
-export {};
+declare const AvatarStack: import("svelte").Component<{
+    size?: number | "small" | "medium" | "large";
+    children?: import("svelte").Snippet;
+}, {}, "size">;
+type AvatarStack = ReturnType<typeof AvatarStack>;
+export default AvatarStack;

package/dist/components/Base/Base.svelte

@@ -1,12 +1,20 @@
-<script>import ConfirmModalProvider from "./../Modal/ConfirmModalProvider.svelte";
-import DarkProvider from "./../Dark/DarkProvider.svelte";
-import "../../index.js";
-import ToastProvider from "../Toast/ToastProvider.svelte";
-export let dark = false;
+<script lang="ts">
+	import ConfirmModalProvider from './../Modal/ConfirmModalProvider.svelte';
+	// import InternationalizationProvider from './../Internationalization/InternationalizationProvider.svelte';
+	import DarkProvider from './../Dark/DarkProvider.svelte';
+	import '../../index.js';
+	import ToastProvider from '../Toast/ToastProvider.svelte';
+
+	interface Props {
+		dark?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let { dark = false, children }: Props = $props();
 </script>
 
 <div id="base">
-	<slot />
+	{@render children?.()}
 </div>
 
 {#if dark}

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

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
 import '../../index.js';
-declare const __propDef: {
-    props: {
-        dark?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type BaseProps = typeof __propDef.props;
-export type BaseEvents = typeof __propDef.events;
-export type BaseSlots = typeof __propDef.slots;
-export default class Base extends SvelteComponent<BaseProps, BaseEvents, BaseSlots> {
-}
-export {};
+declare const Base: import("svelte").Component<{
+    dark?: boolean;
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type Base = ReturnType<typeof Base>;
+export default Base;

package/dist/components/Box/Box.svelte

@@ -1,4 +1,11 @@
-<script>export let as = "div";
+<script lang="ts">
+	interface Props {
+		as?: string;
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let { as = 'div', children, ...rest }: Props = $props();
 </script>
 
 <svelte:element
@@ -6,7 +13,7 @@
 	style:box-shadow="var(--box-shadow)"
 	style:border-radius="var(--box-radius)"
 	style:background-color="var(--box-background)"
-	{...$$restProps}
+	{...rest}
 >
-	<slot />
+	{@render children?.()}
 </svelte:element>

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

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        as?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type BoxProps = typeof __propDef.props;
-export type BoxEvents = typeof __propDef.events;
-export type BoxSlots = typeof __propDef.slots;
-export default class Box extends SvelteComponent<BoxProps, BoxEvents, BoxSlots> {
-}
-export {};
+declare const Box: import("svelte").Component<{
+    [key: string]: any;
+    as?: string;
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type Box = ReturnType<typeof Box>;
+export default Box;

package/dist/components/Button/Button.svelte

@@ -1,46 +1,73 @@
-<script>export let as = "button";
-export let size = "medium";
-export let color = "accent";
-export let block = false;
-export let variant = "fill";
-export let align = "center";
-export let button = {};
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+
+	interface Props {
+		as?: 'button' | 'a';
+		size?: 'x-small' | 'small' | 'medium' | 'large';
+		color?: 'accent' | 'gray' | 'green' | 'red' | 'blue' | 'orange' | 'input';
+		block?: boolean;
+		variant?: 'fill' | 'fill-light' | 'outline' | 'invisible' | 'outline-fill';
+		align?: 'start' | 'center';
+		button?: any;
+		start?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
+		action?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let {
+		as = 'button',
+		size = 'medium',
+		color = 'accent',
+		block = false,
+		variant = 'fill',
+		align = 'center',
+		button = $bindable({} as HTMLButtonElement | HTMLAnchorElement),
+		start,
+		children,
+		end,
+		action,
+		...rest
+	}: Props = $props();
 </script>
 
 <svelte:element
 	this={as}
 	class="button {size} {color} {variant} {align}"
 	class:block
-	on:keyup
-	on:keydown
-	on:keypress
-	on:focus
-	on:blur
-	on:click
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:change
+	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"
 	bind:this={button}
-	{...$$restProps}
+	{...rest}
 >
 	<span class="button-content">
-		{#if $$slots.start}
-			<span class="slot start"><slot name="start" /></span>
+		{#if start}
+			<span class="slot start">{@render start?.()}</span>
 		{/if}
 
-		<slot></slot>
+		{@render children?.()}
 
-		{#if $$slots.end}
-			<span class="slot end"><slot name="end" /></span>
+		{#if end}
+			<span class="slot end">{@render end?.()}</span>
 		{/if}
 	</span>
 
-	{#if $$slots.action}
+	{#if action}
 		<span class="action">
-			<slot name="action" />
+			{@render action?.()}
 		</span>
 	{/if}
 </svelte:element>