@hyvor/design 1.0.3 → 1.0.5

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.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.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/Document/Document.svelte.d.ts

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

package/dist/marketing/Document/DocumentTitle.svelte.d.ts

@@ -1,9 +1,10 @@
-declare const DocumentTitle: import("svelte").Component<{
+interface Props {
     title: string;
     subtitle?: string | undefined;
     icon?: null | string;
     h2Style?: string | undefined;
     wrapStyle?: string | undefined;
-}, {}, "">;
+}
+declare const DocumentTitle: import("svelte").Component<Props, {}, "">;
 type DocumentTitle = ReturnType<typeof DocumentTitle>;
 export default DocumentTitle;

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

@@ -1,8 +1,9 @@
-declare const Footer: import("svelte").Component<{
+interface Props {
     email?: string | null;
     social?: any;
     emailCopied?: boolean;
-    center?: import("svelte").Snippet;
-}, {}, "social" | "emailCopied">;
+    center?: import('svelte').Snippet;
+}
+declare const Footer: import("svelte").Component<Props, {}, "social" | "emailCopied">;
 type Footer = ReturnType<typeof Footer>;
 export default Footer;

package/dist/marketing/Footer/FooterLinkList.svelte.d.ts

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

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

@@ -1,10 +1,11 @@
-declare const Header: import("svelte").Component<{
+interface Props {
     logo: string;
     name?: string;
     subName?: undefined | string;
     darkToggle?: boolean;
-    center?: import("svelte").Snippet;
-    end?: import("svelte").Snippet;
-}, {}, "">;
+    center?: import('svelte').Snippet;
+    end?: import('svelte').Snippet;
+}
+declare const Header: import("svelte").Component<Props, {}, "">;
 type Header = ReturnType<typeof Header>;
 export default Header;

package/dist/marketing/Logo/LogoBlogs.svelte.d.ts

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

package/dist/marketing/Logo/LogoCore.svelte.d.ts

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

package/dist/marketing/Logo/LogoFortguard.svelte.d.ts

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

package/dist/marketing/Logo/LogoTalk.svelte.d.ts

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

package/package.json

@@ -1,6 +1,5 @@
 {
 	"name": "@hyvor/design",
-	"version": "1.0.3",
 	"license": "MIT",
 	"private": false,
 	"scripts": {
@@ -30,7 +29,7 @@
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.0.0",
 		"sass": "^1.68.0",
-		"svelte": "^4.0.0"
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^3.0.0",
@@ -57,5 +56,6 @@
 	"type": "module",
 	"publishConfig": {
 		"access": "public"
-	}
+	},
+	"version": "1.0.5"
 }

package/dist/components/HyvorBar/BarProducts.svelte.d.ts

@@ -1,32 +0,0 @@
-declare const PRODUCTS: {
-    talk: {
-        name: string;
-        logo: import("svelte").Component<{
-            size?: number;
-        }, {}, "">;
-        url: string;
-        description: string;
-    };
-    blogs: {
-        name: string;
-        logo: import("svelte").Component<{
-            size?: number;
-        }, {}, "">;
-        url: string;
-        description: string;
-    };
-    fortguard: {
-        name: string;
-        logo: import("svelte").Component<{
-            size?: number;
-        }, {}, "">;
-        url: string;
-        description: string;
-    };
-};
-export { PRODUCTS };
-declare const BarProducts: import("svelte").Component<{
-    mobile?: boolean;
-}, {}, "">;
-type BarProducts = ReturnType<typeof BarProducts>;
-export default BarProducts;