@mortenbrudvik/waveui 0.4.0 → 0.7.0

package/dist/components/input/DatePicker.mjs

@@ -0,0 +1,340 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { warnDeprecated as t, warnOnce as n } from "../../lib/dev.mjs";
+import { composeEventHandlers as r } from "../../lib/composeEventHandlers.mjs";
+import { useControllable as i } from "../../hooks/useControllable.mjs";
+import { useId as a } from "../../hooks/useId.mjs";
+import { getArrowIntent as ee, getDirection as te } from "../../lib/direction.mjs";
+import { FOCUSABLE_SELECTOR as ne } from "../../lib/focus.mjs";
+import { useMergedRefs as re } from "../../hooks/useMergedRefs.mjs";
+import { useIsClient as ie } from "../../hooks/useIsClient.mjs";
+import { focusableDisabledProps as o, joinIds as ae, preventIfDisabled as oe } from "../../lib/aria.mjs";
+import { useFieldContext as se, useFieldControl as ce } from "../../hooks/useFieldControl.mjs";
+import { useDismiss as le } from "../../hooks/useDismiss.mjs";
+import { Portal as ue } from "../portal/Portal.mjs";
+import { disabledStyles as de, focusRing as fe, forcedColors as pe, inputBase as me, inputFocus as he } from "../../lib/styles.mjs";
+import { CalendarIcon as ge, ChevronLeftIcon as _e, ChevronRightIcon as ve, DismissIcon as ye } from "../../lib/icons.mjs";
+import { isInvalidLook as be } from "./Input.mjs";
+import { useFormReset as xe } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as Se } from "../internal/HiddenInput.mjs";
+import { usePopupPosition as Ce } from "../../hooks/usePopupPosition.mjs";
+import { addDays as s, addMonths as c, clampDate as l, formatDate as we, formatDayLabel as Te, formatDayNumber as Ee, formatISODate as u, formatMonthYear as De, getCalendarDays as Oe, getLocaleDateFormat as ke, getWeekdayNames as Ae, isDateInRange as je, isSameDay as d, isSameMonth as f, isValidLocaleTag as Me, parseDate as Ne, startOfDay as p, startOfMonth as Pe } from "./dateUtils.mjs";
+import { useFocusTrap as Fe } from "../../hooks/useFocusTrap.mjs";
+import { useRestoreFocus as Ie } from "../../hooks/useRestoreFocus.mjs";
+import * as m from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { flushSync as Le } from "react-dom";
+//#region src/components/input/DatePicker.tsx
+var Re = (e) => e ? `Enter a date in the format ${e}.` : "Enter a valid date.", ze = (e, t) => e !== void 0 && t !== void 0 ? `Enter a date between ${e} and ${t}.` : e === void 0 ? `Enter a date on or before ${t}.` : `Enter a date on or after ${e}.`, Be = "absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground", Ve = "flex h-8 w-8 items-center justify-center rounded bg-transparent p-0 text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover", He = "flex h-8 w-8 items-center justify-center rounded bg-transparent p-0 text-caption-1 text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover data-[outside]:text-muted-foreground data-[today]:border data-[today]:border-primary data-[today]:font-semibold data-[selected]:bg-primary data-[selected]:font-semibold data-[selected]:text-primary-foreground not-disabled:not-aria-disabled:data-[selected]:hover:bg-primary-hover aria-disabled:line-through";
+function Ue(e) {
+	let t = [];
+	for (let n = 0; n < e.length; n += 7) t.push(e.slice(n, n + 7));
+	return t;
+}
+var We = (We) => {
+	let { value: Ge, defaultValue: Ke, onValueChange: qe, onChange: Je, formatDate: _, parseDate: v, locale: y, minDate: b, maxDate: x, disabledDates: Ye, placeholder: Xe = "Select a date", disabled: S = !1, readOnly: C, clearable: Ze = !1, firstDayOfWeek: w = 0, open: Qe, defaultOpen: $e, onOpenChange: et, onInvalidInput: tt, labels: T, name: nt, form: rt, required: it, autoComplete: at = "off", autoCapitalize: ot, autoCorrect: st, enterKeyHint: ct, inputMode: lt, spellCheck: ut, autoFocus: dt, tabIndex: ft, id: pt, "aria-label": mt, "aria-labelledby": ht, "aria-describedby": gt, "aria-invalid": _t, "aria-required": vt, "aria-errormessage": yt, "aria-details": bt, onFocus: xt, onBlur: St, onKeyDown: Ct, onKeyUp: wt, controlRef: Tt, className: Et, ref: Dt, ...Ot } = We;
+	Je !== void 0 && t("DatePicker", "onChange", "onValueChange");
+	let kt = _ !== void 0, E = v !== void 0;
+	m.useEffect(() => {
+		kt && !E && n("DatePicker:formatDate-without-parseDate", "DatePicker: `formatDate` is set without `parseDate`. Typed dates are parsed with the default parser for `locale` (its numeric format or yyyy-mm-dd), which may not read your format; pass `parseDate` as the inverse of `formatDate`.");
+	}, [kt, E]), m.useEffect(() => {
+		y !== void 0 && !Me(y) && n(`DatePicker:invalid-locale:${y}`, `DatePicker: \`locale\` "${y}" is not a valid BCP 47 language tag (use hyphens, as in "en-US"). The runtime default locale formats and parses the dates instead, so the server and the browser may render different text.`);
+	}, [y]);
+	let [D, At] = i(Ge, Ke ?? null, (e) => {
+		qe?.(e), Je?.(e);
+	}), O = !S && !C, [k, A] = i(Qe, ($e ?? !1) && O, et), jt = ie(), j = k && O && jt, Mt = Qe !== void 0;
+	m.useEffect(() => {
+		!O && k && !Mt && A(!1);
+	}, [
+		O,
+		k,
+		Mt,
+		A
+	]);
+	let M = (e) => _ ? _(e) : we(e, y), Nt = (e) => v ? v(e) : Ne(e, y), [N, P] = m.useState(null), [F, I] = m.useState(null), [Pt, Ft] = m.useState(O);
+	Pt !== O && (Ft(O), O || (P(null), I(null)));
+	let L = D ? u(D) : "", [It, Lt] = m.useState(L);
+	It !== L && (Lt(L), F !== null && (P(null), I(null)));
+	let Rt = (e) => !je(e, b, x) || !!Ye?.(p(e)), R = (e) => {
+		let t = e ? p(e) : null;
+		(t ? d(t, D) : D === null) || At(t), P(null), I(null);
+	}, z = (e) => {
+		if (!e.trim()) return R(null), !0;
+		let t = Nt(e), n = null;
+		if (!t || Number.isNaN(t.getTime()) ? n = "unparseable" : je(t, b, x) ? Ye?.(p(t)) && (n = "disabled") : n = "out-of-range", n || !t) {
+			let t = n ?? "unparseable";
+			return I(t), tt?.(e, t), !1;
+		}
+		return R(t), !0;
+	}, B = p(/* @__PURE__ */ new Date()), zt = () => Pe(l(D ?? B, b, x)), [V, H] = m.useState(zt), [Bt, U] = m.useState(null), [W, G] = m.useState(!1), [Vt, Ht] = m.useState(j);
+	Vt !== j && (Ht(j), j && (H(zt()), U(null))), W && !j && G(!1);
+	let K = m.useMemo(() => Ue(Oe(V, w)), [V, w]), q = (e) => !!e && f(e, V), Ut = (e) => !!e && e >= K[0][0] && e <= K[K.length - 1][6], Wt = l(B, b, x), Gt = l(V, b, x), J = Ut(Bt) ? Bt : q(D) ? p(D) : q(Wt) ? Wt : q(Gt) ? Gt : V, Y = u(J), Kt = (e) => {
+		let t = l(e, b, x);
+		U(t), f(t, V) || H(Pe(t));
+	}, qt = (e) => {
+		let t = c(V, e), n = l(c(J, e), b, x);
+		H(t), U(f(n, t) ? n : null);
+	}, Jt = (e) => {
+		d(e, J) || U(e);
+	}, Yt = !!b && s(V, -1) < p(b), Xt = !!x && c(V, 1) > p(x), Zt = m.useMemo(() => Ae(y, w), [y, w]), X = m.useRef(null), Z = m.useRef(null), Qt = m.useRef(null), $t = m.useRef(null), Q = m.useRef(null), [en, tn] = m.useState(null), nn = re(Tt, X), rn = a("datepicker-dialog"), an = a("datepicker-heading"), on = a("datepicker-grid"), sn = a("datepicker-error"), cn = (e) => {
+		Q.current = e, A(!1);
+	}, { layerId: ln } = le({
+		open: j,
+		onDismiss: (e, t) => {
+			let n = e === "outside-press" && t.target instanceof Element ? t.target.closest(ne) : null;
+			cn(n ?? (W ? X.current : null));
+		},
+		refs: [$t, Z],
+		anchorRef: Z,
+		kind: "modal"
+	}), { setReference: un, setFloating: dn, floatingProps: fn } = Ce({
+		open: j,
+		side: "bottom",
+		align: "start"
+	}), pn = re($t, tn, dn);
+	Fe(en, {
+		enabled: j,
+		layerId: ln,
+		initialFocus: () => Qt.current?.querySelector("button[tabindex=\"0\"]") ?? null
+	}), Ie({
+		enabled: j,
+		container: en,
+		triggerRef: Z,
+		finalFocusRef: Q,
+		onlyIfFocusInside: !0
+	}), m.useLayoutEffect(() => {
+		j && (Q.current = null);
+	}, [j]), m.useLayoutEffect(() => {
+		let e = Qt.current;
+		if (!e) return;
+		let t = e.ownerDocument.activeElement;
+		if (!t || !e.contains(t)) return;
+		let n = e.querySelector(`button[data-date="${Y}"]`);
+		n && n !== t && n.focus();
+	}, [Y]);
+	let mn = se(), hn = (it ?? mn?.required ?? !1) && !C, gn = F !== null && !mn?.hasErrorMessage, _n = ce({
+		id: pt,
+		"aria-label": mt,
+		"aria-labelledby": ht,
+		"aria-describedby": ae(gt, gn ? sn : void 0),
+		"aria-invalid": F !== null || _t,
+		"aria-required": vt ?? it
+	}), vn = be(!1, _n["aria-invalid"]);
+	xe(X, () => R(Ke ?? null), rt);
+	let yn = Ze && !C && D !== null, bn = (e) => {
+		O && (P(e.target.value), I(null));
+	}, xn = r(Ct, (e) => {
+		O && !e.nativeEvent.isComposing && (e.key === "Enter" && N !== null ? (e.preventDefault(), z(N)) : e.key === "Tab" && !e.shiftKey && yn && N !== null && !N.trim() ? Le(() => z(N)) : e.key === "ArrowDown" && e.altKey && !j && (e.preventDefault(), N !== null && F === null && z(N), G(!0), A(!0)));
+	}), Sn = r(St, () => {
+		O && N !== null && F === null && z(N);
+	}), Cn = () => {
+		O && (Q.current = null, G(!1), A(!j));
+	}, wn = () => {
+		O && (R(null), X.current?.focus());
+	}, Tn = (e) => {
+		e.preventDefault();
+	}, En = (e) => {
+		O && !Rt(e) && (R(e), cn(X.current));
+	}, Dn = (e) => {
+		e.key !== "Escape" || e.defaultPrevented || e.nativeEvent.isComposing || (e.preventDefault(), cn(W ? X.current : null));
+	}, On = (e) => {
+		if (e.altKey || e.ctrlKey || e.metaKey) return;
+		let t = (J.getDay() - w + 7) % 7, n;
+		switch (e.key) {
+			case "ArrowLeft":
+			case "ArrowRight": {
+				let t = ee(e.key, {
+					orientation: "horizontal",
+					dir: te(e.currentTarget)
+				});
+				n = s(J, t === "next" ? 1 : -1);
+				break;
+			}
+			case "ArrowDown":
+				n = s(J, 7);
+				break;
+			case "ArrowUp":
+				n = s(J, -7);
+				break;
+			case "PageDown":
+				n = c(J, e.shiftKey ? 12 : 1);
+				break;
+			case "PageUp":
+				n = c(J, e.shiftKey ? -12 : -1);
+				break;
+			case "Home":
+				n = s(J, -t);
+				break;
+			case "End":
+				n = s(J, 6 - t);
+				break;
+			default: return;
+		}
+		e.preventDefault(), Kt(n);
+	}, kn = N ?? (D ? M(D) : ""), $ = "";
+	return F === "unparseable" ? $ = (T?.invalidDate ?? Re)(E ? void 0 : ke(y).pattern) : F === "out-of-range" && (b || x) ? $ = (T?.outOfRange ?? ze)(b ? M(p(b)) : void 0, x ? M(p(x)) : void 0) : F === "disabled" && ($ = T?.unavailableDate ?? "This date is not available."), /* @__PURE__ */ g("div", {
+		...Ot,
+		ref: Dt,
+		className: e("relative inline-flex flex-col", Et),
+		children: [
+			/* @__PURE__ */ g("div", {
+				ref: un,
+				className: "relative flex items-center",
+				children: [
+					/* @__PURE__ */ h("input", {
+						ref: nn,
+						type: "text",
+						..._n,
+						"aria-errormessage": yt,
+						"aria-details": bt,
+						value: kn,
+						onChange: bn,
+						onFocus: xt,
+						onBlur: Sn,
+						onKeyDown: xn,
+						onKeyUp: wt,
+						placeholder: Xe,
+						disabled: S,
+						readOnly: C,
+						autoComplete: at,
+						autoCapitalize: ot,
+						autoCorrect: st,
+						enterKeyHint: ct,
+						inputMode: lt,
+						spellCheck: ut,
+						autoFocus: dt,
+						tabIndex: ft,
+						className: e(me, "border-b-stroke-accessible", he, de, vn && "border-destructive focus:border-b-destructive", yn ? "pe-14" : "pe-8")
+					}),
+					yn && /* @__PURE__ */ h("button", {
+						type: "button",
+						"aria-label": T?.clear ?? "Clear date",
+						disabled: S,
+						onMouseDown: Tn,
+						onClick: wn,
+						className: e(Be, "end-7", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100"),
+						children: /* @__PURE__ */ h(ye, {})
+					}),
+					/* @__PURE__ */ h("button", {
+						ref: Z,
+						type: "button",
+						"aria-label": T?.openCalendar ?? "Open calendar",
+						"aria-haspopup": "dialog",
+						"aria-expanded": j,
+						"aria-controls": j ? rn : void 0,
+						disabled: S || C,
+						onClick: Cn,
+						className: e(Be, "end-1", fe, de),
+						children: /* @__PURE__ */ h(ge, {})
+					})
+				]
+			}),
+			gn && /* @__PURE__ */ h("p", {
+				id: sn,
+				role: "alert",
+				className: "mt-1 text-caption-1 text-error",
+				children: $
+			}),
+			/* @__PURE__ */ h(Se, {
+				name: nt,
+				form: rt,
+				disabled: S,
+				value: D ? u(D) : "",
+				type: "text",
+				required: hn,
+				onInvalid: () => X.current?.focus()
+			}),
+			j && /* @__PURE__ */ h(ue, {
+				layerId: ln,
+				children: /* @__PURE__ */ g("div", {
+					ref: pn,
+					id: rn,
+					role: "dialog",
+					"aria-modal": "true",
+					"aria-labelledby": an,
+					...fn,
+					"data-state": "open",
+					onKeyDown: Dn,
+					className: "rounded-md border border-border bg-background p-3 text-foreground shadow-16",
+					children: [/* @__PURE__ */ g("div", {
+						className: "mb-2 flex items-center justify-between gap-2",
+						children: [
+							/* @__PURE__ */ h("button", {
+								type: "button",
+								"aria-label": T?.previousMonth ?? "Previous month",
+								"aria-controls": on,
+								...o(Yt),
+								onClick: oe(Yt, () => qt(-1)),
+								className: e(Ve, "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100"),
+								children: /* @__PURE__ */ h(_e, { className: "wave-rtl:-scale-x-100" })
+							}),
+							/* @__PURE__ */ h("h2", {
+								id: an,
+								"aria-live": "polite",
+								className: "text-body-1 font-semibold",
+								children: De(V, y)
+							}),
+							/* @__PURE__ */ h("button", {
+								type: "button",
+								"aria-label": T?.nextMonth ?? "Next month",
+								"aria-controls": on,
+								...o(Xt),
+								onClick: oe(Xt, () => qt(1)),
+								className: e(Ve, "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100"),
+								children: /* @__PURE__ */ h(ve, { className: "wave-rtl:-scale-x-100" })
+							})
+						]
+					}), /* @__PURE__ */ g("table", {
+						ref: Qt,
+						id: on,
+						role: "grid",
+						"aria-labelledby": an,
+						onKeyDown: On,
+						className: "border-collapse",
+						children: [/* @__PURE__ */ h("thead", { children: /* @__PURE__ */ h("tr", { children: Zt.map((e) => /* @__PURE__ */ g("th", {
+							scope: "col",
+							abbr: e.long,
+							"aria-label": e.long,
+							className: "h-8 w-8 text-center text-caption-1 font-normal text-muted-foreground",
+							children: [/* @__PURE__ */ h("span", {
+								"aria-hidden": "true",
+								children: e.short
+							}), /* @__PURE__ */ h("span", {
+								className: "sr-only",
+								children: e.long
+							})]
+						}, e.long)) }) }), /* @__PURE__ */ h("tbody", { children: K.map((t, n) => /* @__PURE__ */ h("tr", { children: t.map((t, n) => {
+							let r = u(t), i = d(t, D), a = d(t, B), ee = r === Y, te = Rt(t);
+							return /* @__PURE__ */ h("td", {
+								role: "gridcell",
+								"aria-selected": i,
+								className: "p-0",
+								children: /* @__PURE__ */ h("button", {
+									type: "button",
+									tabIndex: ee ? 0 : -1,
+									"aria-label": Te(t, y),
+									"aria-pressed": i || void 0,
+									"aria-current": a ? "date" : void 0,
+									...o(te),
+									"data-date": r,
+									"data-selected": i ? "" : void 0,
+									"data-today": a ? "" : void 0,
+									"data-outside": f(t, V) ? void 0 : "",
+									onFocus: () => Jt(t),
+									onClick: () => En(t),
+									className: e(He, "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100", i && pe.selectedLeaf),
+									children: Ee(t, y)
+								})
+							}, n);
+						}) }, n)) })]
+					})]
+				})
+			})
+		]
+	});
+};
+We.displayName = "DatePicker";
+//#endregion
+export { We as DatePicker };
+
+//# sourceMappingURL=DatePicker.mjs.map

package/dist/components/input/DatePicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.mjs","names":["formatLocaleDate","parseLocaleDate","useId","useId$1","React","defaultInvalidDateLabel","pattern","defaultOutOfRangeLabel","min","max","ICON_BUTTON_CLASSES","NAV_BUTTON_CLASSES","DAY_CLASSES","toWeeks","weeks","i","days","DatePicker","valueProp","formatDateProp","parseDateProp","openProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onChange","warnDeprecated","hasCustomFormat","hasCustomParse","warnOnce","locale","isValidLocaleTag","selectedDate","setSelectedDate","useControllable","defaultValue","onValueChange","next","interactive","disabled","readOnly","openState","setOpen","defaultOpen","onOpenChange","isClient","useIsClient","isOpen","openControlled","format","date","formatDate","parse","text","parseDate","draft","setDraft","invalid","setInvalid","wasInteractive","setWasInteractive","selectedDay","formatISODate","seenDay","setSeenDay","isUnavailable","isDateInRange","minDate","maxDate","disabledDates","startOfDay","commitDate","normalized","isSameDay","commitDraft","parsed","reason","rejected","onInvalidInput","today","initialView","startOfMonth","clampDate","viewMonth","setViewMonth","focusedDay","setFocusedDay","openedFromInput","setOpenedFromInput","openSeen","setOpenSeen","getCalendarDays","firstDayOfWeek","inView","isSameMonth","inGrid","clampedToday","firstInRange","focusTarget","focusIso","moveFocus","target","navigateMonth","nextView","addMonths","delta","moved","handleDayFocus","day","previousDisabled","addDays","nextDisabled","weekdays","getWeekdayNames","inputRef","toggleRef","gridRef","surfaceRef","restoreTargetRef","surface","setSurface","inputRefs","useMergedRefs","controlRef","dialogId","headingId","gridId","errorId","close","restoreTo","useDismiss","event","FOCUSABLE_SELECTOR","usePopupPosition","surfaceRefs","setFloating","useFocusTrap","useRestoreFocus","grid","active","button","field","useFieldContext","validates","required","showOwnError","fieldProps","useFieldControl","joinIds","invalidLook","isInvalidLook","form","showClear","clearable","handleInputChange","handleInputKeyDown","composeEventHandlers","onKeyDown","flushSync","handleInputBlur","onBlur","handleToggle","handleClear","handleClearMouseDown","selectDate","handleDialogKeyDown","handleGridKeyDown","weekOffset","intent","getArrowIntent","getDirection","inputText","errorMessage","labels","getLocaleDateFormat","cn","className","setReference","inputBase","inputFocus","disabledStyles","DismissIcon","focusRing","CalendarIcon","HiddenInput","Portal","floatingProps","focusableDisabledProps","preventIfDisabled","ChevronLeftIcon","formatMonthYear","ChevronRightIcon","weekday","week","iso","isSelected","isToday","isFocused","unavailable","formatDayLabel","forcedColors","formatDayNumber","column","row"],"sources":["../../../src/components/input/DatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport { cn } from '../../lib/cn';\nimport { focusableDisabledProps, joinIds, preventIfDisabled } from '../../lib/aria';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { getArrowIntent, getDirection } from '../../lib/direction';\nimport { FOCUSABLE_SELECTOR } from '../../lib/focus';\nimport { CalendarIcon, ChevronLeftIcon, ChevronRightIcon, DismissIcon } from '../../lib/icons';\nimport {\n  disabledStyles,\n  focusRing,\n  forcedColors,\n  inputBase,\n  inputFocus,\n  inputInvalid,\n} from '../../lib/styles';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFocusTrap } from '../../hooks/useFocusTrap';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { useRestoreFocus } from '../../hooks/useRestoreFocus';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { Portal } from '../portal/Portal';\nimport {\n  addDays,\n  addMonths,\n  clampDate,\n  formatDate as formatLocaleDate,\n  formatDayLabel,\n  formatDayNumber,\n  formatISODate,\n  formatMonthYear,\n  getCalendarDays,\n  getLocaleDateFormat,\n  getWeekdayNames,\n  isDateInRange,\n  isSameDay,\n  isSameMonth,\n  isValidLocaleTag,\n  parseDate as parseLocaleDate,\n  startOfDay,\n  startOfMonth,\n} from './dateUtils';\nimport { isInvalidLook } from './Input';\nimport type { RoutedHandlers } from './routedHandlers';\n\n/** Why typed text was not accepted (see {@link DatePickerProps.onInvalidInput}). */\nexport type DatePickerInvalidReason = 'unparseable' | 'out-of-range' | 'disabled';\n\n/**\n * The DatePicker's built-in button names and error texts, for localization. Each member is\n * optional and falls back to its English default. Month and weekday names and the day labels\n * follow `locale`.\n */\nexport interface DatePickerLabels {\n  /** Name of the clear button.\n   * @default 'Clear date'\n   */\n  clear?: string;\n  /** Name of the button that opens the calendar.\n   * @default 'Open calendar'\n   */\n  openCalendar?: string;\n  /** Name of the calendar's previous-month button.\n   * @default 'Previous month'\n   */\n  previousMonth?: string;\n  /** Name of the calendar's next-month button.\n   * @default 'Next month'\n   */\n  nextMonth?: string;\n  /**\n   * Error text for typed text that is not a date. `pattern` is the default format of `locale`\n   * written with English field letters (`'MM/DD/YYYY'`, `'DD.MM.YYYY'`), or `undefined` with a\n   * custom `parseDate` (its format is unknown to the picker).\n   * @default (pattern) => pattern ? `Enter a date in the format ${pattern}.` : 'Enter a valid date.'\n   */\n  invalidDate?: (pattern: string | undefined) => string;\n  /**\n   * Error text for a typed date outside `minDate`/`maxDate`. The bounds are passed as the input\n   * shows dates (`formatDate`); a bound that is not set is `undefined`.\n   * @default (min, max) => `Enter a date between ${min} and ${max}.` (only `min`: `Enter a date on\n   * or after ${min}.`; only `max`: `Enter a date on or before ${max}.`)\n   */\n  outOfRange?: (min: string | undefined, max: string | undefined) => string;\n  /** Error text for a typed date that `disabledDates` excludes.\n   * @default 'This date is not available.'\n   */\n  unavailableDate?: string;\n}\n\nconst defaultInvalidDateLabel = (pattern: string | undefined) =>\n  pattern ? `Enter a date in the format ${pattern}.` : 'Enter a valid date.';\n\nconst defaultOutOfRangeLabel = (min: string | undefined, max: string | undefined) => {\n  if (min !== undefined && max !== undefined) return `Enter a date between ${min} and ${max}.`;\n  if (min !== undefined) return `Enter a date on or after ${min}.`;\n  return `Enter a date on or before ${max}.`;\n};\n\n/** Properties for the DatePicker component. */\nexport interface DatePickerProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | 'placeholder' | RoutedHandlers\n> {\n  /** Controlled selected date (`null` for none). Emitted dates are always local midnight. */\n  value?: Date | null;\n  /**\n   * Initial date for uncontrolled usage.\n   * @default null\n   */\n  defaultValue?: Date | null;\n  /** Called with the new date (local midnight) or `null` whenever the selected day changes. */\n  onValueChange?: (date: Date | null) => void;\n  /**\n   * @deprecated Use `onValueChange`. Still called with the new date (warns once in development).\n   */\n  onChange?: (date: Date | null) => void;\n  /**\n   * Formats the selected date for the input. Supply `parseDate` as its inverse: without it, typed\n   * text is parsed with the default parser for `locale` (development warning).\n   * @default Intl.DateTimeFormat(locale, { year: 'numeric', month: '2-digit', day: '2-digit' }),\n   * in the Gregorian calendar when the locale's own has other months (see `locale`)\n   */\n  formatDate?: (date: Date) => string;\n  /**\n   * Parses typed text into a date (`null` when it is not one); the result is normalized to local\n   * midnight. The default is the exact inverse of the default format for `locale` and also\n   * accepts ISO `yyyy-mm-dd`.\n   */\n  parseDate?: (text: string) => Date | null;\n  /**\n   * BCP 47 locale of the default format/parse, the month and weekday names and the day labels\n   * (runtime default when omitted). Pass it explicitly when rendering on the server, so the server\n   * and the browser format the same text. The grid is Gregorian: a locale calendar with other\n   * months or eras (the Persian default of `fa-IR`, `-u-ca-islamic`, `-u-ca-japanese`) is replaced\n   * by the Gregorian one in the locale's language and digits; the Buddhist years of `th-TH` stay.\n   * A tag `Intl` rejects (the POSIX `de_DE`, a typo) falls back to the runtime default locale\n   * (development warning).\n   */\n  locale?: string;\n  /** Earliest selectable day (the whole day is included). */\n  minDate?: Date;\n  /** Latest selectable day (the whole day is included). */\n  maxDate?: Date;\n  /** Returns `true` for days that cannot be selected (called with local-midnight dates). */\n  disabledDates?: (date: Date) => boolean;\n  /**\n   * Placeholder text shown when no date is selected.\n   * @default 'Select a date'\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled and non-interactive (the calendar is not shown).\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Makes the input read-only: the calendar does not open and the value cannot change. Turning it\n   * (or `disabled`) on while the user is typing drops the typed text.\n   */\n  readOnly?: boolean;\n  /**\n   * Whether to show a clear button when a date is selected (not shown while `readOnly`). Tab from\n   * erased text clears the value before focus moves, so focus goes on to the calendar button, past\n   * the clear button that disappears with it.\n   * @default false\n   */\n  clearable?: boolean;\n  /**\n   * First day of the week (0 = Sunday, 1 = Monday, etc.).\n   * @default 0\n   */\n  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Controlled open state of the calendar. The calendar renders only in the browser: an open\n   * picker is closed in the server HTML and opens once it has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Initial open state for uncontrolled usage. A picker that starts disabled or read-only starts\n   * closed. The calendar renders only in the browser: it is closed in the server HTML and opens\n   * once the picker has hydrated.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Called when the calendar opens or closes (only when the state changes). */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Called when typed text is not accepted on Enter, Alt+ArrowDown or blur (once per edit): it\n   * cannot be parsed (`'unparseable'`), lies outside `minDate`/`maxDate` (`'out-of-range'`) or is\n   * excluded by `disabledDates` (`'disabled'`). The text stays in the input, which is marked\n   * `aria-invalid` and described by an error message (left to the surrounding `Field` when it\n   * shows an error). Enter reports it again when pressed again.\n   */\n  onInvalidInput?: (text: string, reason: DatePickerInvalidReason) => void;\n  /**\n   * Names of the clear, calendar and month buttons and the error texts of rejected typed text, for\n   * localization. Unset members keep their English defaults.\n   */\n  labels?: DatePickerLabels;\n  /** Form field name: the date is submitted as ISO `yyyy-mm-dd` (hidden input). */\n  name?: string;\n  /** Id of the `<form>` the value belongs to, when the picker is outside it. */\n  form?: string;\n  /**\n   * Blocks form submission while no date is selected; sets `aria-required` on the input. Like a\n   * native readonly input, a `readOnly` DatePicker does not block submission.\n   */\n  required?: boolean;\n  /** Native `autocomplete` of the input. @default 'off' */\n  autoComplete?: string;\n  /** Focus handler of the text input (the root keeps the other handlers). */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /** Blur handler of the text input. */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /** Key handler of the text input; `preventDefault()` skips the picker's own keys. */\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Key handler of the text input. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Ref to the text input; `ref` stays on the root. */\n  controlRef?: React.Ref<HTMLInputElement>;\n  /** Ref to the root element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// Every button sets its own padding and background (C-NATIVE): an app-wide `button` rule would\n// otherwise pad and fill them.\nconst ICON_BUTTON_CLASSES =\n  'absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground';\n\nconst NAV_BUTTON_CLASSES =\n  'flex h-8 w-8 items-center justify-center rounded bg-transparent p-0 text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover';\n\n// An unavailable day stays focusable in the roving grid (`aria-disabled`); the day button adds\n// `disabledStyles`, whose dimmed look lifts while the focus ring shows (opacity would dim the ring).\nconst DAY_CLASSES =\n  'flex h-8 w-8 items-center justify-center rounded bg-transparent p-0 text-caption-1 text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover data-[outside]:text-muted-foreground data-[today]:border data-[today]:border-primary data-[today]:font-semibold data-[selected]:bg-primary data-[selected]:font-semibold data-[selected]:text-primary-foreground not-disabled:not-aria-disabled:data-[selected]:hover:bg-primary-hover aria-disabled:line-through';\n\n/** The 42 grid days as 6 weeks. */\nfunction toWeeks(days: Date[]): Date[][] {\n  const weeks: Date[][] = [];\n  for (let i = 0; i < days.length; i += 7) weeks.push(days.slice(i, i + 7));\n  return weeks;\n}\n\n/**\n * A date input with a calendar dialog (APG date picker dialog).\n *\n * - **Typing**: the input accepts the default display format of `locale` (`Intl` numeric\n *   year/month/day, e.g. `03/04/2025` for `en-GB`, `04/03/2025` for `en-US`) and ISO\n *   `yyyy-mm-dd`. Text is committed on Enter, on Alt+ArrowDown (before the calendar opens) or when\n *   the field loses focus — only when it was edited, and only when it names a different day. Text\n *   that is not an available date is kept, the input is marked invalid and an error message\n *   describes it (`onInvalidInput`, reported once per edit) until the text is edited or replaced\n *   (a day picked in the calendar, the clear button, a form reset, a new day from the parent).\n * - **Calendar**: the toggle (`aria-haspopup=\"dialog\"`) or Alt+ArrowDown in the input opens a\n *   modal dialog labelled by the month heading. Focus moves to the selected day (else today, else\n *   the first available day of the month) and Tab stays inside. Arrow keys move by day/week\n *   (mirrored in RTL), PageUp/PageDown by month, Shift+PageUp/PageDown by year (the day is clamped\n *   to the month), Home/End to the start/end of the week, Enter/Space select. Escape closes and\n *   returns focus to where the calendar was opened from (the toggle, or the input after\n *   Alt+ArrowDown); a press outside closes it too. Unavailable days stay focusable\n *   (`aria-disabled`); a day focused by pointer becomes the starting point of the arrow keys. The\n *   selected day is `aria-selected` on its gridcell and `aria-pressed` on its focusable button, so\n *   the state is announced when focus lands on it; today is `aria-current=\"date\"`.\n * - The calendar closes when the picker becomes disabled or read-only (uncontrolled `open`: it\n *   stays closed when the picker is enabled again), and the text typed until then is dropped.\n * - `clearable` shows a clear button while a date is selected (not while read-only). Tab from\n *   erased text clears the value first, so focus moves on to the calendar button instead of to the\n *   clear button that disappears.\n * - Every emitted date is local midnight. The calendar opens on the month of the selected date or\n *   today, clamped into `minDate`/`maxDate`.\n * - The input (`controlRef`) receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,\n *   `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`,\n *   `autoFocus`, `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp` and the text input attributes\n *   `autoComplete`, `autoCapitalize`, `autoCorrect`, `inputMode`, `spellCheck` and\n *   `enterKeyHint`. `ref`, `className`, `style`, other `aria-*` attributes and the remaining props\n *   stay on the root `<div>`. Inside a `Field`, the input is labelled and described by it.\n * - `name`/`required` add a hidden input for native forms (ISO `yyyy-mm-dd`); the value resets\n *   with its form.\n * - The built-in button names and error texts are English; `labels` localizes them.\n * - Pass `locale` explicitly when rendering on the server (see `locale`). The calendar renders only\n *   in the browser: an open calendar (`defaultOpen`, `open`) is closed in the server HTML and opens\n *   once the picker has hydrated.\n */\nexport const DatePicker = (props: DatePickerProps) => {\n  const {\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onChange,\n    formatDate: formatDateProp,\n    parseDate: parseDateProp,\n    locale,\n    minDate,\n    maxDate,\n    disabledDates,\n    placeholder = 'Select a date',\n    disabled = false,\n    readOnly,\n    clearable = false,\n    firstDayOfWeek = 0,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    onInvalidInput,\n    labels,\n    name,\n    form,\n    required,\n    autoComplete = 'off',\n    autoCapitalize,\n    autoCorrect,\n    enterKeyHint,\n    inputMode,\n    spellCheck,\n    autoFocus,\n    tabIndex,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    'aria-errormessage': ariaErrorMessage,\n    'aria-details': ariaDetails,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    controlRef,\n    className,\n    ref,\n    ...rest\n  } = props;\n\n  if (onChange !== undefined) warnDeprecated('DatePicker', 'onChange', 'onValueChange');\n\n  const hasCustomFormat = formatDateProp !== undefined;\n  const hasCustomParse = parseDateProp !== undefined;\n  React.useEffect(() => {\n    if (hasCustomFormat && !hasCustomParse) {\n      warnOnce(\n        'DatePicker:formatDate-without-parseDate',\n        'DatePicker: `formatDate` is set without `parseDate`. Typed dates are parsed with the ' +\n          'default parser for `locale` (its numeric format or yyyy-mm-dd), which may not read ' +\n          'your format; pass `parseDate` as the inverse of `formatDate`.',\n      );\n    }\n  }, [hasCustomFormat, hasCustomParse]);\n  React.useEffect(() => {\n    if (locale !== undefined && !isValidLocaleTag(locale)) {\n      warnOnce(\n        `DatePicker:invalid-locale:${locale}`,\n        `DatePicker: \\`locale\\` \"${locale}\" is not a valid BCP 47 language tag (use hyphens, as ` +\n          'in \"en-US\"). The runtime default locale formats and parses the dates instead, so the ' +\n          'server and the browser may render different text.',\n      );\n    }\n  }, [locale]);\n\n  const [selectedDate, setSelectedDate] = useControllable<Date | null>(\n    valueProp,\n    defaultValue ?? null,\n    (next) => {\n      onValueChange?.(next);\n      onChange?.(next);\n    },\n  );\n  const interactive = !disabled && !readOnly;\n  const [openState, setOpen] = useControllable<boolean>(\n    openProp,\n    // A picker that starts disabled or read-only never shows its calendar, so it starts closed\n    // (no close to report later).\n    (defaultOpen ?? false) && interactive,\n    onOpenChange,\n  );\n  // The calendar lives in a portal, which renders only in the browser: until then (the server\n  // HTML, hydration) the picker reports it closed, so no reference names a missing element.\n  const isClient = useIsClient();\n  const isOpen = openState && interactive && isClient;\n  const openControlled = openProp !== undefined;\n\n  // A calendar hidden because the picker became disabled or read-only is closed for good\n  // (uncontrolled), so enabling the picker again does not bring it back and take focus.\n  // onOpenChange(false) reports it; a controlled `open` stays the parent's.\n  React.useEffect(() => {\n    if (!interactive && openState && !openControlled) setOpen(false);\n  }, [interactive, openState, openControlled, setOpen]);\n\n  const format = (date: Date) =>\n    formatDateProp ? formatDateProp(date) : formatLocaleDate(date, locale);\n  const parse = (text: string) =>\n    parseDateProp ? parseDateProp(text) : parseLocaleDate(text, locale);\n\n  /* ---- draft text and validation ---------------------------------- */\n\n  /** Typed text; `null` shows the formatted selected date (draft model). */\n  const [draft, setDraft] = React.useState<string | null>(null);\n  const [invalid, setInvalid] = React.useState<DatePickerInvalidReason | null>(null);\n\n  // Adjusted during render (C-HOOKS). Locking the picker (readOnly/disabled) while the user types\n  // drops the typed text and its error, so no later blur commits it (the value cannot change).\n  const [wasInteractive, setWasInteractive] = React.useState(interactive);\n  if (wasInteractive !== interactive) {\n    setWasInteractive(interactive);\n    if (!interactive) {\n      setDraft(null);\n      setInvalid(null);\n    }\n  }\n  // A selected day the parent changes replaces rejected text (commits clear it themselves), so the\n  // input never shows an error next to a valid value. Text the user is still typing stays.\n  const selectedDay = selectedDate ? formatISODate(selectedDate) : '';\n  const [seenDay, setSeenDay] = React.useState(selectedDay);\n  if (seenDay !== selectedDay) {\n    setSeenDay(selectedDay);\n    if (invalid !== null) {\n      setDraft(null);\n      setInvalid(null);\n    }\n  }\n\n  const isUnavailable = (date: Date) =>\n    !isDateInRange(date, minDate, maxDate) || !!disabledDates?.(startOfDay(date));\n\n  /** Commits a day (or `null`); nothing is emitted when it is the same day. */\n  const commitDate = (next: Date | null) => {\n    const normalized = next ? startOfDay(next) : null;\n    const unchanged = normalized ? isSameDay(normalized, selectedDate) : selectedDate === null;\n    if (!unchanged) setSelectedDate(normalized);\n    setDraft(null);\n    setInvalid(null);\n  };\n\n  /** Validates and commits the typed text; `false` when it was rejected (the text is kept). */\n  const commitDraft = (text: string): boolean => {\n    if (!text.trim()) {\n      commitDate(null);\n      return true;\n    }\n    const parsed = parse(text);\n    let reason: DatePickerInvalidReason | null = null;\n    if (!parsed || Number.isNaN(parsed.getTime())) reason = 'unparseable';\n    else if (!isDateInRange(parsed, minDate, maxDate)) reason = 'out-of-range';\n    else if (disabledDates?.(startOfDay(parsed))) reason = 'disabled';\n    if (reason || !parsed) {\n      const rejected = reason ?? 'unparseable';\n      setInvalid(rejected);\n      onInvalidInput?.(text, rejected);\n      return false;\n    }\n    commitDate(parsed);\n    return true;\n  };\n\n  /* ---- calendar view and focused day ------------------------------- */\n\n  const today = startOfDay(new Date());\n  const initialView = () => startOfMonth(clampDate(selectedDate ?? today, minDate, maxDate));\n  const [viewMonth, setViewMonth] = React.useState<Date>(initialView);\n  const [focusedDay, setFocusedDay] = React.useState<Date | null>(null);\n\n  /** Opened with Alt+ArrowDown in the input: Escape returns focus there instead of the toggle. */\n  const [openedFromInput, setOpenedFromInput] = React.useState(false);\n\n  // Every opening shows the selected (or current) month again: adjusted during render (C-HOOKS).\n  const [openSeen, setOpenSeen] = React.useState(isOpen);\n  if (openSeen !== isOpen) {\n    setOpenSeen(isOpen);\n    if (isOpen) {\n      setViewMonth(initialView());\n      setFocusedDay(null);\n    }\n  }\n  // A closed calendar forgets where it was opened from. This also drops an Alt+ArrowDown whose\n  // opening a controlled parent declined (it renders in the same update, still closed), so a later\n  // opening by the parent returns focus to the toggle, not the input.\n  if (openedFromInput && !isOpen) setOpenedFromInput(false);\n\n  const weeks = React.useMemo(\n    () => toWeeks(getCalendarDays(viewMonth, firstDayOfWeek)),\n    [viewMonth, firstDayOfWeek],\n  );\n\n  // The focused day is derived: the day moved to while it is shown (a pointer-focused day of the\n  // previous/next month counts too), else the selected day of the month, else today (clamped into\n  // the range), else the first available day of the month.\n  const inView = (date: Date | null | undefined): date is Date =>\n    !!date && isSameMonth(date, viewMonth);\n  const inGrid = (date: Date | null | undefined): date is Date =>\n    !!date && date >= weeks[0][0] && date <= weeks[weeks.length - 1][6];\n  const clampedToday = clampDate(today, minDate, maxDate);\n  const firstInRange = clampDate(viewMonth, minDate, maxDate);\n  const focusTarget = inGrid(focusedDay)\n    ? focusedDay\n    : inView(selectedDate)\n      ? startOfDay(selectedDate)\n      : inView(clampedToday)\n        ? clampedToday\n        : inView(firstInRange)\n          ? firstInRange\n          : viewMonth;\n  const focusIso = formatISODate(focusTarget);\n\n  const moveFocus = (next: Date) => {\n    const target = clampDate(next, minDate, maxDate);\n    setFocusedDay(target);\n    if (!isSameMonth(target, viewMonth)) setViewMonth(startOfMonth(target));\n  };\n\n  const navigateMonth = (delta: number) => {\n    const nextView = addMonths(viewMonth, delta);\n    const moved = clampDate(addMonths(focusTarget, delta), minDate, maxDate);\n    setViewMonth(nextView);\n    // From a day of the previous/next month the moved day may fall outside the new month: the\n    // focused day is then derived again (selected, today or the first day of the month).\n    setFocusedDay(isSameMonth(moved, nextView) ? moved : null);\n  };\n\n  /** Pointer (or assistive technology) focus on a day makes it the roving day; the month stays. */\n  const handleDayFocus = (day: Date) => {\n    if (!isSameDay(day, focusTarget)) setFocusedDay(day);\n  };\n\n  const previousDisabled = !!minDate && addDays(viewMonth, -1) < startOfDay(minDate);\n  const nextDisabled = !!maxDate && addMonths(viewMonth, 1) > startOfDay(maxDate);\n\n  const weekdays = React.useMemo(\n    () => getWeekdayNames(locale, firstDayOfWeek),\n    [locale, firstDayOfWeek],\n  );\n\n  /* ---- elements, popup primitives ---------------------------------- */\n\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\n  const toggleRef = React.useRef<HTMLButtonElement | null>(null);\n  const gridRef = React.useRef<HTMLTableElement | null>(null);\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  /** Where focus goes when the calendar closes (`null`: back to the toggle). */\n  const restoreTargetRef = React.useRef<HTMLElement | null>(null);\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n  const inputRefs = useMergedRefs<HTMLInputElement>(controlRef, inputRef);\n\n  const dialogId = useId('datepicker-dialog');\n  const headingId = useId('datepicker-heading');\n  const gridId = useId('datepicker-grid');\n  const errorId = useId('datepicker-error');\n\n  const close = (restoreTo: HTMLElement | null) => {\n    restoreTargetRef.current = restoreTo;\n    setOpen(false);\n  };\n\n  const { layerId } = useDismiss({\n    open: isOpen,\n    onDismiss: (reason, event) => {\n      // An outside press on another control hands focus to it (the trap held it until now);\n      // otherwise focus returns to where the calendar was opened from.\n      const target =\n        reason === 'outside-press' && event.target instanceof Element\n          ? event.target.closest<HTMLElement>(FOCUSABLE_SELECTOR)\n          : null;\n      close(target ?? (openedFromInput ? inputRef.current : null));\n    },\n    refs: [surfaceRef, toggleRef],\n    anchorRef: toggleRef,\n    kind: 'modal',\n  });\n\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: isOpen,\n    side: 'bottom',\n    align: 'start',\n  });\n  const surfaceRefs = useMergedRefs<HTMLDivElement>(surfaceRef, setSurface, setFloating);\n\n  useFocusTrap(surface, {\n    enabled: isOpen,\n    layerId,\n    initialFocus: () => gridRef.current?.querySelector<HTMLElement>('button[tabindex=\"0\"]') ?? null,\n  });\n\n  useRestoreFocus({\n    enabled: isOpen,\n    container: surface,\n    triggerRef: toggleRef,\n    finalFocusRef: restoreTargetRef,\n    onlyIfFocusInside: true,\n  });\n\n  // A new opening starts without a restore target (the toggle returns focus to itself, Escape to\n  // where the calendar was opened from).\n  React.useLayoutEffect(() => {\n    if (isOpen) restoreTargetRef.current = null;\n  }, [isOpen]);\n\n  // Roving focus: while the grid holds focus, focus follows the focused day.\n  React.useLayoutEffect(() => {\n    const grid = gridRef.current;\n    if (!grid) return;\n    const active = grid.ownerDocument.activeElement;\n    if (!active || !grid.contains(active)) return;\n    const button = grid.querySelector<HTMLElement>(`button[data-date=\"${focusIso}\"]`);\n    if (button && button !== active) button.focus();\n  }, [focusIso]);\n\n  /* ---- forms and Field --------------------------------------------- */\n\n  const field = useFieldContext();\n  const isRequired = required ?? field?.required ?? false;\n  // Like a native readonly input, a read-only picker is barred from constraint validation (the\n  // user could not fix it); its value is still submitted.\n  const validates = isRequired && !readOnly;\n  const showOwnError = invalid !== null && !field?.hasErrorMessage;\n  const fieldProps = useFieldControl({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': joinIds(ariaDescribedBy, showOwnError ? errorId : undefined),\n    'aria-invalid': invalid !== null ? true : ariaInvalid,\n    // An explicit `required={false}` wins over a required Field, so aria-required matches\n    // `isRequired`.\n    'aria-required': ariaRequired ?? required,\n  });\n  const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n\n  // Through the commit path: the default is emitted as local midnight, and only when it names\n  // another day; the typed text and its error are dropped.\n  useFormReset(inputRef, () => commitDate(defaultValue ?? null), form);\n\n  // Read-only pickers offer no clear action (the value cannot change).\n  const showClear = clearable && !readOnly && selectedDate !== null;\n\n  /* ---- handlers ---------------------------------------------------- */\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (!interactive) return;\n    setDraft(event.target.value);\n    setInvalid(null);\n  };\n\n  const handleInputKeyDown = composeEventHandlers(\n    onKeyDown,\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      // Keys that belong to an IME composition (its confirming Enter) are left to the IME.\n      if (!interactive || event.nativeEvent.isComposing) return;\n      if (event.key === 'Enter' && draft !== null) {\n        // An edit is committed instead of submitting the form; untouched text lets Enter submit.\n        event.preventDefault();\n        commitDraft(draft);\n      } else if (\n        event.key === 'Tab' &&\n        !event.shiftKey &&\n        showClear &&\n        draft !== null &&\n        !draft.trim()\n      ) {\n        // Erased text clears the value, and with it the clear button, the next tab stop. It is\n        // settled before Tab moves focus (the blur would settle it while focus moves to that\n        // button), so focus moves on to the calendar button instead of dropping to <body> with\n        // the clear button (C-DISABLED).\n        flushSync(() => commitDraft(draft));\n      } else if (event.key === 'ArrowDown' && event.altKey && !isOpen) {\n        event.preventDefault();\n        // The edit is committed first, so the calendar opens on the typed month; rejected text is\n        // kept and reported once (the blur that follows does not report it again).\n        if (draft !== null && invalid === null) commitDraft(draft);\n        setOpenedFromInput(true);\n        setOpen(true);\n      }\n    },\n  );\n\n  const handleInputBlur = composeEventHandlers(onBlur, () => {\n    // Text already rejected (Enter, Alt+ArrowDown) is kept without being reported again.\n    if (interactive && draft !== null && invalid === null) commitDraft(draft);\n  });\n\n  const handleToggle = () => {\n    if (!interactive) return;\n    restoreTargetRef.current = null;\n    setOpenedFromInput(false);\n    setOpen(!isOpen);\n  };\n\n  const handleClear = () => {\n    if (!interactive) return;\n    commitDate(null);\n    inputRef.current?.focus();\n  };\n\n  // The clear button keeps focus on the input: its blur would otherwise commit (or reject) the\n  // edited text just before the clear, emitting twice for one click.\n  const handleClearMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n  };\n\n  const selectDate = (day: Date) => {\n    if (!interactive || isUnavailable(day)) return;\n    commitDate(day);\n    close(inputRef.current);\n  };\n\n  const handleDialogKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Escape' || event.defaultPrevented || event.nativeEvent.isComposing) return;\n    // Consumed here, so enclosing layers (a Dialog around the picker) ignore it.\n    event.preventDefault();\n    close(openedFromInput ? inputRef.current : null);\n  };\n\n  const handleGridKeyDown = (event: React.KeyboardEvent<HTMLTableElement>) => {\n    if (event.altKey || event.ctrlKey || event.metaKey) return;\n    const weekOffset = (focusTarget.getDay() - firstDayOfWeek + 7) % 7;\n    let next: Date;\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowRight': {\n        const intent = getArrowIntent(event.key, {\n          orientation: 'horizontal',\n          dir: getDirection(event.currentTarget),\n        });\n        next = addDays(focusTarget, intent === 'next' ? 1 : -1);\n        break;\n      }\n      case 'ArrowDown':\n        next = addDays(focusTarget, 7);\n        break;\n      case 'ArrowUp':\n        next = addDays(focusTarget, -7);\n        break;\n      case 'PageDown':\n        next = addMonths(focusTarget, event.shiftKey ? 12 : 1);\n        break;\n      case 'PageUp':\n        next = addMonths(focusTarget, event.shiftKey ? -12 : -1);\n        break;\n      case 'Home':\n        next = addDays(focusTarget, -weekOffset);\n        break;\n      case 'End':\n        next = addDays(focusTarget, 6 - weekOffset);\n        break;\n      default:\n        // Enter and Space activate the focused day button natively (click).\n        return;\n    }\n    event.preventDefault();\n    moveFocus(next);\n  };\n\n  /* ---- render ------------------------------------------------------ */\n\n  const inputText = draft ?? (selectedDate ? format(selectedDate) : '');\n\n  let errorMessage = '';\n  if (invalid === 'unparseable') {\n    errorMessage = (labels?.invalidDate ?? defaultInvalidDateLabel)(\n      hasCustomParse ? undefined : getLocaleDateFormat(locale).pattern,\n    );\n  } else if (invalid === 'out-of-range' && (minDate || maxDate)) {\n    errorMessage = (labels?.outOfRange ?? defaultOutOfRangeLabel)(\n      minDate ? format(startOfDay(minDate)) : undefined,\n      maxDate ? format(startOfDay(maxDate)) : undefined,\n    );\n  } else if (invalid === 'disabled') {\n    errorMessage = labels?.unavailableDate ?? 'This date is not available.';\n  }\n\n  return (\n    <div {...rest} ref={ref} className={cn('relative inline-flex flex-col', className)}>\n      <div ref={setReference} className=\"relative flex items-center\">\n        <input\n          ref={inputRefs}\n          type=\"text\"\n          {...fieldProps}\n          aria-errormessage={ariaErrorMessage}\n          aria-details={ariaDetails}\n          value={inputText}\n          onChange={handleInputChange}\n          onFocus={onFocus}\n          onBlur={handleInputBlur}\n          onKeyDown={handleInputKeyDown}\n          onKeyUp={onKeyUp}\n          placeholder={placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          autoComplete={autoComplete}\n          autoCapitalize={autoCapitalize}\n          autoCorrect={autoCorrect}\n          enterKeyHint={enterKeyHint}\n          inputMode={inputMode}\n          spellCheck={spellCheck}\n          autoFocus={autoFocus}\n          tabIndex={tabIndex}\n          className={cn(\n            inputBase,\n            'border-b-stroke-accessible',\n            inputFocus,\n            disabledStyles,\n            invalidLook && inputInvalid,\n            showClear ? 'pe-14' : 'pe-8',\n          )}\n        />\n        {showClear && (\n          <button\n            type=\"button\"\n            aria-label={labels?.clear ?? 'Clear date'}\n            disabled={disabled}\n            onMouseDown={handleClearMouseDown}\n            onClick={handleClear}\n            className={cn(ICON_BUTTON_CLASSES, 'end-7', focusRing, disabledStyles)}\n          >\n            <DismissIcon />\n          </button>\n        )}\n        <button\n          ref={toggleRef}\n          type=\"button\"\n          aria-label={labels?.openCalendar ?? 'Open calendar'}\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          aria-controls={isOpen ? dialogId : undefined}\n          disabled={disabled || readOnly}\n          onClick={handleToggle}\n          className={cn(ICON_BUTTON_CLASSES, 'end-1', focusRing, disabledStyles)}\n        >\n          <CalendarIcon />\n        </button>\n      </div>\n      {showOwnError && (\n        <p id={errorId} role=\"alert\" className=\"mt-1 text-caption-1 text-error\">\n          {errorMessage}\n        </p>\n      )}\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={selectedDate ? formatISODate(selectedDate) : ''}\n        type=\"text\"\n        required={validates}\n        onInvalid={() => inputRef.current?.focus()}\n      />\n      {isOpen && (\n        <Portal layerId={layerId}>\n          <div\n            ref={surfaceRefs}\n            id={dialogId}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={headingId}\n            {...floatingProps}\n            data-state=\"open\"\n            onKeyDown={handleDialogKeyDown}\n            className=\"rounded-md border border-border bg-background p-3 text-foreground shadow-16\"\n          >\n            <div className=\"mb-2 flex items-center justify-between gap-2\">\n              <button\n                type=\"button\"\n                aria-label={labels?.previousMonth ?? 'Previous month'}\n                aria-controls={gridId}\n                {...focusableDisabledProps(previousDisabled)}\n                onClick={preventIfDisabled(previousDisabled, () => navigateMonth(-1))}\n                className={cn(NAV_BUTTON_CLASSES, focusRing, disabledStyles)}\n              >\n                <ChevronLeftIcon className=\"wave-rtl:-scale-x-100\" />\n              </button>\n              <h2 id={headingId} aria-live=\"polite\" className=\"text-body-1 font-semibold\">\n                {formatMonthYear(viewMonth, locale)}\n              </h2>\n              <button\n                type=\"button\"\n                aria-label={labels?.nextMonth ?? 'Next month'}\n                aria-controls={gridId}\n                {...focusableDisabledProps(nextDisabled)}\n                onClick={preventIfDisabled(nextDisabled, () => navigateMonth(1))}\n                className={cn(NAV_BUTTON_CLASSES, focusRing, disabledStyles)}\n              >\n                <ChevronRightIcon className=\"wave-rtl:-scale-x-100\" />\n              </button>\n            </div>\n            <table\n              ref={gridRef}\n              id={gridId}\n              role=\"grid\"\n              aria-labelledby={headingId}\n              onKeyDown={handleGridKeyDown}\n              className=\"border-collapse\"\n            >\n              <thead>\n                <tr>\n                  {weekdays.map((weekday) => (\n                    <th\n                      key={weekday.long}\n                      scope=\"col\"\n                      abbr={weekday.long}\n                      aria-label={weekday.long}\n                      className=\"h-8 w-8 text-center text-caption-1 font-normal text-muted-foreground\"\n                    >\n                      <span aria-hidden=\"true\">{weekday.short}</span>\n                      <span className=\"sr-only\">{weekday.long}</span>\n                    </th>\n                  ))}\n                </tr>\n              </thead>\n              <tbody>\n                {weeks.map((week, row) => (\n                  // Rows and cells are keyed by position, so the focused button survives a\n                  // month change and focus stays in the grid while it moves to the new day.\n                  <tr key={row}>\n                    {week.map((day, column) => {\n                      const iso = formatISODate(day);\n                      const isSelected = isSameDay(day, selectedDate);\n                      const isToday = isSameDay(day, today);\n                      const isFocused = iso === focusIso;\n                      const unavailable = isUnavailable(day);\n                      return (\n                        <td key={column} role=\"gridcell\" aria-selected={isSelected} className=\"p-0\">\n                          {/* Focus rests on the button, and screen readers do not reliably\n                              announce the gridcell's aria-selected from inside it: the selected\n                              day's button is also pressed. */}\n                          <button\n                            type=\"button\"\n                            tabIndex={isFocused ? 0 : -1}\n                            aria-label={formatDayLabel(day, locale)}\n                            aria-pressed={isSelected || undefined}\n                            aria-current={isToday ? 'date' : undefined}\n                            {...focusableDisabledProps(unavailable)}\n                            data-date={iso}\n                            data-selected={isSelected ? '' : undefined}\n                            data-today={isToday ? '' : undefined}\n                            data-outside={isSameMonth(day, viewMonth) ? undefined : ''}\n                            onFocus={() => handleDayFocus(day)}\n                            onClick={() => selectDate(day)}\n                            className={cn(\n                              DAY_CLASSES,\n                              focusRing,\n                              disabledStyles,\n                              isSelected && forcedColors.selectedLeaf,\n                            )}\n                          >\n                            {formatDayNumber(day, locale)}\n                          </button>\n                        </td>\n                      );\n                    })}\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        </Portal>\n      )}\n    </div>\n  );\n};\n\nDatePicker.displayName = 'DatePicker';\n"],"mappings":"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"}

package/dist/components/input/Dropdown.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),ee=require("../../lib/dev.cjs"),n=require("../../lib/composeEventHandlers.cjs"),r=require("../../hooks/useControllable.cjs"),i=require("../../hooks/useMergedRefs.cjs"),a=require("../../hooks/useFieldControl.cjs"),o=require("../../lib/styles.cjs"),s=require("../../lib/icons.cjs"),c=require("./Input.cjs"),l=require("../../hooks/useFormReset.cjs"),te=require("../internal/HiddenInput.cjs"),u=require("../../hooks/useListbox.cjs"),ne=require("./pickerStyles.cjs"),d=require("./Option.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=e=>{let{value:m,defaultValue:h,onValueChange:g,onOptionSelect:_,open:v,defaultOpen:y,onOpenChange:re,placeholder:ie=`Select an option`,disabled:b=!1,name:ae,form:x,required:S,clearable:oe=!1,labels:se,autoFocus:ce,tabIndex:le,id:ue,"aria-label":de,"aria-labelledby":fe,"aria-describedby":C,"aria-invalid":w,"aria-required":T,"aria-errormessage":E,"aria-details":D,onFocus:O,onBlur:k,onKeyDown:A,onKeyUp:j,controlRef:M,className:N,children:P,ref:F,...I}=e;_!==void 0&&ee.warnDeprecated(`Dropdown`,`onOptionSelect`,`onValueChange`);let L=a.useFieldContext(),R=S??L?.required??!1,z=a.useFieldControl({id:ue,"aria-label":de,"aria-labelledby":fe,"aria-describedby":C,"aria-invalid":w,"aria-required":T??S}),B=c.isInvalidLook(!1,z[`aria-invalid`]),[V,H]=r.useControllable(m,h??``,g),[U,W]=r.useControllable(v,(y??!1)&&!b,re),G=U&&!b,K=b&&U;f.useEffect(()=>{K&&W(!1)},[K,W]);let q=f.useRef(null),J=f.useRef(null),pe=f.useMemo(()=>u.collectOptionLabels(P),[P]),Y=u.useListbox({open:G,onOpenChange:e=>W(e),mode:`select-only`,selectedValues:V?[V]:[],onSelect:e=>{H(e),_?.(e)},idPrefix:`dropdown-listbox`}),X=G&&Y.items.length>0,{layerId:me,setReference:he,surfaceRef:ge,floatingProps:_e}=d.useListboxPopup({open:G,surfaceOpen:X,onDismiss:()=>W(!1),rootRef:q,anchorRef:J}),ve=i.useMergedRefs(q,F),Z=i.useMergedRefs(J,M,he);l.useFormReset(J,()=>H(h??``),x);let Q=V?Y.getItem(V)?.label??pe.get(V)??``:``,ye=e=>{if(e.key===`Escape`&&G&&!X&&!e.nativeEvent.isComposing){W(!1);return}Y.onKeyDown(e)},be=()=>{H(``),W(!1),J.current?.focus()},$=oe&&V!==``,xe=z[`aria-label`]===void 0?z[`aria-labelledby`]??L?.labelId:z[`aria-labelledby`];return(0,p.jsxs)(`div`,{...I,ref:ve,className:t.cn(`relative inline-flex flex-col`,N),children:[(0,p.jsxs)(`div`,{className:`relative flex items-center`,children:[(0,p.jsxs)(`button`,{type:`button`,...z,...Y.getComboboxProps(),"aria-expanded":X,"aria-errormessage":E,"aria-details":D,ref:Z,disabled:b,autoFocus:ce,tabIndex:le,onClick:()=>W(e=>!e),onKeyDown:n.composeEventHandlers(A,ye),onKeyUp:n.composeEventHandlers(j,Y.onKeyUp),onFocus:O,onBlur:k,className:t.cn(`relative flex h-8 w-full items-center justify-between rounded border border-input border-b-stroke-accessible bg-background px-3 py-0 text-start text-body-1 text-foreground`,ne.pickerEndPadding($?2:1),o.inputFocus,o.disabledStyles,B&&`border-destructive focus:border-b-destructive`),children:[(0,p.jsx)(`span`,{className:t.cn(`truncate`,!Q&&`text-muted-foreground`),children:Q||ie}),(0,p.jsx)(s.ChevronDownIcon,{className:t.cn(`absolute end-3 transition-transform motion-reduce:transition-none`,X&&`rotate-180`)})]}),$&&(0,p.jsx)(`button`,{type:`button`,"aria-label":se?.clear??`Clear selection`,disabled:b,onMouseDown:e=>e.preventDefault(),onClick:be,className:t.cn(`absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground`,`end-7`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`,`disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100`),children:(0,p.jsx)(s.DismissIcon,{})})]}),(0,p.jsx)(d.ListboxSurface,{listbox:Y,layerId:me,surfaceRef:ge,floatingProps:_e,open:G,expanded:X,"aria-label":z[`aria-label`],"aria-labelledby":xe,children:P}),(0,p.jsx)(te.HiddenInput,{name:ae,form:x,disabled:b,value:V,type:`text`,required:R,onInvalid:()=>J.current?.focus()})]})};m.displayName=`Dropdown`;var h=d.Option,g=d.OptionGroup,_=Object.assign(m,{Option:d.Option,OptionGroup:d.OptionGroup});exports.Dropdown=_,exports.DropdownOption=h,exports.DropdownOptionGroup=g;
+//# sourceMappingURL=Dropdown.cjs.map

package/dist/components/input/Dropdown.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.cjs","names":["useFieldContext","useFieldControl","isInvalidLook","useControllable","React","collectOptionLabels","useListbox","useListboxPopup","useMergedRefs","cn","composeEventHandlers","pickerEndPadding","inputFocus","disabledStyles","ChevronDownIcon","DismissIcon","ListboxSurface","HiddenInput","Option","OptionGroup","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_useControllable","require_useMergedRefs","require_useFieldControl","require_styles","require_icons","require_Input","require_useFormReset","require_HiddenInput","require_useListbox","require_pickerStyles","require_Option","react","react_jsx_runtime","DropdownRoot","valueProp","openProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onOptionSelect","field","isRequired","required","fieldProps","invalidLook","value","setValue","defaultValue","onValueChange","openState","setOpen","defaultOpen","disabled","onOpenChange","open","lockedOpen","rootRef","buttonRef","optionLabels","children","listbox","next","expanded","rootMergedRef","ref","buttonMergedRef","controlRef","setReference","form","displayText","handleKeyDown","event","handleClear","showClear","clearable","listLabelledBy","className","current","onKeyDown","onKeyUp","placeholder","labels","DropdownOption","DropdownOptionGroup","Dropdown"],"sources":["../../../src/components/input/Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated } from '../../lib/dev';\nimport { ChevronDownIcon, DismissIcon } from '../../lib/icons';\nimport { disabledStyles, focusRing, inputFocus, inputInvalid } from '../../lib/styles';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { collectOptionLabels, useListbox } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { isInvalidLook } from './Input';\nimport { ListboxSurface, Option, OptionGroup, useListboxPopup } from './Option';\nimport { PICKER_ICON_BUTTON_CLASSES, pickerEndPadding } from './pickerStyles';\nimport type { RoutedHandlers } from './routedHandlers';\n\n/* ------------------------------------------------------------------ */\n/*  Dropdown                                                          */\n/* ------------------------------------------------------------------ */\n\n/**\n * The Dropdown's built-in texts, for localization. Each member is optional and falls back to its\n * English default.\n */\nexport interface DropdownLabels {\n  /** Name of the clear button (`clearable`).\n   * @default 'Clear selection'\n   */\n  clear?: string;\n}\n\n/** Properties for the Dropdown component. */\nexport interface DropdownProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | RoutedHandlers\n> {\n  /** Controlled selected value (`''` for none). */\n  value?: string;\n  /**\n   * Initial selected value for uncontrolled usage.\n   * @default ''\n   */\n  defaultValue?: string;\n  /** Called with the new value when a different option is selected. */\n  onValueChange?: (value: string) => void;\n  /**\n   * Called on every option activation, also when the current option is selected again.\n   * @deprecated Use `onValueChange`.\n   */\n  onOptionSelect?: (value: string) => void;\n  /**\n   * Controlled open state of the listbox. The list renders only in the browser: an open dropdown\n   * is closed in the server HTML and opens once it has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Initial open state for uncontrolled usage. A dropdown that starts disabled starts closed. The\n   * list renders only in the browser: it is closed in the server HTML and opens once the dropdown\n   * has hydrated.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Called when the listbox opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Placeholder text shown when no value is selected. It is not an accessible name: label the\n   * Dropdown with a `Field`, `aria-label` or `aria-labelledby`.\n   * @default 'Select an option'\n   */\n  placeholder?: string;\n  /**\n   * Whether the dropdown is disabled and non-interactive. Turning it on while the listbox is open\n   * closes it (`onOpenChange(false)`).\n   * @default false\n   */\n  disabled?: boolean;\n  /** Name of the value in form submissions (renders a hidden input). */\n  name?: string;\n  /** Id of the form the value belongs to, when the Dropdown is outside it. */\n  form?: string;\n  /** A value is required to submit the form (native constraint validation). */\n  required?: boolean;\n  /**\n   * Shows a clear button while a value is selected (shown disabled while `disabled`). It clears\n   * the value, closes the list and moves focus to the combobox button. It is a tab stop after it.\n   * @default false\n   */\n  clearable?: boolean;\n  /** The name of the clear button, for localization. Unset members keep their English defaults. */\n  labels?: DropdownLabels;\n  /** Called when the `<button role=\"combobox\">` receives focus (the root keeps other handlers). */\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Called when the `<button role=\"combobox\">` loses focus. */\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n  /**\n   * Called on a key press on the `<button role=\"combobox\">`, before the built-in listbox keys;\n   * `event.preventDefault()` skips them.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Called when a key is released on the `<button role=\"combobox\">`. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Ref to the `<button role=\"combobox\">` (the focusable element). */\n  controlRef?: React.Ref<HTMLButtonElement>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst DropdownRoot = (props: DropdownProps) => {\n  const {\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onOptionSelect,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    placeholder = 'Select an option',\n    disabled = false,\n    name,\n    form,\n    required,\n    clearable = false,\n    labels,\n    autoFocus,\n    tabIndex,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    'aria-errormessage': ariaErrorMessage,\n    'aria-details': ariaDetails,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    controlRef,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  if (onOptionSelect !== undefined) warnDeprecated('Dropdown', 'onOptionSelect', 'onValueChange');\n\n  const field = useFieldContext();\n  const isRequired = required ?? field?.required ?? false;\n  const fieldProps = useFieldControl({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    // An explicit `required={false}` wins over a required Field, so aria-required matches\n    // `isRequired`.\n    'aria-required': ariaRequired ?? required,\n  });\n  // The error look follows the resolved state: the consumer's `aria-invalid` or the Field's.\n  const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n\n  const [value, setValue] = useControllable(valueProp, defaultValue ?? '', onValueChange);\n  // A dropdown that starts disabled never shows its list, so it starts closed (no close to report\n  // later).\n  const [openState, setOpen] = useControllable(\n    openProp,\n    (defaultOpen ?? false) && !disabled,\n    onOpenChange,\n  );\n  const open = openState && !disabled;\n  // Disabling also closes the list itself, not only the derived `open`, so enabling it again does\n  // not reopen it without a user action. The close is reported through onOpenChange (a consumer\n  // callback from an effect, C-HOOKS); a controlled `open` that stays true is not shown meanwhile.\n  const lockedOpen = disabled && openState;\n  React.useEffect(() => {\n    if (lockedOpen) setOpen(false);\n  }, [lockedOpen, setOpen]);\n\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const buttonRef = React.useRef<HTMLButtonElement | null>(null);\n\n  const optionLabels = React.useMemo(() => collectOptionLabels(children), [children]);\n\n  const listbox = useListbox({\n    open,\n    onOpenChange: (next) => setOpen(next),\n    mode: 'select-only',\n    selectedValues: value ? [value] : [],\n    onSelect: (next) => {\n      setValue(next);\n      onOptionSelect?.(next);\n    },\n    idPrefix: 'dropdown-listbox',\n  });\n\n  const expanded = open && listbox.items.length > 0;\n  const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n    open,\n    surfaceOpen: expanded,\n    onDismiss: () => setOpen(false),\n    rootRef,\n    anchorRef: buttonRef,\n  });\n\n  const rootMergedRef = useMergedRefs<HTMLDivElement>(rootRef, ref);\n  const buttonMergedRef = useMergedRefs<HTMLButtonElement>(buttonRef, controlRef, setReference);\n\n  useFormReset(buttonRef, () => setValue(defaultValue ?? ''), form);\n\n  const displayText = value ? (listbox.getItem(value)?.label ?? optionLabels.get(value) ?? '') : '';\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Escape' && open && !expanded && !event.nativeEvent.isComposing) {\n      // Open with nothing shown (no options): close, but leave Escape to an enclosing layer\n      // (overlays#1) instead of consuming it for an invisible list.\n      setOpen(false);\n      return;\n    }\n    listbox.onKeyDown(event);\n  };\n\n  // The button disappears with the value, so focus moves to the combobox explicitly (C-DISABLED).\n  const handleClear = () => {\n    setValue('');\n    setOpen(false);\n    buttonRef.current?.focus();\n  };\n\n  const showClear = clearable && value !== '';\n\n  const listLabelledBy =\n    fieldProps['aria-label'] === undefined\n      ? (fieldProps['aria-labelledby'] ?? field?.labelId)\n      : fieldProps['aria-labelledby'];\n\n  return (\n    <div {...rest} ref={rootMergedRef} className={cn('relative inline-flex flex-col', className)}>\n      <div className=\"relative flex items-center\">\n        <button\n          type=\"button\"\n          {...fieldProps}\n          {...listbox.getComboboxProps()}\n          aria-expanded={expanded}\n          aria-errormessage={ariaErrorMessage}\n          aria-details={ariaDetails}\n          ref={buttonMergedRef}\n          disabled={disabled}\n          autoFocus={autoFocus}\n          tabIndex={tabIndex}\n          onClick={() => setOpen((current) => !current)}\n          onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n          onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          className={cn(\n            // Every padding is set here (C-NATIVE), not left to an app-wide `button` rule. The end\n            // padding keeps the text clear of the chevron (and of the clear button while it shows).\n            'relative flex h-8 w-full items-center justify-between rounded border border-input border-b-stroke-accessible bg-background px-3 py-0 text-start text-body-1 text-foreground',\n            pickerEndPadding(showClear ? 2 : 1),\n            inputFocus,\n            disabledStyles,\n            invalidLook && inputInvalid,\n          )}\n        >\n          <span className={cn('truncate', !displayText && 'text-muted-foreground')}>\n            {displayText || placeholder}\n          </span>\n          <ChevronDownIcon\n            className={cn(\n              'absolute end-3 transition-transform motion-reduce:transition-none',\n              expanded && 'rotate-180',\n            )}\n          />\n        </button>\n        {showClear && (\n          <button\n            type=\"button\"\n            aria-label={labels?.clear ?? 'Clear selection'}\n            disabled={disabled}\n            // Keeps focus on the combobox while the pointer clears it.\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={handleClear}\n            className={cn(PICKER_ICON_BUTTON_CLASSES, 'end-7', focusRing, disabledStyles)}\n          >\n            <DismissIcon />\n          </button>\n        )}\n      </div>\n      <ListboxSurface\n        listbox={listbox}\n        layerId={layerId}\n        surfaceRef={surfaceRef}\n        floatingProps={floatingProps}\n        open={open}\n        expanded={expanded}\n        aria-label={fieldProps['aria-label']}\n        aria-labelledby={listLabelledBy}\n      >\n        {children}\n      </ListboxSurface>\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={value}\n        type=\"text\"\n        required={isRequired}\n        onInvalid={() => buttonRef.current?.focus()}\n      />\n    </div>\n  );\n};\nDropdownRoot.displayName = 'Dropdown';\n\n/** Flat name of `Dropdown.Option` for React Server Components. */\nexport const DropdownOption = Option;\n/** Flat name of `Dropdown.OptionGroup` for React Server Components. */\nexport const DropdownOptionGroup = OptionGroup;\n\n/**\n * A select-only combobox (APG): a button that opens a listbox of `Option`s. Enter, Space,\n * ArrowDown/ArrowUp, Home/End and typing a character open it and move the highlight\n * (`aria-activedescendant`); Enter/Space select, Tab selects the highlighted option and moves on,\n * Escape closes. `clearable` adds a clear button, a tab stop after the combobox button; both sit\n * in a wrapper `<div>` inside the root.\n *\n * The `<button>` receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,\n * `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`, `autoFocus`\n * and `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp`. `ref`, `className`, `style`, other `aria-*`\n * attributes and the remaining props stay on the root `<div>`. Inside a `Field` the button is\n * labelled and described by it — otherwise give it an `aria-label`. It shows the error look\n * whenever it ends up `aria-invalid` (its own `aria-invalid` or a `Field` error). With\n * `name`/`required` the value takes part in form submission, validation and reset. The open\n * listbox renders in a portal; while closed it stays in the DOM, hidden.\n *\n * Sub-components: `Dropdown.Option`, `Dropdown.OptionGroup`. React Server Components import the\n * flat names `DropdownOption` / `DropdownOptionGroup` (dotted access needs a client file).\n */\nexport const Dropdown = /* @__PURE__ */ Object.assign(DropdownRoot, {\n  Option,\n  OptionGroup,\n});\n"],"mappings":"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"}