@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/input/DatePicker.mjs

@@ -2,144 +2,147 @@
 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 { datePickerClassNames as i } from "../../lib/classNames.mjs";
+import { useControllable as a } from "../../hooks/useControllable.mjs";
+import { useId as o } 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 { focusableDisabledProps as s, 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";
+import { disabledStyles as de, focusRing as fe, forcedColors as pe, inputAppearanceClasses as me, inputFocus as he, inputHeightClasses as ge, inputPaddingClasses as _e, inputTextClasses as ve } from "../../lib/styles.mjs";
+import { CalendarIcon as ye, ChevronLeftIcon as be, ChevronRightIcon as xe, DismissIcon as Se } from "../../lib/icons.mjs";
+import { useInputLook as Ce } from "./inputLook.mjs";
+import { isInvalidLook as we } from "./Input.mjs";
+import { useFormReset as Te } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as Ee } from "../internal/HiddenInput.mjs";
+import { pickerButtonOffset as De, pickerEndPadding as Oe, pickerGlyphSize as ke, pickerIconButtonClasses as Ae } from "./pickerStyles.mjs";
+import { usePopupPosition as je } from "../../hooks/usePopupPosition.mjs";
+import { addDays as c, addMonths as l, clampDate as u, formatDate as Me, formatDayLabel as Ne, formatDayNumber as Pe, formatISODate as d, formatMonthYear as Fe, getCalendarDays as Ie, getLocaleDateFormat as Le, getWeekdayNames as Re, isDateInRange as ze, isSameDay as f, isSameMonth as p, isValidLocaleTag as Be, parseDate as Ve, startOfDay as m, startOfMonth as He } from "./dateUtils.mjs";
+import { useFocusTrap as Ue } from "../../hooks/useFocusTrap.mjs";
+import { useRestoreFocus as We } from "../../hooks/useRestoreFocus.mjs";
+import * as h from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { flushSync as Ge } 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) {
+var Ke = (e) => e ? `Enter a date in the format ${e}.` : "Enter a valid date.", qe = (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}.`, Je = "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", Ye = "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 Xe(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);
+var Ze = (Ze) => {
+	let { value: Qe, defaultValue: $e, onValueChange: et, onChange: tt, formatDate: v, parseDate: y, locale: b, minDate: x, maxDate: S, disabledDates: nt, placeholder: rt = "Select a date", disabled: C = !1, size: it, appearance: at, readOnly: w, clearable: ot = !1, firstDayOfWeek: T = 0, open: st, defaultOpen: ct, onOpenChange: lt, onInvalidInput: ut, labels: E, name: dt, form: ft, required: pt, autoComplete: mt = "off", autoCapitalize: ht, autoCorrect: gt, enterKeyHint: _t, inputMode: vt, spellCheck: yt, autoFocus: bt, tabIndex: xt, id: St, "aria-label": Ct, "aria-labelledby": wt, "aria-describedby": Tt, "aria-invalid": Et, "aria-required": Dt, "aria-errormessage": Ot, "aria-details": kt, onFocus: At, onBlur: jt, onKeyDown: Mt, onKeyUp: Nt, controlRef: Pt, className: Ft, ref: It, ...Lt } = Ze;
+	tt !== void 0 && t("DatePicker", "onChange", "onValueChange");
+	let { size: D, appearance: O } = Ce(it, at), Rt = v !== void 0, k = y !== void 0;
+	h.useEffect(() => {
+		Rt && !k && 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`.");
+	}, [Rt, k]), h.useEffect(() => {
+		b !== void 0 && !Be(b) && n(`DatePicker:invalid-locale:${b}`, `DatePicker: \`locale\` "${b}" 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.`);
+	}, [b]);
+	let [A, zt] = a(Qe, $e ?? null, (e) => {
+		et?.(e), tt?.(e);
+	}), j = !C && !w, [M, N] = a(st, (ct ?? !1) && j, lt), Bt = ie(), P = M && j && Bt, Vt = st !== void 0;
+	h.useEffect(() => {
+		!j && M && !Vt && N(!1);
 	}, [
-		O,
-		k,
-		Mt,
-		A
+		j,
+		M,
+		Vt,
+		N
 	]);
-	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 F = (e) => v ? v(e) : Me(e, b), Ht = (e) => y ? y(e) : Ve(e, b), [I, L] = h.useState(null), [R, z] = h.useState(null), [Ut, Wt] = h.useState(j);
+	Ut !== j && (Wt(j), j || (L(null), z(null)));
+	let B = A ? d(A) : "", [Gt, Kt] = h.useState(B);
+	Gt !== B && (Kt(B), R !== null && (L(null), z(null)));
+	let qt = (e) => !ze(e, x, S) || !!nt?.(m(e)), V = (e) => {
+		let t = e ? m(e) : null;
+		(t ? f(t, A) : A === null) || zt(t), L(null), z(null);
+	}, H = (e) => {
+		if (!e.trim()) return V(null), !0;
+		let t = Ht(e), n = null;
+		if (!t || Number.isNaN(t.getTime()) ? n = "unparseable" : ze(t, x, S) ? nt?.(m(t)) && (n = "disabled") : n = "out-of-range", n || !t) {
 			let t = n ?? "unparseable";
-			return I(t), tt?.(e, t), !1;
+			return z(t), ut?.(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,
+		return V(t), !0;
+	}, U = m(/* @__PURE__ */ new Date()), Jt = () => He(u(A ?? U, x, S)), [W, Yt] = h.useState(Jt), [Xt, G] = h.useState(null), [Zt, Qt] = h.useState(!1), [$t, en] = h.useState(P);
+	$t !== P && (en(P), P && (Yt(Jt()), G(null))), Zt && !P && Qt(!1);
+	let K = h.useMemo(() => Xe(Ie(W, T)), [W, T]), tn = (e) => !!e && p(e, W), nn = (e) => !!e && e >= K[0][0] && e <= K[K.length - 1][6], rn = u(U, x, S), an = u(W, x, S), q = nn(Xt) ? Xt : tn(A) ? m(A) : tn(rn) ? rn : tn(an) ? an : W, on = d(q), sn = (e) => {
+		let t = u(e, x, S);
+		G(t), p(t, W) || Yt(He(t));
+	}, cn = (e) => {
+		let t = l(W, e), n = u(l(q, e), x, S);
+		Yt(t), G(p(n, t) ? n : null);
+	}, ln = (e) => {
+		f(e, q) || G(e);
+	}, un = !!x && c(W, -1) < m(x), dn = !!S && l(W, 1) > m(S), fn = h.useMemo(() => Re(b, T), [b, T]), J = h.useRef(null), Y = h.useRef(null), pn = h.useRef(null), mn = h.useRef(null), X = h.useRef(null), [hn, gn] = h.useState(null), _n = re(Pt, J), vn = o("datepicker-dialog"), yn = o("datepicker-heading"), Z = o("datepicker-grid"), bn = o("datepicker-error"), xn = (e) => {
+		X.current = e, N(!1);
+	}, { layerId: Sn } = le({
+		open: P,
 		onDismiss: (e, t) => {
 			let n = e === "outside-press" && t.target instanceof Element ? t.target.closest(ne) : null;
-			cn(n ?? (W ? X.current : null));
+			xn(n ?? (Zt ? J.current : null));
 		},
-		refs: [$t, Z],
-		anchorRef: Z,
+		refs: [mn, Y],
+		anchorRef: Y,
 		kind: "modal"
-	}), { setReference: un, setFloating: dn, floatingProps: fn } = Ce({
-		open: j,
+	}), { setReference: Cn, setFloating: wn, floatingProps: Tn } = je({
+		open: P,
 		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,
+	}), En = re(mn, gn, wn);
+	Ue(hn, {
+		enabled: P,
+		layerId: Sn,
+		initialFocus: () => pn.current?.querySelector("button[tabindex=\"0\"]") ?? null
+	}), We({
+		enabled: P,
+		container: hn,
+		triggerRef: Y,
+		finalFocusRef: X,
 		onlyIfFocusInside: !0
-	}), m.useLayoutEffect(() => {
-		j && (Q.current = null);
-	}, [j]), m.useLayoutEffect(() => {
-		let e = Qt.current;
+	}), h.useLayoutEffect(() => {
+		P && (X.current = null);
+	}, [P]), h.useLayoutEffect(() => {
+		let e = pn.current;
 		if (!e) return;
 		let t = e.ownerDocument.activeElement;
 		if (!t || !e.contains(t)) return;
-		let n = e.querySelector(`button[data-date="${Y}"]`);
+		let n = e.querySelector(`button[data-date="${on}"]`);
 		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) => {
+	}, [on]);
+	let Dn = se(), On = (pt ?? Dn?.required ?? !1) && !w, kn = R !== null && !Dn?.hasErrorMessage, An = ce({
+		id: St,
+		"aria-label": Ct,
+		"aria-labelledby": wt,
+		"aria-describedby": ae(Tt, kn ? bn : void 0),
+		"aria-invalid": R !== null || Et,
+		"aria-required": Dt ?? pt
+	}), jn = we(!1, An["aria-invalid"]);
+	Te(J, () => V($e ?? null), ft);
+	let Q = ot && !w && A !== null, Mn = (e) => {
+		j && (L(e.target.value), z(null));
+	}, Nn = r(Mt, (e) => {
+		j && !e.nativeEvent.isComposing && (e.key === "Enter" && I !== null ? (e.preventDefault(), H(I)) : e.key === "Tab" && !e.shiftKey && Q && I !== null && !I.trim() ? Ge(() => H(I)) : e.key === "ArrowDown" && e.altKey && !P && (e.preventDefault(), I !== null && R === null && H(I), Qt(!0), N(!0)));
+	}), Pn = r(jt, () => {
+		j && I !== null && R === null && H(I);
+	}), Fn = () => {
+		j && (X.current = null, Qt(!1), N(!P));
+	}, In = () => {
+		j && (V(null), J.current?.focus());
+	}, Ln = (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) => {
+	}, Rn = (e) => {
+		j && !qt(e) && (V(e), xn(J.current));
+	}, zn = (e) => {
+		e.key !== "Escape" || e.defaultPrevented || e.nativeEvent.isComposing || (e.preventDefault(), xn(Zt ? J.current : null));
+	}, Bn = (e) => {
 		if (e.altKey || e.ctrlKey || e.metaKey) return;
-		let t = (J.getDay() - w + 7) % 7, n;
+		let t = (q.getDay() - T + 7) % 7, n;
 		switch (e.key) {
 			case "ArrowLeft":
 			case "ArrowRight": {
@@ -147,183 +150,185 @@ var We = (We) => {
 					orientation: "horizontal",
 					dir: te(e.currentTarget)
 				});
-				n = s(J, t === "next" ? 1 : -1);
+				n = c(q, t === "next" ? 1 : -1);
 				break;
 			}
 			case "ArrowDown":
-				n = s(J, 7);
+				n = c(q, 7);
 				break;
 			case "ArrowUp":
-				n = s(J, -7);
+				n = c(q, -7);
 				break;
 			case "PageDown":
-				n = c(J, e.shiftKey ? 12 : 1);
+				n = l(q, e.shiftKey ? 12 : 1);
 				break;
 			case "PageUp":
-				n = c(J, e.shiftKey ? -12 : -1);
+				n = l(q, e.shiftKey ? -12 : -1);
 				break;
 			case "Home":
-				n = s(J, -t);
+				n = c(q, -t);
 				break;
 			case "End":
-				n = s(J, 6 - t);
+				n = c(q, 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),
+		e.preventDefault(), sn(n);
+	}, Vn = I ?? (A ? F(A) : ""), $ = "";
+	return R === "unparseable" ? $ = (E?.invalidDate ?? Ke)(k ? void 0 : Le(b).pattern) : R === "out-of-range" && (x || S) ? $ = (E?.outOfRange ?? qe)(x ? F(m(x)) : void 0, S ? F(m(S)) : void 0) : R === "disabled" && ($ = E?.unavailableDate ?? "This date is not available."), /* @__PURE__ */ _("div", {
+		"data-size": D,
+		"data-appearance": O,
+		...Lt,
+		ref: It,
+		className: e(i.root, "relative inline-flex flex-col", Ft),
 		children: [
-			/* @__PURE__ */ g("div", {
-				ref: un,
+			/* @__PURE__ */ _("div", {
+				ref: Cn,
 				className: "relative flex items-center",
 				children: [
-					/* @__PURE__ */ h("input", {
-						ref: nn,
+					/* @__PURE__ */ g("input", {
+						ref: _n,
 						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")
+						...An,
+						"aria-errormessage": Ot,
+						"aria-details": kt,
+						value: Vn,
+						onChange: Mn,
+						onFocus: At,
+						onBlur: Pn,
+						onKeyDown: Nn,
+						onKeyUp: Nt,
+						placeholder: rt,
+						disabled: C,
+						readOnly: w,
+						autoComplete: mt,
+						autoCapitalize: ht,
+						autoCorrect: gt,
+						enterKeyHint: _t,
+						inputMode: vt,
+						spellCheck: yt,
+						autoFocus: bt,
+						tabIndex: xt,
+						className: e(i.input, ge[D], "w-full", _e[D], ve[D], me[O], "text-foreground placeholder:text-muted-foreground", he, de, jn && "border-destructive", Oe(Q ? 2 : 1, D))
 					}),
-					yn && /* @__PURE__ */ h("button", {
+					Q && /* @__PURE__ */ g("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, {})
+						"aria-label": E?.clear ?? "Clear date",
+						disabled: C,
+						onMouseDown: Ln,
+						onClick: In,
+						className: e(i.clearButton, Ae(D, O), De(D, 2), "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__ */ g(Se, { size: ke(D, "icon") })
 					}),
-					/* @__PURE__ */ h("button", {
-						ref: Z,
+					/* @__PURE__ */ g("button", {
+						ref: Y,
 						type: "button",
-						"aria-label": T?.openCalendar ?? "Open calendar",
+						"aria-label": E?.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, {})
+						"aria-expanded": P,
+						"aria-controls": P ? vn : void 0,
+						disabled: C || w,
+						onClick: Fn,
+						className: e(i.openCalendarButton, Ae(D, O), De(D, 1), fe, de),
+						children: /* @__PURE__ */ g(ye, { size: ke(D, "icon") })
 					})
 				]
 			}),
-			gn && /* @__PURE__ */ h("p", {
-				id: sn,
+			kn && /* @__PURE__ */ g("p", {
+				id: bn,
 				role: "alert",
-				className: "mt-1 text-caption-1 text-error",
+				className: e(i.errorMessage, "mt-1 text-caption-1 text-error"),
 				children: $
 			}),
-			/* @__PURE__ */ h(Se, {
-				name: nt,
-				form: rt,
-				disabled: S,
-				value: D ? u(D) : "",
+			/* @__PURE__ */ g(Ee, {
+				name: dt,
+				form: ft,
+				disabled: C,
+				value: A ? d(A) : "",
 				type: "text",
-				required: hn,
-				onInvalid: () => X.current?.focus()
+				required: On,
+				onInvalid: () => J.current?.focus()
 			}),
-			j && /* @__PURE__ */ h(ue, {
-				layerId: ln,
-				children: /* @__PURE__ */ g("div", {
-					ref: pn,
-					id: rn,
+			P && /* @__PURE__ */ g(ue, {
+				layerId: Sn,
+				children: /* @__PURE__ */ _("div", {
+					ref: En,
+					id: vn,
 					role: "dialog",
 					"aria-modal": "true",
-					"aria-labelledby": an,
-					...fn,
+					"aria-labelledby": yn,
+					...Tn,
 					"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",
+					onKeyDown: zn,
+					className: e(i.surface, "rounded-md border border-border bg-background p-3 text-foreground shadow-16"),
+					children: [/* @__PURE__ */ _("div", {
+						className: e(i.header, "mb-2 flex items-center justify-between gap-2"),
 						children: [
-							/* @__PURE__ */ h("button", {
+							/* @__PURE__ */ g("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" })
+								"aria-label": E?.previousMonth ?? "Previous month",
+								"aria-controls": Z,
+								...s(un),
+								onClick: oe(un, () => cn(-1)),
+								className: e(i.previousMonthButton, Je, "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__ */ g(be, { className: "wave-rtl:-scale-x-100" })
 							}),
-							/* @__PURE__ */ h("h2", {
-								id: an,
+							/* @__PURE__ */ g("h2", {
+								id: yn,
 								"aria-live": "polite",
-								className: "text-body-1 font-semibold",
-								children: De(V, y)
+								className: e(i.heading, "text-body-1 font-semibold"),
+								children: Fe(W, b)
 							}),
-							/* @__PURE__ */ h("button", {
+							/* @__PURE__ */ g("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" })
+								"aria-label": E?.nextMonth ?? "Next month",
+								"aria-controls": Z,
+								...s(dn),
+								onClick: oe(dn, () => cn(1)),
+								className: e(i.nextMonthButton, Je, "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__ */ g(xe, { className: "wave-rtl:-scale-x-100" })
 							})
 						]
-					}), /* @__PURE__ */ g("table", {
-						ref: Qt,
-						id: on,
+					}), /* @__PURE__ */ _("table", {
+						ref: pn,
+						id: Z,
 						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", {
+						"aria-labelledby": yn,
+						onKeyDown: Bn,
+						className: e(i.grid, "border-collapse"),
+						children: [/* @__PURE__ */ g("thead", { children: /* @__PURE__ */ g("tr", { children: fn.map((t) => /* @__PURE__ */ _("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", {
+							abbr: t.long,
+							"aria-label": t.long,
+							className: e(i.weekday, "h-8 w-8 text-center text-caption-1 font-normal text-muted-foreground"),
+							children: [/* @__PURE__ */ g("span", {
 								"aria-hidden": "true",
-								children: e.short
-							}), /* @__PURE__ */ h("span", {
+								children: t.short
+							}), /* @__PURE__ */ g("span", {
 								className: "sr-only",
-								children: e.long
+								children: t.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", {
+						}, t.long)) }) }), /* @__PURE__ */ g("tbody", { children: K.map((t, n) => /* @__PURE__ */ g("tr", { children: t.map((t, n) => {
+							let r = d(t), a = f(t, A), o = f(t, U), ee = r === on, te = qt(t);
+							return /* @__PURE__ */ g("td", {
 								role: "gridcell",
-								"aria-selected": i,
+								"aria-selected": a,
 								className: "p-0",
-								children: /* @__PURE__ */ h("button", {
+								children: /* @__PURE__ */ g("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),
+									"aria-label": Ne(t, b),
+									"aria-pressed": a || void 0,
+									"aria-current": o ? "date" : void 0,
+									...s(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)
+									"data-selected": a ? "" : void 0,
+									"data-today": o ? "" : void 0,
+									"data-outside": p(t, W) ? void 0 : "",
+									onFocus: () => ln(t),
+									onClick: () => Rn(t),
+									className: e(i.day, Ye, "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", a && pe.selectedLeaf),
+									children: Pe(t, b)
 								})
 							}, n);
 						}) }, n)) })]
@@ -333,8 +338,8 @@ var We = (We) => {
 		]
 	});
 };
-We.displayName = "DatePicker";
+Ze.displayName = "DatePicker";
 //#endregion
-export { We as DatePicker };
+export { Ze as DatePicker };
 
 //# sourceMappingURL=DatePicker.mjs.map