iryx-ui 0.12.0 → 0.14.0

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 };

package/dist/theme/table.d.ts

@@ -24,17 +24,32 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
             tr: string;
         };
     };
+    /**
+     * Refreshing: an indeterminate bar riding the rule between the header and
+     * the first row, which is where a table conventionally shows progress.
+     *
+     * Plain class rather than utilities, like the drawer's drag plumbing — it
+     * is a keyframed `background-position` on a pseudo-element, and there is
+     * no class name for Tailwind to generate. Defined in `theme.css`.
+     */
+    loading: {
+        true: {
+            thead: string;
+        };
+    };
     size: {
         sm: {
             th: string;
             td: string;
             gutter: string;
+            actions: string;
         };
         md: {};
         lg: {
             th: string;
             td: string;
             gutter: string;
+            actions: string;
         };
     };
     align: {
@@ -68,10 +83,11 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
     td: string;
     gutter: string;
     headGutter: string;
+    actions: string;
+    headActions: string;
     expandButton: string;
     expandedRow: string;
     expandedCell: string;
-    /** Message row for "no results", spanning every column. */
     empty: string;
     caption: string;
 }, undefined, {
@@ -100,17 +116,32 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
             tr: string;
         };
     };
+    /**
+     * Refreshing: an indeterminate bar riding the rule between the header and
+     * the first row, which is where a table conventionally shows progress.
+     *
+     * Plain class rather than utilities, like the drawer's drag plumbing — it
+     * is a keyframed `background-position` on a pseudo-element, and there is
+     * no class name for Tailwind to generate. Defined in `theme.css`.
+     */
+    loading: {
+        true: {
+            thead: string;
+        };
+    };
     size: {
         sm: {
             th: string;
             td: string;
             gutter: string;
+            actions: string;
         };
         md: {};
         lg: {
             th: string;
             td: string;
             gutter: string;
+            actions: string;
         };
     };
     align: {
@@ -144,10 +175,11 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
     td: string;
     gutter: string;
     headGutter: string;
+    actions: string;
+    headActions: string;
     expandButton: string;
     expandedRow: string;
     expandedCell: string;
-    /** Message row for "no results", spanning every column. */
     empty: string;
     caption: string;
 }, import("tailwind-variants").TVReturnType<{
@@ -176,17 +208,32 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
             tr: string;
         };
     };
+    /**
+     * Refreshing: an indeterminate bar riding the rule between the header and
+     * the first row, which is where a table conventionally shows progress.
+     *
+     * Plain class rather than utilities, like the drawer's drag plumbing — it
+     * is a keyframed `background-position` on a pseudo-element, and there is
+     * no class name for Tailwind to generate. Defined in `theme.css`.
+     */
+    loading: {
+        true: {
+            thead: string;
+        };
+    };
     size: {
         sm: {
             th: string;
             td: string;
             gutter: string;
+            actions: string;
         };
         md: {};
         lg: {
             th: string;
             td: string;
             gutter: string;
+            actions: string;
         };
     };
     align: {
@@ -220,10 +267,11 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
     td: string;
     gutter: string;
     headGutter: string;
+    actions: string;
+    headActions: string;
     expandButton: string;
     expandedRow: string;
     expandedCell: string;
-    /** Message row for "no results", spanning every column. */
     empty: string;
     caption: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/theme/table.js

@@ -8,11 +8,13 @@ var t = e({
 		tbody: "",
 		tr: "border-b border-border transition-colors last:border-b-0",
 		th: "border-b border-border px-3 py-3 text-start align-middle text-xs font-semibold tracking-wide text-muted-foreground uppercase",
-		sortButton: "inline-flex cursor-pointer items-center gap-1.5 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-3.5 [&_svg]:shrink-0",
+		sortButton: "inline-flex cursor-pointer items-center gap-1.5 rounded-md tracking-wide uppercase outline-none focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-3.5 [&_svg]:shrink-0",
 		sortIcon: "text-muted-foreground/70 transition-colors",
 		td: "px-3 py-3 align-middle text-foreground",
 		gutter: "w-px px-3 py-3 align-middle",
 		headGutter: "w-px border-b border-border px-3 py-3 align-middle",
+		actions: "w-px px-3 py-3 text-end align-middle whitespace-nowrap",
+		headActions: "w-px border-b border-border px-3 py-3 align-middle",
 		expandButton: "inline-flex size-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-[transform,color,background-color] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4",
 		expandedRow: "bg-muted/30",
 		expandedCell: "p-0",
@@ -25,17 +27,20 @@ var t = e({
 		clickable: { true: { tr: "cursor-pointer" } },
 		stickyHeader: { true: { th: "sticky top-0 z-10 bg-background" } },
 		selected: { true: { tr: "bg-primary/5" } },
+		loading: { true: { thead: "iryx-table-loading" } },
 		size: {
 			sm: {
 				th: "py-2",
 				td: "py-2",
-				gutter: "py-2"
+				gutter: "py-2",
+				actions: "py-2"
 			},
 			md: {},
 			lg: {
 				th: "py-4",
 				td: "py-4",
-				gutter: "py-4"
+				gutter: "py-4",
+				actions: "py-4"
 			}
 		},
 		align: {

package/dist/theme/tabs.d.ts

@@ -1,6 +1,5 @@
 export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
     variant: {
-        /** Pill sliding along a muted track. */
         solid: {
             list: string;
             indicator: string;
@@ -34,7 +33,6 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
     content: string;
 }, undefined, {
     variant: {
-        /** Pill sliding along a muted track. */
         solid: {
             list: string;
             indicator: string;
@@ -68,7 +66,6 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
     content: string;
 }, import("tailwind-variants").TVReturnType<{
     variant: {
-        /** Pill sliding along a muted track. */
         solid: {
             list: string;
             indicator: string;

package/dist/theme/tags-input.d.ts

@@ -0,0 +1,110 @@
+export declare const tagsInputTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            tag: string;
+            tagDelete: string;
+            input: string;
+            clear: string;
+        };
+        md: {
+            root: string;
+            tag: string;
+            tagDelete: string;
+            input: string;
+            clear: string;
+        };
+        lg: {
+            root: string;
+            tag: string;
+            tagDelete: string;
+            input: string;
+            clear: string;
+        };
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    tag: string;
+    tagText: string;
+    tagDelete: string;
+    input: string;
+    clear: string;
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+            tag: string;
+            tagDelete: string;
+            input: string;
+            clear: string;
+        };
+        md: {
+            root: string;
+            tag: string;
+            tagDelete: string;
+            input: string;
+            clear: string;
+        };
+        lg: {
+            root: string;
+            tag: string;
+            tagDelete: string;
+            input: string;
+            clear: string;
+        };
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    tag: string;
+    tagText: string;
+    tagDelete: string;
+    input: string;
+    clear: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            tag: string;
+            tagDelete: string;
+            input: string;
+            clear: string;
+        };
+        md: {
+            root: string;
+            tag: string;
+            tagDelete: string;
+            input: string;
+            clear: string;
+        };
+        lg: {
+            root: string;
+            tag: string;
+            tagDelete: string;
+            input: string;
+            clear: string;
+        };
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    tag: string;
+    tagText: string;
+    tagDelete: string;
+    input: string;
+    clear: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TagsInputSlots = keyof ReturnType<typeof tagsInputTheme>;

package/dist/theme/tags-input.js

@@ -0,0 +1,42 @@
+import { fieldBase as e } from "./input.js";
+import { tv as t } from "tailwind-variants";
+//#region src/theme/tags-input.ts
+var n = t({
+	slots: {
+		root: `flex flex-wrap items-center ${e} h-auto cursor-text focus-within:ring-2 focus-within:ring-primary/50`,
+		tag: "inline-flex shrink-0 items-center rounded-md border border-border bg-background font-medium whitespace-nowrap text-foreground data-[state=active]:border-primary data-[state=active]:bg-accent",
+		tagText: "truncate",
+		tagDelete: "flex shrink-0 items-center rounded-sm text-muted-foreground transition-colors outline-none hover:text-danger focus-visible:ring-2 focus-visible:ring-primary/50",
+		input: "min-w-24 flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+		clear: "flex shrink-0 items-center rounded-md text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50"
+	},
+	variants: {
+		size: {
+			sm: {
+				root: "min-h-8 gap-1 px-2 py-1 text-sm",
+				tag: "h-5 gap-1 px-1.5 text-xs",
+				tagDelete: "[&_svg]:size-3",
+				input: "text-sm",
+				clear: "[&_svg]:size-3.5"
+			},
+			md: {
+				root: "min-h-9 gap-1.5 px-2.5 py-1 text-sm",
+				tag: "h-6 gap-1 px-2 text-xs",
+				tagDelete: "[&_svg]:size-3",
+				input: "text-sm",
+				clear: "[&_svg]:size-3.5"
+			},
+			lg: {
+				root: "min-h-10 gap-1.5 px-3 py-1.5 text-base",
+				tag: "h-7 gap-1.5 px-2.5 text-sm",
+				tagDelete: "[&_svg]:size-3.5",
+				input: "text-base",
+				clear: "[&_svg]:size-4"
+			}
+		},
+		invalid: { true: { root: "border-red-500 focus-within:ring-red-500/40" } }
+	},
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { n as tagsInputTheme };

package/dist/theme/time-field.d.ts

@@ -0,0 +1,68 @@
+export declare const timeFieldTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    segment: string;
+    /** The `:` between segments — punctuation, not something to focus. */
+    literal: string;
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    segment: string;
+    /** The `:` between segments — punctuation, not something to focus. */
+    literal: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    segment: string;
+    /** The `:` between segments — punctuation, not something to focus. */
+    literal: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TimeFieldSlots = keyof ReturnType<typeof timeFieldTheme>;

package/dist/theme/time-field.js

@@ -0,0 +1,21 @@
+import { fieldBase as e } from "./input.js";
+import { tv as t } from "tailwind-variants";
+//#region src/theme/time-field.ts
+var n = t({
+	slots: {
+		root: `inline-flex items-center gap-0.5 ${e} w-auto focus-within:ring-2 focus-within:ring-primary/50`,
+		segment: "rounded px-0.5 text-foreground tabular-nums outline-none focus:bg-primary focus:text-primary-foreground data-[disabled]:cursor-not-allowed",
+		literal: "text-muted-foreground"
+	},
+	variants: {
+		size: {
+			sm: { root: "h-8 px-2.5 text-sm" },
+			md: { root: "h-9 px-3 text-sm" },
+			lg: { root: "h-10 px-4 text-base" }
+		},
+		invalid: { true: { root: "border-red-500 focus-within:ring-red-500/40" } }
+	},
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { n as timeFieldTheme };