iryx-ui 0.11.0 → 0.13.0

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

package/dist/theme/timeline.d.ts

@@ -0,0 +1,182 @@
+export declare const timelineTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            marker: string;
+            content: string;
+            title: string;
+        };
+        md: {
+            marker: string;
+            content: string;
+            title: string;
+        };
+    };
+    variant: {
+        neutral: {
+            marker: string;
+        };
+        primary: {
+            marker: string;
+        };
+        success: {
+            marker: string;
+        };
+        warning: {
+            marker: string;
+        };
+        danger: {
+            marker: string;
+        };
+        info: {
+            marker: string;
+        };
+    };
+    /**
+     * An icon needs a real box to sit in, so the marker grows from a dot to a
+     * ringed circle and the fill moves to a tint.
+     */
+    withIcon: {
+        true: {
+            marker: string;
+        };
+    };
+    /** The last item has nothing to connect to, so its spine is dropped. */
+    last: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    rail: string;
+    marker: string;
+    line: string;
+    content: string;
+    header: string;
+    title: string;
+    /** Timestamps are numeric, so they line up when they are tabular. */
+    time: string;
+    description: string;
+}, undefined, {
+    size: {
+        sm: {
+            marker: string;
+            content: string;
+            title: string;
+        };
+        md: {
+            marker: string;
+            content: string;
+            title: string;
+        };
+    };
+    variant: {
+        neutral: {
+            marker: string;
+        };
+        primary: {
+            marker: string;
+        };
+        success: {
+            marker: string;
+        };
+        warning: {
+            marker: string;
+        };
+        danger: {
+            marker: string;
+        };
+        info: {
+            marker: string;
+        };
+    };
+    /**
+     * An icon needs a real box to sit in, so the marker grows from a dot to a
+     * ringed circle and the fill moves to a tint.
+     */
+    withIcon: {
+        true: {
+            marker: string;
+        };
+    };
+    /** The last item has nothing to connect to, so its spine is dropped. */
+    last: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    rail: string;
+    marker: string;
+    line: string;
+    content: string;
+    header: string;
+    title: string;
+    /** Timestamps are numeric, so they line up when they are tabular. */
+    time: string;
+    description: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            marker: string;
+            content: string;
+            title: string;
+        };
+        md: {
+            marker: string;
+            content: string;
+            title: string;
+        };
+    };
+    variant: {
+        neutral: {
+            marker: string;
+        };
+        primary: {
+            marker: string;
+        };
+        success: {
+            marker: string;
+        };
+        warning: {
+            marker: string;
+        };
+        danger: {
+            marker: string;
+        };
+        info: {
+            marker: string;
+        };
+    };
+    /**
+     * An icon needs a real box to sit in, so the marker grows from a dot to a
+     * ringed circle and the fill moves to a tint.
+     */
+    withIcon: {
+        true: {
+            marker: string;
+        };
+    };
+    /** The last item has nothing to connect to, so its spine is dropped. */
+    last: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    rail: string;
+    marker: string;
+    line: string;
+    content: string;
+    header: string;
+    title: string;
+    /** Timestamps are numeric, so they line up when they are tabular. */
+    time: string;
+    description: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TimelineSlots = keyof ReturnType<typeof timelineTheme>;

package/dist/theme/timeline.js

@@ -0,0 +1,83 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/timeline.ts
+var t = e({
+	slots: {
+		root: "flex flex-col",
+		item: "relative grid grid-cols-[auto_1fr] gap-x-3",
+		rail: "flex flex-col items-center",
+		marker: "z-10 flex shrink-0 items-center justify-center rounded-full",
+		line: "w-px flex-1 bg-border",
+		content: "min-w-0 pb-6",
+		header: "flex flex-wrap items-baseline gap-x-2",
+		title: "font-medium text-foreground",
+		time: "text-xs text-muted-foreground tabular-nums",
+		description: "mt-1 text-sm text-muted-foreground"
+	},
+	variants: {
+		size: {
+			sm: {
+				marker: "size-2.5",
+				content: "pb-4 text-sm",
+				title: "text-sm"
+			},
+			md: {
+				marker: "size-3",
+				content: "pb-6 text-sm",
+				title: "text-sm"
+			}
+		},
+		variant: {
+			neutral: { marker: "bg-muted-foreground" },
+			primary: { marker: "bg-primary" },
+			success: { marker: "bg-success" },
+			warning: { marker: "bg-warning" },
+			danger: { marker: "bg-danger" },
+			info: { marker: "bg-info" }
+		},
+		withIcon: { true: { marker: "border border-border bg-background text-muted-foreground" } },
+		last: { true: { content: "pb-0" } }
+	},
+	compoundVariants: [
+		{
+			withIcon: !0,
+			size: "sm",
+			class: { marker: "size-6 [&_svg]:size-3" }
+		},
+		{
+			withIcon: !0,
+			size: "md",
+			class: { marker: "size-7 [&_svg]:size-3.5" }
+		},
+		{
+			withIcon: !0,
+			variant: "primary",
+			class: { marker: "border-primary/30 bg-primary/10 text-primary" }
+		},
+		{
+			withIcon: !0,
+			variant: "success",
+			class: { marker: "border-success/30 bg-success/10 text-success" }
+		},
+		{
+			withIcon: !0,
+			variant: "warning",
+			class: { marker: "border-warning/30 bg-warning/10 text-warning" }
+		},
+		{
+			withIcon: !0,
+			variant: "danger",
+			class: { marker: "border-danger/30 bg-danger/10 text-danger" }
+		},
+		{
+			withIcon: !0,
+			variant: "info",
+			class: { marker: "border-info/30 bg-info/10 text-info" }
+		}
+	],
+	defaultVariants: {
+		size: "md",
+		variant: "neutral"
+	}
+});
+//#endregion
+export { t as timelineTheme };