@hyvor/design 1.0.3 → 1.0.6

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

@@ -1,15 +1,16 @@
-declare const Loader: import("svelte").Component<{
-    [key: string]: any;
+interface Props {
     block?: boolean;
     full?: boolean;
-    padding?: "none" | "small" | "medium" | "large" | number;
-    size?: "small" | "medium" | "large" | number;
-    state?: "loading" | "success" | "error" | "none";
+    padding?: 'none' | 'small' | 'medium' | 'large' | number;
+    size?: 'small' | 'medium' | 'large' | number;
+    state?: 'loading' | 'success' | 'error' | 'none';
     duration?: null | number;
     color?: string;
     colorTrack?: string;
     invert?: boolean;
-    children?: import("svelte").Snippet;
-}, {}, "size" | "color" | "padding" | "state" | "colorTrack">;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const Loader: import("svelte").Component<Props, {}, "size" | "color" | "padding" | "state" | "colorTrack">;
 type Loader = ReturnType<typeof Loader>;
 export default Loader;

package/dist/components/Modal/Modal.svelte

@@ -3,7 +3,7 @@
 	import ModalFooter from './ModalFooter.svelte';
 	import type { Footer } from './modal-types.js';
 	import { clickOutside } from '../directives/clickOutside.js';
-	import { IconX } from '@hyvor/icons';
+	import IconX from '@hyvor/icons/IconX';
 	import IconButton from './../IconButton/IconButton.svelte';
 	import { fade, scale } from 'svelte/transition';
 	import { onMount, tick, type Snippet } from 'svelte';

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

@@ -1,5 +1,17 @@
 import type { Footer } from './modal-types.js';
 import { type Snippet } from 'svelte';
+interface Props {
+    show?: boolean;
+    title?: string | Snippet;
+    size?: 'small' | 'medium' | 'large';
+    id?: string;
+    role?: 'dialog' | 'alertdialog';
+    closeOnOutsideClick?: boolean;
+    closeOnEscape?: boolean;
+    loading?: boolean | string;
+    footer?: Footer | Snippet;
+    children?: Snippet;
+}
 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;
@@ -13,18 +25,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Modal: $$__sveltets_2_IsomorphicComponent<{
-    show?: boolean;
-    title?: string | Snippet;
-    size?: "small" | "medium" | "large";
-    id?: string;
-    role?: "dialog" | "alertdialog";
-    closeOnOutsideClick?: boolean;
-    closeOnEscape?: boolean;
-    loading?: boolean | string;
-    footer?: Footer | Snippet;
-    children?: Snippet;
-}, {
+declare const Modal: $$__sveltets_2_IsomorphicComponent<Props, {
     cancel: CustomEvent<any>;
     confirm: CustomEvent<any>;
 } & {

package/dist/components/Modal/ModalFooter.svelte.d.ts

@@ -1,4 +1,8 @@
 import type { Footer } from './modal-types.ts';
+interface Props {
+    show: boolean;
+    footer: Footer;
+}
 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;
@@ -12,10 +16,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ModalFooter: $$__sveltets_2_IsomorphicComponent<{
-    show: boolean;
-    footer: Footer;
-}, {
+declare const ModalFooter: $$__sveltets_2_IsomorphicComponent<Props, {
     cancel: CustomEvent<any>;
     confirm: CustomEvent<any>;
 } & {

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

@@ -1,11 +1,12 @@
-declare const NavLink: import("svelte").Component<{
-    [key: string]: any;
+type Props = {
     href: string;
     active?: boolean;
     disabled?: boolean;
-    start?: import("svelte").Snippet;
-    children?: import("svelte").Snippet;
-    end?: import("svelte").Snippet;
-}, {}, "">;
+    start?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+    end?: import('svelte').Snippet;
+    [key: string]: any;
+};
+declare const NavLink: import("svelte").Component<Props, {}, "">;
 type NavLink = ReturnType<typeof NavLink>;
 export default NavLink;

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

@@ -1,10 +1,11 @@
-declare const Radio: import("svelte").Component<{
-    [key: string]: any;
+interface Props {
     value?: number | string;
     group?: number | string;
     disabled?: boolean;
     input?: any;
-    children?: import("svelte").Snippet;
-}, {}, "group" | "input">;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const Radio: import("svelte").Component<Props, {}, "group" | "input">;
 type Radio = ReturnType<typeof Radio>;
 export default Radio;

package/dist/components/Slider/Slider.svelte

@@ -36,24 +36,57 @@
 	function handleMouseup() {
 		dragging = false;
 		window.removeEventListener('mousemove', handleMousemove);
+		window.removeEventListener('mouseup', handleMouseup);
 	}
 
 	function handleMousemove(event: MouseEvent) {
 		if (!trackEl) return;
 		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);
+			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 onmousedown={handleMousedown}>
+	<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,3 +1,10 @@
+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;
@@ -11,13 +18,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Slider: $$__sveltets_2_IsomorphicComponent<{
-    min: number;
-    max: number;
-    value: number;
-    step?: number;
-    dots?: boolean;
-}, {
+declare const Slider: $$__sveltets_2_IsomorphicComponent<Props, {
     change: CustomEvent<number>;
 } & {
     [evt: string]: CustomEvent<any>;

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

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

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

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

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

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

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

@@ -1,10 +1,11 @@
-declare const TabNavItem: import("svelte").Component<{
-    [key: string]: any;
+interface Props {
     active?: boolean;
     name: string;
-    start?: import("svelte").Snippet;
-    children?: import("svelte").Snippet;
-    end?: import("svelte").Snippet;
-}, {}, "">;
+    start?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+    end?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const TabNavItem: import("svelte").Component<Props, {}, "">;
 type TabNavItem = ReturnType<typeof TabNavItem>;
 export default TabNavItem;

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

@@ -1,7 +1,8 @@
-declare const Table: import("svelte").Component<{
+interface Props {
     columns: string;
     hover?: boolean;
-    children?: import("svelte").Snippet;
-}, {}, "">;
+    children?: import('svelte').Snippet;
+}
+declare const Table: import("svelte").Component<Props, {}, "">;
 type Table = ReturnType<typeof Table>;
 export default Table;

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

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const TableRow: import("svelte").Component<{
+interface Props {
     head?: boolean;
     children: Snippet;
-}, {}, "">;
+}
+declare const TableRow: import("svelte").Component<Props, {}, "">;
 type TableRow = ReturnType<typeof TableRow>;
 export default TableRow;

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

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

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

@@ -1,10 +1,11 @@
-declare const Text: import("svelte").Component<{
-    [key: string]: any;
+interface Props {
     small?: boolean;
     light?: boolean;
     normal?: boolean;
     bold?: boolean;
-    children?: import("svelte").Snippet;
-}, {}, "">;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const Text: import("svelte").Component<Props, {}, "">;
 type Text = ReturnType<typeof Text>;
 export default Text;

package/dist/components/TextInput/TextInput.svelte

@@ -11,6 +11,8 @@
 		input?: HTMLInputElement;
 		start?: import('svelte').Snippet;
 		end?: import('svelte').Snippet;
+		select?: boolean;
+		selectInput?: HTMLSelectElement;
 		[key: string]: any;
 	}
 
@@ -22,6 +24,8 @@
 		input = $bindable({} as HTMLInputElement),
 		start,
 		end,
+		select = false,
+		selectInput = $bindable({} as HTMLSelectElement),
 		...rest
 	}: Props = $props();
 </script>
@@ -33,22 +37,43 @@
 		</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 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">
@@ -90,7 +115,8 @@
   width: 100%;
 }
 
-input {
+input,
+select {
   flex: 1;
   width: 100%;
   border: none;
@@ -100,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

@@ -7,6 +7,8 @@ declare const TextInput: import("svelte").Component<{
     input?: HTMLInputElement;
     start?: import("svelte").Snippet;
     end?: import("svelte").Snippet;
-}, {}, "value" | "input">;
+    select?: boolean;
+    selectInput?: HTMLSelectElement;
+}, {}, "value" | "input" | "selectInput">;
 type TextInput = ReturnType<typeof TextInput>;
 export default TextInput;

package/dist/components/Toast/ToastIcon.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import type { Toast } from './toast.ts';
 	import Loader from '../Loader/Loader.svelte';
-	import {
-		IconCheckCircleFill,
-		IconXCircleFill,
-		IconExclamationCircleFill,
-		IconInfoCircleFill
-	} from '@hyvor/icons';
+
+	import IconCheckCircleFill from '@hyvor/icons/IconCheckCircleFill';
+	import IconXCircleFill from '@hyvor/icons/IconXCircleFill';
+	import IconExclamationCircleFill from '@hyvor/icons/IconExclamationCircleFill';
+	import IconInfoCircleFill from '@hyvor/icons/IconInfoCircleFill';
 
 	interface Props {
 		toast: Toast;

package/dist/components/Toast/ToastIcon.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Toast } from './toast.ts';
-declare const ToastIcon: import("svelte").Component<{
+interface Props {
     toast: Toast;
-}, {}, "">;
+}
+declare const ToastIcon: import("svelte").Component<Props, {}, "">;
 type ToastIcon = ReturnType<typeof ToastIcon>;
 export default ToastIcon;

package/dist/components/Toast/ToastMessage.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Toast } from './toast.ts';
-declare const ToastMessage: import("svelte").Component<{
+interface Props {
     toast: Toast;
-}, {}, "">;
+}
+declare const ToastMessage: import("svelte").Component<Props, {}, "">;
 type ToastMessage = ReturnType<typeof ToastMessage>;
 export default ToastMessage;

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

@@ -19,8 +19,8 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 declare const Tooltip: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     [x: string]: any;
     text?: string | undefined;
-    position?: ("top" | "bottom" | "left" | "right") | undefined;
-    color?: ("black" | "accent" | "soft" | "danger") | undefined;
+    position?: "top" | "bottom" | "left" | "right" | undefined;
+    color?: "black" | "accent" | "soft" | "danger" | undefined;
     show?: boolean | undefined;
     maxWidth?: number | undefined;
     disabled?: boolean | undefined;

package/dist/marketing/Container/Container.svelte.d.ts

@@ -1,6 +1,7 @@
-declare const Container: import("svelte").Component<{
+interface Props {
     as?: string;
-    children?: import("svelte").Snippet;
-}, {}, "">;
+    children?: import('svelte').Snippet;
+}
+declare const Container: import("svelte").Component<Props, {}, "">;
 type Container = ReturnType<typeof Container>;
 export default Container;

package/dist/marketing/Docs/Content/Content.svelte.d.ts

@@ -1,5 +1,6 @@
-declare const Content: import("svelte").Component<{
-    children?: import("svelte").Snippet;
-}, {}, "">;
+interface Props {
+    children?: import('svelte').Snippet;
+}
+declare const Content: import("svelte").Component<Props, {}, "">;
 type Content = ReturnType<typeof Content>;
 export default Content;

package/dist/marketing/Docs/Content/DocsImage.svelte.d.ts

@@ -1,9 +1,10 @@
-declare const DocsImage: import("svelte").Component<{
-    [key: string]: any;
+interface Props {
     src: string;
     alt: string;
     width?: undefined | number;
     modalImageProps?: any;
-}, {}, "">;
+    [key: string]: any;
+}
+declare const DocsImage: import("svelte").Component<Props, {}, "">;
 type DocsImage = ReturnType<typeof DocsImage>;
 export default DocsImage;

package/dist/marketing/Docs/Docs.svelte.d.ts

@@ -1,6 +1,7 @@
-declare const Docs: import("svelte").Component<{
-    nav?: import("svelte").Snippet;
-    content?: import("svelte").Snippet;
-}, {}, "">;
+interface Props {
+    nav?: import('svelte').Snippet;
+    content?: import('svelte').Snippet;
+}
+declare const Docs: import("svelte").Component<Props, {}, "">;
 type Docs = ReturnType<typeof Docs>;
 export default Docs;

package/dist/marketing/Docs/Nav/Nav.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { afterNavigate, onNavigate } from '$app/navigation';
-	import { page } from '$app/stores';
-	import { IconList } from '@hyvor/icons';
+	import { afterNavigate } from '$app/navigation';
+	import IconList from '@hyvor/icons/IconList';
 	import { onMount } from 'svelte';
 	import { clickOutside } from '../../../components/index.js';
 	interface Props {

package/dist/marketing/Docs/Nav/Nav.svelte.d.ts

@@ -1,5 +1,6 @@
-declare const Nav: import("svelte").Component<{
-    children?: import("svelte").Snippet;
-}, {}, "">;
+interface Props {
+    children?: import('svelte').Snippet;
+}
+declare const Nav: import("svelte").Component<Props, {}, "">;
 type Nav = ReturnType<typeof Nav>;
 export default Nav;

package/dist/marketing/Docs/Nav/NavCategory.svelte.d.ts

@@ -1,8 +1,9 @@
-declare const NavCategory: import("svelte").Component<{
+interface Props {
     name: string;
-    start?: import("svelte").Snippet;
-    end?: import("svelte").Snippet;
-    children?: import("svelte").Snippet;
-}, {}, "">;
+    start?: import('svelte').Snippet;
+    end?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+}
+declare const NavCategory: import("svelte").Component<Props, {}, "">;
 type NavCategory = ReturnType<typeof NavCategory>;
 export default NavCategory;

package/dist/marketing/Docs/Nav/NavItem.svelte.d.ts

@@ -1,6 +1,7 @@
-declare const NavItem: import("svelte").Component<{
+interface Props {
     href: string;
-    children?: import("svelte").Snippet;
-}, {}, "">;
+    children?: import('svelte').Snippet;
+}
+declare const NavItem: import("svelte").Component<Props, {}, "">;
 type NavItem = ReturnType<typeof NavItem>;
 export default NavItem;

package/dist/marketing/Docs/Toc.svelte

@@ -6,7 +6,8 @@
 	import tocbot from 'tocbot';
 
 	import Loader from '../../components/Loader/Loader.svelte';
-	import { IconCaretDown, IconCaretRight } from '@hyvor/icons';
+	import IconCaretDown from '@hyvor/icons/IconCaretDown';
+	import IconCaretRight from '@hyvor/icons/IconCaretRight';
 	import Button from '../../components/Button/Button.svelte';
 
 	let tocElement: HTMLDivElement | undefined = $state();
@@ -68,6 +69,8 @@
 
 <style>.wrap {
   padding: 25px;
+  max-height: calc(100vh - var(--header-height) - 50px);
+  overflow-y: auto;
 }
 
 .toc-wrap {