@rinzai/zen 0.11.0 → 0.14.0

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

@@ -1,18 +1,21 @@
 import { Month } from '../utils/month';
+import { FieldSize } from '../utils/styles';
 import { ComponentProps } from 'react';
 /**
  * Month selector: a field showing "Sep 2026" that opens a year and a 12-month
- * grid. Months are "YYYY-MM" strings. With `onClear`, the popup also offers
- * `clearLabel` (e.g. "No end") to empty it.
+ * grid. Months are "YYYY-MM" strings. When `clearable`, the popup also offers
+ * `clearLabel` (e.g. "No end") to empty it. With `name`, it's submitted with a form.
  */
-export default function MonthPicker({ value, onChange, locale, min, max, id, className, disabled, placeholder, onClear, clearLabel, style, ...rest }: MonthPickerProps): import('react').JSX.Element;
+export default function MonthPicker({ value: valueProp, defaultValue, onValueChange, locale: localeProp, min, max, id, className, disabled, size, placeholder: placeholderProp, clearable, clearLabel: clearLabelProp, name, style, ...rest }: MonthPickerProps): import('react').JSX.Element;
 /** Also takes the trigger button's props (aria-*, data-*, onBlur…), so Field can wire it up. */
 export interface MonthPickerProps extends Omit<ComponentProps<'button'>, 'value' | 'onChange' | 'defaultValue'> {
-    /** "YYYY-MM", or null for none. */
-    value: Month | null;
-    onChange: (month: Month) => void;
-    /** Decides month names and format, e.g. "en-IN". */
-    locale: string;
+    /** "YYYY-MM", or null for none, when you keep it. */
+    value?: Month | null;
+    /** The first month, when the picker keeps its own. */
+    defaultValue?: Month | null;
+    onValueChange?: (month: Month | null) => void;
+    /** Decides month names and format, e.g. "en-IN". Defaults to the LocaleProvider's. */
+    locale?: string;
     /** Earliest month that can be picked ("YYYY-MM"). */
     min?: Month;
     /** Latest month that can be picked. */
@@ -21,9 +24,13 @@ export interface MonthPickerProps extends Omit<ComponentProps<'button'>, 'value'
     /** Classes for the trigger (e.g. a width, instead of the default full width). */
     className?: string;
     disabled?: boolean;
+    /** 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 month is set). */
-    onClear?: () => void;
+    /** Offers a clear option in the popup (shown when a month is set); clearing reports null. */
+    clearable?: boolean;
     clearLabel?: string;
+    /** Form field name: the month ("YYYY-MM") is submitted with the form. */
+    name?: string;
 }
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/month-picker/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAe,KAAK,KAAK,EAAc,MAAM,kBAAkB,CAAC;AAWvE,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAEjD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,EACH,EAAE,EACF,SAAS,EACT,QAAgB,EAChB,WAA4B,EAC5B,OAAO,EACP,UAAoB,EACpB,KAAK,EACL,GAAG,IAAI,EACV,EAAE,gBAAgB,+BA2FlB;AAED,gGAAgG;AAChG,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,CAAC;IAC3G,mCAAmC;IACnC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,oDAAoD;IACpD,MAAM,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/month-picker/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAe,KAAK,KAAK,EAAc,MAAM,kBAAkB,CAAC;AACvE,OAAO,EASH,KAAK,SAAS,EACjB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAEjD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,KAAK,EAAE,SAAS,EAChB,YAAmB,EACnB,aAAa,EACb,MAAM,EAAE,UAAU,EAClB,GAAG,EACH,GAAG,EACH,EAAE,EACF,SAAS,EACT,QAAgB,EAChB,IAAgB,EAChB,WAAW,EAAE,eAAe,EAC5B,SAAiB,EACjB,UAAU,EAAE,cAAc,EAC1B,IAAI,EACJ,KAAK,EACL,GAAG,IAAI,EACV,EAAE,gBAAgB,+BAwGlB;AAED,gGAAgG;AAChG,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,CAAC;IAC3G,qDAAqD;IACrD,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,sDAAsD;IACtD,YAAY,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,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,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/month-picker/index.js

@@ -1,93 +1,104 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { useAnchoredPopup as t } from "../utils/useAnchoredPopup.js";
-import { useFieldProps as n } from "../field/index.js";
-import { PICKER_MONTH as r, PICKER_NAV as i, PLACEHOLDER as a, POPUP as o, TRIGGER as s } from "../utils/styles.js";
-import { FieldChevron as c } from "../utils/field-chevron.js";
-import l from "../icons/chevron-left.js";
-import u from "../icons/chevron-right.js";
-import { formatMonth as d, monthNames as f } from "../utils/month.js";
-import { useState as p } from "react";
-import { Fragment as m, jsx as h, jsxs as g } 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, PICKER_MONTH as s, PICKER_NAV as c, PLACEHOLDER as l, POPUP as u, TRIGGER as d } from "../utils/styles.js";
+import { FormValue as f } from "../utils/form-value.js";
+import { FieldChevron as p } from "../utils/field-chevron.js";
+import m from "../icons/chevron-left.js";
+import h from "../icons/chevron-right.js";
+import { formatMonth as g, monthNames as _ } from "../utils/month.js";
+import { useState as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region packages/month-picker/index.tsx
-function _({ value: _, onChange: v, locale: y, min: b, max: x, id: S, className: C, disabled: w = !1, placeholder: T = "Pick a month", onClear: E, clearLabel: D = "Clear", style: O, ...k }) {
-	let [A, j] = p(() => Number((_ ?? (/* @__PURE__ */ new Date()).toISOString()).slice(0, 4))), M = t({ onOpenChange: (e) => e && _ && j(Number(_.slice(0, 4))) }), N = n({
-		...k,
-		id: S
-	}), P = f(y), F = (e) => (!b || e >= b) && (!x || e <= x);
-	return /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ g("button", {
-		type: "button",
-		...k,
-		...N,
-		id: S,
-		disabled: w,
-		...M.triggerProps,
-		style: {
-			...M.triggerProps.style,
-			...O
-		},
-		className: e("zen__month-picker group", s, "w-full", M.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", C),
-		children: [/* @__PURE__ */ h("span", {
-			className: _ ? void 0 : a,
-			children: _ ? d(_, y) : T
-		}), /* @__PURE__ */ h(c, { open: M.open })]
-	}), /* @__PURE__ */ g("div", {
-		...M.popupProps,
-		role: "dialog",
-		"aria-label": "Choose month",
-		className: e("zen__popover", o, "w-64 p-3"),
-		children: [
-			/* @__PURE__ */ g("div", {
-				className: "mb-2 flex items-center justify-between",
-				children: [
-					/* @__PURE__ */ h("button", {
-						type: "button",
-						"aria-label": "Previous year",
-						onClick: () => j((e) => e - 1),
-						className: i,
-						children: /* @__PURE__ */ h(l, { className: "size-4" })
-					}),
-					/* @__PURE__ */ h("span", {
-						className: "text-sm font-semibold tabular-nums",
-						"aria-live": "polite",
-						children: A
-					}),
-					/* @__PURE__ */ h("button", {
-						type: "button",
-						"aria-label": "Next year",
-						onClick: () => j((e) => e + 1),
-						className: i,
-						children: /* @__PURE__ */ h(u, { className: "size-4" })
+function S({ value: S, defaultValue: C = null, onValueChange: w, locale: T, min: E, max: D, id: O, className: k, disabled: A = !1, size: j = "default", placeholder: M, clearable: N = !1, clearLabel: P, name: F, style: I, ...L }) {
+	let R = i(), z = M ?? R.pickMonth, B = P ?? R.clear, V = r(T), [H, U, W] = t(S, C, w), [G, K] = v(() => Number((H ?? (/* @__PURE__ */ new Date()).toISOString()).slice(0, 4))), q = n({ onOpenChange: (e) => e && H && K(Number(H.slice(0, 4))) }), J = a({
+		...L,
+		id: O
+	}), Y = _(V), X = (e) => (!E || e >= E) && (!D || e <= D);
+	return /* @__PURE__ */ x(y, { children: [
+		/* @__PURE__ */ x("button", {
+			type: "button",
+			...L,
+			...J,
+			id: O,
+			disabled: A,
+			...q.triggerProps,
+			style: {
+				...q.triggerProps.style,
+				...I
+			},
+			className: e("zen__month-picker group", d, o[j], "w-full", q.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", k),
+			children: [/* @__PURE__ */ b("span", {
+				className: H ? void 0 : l,
+				children: H ? g(H, V) : z
+			}), /* @__PURE__ */ b(p, { open: q.open })]
+		}),
+		/* @__PURE__ */ b(f, {
+			name: F,
+			value: H ?? "",
+			onReset: W
+		}),
+		/* @__PURE__ */ x("div", {
+			...q.popupProps,
+			role: "dialog",
+			"aria-label": R.chooseMonth,
+			className: e("zen__popover", u, "w-64 p-3"),
+			children: [
+				/* @__PURE__ */ x("div", {
+					className: "mb-2 flex items-center justify-between",
+					children: [
+						/* @__PURE__ */ b("button", {
+							type: "button",
+							"aria-label": R.previousYear,
+							onClick: () => K((e) => e - 1),
+							className: c,
+							children: /* @__PURE__ */ b(m, { className: "size-4 rtl:-scale-x-100" })
+						}),
+						/* @__PURE__ */ b("span", {
+							className: "text-sm font-semibold tabular-nums",
+							"aria-live": "polite",
+							children: G
+						}),
+						/* @__PURE__ */ b("button", {
+							type: "button",
+							"aria-label": R.nextYear,
+							onClick: () => K((e) => e + 1),
+							className: c,
+							children: /* @__PURE__ */ b(h, { className: "size-4 rtl:-scale-x-100" })
+						})
+					]
+				}),
+				/* @__PURE__ */ b("div", {
+					className: "grid grid-cols-3 gap-1",
+					children: Y.map((t, n) => {
+						let r = `${G}-${String(n + 1).padStart(2, "0")}`, i = r === H;
+						return /* @__PURE__ */ b("button", {
+							type: "button",
+							disabled: !X(r),
+							"aria-pressed": i,
+							"aria-label": g(r, V, "long"),
+							onClick: () => {
+								U(r), q.setOpen(!1);
+							},
+							className: e(s, i && "bg-primary text-primary-foreground hover:bg-primary"),
+							children: t
+						}, r);
 					})
-				]
-			}),
-			/* @__PURE__ */ h("div", {
-				className: "grid grid-cols-3 gap-1",
-				children: P.map((t, n) => {
-					let i = `${A}-${String(n + 1).padStart(2, "0")}`, a = i === _;
-					return /* @__PURE__ */ h("button", {
-						type: "button",
-						disabled: !F(i),
-						"aria-pressed": a,
-						"aria-label": d(i, y, "long"),
-						onClick: () => {
-							v(i), M.setOpen(!1);
-						},
-						className: e(r, a && "bg-primary text-primary-foreground hover:bg-primary"),
-						children: t
-					}, i);
+				}),
+				N && H && /* @__PURE__ */ b("button", {
+					type: "button",
+					onClick: () => {
+						U(null), q.setOpen(!1);
+					},
+					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: B
 				})
-			}),
-			E && _ && /* @__PURE__ */ h("button", {
-				type: "button",
-				onClick: () => {
-					E(), M.setOpen(!1);
-				},
-				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: D
-			})
-		]
-	})] });
+			]
+		})
+	] });
 }
 //#endregion
-export { _ as default };
+export { S as default };

package/dist/navigation-menu/index.d.ts

@@ -0,0 +1,42 @@
+import { ComponentProps } from 'react';
+/**
+ * A site's navigation: links, and labels that open panels of links below
+ * them, on hover (after `openDelay`; at once while another is open) or with a
+ * click or Enter. Escape, a click outside or Tab moving on closes it. Fill it
+ * with NavigationMenuItems, each a NavigationMenuLink, or a
+ * NavigationMenuTrigger and a NavigationMenuContent. Name it with
+ * `aria-label` when there's more than one nav on the page.
+ */
+export default function NavigationMenu({ openDelay, closeDelay, className, children, ...rest }: NavigationMenuProps): import('react').JSX.Element;
+/** One place in the menu: a link, or a label with its panel. */
+export declare function NavigationMenuItem({ className, onBlur, children, ...rest }: ComponentProps<'li'>): import('react').JSX.Element;
+/** The label that opens its item's panel; a chevron after it turns over while it's open. */
+export declare function NavigationMenuTrigger({ className, style, onClick, onPointerEnter, onPointerLeave, children, ref, ...rest }: ComponentProps<'button'>): import('react').JSX.Element;
+/** The panel: glass, below its label (above it if there's no room), lined up with its start. Lay out its links as you like. */
+export declare function NavigationMenuContent({ align, offset, className, style, onPointerEnter, onPointerLeave, ref, ...rest }: NavigationMenuContentProps): import('react').JSX.Element;
+/**
+ * A link: one of the bar's labels at the top, or a row in a panel (with an
+ * optional `description` under its text). `active` marks the page you're on.
+ * With `asChild`, your router's link instead of an `<a>`.
+ */
+export declare function NavigationMenuLink({ active, description, asChild, className, children, ...rest }: NavigationMenuLinkProps): import('react').JSX.Element;
+export interface NavigationMenuProps extends ComponentProps<'nav'> {
+    /** How long the pointer rests on a label before its panel opens, in ms. */
+    openDelay?: number;
+    /** How long a panel opened by the pointer stays after it leaves, in ms (time to reach the panel). */
+    closeDelay?: number;
+}
+export interface NavigationMenuContentProps extends ComponentProps<'div'> {
+    align?: 'start' | 'end' | 'center';
+    /** Gap below the label, in px. */
+    offset?: number;
+}
+export interface NavigationMenuLinkProps extends ComponentProps<'a'> {
+    /** The page it leads to is the one you're on. */
+    active?: boolean;
+    /** In a panel, a line under the link's text. */
+    description?: string;
+    /** Put its props on your own link (the single child), e.g. a router's Link. */
+    asChild?: boolean;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/navigation-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/navigation-menu/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAyE,MAAM,OAAO,CAAC;AA0B9G;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACnC,SAAe,EACf,UAAgB,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BASrB;AAED,gEAAgE;AAChE,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,+BAmDhG;AAED,4FAA4F;AAC5F,wBAAgB,qBAAqB,CAAC,EAClC,SAAS,EACT,KAAK,EACL,OAAO,EACP,cAAc,EACd,cAAc,EACd,QAAQ,EACR,GAAG,EACH,GAAG,IAAI,EACV,EAAE,cAAc,CAAC,QAAQ,CAAC,+BA8B1B;AAED,+HAA+H;AAC/H,wBAAgB,qBAAqB,CAAC,EAClC,KAAe,EACf,MAAU,EACV,SAAS,EACT,KAAK,EACL,cAAc,EACd,cAAc,EACd,GAAG,EACH,GAAG,IAAI,EACV,EAAE,0BAA0B,+BAsB5B;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EAC/B,MAAM,EACN,WAAW,EACX,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,uBAAuB,+BAyBzB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC9D,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qGAAqG;IACrG,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,0BAA2B,SAAQ,cAAc,CAAC,KAAK,CAAC;IACrE,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,GAAG,CAAC;IAChE,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/navigation-menu/index.js

@@ -0,0 +1,144 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useGraphicsMode as t } from "../utils/graphics.js";
+import { useMergedRefs as n } from "../utils/refs.js";
+import { Slot as r } from "../utils/slot.js";
+import { anchoredStyle as i, useAnchoredPopup as a } from "../utils/useAnchoredPopup.js";
+import { POPUP as o } from "../utils/styles.js";
+import { FieldChevron as s } from "../utils/field-chevron.js";
+import { createContext as c, useContext as l, useEffect as u, useRef as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region packages/navigation-menu/index.tsx
+var h = c(null), g = c({
+	openDelay: 150,
+	closeDelay: 200
+}), _ = c(!1);
+function v(e) {
+	let t = l(h);
+	if (!t) throw Error(`<${e}> must be inside <NavigationMenuItem>`);
+	return t;
+}
+var y = "text-muted-foreground hover:text-foreground focus-ring inline-flex h-9 cursor-pointer items-center gap-1 rounded-lg px-3 text-sm transition-colors outline-hidden select-none data-popup-open:bg-tint/[0.07] data-popup-open:text-foreground aria-[current=page]:text-foreground";
+function b({ openDelay: n = 150, closeDelay: r = 200, className: i, children: a, ...o }) {
+	return t(), /* @__PURE__ */ p(g.Provider, {
+		value: {
+			openDelay: n,
+			closeDelay: r
+		},
+		children: /* @__PURE__ */ p("nav", {
+			...o,
+			className: e("zen__navigation-menu relative", i),
+			children: /* @__PURE__ */ p("ul", {
+				className: "flex items-center gap-0.5",
+				children: a
+			})
+		})
+	});
+}
+function x({ className: t, onBlur: n, children: r, ...i }) {
+	let { openDelay: o, closeDelay: s } = l(g), c = d(null), f = d(!1), m = d(0), _ = a({ onOpenChange: (e) => {
+		if (e) return;
+		f.current = !1;
+		let t = document.activeElement;
+		(!t || t === document.body || _.popupRef.current?.contains(t)) && c.current?.focus();
+	} });
+	return u(() => () => clearTimeout(m.current), []), /* @__PURE__ */ p(h.Provider, {
+		value: {
+			popup: _,
+			triggerRef: c,
+			pointIn: (e) => {
+				if (clearTimeout(m.current), e.pointerType === "touch" || _.open || !c.current) return;
+				let t = c.current.closest("nav")?.querySelector("[data-popup-open]"), n = () => {
+					f.current = !0, _.setOpen(!0);
+				};
+				t ? n() : m.current = window.setTimeout(n, o);
+			},
+			pointOut: () => {
+				clearTimeout(m.current), _.open && f.current && (m.current = window.setTimeout(() => _.setOpen(!1), s));
+			},
+			toggle: () => {
+				let e = _.open && f.current;
+				f.current = !1, e || _.setOpen(!_.open);
+			}
+		},
+		children: /* @__PURE__ */ p("li", {
+			...i,
+			className: e("relative", t),
+			onBlur: (e) => {
+				n?.(e), _.open && !e.currentTarget.contains(e.relatedTarget) && _.setOpen(!1);
+			},
+			children: r
+		})
+	});
+}
+function S({ className: t, style: r, onClick: i, onPointerEnter: a, onPointerLeave: o, children: c, ref: l, ...u }) {
+	let d = v("NavigationMenuTrigger"), f = n(d.triggerRef, l), { popoverTarget: h, ...g } = d.popup.triggerProps;
+	return /* @__PURE__ */ m("button", {
+		type: "button",
+		...u,
+		ref: f,
+		...g,
+		style: {
+			...g.style,
+			...r
+		},
+		className: e(y, t),
+		onClick: (e) => {
+			i?.(e), e.defaultPrevented || d.toggle();
+		},
+		onPointerEnter: (e) => {
+			a?.(e), d.pointIn(e);
+		},
+		onPointerLeave: (e) => {
+			o?.(e), d.pointOut();
+		},
+		children: [c, /* @__PURE__ */ p(s, { open: d.popup.open })]
+	});
+}
+function C({ align: t = "start", offset: r = 8, className: a, style: s, onPointerEnter: c, onPointerLeave: l, ref: u, ...d }) {
+	let f = v("NavigationMenuContent"), m = n(f.popup.popupRef, u);
+	return /* @__PURE__ */ p(_.Provider, {
+		value: !0,
+		children: /* @__PURE__ */ p("div", {
+			...d,
+			...f.popup.popupProps,
+			ref: m,
+			style: {
+				...i(f.popup.id, {
+					align: t,
+					offset: r
+				}),
+				...s
+			},
+			className: e("zen__popover fixed z-50 p-2", o, a),
+			onPointerEnter: (e) => {
+				c?.(e), f.pointIn(e);
+			},
+			onPointerLeave: (e) => {
+				l?.(e), f.pointOut();
+			}
+		})
+	});
+}
+function w({ active: t, description: n, asChild: i, className: a, children: o, ...s }) {
+	let c = l(_), u = {
+		"aria-current": t ? "page" : void 0,
+		...s,
+		className: e(c ? "focus-ring hover:bg-tint/[0.06] aria-[current=page]:bg-primary/10 flex flex-col gap-0.5 rounded-lg px-3 py-2 text-sm outline-hidden transition-colors" : y, a)
+	};
+	return i ? /* @__PURE__ */ p(r, {
+		...u,
+		children: o
+	}) : /* @__PURE__ */ p("a", {
+		...u,
+		children: c && n ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("span", {
+			className: "font-medium",
+			children: o
+		}), /* @__PURE__ */ p("span", {
+			className: "text-muted-foreground text-xs leading-snug",
+			children: n
+		})] }) : o
+	});
+}
+//#endregion
+export { C as NavigationMenuContent, x as NavigationMenuItem, w as NavigationMenuLink, S as NavigationMenuTrigger, b as default };

package/dist/number-field/index.d.ts

@@ -0,0 +1,50 @@
+import { FieldSize } from '../utils/styles';
+import { ComponentProps } from 'react';
+/**
+ * A number to type or step: − and + on either side, ↑↓ by `step`, Page Up and
+ * Page Down by `largeStep`, Home and End to `min` and `max`. Shown in the
+ * locale's way (`formatOptions`: a percentage, a unit, decimals) and read back
+ * from what's typed in it, digits, separators and all. Kept within `min` and
+ * `max` once you leave the field; empty is null.
+ *
+ * Each change says how it came about: `{ reason: 'step', delta }` for − +,
+ * ↑↓ and Page Up/Down, `'input'` for typing, `'limit'` for Home and End. So a
+ * step can be sent on as a step, and the number kept by whoever owns it.
+ * `onValueCommit` fires once per finished change: each step, and what's typed
+ * on Enter or on leaving the field.
+ */
+export default function NumberField({ value: valueProp, defaultValue, onValueChange, onValueCommit, min, max, step, largeStep, formatOptions, locale: localeProp, name, size, invalid, disabled, className, onFocus, onBlur, onKeyDown, ...rest }: NumberFieldProps): import('react').JSX.Element;
+/** How a NumberField's number changed: a step (with what it adds), typing, or Home/End. */
+export type NumberFieldChange = {
+    reason: 'step';
+    delta: number;
+} | {
+    reason: 'input' | 'limit';
+};
+export interface NumberFieldProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue' | 'size' | 'min' | 'max' | 'step' | 'onChange'> {
+    /** The number, or null for empty, when you keep it. */
+    value?: number | null;
+    /** The first number, when the field keeps its own. */
+    defaultValue?: number | null;
+    /** Every change, typing included; `details` says how it came about. */
+    onValueChange?: (value: number | null, details: NumberFieldChange) => void;
+    /** Each finished change: a step, Home or End, or what's typed, on Enter or on leaving the field. */
+    onValueCommit?: (value: number | null, details: NumberFieldChange) => void;
+    min?: number;
+    max?: number;
+    /** What ↑↓ and − + add or take away. Default 1. */
+    step?: number;
+    /** What Page Up and Page Down do. Default ten steps. */
+    largeStep?: number;
+    /** How it's shown, as for Intl.NumberFormat: { style: 'percent' }, { maximumFractionDigits: 2 }, a unit. */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** Defaults to the LocaleProvider's. */
+    locale?: string;
+    /** Form field name: the number is submitted under it. */
+    name?: string;
+    /** Height, matching Button's. */
+    size?: FieldSize;
+    /** Show the field in its error state. */
+    invalid?: boolean;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/number-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/number-field/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,EAAE,cAAc,EAAwC,MAAM,OAAO,CAAC;AAE7E;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,KAAK,EAAE,SAAS,EAChB,YAAmB,EACnB,aAAa,EACb,aAAa,EACb,GAAG,EACH,GAAG,EACH,IAAQ,EACR,SAAqB,EACrB,aAAa,EACb,MAAM,EAAE,UAAU,EAClB,IAAI,EACJ,IAAgB,EAChB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACV,EAAE,gBAAgB,+BA+GlB;AAoED,2FAA2F;AAC3F,MAAM,MAAM,iBAAiB,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,MAAM,EAAE,OAAO,GAAG,OAAO,CAAA;CAAE,CAAC;AAElG,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC1C,cAAc,CAAC,OAAO,CAAC,EACvB,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,CAC1E;IACG,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,uEAAuE;IACvE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC3E,oGAAoG;IACpG,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC3E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4GAA4G;IAC5G,aAAa,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;IACzC,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/number-field/index.js

@@ -0,0 +1,133 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useControllable as t } from "../utils/useControllable.js";
+import { useLocale as n, useMessages as r } from "../locale-provider/index.js";
+import { FormValue as i } from "../utils/form-value.js";
+import a, { InputGroupAddon as o, InputGroupInput as s } from "../input-group/index.js";
+import c from "../icons/micro/minus.js";
+import { plainSpaces as l } from "../utils/date.js";
+import u from "../icons/micro/plus.js";
+import { useMemo as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region packages/number-field/index.tsx
+function g({ value: l, defaultValue: g = null, onValueChange: b, onValueCommit: x, min: S, max: C, step: w = 1, largeStep: T = w * 10, formatOptions: E, locale: D, name: O, size: k = "default", invalid: A, disabled: j, className: M, onFocus: N, onBlur: P, onKeyDown: F, ...I }) {
+	let L = r(), R = n(D), [z, B, V] = t(l, g, void 0), H = d(() => new y(R, E), [R, E]), [U, W] = p(null), G = f(!1), K = (e) => Math.min(C ?? Infinity, Math.max(S ?? -Infinity, e)), q = (e, t) => {
+		B(e), b?.(e, t);
+	}, J = (e, t) => {
+		q(e, t), x?.(e, t), G.current = !1, W(null);
+	}, Y = () => {
+		if (!G.current) return;
+		let e = U === null ? void 0 : H.parse(U), t = e === void 0 ? z : e, n = t === null ? null : K(t);
+		n !== z && q(n, { reason: "input" }), x?.(n, { reason: "input" }), G.current = !1;
+	}, X = (e) => {
+		let t = z ?? (e > 0 ? (S ?? 0) - e : (C ?? 0) - e), n = S ?? 0, r = K(n + Math.round((t + e - n) / w) * w), i = Math.max(v(w), v(n));
+		J(Number(r.toFixed(i)), {
+			reason: "step",
+			delta: e
+		});
+	}, Z = U ?? (z === null ? "" : H.format(z));
+	return /* @__PURE__ */ h(a, {
+		size: k,
+		invalid: A,
+		className: e("zen__number-field px-1", M),
+		children: [
+			/* @__PURE__ */ m(o, { children: /* @__PURE__ */ m(_, {
+				label: L.decrease,
+				disabled: j || z !== null && S !== void 0 && z <= S,
+				onStep: () => X(-w),
+				children: /* @__PURE__ */ m(c, {})
+			}) }),
+			/* @__PURE__ */ m(s, {
+				role: "spinbutton",
+				inputMode: (E?.maximumFractionDigits ?? 1) > 0 || (S ?? -1) < 0 ? "decimal" : "numeric",
+				autoComplete: "off",
+				"aria-valuenow": z ?? void 0,
+				"aria-valuemin": S,
+				"aria-valuemax": C,
+				"aria-valuetext": z === null ? void 0 : H.format(z),
+				disabled: j,
+				...I,
+				value: Z,
+				onFocus: (e) => {
+					N?.(e), W(Z);
+				},
+				onChange: (e) => {
+					W(e.target.value), G.current = !0;
+					let t = H.parse(e.target.value);
+					t !== void 0 && q(t, { reason: "input" });
+				},
+				onBlur: (e) => {
+					P?.(e), W(null), Y();
+				},
+				onKeyDown: (e) => {
+					if (F?.(e), e.key === "Enter" && !e.defaultPrevented) {
+						Y(), W(null);
+						return;
+					}
+					let t = {
+						ArrowUp: () => X(w),
+						ArrowDown: () => X(-w),
+						PageUp: () => X(T),
+						PageDown: () => X(-T),
+						Home: S === void 0 ? void 0 : () => J(S, { reason: "limit" }),
+						End: C === void 0 ? void 0 : () => J(C, { reason: "limit" })
+					}[e.key];
+					t && !e.defaultPrevented && (e.preventDefault(), t());
+				},
+				className: "text-center tabular-nums"
+			}),
+			/* @__PURE__ */ m(o, { children: /* @__PURE__ */ m(_, {
+				label: L.increase,
+				disabled: j || z !== null && C !== void 0 && z >= C,
+				onStep: () => X(w),
+				children: /* @__PURE__ */ m(u, {})
+			}) }),
+			/* @__PURE__ */ m(i, {
+				name: O,
+				value: z === null ? "" : String(z),
+				onReset: V
+			})
+		]
+	});
+}
+function _({ label: e, disabled: t, onStep: n, children: r }) {
+	return /* @__PURE__ */ m("button", {
+		type: "button",
+		tabIndex: -1,
+		"aria-label": e,
+		disabled: t,
+		onMouseDown: (e) => e.preventDefault(),
+		onClick: n,
+		className: "text-muted-foreground hover:bg-tint/[0.08] hover:text-foreground grid size-7 cursor-pointer place-items-center rounded-md transition-colors disabled:cursor-not-allowed disabled:opacity-40",
+		children: r
+	});
+}
+var v = (e) => (String(e).split(".")[1] ?? "").length, y = class {
+	formatter;
+	decimal;
+	digits;
+	percent;
+	constructor(e, t) {
+		this.formatter = new Intl.NumberFormat(e, t);
+		let n = new Intl.NumberFormat(e).formatToParts(1.5);
+		this.decimal = n.find((e) => e.type === "decimal")?.value ?? ".";
+		let r = new Intl.NumberFormat(e, { useGrouping: !1 }).format(9876543210);
+		this.digits = new Map([...r].map((e, t) => [e, String(9 - t)])), this.percent = t?.style === "percent";
+	}
+	format(e) {
+		return l(this.formatter.format(e));
+	}
+	parse(e) {
+		let t = "";
+		for (let n of e) {
+			let e = this.digits.get(n) ?? (/\d/.test(n) ? n : void 0);
+			e ? t += e : n === this.decimal ? t += "." : (n === "-" || n === "−") && t === "" && (t = "-");
+		}
+		if (t === "" && e.trim() === "") return null;
+		if (!/^-?\d+(\.\d+)?$/.test(t)) return;
+		let n = Number(t);
+		return this.percent ? n / 100 : n;
+	}
+};
+//#endregion
+export { g as default };

package/dist/page-header/index.d.ts

@@ -1,7 +1,8 @@
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 /** Top of a page: a small eyebrow label, the title in the aurora gradient, and a lead paragraph. */
-export default function PageHeader({ eyebrow, title, lead, children, className }: PageHeaderProps): import('react').JSX.Element;
-export interface PageHeaderProps {
+export default function PageHeader({ eyebrow, title, lead, children, className, ...rest }: PageHeaderProps): import('react').JSX.Element;
+/** Other props (data-*, an id) go on the <header>. */
+export interface PageHeaderProps extends Omit<ComponentProps<'header'>, 'title'> {
     eyebrow?: ReactNode;
     title: ReactNode;
     lead?: ReactNode;