iryx-ui 0.6.0 → 0.8.0

package/dist/packages/iryx-ui/src/components/Textarea.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,9 @@
 import { useIryxUiConfig as e } from "../config.js";
 import { useFormField as t } from "../composables/form.js";
 import { textareaTheme as n } from "../theme/input.js";
-import { computed as r, createElementBlock as i, defineComponent as a, mergeModels as o, normalizeClass as s, openBlock as c, unref as l, useModel as u, vModelText as d, withDirectives as f } from "vue";
+import { computed as r, createElementBlock as i, defineComponent as a, mergeModels as o, nextTick as s, normalizeClass as c, onMounted as l, openBlock as u, ref as d, unref as f, useModel as p, vModelText as m, watch as h, withDirectives as g } from "vue";
 //#region src/components/Textarea.vue?vue&type=script&setup=true&lang.ts
-var p = [
+var _ = [
 	"id",
 	"rows",
 	"placeholder",
@@ -11,11 +11,12 @@ var p = [
 	"required",
 	"aria-invalid",
 	"aria-describedby"
-], m = /*@__PURE__*/ a({
+], v = /*@__PURE__*/ a({
 	__name: "Textarea",
 	props: /*@__PURE__*/ o({
 		size: {},
 		rows: {},
+		autosize: { type: [Boolean, Object] },
 		placeholder: {},
 		disabled: { type: Boolean },
 		required: { type: Boolean },
@@ -34,24 +35,49 @@ var p = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(a) {
-		let o = a, m = u(a, "modelValue"), h = t(), g = r(() => o.id ?? h?.id.value), _ = r(() => o.invalid ?? h?.invalid.value ?? !1), v = e(), y = r(() => o.unstyled ?? v.unstyled), b = r(() => y.value ? o.class : n({
-			size: o.size,
-			invalid: _.value,
-			class: o.class
-		}));
-		return (e, t) => f((c(), i("textarea", {
-			id: g.value,
-			"onUpdate:modelValue": t[0] ||= (e) => m.value = e,
-			rows: o.rows,
-			placeholder: o.placeholder,
-			disabled: o.disabled,
-			required: o.required,
-			"aria-invalid": _.value || void 0,
-			"aria-describedby": l(h)?.describedBy.value,
-			class: s(b.value)
-		}, null, 10, p)), [[d, m.value]]);
+	setup(a, { expose: o }) {
+		let v = a, y = p(a, "modelValue"), b = t(), x = r(() => v.id ?? b?.id.value), S = r(() => v.invalid ?? b?.invalid.value ?? !1), C = e(), w = r(() => v.unstyled ?? C.unstyled), T = r(() => w.value ? v.class : n({
+			size: v.size,
+			invalid: S.value,
+			autosize: !!v.autosize,
+			class: v.class
+		})), E = d();
+		o({ textarea: E });
+		let D = r(() => typeof v.autosize == "object" ? v.autosize : {});
+		function O(e) {
+			return Number.parseFloat(e) || 0;
+		}
+		function k() {
+			let e = E.value;
+			if (!e || !v.autosize) return;
+			e.style.height = "auto";
+			let t = window.getComputedStyle(e), n = O(t.lineHeight), r = O(t.paddingTop) + O(t.paddingBottom), i = O(t.borderTopWidth) + O(t.borderBottomWidth), a = e.scrollHeight;
+			if (n) {
+				let { min: e, max: t } = D.value;
+				e != null && (a = Math.max(a, e * n + r)), t != null && (a = Math.min(a, t * n + r));
+			}
+			e.style.height = `${a + i}px`, e.style.overflowY = D.value.max != null && e.scrollHeight > a ? "auto" : "hidden";
+		}
+		return l(() => {
+			v.autosize && s(k);
+		}), h(() => [
+			y.value,
+			v.autosize,
+			v.size
+		], () => void s(k)), (e, t) => g((u(), i("textarea", {
+			id: x.value,
+			ref_key: "el",
+			ref: E,
+			"onUpdate:modelValue": t[0] ||= (e) => y.value = e,
+			rows: v.autosize ? D.value.min : v.rows,
+			placeholder: v.placeholder,
+			disabled: v.disabled,
+			required: v.required,
+			"aria-invalid": S.value || void 0,
+			"aria-describedby": f(b)?.describedBy.value,
+			class: c(T.value)
+		}, null, 10, _)), [[m, y.value]]);
 	}
 });
 //#endregion
-export { m as default };
+export { v as default };

package/dist/packages/iryx-ui/src/components/index.js

@@ -11,29 +11,33 @@ import l from "./Checkbox.js";
 import u from "./Combobox.js";
 import d from "./Dialog.js";
 import f from "./ConfirmDialog.js";
-import p from "./DropdownMenu.js";
-import m from "./EmptyState.js";
-import h from "./Form.js";
-import g from "./Label.js";
-import _ from "./FormField.js";
-import v from "./Input.js";
-import y from "./NumberInput.js";
-import b from "./Pagination.js";
-import x from "./Progress.js";
-import S from "./RadioGroup.js";
-import C from "./Select.js";
-import w from "./Separator.js";
-import T from "./Skeleton.js";
-import E from "./Stat.js";
-import D from "./Stepper.js";
-import O from "./Switch.js";
-import k from "./Table.js";
-import A from "./Tabs.js";
-import j from "./Textarea.js";
-import M from "./Toaster.js";
-import N from "./Tooltip.js";
+import p from "./DatePicker.js";
+import m from "./DateRangePicker.js";
+import h from "./DropdownMenu.js";
+import g from "./EmptyState.js";
+import _ from "./FileUpload.js";
+import v from "./Form.js";
+import y from "./Label.js";
+import b from "./FormField.js";
+import x from "./Input.js";
+import S from "./NumberInput.js";
+import C from "./Pagination.js";
+import w from "./PasswordInput.js";
+import T from "./Progress.js";
+import E from "./RadioGroup.js";
+import D from "./Select.js";
+import O from "./Separator.js";
+import k from "./Skeleton.js";
+import A from "./Stat.js";
+import j from "./Stepper.js";
+import M from "./Switch.js";
+import N from "./Table.js";
+import P from "./Tabs.js";
+import F from "./Textarea.js";
+import I from "./Toaster.js";
+import L from "./Tooltip.js";
 //#region src/components/index.ts
-var P = /* @__PURE__ */ e({
+var R = /* @__PURE__ */ e({
 	Alert: () => t,
 	App: () => n,
 	Badge: () => r,
@@ -45,28 +49,32 @@ var P = /* @__PURE__ */ e({
 	Checkbox: () => l,
 	Combobox: () => u,
 	ConfirmDialog: () => f,
+	DatePicker: () => p,
+	DateRangePicker: () => m,
 	Dialog: () => d,
-	DropdownMenu: () => p,
-	EmptyState: () => m,
-	Form: () => h,
-	FormField: () => _,
-	Input: () => v,
-	Label: () => g,
-	NumberInput: () => y,
-	Pagination: () => b,
-	Progress: () => x,
-	RadioGroup: () => S,
-	Select: () => C,
-	Separator: () => w,
-	Skeleton: () => T,
-	Stat: () => E,
-	Stepper: () => D,
-	Switch: () => O,
-	Table: () => k,
-	Tabs: () => A,
-	Textarea: () => j,
-	Toaster: () => M,
-	Tooltip: () => N
+	DropdownMenu: () => h,
+	EmptyState: () => g,
+	FileUpload: () => _,
+	Form: () => v,
+	FormField: () => b,
+	Input: () => x,
+	Label: () => y,
+	NumberInput: () => S,
+	Pagination: () => C,
+	PasswordInput: () => w,
+	Progress: () => T,
+	RadioGroup: () => E,
+	Select: () => D,
+	Separator: () => O,
+	Skeleton: () => k,
+	Stat: () => A,
+	Stepper: () => j,
+	Switch: () => M,
+	Table: () => N,
+	Tabs: () => P,
+	Textarea: () => F,
+	Toaster: () => I,
+	Tooltip: () => L
 });
 //#endregion
-export { P as components_exports };
+export { R as components_exports };

package/dist/packages/iryx-ui/src/composables/date.js

@@ -0,0 +1,25 @@
+import { $ad063034c8620db8$export$aa8b41735afcabd2 as e, $ad063034c8620db8$export$d0bdf45af03a6ea3 as t } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/queries.js";
+import { $58246871e4652552$export$6b862160d295c8e as n } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/string.js";
+import "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/CalendarDate.js";
+import { $12a3c853105e5a70$export$ad991b66133851cf as r } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/DateFormatter.js";
+//#region src/composables/date.ts
+var i = /^\d{4}-\d{2}-\d{2}$/;
+function a(e) {
+	if (!(!e || !i.test(e))) try {
+		return n(e);
+	} catch {
+		return;
+	}
+}
+function o(e) {
+	return e ? `${e.year.toString().padStart(4, "0")}-${e.month.toString().padStart(2, "0")}-${e.day.toString().padStart(2, "0")}` : null;
+}
+function s() {
+	return o(t(e()));
+}
+function c(t, n, i = { dateStyle: "medium" }) {
+	let o = a(t);
+	return o ? new r(n ?? "en-US", i).format(o.toDate(e())) : "";
+}
+//#endregion
+export { c as formatIsoDate, s as isoToday, a as toCalendarDate, o as toIsoDate };

package/dist/packages/iryx-ui/src/theme/date-picker.js

@@ -0,0 +1,45 @@
+import { fieldBase as e } from "./input.js";
+import { tv as t } from "tailwind-variants";
+//#region src/theme/date-picker.ts
+var n = t({
+	slots: {
+		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 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"
+	},
+	variants: {
+		size: {
+			sm: { trigger: "h-8 px-2.5 text-sm" },
+			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(" ")
+			}
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		range: !1
+	}
+});
+//#endregion
+export { n as datePickerTheme };

package/dist/packages/iryx-ui/src/theme/file-upload.js

@@ -0,0 +1,29 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/file-upload.ts
+var t = e({
+	slots: {
+		root: "flex w-full flex-col gap-3",
+		dropzone: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-border bg-input px-4 py-6 text-center transition-colors focus-within:ring-2 focus-within:ring-primary/50 hover:border-primary/50",
+		input: "sr-only",
+		icon: "flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground [&_svg]:size-5",
+		label: "text-sm text-foreground",
+		browse: "mt-2",
+		hint: "text-xs text-muted-foreground",
+		list: "flex flex-col gap-2",
+		item: "flex items-center gap-3 rounded-xl border border-border bg-input p-2",
+		thumbnail: "size-10 shrink-0 rounded-lg object-cover",
+		placeholder: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground [&_svg]:size-4",
+		details: "flex min-w-0 flex-1 flex-col",
+		name: "truncate text-sm text-foreground",
+		meta: "text-xs text-muted-foreground tabular-nums",
+		remove: "flex size-8 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",
+		error: "text-xs text-danger"
+	},
+	variants: {
+		dragging: { true: { dropzone: "border-primary bg-accent" } },
+		invalid: { true: { dropzone: "border-red-500 focus-within:ring-red-500/40" } },
+		disabled: { true: { dropzone: "pointer-events-none opacity-50" } }
+	}
+});
+//#endregion
+export { t as fileUploadTheme };

package/dist/packages/iryx-ui/src/theme/input.js

@@ -1,14 +1,29 @@
 import { tv as e } from "tailwind-variants";
 //#region src/theme/input.ts
 var t = "w-full rounded-xl border border-border bg-input text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", n = e({
-	base: `flex ${t}`,
+	slots: {
+		root: `flex items-center ${t} focus-within:ring-2 focus-within:ring-primary/50 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50`,
+		input: "w-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+		leading: "flex shrink-0 items-center text-muted-foreground [&_svg]:size-4",
+		trailing: "flex shrink-0 items-center gap-1.5 text-muted-foreground [&_svg]:size-4",
+		clear: "flex 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"
+	},
 	variants: {
 		size: {
-			sm: "h-8 px-2.5 text-sm",
-			md: "h-9 px-3 text-sm",
-			lg: "h-10 px-4 text-base"
+			sm: {
+				root: "h-8 gap-1.5 px-2.5",
+				input: "text-sm"
+			},
+			md: {
+				root: "h-9 gap-2 px-3",
+				input: "text-sm"
+			},
+			lg: {
+				root: "h-10 gap-2 px-4",
+				input: "text-base"
+			}
 		},
-		invalid: { true: "border-red-500 focus-visible:ring-red-500/40" }
+		invalid: { true: { root: "border-red-500 focus-within:ring-red-500/40" } }
 	},
 	defaultVariants: { size: "md" }
 }), r = e({
@@ -19,7 +34,8 @@ var t = "w-full rounded-xl border border-border bg-input text-foreground transit
 			md: "min-h-20 px-3 py-2 text-sm",
 			lg: "min-h-24 px-4 py-2.5 text-base"
 		},
-		invalid: { true: "border-red-500 focus-visible:ring-red-500/40" }
+		invalid: { true: "border-red-500 focus-visible:ring-red-500/40" },
+		autosize: { true: "min-h-0 resize-none" }
 	},
 	defaultVariants: { size: "md" }
 });

package/dist/packages/iryx-ui/src/theme/password-input.js

@@ -0,0 +1,23 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/password-input.ts
+var t = e({
+	slots: {
+		root: "flex w-full flex-col gap-2",
+		input: "[&::-ms-clear]:hidden [&::-ms-reveal]:hidden",
+		toggle: "flex 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-4",
+		meter: "flex items-center gap-2",
+		track: "flex h-1 flex-1 gap-1",
+		segment: "h-full flex-1 rounded-full bg-muted transition-colors",
+		label: "shrink-0 text-xs text-muted-foreground tabular-nums"
+	},
+	variants: { score: {
+		0: {},
+		1: { segment: "data-[filled]:bg-danger" },
+		2: { segment: "data-[filled]:bg-warning" },
+		3: { segment: "data-[filled]:bg-info" },
+		4: { segment: "data-[filled]:bg-success" }
+	} },
+	defaultVariants: { score: 0 }
+});
+//#endregion
+export { t as passwordInputTheme };

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

@@ -0,0 +1,254 @@
+export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+    invalid: {
+        true: {
+            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.
+     */
+    cellTrigger: string;
+    footer: string;
+    action: string;
+}, undefined, {
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+    invalid: {
+        true: {
+            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.
+     */
+    cellTrigger: string;
+    footer: string;
+    action: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+    invalid: {
+        true: {
+            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.
+     */
+    cellTrigger: string;
+    footer: string;
+    action: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DatePickerSlots = keyof ReturnType<typeof datePickerTheme>;