@websline/system-components 1.0.3 → 1.0.5

package/dist/components/atoms/input/Input.svelte

@@ -41,8 +41,9 @@
 		}
 
 		return {
-			id,
+			disabled,
 			error,
+			id,
 			required,
 		};
 	});
@@ -51,10 +52,10 @@
 <input
 	class={inputVariants({
 		class: className,
-		disabled,
+		disabled: localValues.disabled,
 		error: localValues.error,
-	})}
-	{disabled}
+	}).base()}
+	disabled={localValues.disabled}
 	id={localValues.id}
 	{name}
 	{placeholder}

package/dist/components/atoms/input/input.variants.d.ts

@@ -1,22 +1,115 @@
+/**
+ * @property {boolean} [defaultValue] Use this variant if the element doesn't support the placeholder selector
+ */
+export const inputBaseVariant: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>;
 export const inputVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    disabled: {
+        true: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+        };
+    };
+    error: {
+        true: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
     disabled: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
     error: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
-}, undefined, "transition-[border, outline] h-10 w-full rounded border border-neutral-500 bg-transparent px-4 body-default text-neutral-800 placeholder-neutral-500 outline-transparent duration-300 hover:border-neutral-800 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:text-white dark:hover:border-neutral-200 dark:focus:border-white dark:focus:ring-white", {
+}, {
+    base: string[];
+}, undefined, {
     disabled: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
     error: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
     disabled: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
     error: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
-}, undefined, "transition-[border, outline] h-10 w-full rounded border border-neutral-500 bg-transparent px-4 body-default text-neutral-800 placeholder-neutral-500 outline-transparent duration-300 hover:border-neutral-800 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:text-white dark:hover:border-neutral-200 dark:focus:border-white dark:focus:ring-white", unknown, unknown, undefined>>;
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>>;

package/dist/components/atoms/input/input.variants.js

@@ -1,15 +1,54 @@
 import { tv } from "tailwind-variants";
 
-const inputVariants = tv({
-	base: "transition-[border, outline] h-10 w-full rounded border border-neutral-500 bg-transparent px-4 body-default text-neutral-800 placeholder-neutral-500 outline-transparent duration-300 hover:border-neutral-800 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:text-white dark:hover:border-neutral-200 dark:focus:border-white dark:focus:ring-white",
+/**
+ * @property {boolean} [defaultValue] Use this variant if the element doesn't support the placeholder selector
+ */
+const inputBaseVariant = tv({
+	slots: {
+		base: [
+			"w-full rounded bg-transparent px-4 body-default",
+			"text-neutral-900 placeholder-neutral-500 dark:text-neutral-200",
+			"outline-transparent transition-[border,color,outline] duration-300",
+			"border border-neutral-300 dark:border-neutral-700",
+		],
+	},
 	variants: {
 		disabled: {
-			true: "cursor-not-allowed opacity-50",
+			true: { base: "cursor-not-allowed opacity-40" },
 		},
 		error: {
-			true: "border border-red-500 text-red-500 outline outline-red-500 focus:border-red-500 focus:ring-red-500",
+			true: {
+				base: "border-current text-red-500 ring ring-current dark:border-current dark:text-red-500",
+			},
+		},
+	},
+	compoundVariants: [
+		{
+			disabled: false,
+			error: false,
+			class: {
+				base: [
+					"hover:ring-1 focus:ring-1",
+					"hover:border-blue-500 hover:ring-blue-500 focus:border-blue-500 focus:ring-blue-500",
+					"dark:hover:border-blue-400 dark:hover:ring-blue-400 dark:focus:border-blue-400 dark:focus:ring-blue-400",
+				],
+			},
 		},
+		{
+			defaultValue: true,
+			error: false,
+			class: {
+				base: "text-neutral-500 dark:text-neutral-500",
+			},
+		},
+	],
+});
+
+const inputVariants = tv({
+	extend: inputBaseVariant,
+	slots: {
+		base: "h-10",
 	},
 });
 
-export { inputVariants };
+export { inputBaseVariant, inputVariants };

package/dist/components/atoms/radio/Radio.svelte

@@ -35,6 +35,7 @@
 		}
 
 		return {
+			disabled,
 			id,
 			required,
 		};
@@ -47,9 +48,9 @@
 	class={radioVariants({
 		checked,
 		class: className,
-		disabled,
+		disabled: localValues.disabled,
 	})}
-	{disabled}
+	disabled={localValues.disabled}
 	id={localValues.id}
 	{name}
 	required={localValues.required}

package/dist/components/atoms/select/Select.svelte

@@ -37,22 +37,24 @@
 		}
 
 		return {
-			id,
+			disabled,
 			error,
+			id,
 			required,
 		};
 	});
 
-	let styles = $derived(selectVariants());
+	let styles = $derived(
+		selectVariants({
+			defaultValue: value === "" || value == null,
+			error: localValues.error,
+		}),
+	);
 </script>
 
 <select
-	class={styles.select({
-		class: className,
-		disabled,
-		error: localValues.error,
-	})}
-	{disabled}
+	class={styles.base({ class: className, disabled: localValues.disabled })}
+	disabled={localValues.disabled}
 	id={localValues.id}
 	required={localValues.required}
 	bind:value
@@ -72,8 +74,7 @@
 
 <style>
 	select {
-		appearance: base-select;
-
+		&,
 		&::picker(select) {
 			appearance: base-select;
 		}

package/dist/components/atoms/select/select.variants.d.ts

@@ -1,58 +1,66 @@
 export const selectVariants: import("tailwind-variants").TVReturnType<{
     disabled: {
-        true: {
+        false: {
+            base: string;
             option: string;
-            select: string;
         };
-        false: {
+        true: {
             option: string;
-            select: string[];
+        };
+    };
+}, {
+    base: string[];
+    option: string[];
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
         };
     };
     error: {
         true: {
-            select: string;
+            base: string;
         };
     };
 }, {
-    select: string[];
-    option: string[];
-}, undefined, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
     disabled: {
         true: {
-            option: string;
-            select: string;
+            base: string;
         };
-        false: {
-            option: string;
-            select: string[];
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
         };
     };
     error: {
         true: {
-            select: string;
+            base: string;
         };
     };
 }, {
-    select: string[];
-    option: string[];
+    base: string[];
 }, import("tailwind-variants").TVReturnType<{
     disabled: {
         true: {
-            option: string;
-            select: string;
-        };
-        false: {
-            option: string;
-            select: string[];
+            base: string;
         };
     };
     error: {
         true: {
-            select: string;
+            base: string;
         };
     };
 }, {
-    select: string[];
-    option: string[];
-}, undefined, unknown, unknown, undefined>>;
+    base: string[];
+}, undefined, unknown, unknown, undefined>>>;

package/dist/components/atoms/select/select.variants.js

@@ -1,46 +1,36 @@
 import { tv } from "tailwind-variants";
+import { inputBaseVariant } from "../input/input.variants.js";
 
 const selectVariants = tv({
+	extend: inputBaseVariant,
 	slots: {
-		select: [
-			"flex min-h-10 w-full items-center rounded bg-transparent px-4 pr-2 body-default",
-			"text-neutral-900 dark:text-neutral-200",
-			"transition-[border, outline, color] outline-transparent duration-300",
-			"border border-neutral-500 bg-none",
+		base: [
+			"flex min-h-10 items-center bg-none pr-2",
 			"[&::picker(select)]:my-1 [&::picker(select)]:rounded [&::picker(select)]:border-0 [&::picker(select)]:p-1",
 			"[&::picker-icon]:hidden",
 			"[&::picker(select)]:bg-white [&::picker(select)]:shadow-sm dark:[&::picker(select)]:bg-neutral-800",
-			"[&::after]:bg-current [&::after]:bg-size-[100%] [&::after]:bg-center [&::after]:bg-no-repeat",
-			"[&::after]:ml-auto [&::after]:size-5 [&::after]:shrink-0 [&::after]:content-['']",
-			"[&:open::after]:rotate-180",
+			"after:bg-current after:bg-size-[100%] after:bg-center after:bg-no-repeat",
+			"after:ml-auto after:size-5 after:shrink-0",
+			"[&:open]:after:rotate-180",
 		],
 		option: [
 			"flex rounded p-2 body-small",
+			"bg-white dark:bg-neutral-800",
+			"bg-linear-to-r to-transparent",
 			"[&::checkmark]:order-1 [&::checkmark]:ml-auto [&::checkmark]:shrink-0",
 			"[&::checkmark]:bg-current [&::checkmark]:bg-size-[100%] [&::checkmark]:bg-center [&::checkmark]:bg-no-repeat",
 			"[&::checkmark]:size-4 [&::checkmark]:content-['']",
-			"bg-white text-neutral-900 dark:bg-neutral-800 dark:text-neutral-200",
-			"bg-linear-to-r to-transparent",
 		],
 	},
 	variants: {
 		disabled: {
-			true: {
-				option: "text-neutral-500 dark:text-neutral-500 [&::checkmark]:hidden",
-				select: "opacity-25",
-			},
 			false: {
+				base: "hover:text-blue-500 dark:hover:text-blue-400",
 				option:
-					"cursor-pointer hover:from-neutral-1000/30 dark:hover:from-neutral-50/30",
-				select: [
-					"hover:border-current hover:ring-current focus:border-current focus:ring-current",
-					"hover:text-blue-500 hover:ring-1 focus:text-blue-500 focus:ring-1 dark:hover:text-blue-400 dark:focus:text-blue-400",
-				],
+					"cursor-pointer text-neutral-900 hover:from-black/15 dark:text-neutral-200 dark:hover:from-white/15",
 			},
-		},
-		error: {
 			true: {
-				select: "border-red-500 text-red-500 dark:border-red-500 dark:text-red-500",
+				option: "text-neutral-500 dark:text-neutral-500 [&::checkmark]:hidden",
 			},
 		},
 	},

package/dist/components/atoms/switch/Switch.svelte

@@ -35,6 +35,7 @@
 		}
 
 		return {
+			disabled,
 			id,
 			required,
 		};
@@ -46,9 +47,9 @@
 	class={switchVariants({
 		checked,
 		class: className,
-		disabled,
+		disabled: localValues.disabled,
 	})}
-	{disabled}
+	disabled={localValues.disabled}
 	id={localValues.id}
 	{name}
 	required={localValues.required}

package/dist/components/atoms/textarea/Textarea.svelte

@@ -41,8 +41,9 @@
 		}
 
 		return {
-			id,
+			disabled,
 			error,
+			id,
 			required,
 		};
 	});
@@ -51,11 +52,11 @@
 <textarea
 	class={textareaVariants({
 		class: className,
-		disabled,
+		disabled: localValues.disabled,
 		error: localValues.error,
 		size,
-	})}
-	{disabled}
+	}).base()}
+	disabled={localValues.disabled}
 	id={localValues.id}
 	{name}
 	{placeholder}

package/dist/components/atoms/textarea/textarea.variants.d.ts

@@ -1,37 +1,61 @@
 export const textareaVariants: import("tailwind-variants").TVReturnType<{
-    disabled: {
-        true: string;
-    };
-    error: {
-        true: string;
-    };
     size: {
         small: string;
         medium: string;
         large: string;
     };
-}, undefined, "transition-[border, outline] w-full resize-none rounded border border-neutral-500 bg-transparent p-4 body-default text-neutral-800 placeholder-neutral-500 outline-transparent duration-300 hover:border-neutral-800 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:text-white dark:hover:border-neutral-200 dark:focus:border-white dark:focus:ring-white", {
+}, {
+    base: string;
+}, undefined, {
     disabled: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
     error: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, {
     disabled: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
     error: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
     };
-}, undefined, "transition-[border, outline] w-full resize-none rounded border border-neutral-500 bg-transparent p-4 body-default text-neutral-800 placeholder-neutral-500 outline-transparent duration-300 hover:border-neutral-800 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:text-white dark:hover:border-neutral-200 dark:focus:border-white dark:focus:ring-white", unknown, unknown, undefined>>;
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>>;

package/dist/components/atoms/textarea/textarea.variants.js

@@ -1,14 +1,12 @@
 import { tv } from "tailwind-variants";
+import { inputBaseVariant } from "../input/input.variants.js";
 
 const textareaVariants = tv({
-	base: "transition-[border, outline] w-full resize-none rounded border border-neutral-500 bg-transparent p-4 body-default text-neutral-800 placeholder-neutral-500 outline-transparent duration-300 hover:border-neutral-800 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:text-white dark:hover:border-neutral-200 dark:focus:border-white dark:focus:ring-white",
+	extend: inputBaseVariant,
+	slots: {
+		base: "resize-none p-4",
+	},
 	variants: {
-		disabled: {
-			true: "cursor-not-allowed opacity-50",
-		},
-		error: {
-			true: "border border-red-500 text-red-500 outline outline-red-500 focus:border-red-500 focus:ring-red-500",
-		},
 		size: {
 			small: "h-30",
 			medium: "h-42",

package/dist/components/atoms/utils/xScroll/XScroll.svelte

@@ -0,0 +1,87 @@
+<script>
+	import { onMount } from "svelte";
+	import { xScrollVariants } from "./xScroll.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 */
+
+	/** @type {Props} */
+	let { children, class: className = "", ...rest } = $props();
+
+	let ro;
+	let scroller = $state();
+	let edgeStart = $state(true);
+	let edgeEnd = $state(false);
+
+	let styles = $derived(xScrollVariants());
+
+	const updateEdges = ({ clientWidth, scrollLeft, scrollWidth }) => {
+		const threshold = 3; // px
+		edgeStart = scrollLeft < threshold;
+		edgeEnd = scrollLeft + threshold >= scrollWidth - clientWidth;
+	};
+
+	const onwheel = (event) => {
+		const scrollContainer = event.currentTarget;
+		if (event.deltaY === 0) return;
+
+		event.preventDefault();
+		scrollContainer.scrollLeft += event.deltaY + event.deltaX;
+
+		updateEdges(scrollContainer);
+	};
+
+	onMount(() => {
+		if (scroller) {
+			ro = new ResizeObserver(() => {
+				updateEdges(scroller);
+			});
+
+			ro.observe(scroller);
+		}
+
+		return () => {
+			ro?.disconnect();
+		};
+	});
+</script>
+
+<div class={styles.base({ class: className })} {...rest}>
+	{#if !edgeStart}
+		<div class={styles.overflowStart()}></div>
+	{/if}
+	<div
+		class={styles.scroller()}
+		{onwheel}
+		onscrollend={(e) => updateEdges(e.target)}
+		bind:this={scroller}>
+		<div class={styles.inner()}>{@render children?.()}</div>
+	</div>
+	{#if !edgeEnd}
+		<div class={styles.overflowEnd()}></div>
+	{/if}
+</div>
+
+<style>
+	.overflow-x-auto {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+
+	.overflow-x-auto::-webkit-scrollbar {
+		width: 0;
+		height: 0;
+	}
+
+	.overflow-x-auto:hover {
+		scrollbar-width: thin;
+		scrollbar-color: color-mix(in lab, black, currentColor 75%) currentColor;
+	}
+
+	:global(.dark) .overflow-x-auto:hover {
+		scrollbar-color: color-mix(in lab, white, currentColor 50%) currentColor;
+	}
+</style>

package/dist/components/atoms/utils/xScroll/XScroll.svelte.d.ts

@@ -0,0 +1,25 @@
+export default XScroll;
+type XScroll = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const XScroll: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+}, {}, "">;
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+};

package/dist/components/atoms/utils/xScroll/xScroll.variants.d.ts

@@ -0,0 +1,39 @@
+export const xScrollVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            scroller?: import("tailwind-variants").ClassValue;
+            inner?: import("tailwind-variants").ClassValue;
+            overflowStart?: import("tailwind-variants").ClassValue;
+            overflowEnd?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            scroller?: import("tailwind-variants").ClassValue;
+            inner?: import("tailwind-variants").ClassValue;
+            overflowStart?: import("tailwind-variants").ClassValue;
+            overflowEnd?: import("tailwind-variants").ClassValue;
+        };
+    };
+}, {
+    base: string;
+    scroller: string;
+    inner: string;
+    overflowStart: string[];
+    overflowEnd: string[];
+}, undefined, any, {
+    base: string;
+    scroller: string;
+    inner: string;
+    overflowStart: string[];
+    overflowEnd: string[];
+}, import("tailwind-variants").TVReturnType<any, {
+    base: string;
+    scroller: string;
+    inner: string;
+    overflowStart: string[];
+    overflowEnd: string[];
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/atoms/utils/xScroll/xScroll.variants.js

@@ -0,0 +1,16 @@
+import { tv } from "tailwind-variants";
+
+const EDGE_BASE =
+	"pointer-events-none absolute top-0 z-1000 h-full w-6 from-current to-transparent";
+
+const xScrollVariants = tv({
+	slots: {
+		base: "relative",
+		scroller: "overflow-x-auto",
+		inner: "inline-block min-w-full",
+		overflowStart: [EDGE_BASE, "left-0 bg-linear-to-r"],
+		overflowEnd: [EDGE_BASE, "right-0 bg-linear-to-l"],
+	},
+});
+
+export { xScrollVariants };

package/dist/components/molecules/formField/FormField.svelte

@@ -1,29 +1,31 @@
 <script>
 	import { setContext } from "svelte";
 	import { formFieldVariants } from "./formField.variants.js";
-	import { HelperText, Label } from "../../../index.js";
+	import { HelperText, Label, utils } from "../../../index.js";
 
 	/**
 	 * @typedef {Object} Props
 	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
-	 * @property {boolean} [error=false] Whether the form field has an error
+	 * @property {boolean} [disabled=false] Whether the form field is disabled (passed down to the input)
+	 * @property {boolean} [error=false] Whether the form field has an error (passed down to the input)
 	 * @property {string} [errorText=""] The error text for the form field
 	 * @property {string} [helperText=""] The helper text for the form field
-	 * @property {string} [id=""] The id attribute for the form field
+	 * @property {string} [id=""] The id attribute for the form field (passed down to the input)
 	 * @property {string} [label=""] The label text for the form field
 	 * @property {"stacked" | "inline"} [layout="stacked"] The layout of the input and label
-	 * @property {boolean} [required=false] Whether the form field is required
+	 * @property {boolean} [required=false] Whether the form field is required (passed down to the input)
 	 */
 
 	/** @type {Props} */
 	let {
 		children,
 		class: className,
+		disabled = false,
 		error = false,
 		errorText,
 		helperText,
-		id,
+		id = utils.generateId(),
 		label,
 		layout = "stacked",
 		required = false,
@@ -31,6 +33,7 @@
 
 	setContext("form-field-store", () => {
 		return {
+			disabled,
 			error,
 			id,
 			required,
@@ -44,17 +47,19 @@
 
 		return helperText;
 	});
+
+	let styles = $derived(formFieldVariants({ disabled, layout }));
 </script>
 
-<div class={formFieldVariants({ class: className, layout })}>
+<div class={styles.base({ class: className })}>
 	{#if label}
-		<Label for={id} {error}>{label}{required ? " *" : ""}</Label>
+		<Label class={styles.label()} for={id} {error} {required}>{label}</Label>
 	{/if}
 
 	{@render children?.()}
 
 	{#if localHelperText}
-		<HelperText class={layout === "inline" ? "sm:col-[2]" : ""} {error}>
+		<HelperText class={styles.helperText()} {error}>
 			{localHelperText}
 		</HelperText>
 	{/if}

package/dist/components/molecules/formField/FormField.svelte.d.ts

@@ -13,7 +13,11 @@ declare const FormField: import("svelte").Component<{
      */
     class?: string;
     /**
-     * Whether the form field has an error
+     * Whether the form field is disabled (passed down to the input)
+     */
+    disabled?: boolean;
+    /**
+     * Whether the form field has an error (passed down to the input)
      */
     error?: boolean;
     /**
@@ -25,7 +29,7 @@ declare const FormField: import("svelte").Component<{
      */
     helperText?: string;
     /**
-     * The id attribute for the form field
+     * The id attribute for the form field (passed down to the input)
      */
     id?: string;
     /**
@@ -37,7 +41,7 @@ declare const FormField: import("svelte").Component<{
      */
     layout?: "stacked" | "inline";
     /**
-     * Whether the form field is required
+     * Whether the form field is required (passed down to the input)
      */
     required?: boolean;
 }, {}, "">;
@@ -51,7 +55,11 @@ type Props = {
      */
     class?: string;
     /**
-     * Whether the form field has an error
+     * Whether the form field is disabled (passed down to the input)
+     */
+    disabled?: boolean;
+    /**
+     * Whether the form field has an error (passed down to the input)
      */
     error?: boolean;
     /**
@@ -63,7 +71,7 @@ type Props = {
      */
     helperText?: string;
     /**
-     * The id attribute for the form field
+     * The id attribute for the form field (passed down to the input)
      */
     id?: string;
     /**
@@ -75,7 +83,7 @@ type Props = {
      */
     layout?: "stacked" | "inline";
     /**
-     * Whether the form field is required
+     * Whether the form field is required (passed down to the input)
      */
     required?: boolean;
 };

package/dist/components/molecules/formField/formField.variants.d.ts

@@ -1,13 +1,49 @@
 export const formFieldVariants: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            helperText: string;
+        };
+    };
     layout: {
-        inline: string;
+        inline: {
+            base: string;
+            helperText: string;
+        };
+    };
+}, {
+    base: string;
+    label: string;
+    helperText: string;
+}, undefined, {
+    disabled: {
+        true: {
+            helperText: string;
+        };
     };
-}, undefined, "grid gap-2", {
     layout: {
-        inline: string;
+        inline: {
+            base: string;
+            helperText: string;
+        };
+    };
+}, {
+    base: string;
+    label: string;
+    helperText: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            helperText: string;
+        };
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
     layout: {
-        inline: string;
+        inline: {
+            base: string;
+            helperText: string;
+        };
     };
-}, undefined, "grid gap-2", unknown, unknown, undefined>>;
+}, {
+    base: string;
+    label: string;
+    helperText: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/molecules/formField/formField.variants.js

@@ -1,10 +1,22 @@
 import { tv } from "tailwind-variants";
 
 const formFieldVariants = tv({
-	base: "grid gap-2",
+	slots: {
+		base: "grid gap-2",
+		label: "",
+		helperText: "-mt-1 ml-4",
+	},
 	variants: {
+		disabled: {
+			true: {
+				helperText: "opacity-40",
+			},
+		},
 		layout: {
-			inline: "items-center sm:grid-cols-[minmax(120px,auto)_1fr]",
+			inline: {
+				base: "items-center sm:grid-cols-[minmax(120px,auto)_1fr]",
+				helperText: "sm:col-2",
+			},
 		},
 	},
 });

package/dist/components/molecules/selectorCard/SelectorCard.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { selectorCardVariants } from "./selectorCard.variants.js";
-	import { Switch, Radio, Label } from "../../../index.js";
+	import { Switch, Radio, Label, utils } from "../../../index.js";
 
 	/**
 	 * @typedef {Object} Props
@@ -26,7 +26,7 @@
 		error = false,
 		errorText = "",
 		helperText = "",
-		id = "",
+		id = utils.generateId(),
 		label = "",
 		name,
 		required = false,

package/dist/components/molecules/toggleGroup/ToggleGroup.svelte

@@ -6,6 +6,7 @@
 		toggleGroupVariants,
 		toggleGroupTabVariants,
 	} from "./toggleGroup.variants.js";
+	import { XScroll } from "../../../index.js";
 
 	/**
 	 * @typedef {Object} Props
@@ -28,7 +29,7 @@
 		children,
 		class: className = "",
 		size = "medium",
-		value,
+		value = $bindable(),
 		variant = "default",
 	} = $props();
 
@@ -48,15 +49,17 @@
 		};
 	});
 
-	let stylesByVariant = $derived.by(() => {
+	let styles = $derived.by(() => {
 		if (variant === "tabs") {
-			return toggleGroupTabVariants({ appearance, class: className, size, variant });
+			return toggleGroupTabVariants();
 		}
 
-		return toggleGroupVariants({ appearance, class: className, size, variant });
+		return toggleGroupVariants({ appearance, size, variant });
 	});
 </script>
 
-<div bind:this={toggleGroupEl} class={stylesByVariant} role="tablist">
-	{@render children?.()}
-</div>
+<XScroll class={styles.base({ class: className })}>
+	<div bind:this={toggleGroupEl} class={styles.tabs()} role="tablist">
+		{@render children?.()}
+	</div>
+</XScroll>

package/dist/components/molecules/toggleGroup/ToggleGroup.svelte.d.ts

@@ -28,7 +28,7 @@ declare const ToggleGroup: import("svelte").Component<{
      * The variant of the toggle group
      */
     variant?: "default" | "tabs";
-}, {}, "">;
+}, {}, "value">;
 type Props = {
     /**
      * The appearance variant of the component

package/dist/components/molecules/toggleGroup/toggleGroup.variants.d.ts

@@ -4,32 +4,70 @@ export const toggleGroupVariants: import("tailwind-variants").TVReturnType<{
         raised: string;
     };
     size: {
-        small: string;
-        medium: string;
+        small: {
+            tabs: string;
+        };
+        medium: {
+            tabs: string;
+        };
     };
-}, undefined, "flex gap-1 rounded-sm", {
+}, {
+    base: string;
+    tabs: string;
+}, undefined, {
     appearance: {
         default: string;
         raised: string;
     };
     size: {
-        small: string;
-        medium: string;
+        small: {
+            tabs: string;
+        };
+        medium: {
+            tabs: string;
+        };
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, {
+    base: string;
+    tabs: string;
+}, import("tailwind-variants").TVReturnType<{
     appearance: {
         default: string;
         raised: string;
     };
     size: {
-        small: string;
-        medium: string;
+        small: {
+            tabs: string;
+        };
+        medium: {
+            tabs: string;
+        };
+    };
+}, {
+    base: string;
+    tabs: string;
+}, undefined, unknown, unknown, undefined>>;
+export const toggleGroupTabVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            tabs?: import("tailwind-variants").ClassValue;
+        };
     };
-}, undefined, "flex gap-1 rounded-sm", unknown, unknown, undefined>>;
-export const toggleGroupTabVariants: import("tailwind-variants").TVReturnType<{} | {
+} | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
+            tabs?: import("tailwind-variants").ClassValue;
         };
     };
-}, undefined, "flex h-10 gap-5 border-b border-b-neutral-500", any, undefined, import("tailwind-variants").TVReturnType<any, undefined, "flex h-10 gap-5 border-b border-b-neutral-500", unknown, unknown, undefined>>;
+}, {
+    base: string;
+    tabs: string;
+}, undefined, any, {
+    base: string;
+    tabs: string;
+}, import("tailwind-variants").TVReturnType<any, {
+    base: string;
+    tabs: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/molecules/toggleGroup/toggleGroup.variants.js

@@ -1,21 +1,31 @@
 import { tv } from "tailwind-variants";
 
 const toggleGroupVariants = tv({
-	base: "flex gap-1 rounded-sm",
+	slots: {
+		base: "overflow-hidden rounded-sm bg-current",
+		tabs: "flex gap-1",
+	},
 	variants: {
 		appearance: {
-			default: "bg-neutral-100 dark:bg-neutral-900",
-			raised: "bg-neutral-300 dark:bg-neutral-700",
+			default: "text-neutral-100 dark:text-neutral-900",
+			raised: "text-neutral-300 dark:text-neutral-700",
 		},
 		size: {
-			small: "h-6 p-0.5",
-			medium: "h-10 p-1",
+			small: {
+				tabs: "h-6 p-0.5",
+			},
+			medium: {
+				tabs: "h-10 p-1",
+			},
 		},
 	},
 });
 
 const toggleGroupTabVariants = tv({
-	base: "flex h-10 gap-5 border-b border-b-neutral-500",
+	slots: {
+		base: "",
+		tabs: "flex h-10 gap-5 border-b border-b-neutral-500",
+	},
 });
 
 export { toggleGroupVariants, toggleGroupTabVariants };

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export { default as Select } from "./components/atoms/select/Select.svelte";
 export { default as Spinner } from "./components/atoms/feedback/spinner/Spinner.svelte";
 export { default as Switch } from "./components/atoms/switch/Switch.svelte";
 export { default as Textarea } from "./components/atoms/textarea/Textarea.svelte";
+export { default as XScroll } from "./components/atoms/utils/xScroll/XScroll.svelte";
 export * as ColorSwatch from "./components/molecules/pickers/colorSwatch/index.js";
 export { default as FormActions } from "./components/molecules/formActions/formActions.svelte";
 export { default as FormField } from "./components/molecules/formField/FormField.svelte";

package/dist/index.js

@@ -21,6 +21,7 @@ export { default as Select } from "./components/atoms/select/Select.svelte";
 export { default as Spinner } from "./components/atoms/feedback/spinner/Spinner.svelte";
 export { default as Switch } from "./components/atoms/switch/Switch.svelte";
 export { default as Textarea } from "./components/atoms/textarea/Textarea.svelte";
+export { default as XScroll } from "./components/atoms/utils/xScroll/XScroll.svelte";
 
 /**
  * Molecules

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "publishConfig": {
     "access": "public"
   },
@@ -26,17 +26,17 @@
     }
   },
   "dependencies": {
-    "@tiptap/core": "^3.9.0",
-    "@tiptap/extension-color": "^3.9.0",
-    "@tiptap/extension-highlight": "^3.9.0",
-    "@tiptap/extension-placeholder": "^3.9.0",
-    "@tiptap/extension-text-align": "^3.9.0",
-    "@tiptap/extension-text-style": "^3.9.0",
-    "@tiptap/pm": "^3.9.0",
-    "@tiptap/starter-kit": "^3.9.0",
-    "bits-ui": "^2.14.1",
+    "@tiptap/core": "^3.10.2",
+    "@tiptap/extension-color": "^3.10.2",
+    "@tiptap/extension-highlight": "^3.10.2",
+    "@tiptap/extension-placeholder": "^3.10.2",
+    "@tiptap/extension-text-align": "^3.10.2",
+    "@tiptap/extension-text-style": "^3.10.2",
+    "@tiptap/pm": "^3.10.2",
+    "@tiptap/starter-kit": "^3.10.2",
+    "bits-ui": "^2.14.2",
     "dompurify": "^3.3.0",
-    "tailwind-merge": "3.3.1",
+    "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.1.1",
     "uuid": "^13.0.0"
   },
@@ -44,37 +44,37 @@
     "svelte": "^5.38.7"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.4.0",
-    "@eslint/js": "^9.38.0",
-    "@storybook/addon-a11y": "^10.0.0",
-    "@storybook/addon-docs": "^10.0.0",
+    "@eslint/compat": "^2.0.0",
+    "@eslint/js": "^9.39.1",
+    "@storybook/addon-a11y": "^10.0.5",
+    "@storybook/addon-docs": "^10.0.5",
     "@storybook/addon-svelte-csf": "^5.0.10",
-    "@storybook/sveltekit": "^10.0.0",
+    "@storybook/sveltekit": "^10.0.5",
     "@sveltejs/adapter-auto": "^7.0.0",
-    "@sveltejs/kit": "^2.48.2",
+    "@sveltejs/kit": "^2.48.4",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.1.16",
-    "@types/node": "^24.9.2",
-    "@vitest/browser": "^4.0.4",
-    "eslint": "^9.38.0",
+    "@tailwindcss/vite": "^4.1.17",
+    "@types/node": "^24.10.0",
+    "@vitest/browser": "^4.0.7",
+    "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^10.0.0",
-    "eslint-plugin-svelte": "^3.12.5",
-    "globals": "^16.4.0",
+    "eslint-plugin-storybook": "^10.0.5",
+    "eslint-plugin-svelte": "^3.13.0",
+    "globals": "^16.5.0",
     "playwright": "^1.56.1",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.7.1",
     "publint": "^0.3.15",
-    "storybook": "^10.0.0",
-    "svelte": "^5.42.3",
-    "tailwindcss": "^4.1.16",
+    "storybook": "^10.0.5",
+    "svelte": "^5.43.4",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
-    "vite": "^7.1.12",
-    "vitest": "^4.0.4",
+    "vite": "^7.2.2",
+    "vitest": "^4.0.7",
     "vitest-browser-svelte": "^2.0.1"
   },
   "keywords": [