@mortenbrudvik/waveui 0.7.0 → 0.8.0

package/dist/components/input/DatePicker.mjs

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