iryx-ui 0.11.0 → 0.13.0

package/dist/theme/progress.d.ts

@@ -2,18 +2,34 @@ export declare const progressTheme: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: {
             indicator: string;
+            segment: string;
+            legendSwatch: string;
         };
         success: {
             indicator: string;
+            segment: string;
+            legendSwatch: string;
         };
         warning: {
             indicator: string;
+            segment: string;
+            legendSwatch: string;
         };
         danger: {
             indicator: string;
+            segment: string;
+            legendSwatch: string;
         };
         info: {
             indicator: string;
+            segment: string;
+            legendSwatch: string;
+        };
+        /** Unclaimed remainder, and the fallback for a segment with no variant. */
+        neutral: {
+            indicator: string;
+            segment: string;
+            legendSwatch: string;
         };
     };
     size: {
@@ -31,6 +47,11 @@ export declare const progressTheme: import("tailwind-variants").TVReturnType<{
      * Unknown duration: the indicator slides back and forth instead of
      * tracking a value. `animate-progress-indeterminate` is defined in
      * theme.css so consumers get it without extra config.
+     *
+     * `iryx-progress-indeterminate` is a plain hook, not a utility: the
+     * reduced-motion rule in theme.css has to park this bar rather than let
+     * the blanket guard run it once and leave it past the end of its track,
+     * and a Tailwind class is not something that rule can address.
      */
     indeterminate: {
         true: {
@@ -45,22 +66,48 @@ export declare const progressTheme: import("tailwind-variants").TVReturnType<{
     value: string;
     track: string;
     indicator: string;
+    /**
+     * One run of a stacked bar. Width is inline (it is data), and only the
+     * outer edges are rounded — an inner radius would leave notches where two
+     * segments meet and read as a gap in the data rather than a boundary.
+     */
+    segment: string;
+    legend: string;
+    legendItem: string;
+    legendSwatch: string;
+    legendValue: string;
 }, undefined, {
     variant: {
         primary: {
             indicator: string;
+            segment: string;
+            legendSwatch: string;
         };
         success: {
             indicator: string;
+            segment: string;
+            legendSwatch: string;
         };
         warning: {
             indicator: string;
+            segment: string;
+            legendSwatch: string;
         };
         danger: {
             indicator: string;
+            segment: string;
+            legendSwatch: string;
         };
         info: {
             indicator: string;
+            segment: string;
+            legendSwatch: string;
+        };
+        /** Unclaimed remainder, and the fallback for a segment with no variant. */
+        neutral: {
+            indicator: string;
+            segment: string;
+            legendSwatch: string;
         };
     };
     size: {
@@ -78,6 +125,11 @@ export declare const progressTheme: import("tailwind-variants").TVReturnType<{
      * Unknown duration: the indicator slides back and forth instead of
      * tracking a value. `animate-progress-indeterminate` is defined in
      * theme.css so consumers get it without extra config.
+     *
+     * `iryx-progress-indeterminate` is a plain hook, not a utility: the
+     * reduced-motion rule in theme.css has to park this bar rather than let
+     * the blanket guard run it once and leave it past the end of its track,
+     * and a Tailwind class is not something that rule can address.
      */
     indeterminate: {
         true: {
@@ -92,22 +144,48 @@ export declare const progressTheme: import("tailwind-variants").TVReturnType<{
     value: string;
     track: string;
     indicator: string;
+    /**
+     * One run of a stacked bar. Width is inline (it is data), and only the
+     * outer edges are rounded — an inner radius would leave notches where two
+     * segments meet and read as a gap in the data rather than a boundary.
+     */
+    segment: string;
+    legend: string;
+    legendItem: string;
+    legendSwatch: string;
+    legendValue: string;
 }, import("tailwind-variants").TVReturnType<{
     variant: {
         primary: {
             indicator: string;
+            segment: string;
+            legendSwatch: string;
         };
         success: {
             indicator: string;
+            segment: string;
+            legendSwatch: string;
         };
         warning: {
             indicator: string;
+            segment: string;
+            legendSwatch: string;
         };
         danger: {
             indicator: string;
+            segment: string;
+            legendSwatch: string;
         };
         info: {
             indicator: string;
+            segment: string;
+            legendSwatch: string;
+        };
+        /** Unclaimed remainder, and the fallback for a segment with no variant. */
+        neutral: {
+            indicator: string;
+            segment: string;
+            legendSwatch: string;
         };
     };
     size: {
@@ -125,6 +203,11 @@ export declare const progressTheme: import("tailwind-variants").TVReturnType<{
      * Unknown duration: the indicator slides back and forth instead of
      * tracking a value. `animate-progress-indeterminate` is defined in
      * theme.css so consumers get it without extra config.
+     *
+     * `iryx-progress-indeterminate` is a plain hook, not a utility: the
+     * reduced-motion rule in theme.css has to park this bar rather than let
+     * the blanket guard run it once and leave it past the end of its track,
+     * and a Tailwind class is not something that rule can address.
      */
     indeterminate: {
         true: {
@@ -139,5 +222,15 @@ export declare const progressTheme: import("tailwind-variants").TVReturnType<{
     value: string;
     track: string;
     indicator: string;
+    /**
+     * One run of a stacked bar. Width is inline (it is data), and only the
+     * outer edges are rounded — an inner radius would leave notches where two
+     * segments meet and read as a gap in the data rather than a boundary.
+     */
+    segment: string;
+    legend: string;
+    legendItem: string;
+    legendSwatch: string;
+    legendValue: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ProgressSlots = keyof ReturnType<typeof progressTheme>;

package/dist/theme/progress.js

@@ -7,22 +7,52 @@ var t = e({
 		label: "font-medium text-foreground",
 		value: "text-muted-foreground tabular-nums",
 		track: "relative w-full overflow-hidden rounded-full bg-muted",
-		indicator: "h-full w-full flex-1 rounded-full transition-transform duration-300 ease-out"
+		indicator: "h-full w-full flex-1 rounded-full transition-transform duration-300 ease-out",
+		segment: "h-full transition-[width] duration-300 ease-out first:rounded-l-full last:rounded-r-full",
+		legend: "flex flex-wrap items-center gap-x-4 gap-y-1",
+		legendItem: "flex items-center gap-1.5 text-xs text-muted-foreground",
+		legendSwatch: "size-2 shrink-0 rounded-full",
+		legendValue: "text-foreground tabular-nums"
 	},
 	variants: {
 		variant: {
-			primary: { indicator: "bg-linear-to-b from-primary-from to-primary-to" },
-			success: { indicator: "bg-success" },
-			warning: { indicator: "bg-warning" },
-			danger: { indicator: "bg-danger" },
-			info: { indicator: "bg-info" }
+			primary: {
+				indicator: "bg-linear-to-b from-primary-from to-primary-to",
+				segment: "bg-linear-to-b from-primary-from to-primary-to",
+				legendSwatch: "bg-primary"
+			},
+			success: {
+				indicator: "bg-success",
+				segment: "bg-success",
+				legendSwatch: "bg-success"
+			},
+			warning: {
+				indicator: "bg-warning",
+				segment: "bg-warning",
+				legendSwatch: "bg-warning"
+			},
+			danger: {
+				indicator: "bg-danger",
+				segment: "bg-danger",
+				legendSwatch: "bg-danger"
+			},
+			info: {
+				indicator: "bg-info",
+				segment: "bg-info",
+				legendSwatch: "bg-info"
+			},
+			neutral: {
+				indicator: "bg-muted-foreground",
+				segment: "bg-muted-foreground",
+				legendSwatch: "bg-muted-foreground"
+			}
 		},
 		size: {
 			sm: { track: "h-1" },
 			md: { track: "h-2" },
 			lg: { track: "h-3" }
 		},
-		indeterminate: { true: { indicator: "w-1/3 animate-progress-indeterminate" } }
+		indeterminate: { true: { indicator: "iryx-progress-indeterminate w-1/3 animate-progress-indeterminate" } }
 	},
 	defaultVariants: {
 		variant: "primary",

package/dist/theme/radio-group.d.ts

@@ -13,6 +13,14 @@ export declare const radioGroupTheme: import("tailwind-variants").TVReturnType<{
             indicator: string;
         };
     };
+    orientation: {
+        vertical: {
+            root: string;
+        };
+        horizontal: {
+            root: string;
+        };
+    };
 }, {
     root: string;
     wrapper: string;
@@ -36,6 +44,14 @@ export declare const radioGroupTheme: import("tailwind-variants").TVReturnType<{
             indicator: string;
         };
     };
+    orientation: {
+        vertical: {
+            root: string;
+        };
+        horizontal: {
+            root: string;
+        };
+    };
 }, {
     root: string;
     wrapper: string;
@@ -59,6 +75,14 @@ export declare const radioGroupTheme: import("tailwind-variants").TVReturnType<{
             indicator: string;
         };
     };
+    orientation: {
+        vertical: {
+            root: string;
+        };
+        horizontal: {
+            root: string;
+        };
+    };
 }, {
     root: string;
     wrapper: string;

package/dist/theme/radio-group.js

@@ -2,7 +2,7 @@ import { tv as e } from "tailwind-variants";
 //#region src/theme/radio-group.ts
 var t = e({
 	slots: {
-		root: "grid gap-2",
+		root: "",
 		wrapper: "flex items-start gap-2.5",
 		item: "aspect-square shrink-0 cursor-pointer rounded-full border border-border bg-background transition-colors outline-none focus:ring-2 focus:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary",
 		indicator: "flex size-full items-center justify-center after:block after:rounded-full after:bg-primary",
@@ -10,21 +10,30 @@ var t = e({
 		label: "text-sm leading-5 text-foreground select-none",
 		description: "text-sm leading-snug text-muted-foreground"
 	},
-	variants: { size: {
-		sm: {
-			item: "mt-0.5 size-3.5",
-			indicator: "after:size-1.5"
+	variants: {
+		size: {
+			sm: {
+				item: "mt-0.5 size-3.5",
+				indicator: "after:size-1.5"
+			},
+			md: {
+				item: "mt-0.5 size-4",
+				indicator: "after:size-2"
+			},
+			lg: {
+				item: "size-5",
+				indicator: "after:size-2.5"
+			}
 		},
-		md: {
-			item: "mt-0.5 size-4",
-			indicator: "after:size-2"
-		},
-		lg: {
-			item: "size-5",
-			indicator: "after:size-2.5"
+		orientation: {
+			vertical: { root: "grid gap-2" },
+			horizontal: { root: "flex flex-wrap items-start gap-x-6 gap-y-2" }
 		}
-	} },
-	defaultVariants: { size: "md" }
+	},
+	defaultVariants: {
+		size: "md",
+		orientation: "vertical"
+	}
 });
 //#endregion
 export { t as radioGroupTheme };

package/dist/theme/scroll-area.d.ts

@@ -0,0 +1,65 @@
+export declare const scrollAreaTheme: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: {
+            scrollbar: string;
+        };
+        horizontal: {
+            scrollbar: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+}, {
+    root: string;
+    viewport: string;
+    scrollbar: string;
+    thumb: string;
+    /** Fills the square where a horizontal and a vertical bar meet. */
+    corner: string;
+}, undefined, {
+    orientation: {
+        vertical: {
+            scrollbar: string;
+        };
+        horizontal: {
+            scrollbar: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+}, {
+    root: string;
+    viewport: string;
+    scrollbar: string;
+    thumb: string;
+    /** Fills the square where a horizontal and a vertical bar meet. */
+    corner: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: {
+            scrollbar: string;
+        };
+        horizontal: {
+            scrollbar: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+}, {
+    root: string;
+    viewport: string;
+    scrollbar: string;
+    thumb: string;
+    /** Fills the square where a horizontal and a vertical bar meet. */
+    corner: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ScrollAreaSlots = keyof ReturnType<typeof scrollAreaTheme>;

package/dist/theme/scroll-area.js

@@ -0,0 +1,57 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/scroll-area.ts
+var t = e({
+	slots: {
+		root: "relative overflow-hidden",
+		viewport: "size-full rounded-[inherit]",
+		scrollbar: "flex touch-none p-0.5 transition-colors select-none",
+		thumb: "relative flex-1 rounded-full bg-border transition-colors hover:bg-muted-foreground",
+		corner: "bg-transparent"
+	},
+	variants: {
+		orientation: {
+			vertical: { scrollbar: "h-full border-l border-l-transparent" },
+			horizontal: { scrollbar: "flex-col border-t border-t-transparent" }
+		},
+		size: {
+			sm: {},
+			md: {},
+			lg: {}
+		}
+	},
+	compoundVariants: [
+		{
+			orientation: "vertical",
+			size: "sm",
+			class: { scrollbar: "w-1.5" }
+		},
+		{
+			orientation: "vertical",
+			size: "md",
+			class: { scrollbar: "w-2.5" }
+		},
+		{
+			orientation: "vertical",
+			size: "lg",
+			class: { scrollbar: "w-3.5" }
+		},
+		{
+			orientation: "horizontal",
+			size: "sm",
+			class: { scrollbar: "h-1.5" }
+		},
+		{
+			orientation: "horizontal",
+			size: "md",
+			class: { scrollbar: "h-2.5" }
+		},
+		{
+			orientation: "horizontal",
+			size: "lg",
+			class: { scrollbar: "h-3.5" }
+		}
+	],
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { t as scrollAreaTheme };

package/dist/theme/scroll-fade.d.ts

@@ -0,0 +1,35 @@
+export declare const scrollFadeTheme: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: {
+            root: string;
+        };
+        horizontal: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, undefined, {
+    orientation: {
+        vertical: {
+            root: string;
+        };
+        horizontal: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: {
+            root: string;
+        };
+        horizontal: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ScrollFadeSlots = keyof ReturnType<typeof scrollFadeTheme>;

package/dist/theme/scroll-fade.js

@@ -0,0 +1,12 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/scroll-fade.ts
+var t = e({
+	slots: { root: "relative min-h-0 overscroll-contain" },
+	variants: { orientation: {
+		vertical: { root: "overflow-y-auto" },
+		horizontal: { root: "overflow-x-auto" }
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+//#endregion
+export { t as scrollFadeTheme };

package/dist/theme/sidebar.d.ts

@@ -0,0 +1,167 @@
+export declare const sidebarTheme: import("tailwind-variants").TVReturnType<{
+    side: {
+        left: {
+            root: string;
+        };
+        right: {
+            root: string;
+        };
+    };
+    collapsed: {
+        true: {
+            root: string;
+            header: string;
+            footer: string;
+            link: string;
+            linkLabel: string;
+            linkBadge: string;
+            sectionLabel: string;
+            groupIcon: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    /** The only scrolling region; header and footer stay pinned. */
+    nav: string;
+    footer: string;
+    section: string;
+    sectionLabel: string;
+    /**
+     * `group` drives the collapsed treatment of the label and chevron, so the
+     * link needs no separate collapsed class.
+     */
+    link: string;
+    linkLabel: string;
+    /** Count or status at the trailing edge. Hidden when collapsed. */
+    linkBadge: string;
+    /**
+     * Rotates when its group is open. The state lives on the trigger, not on
+     * the icon, so this reads it through the trigger's `group/link` — a plain
+     * `data-[state=open]:` here matches nothing and silently never rotates.
+     *
+     * Tailwind v4's `rotate-*` sets the independent `rotate` property rather
+     * than `transform`, so `transition-transform` would not tween it either.
+     */
+    groupIcon: string;
+    /**
+     * The animated height box. Deliberately bare — see the keyframe comment in
+     * `theme.css` for why margin and padding cannot live here.
+     */
+    groupContent: string;
+    groupInner: string;
+}, undefined, {
+    side: {
+        left: {
+            root: string;
+        };
+        right: {
+            root: string;
+        };
+    };
+    collapsed: {
+        true: {
+            root: string;
+            header: string;
+            footer: string;
+            link: string;
+            linkLabel: string;
+            linkBadge: string;
+            sectionLabel: string;
+            groupIcon: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    /** The only scrolling region; header and footer stay pinned. */
+    nav: string;
+    footer: string;
+    section: string;
+    sectionLabel: string;
+    /**
+     * `group` drives the collapsed treatment of the label and chevron, so the
+     * link needs no separate collapsed class.
+     */
+    link: string;
+    linkLabel: string;
+    /** Count or status at the trailing edge. Hidden when collapsed. */
+    linkBadge: string;
+    /**
+     * Rotates when its group is open. The state lives on the trigger, not on
+     * the icon, so this reads it through the trigger's `group/link` — a plain
+     * `data-[state=open]:` here matches nothing and silently never rotates.
+     *
+     * Tailwind v4's `rotate-*` sets the independent `rotate` property rather
+     * than `transform`, so `transition-transform` would not tween it either.
+     */
+    groupIcon: string;
+    /**
+     * The animated height box. Deliberately bare — see the keyframe comment in
+     * `theme.css` for why margin and padding cannot live here.
+     */
+    groupContent: string;
+    groupInner: string;
+}, import("tailwind-variants").TVReturnType<{
+    side: {
+        left: {
+            root: string;
+        };
+        right: {
+            root: string;
+        };
+    };
+    collapsed: {
+        true: {
+            root: string;
+            header: string;
+            footer: string;
+            link: string;
+            linkLabel: string;
+            linkBadge: string;
+            sectionLabel: string;
+            groupIcon: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    /** The only scrolling region; header and footer stay pinned. */
+    nav: string;
+    footer: string;
+    section: string;
+    sectionLabel: string;
+    /**
+     * `group` drives the collapsed treatment of the label and chevron, so the
+     * link needs no separate collapsed class.
+     */
+    link: string;
+    linkLabel: string;
+    /** Count or status at the trailing edge. Hidden when collapsed. */
+    linkBadge: string;
+    /**
+     * Rotates when its group is open. The state lives on the trigger, not on
+     * the icon, so this reads it through the trigger's `group/link` — a plain
+     * `data-[state=open]:` here matches nothing and silently never rotates.
+     *
+     * Tailwind v4's `rotate-*` sets the independent `rotate` property rather
+     * than `transform`, so `transition-transform` would not tween it either.
+     */
+    groupIcon: string;
+    /**
+     * The animated height box. Deliberately bare — see the keyframe comment in
+     * `theme.css` for why margin and padding cannot live here.
+     */
+    groupContent: string;
+    groupInner: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SidebarSlots = keyof ReturnType<typeof sidebarTheme>;