iryx-ui 0.16.0 → 0.17.0

package/dist/theme/alert.d.ts

@@ -13,7 +13,6 @@ export declare const alertTheme: import("tailwind-variants").TVReturnType<{
             icon: string;
         };
     };
-    /** Tightens the title/description gap when both are present. */
     withTitle: {
         true: {
             description: string;
@@ -42,7 +41,6 @@ export declare const alertTheme: import("tailwind-variants").TVReturnType<{
             icon: string;
         };
     };
-    /** Tightens the title/description gap when both are present. */
     withTitle: {
         true: {
             description: string;
@@ -71,7 +69,6 @@ export declare const alertTheme: import("tailwind-variants").TVReturnType<{
             icon: string;
         };
     };
-    /** Tightens the title/description gap when both are present. */
     withTitle: {
         true: {
             description: string;

package/dist/theme/avatar.d.ts

@@ -191,7 +191,6 @@ export declare const avatarGroupTheme: import("tailwind-variants").TVReturnType<
 }, {
     root: string;
     item: string;
-    /** The "+3" chip closing the stack. */
     overflow: string;
 }, undefined, {
     size: {
@@ -219,7 +218,6 @@ export declare const avatarGroupTheme: import("tailwind-variants").TVReturnType<
 }, {
     root: string;
     item: string;
-    /** The "+3" chip closing the stack. */
     overflow: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
@@ -247,7 +245,6 @@ export declare const avatarGroupTheme: import("tailwind-variants").TVReturnType<
 }, {
     root: string;
     item: string;
-    /** The "+3" chip closing the stack. */
     overflow: string;
 }, undefined, unknown, unknown, undefined>>;
 export type AvatarGroupSlots = keyof ReturnType<typeof avatarGroupTheme>;

package/dist/theme/banner.d.ts

@@ -30,12 +30,10 @@ export declare const bannerTheme: import("tailwind-variants").TVReturnType<{
         top: {
             root: string;
         };
-        /** Pinned to the bottom of the viewport; the rule moves to the top edge. */
         bottom: {
             root: string;
         };
     };
-    /** Constrains the text while the fill still spans the viewport. */
     contained: {
         true: {
             container: string;
@@ -88,12 +86,10 @@ export declare const bannerTheme: import("tailwind-variants").TVReturnType<{
         top: {
             root: string;
         };
-        /** Pinned to the bottom of the viewport; the rule moves to the top edge. */
         bottom: {
             root: string;
         };
     };
-    /** Constrains the text while the fill still spans the viewport. */
     contained: {
         true: {
             container: string;
@@ -146,12 +142,10 @@ export declare const bannerTheme: import("tailwind-variants").TVReturnType<{
         top: {
             root: string;
         };
-        /** Pinned to the bottom of the viewport; the rule moves to the top edge. */
         bottom: {
             root: string;
         };
     };
-    /** Constrains the text while the fill still spans the viewport. */
     contained: {
         true: {
             container: string;

package/dist/theme/bar-chart.d.ts

@@ -36,18 +36,12 @@ export declare const barChartTheme: import("tailwind-variants").TVReturnType<{
     };
 } | {}, {
     root: string;
-    /**
-     * The tooltip's coordinates come from the SVG, so the SVG has to be its
-     * positioning context. Anchoring to the root instead shifts it up by the
-     * height of anything above the plot — the legend, most obviously.
-     */
     plot: string;
     svg: string;
     grid: string;
     tick: string;
     category: string;
     bar: string;
-    /** Hit target, deliberately wider than the mark it selects. */
     hit: string;
     faded: string;
     tooltip: string;
@@ -74,18 +68,12 @@ export declare const barChartTheme: import("tailwind-variants").TVReturnType<{
     };
 } | {}, {
     root: string;
-    /**
-     * The tooltip's coordinates come from the SVG, so the SVG has to be its
-     * positioning context. Anchoring to the root instead shifts it up by the
-     * height of anything above the plot — the legend, most obviously.
-     */
     plot: string;
     svg: string;
     grid: string;
     tick: string;
     category: string;
     bar: string;
-    /** Hit target, deliberately wider than the mark it selects. */
     hit: string;
     faded: string;
     tooltip: string;
@@ -94,18 +82,12 @@ export declare const barChartTheme: import("tailwind-variants").TVReturnType<{
     table: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
     root: string;
-    /**
-     * The tooltip's coordinates come from the SVG, so the SVG has to be its
-     * positioning context. Anchoring to the root instead shifts it up by the
-     * height of anything above the plot — the legend, most obviously.
-     */
     plot: string;
     svg: string;
     grid: string;
     tick: string;
     category: string;
     bar: string;
-    /** Hit target, deliberately wider than the mark it selects. */
     hit: string;
     faded: string;
     tooltip: string;

package/dist/theme/breadcrumb.d.ts

@@ -25,7 +25,6 @@ export declare const breadcrumbTheme: import("tailwind-variants").TVReturnType<{
     list: string;
     item: string;
     link: string;
-    /** The last crumb: current page, so not a link. */
     current: string;
     separator: string;
 }, undefined, {
@@ -44,7 +43,6 @@ export declare const breadcrumbTheme: import("tailwind-variants").TVReturnType<{
     list: string;
     item: string;
     link: string;
-    /** The last crumb: current page, so not a link. */
     current: string;
     separator: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
@@ -52,7 +50,6 @@ export declare const breadcrumbTheme: import("tailwind-variants").TVReturnType<{
     list: string;
     item: string;
     link: string;
-    /** The last crumb: current page, so not a link. */
     current: string;
     separator: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/theme/calendar.d.ts

@@ -0,0 +1,62 @@
+export declare const calendarTheme: import("tailwind-variants").TVReturnType<{
+    range: {
+        false: {
+            cellTrigger: string;
+        };
+        true: {
+            cell: string;
+            cellTrigger: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    heading: string;
+    nav: string;
+    months: string;
+    grid: string;
+    headCell: string;
+    cell: string;
+    cellTrigger: string;
+}, undefined, {
+    range: {
+        false: {
+            cellTrigger: string;
+        };
+        true: {
+            cell: string;
+            cellTrigger: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    heading: string;
+    nav: string;
+    months: string;
+    grid: string;
+    headCell: string;
+    cell: string;
+    cellTrigger: string;
+}, import("tailwind-variants").TVReturnType<{
+    range: {
+        false: {
+            cellTrigger: string;
+        };
+        true: {
+            cell: string;
+            cellTrigger: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    heading: string;
+    nav: string;
+    months: string;
+    grid: string;
+    headCell: string;
+    cell: string;
+    cellTrigger: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CalendarSlots = keyof ReturnType<typeof calendarTheme>;

package/dist/theme/calendar.js

@@ -0,0 +1,29 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/calendar.ts
+var t = e({
+	slots: {
+		root: "w-fit text-foreground",
+		header: "flex items-center justify-between gap-2 pb-3",
+		heading: "text-sm font-medium",
+		nav: "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-50 [&_svg]:size-4",
+		months: "flex items-start gap-4",
+		grid: "w-full border-collapse select-none",
+		headCell: "pb-1 text-xs font-normal text-muted-foreground",
+		cell: "p-0 transition-colors",
+		cellTrigger: "flex h-8 w-full min-w-8 items-center justify-center rounded-lg text-sm tabular-nums transition-colors outline-none not-data-[selected]:hover:bg-accent not-data-[selected]:hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 data-[disabled]:pointer-events-none data-[disabled]:opacity-30 data-[outside-view]:text-muted-foreground/50 data-[today]:font-semibold data-[today]:text-primary data-[unavailable]:pointer-events-none data-[unavailable]:line-through data-[unavailable]:opacity-40"
+	},
+	variants: { range: {
+		false: { cellTrigger: "data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:data-[today]:text-primary-foreground" },
+		true: {
+			cell: [
+				"has-data-[selected]:bg-primary/15",
+				"has-data-[selection-start]:rounded-s-lg",
+				"has-data-[selection-end]:rounded-e-lg"
+			].join(" "),
+			cellTrigger: ["data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary", "data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary"].join(" ")
+		}
+	} },
+	defaultVariants: { range: !1 }
+});
+//#endregion
+export { t as calendarTheme };

package/dist/theme/card.d.ts

@@ -27,12 +27,10 @@ export declare const cardTheme: import("tailwind-variants").TVReturnType<{
     };
 }, {
     root: string;
-    /** Only rendered when a title, description or header slot is provided. */
     header: string;
     title: string;
     description: string;
     body: string;
-    /** Only rendered when a footer slot is provided. */
     footer: string;
 }, undefined, {
     variant: {
@@ -63,12 +61,10 @@ export declare const cardTheme: import("tailwind-variants").TVReturnType<{
     };
 }, {
     root: string;
-    /** Only rendered when a title, description or header slot is provided. */
     header: string;
     title: string;
     description: string;
     body: string;
-    /** Only rendered when a footer slot is provided. */
     footer: string;
 }, import("tailwind-variants").TVReturnType<{
     variant: {
@@ -99,12 +95,10 @@ export declare const cardTheme: import("tailwind-variants").TVReturnType<{
     };
 }, {
     root: string;
-    /** Only rendered when a title, description or header slot is provided. */
     header: string;
     title: string;
     description: string;
     body: string;
-    /** Only rendered when a footer slot is provided. */
     footer: string;
 }, undefined, unknown, unknown, undefined>>;
 export type CardSlots = keyof ReturnType<typeof cardTheme>;

package/dist/theme/chart-legend.d.ts

@@ -20,7 +20,6 @@ export declare const chartLegendTheme: import("tailwind-variants").TVReturnType<
     root: string;
     item: string;
     swatch: string;
-    /** The text never does — a light hue is illegible as type on the surface. */
     name: string;
 }, undefined, {
     [key: string]: {
@@ -35,13 +34,11 @@ export declare const chartLegendTheme: import("tailwind-variants").TVReturnType<
     root: string;
     item: string;
     swatch: string;
-    /** The text never does — a light hue is illegible as type on the surface. */
     name: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
     root: string;
     item: string;
     swatch: string;
-    /** The text never does — a light hue is illegible as type on the surface. */
     name: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ChartLegendSlots = keyof ReturnType<typeof chartLegendTheme>;

package/dist/theme/checkbox.d.ts

@@ -13,14 +13,12 @@ export declare const checkboxTheme: import("tailwind-variants").TVReturnType<{
             indicator: string;
         };
     };
-    /** Nudges the box down so it centres against the label's first line. */
     withText: {
         true: {
             root: string;
         };
     };
 }, {
-    /** Only rendered when a `label` or `description` is provided. */
     wrapper: string;
     root: string;
     indicator: string;
@@ -42,14 +40,12 @@ export declare const checkboxTheme: import("tailwind-variants").TVReturnType<{
             indicator: string;
         };
     };
-    /** Nudges the box down so it centres against the label's first line. */
     withText: {
         true: {
             root: string;
         };
     };
 }, {
-    /** Only rendered when a `label` or `description` is provided. */
     wrapper: string;
     root: string;
     indicator: string;
@@ -71,14 +67,12 @@ export declare const checkboxTheme: import("tailwind-variants").TVReturnType<{
             indicator: string;
         };
     };
-    /** Nudges the box down so it centres against the label's first line. */
     withText: {
         true: {
             root: string;
         };
     };
 }, {
-    /** Only rendered when a `label` or `description` is provided. */
     wrapper: string;
     root: string;
     indicator: string;

package/dist/theme/color-picker.d.ts

@@ -34,7 +34,6 @@ export declare const colorPickerTheme: import("tailwind-variants").TVReturnType<
     };
 } | {}, {
     root: string;
-    /** Saturation/brightness plane. Height is fixed; width follows the root. */
     area: string;
     thumb: string;
     sliderThumb: string;
@@ -43,7 +42,6 @@ export declare const colorPickerTheme: import("tailwind-variants").TVReturnType<
     track: string;
     field: string;
     input: string;
-    /** Current colour, shown beside the hex field. Also needs the chequerboard. */
     preview: string;
     swatches: string;
     swatch: string;
@@ -66,7 +64,6 @@ export declare const colorPickerTheme: import("tailwind-variants").TVReturnType<
     };
 } | {}, {
     root: string;
-    /** Saturation/brightness plane. Height is fixed; width follows the root. */
     area: string;
     thumb: string;
     sliderThumb: string;
@@ -75,13 +72,11 @@ export declare const colorPickerTheme: import("tailwind-variants").TVReturnType<
     track: string;
     field: string;
     input: string;
-    /** Current colour, shown beside the hex field. Also needs the chequerboard. */
     preview: string;
     swatches: string;
     swatch: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
     root: string;
-    /** Saturation/brightness plane. Height is fixed; width follows the root. */
     area: string;
     thumb: string;
     sliderThumb: string;
@@ -90,7 +85,6 @@ export declare const colorPickerTheme: import("tailwind-variants").TVReturnType<
     track: string;
     field: string;
     input: string;
-    /** Current colour, shown beside the hex field. Also needs the chequerboard. */
     preview: string;
     swatches: string;
     swatch: string;

package/dist/theme/combobox.js

@@ -7,7 +7,7 @@ var n = t({
 		input: "min-w-0 grow bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
 		trigger: "flex shrink-0 cursor-pointer items-center text-muted-foreground disabled:cursor-not-allowed [&_svg]:size-4",
 		clear: "flex shrink-0 cursor-pointer items-center rounded-md text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-3.5",
-		tag: "inline-flex shrink-0 items-center rounded-md border border-border bg-background font-medium whitespace-nowrap text-foreground",
+		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 cursor-pointer items-center rounded-sm text-muted-foreground transition-colors outline-none hover:text-danger focus-visible:ring-2 focus-visible:ring-primary/50",
 		content: "z-50 max-h-64 w-(--reka-combobox-trigger-width) min-w-32 overflow-hidden rounded-xl border border-border bg-background text-foreground shadow-md",
@@ -21,17 +21,17 @@ var n = t({
 	variants: {
 		size: {
 			sm: {
-				anchor: "h-8 px-2.5 text-sm",
+				anchor: "h-8 min-h-8 px-2.5 text-sm",
 				tag: "h-5 gap-1 px-1.5 text-xs",
 				tagDelete: "[&_svg]:size-3"
 			},
 			md: {
-				anchor: "h-9 px-3 text-sm",
+				anchor: "h-9 min-h-9 px-3 text-sm",
 				tag: "h-6 gap-1 px-2 text-xs",
 				tagDelete: "[&_svg]:size-3"
 			},
 			lg: {
-				anchor: "h-10 px-4 text-base",
+				anchor: "h-10 min-h-10 px-4 text-base",
 				tag: "h-7 gap-1.5 px-2.5 text-sm",
 				tagDelete: "[&_svg]:size-3.5"
 			}

package/dist/theme/command-palette.d.ts

@@ -46,7 +46,6 @@ export declare const commandPaletteTheme: import("tailwind-variants").TVReturnTy
     list: string;
     header: string;
     icon: string;
-    /** No border of its own: the header carries the rule. */
     input: string;
     viewport: string;
     group: string;
@@ -54,7 +53,6 @@ export declare const commandPaletteTheme: import("tailwind-variants").TVReturnTy
     item: string;
     itemIcon: string;
     itemLabel: string;
-    /** A hint, not a control — it never takes the pointer. */
     shortcut: string;
     key: string;
     empty: string;
@@ -86,7 +84,6 @@ export declare const commandPaletteTheme: import("tailwind-variants").TVReturnTy
     list: string;
     header: string;
     icon: string;
-    /** No border of its own: the header carries the rule. */
     input: string;
     viewport: string;
     group: string;
@@ -94,7 +91,6 @@ export declare const commandPaletteTheme: import("tailwind-variants").TVReturnTy
     item: string;
     itemIcon: string;
     itemLabel: string;
-    /** A hint, not a control — it never takes the pointer. */
     shortcut: string;
     key: string;
     empty: string;
@@ -105,7 +101,6 @@ export declare const commandPaletteTheme: import("tailwind-variants").TVReturnTy
     list: string;
     header: string;
     icon: string;
-    /** No border of its own: the header carries the rule. */
     input: string;
     viewport: string;
     group: string;
@@ -113,7 +108,6 @@ export declare const commandPaletteTheme: import("tailwind-variants").TVReturnTy
     item: string;
     itemIcon: string;
     itemLabel: string;
-    /** A hint, not a control — it never takes the pointer. */
     shortcut: string;
     key: string;
     empty: string;

package/dist/theme/container.d.ts

@@ -12,7 +12,6 @@ export declare const containerTheme: import("tailwind-variants").TVReturnType<{
         xl: {
             root: string;
         };
-        /** Full bleed. Still centres and still takes the gutter. */
         full: {
             root: string;
         };
@@ -45,7 +44,6 @@ export declare const containerTheme: import("tailwind-variants").TVReturnType<{
         xl: {
             root: string;
         };
-        /** Full bleed. Still centres and still takes the gutter. */
         full: {
             root: string;
         };
@@ -78,7 +76,6 @@ export declare const containerTheme: import("tailwind-variants").TVReturnType<{
         xl: {
             root: string;
         };
-        /** Full bleed. Still centres and still takes the gutter. */
         full: {
             root: string;
         };

package/dist/theme/container.js

@@ -12,9 +12,9 @@ var t = e({
 		},
 		gutter: {
 			none: {},
-			sm: { root: "px-4" },
-			md: { root: "px-6" },
-			lg: { root: "px-8" }
+			sm: { root: "px-3 sm:px-4" },
+			md: { root: "px-4 sm:px-6 lg:px-8" },
+			lg: { root: "px-6 sm:px-8 lg:px-12" }
 		}
 	},
 	defaultVariants: {

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

@@ -0,0 +1,65 @@
+export declare const dateFieldTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    segment: string;
+    literal: string;
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    segment: string;
+    literal: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    segment: string;
+    literal: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DateFieldSlots = keyof ReturnType<typeof dateFieldTheme>;

package/dist/theme/date-field.js

@@ -0,0 +1,21 @@
+import { fieldBase as e } from "./input.js";
+import { tv as t } from "tailwind-variants";
+//#region src/theme/date-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 dateFieldTheme };