@hyvor/design 0.0.68 → 1.0.5

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

@@ -1,33 +1,12 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        href: string;
-        active?: boolean | undefined;
-        disabled?: boolean | 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: {};
-    };
+type Props = {
+    href: string;
+    active?: boolean;
+    disabled?: boolean;
+    start?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+    end?: import('svelte').Snippet;
+    [key: string]: any;
 };
-export type NavLinkProps = typeof __propDef.props;
-export type NavLinkEvents = typeof __propDef.events;
-export type NavLinkSlots = typeof __propDef.slots;
-export default class NavLink extends SvelteComponent<NavLinkProps, NavLinkEvents, NavLinkSlots> {
-}
-export {};
+declare const NavLink: import("svelte").Component<Props, {}, "">;
+type NavLink = ReturnType<typeof NavLink>;
+export default NavLink;

package/dist/components/Radio/Radio.svelte

@@ -1,7 +1,26 @@
-<script>export let value = "";
-export let group = "";
-export let disabled = false;
-export let input = {};
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+
+	interface Props {
+		/* for whatever reason simply passing value with rest props doesn't work */
+		value?: number | string;
+		group?: number | string;
+		disabled?: boolean;
+		input?: any;
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let {
+		value = '',
+		group = $bindable(''),
+		disabled = false,
+		input = $bindable({} as HTMLInputElement),
+		children,
+		...rest
+	}: Props = $props();
 </script>
 
 <label class:disabled>
@@ -11,22 +30,22 @@ export let input = {};
 		bind:group
 		bind:this={input}
 		{value}
-		on:keyup
-		on:keydown
-		on:keypress
-		on:focus
-		on:blur
-		on:click
-		on:mouseover
-		on:mouseenter
-		on:mouseleave
-		on:change
-		{...$$restProps}
+		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')}
+		{...rest}
 	/>
 
 	<span class="checkmark"></span>
 
-	<slot />
+	{@render children?.()}
 </label>
 
 <style>label {

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

@@ -1,33 +1,11 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: string | number | undefined;
-        group?: string | number | undefined;
-        disabled?: 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 RadioProps = typeof __propDef.props;
-export type RadioEvents = typeof __propDef.events;
-export type RadioSlots = typeof __propDef.slots;
-export default class Radio extends SvelteComponent<RadioProps, RadioEvents, RadioSlots> {
+interface Props {
+    value?: number | string;
+    group?: number | string;
+    disabled?: boolean;
+    input?: any;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
 }
-export {};
+declare const Radio: import("svelte").Component<Props, {}, "group" | "input">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

package/dist/components/Slider/Slider.svelte

@@ -1,42 +1,92 @@
-<script>import { createEventDispatcher } from "svelte";
-export let min;
-export let max;
-export let value;
-export let step = 1;
-export let dots = false;
-const dispatch = createEventDispatcher();
-function toStep(value2) {
-  return Math.max(min, Math.min(max, Math.round(value2 / step) * step));
-}
-$:
-  progress = (value - min) / (max - min) * 100;
-let dragging = false;
-let trackEl;
-function handleMousedown(event) {
-  dragging = true;
-  handleMousemove(event);
-  window.addEventListener("mousemove", handleMousemove);
-  window.addEventListener("mouseup", handleMouseup);
-}
-function handleMouseup() {
-  dragging = false;
-  window.removeEventListener("mousemove", handleMousemove);
-}
-function handleMousemove(event) {
-  if (dragging) {
-    const rect = trackEl.getBoundingClientRect();
-    const x = event.clientX - rect.left;
-    const width = rect.width;
-    const newValue = min + x / width * (max - min);
-    value = toStep(newValue);
-    dispatch("change", value);
-  }
-}
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	interface Props {
+		min: number;
+		max: number;
+		value: number;
+		step?: number;
+		// export let disabled = false;
+		dots?: boolean;
+	}
+
+	let { min, max, value = $bindable(), step = 1, dots = false }: Props = $props();
+
+	const dispatch = createEventDispatcher<{
+		change: number;
+	}>();
+
+	function toStep(value: number) {
+		return Math.max(min, Math.min(max, Math.round(value / step) * step));
+	}
+
+	let progress = $derived(((value - min) / (max - min)) * 100);
+
+	let dragging = $state(false);
+	let trackEl: HTMLDivElement | undefined = $state();
+
+	function handleMousedown(event: MouseEvent) {
+		dragging = true;
+		handleMousemove(event);
+
+		window.addEventListener('mousemove', handleMousemove);
+		window.addEventListener('mouseup', handleMouseup);
+	}
+
+	function handleMouseup() {
+		dragging = false;
+		window.removeEventListener('mousemove', handleMousemove);
+		window.removeEventListener('mouseup', handleMouseup);
+	}
+
+	function handleMousemove(event: MouseEvent) {
+		if (!trackEl) return;
+		if (dragging) {
+			calcPosUpdateValue(trackEl, event.clientX);
+		}
+	}
+
+	// touch events
+	function handleTouchstart(event: TouchEvent) {
+		dragging = true;
+		handleTouchmove(event);
+
+		window.addEventListener('touchmove', handleTouchmove);
+		window.addEventListener('touchend', handleTouchend);
+	}
+
+	function handleTouchend() {
+		dragging = false;
+		window.removeEventListener('touchmove', handleTouchmove);
+		window.removeEventListener('touchend', handleTouchend);
+	}
+
+	function handleTouchmove(event: TouchEvent) {
+		if (!trackEl) return;
+		if (dragging) {
+			calcPosUpdateValue(trackEl, event.touches[0].clientX);
+		}
+	}
+
+	function calcPosUpdateValue(trackEl: HTMLDivElement, clientX: number) {
+		const rect = trackEl.getBoundingClientRect();
+		const x = clientX - rect.left;
+		const width = rect.width;
+		const newValue = min + (x / width) * (max - min);
+		value = toStep(newValue);
+		dispatch('change', value);
+	}
 </script>
 
 <div class="slider">
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div class="track" bind:this={trackEl} class:dragging on:mousedown={handleMousedown}>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="track"
+		bind:this={trackEl}
+		class:dragging
+		onmousedown={handleMousedown}
+		ontouchstart={handleTouchstart}
+	>
 		<div class="progress" style="width: {progress}%"></div>
 		<button class="handle" style="left: {progress}%">
 			<span class="tip">

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

@@ -1,22 +1,27 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        min: number;
-        max: number;
-        value: number;
-        step?: number | undefined;
-        dots?: boolean | undefined;
-    };
-    events: {
-        change: CustomEvent<number>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+interface Props {
+    min: number;
+    max: number;
+    value: number;
+    step?: number;
+    dots?: boolean;
+}
+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;
     };
-    slots: {};
-};
-export type SliderProps = typeof __propDef.props;
-export type SliderEvents = typeof __propDef.events;
-export type SliderSlots = typeof __propDef.slots;
-export default class Slider extends SvelteComponent<SliderProps, SliderEvents, SliderSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Slider: $$__sveltets_2_IsomorphicComponent<Props, {
+    change: CustomEvent<number>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type Slider = InstanceType<typeof Slider>;
+export default Slider;

package/dist/components/SplitControl/SplitControl.svelte

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

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

@@ -1,24 +1,12 @@
-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> {
+import type { Snippet } from 'svelte';
+interface Props {
+    label?: string | Snippet;
+    caption?: string | Snippet;
+    column?: boolean;
+    flex?: number[];
+    children?: Snippet;
+    nested?: Snippet;
 }
-export {};
+declare const SplitControl: import("svelte").Component<Props, {}, "">;
+type SplitControl = ReturnType<typeof SplitControl>;
+export default SplitControl;

package/dist/components/Switch/Switch.svelte

@@ -1,5 +1,20 @@
-<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">
@@ -8,23 +23,23 @@ export let 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
+			{...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 $$slots.default}
+	{#if children}
 		<span class="message">
-			<slot />
+			{@render children?.()}
 		</span>
 	{/if}
 </label>

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

@@ -1,31 +1,9 @@
-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> {
+interface Props {
+    checked?: boolean;
+    input?: any;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
 }
-export {};
+declare const Switch: import("svelte").Component<Props, {}, "checked" | "input">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/TabNav/TabNav.svelte

@@ -1,20 +1,34 @@
-<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>

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

@@ -1,19 +1,8 @@
-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> {
+interface Props {
+    active: string;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
 }
-export {};
+declare const TabNav: import("svelte").Component<Props, {}, "active">;
+type TabNav = ReturnType<typeof TabNav>;
+export default TabNav;