iryx-ui 0.11.0 → 0.13.0

package/dist/theme/sidebar.js

@@ -0,0 +1,43 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/sidebar.ts
+var t = e({
+	slots: {
+		root: "flex h-full flex-col gap-2 border-border bg-background text-foreground transition-[width] duration-200 ease-out",
+		header: "flex shrink-0 items-center gap-2 px-3 py-3",
+		nav: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-2 py-1",
+		footer: "flex shrink-0 items-center gap-2 border-t border-border px-3 py-3",
+		section: "flex flex-col gap-1",
+		sectionLabel: "px-2 pt-1 pb-0.5 text-xs font-medium tracking-wide text-muted-foreground uppercase",
+		link: "group/link relative flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-sm font-medium text-muted-foreground no-underline transition-colors outline-none select-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 data-[active]:bg-accent data-[active]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+		linkLabel: "flex-1 truncate text-left",
+		linkBadge: "ml-auto shrink-0",
+		groupIcon: "ml-auto size-4 shrink-0 transition-[rotate] duration-200 ease-out group-data-[state=open]/link:rotate-90",
+		groupContent: "group/collapsible overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+		groupInner: "iryx-sidebar-submenu mt-1 flex flex-col gap-1 border-l border-border group-data-[state=closed]/collapsible:animate-collapsible-content-out group-data-[state=open]/collapsible:animate-collapsible-content-in"
+	},
+	variants: {
+		side: {
+			left: { root: "border-r" },
+			right: { root: "border-l" }
+		},
+		collapsed: {
+			true: {
+				root: "w-16",
+				header: "justify-center px-0",
+				footer: "justify-center px-0",
+				link: "justify-center px-0",
+				linkLabel: "hidden",
+				linkBadge: "hidden",
+				sectionLabel: "hidden",
+				groupIcon: "hidden"
+			},
+			false: { root: "w-64" }
+		}
+	},
+	defaultVariants: {
+		side: "left",
+		collapsed: !1
+	}
+});
+//#endregion
+export { t as sidebarTheme };

package/dist/theme/signature-pad.d.ts

@@ -0,0 +1,50 @@
+export declare const signaturePadTheme: import("tailwind-variants").TVReturnType<{
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    canvas: string;
+    actions: string;
+    action: string;
+}, undefined, {
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    canvas: string;
+    actions: string;
+    action: string;
+}, import("tailwind-variants").TVReturnType<{
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    canvas: string;
+    actions: string;
+    action: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SignaturePadSlots = keyof ReturnType<typeof signaturePadTheme>;

package/dist/theme/signature-pad.js

@@ -0,0 +1,17 @@
+import { fieldBase as e } from "./input.js";
+import { tv as t } from "tailwind-variants";
+//#region src/theme/signature-pad.ts
+var n = t({
+	slots: {
+		root: `relative flex flex-col ${e} h-auto overflow-hidden p-0 focus-within:ring-2 focus-within:ring-primary/50`,
+		canvas: "block w-full touch-none",
+		actions: "absolute top-2 right-2 flex items-center gap-1",
+		action: "inline-flex size-7 items-center justify-center rounded-lg text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-3.5"
+	},
+	variants: {
+		invalid: { true: { root: "border-red-500 focus-within:ring-red-500/40" } },
+		disabled: { true: { root: "cursor-not-allowed opacity-50" } }
+	}
+});
+//#endregion
+export { n as signaturePadTheme };

package/dist/theme/slider.d.ts

@@ -0,0 +1,128 @@
+export declare const sliderTheme: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+            header: string;
+        };
+        vertical: {
+            root: string;
+            header: string;
+        };
+    };
+    size: {
+        sm: {
+            track: string;
+            thumb: string;
+        };
+        md: {
+            track: string;
+            thumb: string;
+        };
+        lg: {
+            track: string;
+            thumb: string;
+        };
+    };
+    /** Without a grab hand the track reads as a progress bar, not a control. */
+    disabled: {
+        false: {
+            thumb: string;
+        };
+    };
+}, {
+    root: string;
+    /** Only rendered when a label or value text is shown. */
+    header: string;
+    label: string;
+    value: string;
+    slider: string;
+    track: string;
+    range: string;
+    thumb: string;
+    scale: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+            header: string;
+        };
+        vertical: {
+            root: string;
+            header: string;
+        };
+    };
+    size: {
+        sm: {
+            track: string;
+            thumb: string;
+        };
+        md: {
+            track: string;
+            thumb: string;
+        };
+        lg: {
+            track: string;
+            thumb: string;
+        };
+    };
+    /** Without a grab hand the track reads as a progress bar, not a control. */
+    disabled: {
+        false: {
+            thumb: string;
+        };
+    };
+}, {
+    root: string;
+    /** Only rendered when a label or value text is shown. */
+    header: string;
+    label: string;
+    value: string;
+    slider: string;
+    track: string;
+    range: string;
+    thumb: string;
+    scale: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+            header: string;
+        };
+        vertical: {
+            root: string;
+            header: string;
+        };
+    };
+    size: {
+        sm: {
+            track: string;
+            thumb: string;
+        };
+        md: {
+            track: string;
+            thumb: string;
+        };
+        lg: {
+            track: string;
+            thumb: string;
+        };
+    };
+    /** Without a grab hand the track reads as a progress bar, not a control. */
+    disabled: {
+        false: {
+            thumb: string;
+        };
+    };
+}, {
+    root: string;
+    /** Only rendered when a label or value text is shown. */
+    header: string;
+    label: string;
+    value: string;
+    slider: string;
+    track: string;
+    range: string;
+    thumb: string;
+    scale: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SliderSlots = keyof ReturnType<typeof sliderTheme>;

package/dist/theme/slider.js

@@ -0,0 +1,49 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/slider.ts
+var t = e({
+	slots: {
+		root: "flex flex-col gap-2",
+		header: "flex text-sm",
+		label: "font-medium text-foreground select-none",
+		value: "text-muted-foreground tabular-nums",
+		slider: "relative flex touch-none items-center select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-44 data-[orientation=vertical]:flex-col",
+		track: "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
+		range: "absolute rounded-full bg-linear-to-b from-primary-from to-primary-to data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+		thumb: "block shrink-0 rounded-full border-2 border-primary bg-background shadow-sm transition-shadow outline-none focus-visible:ring-2 focus-visible:ring-primary/50 data-[disabled]:cursor-not-allowed",
+		scale: "flex justify-between text-xs text-muted-foreground tabular-nums"
+	},
+	variants: {
+		orientation: {
+			horizontal: {
+				root: "w-full",
+				header: "items-baseline justify-between gap-2"
+			},
+			vertical: {
+				root: "inline-flex w-auto items-center",
+				header: "flex-col items-center gap-0.5"
+			}
+		},
+		size: {
+			sm: {
+				track: "data-[orientation=horizontal]:h-1 data-[orientation=vertical]:w-1",
+				thumb: "size-3.5"
+			},
+			md: {
+				track: "data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5",
+				thumb: "size-4"
+			},
+			lg: {
+				track: "data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2",
+				thumb: "size-5"
+			}
+		},
+		disabled: { false: { thumb: "cursor-grab active:cursor-grabbing" } }
+	},
+	defaultVariants: {
+		orientation: "horizontal",
+		size: "md",
+		disabled: !1
+	}
+});
+//#endregion
+export { t as sliderTheme };

package/dist/theme/sparkline.d.ts

@@ -13,9 +13,7 @@ export declare const sparklineTheme: import("tailwind-variants").TVReturnType<{
     /** Carries the inset that keeps every mark inside the component's box. */
     root: string;
     plot: string;
-    /** 2px, round join and cap, per the shared line-mark spec. */
     line: string;
-    /** A wash at ~10%, never a saturated block competing with the line. */
     area: string;
     dot: string;
     /** Keeps the end dot legible where it sits on top of the line. */
@@ -30,9 +28,7 @@ export declare const sparklineTheme: import("tailwind-variants").TVReturnType<{
     /** Carries the inset that keeps every mark inside the component's box. */
     root: string;
     plot: string;
-    /** 2px, round join and cap, per the shared line-mark spec. */
     line: string;
-    /** A wash at ~10%, never a saturated block competing with the line. */
     area: string;
     dot: string;
     /** Keeps the end dot legible where it sits on top of the line. */
@@ -47,9 +43,7 @@ export declare const sparklineTheme: import("tailwind-variants").TVReturnType<{
     /** Carries the inset that keeps every mark inside the component's box. */
     root: string;
     plot: string;
-    /** 2px, round join and cap, per the shared line-mark spec. */
     line: string;
-    /** A wash at ~10%, never a saturated block competing with the line. */
     area: string;
     dot: string;
     /** Keeps the end dot legible where it sits on top of the line. */

package/dist/theme/splitter.d.ts

@@ -0,0 +1,59 @@
+export declare const splitterTheme: import("tailwind-variants").TVReturnType<{
+    direction: {
+        horizontal: {
+            root: string;
+            handle: string;
+            rule: string;
+        };
+        vertical: {
+            root: string;
+            handle: string;
+            rule: string;
+        };
+    };
+}, {
+    root: string;
+    panel: string;
+    handle: string;
+    /** The visible rule inside the handle's hit area. */
+    rule: string;
+}, undefined, {
+    direction: {
+        horizontal: {
+            root: string;
+            handle: string;
+            rule: string;
+        };
+        vertical: {
+            root: string;
+            handle: string;
+            rule: string;
+        };
+    };
+}, {
+    root: string;
+    panel: string;
+    handle: string;
+    /** The visible rule inside the handle's hit area. */
+    rule: string;
+}, import("tailwind-variants").TVReturnType<{
+    direction: {
+        horizontal: {
+            root: string;
+            handle: string;
+            rule: string;
+        };
+        vertical: {
+            root: string;
+            handle: string;
+            rule: string;
+        };
+    };
+}, {
+    root: string;
+    panel: string;
+    handle: string;
+    /** The visible rule inside the handle's hit area. */
+    rule: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SplitterSlots = keyof ReturnType<typeof splitterTheme>;

package/dist/theme/splitter.js

@@ -0,0 +1,25 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/splitter.ts
+var t = e({
+	slots: {
+		root: "flex size-full",
+		panel: "overflow-hidden",
+		handle: "group relative flex shrink-0 items-center justify-center outline-none",
+		rule: "bg-border transition-colors group-hover:bg-primary group-focus-visible:bg-primary group-data-[state=drag]:bg-primary"
+	},
+	variants: { direction: {
+		horizontal: {
+			root: "flex-row",
+			handle: "cursor-col-resize px-1",
+			rule: "h-full w-px"
+		},
+		vertical: {
+			root: "flex-col",
+			handle: "cursor-row-resize py-1",
+			rule: "h-px w-full"
+		}
+	} },
+	defaultVariants: { direction: "horizontal" }
+});
+//#endregion
+export { t as splitterTheme };

package/dist/theme/stat.d.ts

@@ -27,7 +27,6 @@ export declare const statTheme: import("tailwind-variants").TVReturnType<{
     };
 }, {
     root: string;
-    /** Small, uppercase and tracked out, so the value carries the weight. */
     label: string;
     value: string;
     delta: string;
@@ -62,7 +61,6 @@ export declare const statTheme: import("tailwind-variants").TVReturnType<{
     };
 }, {
     root: string;
-    /** Small, uppercase and tracked out, so the value carries the weight. */
     label: string;
     value: string;
     delta: string;
@@ -97,7 +95,6 @@ export declare const statTheme: import("tailwind-variants").TVReturnType<{
     };
 }, {
     root: string;
-    /** Small, uppercase and tracked out, so the value carries the weight. */
     label: string;
     value: string;
     delta: string;

package/dist/theme/stepper.js

@@ -3,7 +3,7 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		root: "flex w-full",
-		item: "group relative flex flex-1 items-center gap-3",
+		item: "group relative flex flex-1 items-center gap-3 last:flex-none",
 		trigger: "flex items-center gap-3 rounded-xl text-left outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50",
 		indicator: "flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-linear-to-b text-sm font-medium transition-[color,border-color] group-data-[state=active]:border-primary group-data-[state=active]:from-primary-from group-data-[state=active]:to-primary-to group-data-[state=active]:text-primary-foreground group-data-[state=completed]:border-primary group-data-[state=completed]:from-primary-from group-data-[state=completed]:to-primary-to group-data-[state=completed]:text-primary-foreground [&_svg]:size-4",
 		content: "flex flex-col gap-0.5",
@@ -15,7 +15,7 @@ var t = e({
 		horizontal: {},
 		vertical: {
 			root: "flex-col gap-2",
-			item: "flex-none items-start",
+			item: "flex-none flex-col items-stretch gap-2",
 			separator: "ml-4 h-6 w-px flex-none"
 		}
 	} },

package/dist/theme/switch.d.ts

@@ -1,26 +1,23 @@
 export declare const switchTheme: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            label?: import("tailwind-variants").ClassValue;
-            wrapper?: import("tailwind-variants").ClassValue;
-            thumb?: import("tailwind-variants").ClassValue;
+    size: {
+        sm: {
+            root: string;
+            thumb: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            label?: import("tailwind-variants").ClassValue;
-            wrapper?: import("tailwind-variants").ClassValue;
-            thumb?: import("tailwind-variants").ClassValue;
+        md: {
+            root: string;
+            thumb: string;
+        };
+        lg: {
+            root: string;
+            thumb: string;
         };
     };
-} | {}, {
+    /** Nudges the track down so it centres against the label's first line. */
+    withText: {
+        true: {};
+    };
+}, {
     /** Only rendered when a `label` or `description` is provided. */
     wrapper: string;
     root: string;
@@ -29,17 +26,25 @@ export declare const switchTheme: import("tailwind-variants").TVReturnType<{
     label: string;
     description: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            label?: import("tailwind-variants").ClassValue;
-            wrapper?: import("tailwind-variants").ClassValue;
-            thumb?: import("tailwind-variants").ClassValue;
+    size: {
+        sm: {
+            root: string;
+            thumb: string;
         };
+        md: {
+            root: string;
+            thumb: string;
+        };
+        lg: {
+            root: string;
+            thumb: string;
+        };
+    };
+    /** Nudges the track down so it centres against the label's first line. */
+    withText: {
+        true: {};
     };
-} | {}, {
+}, {
     /** Only rendered when a `label` or `description` is provided. */
     wrapper: string;
     root: string;
@@ -47,7 +52,26 @@ export declare const switchTheme: import("tailwind-variants").TVReturnType<{
     content: string;
     label: string;
     description: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            thumb: string;
+        };
+        md: {
+            root: string;
+            thumb: string;
+        };
+        lg: {
+            root: string;
+            thumb: string;
+        };
+    };
+    /** Nudges the track down so it centres against the label's first line. */
+    withText: {
+        true: {};
+    };
+}, {
     /** Only rendered when a `label` or `description` is provided. */
     wrapper: string;
     root: string;

package/dist/theme/switch.js

@@ -1,12 +1,37 @@
 import { tv as e } from "tailwind-variants";
 //#region src/theme/switch.ts
-var t = e({ slots: {
-	wrapper: "flex items-start gap-2.5",
-	root: "inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors outline-none focus:ring-2 focus:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted",
-	thumb: "pointer-events-none block size-4 rounded-full bg-background shadow-sm transition-transform data-[state=checked]:translate-x-4.5 data-[state=unchecked]:translate-x-0.5",
-	content: "grid gap-1",
-	label: "text-sm leading-5 font-medium text-foreground select-none",
-	description: "text-sm leading-snug text-muted-foreground"
-} });
+var t = e({
+	slots: {
+		wrapper: "flex items-start gap-2.5",
+		root: "inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors outline-none focus:ring-2 focus:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted",
+		thumb: "pointer-events-none block rounded-full bg-background shadow-sm transition-transform data-[state=unchecked]:translate-x-0.5",
+		content: "grid gap-1",
+		label: "text-sm leading-5 font-medium text-foreground select-none",
+		description: "text-sm leading-snug text-muted-foreground"
+	},
+	variants: {
+		size: {
+			sm: {
+				root: "h-4 w-7",
+				thumb: "size-3 data-[state=checked]:translate-x-3.5"
+			},
+			md: {
+				root: "h-5 w-9",
+				thumb: "size-4 data-[state=checked]:translate-x-4.5"
+			},
+			lg: {
+				root: "h-6 w-11",
+				thumb: "size-5 data-[state=checked]:translate-x-5.5"
+			}
+		},
+		withText: { true: {} }
+	},
+	compoundVariants: [{
+		size: "sm",
+		withText: !0,
+		class: { root: "mt-0.5" }
+	}],
+	defaultVariants: { size: "md" }
+});
 //#endregion
 export { t as switchTheme };