@mortenbrudvik/waveui 0.8.0 → 0.10.0

package/dist/components/input/DatePicker.mjs

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