@rinzai/zen 0.10.3 → 0.13.0

package/dist/command-palette/index.js

@@ -1,88 +1,91 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { useModal as t } from "../dialog/index.js";
-import { useEffect as n, useId as r, useMemo as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useMergedRefs as t } from "../utils/refs.js";
+import { useMessages as n } from "../locale-provider/index.js";
+import { useModal as r } from "../dialog/index.js";
+import { useEffect as i, useId as a, useMemo as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region packages/command-palette/index.tsx
-function l({ open: l, onOpenChange: d, items: f, placeholder: p = "Search…", empty: m = "No results", label: h = "Commands", className: g }) {
-	let _ = a(null), v = a(null), y = a(null), b = r(), [x, S] = o(""), [C, w] = o(0);
-	t(_, l, v);
-	let [T, E] = o(l);
-	l !== T && (E(l), l && (S(""), w(0)));
-	let D = i(() => u(f, x), [f, x]), O = i(() => {
+function d({ open: d, onOpenChange: p, items: m, placeholder: h, empty: g, label: _, className: v, ref: y, ...b }) {
+	let x = n(), S = h ?? x.search, C = g ?? x.noResults, w = _ ?? x.commands, T = s(null), E = t(T, y), D = s(null), O = s(null), k = a(), [A, j] = c(""), [M, N] = c(0);
+	r(T, d, D);
+	let [P, F] = c(d);
+	d !== P && (F(d), d && (j(""), N(0)));
+	let I = o(() => f(m, A), [m, A]), L = o(() => {
 		let e = /* @__PURE__ */ new Map();
-		return D.forEach((t, n) => {
+		return I.forEach((t, n) => {
 			let r = t.group ?? "";
 			e.set(r, [...e.get(r) ?? [], {
 				item: t,
 				index: n
 			}]);
 		}), e;
-	}, [D]), k = Math.min(C, D.length - 1);
-	n(() => {
-		y.current?.querySelector(`[data-index="${k}"]`)?.scrollIntoView({ block: "nearest" });
-	}, [k]);
-	let A = (e) => {
-		e && (d(!1), e.onSelect());
+	}, [I]), R = Math.min(M, I.length - 1);
+	i(() => {
+		O.current?.querySelector(`[data-index="${R}"]`)?.scrollIntoView({ block: "nearest" });
+	}, [R]);
+	let z = (e) => {
+		e && (p(!1), e.onSelect());
+	}, B = (e) => {
+		let t = I.length - 1, n = e.key === "ArrowDown" ? (R + 1) % (t + 1) : e.key === "ArrowUp" ? (R - 1 + t + 1) % (t + 1) : e.key === "Home" && e.ctrlKey ? 0 : e.key === "End" && e.ctrlKey ? t : null;
+		n !== null && I.length ? (e.preventDefault(), N(n)) : e.key === "Enter" && (e.preventDefault(), z(I[R]));
 	};
-	return /* @__PURE__ */ c("dialog", {
-		ref: _,
-		"aria-label": h,
-		className: e("zen__dialog zen__command-palette glass glass-blur glow-edge text-card-foreground bg-card/90! overflow-hidden p-0", "mx-auto mt-[12dvh] mb-auto w-[36rem] max-w-[calc(100vw-2rem)] rounded-xl", "backdrop:bg-[color:var(--backdrop-scrim,oklch(0_0_0/0.5))] backdrop:backdrop-blur-sm pointer-coarse:backdrop:backdrop-blur-none", g),
+	return /* @__PURE__ */ u("dialog", {
+		...b,
+		ref: E,
+		"aria-label": w,
+		className: e("zen__dialog zen__command-palette glass glass-blur glow-edge text-card-foreground bg-card/90! overflow-hidden p-0", "mx-auto mt-[12dvh] mb-auto w-[36rem] max-w-[calc(100vw-2rem)] rounded-xl", "backdrop:bg-[color:var(--backdrop-scrim,oklch(0_0_0/0.5))] backdrop:backdrop-blur-sm pointer-coarse:backdrop:backdrop-blur-none", v),
 		onCancel: (e) => {
-			e.preventDefault(), d(!1);
+			e.preventDefault(), p(!1);
 		},
-		onClick: (e) => e.target === e.currentTarget && d(!1),
-		children: [/* @__PURE__ */ s("input", {
-			ref: v,
+		onClick: (e) => e.target === e.currentTarget && p(!1),
+		children: [/* @__PURE__ */ l("input", {
+			ref: D,
 			role: "combobox",
 			"aria-expanded": !0,
-			"aria-controls": `${b}-list`,
-			"aria-activedescendant": D.length ? `${b}-${k}` : void 0,
+			"aria-controls": `${k}-list`,
+			"aria-activedescendant": I.length ? `${k}-${R}` : void 0,
 			"aria-autocomplete": "list",
-			"aria-label": h,
-			placeholder: p,
-			value: x,
+			"aria-label": w,
+			placeholder: S,
+			value: A,
 			onChange: (e) => {
-				S(e.target.value), w(0);
-			},
-			onKeyDown: (e) => {
-				let t = D.length - 1, n = e.key === "ArrowDown" ? (k + 1) % (t + 1) : e.key === "ArrowUp" ? (k - 1 + t + 1) % (t + 1) : e.key === "Home" && e.ctrlKey ? 0 : e.key === "End" && e.ctrlKey ? t : null;
-				n !== null && D.length ? (e.preventDefault(), w(n)) : e.key === "Enter" && (e.preventDefault(), A(D[k]));
+				j(e.target.value), N(0);
 			},
+			onKeyDown: B,
 			className: "border-tint/[0.07] h-14 w-full border-b bg-transparent px-5 text-base outline-hidden placeholder:text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"
-		}), /* @__PURE__ */ c("div", {
-			ref: y,
-			id: `${b}-list`,
+		}), /* @__PURE__ */ u("div", {
+			ref: O,
+			id: `${k}-list`,
 			role: "listbox",
-			"aria-label": h,
+			"aria-label": w,
 			className: "max-h-[min(24rem,60dvh)] overflow-y-auto p-2",
-			children: [!D.length && /* @__PURE__ */ s("p", {
+			children: [!I.length && /* @__PURE__ */ l("p", {
 				className: "text-muted-foreground my-0! px-3 py-8 text-center text-sm",
-				children: m
-			}), [...O].map(([e, t]) => /* @__PURE__ */ c("div", {
+				children: C
+			}), [...L].map(([e, t]) => /* @__PURE__ */ u("div", {
 				role: "group",
 				"aria-label": e || void 0,
 				className: "not-first:mt-2",
-				children: [e && /* @__PURE__ */ s("div", {
+				children: [e && /* @__PURE__ */ l("div", {
 					"aria-hidden": !0,
 					className: "text-muted-foreground text-2xs px-3 pt-2 pb-1 tracking-widest uppercase",
 					children: e
-				}), t.map(({ item: e, index: t }) => /* @__PURE__ */ c("div", {
-					id: `${b}-${t}`,
+				}), t.map(({ item: e, index: t }) => /* @__PURE__ */ u("div", {
+					id: `${k}-${t}`,
 					"data-index": t,
 					role: "option",
-					"aria-selected": t === k,
-					onPointerMove: () => t !== k && w(t),
-					onClick: () => A(e),
+					"aria-selected": t === R,
+					onPointerMove: () => t !== R && N(t),
+					onClick: () => z(e),
 					className: "text-muted-foreground aria-selected:bg-primary/15 aria-selected:text-foreground flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-sm aria-selected:shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.25)] [&_svg]:size-4 [&_svg]:shrink-0",
 					children: [
 						e.icon,
-						/* @__PURE__ */ s("span", {
+						/* @__PURE__ */ l("span", {
 							className: "min-w-0 flex-1 truncate",
 							children: e.label
 						}),
-						e.hint && /* @__PURE__ */ s("span", {
+						e.hint && /* @__PURE__ */ l("span", {
 							className: "text-muted-foreground text-xs",
 							children: e.hint
 						})
@@ -92,7 +95,7 @@ function l({ open: l, onOpenChange: d, items: f, placeholder: p = "Search…", e
 		})]
 	});
 }
-function u(e, t) {
+function f(e, t) {
 	let n = t.toLowerCase().split(/\s+/).filter(Boolean);
 	if (!n.length) return e;
 	let r = t.trim().toLowerCase(), i = e.filter((e) => {
@@ -105,16 +108,16 @@ function u(e, t) {
 	}), a = (e) => +!e.label.toLowerCase().startsWith(r);
 	return i.sort((e, t) => a(e) - a(t));
 }
-function d(e, t = "k") {
-	let r = a(e);
-	n(() => {
-		r.current = e;
-	}), n(() => {
+function p(e, t = "k") {
+	let n = s(e);
+	i(() => {
+		n.current = e;
+	}), i(() => {
 		let e = (e) => {
-			e.key.toLowerCase() !== t || !(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey || (e.preventDefault(), r.current());
+			e.key.toLowerCase() !== t || !(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey || (e.preventDefault(), n.current());
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [t]);
 }
 //#endregion
-export { l as default, u as search, d as useCommandPaletteShortcut };
+export { d as default, f as search, p as useCommandPaletteShortcut };

package/dist/confirm-dialog/index.d.ts

@@ -1,14 +1,13 @@
-import { ReactNode } from 'react';
+import { DialogProps } from '../dialog';
 /** Confirmation for destructive or irreversible actions. Cancel has focus, so Enter is the safe choice. */
-export default function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, destructive, onConfirm, }: ConfirmDialogProps): import('react').JSX.Element;
-export interface ConfirmDialogProps {
-    open: boolean;
+export default function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel: cancelLabelProp, tone, onConfirm, className, ...rest }: ConfirmDialogProps): import('react').JSX.Element;
+/** Other props (data-*, an id) go on the <dialog>. */
+export interface ConfirmDialogProps extends Omit<DialogProps, 'children' | 'role' | 'onOpenChange'> {
     onOpenChange: (open: boolean) => void;
-    title: ReactNode;
-    description?: ReactNode;
     confirmLabel: string;
     cancelLabel?: string;
-    destructive?: boolean;
+    /** `negative` for a destructive action: the confirm button is red. */
+    tone?: 'default' | 'negative';
     onConfirm: () => void;
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/confirm-dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/confirm-dialog/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,2GAA2G;AAC3G,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,YAAY,EACZ,WAAsB,EACtB,WAAmB,EACnB,SAAS,GACZ,EAAE,kBAAkB,+BAoBpB;AAED,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,MAAM,IAAI,CAAC;CACzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/confirm-dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAe,EAA6B,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAElF,2GAA2G;AAC3G,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,YAAY,EACZ,WAAW,EAAE,eAAe,EAC5B,IAAgB,EAChB,SAAS,EACT,SAAS,EACT,GAAG,IAAI,EACV,EAAE,kBAAkB,+BAuBpB;AAED,sDAAsD;AACtD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,MAAM,GAAG,cAAc,CAAC;IAC/F,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B,SAAS,EAAE,MAAM,IAAI,CAAC;CACzB"}

package/dist/confirm-dialog/index.js

@@ -1,25 +1,29 @@
 "use client";
-import e, { DialogClose as t, DialogFooter as n } from "../dialog/index.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { cx as e } from "../utils/cx.js";
+import { useMessages as t } from "../locale-provider/index.js";
+import n, { DialogClose as r, DialogFooter as i } from "../dialog/index.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region packages/confirm-dialog/index.tsx
-function a({ open: a, onOpenChange: o, title: s, description: c, confirmLabel: l, cancelLabel: u = "Cancel", destructive: d = !1, onConfirm: f }) {
-	return /* @__PURE__ */ r(e, {
+function s({ open: s, onOpenChange: c, title: l, description: u, confirmLabel: d, cancelLabel: f, tone: p = "default", onConfirm: m, className: h, ...g }) {
+	let _ = t(), v = f ?? _.cancel;
+	return /* @__PURE__ */ a(n, {
+		...g,
 		role: "alertdialog",
-		open: a,
-		onOpenChange: o,
-		title: s,
-		description: c,
-		className: "w-[26rem]",
-		children: /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(t, {
+		open: s,
+		onOpenChange: c,
+		title: l,
+		description: u,
+		className: e("w-[26rem]", h),
+		children: /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(r, {
 			variant: "outline",
 			autoFocus: !0,
-			children: u
-		}), /* @__PURE__ */ r(t, {
-			variant: d ? "destructive" : "default",
-			onClick: f,
-			children: l
+			children: v
+		}), /* @__PURE__ */ a(r, {
+			tone: p,
+			onClick: m,
+			children: d
 		})] })
 	});
 }
 //#endregion
-export { a as default };
+export { s as default };

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

@@ -1,12 +1,13 @@
 import { DateRange, DateString } from '../utils/date';
+import { FieldSize } from '../utils/styles';
 import { ComponentProps } from 'react';
 /**
  * Date field: shows the date ("Sep 30, 2026" for the locale) and opens a
  * Calendar to pick one, focused on the chosen date so the keyboard works at
- * once. Dates are "YYYY-MM-DD" strings. With `onClear`, the popup also offers
- * `clearLabel` to empty it.
+ * once. Dates are "YYYY-MM-DD" strings. When `clearable`, the popup also offers
+ * `clearLabel` to empty it. With `name`, it's submitted with a form.
  */
-export default function DatePicker({ value, onChange, locale, min, max, isDisabled, weekStartsOn, placeholder, onClear, clearLabel, ...rest }: DatePickerProps): import('react').JSX.Element;
+export default function DatePicker({ value: valueProp, defaultValue, onValueChange, locale: localeProp, min, max, isDisabled, weekStartsOn, placeholder: placeholderProp, clearable, clearLabel: clearLabelProp, ...rest }: DatePickerProps): import('react').JSX.Element;
 /**
  * Date range field: pick a start and then an end in a Calendar (the days
  * between are previewed while pointing); it closes once the range is complete.
@@ -14,10 +15,10 @@ export default function DatePicker({ value, onChange, locale, min, max, isDisabl
  * common ranges ("Last 30 days") sit beside the calendar, one tap each (see
  * commonRanges).
  */
-export declare function DateRangePicker({ value, onChange, locale, min, max, isDisabled, weekStartsOn, months, placeholder, onClear, clearLabel, presets, ...rest }: DateRangePickerProps): import('react').JSX.Element;
+export declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, locale: localeProp, min, max, isDisabled, weekStartsOn, months, placeholder: placeholderProp, clearable, clearLabel: clearLabelProp, presets, ...rest }: DateRangePickerProps): import('react').JSX.Element;
 interface PickerProps extends Omit<ComponentProps<'button'>, 'value' | 'onChange' | 'defaultValue'> {
-    /** Decides the date format, month and weekday names, and the first day of the week, e.g. "en-IN". */
-    locale: string;
+    /** Decides the date format, month and weekday names, and the first day of the week, e.g. "en-IN". Defaults to the LocaleProvider's. */
+    locale?: string;
     /** Earliest date that can be picked ("YYYY-MM-DD"). */
     min?: DateString;
     /** Latest date that can be picked. */
@@ -28,21 +29,29 @@ interface PickerProps extends Omit<ComponentProps<'button'>, 'value' | 'onChange
     weekStartsOn?: number;
     /** Classes for the trigger (e.g. a width, instead of the default full width). */
     className?: string;
+    /** Height, matching Button's: sm (32px), default (40px) or lg (44px). */
+    size?: FieldSize;
     placeholder?: string;
-    /** Offers a clear option in the popup (shown when a value is set). */
-    onClear?: () => void;
+    /** Offers a clear option in the popup (shown when a value is set); clearing reports null. */
+    clearable?: boolean;
     clearLabel?: string;
+    /** Form field name: the value is submitted with the form ("YYYY-MM-DD", a range as "start/end"). */
+    name?: string;
 }
 /** Also takes the trigger button's props (aria-*, data-*, onBlur…), so Field can wire it up. */
 export interface DatePickerProps extends PickerProps {
-    /** "YYYY-MM-DD", or null for none. */
-    value: DateString | null;
-    onChange: (date: DateString) => void;
+    /** "YYYY-MM-DD", or null for none, when you keep it. */
+    value?: DateString | null;
+    /** The first date, when the picker keeps its own. */
+    defaultValue?: DateString | null;
+    onValueChange?: (date: DateString | null) => void;
 }
 export interface DateRangePickerProps extends PickerProps {
-    /** The range; `end` is null while only the start is picked. */
-    value: DateRange | null;
-    onChange: (range: DateRange) => void;
+    /** The range when you keep it; `end` is null while only the start is picked. */
+    value?: DateRange | null;
+    /** The first range, when the picker keeps its own. */
+    defaultValue?: DateRange | null;
+    onValueChange?: (range: DateRange | null) => void;
     /** Months shown side by side (2 suits wide screens). */
     months?: number;
     /** Ranges picked in one tap, beside the calendar. */

package/dist/date-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/date-picker/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAA+B,MAAM,iBAAiB,CAAC;AAG/F,OAAO,EAAE,cAAc,EAAa,MAAM,OAAO,CAAC;AAElD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,EACH,UAAU,EACV,YAAY,EACZ,WAA2B,EAC3B,OAAO,EACP,UAAoB,EACpB,GAAG,IAAI,EACV,EAAE,eAAe,+BAsBjB;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,EACH,UAAU,EACV,YAAY,EACZ,MAAU,EACV,WAA0B,EAC1B,OAAO,EACP,UAAoB,EACpB,OAAO,EACP,GAAG,IAAI,EACV,EAAE,oBAAoB,+BA2DtB;AAmED,UAAU,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,CAAC;IAC/F,qGAAqG;IACrG,MAAM,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,sCAAsC;IACtC,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,gEAAgE;IAChE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;IAC3C,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,gGAAgG;AAChG,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAChD,sCAAsC;IACtC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACrD,+DAA+D;IAC/D,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CACpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/date-picker/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAA+B,MAAM,iBAAiB,CAAC;AAC/F,OAAO,EAAc,KAAK,SAAS,EAA6C,MAAM,mBAAmB,CAAC;AAG1G,OAAO,EAAE,cAAc,EAAa,MAAM,OAAO,CAAC;AAElD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,KAAK,EAAE,SAAS,EAChB,YAAmB,EACnB,aAAa,EACb,MAAM,EAAE,UAAU,EAClB,GAAG,EACH,GAAG,EACH,UAAU,EACV,YAAY,EACZ,WAAW,EAAE,eAAe,EAC5B,SAAiB,EACjB,UAAU,EAAE,cAAc,EAC1B,GAAG,IAAI,EACV,EAAE,eAAe,+BA6BjB;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC5B,KAAK,EAAE,SAAS,EAChB,YAAmB,EACnB,aAAa,EACb,MAAM,EAAE,UAAU,EAClB,GAAG,EACH,GAAG,EACH,UAAU,EACV,YAAY,EACZ,MAAU,EACV,WAAW,EAAE,eAAe,EAC5B,SAAiB,EACjB,UAAU,EAAE,cAAc,EAC1B,OAAO,EACP,GAAG,IAAI,EACV,EAAE,oBAAoB,+BAkEtB;AAkFD,UAAU,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,CAAC;IAC/F,uIAAuI;IACvI,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,sCAAsC;IACtC,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,gEAAgE;IAChE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;IAC3C,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oGAAoG;IACpG,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,gGAAgG;AAChG,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAChD,wDAAwD;IACxD,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC1B,qDAAqD;IACrD,YAAY,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACrD,gFAAgF;IAChF,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,sDAAsD;IACtD,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAClD,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CACpB"}

package/dist/date-picker/index.js

@@ -1,120 +1,136 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { useAnchoredPopup as t } from "../utils/useAnchoredPopup.js";
-import { POPUP as n, TRIGGER as r } from "../utils/styles.js";
-import { useFieldProps as i } from "../field/index.js";
-import { formatDate as a, formatDateRange as o } from "../utils/date.js";
-import s from "../calendar/index.js";
-import c from "../icons/micro/calendar.js";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useControllable as t } from "../utils/useControllable.js";
+import { useAnchoredPopup as n } from "../utils/useAnchoredPopup.js";
+import { useLocale as r, useMessages as i } from "../locale-provider/index.js";
+import { useFieldProps as a } from "../field/index.js";
+import { FIELD_SIZE as o, POPUP as s, TRIGGER as c } from "../utils/styles.js";
+import { FormValue as l } from "../utils/form-value.js";
+import { formatDate as u, formatDateRange as d } from "../utils/date.js";
+import f from "../calendar/index.js";
+import p from "../icons/micro/calendar.js";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region packages/date-picker/index.tsx
-function f({ value: e, onChange: t, locale: n, min: r, max: i, isDisabled: o, weekStartsOn: c, placeholder: l = "Pick a date", onClear: d, clearLabel: f = "Clear", ...p }) {
-	return /* @__PURE__ */ u(m, {
-		...p,
-		shown: e ? a(e, n) : null,
-		placeholder: l,
-		label: "Choose date",
-		onClear: e ? d : void 0,
-		clearLabel: f,
-		calendar: (a) => /* @__PURE__ */ u(s, {
+function _({ value: e, defaultValue: n = null, onValueChange: a, locale: o, min: s, max: c, isDisabled: l, weekStartsOn: d, placeholder: p, clearable: m = !1, clearLabel: g, ..._ }) {
+	let v = i(), b = p ?? v.pickDate, x = g ?? v.clear, S = r(o), [C, w, T] = t(e, n, a);
+	return /* @__PURE__ */ h(y, {
+		..._,
+		shown: C ? u(C, S) : null,
+		formValue: C ?? "",
+		onReset: T,
+		placeholder: b,
+		label: v.chooseDate,
+		onClear: m && C ? () => w(null) : void 0,
+		clearLabel: x,
+		calendar: (e) => /* @__PURE__ */ h(f, {
 			autoFocus: !0,
-			value: e,
-			onChange: (e) => {
-				t(e), a();
+			value: C,
+			onValueChange: (t) => {
+				w(t), e();
 			},
-			locale: n,
-			min: r,
-			max: i,
-			isDisabled: o,
-			weekStartsOn: c
+			locale: S,
+			min: s,
+			max: c,
+			isDisabled: l,
+			weekStartsOn: d
 		})
 	});
 }
-function p({ value: e, onChange: t, locale: n, min: r, max: i, isDisabled: c, weekStartsOn: l, months: f = 1, placeholder: p = "Pick dates", onClear: h, clearLabel: g = "Clear", presets: _, ...v }) {
-	let y = e ? e.end ? o(e.start, e.end, n) : `${a(e.start, n)} – …` : null;
-	return /* @__PURE__ */ u(m, {
-		...v,
-		shown: y,
-		placeholder: p,
-		label: "Choose dates",
-		onClear: e ? h : void 0,
-		clearLabel: g,
-		calendar: (a) => {
-			let o = /* @__PURE__ */ u(s, {
+function v({ value: e, defaultValue: n = null, onValueChange: a, locale: o, min: s, max: c, isDisabled: l, weekStartsOn: p, months: m = 1, placeholder: _, clearable: v = !1, clearLabel: b, presets: x, ...S }) {
+	let C = i(), w = _ ?? C.pickDates, T = b ?? C.clear, E = r(o), [D, O, k] = t(e, n, a), A = D ? D.end ? d(D.start, D.end, E) : `${u(D.start, E)} – …` : null;
+	return /* @__PURE__ */ h(y, {
+		...S,
+		shown: A,
+		formValue: D ? `${D.start}/${D.end ?? ""}` : "",
+		onReset: k,
+		placeholder: w,
+		label: C.chooseDates,
+		onClear: v && D ? () => O(null) : void 0,
+		clearLabel: T,
+		calendar: (e) => {
+			let t = /* @__PURE__ */ h(f, {
 				autoFocus: !0,
 				mode: "range",
-				value: e,
-				onChange: (e) => {
-					t(e), e.end && a();
+				value: D,
+				onValueChange: (t) => {
+					O(t), t.end && e();
 				},
-				locale: n,
-				min: r,
-				max: i,
-				isDisabled: c,
-				weekStartsOn: l,
-				months: f
+				locale: E,
+				min: s,
+				max: c,
+				isDisabled: l,
+				weekStartsOn: p,
+				months: m
 			});
-			return _?.length ? /* @__PURE__ */ d("div", {
+			return x?.length ? /* @__PURE__ */ g("div", {
 				className: "flex flex-col gap-3 sm:flex-row",
-				children: [/* @__PURE__ */ u("div", {
+				children: [/* @__PURE__ */ h("div", {
 					role: "group",
-					"aria-label": "Presets",
+					"aria-label": C.presets,
 					className: "border-tint/[0.06] flex flex-wrap gap-1 sm:flex-col sm:flex-nowrap sm:border-e sm:pe-3",
-					children: _.map((n) => {
-						let r = e?.start === n.range.start && e?.end === n.range.end;
-						return /* @__PURE__ */ u("button", {
+					children: x.map((t) => {
+						let n = D?.start === t.range.start && D?.end === t.range.end;
+						return /* @__PURE__ */ h("button", {
 							type: "button",
-							"aria-pressed": r,
+							"aria-pressed": n,
 							onClick: () => {
-								t(n.range), a();
+								O(t.range), e();
 							},
-							className: "text-muted-foreground hover:bg-tint/[0.06] hover:text-foreground aria-pressed:bg-primary/12 aria-pressed:text-foreground focus-visible:ring-ring/40 cursor-pointer rounded-lg px-2.5 py-1.5 text-start text-sm whitespace-nowrap outline-hidden focus-visible:ring-2",
-							children: n.label
-						}, n.label);
+							className: "text-muted-foreground hover:bg-tint/[0.06] hover:text-foreground aria-pressed:bg-primary/12 aria-pressed:text-foreground focus-ring cursor-pointer rounded-lg px-2.5 py-1.5 text-start text-sm whitespace-nowrap outline-hidden",
+							children: t.label
+						}, t.label);
 					})
-				}), o]
-			}) : o;
+				}), t]
+			}) : t;
 		}
 	});
 }
-function m({ shown: a, placeholder: o, label: s, calendar: c, onClear: f, clearLabel: p, id: m, className: g, disabled: _ = !1, style: v, ...y }) {
-	let b = t(), x = i({
-		...y,
-		id: m
-	}), S = () => b.setOpen(!1);
-	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ d("button", {
-		type: "button",
-		...y,
-		...x,
-		id: m,
-		disabled: _,
-		...b.triggerProps,
-		style: {
-			...b.triggerProps.style,
-			...v
-		},
-		className: e("zen__date-picker group", r, "w-full", b.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", g),
-		children: [/* @__PURE__ */ u("span", {
-			className: e("truncate", !a && "text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"),
-			children: a ?? o
-		}), /* @__PURE__ */ u(h, {})]
-	}), /* @__PURE__ */ d("div", {
-		...b.popupProps,
-		role: "dialog",
-		"aria-label": s,
-		className: e("zen__popover", n, "p-3"),
-		children: [b.open && c(S), f && /* @__PURE__ */ u("button", {
+function y({ shown: t, placeholder: r, label: i, calendar: u, onClear: d, clearLabel: f, name: p, formValue: _, onReset: v, size: y = "default", id: x, className: S, disabled: C = !1, style: w, ...T }) {
+	let E = n(), D = a({
+		...T,
+		id: x
+	}), O = () => E.setOpen(!1);
+	return /* @__PURE__ */ g(m, { children: [
+		/* @__PURE__ */ g("button", {
 			type: "button",
-			onClick: () => {
-				f(), S();
+			...T,
+			...D,
+			id: x,
+			disabled: C,
+			...E.triggerProps,
+			style: {
+				...E.triggerProps.style,
+				...w
 			},
-			className: "border-tint/[0.06] text-muted-foreground hover:text-foreground focus-visible:ring-ring/40 mt-2 w-full cursor-pointer rounded-lg border-t px-2 pt-2.5 pb-1.5 text-sm outline-hidden focus-visible:ring-2",
-			children: p
-		})]
-	})] });
+			className: e("zen__date-picker group", c, o[y], "w-full", E.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", S),
+			children: [/* @__PURE__ */ h("span", {
+				className: e("truncate", !t && "text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"),
+				children: t ?? r
+			}), /* @__PURE__ */ h(b, {})]
+		}),
+		/* @__PURE__ */ h(l, {
+			name: p,
+			value: _,
+			onReset: v
+		}),
+		/* @__PURE__ */ g("div", {
+			...E.popupProps,
+			role: "dialog",
+			"aria-label": i,
+			className: e("zen__popover", s, "p-3"),
+			children: [E.open && u(O), d && /* @__PURE__ */ h("button", {
+				type: "button",
+				onClick: () => {
+					d(), O();
+				},
+				className: "border-tint/[0.06] text-muted-foreground hover:text-foreground focus-ring mt-2 w-full cursor-pointer rounded-lg border-t px-2 pt-2.5 pb-1.5 text-sm outline-hidden",
+				children: f
+			})]
+		})
+	] });
 }
-function h() {
-	return /* @__PURE__ */ u(c, { className: "text-muted-foreground group-data-popup-open:text-foreground size-4 shrink-0 transition-colors" });
+function b() {
+	return /* @__PURE__ */ h(p, { className: "text-muted-foreground group-data-popup-open:text-foreground size-4 shrink-0 transition-colors" });
 }
 //#endregion
-export { p as DateRangePicker, f as default };
+export { v as DateRangePicker, _ as default };

package/dist/dialog/index.d.ts

@@ -7,7 +7,7 @@ import { ComponentProps, ReactNode, RefObject } from 'react';
  * it's a sheet that slides in from that edge: a bottom sheet on phones, a side
  * panel for filters or details. On touch, a sheet swipes back to its edge to close.
  */
-export default function Dialog({ open, onOpenChange, title, description, children, dismissible, initialFocus, size, side, className, role, closeLabel, }: DialogProps): import('react').JSX.Element;
+export default function Dialog({ open, onOpenChange, title, description, children, dismissible, initialFocus, size, side, className, role, closeLabel: closeLabelProp, ref: refProp, ...rest }: DialogProps): import('react').JSX.Element;
 /**
  * Opens and closes a <dialog> as a modal with `open`: focus moves in (to
  * `initialFocus` if given) and back after, the page behind is inert and
@@ -23,7 +23,8 @@ export declare function DialogFooter({ className, ...rest }: ComponentProps<'div
  * preventDefault). Takes every Button prop: variant, size, asChild…
  */
 export declare function DialogClose({ onClick, ...rest }: ButtonProps): import('react').JSX.Element;
-export interface DialogProps {
+/** Other props (data-*, an id) go on the <dialog>. */
+export interface DialogProps extends Omit<ComponentProps<'dialog'>, 'open' | 'title'> {
     open: boolean;
     onOpenChange?: (open: boolean) => void;
     title: ReactNode;
@@ -36,8 +37,6 @@ export interface DialogProps {
     size?: 'md' | 'lg';
     /** Slide in from this edge as a sheet, instead of appearing in the middle. */
     side?: 'bottom' | 'left' | 'right';
-    className?: string;
-    role?: ComponentProps<'dialog'>['role'];
     /** The close button's accessible name. */
     closeLabel?: string;
 }

package/dist/dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAe,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAIlD,OAAO,EACH,cAAc,EAGd,SAAS,EACT,SAAS,EAKZ,MAAM,OAAO,CAAC;AAKf;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,WAAkB,EAClB,YAAY,EACZ,IAAW,EACX,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,UAAoB,GACvB,EAAE,WAAW,+BAuEb;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACpB,GAAG,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EACxC,IAAI,EAAE,OAAO,EACb,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAC7C,IAAI,CA4BN;AAiCD,gEAAgE;AAChE,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAEzE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAW5D;AAED,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7C,sEAAsE;IACtE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;IACxC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/dialog/index.tsx"],"names":[],"mappings":"AAIA,OAAe,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAIlD,OAAO,EACH,cAAc,EAGd,SAAS,EACT,SAAS,EAKZ,MAAM,OAAO,CAAC;AAKf;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,WAAkB,EAClB,YAAY,EACZ,IAAW,EACX,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,UAAU,EAAE,cAAc,EAC1B,GAAG,EAAE,OAAO,EACZ,GAAG,IAAI,EACV,EAAE,WAAW,+BA2Eb;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACpB,GAAG,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EACxC,IAAI,EAAE,OAAO,EACb,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAC7C,IAAI,CA4BN;AAiCD,gEAAgE;AAChE,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAEzE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAW5D;AAED,sDAAsD;AACtD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjF,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7C,sEAAsE;IACtE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACnC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB"}