@hyvor/design 0.0.68 → 1.0.3

package/dist/components/TabNav/TabNavItem.svelte.d.ts

@@ -1,24 +1,10 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        active?: boolean | undefined;
-        name: string;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        start: {};
-        default: {};
-        end: {};
-    };
-};
-export type TabNavItemProps = typeof __propDef.props;
-export type TabNavItemEvents = typeof __propDef.events;
-export type TabNavItemSlots = typeof __propDef.slots;
-export default class TabNavItem extends SvelteComponent<TabNavItemProps, TabNavItemEvents, TabNavItemSlots> {
-}
-export {};
+declare const TabNavItem: import("svelte").Component<{
+    [key: string]: any;
+    active?: boolean;
+    name: string;
+    start?: import("svelte").Snippet;
+    children?: import("svelte").Snippet;
+    end?: import("svelte").Snippet;
+}, {}, "">;
+type TabNavItem = ReturnType<typeof TabNavItem>;
+export default TabNavItem;

package/dist/components/Table/Table.svelte

@@ -1,6 +1,13 @@
-<script>export let columns;
-export let hover = false;
-const hoverCss = hover ? "--local-hover-color: var(--hover);" : "";
+<script lang="ts">
+	interface Props {
+		columns: string;
+		hover?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let { columns, hover = false, children }: Props = $props();
+
+	const hoverCss = hover ? '--local-hover-color: var(--hover);' : '';
 </script>
 
 <div
@@ -10,5 +17,5 @@ const hoverCss = hover ? "--local-hover-color: var(--hover);" : "";
     {hoverCss}
 "
 >
-	<slot />
+	{@render children?.()}
 </div>

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

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        columns: string;
-        hover?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TableProps = typeof __propDef.props;
-export type TableEvents = typeof __propDef.events;
-export type TableSlots = typeof __propDef.slots;
-export default class Table extends SvelteComponent<TableProps, TableEvents, TableSlots> {
-}
-export {};
+declare const Table: import("svelte").Component<{
+    columns: string;
+    hover?: boolean;
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/Table/TableRow.svelte

@@ -1,8 +1,16 @@
-<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 {...$$props}>
-	<slot />
+<div class:head {...rest}>
+	{@render children()}
 </div>
 
 <style>

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,16 +1,50 @@
-<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
@@ -19,30 +53,30 @@ let tabindex = interactive ? 0 : void 0;
 	{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
+	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 $$slots.start}
-		<slot name="start" />
+	{#if start}
+		{@render start?.()}
 	{/if}
 
-	<slot />
+	{@render children?.()}
 
-	{#if $$slots.end}
-		<slot name="end" />
+	{#if end}
+		{@render end?.()}
 	{/if}
 </svelte:element>
 

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,11 +1,25 @@
-<script>export let small = false;
-export let light = false;
-export let normal = false;
-export let bold = false;
+<script lang="ts">
+	interface Props {
+		small?: boolean;
+		light?: boolean;
+		normal?: boolean; // weight
+		bold?: boolean;
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let {
+		small = false,
+		light = false,
+		normal = false,
+		bold = false,
+		children,
+		...rest
+	}: Props = $props();
 </script>
 
-<span class:light class:small class:normal class:bold {...$$restProps}>
-	<slot />
+<span class:light class:small class:normal class:bold {...rest}>
+	{@render children?.()}
 </span>
 
 <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,37 +1,58 @@
-<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}
+	{#if start}
 		<span class="slot start">
-			<slot name="start" />
+			{@render start?.()}
 		</span>
 	{/if}
 
 	<input
-		{...$$restProps}
+		{...rest}
 		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
+		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 $$slots.end}
+	{#if end}
 		<span class="slot end">
-			<slot name="end" />
+			{@render end?.()}
 		</span>
 	{/if}
 </label>

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,16 +1,38 @@
-<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) => {
+	onclick={() => textarea.focus()}
+	onkeydown={(e) => {
 		if (e.key === 'Enter') {
 			textarea.focus();
 		}
@@ -18,34 +40,34 @@ export let textarea = {};
 	role="textbox"
 	tabindex="0"
 >
-	{#if $$slots.start}
+	{#if start}
 		<span class="slot start">
-			<slot name="start" />
+			{@render 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
+		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}
-		{...$$restProps}
+		{...rest}
 	></textarea>
 
-	{#if $$slots.end}
+	{#if end}
 		<span class="slot end">
-			<slot name="end" />
+			{@render end?.()}
 		</span>
 	{/if}
 </span>

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

@@ -1,37 +1,13 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: any;
-        block?: boolean | undefined;
-        rows?: number | undefined;
-        cols?: number | undefined;
-        state?: "default" | "error" | "success" | "warning" | undefined;
-        textarea?: HTMLTextAreaElement | 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 TextareaProps = typeof __propDef.props;
-export type TextareaEvents = typeof __propDef.events;
-export type TextareaSlots = typeof __propDef.slots;
-export default class Textarea extends SvelteComponent<TextareaProps, TextareaEvents, TextareaSlots> {
-}
-export {};
+declare const Textarea: import("svelte").Component<{
+    [key: string]: any;
+    value?: any;
+    block?: boolean;
+    rows?: number;
+    cols?: number;
+    state?: "default" | "success" | "warning" | "error";
+    textarea?: HTMLTextAreaElement;
+    start?: import("svelte").Snippet;
+    end?: import("svelte").Snippet;
+}, {}, "value" | "textarea">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;