@mortenbrudvik/waveui 0.8.0 → 0.9.0

package/dist/components/input/DatePicker.mjs

@@ -9,136 +9,138 @@ import { getArrowIntent as ee, getDirection as te } from "../../lib/direction.mj
 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 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 Re } from "react-dom";
+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, 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 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) {
+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 _ = (_) => {
-	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 = v !== void 0, D = y !== void 0;
-	m.useEffect(() => {
-		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.`);
+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 [O, At] = a(Ge, Ke ?? null, (e) => {
-		qe?.(e), Je?.(e);
-	}), k = !C && !w, [A, j] = a(Qe, ($e ?? !1) && k, et), jt = ie(), M = A && k && jt, Mt = Qe !== void 0;
-	m.useEffect(() => {
-		!k && A && !Mt && j(!1);
+	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);
 	}, [
-		k,
-		A,
-		Mt,
-		j
+		j,
+		M,
+		Vt,
+		N
 	]);
-	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, O) : O === null) || At(t), P(null), I(null);
-	}, z = (e) => {
-		if (!e.trim()) return R(null), !0;
-		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 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;
-	}, 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,
+		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;
-			ln(n ?? (U ? Y.current : null));
+			xn(n ?? (Zt ? J.current : null));
 		},
-		refs: [en, X],
-		anchorRef: X,
+		refs: [mn, Y],
+		anchorRef: Y,
 		kind: "modal"
-	}), { setReference: dn, setFloating: fn, floatingProps: pn } = we({
-		open: M,
+	}), { setReference: Cn, setFloating: wn, floatingProps: Tn } = je({
+		open: P,
 		side: "bottom",
 		align: "start"
-	}), 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,
+	}), 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(() => {
-		M && (Q.current = null);
-	}, [M]), m.useLayoutEffect(() => {
-		let e = Z.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="${J}"]`);
+		let n = e.querySelector(`button[data-date="${on}"]`);
 		n && n !== t && n.focus();
-	}, [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": oe(gt, _n ? cn : void 0),
-		"aria-invalid": F !== null || _t,
-		"aria-required": vt ?? it
-	}), 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) => {
+	}, [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();
-	}, Dn = (e) => {
-		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) => {
+	}, 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 = (q.getDay() - T + 7) % 7, n;
 		switch (e.key) {
@@ -148,183 +150,185 @@ var _ = (_) => {
 					orientation: "horizontal",
 					dir: te(e.currentTarget)
 				});
-				n = s(q, t === "next" ? 1 : -1);
+				n = c(q, t === "next" ? 1 : -1);
 				break;
 			}
 			case "ArrowDown":
-				n = s(q, 7);
+				n = c(q, 7);
 				break;
 			case "ArrowUp":
-				n = s(q, -7);
+				n = c(q, -7);
 				break;
 			case "PageDown":
-				n = c(q, e.shiftKey ? 12 : 1);
+				n = l(q, e.shiftKey ? 12 : 1);
 				break;
 			case "PageUp":
-				n = c(q, e.shiftKey ? -12 : -1);
+				n = l(q, e.shiftKey ? -12 : -1);
 				break;
 			case "Home":
-				n = s(q, -t);
+				n = c(q, -t);
 				break;
 			case "End":
-				n = s(q, 6 - t);
+				n = c(q, 6 - t);
 				break;
 			default: return;
 		}
-		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(i.root, "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: dn,
+			/* @__PURE__ */ _("div", {
+				ref: Cn,
 				className: "relative flex items-center",
 				children: [
-					/* @__PURE__ */ h("input", {
-						ref: rn,
+					/* @__PURE__ */ g("input", {
+						ref: _n,
 						type: "text",
-						...vn,
-						"aria-errormessage": yt,
-						"aria-details": bt,
-						value: An,
-						onChange: xn,
-						onFocus: xt,
-						onBlur: Cn,
-						onKeyDown: Sn,
-						onKeyUp: wt,
-						placeholder: Xe,
+						...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: at,
-						autoCapitalize: ot,
-						autoCorrect: st,
-						enterKeyHint: ct,
-						inputMode: lt,
-						spellCheck: ut,
-						autoFocus: dt,
-						tabIndex: ft,
-						className: e(i.input, he, "border-b-stroke-accessible", ge, fe, yn && "border-destructive focus:border-b-destructive", bn ? "pe-14" : "pe-8")
+						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))
 					}),
-					bn && /* @__PURE__ */ h("button", {
+					Q && /* @__PURE__ */ g("button", {
 						type: "button",
 						"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, {})
+						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: X,
+					/* @__PURE__ */ g("button", {
+						ref: Y,
 						type: "button",
 						"aria-label": E?.openCalendar ?? "Open calendar",
 						"aria-haspopup": "dialog",
-						"aria-expanded": M,
-						"aria-controls": M ? an : void 0,
+						"aria-expanded": P,
+						"aria-controls": P ? vn : void 0,
 						disabled: C || w,
-						onClick: wn,
-						className: e(i.openCalendarButton, Ve, "end-1", pe, fe),
-						children: /* @__PURE__ */ h(_e, {})
+						onClick: Fn,
+						className: e(i.openCalendarButton, Ae(D, O), De(D, 1), fe, de),
+						children: /* @__PURE__ */ g(ye, { size: ke(D, "icon") })
 					})
 				]
 			}),
-			_n && /* @__PURE__ */ h("p", {
-				id: cn,
+			kn && /* @__PURE__ */ g("p", {
+				id: bn,
 				role: "alert",
 				className: e(i.errorMessage, "mt-1 text-caption-1 text-error"),
 				children: $
 			}),
-			/* @__PURE__ */ h(Ce, {
-				name: nt,
-				form: rt,
+			/* @__PURE__ */ g(Ee, {
+				name: dt,
+				form: ft,
 				disabled: C,
-				value: O ? u(O) : "",
+				value: A ? d(A) : "",
 				type: "text",
-				required: gn,
-				onInvalid: () => Y.current?.focus()
+				required: On,
+				onInvalid: () => J.current?.focus()
 			}),
-			M && /* @__PURE__ */ h(de, {
-				layerId: un,
-				children: /* @__PURE__ */ g("div", {
-					ref: mn,
-					id: an,
+			P && /* @__PURE__ */ g(ue, {
+				layerId: Sn,
+				children: /* @__PURE__ */ _("div", {
+					ref: En,
+					id: vn,
 					role: "dialog",
 					"aria-modal": "true",
-					"aria-labelledby": on,
-					...pn,
+					"aria-labelledby": yn,
+					...Tn,
 					"data-state": "open",
-					onKeyDown: On,
+					onKeyDown: zn,
 					className: e(i.surface, "rounded-md border border-border bg-background p-3 text-foreground shadow-16"),
-					children: [/* @__PURE__ */ g("div", {
+					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": 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" })
+								"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: on,
+							/* @__PURE__ */ g("h2", {
+								id: yn,
 								"aria-live": "polite",
 								className: e(i.heading, "text-body-1 font-semibold"),
-								children: Oe(B, b)
+								children: Fe(W, b)
 							}),
-							/* @__PURE__ */ h("button", {
+							/* @__PURE__ */ g("button", {
 								type: "button",
 								"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" })
+								"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: Z,
-						id: sn,
+					}), /* @__PURE__ */ _("table", {
+						ref: pn,
+						id: Z,
 						role: "grid",
-						"aria-labelledby": on,
-						onKeyDown: kn,
+						"aria-labelledby": yn,
+						onKeyDown: Bn,
 						className: e(i.grid, "border-collapse"),
-						children: [/* @__PURE__ */ h("thead", { children: /* @__PURE__ */ h("tr", { children: $t.map((t) => /* @__PURE__ */ g("th", {
+						children: [/* @__PURE__ */ g("thead", { children: /* @__PURE__ */ g("tr", { children: fn.map((t) => /* @__PURE__ */ _("th", {
 							scope: "col",
 							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", {
+							children: [/* @__PURE__ */ g("span", {
 								"aria-hidden": "true",
 								children: t.short
-							}), /* @__PURE__ */ h("span", {
+							}), /* @__PURE__ */ g("span", {
 								className: "sr-only",
 								children: t.long
 							})]
-						}, 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", {
+						}, 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": a,
 								className: "p-0",
-								children: /* @__PURE__ */ h("button", {
+								children: /* @__PURE__ */ g("button", {
 									type: "button",
 									tabIndex: ee ? 0 : -1,
-									"aria-label": Ee(t, b),
+									"aria-label": Ne(t, b),
 									"aria-pressed": a || void 0,
 									"aria-current": o ? "date" : void 0,
-									...ae(te),
+									...s(te),
 									"data-date": r,
 									"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)
+									"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)) })]
@@ -334,8 +338,8 @@ var _ = (_) => {
 		]
 	});
 };
-_.displayName = "DatePicker";
+Ze.displayName = "DatePicker";
 //#endregion
-export { _ as DatePicker };
+export { Ze as DatePicker };
 
 //# sourceMappingURL=DatePicker.mjs.map