@hyvor/design 0.0.67 → 1.0.3

package/dist/components/SplitControl/SplitControl.svelte

@@ -1,57 +1,52 @@
-<script>import Caption from "../FormControl/Caption.svelte";
-import Label from "../FormControl/Label.svelte";
-export let label = "";
-export let caption = "";
-export let column = false;
-export let flex = [1, 2];
-</script>
-
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Caption from '../FormControl/Caption.svelte';
+	import Label from '../FormControl/Label.svelte';
 
-<div 
-    class="split-control" 
-    class:has-nested={$$slots.nested}
-    class:column={column}
->
+	interface Props {
+		label?: string | Snippet;
+		caption?: string | Snippet;
+		column?: boolean;
+		flex?: number[];
+		children?: Snippet;
+		nested?: Snippet;
+	}
 
-    <div 
-        class="left"
-        style:flex={flex[0]}
-    >
-
-        <div class="label-wrap">
-            {#if $$slots.label}
-                <slot name="label" />
-            {:else}
-                <Label>{label}</Label>
-            {/if}
-        </div>
+	const { label, caption, column = false, flex = [1, 2], children, nested }: Props = $props();
+</script>
 
-        {#if $$slots.caption || caption}
-            <div class="caption-wrap">
-                {#if $$slots.caption}
-                    <slot name="caption" />
-                {:else if caption}
-                    <Caption>{caption}</Caption>
-                {/if}
-            </div>
-        {/if}
-    </div>
+<div class="split-control" class:has-nested={!!nested} class:column>
+	<div class="left" style:flex={flex[0]}>
+		<div class="label-wrap">
+			{#if typeof label === 'string'}
+				<Label>{label}</Label>
+			{:else}
+				{@render label?.()}
+			{/if}
+		</div>
 
-    {#if $$slots.default}
-        <div 
-            class="right"
-            style:flex={flex[1]}
-        >
-            <slot></slot>
-        </div>
-    {/if}
+		{#if caption}
+			<div class="caption-wrap">
+				{#if typeof caption === 'string'}
+					<Caption>{caption}</Caption>
+				{:else}
+					{@render caption()}
+				{/if}
+			</div>
+		{/if}
+	</div>
 
+	{#if children}
+		<div class="right" style:flex={flex[1]}>
+			{@render children()}
+		</div>
+	{/if}
 </div>
 
-{#if $$slots.nested}
-    <div class="nested">
-        <slot name="nested"></slot>
-    </div>
+{#if nested}
+	<div class="nested">
+		{@render nested()}
+	</div>
 {/if}
 
 <style>.split-control {
@@ -89,4 +84,4 @@ export let flex = [1, 2];
 
 .caption-wrap {
   margin-top: 4px;
-}</style>
+}</style>

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

@@ -1,24 +1,11 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        label?: string | undefined;
-        caption?: string | undefined;
-        column?: boolean | undefined;
-        flex?: number[] | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        label: {};
-        caption: {};
-        default: {};
-        nested: {};
-    };
-};
-export type SplitControlProps = typeof __propDef.props;
-export type SplitControlEvents = typeof __propDef.events;
-export type SplitControlSlots = typeof __propDef.slots;
-export default class SplitControl extends SvelteComponent<SplitControlProps, SplitControlEvents, SplitControlSlots> {
-}
-export {};
+import type { Snippet } from 'svelte';
+declare const SplitControl: import("svelte").Component<{
+    label?: string | Snippet;
+    caption?: string | Snippet;
+    column?: boolean;
+    flex?: number[];
+    children?: Snippet;
+    nested?: Snippet;
+}, {}, "">;
+type SplitControl = ReturnType<typeof SplitControl>;
+export default SplitControl;

package/dist/components/Switch/Switch.svelte

@@ -1,62 +1,72 @@
-<script>export let checked = false;
-export let input = {};
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+	interface Props {
+		checked?: boolean;
+		input?: any;
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let {
+		checked = $bindable(false),
+		input = $bindable({} as HTMLInputElement),
+		children,
+		...rest
+	}: Props = $props();
 </script>
 
 <label class="switch-wrap">
-    <span class="switch">
-        <input 
-            type="checkbox" 
-            bind:checked
-            bind:this={input}
-            {...$$restProps} 
-            
-            on:keyup
-            on:keydown
-            on:keypress
-            on:focus
-            on:blur
-            on:click
-            on:mouseover
-            on:mouseenter
-            on:mouseleave
-            on:change
-        />
-        <span class="slider"></span>
-
-        
-    </span>
-    {#if $$slots.default}
-        <span class="message">
-            <slot />
-        </span>
-    {/if}
+	<span class="switch">
+		<input
+			type="checkbox"
+			bind:checked
+			bind:this={input}
+			{...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')}
+		/>
+		<span class="slider"></span>
+	</span>
+	{#if children}
+		<span class="message">
+			{@render children?.()}
+		</span>
+	{/if}
 </label>
 
 <style>
+	.switch-wrap {
+		display: inline-flex;
+		align-items: center;
+		cursor: pointer;
+	}
 
-    .switch-wrap {
-        display: inline-flex;
-        align-items: center;
-        cursor: pointer;
-    }
+	.message {
+		margin-left: 8px;
+	}
 
-    .message {
-        margin-left: 8px;
-    }
+	.switch {
+		position: relative;
+		display: inline-block;
+		width: 40px;
+		height: 24px;
+		vertical-align: middle;
+	}
 
-    .switch {
-        position: relative;
-        display: inline-block;
-        width:40px;
-		height:24px;
-        vertical-align: middle;
-    }
-	
 	input {
-        opacity: 0;
+		opacity: 0;
 	}
 
-
 	.slider {
 		position: absolute;
 		cursor: pointer;
@@ -65,41 +75,41 @@ export let input = {};
 		right: 0;
 		bottom: 0;
 		background-color: var(--input);
-		transition: .2s;
+		transition: 0.2s;
 		border-radius: 30px;
 	}
 
-    .slider:hover {
-        box-shadow: 0 0 0 2px var(--accent-light);
-    }
-	
+	.slider:hover {
+		box-shadow: 0 0 0 2px var(--accent-light);
+	}
+
 	.slider:before {
 		position: absolute;
-		content: "";
+		content: '';
 		border-radius: 50%;
 		background-color: var(--accent-text);
-		transition: .1s;
-        width:18px;
-        height:18px;
-        left:3px;
-        top:3px;
-        bottom:3px;
+		transition: 0.1s;
+		width: 18px;
+		height: 18px;
+		left: 3px;
+		top: 3px;
+		bottom: 3px;
 	}
-	
+
 	input:checked + .slider {
 		background-color: var(--accent);
 	}
-	
+
 	input:focus-visible + .slider {
 		box-shadow: 0 0 0 3px var(--accent-light);
 	}
 
-    .switch:active .slider, input:active + .slider {
-        box-shadow: 0 0 0 3px var(--accent-light);
-    }
-	
+	.switch:active .slider,
+	input:active + .slider {
+		box-shadow: 0 0 0 3px var(--accent-light);
+	}
+
 	input:checked + .slider:before {
 		transform: translateX(16px);
 	}
-
-</style>
+</style>

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

@@ -1,31 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        checked?: boolean | undefined;
-        input?: HTMLInputElement | 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 SwitchProps = typeof __propDef.props;
-export type SwitchEvents = typeof __propDef.events;
-export type SwitchSlots = typeof __propDef.slots;
-export default class Switch extends SvelteComponent<SwitchProps, SwitchEvents, SwitchSlots> {
-}
-export {};
+declare const Switch: import("svelte").Component<{
+    [key: string]: any;
+    checked?: boolean;
+    input?: any;
+    children?: import("svelte").Snippet;
+}, {}, "checked" | "input">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/TabNav/TabNav.svelte

@@ -1,28 +1,38 @@
-<script>import { onMount, setContext } from "svelte";
-import { writable } from "svelte/store";
-export let active;
-const activeStore = writable(active);
-setContext("tab-nav-active", activeStore);
-$:
-  active, activeStore.set(active);
-onMount(() => {
-  const unsubscribe = activeStore.subscribe((value) => {
-    active = value;
-  });
-  return unsubscribe;
-});
+<script lang="ts">
+	import { run } from 'svelte/legacy';
+
+	import { onMount, setContext } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	interface Props {
+		active: string;
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let { active = $bindable(), children, ...rest }: Props = $props();
+
+	const activeStore = writable(active);
+	setContext('tab-nav-active', activeStore);
+
+	$effect(() => {
+		activeStore.set(active);
+	});
+
+	onMount(() => {
+		const unsubscribe = activeStore.subscribe((value) => {
+			active = value;
+		});
+		return unsubscribe;
+	});
 </script>
 
-<div 
-    class="tab-nav"
-    {...$$restProps}
->
-    <slot />
+<div class="tab-nav" {...rest}>
+	{@render children?.()}
 </div>
 
-
 <style>
-    div {
-        display: flex;
-    }
-</style>
+	div {
+		display: flex;
+	}
+</style>

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

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        active: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TabNavProps = typeof __propDef.props;
-export type TabNavEvents = typeof __propDef.events;
-export type TabNavSlots = typeof __propDef.slots;
-export default class TabNav extends SvelteComponent<TabNavProps, TabNavEvents, TabNavSlots> {
-}
-export {};
+declare const TabNav: import("svelte").Component<{
+    [key: string]: any;
+    active: string;
+    children?: import("svelte").Snippet;
+}, {}, "active">;
+type TabNav = ReturnType<typeof TabNav>;
+export default TabNav;

package/dist/components/TabNav/TabNavItem.svelte

@@ -1,57 +1,71 @@
-<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>
+<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();
 
-<button 
-    class="tab"
-    class:active={isActive}
-    on:click={handleClick}
-    {...$$restProps}
+	const activeStore = getContext('tab-nav-active') as Writable<string>;
+
+	let isActive = $derived($activeStore === name || active);
+
+	function handleClick() {
+		activeStore.set(name);
+	}
+</script>
 
-    on:click
+<button
+	class="tab"
+	class:active={isActive}
+	onclick={handlers(handleClick, bubble('click'))}
+	{...rest}
 >
-    {#if $$slots.start}
-        <span class="start">
-            <slot name="start" />
-        </span>
-    {/if}
-    <slot />
-    {#if $$slots.end}
-        <span class="end">
-            <slot name="end" />
-        </span>
-    {/if}
+	{#if start}
+		<span class="start">
+			{@render start?.()}
+		</span>
+	{/if}
+	{@render children?.()}
+	{#if end}
+		<span class="end">
+			{@render end?.()}
+		</span>
+	{/if}
 </button>
 
 <style>
-    .tab {
-        position: relative;
-        padding: 10px 15px;
-        border-bottom: 3px solid #f1f1f1;
-        cursor: pointer;
-        font-weight: 600;
-        display: flex;
-        align-items: center;
-    }
-    .tab.active {
-        border-bottom-color: var(--accent);
-        color: var(--accent);
-    }
-    .start {
-        display: inline-flex;
-        margin-right: 7px;
-        align-items: center;
-    }
-    .end {
-        display: inline-flex;
-        margin-left: 4px;
-        align-items: center;
-    }
-</style>
+	.tab {
+		position: relative;
+		padding: 10px 15px;
+		border-bottom: 3px solid #f1f1f1;
+		cursor: pointer;
+		font-weight: 600;
+		display: flex;
+		align-items: center;
+	}
+	.tab.active {
+		border-bottom-color: var(--accent);
+		color: var(--accent);
+	}
+	.start {
+		display: inline-flex;
+		margin-right: 7px;
+		align-items: center;
+	}
+	.end {
+		display: inline-flex;
+		margin-left: 4px;
+		align-items: center;
+	}
+</style>

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,11 +1,21 @@
-<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 class="table" style="
+<div
+	class="table"
+	style="
     --local-columns: {columns};
     {hoverCss}
-">
-    <slot />
-</div>
+"
+>
+	{@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;