@hyvor/design 0.0.68 → 1.0.5

package/dist/components/TabNav/TabNavItem.svelte

@@ -1,24 +1,45 @@
-<script>import { getContext } from "svelte";
-export let active = false;
-export let name;
-const activeStore = getContext("tab-nav-active");
-$:
-  isActive = $activeStore === name || active;
-function handleClick() {
-  activeStore.set(name);
-}
+<script lang="ts">
+	import { createBubbler, handlers } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+	import { getContext } from 'svelte';
+	import type { Writable } from 'svelte/store';
+
+	interface Props {
+		active?: boolean;
+		name: string;
+		start?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let { active = false, name, start, children, end, ...rest }: Props = $props();
+
+	const activeStore = getContext('tab-nav-active') as Writable<string>;
+
+	let isActive = $derived($activeStore === name || active);
+
+	function handleClick() {
+		activeStore.set(name);
+	}
 </script>
 
-<button class="tab" class:active={isActive} on:click={handleClick} {...$$restProps} on:click>
-	{#if $$slots.start}
+<button
+	class="tab"
+	class:active={isActive}
+	onclick={handlers(handleClick, bubble('click'))}
+	{...rest}
+>
+	{#if start}
 		<span class="start">
-			<slot name="start" />
+			{@render start?.()}
 		</span>
 	{/if}
-	<slot />
-	{#if $$slots.end}
+	{@render children?.()}
+	{#if end}
 		<span class="end">
-			<slot name="end" />
+			{@render end?.()}
 		</span>
 	{/if}
 </button>

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

@@ -1,24 +1,11 @@
-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> {
+interface Props {
+    active?: boolean;
+    name: string;
+    start?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+    end?: import('svelte').Snippet;
+    [key: string]: any;
 }
-export {};
+declare const TabNavItem: import("svelte").Component<Props, {}, "">;
+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,8 @@
-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> {
+interface Props {
+    columns: string;
+    hover?: boolean;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const Table: import("svelte").Component<Props, {}, "">;
+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,8 @@
-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> {
+import type { Snippet } from 'svelte';
+interface Props {
+    head?: boolean;
+    children: Snippet;
 }
-export {};
+declare const TableRow: import("svelte").Component<Props, {}, "">;
+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,17 @@
-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> {
+interface Props {
+    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;
+    [key: string]: any;
 }
-export {};
+declare const Tag: import("svelte").Component<Props, {}, "">;
+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,11 @@
-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> {
+interface Props {
+    small?: boolean;
+    light?: boolean;
+    normal?: boolean;
+    bold?: boolean;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
 }
-export {};
+declare const Text: import("svelte").Component<Props, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/components/TextInput/TextInput.svelte

@@ -1,37 +1,83 @@
-<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;
+		select?: boolean;
+		selectInput?: HTMLSelectElement;
+		[key: string]: any;
+	}
+
+	let {
+		state = 'default',
+		size = 'medium',
+		block = false,
+		value = $bindable(undefined),
+		input = $bindable({} as HTMLInputElement),
+		start,
+		end,
+		select = false,
+		selectInput = $bindable({} as HTMLSelectElement),
+		...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}
-		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}
+	{#if select}
+		<select
+			{...rest}
+			bind:value
+			bind:this={selectInput}
+			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')}
+		>
+			{@render rest?.children()}
+		</select>
+	{:else}
+		<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}
+
+	{#if end}
 		<span class="slot end">
-			<slot name="end" />
+			{@render end?.()}
 		</span>
 	{/if}
 </label>
@@ -69,7 +115,8 @@ export let input = {};
   width: 100%;
 }
 
-input {
+input,
+select {
   flex: 1;
   width: 100%;
   border: none;
@@ -79,11 +126,17 @@ input {
   padding: 0;
   margin: 0;
   color: inherit;
+  height: 100%;
 }
-input:focus {
+input:focus,
+select:focus {
   outline: none;
 }
 
+select {
+  min-width: 180px;
+}
+
 .input-wrap.size-x-small {
   padding: 0 15px;
   height: 20px;

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

@@ -1,36 +1,14 @@
-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;
+    select?: boolean;
+    selectInput?: HTMLSelectElement;
+}, {}, "value" | "input" | "selectInput">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;