@hyvor/design 0.0.67 → 1.0.3

package/dist/components/Table/TableRow.svelte

@@ -1,28 +1,36 @@
-<script>export let head = false;
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		head?: boolean;
+		children: Snippet;
+	}
+
+	const { head = false, children, ...rest }: Props = $props();
 </script>
 
+<div class:head {...rest}>
+	{@render children()}
+</div>
+
 <style>
-    div {
-        display: grid;
-        padding: 8px 18px;
-        border-radius: 20px;
-        align-items: flex-start;
-        grid-template-columns: var(--local-columns);
-    }
-    div.head {
-        font-weight: 600;
-        background: var(--accent-lightest);
-        margin-bottom: 5px;
-    }
-    div:hover:not(.head) {
-        background-color: var(--local-hover-color);
-    }
-    div > :global(*) {
-        padding-right: 5px;
-        word-wrap: break-word;
-    }
+	div {
+		display: grid;
+		padding: 8px 18px;
+		border-radius: 20px;
+		align-items: flex-start;
+		grid-template-columns: var(--local-columns);
+	}
+	div.head {
+		font-weight: 600;
+		background: var(--accent-lightest);
+		margin-bottom: 5px;
+	}
+	div:hover:not(.head) {
+		background-color: var(--local-hover-color);
+	}
+	div > :global(*) {
+		padding-right: 5px;
+		word-wrap: break-word;
+	}
 </style>
-
-<div class:head={head} {...$$props}>
-    <slot />
-</div>

package/dist/components/Table/TableRow.svelte.d.ts

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        head?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TableRowProps = typeof __propDef.props;
-export type TableRowEvents = typeof __propDef.events;
-export type TableRowSlots = typeof __propDef.slots;
-export default class TableRow extends SvelteComponent<TableRowProps, TableRowEvents, TableRowSlots> {
-}
-export {};
+import type { Snippet } from 'svelte';
+declare const TableRow: import("svelte").Component<{
+    head?: boolean;
+    children: Snippet;
+}, {}, "">;
+type TableRow = ReturnType<typeof TableRow>;
+export default TableRow;

package/dist/components/Tag/Tag.svelte

@@ -1,59 +1,85 @@
-<script>export let as = "span";
-export let size = "medium";
-export let color = "default";
-export let interactive = false;
-export let outline = false;
-export let fill = false;
-export let bg = void 0;
-export let fg = void 0;
-let styleClass = "default";
-if (outline) {
-  styleClass = fill ? "outline-fill" : "outline";
-}
-let tabindex = interactive ? 0 : void 0;
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+
+	interface Props {
+		as?: 'button' | 'a' | 'span';
+		size?: 'x-small' | 'small' | 'medium' | 'large';
+		color?:
+			| 'default' // default tag (categories)
+			| 'accent'
+			| 'green'
+			| 'red'
+			| 'blue'
+			| 'orange';
+		interactive?: boolean;
+		outline?: boolean;
+		fill?: boolean;
+		bg?: string | undefined;
+		fg?: string | undefined;
+		start?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let {
+		as = 'span',
+		size = 'medium',
+		color = 'default',
+		interactive = false,
+		outline = false,
+		fill = false,
+		bg = undefined,
+		fg = undefined,
+		start,
+		end,
+		children,
+		...rest
+	}: Props = $props();
+
+	let styleClass = $state('default');
+	if (outline) {
+		styleClass = fill ? 'outline-fill' : 'outline';
+	}
+
+	let tabindex = interactive ? 0 : undefined;
 </script>
 
-
 <svelte:element
-    this={as}
-    role={interactive ? 'button' : undefined}
-    tabindex={tabindex}
-    class="button color-{color} style-{styleClass} size-{size}"
-    class:interactive
-    class:has-start={$$slots.start}
-    class:has-end={$$slots.end}
-    {...$$restProps}
-
-    on:keyup
-    on:keydown
-    on:keypress
-    on:focus
-    on:blur
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    on:change
-    
-    style:background-color={bg}
-    style:color={fg}
+	this={as}
+	role={interactive ? 'button' : undefined}
+	{tabindex}
+	class="button color-{color} style-{styleClass} size-{size}"
+	class:interactive
+	class:has-start={start}
+	class:has-end={end}
+	{...rest}
+	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')}
+	style:background-color={bg}
+	style:color={fg}
 >
+	{#if start}
+		{@render start?.()}
+	{/if}
 
-    {#if $$slots.start}
-        <slot name="start" />
-    {/if}
-
-    <slot />
-
-    {#if $$slots.end}
-        <slot name="end" />
-    {/if}
+	{@render children?.()}
 
+	{#if end}
+		{@render end?.()}
+	{/if}
 </svelte:element>
 
-
-
-
 <style>span {
   vertical-align: middle;
   border-radius: 20px;
@@ -183,4 +209,4 @@ span.style-outline-fill.color-orange {
   opacity: 0.5 !important;
   cursor: not-allowed;
   box-shadow: none !important;
-}</style>
+}</style>

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

@@ -1,39 +1,16 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        as?: "span" | "button" | "a" | undefined;
-        size?: "small" | "medium" | "large" | "x-small" | undefined;
-        color?: "default" | "accent" | "green" | "red" | "blue" | "orange" | undefined;
-        interactive?: boolean | undefined;
-        outline?: boolean | undefined;
-        fill?: boolean | undefined;
-        bg?: string | undefined;
-        fg?: string | 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: {
-        start: {};
-        default: {};
-        end: {};
-    };
-};
-export type TagProps = typeof __propDef.props;
-export type TagEvents = typeof __propDef.events;
-export type TagSlots = typeof __propDef.slots;
-export default class Tag extends SvelteComponent<TagProps, TagEvents, TagSlots> {
-}
-export {};
+declare const Tag: import("svelte").Component<{
+    [key: string]: any;
+    as?: "button" | "a" | "span";
+    size?: "x-small" | "small" | "medium" | "large";
+    color?: "default" | "accent" | "green" | "red" | "blue" | "orange";
+    interactive?: boolean;
+    outline?: boolean;
+    fill?: boolean;
+    bg?: string | undefined;
+    fg?: string | undefined;
+    start?: import("svelte").Snippet;
+    end?: import("svelte").Snippet;
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

package/dist/components/Text/Text.svelte

@@ -1,31 +1,38 @@
-<script>export let small = false;
-export let light = false;
-export let normal = false;
-export let bold = false;
-</script>
+<script lang="ts">
+	interface Props {
+		small?: boolean;
+		light?: boolean;
+		normal?: boolean; // weight
+		bold?: boolean;
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
 
-<span
-    class:light
-    class:small
-    class:normal
-    class:bold
+	let {
+		small = false,
+		light = false,
+		normal = false,
+		bold = false,
+		children,
+		...rest
+	}: Props = $props();
+</script>
 
-    {...$$restProps}
->
-    <slot />
+<span class:light class:small class:normal class:bold {...rest}>
+	{@render children?.()}
 </span>
 
 <style>
-    span.light {
-        color: var(--text-light);
-    }
-    span.small {
-        font-size: 0.8em;
-    }
-    span.normal {
-        font-weight: 400;
-    }
-    span.bold {
-        font-weight: 600;
-    }
-</style>
+	span.light {
+		color: var(--text-light);
+	}
+	span.small {
+		font-size: 0.8em;
+	}
+	span.normal {
+		font-weight: 400;
+	}
+	span.bold {
+		font-weight: 600;
+	}
+</style>

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

@@ -1,22 +1,10 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        small?: boolean | undefined;
-        light?: boolean | undefined;
-        normal?: boolean | undefined;
-        bold?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TextProps = typeof __propDef.props;
-export type TextEvents = typeof __propDef.events;
-export type TextSlots = typeof __propDef.slots;
-export default class Text extends SvelteComponent<TextProps, TextEvents, TextSlots> {
-}
-export {};
+declare const Text: import("svelte").Component<{
+    [key: string]: any;
+    small?: boolean;
+    light?: boolean;
+    normal?: boolean;
+    bold?: boolean;
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/components/TextInput/TextInput.svelte

@@ -1,39 +1,60 @@
-<script>export let state = "default";
-export let size = "medium";
-export let block = false;
-export let value = void 0;
-export let input = {};
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+
+	interface Props {
+		state?: 'default' | 'error' | 'success' | 'warning';
+		size?: 'small' | 'medium' | 'large' | 'x-small';
+		block?: boolean;
+		value?: any;
+		input?: HTMLInputElement;
+		start?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let {
+		state = 'default',
+		size = 'medium',
+		block = false,
+		value = $bindable(undefined),
+		input = $bindable({} as HTMLInputElement),
+		start,
+		end,
+		...rest
+	}: Props = $props();
 </script>
 
 <label class="input-wrap state-{state} size-{size}" class:block>
-    {#if $$slots.start}
-        <span class="slot start">
-            <slot name="start" />
-        </span>
-    {/if}
-
-    <input
-        {...$$restProps}
-        bind:value
-        bind:this={input}
-        on:keyup
-        on:keydown
-        on:keypress
-        on:focus
-        on:blur
-        on:click
-        on:mouseover
-        on:mouseenter
-        on:mouseleave
-        on:change
-        on:input
-    />
-
-    {#if $$slots.end}
-        <span class="slot end">
-            <slot name="end" />
-        </span>
-    {/if}
+	{#if start}
+		<span class="slot start">
+			{@render start?.()}
+		</span>
+	{/if}
+
+	<input
+		{...rest}
+		bind:value
+		bind:this={input}
+		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')}
+		oninput={bubble('input')}
+	/>
+
+	{#if end}
+		<span class="slot end">
+			{@render end?.()}
+		</span>
+	{/if}
 </label>
 
 <style>.slot {

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

@@ -1,36 +1,12 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        state?: "default" | "error" | "success" | "warning" | undefined;
-        size?: "small" | "medium" | "large" | "x-small" | undefined;
-        block?: boolean | undefined;
-        value?: any;
-        input?: HTMLInputElement | undefined;
-    };
-    events: {
-        keyup: KeyboardEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        click: MouseEvent;
-        mouseover: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        change: Event;
-        input: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        start: {};
-        end: {};
-    };
-};
-export type TextInputProps = typeof __propDef.props;
-export type TextInputEvents = typeof __propDef.events;
-export type TextInputSlots = typeof __propDef.slots;
-export default class TextInput extends SvelteComponent<TextInputProps, TextInputEvents, TextInputSlots> {
-}
-export {};
+declare const TextInput: import("svelte").Component<{
+    [key: string]: any;
+    state?: "default" | "error" | "success" | "warning";
+    size?: "small" | "medium" | "large" | "x-small";
+    block?: boolean;
+    value?: any;
+    input?: HTMLInputElement;
+    start?: import("svelte").Snippet;
+    end?: import("svelte").Snippet;
+}, {}, "value" | "input">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;

package/dist/components/Textarea/Textarea.svelte

@@ -1,53 +1,75 @@
-<script>export let value = void 0;
-export let block = false;
-export let rows = 5;
-export let cols = 40;
-export let state = "default";
-export let textarea = {};
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+
+	interface Props {
+		value?: any;
+		block?: boolean;
+		rows?: number;
+		cols?: number;
+		state?: 'default' | 'success' | 'warning' | 'error';
+		textarea?: HTMLTextAreaElement;
+		start?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let {
+		value = $bindable(undefined),
+		block = false,
+		rows = 5,
+		cols = 40,
+		state = 'default',
+		textarea = $bindable({} as HTMLTextAreaElement),
+		start,
+		end,
+		...rest
+	}: Props = $props();
 </script>
 
 <span
-    class="input-wrap state-{state}"
-    class:block
-    on:click={() => textarea.focus()}
-    on:keydown={(e) => {
-        if (e.key === "Enter") {
-            textarea.focus();
-        }
-    }}
-    role="textbox"
-    tabindex="0"
+	class="input-wrap state-{state}"
+	class:block
+	onclick={() => textarea.focus()}
+	onkeydown={(e) => {
+		if (e.key === 'Enter') {
+			textarea.focus();
+		}
+	}}
+	role="textbox"
+	tabindex="0"
 >
-    {#if $$slots.start}
-        <span class="slot start">
-            <slot name="start" />
-        </span>
-    {/if}
-
-    <textarea
-        bind:value
-        bind:this={textarea}
-        on:keyup
-        on:keydown
-        on:keypress
-        on:focus
-        on:blur
-        on:click
-        on:mouseover
-        on:mouseenter
-        on:mouseleave
-        on:change
-        on:input
-        {rows}
-        {cols}
-        {...$$restProps}
-    ></textarea>
-
-    {#if $$slots.end}
-        <span class="slot end">
-            <slot name="end" />
-        </span>
-    {/if}
+	{#if start}
+		<span class="slot start">
+			{@render start?.()}
+		</span>
+	{/if}
+
+	<textarea
+		bind:value
+		bind:this={textarea}
+		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')}
+		oninput={bubble('input')}
+		{rows}
+		{cols}
+		{...rest}
+	></textarea>
+
+	{#if end}
+		<span class="slot end">
+			{@render end?.()}
+		</span>
+	{/if}
 </span>
 
 <style>.input-wrap {