iryx-ui 0.11.0 → 0.13.0

package/dist/theme/breadcrumb.d.ts

@@ -2,8 +2,8 @@ export declare const breadcrumbTheme: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
             item?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
             list?: import("tailwind-variants").ClassValue;
             current?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;
@@ -13,8 +13,8 @@ export declare const breadcrumbTheme: import("tailwind-variants").TVReturnType<{
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
             item?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
             list?: import("tailwind-variants").ClassValue;
             current?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;
@@ -32,8 +32,8 @@ export declare const breadcrumbTheme: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
             item?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
             list?: import("tailwind-variants").ClassValue;
             current?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;

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

@@ -3,7 +3,6 @@ export declare const buttonGroupTheme: import("tailwind-variants").TVReturnType<
         horizontal: string;
         vertical: string;
     };
-    /** Stretch to fill the container, splitting the width between children. */
     block: {
         true: string;
     };
@@ -12,7 +11,6 @@ export declare const buttonGroupTheme: import("tailwind-variants").TVReturnType<
         horizontal: string;
         vertical: string;
     };
-    /** Stretch to fill the container, splitting the width between children. */
     block: {
         true: string;
     };
@@ -21,7 +19,6 @@ export declare const buttonGroupTheme: import("tailwind-variants").TVReturnType<
         horizontal: string;
         vertical: string;
     };
-    /** Stretch to fill the container, splitting the width between children. */
     block: {
         true: string;
     };

package/dist/theme/button.d.ts

@@ -12,7 +12,6 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
     };
-    /** Icon-only: square, no horizontal padding. */
     square: {
         true: string;
         false: string;
@@ -34,7 +33,6 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
     };
-    /** Icon-only: square, no horizontal padding. */
     square: {
         true: string;
         false: string;
@@ -56,7 +54,6 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
     };
-    /** Icon-only: square, no horizontal padding. */
     square: {
         true: string;
         false: string;

package/dist/theme/card.js

@@ -3,8 +3,8 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		root: "rounded-2xl text-foreground",
-		header: "flex flex-col gap-1",
-		title: "text-base leading-none font-semibold",
+		header: "flex flex-col gap-1.5",
+		title: "text-base leading-snug font-semibold",
 		description: "text-sm text-muted-foreground",
 		body: "",
 		footer: "flex items-center gap-2"

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

@@ -1,15 +1,10 @@
-/**
- * Shared by every multi-series chart. A legend is mandatory from two series
- * up: colour alone is not a dependable identity channel, and the swatch beside
- * the name is what makes it one.
- */
 export declare const chartLegendTheme: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
             item?: import("tailwind-variants").ClassValue;
-            swatch?: import("tailwind-variants").ClassValue;
             name?: import("tailwind-variants").ClassValue;
+            swatch?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
@@ -17,14 +12,13 @@ export declare const chartLegendTheme: import("tailwind-variants").TVReturnType<
         [x: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
             item?: import("tailwind-variants").ClassValue;
-            swatch?: import("tailwind-variants").ClassValue;
             name?: import("tailwind-variants").ClassValue;
+            swatch?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     root: string;
     item: string;
-    /** The mark carries the series colour. */
     swatch: string;
     /** The text never does — a light hue is illegible as type on the surface. */
     name: string;
@@ -33,21 +27,19 @@ export declare const chartLegendTheme: import("tailwind-variants").TVReturnType<
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
             item?: import("tailwind-variants").ClassValue;
-            swatch?: import("tailwind-variants").ClassValue;
             name?: import("tailwind-variants").ClassValue;
+            swatch?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     root: string;
     item: string;
-    /** The mark carries the series colour. */
     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;
-    /** The mark carries the series colour. */
     swatch: string;
     /** The text never does — a light hue is illegible as type on the surface. */
     name: string;

package/dist/theme/collapsible.d.ts

@@ -0,0 +1,44 @@
+export declare const collapsibleTheme: import("tailwind-variants").TVReturnType<{
+    iconPosition: {
+        start: {
+            icon: string;
+        };
+        end: {
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    trigger: string;
+    content: string;
+    icon: string;
+}, undefined, {
+    iconPosition: {
+        start: {
+            icon: string;
+        };
+        end: {
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    trigger: string;
+    content: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    iconPosition: {
+        start: {
+            icon: string;
+        };
+        end: {
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    trigger: string;
+    content: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CollapsibleSlots = keyof ReturnType<typeof collapsibleTheme>;

package/dist/theme/collapsible.js

@@ -0,0 +1,17 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/collapsible.ts
+var t = e({
+	slots: {
+		root: "w-full",
+		trigger: "flex w-full items-center gap-2 rounded-lg text-sm font-medium text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/50 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+		content: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+		icon: "shrink-0 text-muted-foreground transition-transform duration-200"
+	},
+	variants: { iconPosition: {
+		start: { icon: "order-first" },
+		end: { icon: "order-last ml-auto" }
+	} },
+	defaultVariants: { iconPosition: "end" }
+});
+//#endregion
+export { t as collapsibleTheme };

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

@@ -0,0 +1,98 @@
+export declare const colorPickerTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            area?: import("tailwind-variants").ClassValue;
+            track?: import("tailwind-variants").ClassValue;
+            swatch?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+            sliderThumb?: import("tailwind-variants").ClassValue;
+            slider?: import("tailwind-variants").ClassValue;
+            checkerboard?: import("tailwind-variants").ClassValue;
+            field?: import("tailwind-variants").ClassValue;
+            preview?: import("tailwind-variants").ClassValue;
+            swatches?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            area?: import("tailwind-variants").ClassValue;
+            track?: import("tailwind-variants").ClassValue;
+            swatch?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+            sliderThumb?: import("tailwind-variants").ClassValue;
+            slider?: import("tailwind-variants").ClassValue;
+            checkerboard?: import("tailwind-variants").ClassValue;
+            field?: import("tailwind-variants").ClassValue;
+            preview?: import("tailwind-variants").ClassValue;
+            swatches?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    /** Saturation/brightness plane. Height is fixed; width follows the root. */
+    area: string;
+    thumb: string;
+    sliderThumb: string;
+    slider: string;
+    checkerboard: string;
+    track: string;
+    field: string;
+    input: string;
+    /** Current colour, shown beside the hex field. Also needs the chequerboard. */
+    preview: string;
+    swatches: string;
+    swatch: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            area?: import("tailwind-variants").ClassValue;
+            track?: import("tailwind-variants").ClassValue;
+            swatch?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+            sliderThumb?: import("tailwind-variants").ClassValue;
+            slider?: import("tailwind-variants").ClassValue;
+            checkerboard?: import("tailwind-variants").ClassValue;
+            field?: import("tailwind-variants").ClassValue;
+            preview?: import("tailwind-variants").ClassValue;
+            swatches?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    /** Saturation/brightness plane. Height is fixed; width follows the root. */
+    area: string;
+    thumb: string;
+    sliderThumb: string;
+    slider: string;
+    checkerboard: string;
+    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;
+    slider: string;
+    checkerboard: string;
+    track: string;
+    field: string;
+    input: string;
+    /** Current colour, shown beside the hex field. Also needs the chequerboard. */
+    preview: string;
+    swatches: string;
+    swatch: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ColorPickerSlots = keyof ReturnType<typeof colorPickerTheme>;

package/dist/theme/color-picker.js

@@ -0,0 +1,19 @@
+import { fieldBase as e } from "./input.js";
+import { tv as t } from "tailwind-variants";
+//#region src/theme/color-picker.ts
+var n = t({ slots: {
+	root: "flex w-64 flex-col gap-3",
+	area: "relative h-40 w-full rounded-xl",
+	thumb: "size-4 rounded-full border-2 border-gray-300 bg-white outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
+	sliderThumb: "absolute top-1/2 -mt-2",
+	slider: "relative h-3 w-full rounded-full",
+	checkerboard: "absolute inset-0 rounded-full bg-[repeating-conic-gradient(theme(colors.gray.400)_0_25%,transparent_0_50%)] bg-[length:8px_8px]",
+	track: "absolute inset-0 rounded-full",
+	field: `flex items-center ${e} h-9 gap-2 px-3`,
+	input: "w-full min-w-0 flex-1 bg-transparent font-mono text-sm uppercase outline-none",
+	preview: "relative size-5 shrink-0 overflow-hidden rounded-md border border-border",
+	swatches: "flex flex-wrap gap-1.5",
+	swatch: "size-6 rounded-md border border-border outline-none focus-visible:ring-2 focus-visible:ring-primary/50 data-[state=checked]:ring-2 data-[state=checked]:ring-primary"
+} });
+//#endregion
+export { n as colorPickerTheme };

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

@@ -0,0 +1,122 @@
+export declare const commandPaletteTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            item?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            key?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            group?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
+            empty?: import("tailwind-variants").ClassValue;
+            groupLabel?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            itemIcon?: import("tailwind-variants").ClassValue;
+            itemLabel?: import("tailwind-variants").ClassValue;
+            shortcut?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            item?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            key?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            group?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
+            empty?: import("tailwind-variants").ClassValue;
+            groupLabel?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            itemIcon?: import("tailwind-variants").ClassValue;
+            itemLabel?: import("tailwind-variants").ClassValue;
+            shortcut?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    overlay: string;
+    content: string;
+    list: string;
+    header: string;
+    icon: string;
+    /** No border of its own: the header carries the rule. */
+    input: string;
+    viewport: string;
+    group: string;
+    groupLabel: string;
+    item: string;
+    itemIcon: string;
+    itemLabel: string;
+    /** A hint, not a control — it never takes the pointer. */
+    shortcut: string;
+    key: string;
+    empty: string;
+    footer: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            item?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            key?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            group?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
+            empty?: import("tailwind-variants").ClassValue;
+            groupLabel?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            itemIcon?: import("tailwind-variants").ClassValue;
+            itemLabel?: import("tailwind-variants").ClassValue;
+            shortcut?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    overlay: string;
+    content: string;
+    list: string;
+    header: string;
+    icon: string;
+    /** No border of its own: the header carries the rule. */
+    input: string;
+    viewport: string;
+    group: string;
+    groupLabel: string;
+    item: string;
+    itemIcon: string;
+    itemLabel: string;
+    /** A hint, not a control — it never takes the pointer. */
+    shortcut: string;
+    key: string;
+    empty: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    overlay: string;
+    content: string;
+    list: string;
+    header: string;
+    icon: string;
+    /** No border of its own: the header carries the rule. */
+    input: string;
+    viewport: string;
+    group: string;
+    groupLabel: string;
+    item: string;
+    itemIcon: string;
+    itemLabel: string;
+    /** A hint, not a control — it never takes the pointer. */
+    shortcut: string;
+    key: string;
+    empty: string;
+    footer: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CommandPaletteSlots = keyof ReturnType<typeof commandPaletteTheme>;

package/dist/theme/command-palette.js

@@ -0,0 +1,22 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/command-palette.ts
+var t = e({ slots: {
+	overlay: "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in",
+	content: "fixed top-[12vh] left-1/2 z-50 flex max-h-[min(70vh,32rem)] w-[calc(100vw-2rem)] max-w-xl -translate-x-1/2 flex-col overflow-hidden rounded-2xl border border-border bg-background text-foreground shadow-lg outline-none data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in",
+	list: "flex min-h-0 flex-1 flex-col",
+	header: "flex items-center gap-3 border-b border-border px-4",
+	icon: "shrink-0 text-muted-foreground [&_svg]:size-4",
+	input: "h-12 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+	viewport: "max-h-80 min-h-0 flex-1 overflow-y-auto overscroll-contain p-2",
+	group: "flex flex-col",
+	groupLabel: "px-2 py-1.5 font-mono text-xs tracking-[0.08em] text-muted-foreground uppercase",
+	item: "flex cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground data-[disabled]:line-through data-[disabled]:decoration-border data-[disabled]:opacity-60 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+	itemIcon: "shrink-0 text-muted-foreground [&_svg]:size-4",
+	itemLabel: "min-w-0 flex-1 truncate",
+	shortcut: "pointer-events-none ms-auto flex shrink-0 gap-1",
+	key: "rounded border border-border px-1.5 py-0.5 font-mono text-xs text-muted-foreground",
+	empty: "px-2 py-8 text-center text-sm text-muted-foreground",
+	footer: "flex items-center gap-4 border-t border-border px-4 py-2 text-xs text-muted-foreground"
+} });
+//#endregion
+export { t as commandPaletteTheme };

package/dist/theme/container.d.ts

@@ -0,0 +1,101 @@
+export declare const containerTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        /** Full bleed. Still centres and still takes the gutter. */
+        full: {
+            root: string;
+        };
+    };
+    gutter: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        /** Full bleed. Still centres and still takes the gutter. */
+        full: {
+            root: string;
+        };
+    };
+    gutter: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        /** Full bleed. Still centres and still takes the gutter. */
+        full: {
+            root: string;
+        };
+    };
+    gutter: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ContainerSlots = keyof ReturnType<typeof containerTheme>;

package/dist/theme/container.js

@@ -0,0 +1,26 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/container.ts
+var t = e({
+	slots: { root: "mx-auto w-full" },
+	variants: {
+		size: {
+			sm: { root: "max-w-3xl" },
+			md: { root: "max-w-5xl" },
+			lg: { root: "max-w-6xl" },
+			xl: { root: "max-w-7xl" },
+			full: { root: "max-w-none" }
+		},
+		gutter: {
+			none: {},
+			sm: { root: "px-4" },
+			md: { root: "px-6" },
+			lg: { root: "px-8" }
+		}
+	},
+	defaultVariants: {
+		size: "xl",
+		gutter: "md"
+	}
+});
+//#endregion
+export { t as containerTheme };

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

@@ -78,6 +78,10 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
      * 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;
@@ -162,6 +166,10 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
      * 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;
@@ -246,6 +254,10 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
      * 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;

package/dist/theme/date-picker.js

@@ -13,7 +13,7 @@ var n = t({
 		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 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",
+		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"
 	},