@websline/system-components 1.0.4 → 1.0.6

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
@@ -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.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.4",
+  "version": "1.0.6",
   "publishConfig": {
     "access": "public"
   },
@@ -26,55 +26,55 @@
     }
   },
   "dependencies": {
-    "@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",
+    "@tiptap/core": "^3.11.1",
+    "@tiptap/extension-color": "^3.11.1",
+    "@tiptap/extension-highlight": "^3.11.1",
+    "@tiptap/extension-placeholder": "^3.11.1",
+    "@tiptap/extension-text-align": "^3.11.1",
+    "@tiptap/extension-text-style": "^3.11.1",
+    "@tiptap/pm": "^3.11.1",
+    "@tiptap/starter-kit": "^3.11.1",
+    "bits-ui": "^2.14.4",
     "dompurify": "^3.3.0",
-    "tailwind-merge": "3.3.1",
-    "tailwind-variants": "^3.1.1",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2",
     "uuid": "^13.0.0"
   },
   "peerDependencies": {
     "svelte": "^5.38.7"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.4.1",
+    "@eslint/compat": "^2.0.0",
     "@eslint/js": "^9.39.1",
-    "@storybook/addon-a11y": "^10.0.5",
-    "@storybook/addon-docs": "^10.0.5",
+    "@storybook/addon-a11y": "^10.1.0",
+    "@storybook/addon-docs": "^10.1.0",
     "@storybook/addon-svelte-csf": "^5.0.10",
-    "@storybook/sveltekit": "^10.0.5",
+    "@storybook/sveltekit": "^10.1.0",
     "@sveltejs/adapter-auto": "^7.0.0",
-    "@sveltejs/kit": "^2.48.4",
-    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/kit": "^2.49.0",
+    "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.17",
-    "@types/node": "^24.10.0",
-    "@vitest/browser": "^4.0.7",
+    "@types/node": "^24.10.1",
+    "@vitest/browser": "^4.0.14",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^10.0.5",
+    "eslint-plugin-storybook": "^10.1.0",
     "eslint-plugin-svelte": "^3.13.0",
     "globals": "^16.5.0",
-    "playwright": "^1.56.1",
-    "prettier": "^3.6.2",
+    "playwright": "^1.57.0",
+    "prettier": "^3.7.1",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.7.1",
     "publint": "^0.3.15",
-    "storybook": "^10.0.5",
-    "svelte": "^5.43.4",
+    "storybook": "^10.1.0",
+    "svelte": "^5.45.2",
     "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
-    "vite": "^7.2.2",
-    "vitest": "^4.0.7",
+    "vite": "^7.2.4",
+    "vitest": "^4.0.14",
     "vitest-browser-svelte": "^2.0.1"
   },
   "keywords": [