iryx-ui 0.16.0 → 0.17.0

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

@@ -15,75 +15,10 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
             trigger: string;
         };
     };
-    /**
-     * A single date is the whole selection, so it takes the solid fill. In a
-     * range only the two endpoints do, and the days between get a flat tint —
-     * emphasising all of them equally turns a long span into one solid block
-     * that no longer shows where it starts and stops.
-     *
-     * The middle style excludes the endpoints with `not-*` rather than relying
-     * on class order, so the two rules never compete for the background.
-     */
-    range: {
-        false: {
-            cellTrigger: string;
-        };
-        /**
-         * Reka's `data-highlighted` hover preview is deliberately left unstyled:
-         * a band that follows the cursor has to reshape its rounded ends on
-         * every move, and no combination of transitioning or not transitioning
-         * the radius looks right while it does. Only the committed range is
-         * drawn, so nothing under the pointer changes shape.
-         *
-         * The band goes on the cell and the endpoint pills on the trigger, so
-         * a single element never has to be both. Only the run's outer edges are
-         * rounded, so the days between meet flush.
-         */
-        true: {
-            cell: string;
-            cellTrigger: string;
-        };
-    };
 }, {
     trigger: string;
-    /** Shown in place of the value, so it reads as absent rather than chosen. */
     placeholder: string;
     content: string;
-    header: string;
-    heading: string;
-    nav: string;
-    /**
-     * `items-start`: flex would otherwise stretch a short month to match a
-     * taller neighbour, spreading its rows apart. Paired with `fixed-weeks`
-     * on the calendar, which keeps every month six rows tall so the popover
-     * does not resize as you page through it.
-     */
-    months: string;
-    grid: string;
-    headCell: string;
-    /**
-     * The range bands are painted here, not on the trigger — see `range`.
-     *
-     * `transition-colors` fades the band in and out but deliberately leaves
-     * `border-radius` untransitioned: animating the radius morphs the band's
-     * shape as the preview moves, which reads as the corners wobbling.
-     */
-    cell: string;
-    /**
-     * `w-full`, not a fixed `size-8`: the table cell is wider than 32px, so a
-     * fixed-width pill leaves a gap between consecutive days and a run renders
-     * as a chain of lozenges with pinched corners instead of one band.
-     *
-     * Hover is suppressed on already-selected days so it cannot paint a
-     * competing pill over the solid endpoint fill.
-     *
-     * Selection colour is added by the `range` variant, which differs per mode.
-     *
-     * `tabular-nums`: a proportional `1` is narrower than a `0`, so day numbers
-     * sit off-centre in their pill and the columns of a month no longer line
-     * up vertically — visible as a wobble down the week columns.
-     */
-    cellTrigger: string;
     footer: string;
     action: string;
 }, undefined, {
@@ -103,75 +38,10 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
             trigger: string;
         };
     };
-    /**
-     * A single date is the whole selection, so it takes the solid fill. In a
-     * range only the two endpoints do, and the days between get a flat tint —
-     * emphasising all of them equally turns a long span into one solid block
-     * that no longer shows where it starts and stops.
-     *
-     * The middle style excludes the endpoints with `not-*` rather than relying
-     * on class order, so the two rules never compete for the background.
-     */
-    range: {
-        false: {
-            cellTrigger: string;
-        };
-        /**
-         * Reka's `data-highlighted` hover preview is deliberately left unstyled:
-         * a band that follows the cursor has to reshape its rounded ends on
-         * every move, and no combination of transitioning or not transitioning
-         * the radius looks right while it does. Only the committed range is
-         * drawn, so nothing under the pointer changes shape.
-         *
-         * The band goes on the cell and the endpoint pills on the trigger, so
-         * a single element never has to be both. Only the run's outer edges are
-         * rounded, so the days between meet flush.
-         */
-        true: {
-            cell: string;
-            cellTrigger: string;
-        };
-    };
 }, {
     trigger: string;
-    /** Shown in place of the value, so it reads as absent rather than chosen. */
     placeholder: string;
     content: string;
-    header: string;
-    heading: string;
-    nav: string;
-    /**
-     * `items-start`: flex would otherwise stretch a short month to match a
-     * taller neighbour, spreading its rows apart. Paired with `fixed-weeks`
-     * on the calendar, which keeps every month six rows tall so the popover
-     * does not resize as you page through it.
-     */
-    months: string;
-    grid: string;
-    headCell: string;
-    /**
-     * The range bands are painted here, not on the trigger — see `range`.
-     *
-     * `transition-colors` fades the band in and out but deliberately leaves
-     * `border-radius` untransitioned: animating the radius morphs the band's
-     * shape as the preview moves, which reads as the corners wobbling.
-     */
-    cell: string;
-    /**
-     * `w-full`, not a fixed `size-8`: the table cell is wider than 32px, so a
-     * fixed-width pill leaves a gap between consecutive days and a run renders
-     * as a chain of lozenges with pinched corners instead of one band.
-     *
-     * Hover is suppressed on already-selected days so it cannot paint a
-     * competing pill over the solid endpoint fill.
-     *
-     * Selection colour is added by the `range` variant, which differs per mode.
-     *
-     * `tabular-nums`: a proportional `1` is narrower than a `0`, so day numbers
-     * sit off-centre in their pill and the columns of a month no longer line
-     * up vertically — visible as a wobble down the week columns.
-     */
-    cellTrigger: string;
     footer: string;
     action: string;
 }, import("tailwind-variants").TVReturnType<{
@@ -191,75 +61,10 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
             trigger: string;
         };
     };
-    /**
-     * A single date is the whole selection, so it takes the solid fill. In a
-     * range only the two endpoints do, and the days between get a flat tint —
-     * emphasising all of them equally turns a long span into one solid block
-     * that no longer shows where it starts and stops.
-     *
-     * The middle style excludes the endpoints with `not-*` rather than relying
-     * on class order, so the two rules never compete for the background.
-     */
-    range: {
-        false: {
-            cellTrigger: string;
-        };
-        /**
-         * Reka's `data-highlighted` hover preview is deliberately left unstyled:
-         * a band that follows the cursor has to reshape its rounded ends on
-         * every move, and no combination of transitioning or not transitioning
-         * the radius looks right while it does. Only the committed range is
-         * drawn, so nothing under the pointer changes shape.
-         *
-         * The band goes on the cell and the endpoint pills on the trigger, so
-         * a single element never has to be both. Only the run's outer edges are
-         * rounded, so the days between meet flush.
-         */
-        true: {
-            cell: string;
-            cellTrigger: string;
-        };
-    };
 }, {
     trigger: string;
-    /** Shown in place of the value, so it reads as absent rather than chosen. */
     placeholder: string;
     content: string;
-    header: string;
-    heading: string;
-    nav: string;
-    /**
-     * `items-start`: flex would otherwise stretch a short month to match a
-     * taller neighbour, spreading its rows apart. Paired with `fixed-weeks`
-     * on the calendar, which keeps every month six rows tall so the popover
-     * does not resize as you page through it.
-     */
-    months: string;
-    grid: string;
-    headCell: string;
-    /**
-     * The range bands are painted here, not on the trigger — see `range`.
-     *
-     * `transition-colors` fades the band in and out but deliberately leaves
-     * `border-radius` untransitioned: animating the radius morphs the band's
-     * shape as the preview moves, which reads as the corners wobbling.
-     */
-    cell: string;
-    /**
-     * `w-full`, not a fixed `size-8`: the table cell is wider than 32px, so a
-     * fixed-width pill leaves a gap between consecutive days and a run renders
-     * as a chain of lozenges with pinched corners instead of one band.
-     *
-     * Hover is suppressed on already-selected days so it cannot paint a
-     * competing pill over the solid endpoint fill.
-     *
-     * Selection colour is added by the `range` variant, which differs per mode.
-     *
-     * `tabular-nums`: a proportional `1` is narrower than a `0`, so day numbers
-     * sit off-centre in their pill and the columns of a month no longer line
-     * up vertically — visible as a wobble down the week columns.
-     */
-    cellTrigger: string;
     footer: string;
     action: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/theme/date-picker.js

@@ -6,14 +6,6 @@ var n = t({
 		trigger: `flex items-center justify-between gap-2 ${e} cursor-pointer [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:opacity-60`,
 		placeholder: "text-muted-foreground",
 		content: "z-50 rounded-xl border border-border bg-background p-3 text-foreground shadow-md",
-		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",
 		footer: "flex items-center justify-between gap-2 pt-3",
 		action: "rounded-lg px-2 py-1 text-sm text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50"
 	},
@@ -23,23 +15,9 @@ var n = t({
 			md: { trigger: "h-9 px-3 text-sm" },
 			lg: { trigger: "h-10 px-4 text-base" }
 		},
-		invalid: { true: { trigger: "border-red-500 focus-visible:ring-red-500/40" } },
-		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(" ")
-			}
-		}
+		invalid: { true: { trigger: "border-red-500 focus-visible:ring-red-500/40" } }
 	},
-	defaultVariants: {
-		size: "md",
-		range: !1
-	}
+	defaultVariants: { size: "md" }
 });
 //#endregion
 export { n as datePickerTheme };

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

@@ -32,16 +32,10 @@ export declare const donutChartTheme: import("tailwind-variants").TVReturnType<{
     };
 } | {}, {
     root: string;
-    /** The tooltip's coordinates come from the SVG, so the SVG anchors it. */
     plot: string;
     svg: string;
     slice: string;
     faded: string;
-    /**
-     * The hole. Sized and placed inline from the geometry, so this only
-     * carries the look — a column centred on both axes, out of the way of
-     * pointer events so the slice underneath still hovers at the edges.
-     */
     center: string;
     tooltip: string;
     tooltipLabel: string;
@@ -66,16 +60,10 @@ export declare const donutChartTheme: import("tailwind-variants").TVReturnType<{
     };
 } | {}, {
     root: string;
-    /** The tooltip's coordinates come from the SVG, so the SVG anchors it. */
     plot: string;
     svg: string;
     slice: string;
     faded: string;
-    /**
-     * The hole. Sized and placed inline from the geometry, so this only
-     * carries the look — a column centred on both axes, out of the way of
-     * pointer events so the slice underneath still hovers at the edges.
-     */
     center: string;
     tooltip: string;
     tooltipLabel: string;
@@ -84,16 +72,10 @@ export declare const donutChartTheme: import("tailwind-variants").TVReturnType<{
     table: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
     root: string;
-    /** The tooltip's coordinates come from the SVG, so the SVG anchors it. */
     plot: string;
     svg: string;
     slice: string;
     faded: string;
-    /**
-     * The hole. Sized and placed inline from the geometry, so this only
-     * carries the look — a column centred on both axes, out of the way of
-     * pointer events so the slice underneath still hovers at the edges.
-     */
     center: string;
     tooltip: string;
     tooltipLabel: string;

package/dist/theme/dropdown-menu.d.ts

@@ -8,6 +8,7 @@ export declare const dropdownMenuTheme: import("tailwind-variants").TVReturnType
     content: string;
     item: string;
     label: string;
+    header: string;
     separator: string;
     subTrigger: string;
     subContent: string;
@@ -22,6 +23,7 @@ export declare const dropdownMenuTheme: import("tailwind-variants").TVReturnType
     content: string;
     item: string;
     label: string;
+    header: string;
     separator: string;
     subTrigger: string;
     subContent: string;
@@ -36,6 +38,7 @@ export declare const dropdownMenuTheme: import("tailwind-variants").TVReturnType
     content: string;
     item: string;
     label: string;
+    header: string;
     separator: string;
     subTrigger: string;
     subContent: string;

package/dist/theme/dropdown-menu.js

@@ -5,6 +5,7 @@ var t = e({
 		content: "z-50 min-w-40 overflow-hidden rounded-xl border border-border bg-background p-1 text-foreground shadow-lg outline-none data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in",
 		item: "flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0",
 		label: "px-2 py-1.5 text-xs font-medium text-muted-foreground",
+		header: "-mx-1 -mt-1 mb-1 border-b border-border px-3 py-2.5",
 		separator: "-mx-1 my-1 h-px bg-border",
 		subTrigger: "flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0",
 		subContent: "z-50 min-w-40 overflow-hidden rounded-xl border border-border bg-background p-1 text-foreground shadow-lg outline-none data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in",

package/dist/theme/editable.d.ts

@@ -0,0 +1,77 @@
+export declare const editableTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    invalid: {
+        true: {
+            preview: string;
+            input: string;
+        };
+    };
+}, {
+    root: string;
+    area: string;
+    preview: string;
+    placeholder: string;
+    input: string;
+    control: string;
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    invalid: {
+        true: {
+            preview: string;
+            input: string;
+        };
+    };
+}, {
+    root: string;
+    area: string;
+    preview: string;
+    placeholder: string;
+    input: string;
+    control: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    invalid: {
+        true: {
+            preview: string;
+            input: string;
+        };
+    };
+}, {
+    root: string;
+    area: string;
+    preview: string;
+    placeholder: string;
+    input: string;
+    control: string;
+}, undefined, unknown, unknown, undefined>>;
+export type EditableSlots = keyof ReturnType<typeof editableTheme>;

package/dist/theme/editable.js

@@ -0,0 +1,26 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/editable.ts
+var t = e({
+	slots: {
+		root: "inline-flex items-center gap-1",
+		area: "min-w-0 flex-1",
+		preview: "-mx-1 w-full cursor-text truncate rounded-md px-1 text-left text-foreground transition-colors outline-none hover:bg-accent/60 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent",
+		placeholder: "text-muted-foreground",
+		input: "-mx-1 w-full bg-transparent px-1 [letter-spacing:inherit] text-foreground outline-none [font:inherit] placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+		control: "flex size-7 shrink-0 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 [&_svg]:size-4"
+	},
+	variants: {
+		size: {
+			sm: { root: "text-sm" },
+			md: { root: "text-sm" },
+			lg: { root: "text-base" }
+		},
+		invalid: { true: {
+			preview: "text-red-500",
+			input: "text-red-500"
+		} }
+	},
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { t as editableTheme };

package/dist/theme/empty-state.d.ts

@@ -24,7 +24,6 @@ export declare const emptyStateTheme: import("tailwind-variants").TVReturnType<{
     icon: string;
     title: string;
     description: string;
-    /** Only rendered when the actions slot is used. */
     actions: string;
 }, undefined, {
     size: {
@@ -52,7 +51,6 @@ export declare const emptyStateTheme: import("tailwind-variants").TVReturnType<{
     icon: string;
     title: string;
     description: string;
-    /** Only rendered when the actions slot is used. */
     actions: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
@@ -80,7 +78,6 @@ export declare const emptyStateTheme: import("tailwind-variants").TVReturnType<{
     icon: string;
     title: string;
     description: string;
-    /** Only rendered when the actions slot is used. */
     actions: string;
 }, undefined, unknown, unknown, undefined>>;
 export type EmptyStateSlots = keyof ReturnType<typeof emptyStateTheme>;

package/dist/theme/file-upload.d.ts

@@ -16,28 +16,15 @@ export declare const fileUploadTheme: import("tailwind-variants").TVReturnType<{
     };
 }, {
     root: string;
-    /**
-     * A label, so a click anywhere on the zone opens the picker without any
-     * script — the `<input type="file">` inside stays the real control and
-     * keeps its native keyboard and screen-reader behaviour.
-     */
     dropzone: string;
-    /** Visually hidden rather than `display:none`, which drops it from the tab order. */
     input: string;
-    /**
-     * A filled disc behind the glyph. A bare icon floating in the middle of a
-     * large dashed box reads as an artefact; the disc gives it enough weight
-     * to be the thing the zone is built around.
-     */
     icon: string;
     label: string;
-    /** Spacing only — the look comes from Button, so it tracks the theme. */
     browse: string;
     hint: string;
     list: string;
     item: string;
     thumbnail: string;
-    /** Stand-in for anything without a preview, so rows stay the same height. */
     placeholder: string;
     details: string;
     name: string;
@@ -62,28 +49,15 @@ export declare const fileUploadTheme: import("tailwind-variants").TVReturnType<{
     };
 }, {
     root: string;
-    /**
-     * A label, so a click anywhere on the zone opens the picker without any
-     * script — the `<input type="file">` inside stays the real control and
-     * keeps its native keyboard and screen-reader behaviour.
-     */
     dropzone: string;
-    /** Visually hidden rather than `display:none`, which drops it from the tab order. */
     input: string;
-    /**
-     * A filled disc behind the glyph. A bare icon floating in the middle of a
-     * large dashed box reads as an artefact; the disc gives it enough weight
-     * to be the thing the zone is built around.
-     */
     icon: string;
     label: string;
-    /** Spacing only — the look comes from Button, so it tracks the theme. */
     browse: string;
     hint: string;
     list: string;
     item: string;
     thumbnail: string;
-    /** Stand-in for anything without a preview, so rows stay the same height. */
     placeholder: string;
     details: string;
     name: string;
@@ -108,28 +82,15 @@ export declare const fileUploadTheme: import("tailwind-variants").TVReturnType<{
     };
 }, {
     root: string;
-    /**
-     * A label, so a click anywhere on the zone opens the picker without any
-     * script — the `<input type="file">` inside stays the real control and
-     * keeps its native keyboard and screen-reader behaviour.
-     */
     dropzone: string;
-    /** Visually hidden rather than `display:none`, which drops it from the tab order. */
     input: string;
-    /**
-     * A filled disc behind the glyph. A bare icon floating in the middle of a
-     * large dashed box reads as an artefact; the disc gives it enough weight
-     * to be the thing the zone is built around.
-     */
     icon: string;
     label: string;
-    /** Spacing only — the look comes from Button, so it tracks the theme. */
     browse: string;
     hint: string;
     list: string;
     item: string;
     thumbnail: string;
-    /** Stand-in for anything without a preview, so rows stay the same height. */
     placeholder: string;
     details: string;
     name: string;

package/dist/theme/hover-card.d.ts

@@ -0,0 +1,92 @@
+export declare const hoverCardTheme: import("tailwind-variants").TVReturnType<{
+    padding: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+    width: {
+        none: {};
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+}, {
+    content: string;
+    arrow: string;
+}, undefined, {
+    padding: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+    width: {
+        none: {};
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+}, {
+    content: string;
+    arrow: string;
+}, import("tailwind-variants").TVReturnType<{
+    padding: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+    width: {
+        none: {};
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+}, {
+    content: string;
+    arrow: string;
+}, undefined, unknown, unknown, undefined>>;
+export type HoverCardSlots = keyof ReturnType<typeof hoverCardTheme>;

package/dist/theme/hover-card.js

@@ -0,0 +1,28 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/hover-card.ts
+var t = e({
+	slots: {
+		content: "z-50 rounded-xl border border-border bg-background text-foreground shadow-lg outline-none data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in",
+		arrow: "fill-background stroke-border"
+	},
+	variants: {
+		padding: {
+			none: { content: "p-0" },
+			sm: { content: "p-3" },
+			md: { content: "p-4" },
+			lg: { content: "p-6" }
+		},
+		width: {
+			none: {},
+			sm: { content: "w-56" },
+			md: { content: "w-72" },
+			lg: { content: "w-88" }
+		}
+	},
+	defaultVariants: {
+		padding: "md",
+		width: "md"
+	}
+});
+//#endregion
+export { t as hoverCardTheme };