zaravand-ui 6.0.0 → 7.0.0

package/dist/components/DatePicker/DatePicker.js

@@ -2,459 +2,619 @@
 import { useZuiConfig as e } from "../../config/useZuiConfig.js";
 import { cn as t, mergeRefs as n } from "../../lib/utils.js";
 import { DATEPICKER_MANUAL_SEGMENT_WIDTH as r } from "../shared/responsiveScale.js";
-import { FieldLabel as ee } from "../shared/FieldLabel.js";
-import { useInvalidState as te } from "../shared/useInvalidState.js";
-import i from "../Tooltip/Tooltip.js";
-import { useControllableState as a } from "../shared/useControllableState.js";
-import { datePickerCalendarSwitchButtonVariants as ne, datePickerDayButtonVariants as re, datePickerHeaderVariants as ie, datePickerNavigationButtonVariants as ae, datePickerPanelGridVariants as oe, datePickerPanelHintVariants as se, datePickerPanelItemButtonVariants as ce, datePickerPopoverContentVariants as le, datePickerSwitchButtonVariants as ue, datePickerSwitchGroupVariants as de, datePickerTriggerVariants as fe, datePickerWeekdayVariants as pe, datePickerYearListVariants as me } from "./DatePicker.variant.js";
-import { FieldClearButton as he, FieldClearButtonSlot as ge } from "../shared/FieldClearButton.js";
-import _e from "../shared/RequiredValidationInput.js";
-import { buildManualInputDigitsFromParts as ve, buildManualInputMaskedValue as ye, clampDisplayMonthInBounds as be, formatCalendarDate as xe, formatCalendarDateRangeLabel as Se, formatDatePickerOnChangeValue as Ce, isDateRangeValue as we, isSameOptionalDay as Te, localizeCalendarText as Ee, parseDatePickerValueKey as De, parseManualInputDigits as Oe, processManualDigitsChange as ke, processManualDigitsKeyDown as Ae, resolveCalendarConfig as je, resolveCalendarDateLib as Me, resolveDisabledMatchers as Ne, resolveFormattedDateParts as Pe, resolveNextCalendarSystem as Fe, resolvePrimarySelectedDate as Ie, toDatePickerValueKey as Le } from "./DatePicker.utils.js";
+import ee from "../Dialog/Dialog.js";
+import te from "../Tooltip/Tooltip.js";
+import { CLEAR_ICON_CLASS as i, FieldClearButton as ne, FieldClearButtonSlot as re } from "../shared/FieldClearButton.js";
+import { FieldLabel as ie } from "../shared/FieldLabel.js";
+import { useInvalidState as ae } from "../shared/useInvalidState.js";
+import { useControllableState as oe } from "../shared/useControllableState.js";
+import { isMobileViewport as se, useIsMobileViewport as ce, useIsShortViewport as le } from "../shared/viewport.js";
+import { useIsomorphicLayoutEffect as ue } from "../shared/useIsomorphicLayoutEffect.js";
+import { datePickerCalendarSwitchButtonVariants as de, datePickerDayButtonVariants as fe, datePickerHeaderVariants as pe, datePickerNavigationButtonVariants as me, datePickerPanelGridVariants as he, datePickerPanelHintVariants as ge, datePickerPanelItemButtonVariants as _e, datePickerPopoverContentVariants as ve, datePickerSwitchButtonVariants as ye, datePickerSwitchGroupVariants as be, datePickerTriggerVariants as xe, datePickerWeekdayVariants as Se, datePickerYearListVariants as Ce } from "./DatePicker.variant.js";
+import { buildManualInputDigitsFromParts as we, buildManualInputMaskedValue as Te, clampDisplayMonthInBounds as Ee, formatCalendarDate as De, formatCalendarDateRangeLabel as Oe, formatDatePickerOnChangeValue as ke, isDateRangeValue as Ae, isSameOptionalDay as je, localizeCalendarText as a, parseDatePickerValueKey as Me, parseManualInputDigits as Ne, processManualDigitsChange as Pe, processManualDigitsKeyDown as Fe, resolveCalendarConfig as Ie, resolveCalendarDateLib as Le, resolveDisabledMatchers as Re, resolveFormattedDateParts as ze, resolveNextCalendarSystem as Be, resolvePrimarySelectedDate as Ve, toDatePickerValueKey as He } from "./DatePicker.utils.js";
+import Ue from "./DatePickerWheel.js";
+import We from "./DatePickerMonthSlider.js";
+import Ge from "../shared/RequiredValidationInput.js";
 import * as o from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { ArrowRightLeft as Re, CalendarDays as ze, ChevronLeft as Be, ChevronRight as Ve, X as He } from "lucide-react";
+import { ArrowRightLeft as Ke, CalendarDays as qe, ChevronLeft as Je, ChevronRight as Ye, X as Xe } from "lucide-react";
 import * as l from "@radix-ui/react-popover";
-import { DayPicker as Ue, getDefaultClassNames as We } from "react-day-picker";
-import { enUS as Ge } from "react-day-picker/locale";
-import { DayPicker as Ke, faIR as qe } from "react-day-picker/persian";
+import { DayPicker as Ze, getDefaultClassNames as Qe } from "react-day-picker";
+import { enUS as $e } from "react-day-picker/locale";
+import { DayPicker as et, faIR as tt } from "react-day-picker/persian";
 //#region src/components/DatePicker/DatePicker.tsx
-function Je(Je, u) {
-	let { className: Ye, size: Xe = "default", title: Ze, required: Qe = !1, showRequiredMessage: $e = !1, placeholder: et, mode: tt = "single", allowManualInput: nt = !1, value: rt, defaultValue: it, typeDateExport: d, typeDateOutput: at = "object", fromDate: f, toDate: p, disabledDates: ot, numberOfMonths: st = 2, calendarSystem: ct, defaultCalendarSystem: lt = "shamsi", onCalendarSystemChange: ut, open: dt, onOpenChange: ft, onInvalid: pt, disabled: m = !1, id: mt, "aria-label": ht, "aria-labelledby": gt, "aria-describedby": h } = Je, { messages: g, digits: _, dir: v } = e(), y = Je.onChange, _t = o.useId(), vt = mt ?? _t, yt = Qe, b = tt === "range", x = rt !== void 0, [bt, xt] = a({
-		value: dt,
+var nt = 50;
+function rt(rt, u) {
+	let { className: it, title: at, required: ot = !1, showRequiredMessage: st = !1, placeholder: ct, mode: lt = "single", allowManualInput: ut = !1, value: dt, defaultValue: ft, typeDateExport: d, typeDateOutput: pt = "object", fromDate: f, toDate: p, disabledDates: mt, numberOfMonths: ht = 2, calendarSystem: gt, defaultCalendarSystem: _t = "shamsi", onCalendarSystemChange: vt, open: yt, onOpenChange: bt, onInvalid: xt, disabled: m = !1, id: St, "aria-label": Ct, "aria-labelledby": wt, "aria-describedby": Tt } = rt, { messages: h, digits: g, dir: _ } = e(), v = rt.onChange, Et = o.useId(), Dt = St ?? Et, Ot = ot, y = lt === "range", b = dt !== void 0, [kt, At] = oe({
+		value: yt,
 		defaultValue: !1,
-		onChange: ft
-	}), [St, Ct] = o.useState(() => {
-		let e = b ? null : Le(it, !1), t = e === null ? void 0 : De(e, !1, d);
+		onChange: bt
+	}), [jt, Mt] = o.useState(null), [x, Nt] = o.useState(!1), Pt = o.useRef(null), Ft = o.useRef(null), It = o.useRef(null), [Lt, Rt] = o.useState(() => {
+		let e = y ? null : He(ft, !1), t = e === null ? void 0 : Me(e, !1, d);
 		return t instanceof Date ? t : void 0;
-	}), [wt, Tt] = o.useState(() => {
-		let e = b ? Le(it, !0) : null, t = e === null ? void 0 : De(e, !0, d);
-		return we(t) ? t : void 0;
-	}), Et = Le(rt, b), S = o.useMemo(() => Et === null ? void 0 : De(Et, b, d), [
-		Et,
-		b,
+	}), [zt, Bt] = o.useState(() => {
+		let e = y ? He(ft, !0) : null, t = e === null ? void 0 : Me(e, !0, d);
+		return Ae(t) ? t : void 0;
+	}), Vt = He(dt, y), S = o.useMemo(() => Vt === null ? void 0 : Me(Vt, y, d), [
+		Vt,
+		y,
 		d
-	]), C = b ? void 0 : x ? S instanceof Date ? S : void 0 : St, w = b ? x ? we(S) ? S : void 0 : wt : void 0, [T, E] = o.useState("day"), { isInvalid: Dt, setIsInvalid: D, handleInvalid: Ot } = te(pt), [O, kt] = o.useState(""), [At, k] = o.useState(!1), [A, jt] = o.useState(""), [j, Mt] = o.useState(""), [Nt, Pt] = o.useState(!1), [Ft, M] = o.useState(!1), [N, It] = a({
-		value: ct,
-		defaultValue: lt,
-		onChange: ut
-	}), P = d ?? N, F = g.calendar.locale, I = je(N, F), L = Me(N, _), R = o.useMemo(() => f ? L.startOfMonth(f) : void 0, [f, L]), z = o.useMemo(() => p ? L.startOfMonth(p) : void 0, [L, p]), B = o.useMemo(() => Ne(f, p, ot), [
-		ot,
+	]), C = y ? void 0 : b ? S instanceof Date ? S : void 0 : Lt, w = y ? b ? Ae(S) ? S : void 0 : zt : void 0, [T, E] = o.useState("day"), { isInvalid: Ht, setIsInvalid: Ut, handleInvalid: Wt } = ae(xt), [Gt, Kt] = o.useState(""), [qt, D] = o.useState(!1), [O, Jt] = o.useState(""), [k, Yt] = o.useState(""), [Xt, Zt] = o.useState(!1), [Qt, A] = o.useState(!1), [j, $t] = oe({
+		value: gt,
+		defaultValue: _t,
+		onChange: vt
+	}), M = d ?? j, N = h.calendar.locale, P = Ie(j, N), F = Le(j, g), I = o.useMemo(() => f ? F.startOfMonth(f) : void 0, [f, F]), L = o.useMemo(() => p ? F.startOfMonth(p) : void 0, [F, p]), R = o.useMemo(() => Re(f, p, mt), [
+		mt,
 		f,
 		p
-	]), [Lt, Rt] = o.useState(() => be(Ie(b, C, w) ?? /* @__PURE__ */ new Date(), R, z, L)), V = o.useMemo(() => be(Lt, R, z, L), [
-		Lt,
-		z,
-		R,
-		L
-	]), zt = o.useRef(null), Bt = o.useMemo(() => n(zt, u), [u]), Vt = o.useMemo(() => n(u), [u]), Ht = o.useRef(null), Ut = o.useRef(null), Wt = o.useRef(null), Gt = o.useRef(null), Kt = o.useRef(null), H = bt, qt = Ie(b, C, w), Jt = b ? nt ? 1 : Math.max(1, st) : 1, U = L.getYear(V), Yt = L.getMonth(V), W = b ? !!w?.from : C instanceof Date, Xt = b ? Se(w, N, g.datePicker.rangeTo, _, F) : C ? xe(C, N, _, F) : null, Zt = et ?? g.datePicker.placeholder, G = nt, Qt = o.useMemo(() => Ee(I.monthFormatter.format(V), N, _), [
-		_,
-		V,
-		I,
-		N
-	]), $t = o.useMemo(() => Ee(I.yearFormatter.format(V), N, _), [
-		_,
-		V,
+	]), [en, tn] = o.useState(() => Ee(Ve(y, C, w) ?? /* @__PURE__ */ new Date(), I, L, F)), z = o.useMemo(() => Ee(en, I, L, F), [
+		en,
+		L,
 		I,
-		N
-	]), en = o.useMemo(() => Array.from({ length: 12 }, (e, t) => {
-		let n = L.newDate(U, t, 1);
+		F
+	]), nn = o.useRef(null), rn = o.useMemo(() => n(nn, u), [u]), an = o.useMemo(() => n(u), [u]), on = o.useRef(null), sn = o.useRef(null), cn = o.useRef(null), ln = o.useRef(null), un = o.useRef(null), B = kt, V = B && (jt ?? se()), [dn, fn] = o.useState(!1);
+	B && dn !== V && fn(V);
+	let pn = B ? V : dn;
+	o.useEffect(() => {
+		if (!V || x) return;
+		let e = 0, t = window.requestAnimationFrame(() => {
+			e = window.requestAnimationFrame(() => Nt(!0));
+		});
+		return () => {
+			window.cancelAnimationFrame(t), window.cancelAnimationFrame(e);
+		};
+	}, [V, x]), ue(() => {
+		V && x && Pt.current && (Ft.current = Pt.current.offsetHeight), It.current && Ft.current !== null && (It.current.style.height = `${Ft.current}px`);
+	});
+	let H = ce(), mn = le(), hn = Ve(y, C, w), gn = y ? ut || pn ? 1 : Math.max(1, ht) : 1, U = F.getYear(z), _n = F.getMonth(z), W = y ? !!w?.from : C instanceof Date, vn = y ? Oe(w, j, h.datePicker.rangeTo, g, N) : C ? De(C, j, g, N) : null, yn = ct ?? h.datePicker.placeholder, G = ut, bn = pn && (G || mn), xn = o.useMemo(() => a(P.monthFormatter.format(z), j, g), [
+		g,
+		z,
+		P,
+		j
+	]), Sn = o.useMemo(() => a(P.yearFormatter.format(z), j, g), [
+		g,
+		z,
+		P,
+		j
+	]), Cn = o.useMemo(() => Array.from({ length: 12 }, (e, t) => {
+		let n = F.newDate(U, t, 1);
 		return {
 			value: t,
-			label: Ee(I.monthFormatter.format(n), N, _),
-			isActive: t === Yt
+			label: a(P.monthFormatter.format(n), j, g),
+			isActive: t === _n
 		};
 	}), [
-		Yt,
+		_n,
 		U,
-		_,
-		I.monthFormatter,
-		N,
-		L
-	]), tn = o.useMemo(() => {
-		let e = L.getYear(/* @__PURE__ */ new Date()), t = R ? L.getYear(R) : Math.min(e - 100, U), n = (z ? L.getYear(z) : Math.max(e + 10, U)) - t + 1;
+		g,
+		P.monthFormatter,
+		j,
+		F
+	]), wn = o.useMemo(() => {
+		let e = F.getYear(/* @__PURE__ */ new Date()), t = I ? F.getYear(I) : Math.min(e - 100, U), n = (L ? F.getYear(L) : Math.max(e + 10, U)) - t + 1;
 		return Array.from({ length: n }, (e, n) => {
 			let r = t + n;
 			return {
 				value: r,
-				label: L.formatNumber(r),
+				label: F.formatNumber(r),
 				isActive: r === U
 			};
 		});
 	}, [
 		U,
-		z,
-		R,
-		L
-	]), nn = o.useMemo(() => L.addMonths(V, -1), [V, L]), rn = o.useMemo(() => L.addMonths(V, 1), [V, L]), an = !!(T === "year" || T === "day" && R && L.isBefore(L.startOfMonth(nn), R)), on = !!(T === "year" || T === "day" && z && L.isAfter(L.startOfMonth(rn), z)), sn = o.useMemo(() => {
-		let e = We();
+		L,
+		I,
+		F
+	]), Tn = o.useMemo(() => F.addMonths(z, -1), [z, F]), En = o.useMemo(() => F.addMonths(z, 1), [z, F]), Dn = !!(T === "year" || T === "day" && I && F.isBefore(F.startOfMonth(Tn), I)), On = !!(T === "year" || T === "day" && L && F.isAfter(F.startOfMonth(En), L)), kn = o.useMemo(() => {
+		let e = Qe();
 		return {
 			...e,
-			root: t("zui:w-max", e.root),
-			months: t("zui:flex zui:flex-col zui:gap-4 zui:sm:flex-row zui:sm:items-start", e.months),
-			month: t("zui:space-y-3", e.month),
+			root: t("zui:w-max zui:mobile:w-full", e.root),
+			months: t("zui:flex zui:flex-col zui:gap-4 zui:desktop:flex-row zui:desktop:items-start", e.months),
+			month: t("zui:space-y-3 zui:mobile:w-full", e.month),
 			month_caption: t("zui:hidden", e.month_caption),
 			caption_label: t("zui:hidden", e.caption_label),
 			nav: t("zui:hidden", e.nav),
 			month_grid: t("zui:w-full zui:border-collapse", e.month_grid),
 			weekdays: t("zui:mt-2 zui:flex zui:w-full", e.weekdays),
-			weekday: t(pe(), e.weekday),
+			weekday: t(Se(), e.weekday),
 			week: t("zui:mt-1 zui:flex zui:w-full", e.week),
 			day: t("zui:relative zui:flex-1 zui:p-0 zui:text-center", e.day),
-			day_button: t(re(), e.day_button),
-			selected: t("zui:rounded-[calc(var(--zui-scale,10px)*1.12)] zui:bg-[var(--zui-theme-action-primary)] zui:text-[var(--zui-color-text)] zui:hover:bg-[var(--zui-theme-action-primary-hover)] zui:focus-visible:bg-[var(--zui-theme-action-primary-hover)]", e.selected),
+			day_button: t(fe(), e.day_button),
+			selected: t("zui:rounded-[calc(var(--zui-scale,10px)*1.12)] zui:bg-[var(--zui-theme-action-primary)] zui:text-[var(--zui-color-surface)] zui:[&>button]:text-[var(--zui-color-surface)] zui:hover:bg-[var(--zui-theme-action-primary-hover)] zui:focus-visible:bg-[var(--zui-theme-action-primary-hover)]", e.selected),
 			today: t("zui:border zui:border-[var(--zui-theme-action-secondary)] zui:text-[var(--zui-theme-action-secondary)]", e.today),
 			outside: t("zui:text-[var(--zui-color-text)] zui:opacity-55", e.outside),
 			disabled: t("zui:text-[var(--zui-color-text)] zui:opacity-45", e.disabled),
 			hidden: t("zui:invisible", e.hidden),
-			range_start: t("zui:rounded-s-[var(--zui-radius-xs)] zui:bg-[var(--zui-theme-action-primary)] zui:text-[var(--zui-color-text)]", e.range_start),
-			range_end: t("zui:rounded-e-[var(--zui-radius-xs)] zui:bg-[var(--zui-theme-action-primary)] zui:text-[var(--zui-color-text)]", e.range_end),
+			range_start: t("zui:rounded-s-[var(--zui-radius-xs)] zui:bg-[var(--zui-theme-action-primary)] zui:text-[var(--zui-color-surface)] zui:[&>button]:text-[var(--zui-color-surface)]", e.range_start),
+			range_end: t("zui:rounded-e-[var(--zui-radius-xs)] zui:bg-[var(--zui-theme-action-primary)] zui:text-[var(--zui-color-surface)] zui:[&>button]:text-[var(--zui-color-surface)]", e.range_end),
 			range_middle: t("zui:bg-[var(--zui-theme-action-primary)]/15 zui:text-[var(--zui-color-text)]", e.range_middle)
 		};
 	}, []), K = o.useCallback((e) => {
-		Rt((t) => {
-			let n = be(e, R, z, L);
-			return L.isSameMonth(t, n) ? t : n;
+		tn((t) => {
+			let n = Ee(e, I, L, F);
+			return F.isSameMonth(t, n) ? t : n;
 		});
 	}, [
-		z,
-		R,
-		L
-	]), q = qt?.getTime(), cn = [
+		L,
+		I,
+		F
+	]), An = hn?.getTime(), jn = [
 		G,
-		b,
-		P,
+		y,
+		M,
 		C?.getTime(),
 		w?.from?.getTime(),
 		w?.to?.getTime()
-	].join("|"), [J, ln] = o.useState({
-		selectedDateKey: q,
-		calendarSystem: N,
-		isOpen: H,
+	].join("|"), [q, Mn] = o.useState({
+		selectedDateKey: An,
+		calendarSystem: j,
+		isOpen: B,
 		manualInputSyncKey: ""
 	});
-	if ((J.selectedDateKey !== q || J.calendarSystem !== N || J.isOpen !== H || J.manualInputSyncKey !== cn) && (ln({
-		selectedDateKey: q,
-		calendarSystem: N,
-		isOpen: H,
-		manualInputSyncKey: cn
-	}), J.selectedDateKey !== q && qt && K(qt), (J.calendarSystem !== N || J.isOpen && !H) && E("day"), J.manualInputSyncKey !== cn && G)) {
-		let e = (e) => e ? ve(Pe(e, P)) : "";
-		b ? (jt(e(w?.from)), Mt(e(w?.to)), Pt(!1), M(!1)) : (kt(e(C)), k(!1));
+	if ((q.selectedDateKey !== An || q.calendarSystem !== j || q.isOpen !== B || q.manualInputSyncKey !== jn) && (Mn({
+		selectedDateKey: An,
+		calendarSystem: j,
+		isOpen: B,
+		manualInputSyncKey: jn
+	}), q.selectedDateKey !== An && hn && K(hn), (q.calendarSystem !== j || q.isOpen && !B) && E("day"), q.manualInputSyncKey !== jn && G)) {
+		let e = (e) => e ? we(ze(e, M)) : "";
+		y ? (Jt(e(w?.from)), Yt(e(w?.to)), Zt(!1), A(!1)) : (Kt(e(C)), D(!1));
 	}
-	let un = Dt && !W;
+	let Nn = Ht && !W;
 	o.useEffect(() => {
-		T === "year" && Kt.current?.scrollIntoView({ block: "center" });
+		T === "year" && un.current?.scrollIntoView({ block: "center" });
 	}, [T]);
-	let Y = xt, dn = o.useCallback(() => {
-		It(Fe(N));
-	}, [N, It]), X = o.useCallback((e) => {
-		D(!1), x || Ct(e), y?.(Ce(e, "single", P, at)), e && Y(!1);
+	let J = o.useCallback((e) => {
+		Mt(e ? se() : null), e && Nt(!1), At(e);
+	}, [At]), Pn = o.useCallback(() => {
+		$t(Be(j));
+	}, [j, $t]), Y = o.useCallback((e) => {
+		Ut(!1), b || Rt(e), v?.(ke(e, "single", M, pt)), e && J(!1);
 	}, [
-		Y,
-		x,
-		D,
-		y,
-		P,
-		at
-	]), Z = o.useCallback((e) => {
-		D(!1), x || Tt(e), y?.(Ce(e, "range", P, at)), e?.from && e.to && Y(!1);
+		J,
+		b,
+		Ut,
+		v,
+		M,
+		pt
+	]), X = o.useCallback((e) => {
+		Ut(!1), b || Bt(e), v?.(ke(e, "range", M, pt)), e?.from && e.to && J(!1);
 	}, [
-		Y,
-		x,
-		D,
-		y,
-		P,
-		at
-	]), fn = o.useCallback(() => {
-		m || (b ? Z(void 0) : X(void 0));
+		J,
+		b,
+		Ut,
+		v,
+		M,
+		pt
+	]), Fn = o.useCallback(() => {
+		m || (y ? X(void 0) : Y(void 0));
 	}, [
 		m,
-		Z,
 		X,
-		b
-	]), pn = o.useCallback((e) => {
-		e.preventDefault(), e.stopPropagation(), fn();
-	}, [fn]), Q = o.useCallback((e) => {
+		Y,
+		y
+	]), In = o.useCallback((e) => {
+		e.preventDefault(), e.stopPropagation(), Fn();
+	}, [Fn]), Z = o.useCallback((e) => {
 		if (e.length === 0) {
-			k(!1), X(void 0);
+			D(!1), Y(void 0);
 			return;
 		}
-		let t = Oe(e, L, P, B);
+		let t = Ne(e, F, M, R);
 		if (!t) {
-			k(!0);
+			D(!0);
 			return;
 		}
-		k(!1), !(C && L.isSameDay(C, t)) && X(t);
+		D(!1), !(C && F.isSameDay(C, t)) && Y(t);
 	}, [
-		X,
-		L,
-		B,
-		P,
+		Y,
+		F,
+		R,
+		M,
 		C
-	]), mn = o.useCallback((e) => {
-		ke(e, kt, k, Q);
-	}, [Q]), hn = o.useCallback((e) => {
-		Ae(e, O, kt, k, Q);
-	}, [Q, O]), $ = o.useCallback((e, t) => {
-		let n = e.length === 0 ? null : Oe(e, L, P, B), r = t.length === 0 ? null : Oe(t, L, P, B), ee = e.length > 0 && !n, te = t.length > 0 && !r;
-		if (Pt(ee), M(te), ee || te) return;
-		if (n && r && L.isAfter(n, r)) {
-			M(!0);
+	]), Ln = o.useCallback((e) => {
+		Pe(e, Kt, D, Z);
+	}, [Z]), Rn = o.useCallback((e) => {
+		Fe(e, Gt, Kt, D, Z);
+	}, [Z, Gt]), Q = o.useCallback((e, t) => {
+		let n = e.length === 0 ? null : Ne(e, F, M, R), r = t.length === 0 ? null : Ne(t, F, M, R), ee = e.length > 0 && !n, te = t.length > 0 && !r;
+		if (Zt(ee), A(te), ee || te) return;
+		if (n && r && F.isAfter(n, r)) {
+			A(!0);
 			return;
 		}
-		let i = n ?? void 0, a = r ?? void 0;
-		if (!(Te(i, w?.from, L) && Te(a, w?.to, L))) {
-			if (!i && !a) {
-				Z(void 0);
+		let i = n ?? void 0, ne = r ?? void 0;
+		if (!(je(i, w?.from, F) && je(ne, w?.to, F))) {
+			if (!i && !ne) {
+				X(void 0);
 				return;
 			}
-			Z({
+			X({
 				from: i,
-				to: a
+				to: ne
 			});
 		}
 	}, [
-		Z,
-		L,
-		B,
-		P,
+		X,
+		F,
+		R,
+		M,
 		w
-	]), gn = o.useCallback(() => {
-		Ht.current?.focus();
-	}, []), _n = o.useCallback((e) => {
-		e.preventDefault(), Ut.current?.focus();
-	}, []), vn = o.useCallback((e) => {
+	]), zn = o.useCallback(() => {
+		on.current?.focus();
+	}, []), Bn = o.useCallback((e) => {
+		e.preventDefault(), sn.current?.focus();
+	}, []), Vn = o.useCallback((e) => {
 		if (m) return;
 		let t = e.target;
-		t.tagName === "INPUT" || t.closest("button") || (e.preventDefault(), Y(!0), b ? Ut.current?.focus() : Wt.current?.focus());
+		t.tagName === "INPUT" || t.closest("button") || (e.preventDefault(), J(!0), !H && (y ? sn.current?.focus() : cn.current?.focus()));
 	}, [
 		m,
-		Y,
-		b
-	]), yn = o.useCallback((e) => {
-		ke(e, jt, Pt, (e) => $(e, j), gn);
+		J,
+		H,
+		y
+	]), Hn = o.useCallback((e) => {
+		Pe(e, Jt, Zt, (e) => Q(e, k), zn);
 	}, [
-		$,
-		gn,
-		j
-	]), bn = o.useCallback((e) => {
-		Ae(e, A, jt, Pt, (e) => $(e, j), gn);
+		Q,
+		zn,
+		k
+	]), Un = o.useCallback((e) => {
+		Fe(e, O, Jt, Zt, (e) => Q(e, k), zn);
 	}, [
-		$,
-		gn,
-		A,
-		j
-	]), xn = o.useCallback(() => {
-		$(A, j);
+		Q,
+		zn,
+		O,
+		k
+	]), Wn = o.useCallback(() => {
+		Q(O, k);
 	}, [
-		$,
-		A,
-		j
-	]), Sn = o.useCallback((e) => {
-		ke(e, Mt, M, (e) => $(A, e));
-	}, [$, A]), Cn = o.useCallback((e) => {
-		Ae(e, j, Mt, M, (e) => $(A, e));
+		Q,
+		O,
+		k
+	]), Gn = o.useCallback((e) => {
+		Pe(e, Yt, A, (e) => Q(O, e));
+	}, [Q, O]), Kn = o.useCallback((e) => {
+		Fe(e, k, Yt, A, (e) => Q(O, e));
 	}, [
-		$,
-		A,
-		j
-	]), wn = o.useCallback(() => {
-		$(A, j);
+		Q,
+		O,
+		k
+	]), qn = o.useCallback(() => {
+		Q(O, k);
 	}, [
-		$,
-		A,
-		j
-	]), Tn = o.useCallback(() => {
-		Y(!0);
-	}, [Y]), En = o.useCallback(() => {
+		Q,
+		O,
+		k
+	]), Jn = o.useCallback(() => {
+		H && J(!0);
+	}, [J, H]), Yn = o.useCallback(() => {
+		se() || J(!0);
+	}, [J]), Xn = o.useCallback(() => {
 		if (T !== "year") {
 			if (T === "month") {
-				K(L.addYears(V, -1));
+				K(F.addYears(z, -1));
 				return;
 			}
-			an || K(nn);
+			Dn || K(Tn);
 		}
 	}, [
 		T,
-		V,
-		an,
-		nn,
-		L,
+		z,
+		Dn,
+		Tn,
+		F,
 		K
-	]), Dn = o.useCallback(() => {
+	]), Zn = o.useCallback(() => {
 		if (T !== "year") {
 			if (T === "month") {
-				K(L.addYears(V, 1));
+				K(F.addYears(z, 1));
 				return;
 			}
-			on || K(rn);
+			On || K(En);
 		}
 	}, [
 		T,
-		V,
-		on,
-		rn,
-		L,
+		z,
+		On,
+		En,
+		F,
 		K
-	]), On = o.useCallback(() => {
+	]), Qn = o.useCallback(() => {
 		E("month");
-	}, []), kn = o.useCallback(() => {
+	}, []), $n = o.useCallback(() => {
 		E("year");
-	}, []), An = o.useCallback((e) => {
-		K(L.setMonth(V, e)), E("day");
+	}, []), er = o.useCallback((e) => {
+		K(F.setMonth(z, e)), E("day");
 	}, [
-		V,
-		L,
+		z,
+		F,
 		K
-	]), jn = o.useCallback((e) => {
-		K(L.setYear(V, e)), E("month");
+	]), tr = o.useCallback((e) => {
+		K(F.setYear(z, e)), E("month");
 	}, [
-		V,
-		L,
+		z,
+		F,
 		K
-	]), Mn = N === "shamsi" ? Ke : Ue, Nn = {
-		dir: v,
-		locale: N === "shamsi" && F.startsWith("fa") ? qe : Ge,
-		numerals: N === "shamsi" && _ === "persian" ? "arabext" : "latn",
+	]), nr = j === "shamsi" ? et : Ze, rr = {
+		dir: _,
+		locale: j === "shamsi" && N.startsWith("fa") ? tt : $e,
+		numerals: j === "shamsi" && g === "persian" ? "arabext" : "latn",
 		showOutsideDays: !0,
-		month: V,
+		month: z,
 		onMonthChange: K,
-		numberOfMonths: Jt,
-		startMonth: R,
-		endMonth: z,
-		disabled: B,
+		numberOfMonths: gn,
+		startMonth: I,
+		endMonth: L,
+		disabled: R,
 		hideNavigation: !0,
-		classNames: sn
-	}, Pn = T === "year" ? g.datePicker.selectYear : T === "month" ? g.datePicker.selectMonth : null, Fn = {
+		classNames: kn
+	}, ir = T === "year" ? h.datePicker.selectYear : T === "month" ? h.datePicker.selectMonth : null, ar = {
 		day: {
-			previous: g.datePicker.previousMonth,
-			next: g.datePicker.nextMonth
+			previous: h.datePicker.previousMonth,
+			next: h.datePicker.nextMonth
 		},
 		month: {
-			previous: g.datePicker.previousYear,
-			next: g.datePicker.nextYear
+			previous: h.datePicker.previousYear,
+			next: h.datePicker.nextYear
 		},
 		year: {
-			previous: g.datePicker.previous,
-			next: g.datePicker.next
+			previous: h.datePicker.previous,
+			next: h.datePicker.next
 		}
-	}[T], In = v === "rtl" ? Ve : Be, Ln = v === "rtl" ? Be : Ve;
+	}[T], or = _ === "rtl" ? Ye : Je, sr = _ === "rtl" ? Je : Ye, cr = o.useRef(null), $ = pn && T === "day", lr = (e) => y ? /* @__PURE__ */ s(nr, {
+		...rr,
+		month: e,
+		fixedWeeks: $,
+		mode: "range",
+		selected: w,
+		onSelect: X,
+		min: 1
+	}) : /* @__PURE__ */ s(nr, {
+		...rr,
+		month: e,
+		fixedWeeks: $,
+		mode: "single",
+		selected: C,
+		onSelect: Y
+	}), ur = o.useRef(null), dr = o.useRef(!1), fr = /* @__PURE__ */ c("div", {
+		"data-slot": "date-picker-calendar",
+		className: "zui:w-fit zui:max-w-full zui:mobile:w-full zui:mobile:touch-pan-y",
+		onPointerDown: (e) => {
+			dr.current = !1, ur.current = pn && !$ ? {
+				x: e.clientX,
+				y: e.clientY
+			} : null;
+		},
+		onPointerUp: (e) => {
+			let t = ur.current;
+			if (ur.current = null, !t) return;
+			let n = e.clientX - t.x, r = e.clientY - t.y;
+			Math.abs(n) < nt || Math.abs(n) < Math.abs(r) * 1.5 || (dr.current = !0, (_ === "rtl" ? n > 0 : n < 0) ? Zn() : Xn());
+		},
+		onPointerCancel: () => {
+			ur.current = null;
+		},
+		onClickCapture: (e) => {
+			dr.current && (dr.current = !1, e.preventDefault(), e.stopPropagation());
+		},
+		children: [/* @__PURE__ */ c("div", {
+			"data-slot": "date-picker-header",
+			className: pe(),
+			children: [
+				/* @__PURE__ */ s("button", {
+					type: "button",
+					"data-slot": "date-picker-nav-previous",
+					className: me(),
+					onClick: $ ? () => cr.current?.slide("previous") : Xn,
+					disabled: Dn,
+					"aria-label": ar.previous,
+					children: /* @__PURE__ */ s(or, { className: "zui:size-4 zui:mobile:size-[max(calc(var(--zui-spacing)*6.3),24px)]" })
+				}),
+				/* @__PURE__ */ c("div", {
+					"data-slot": "date-picker-switch-group",
+					className: be(),
+					children: [
+						/* @__PURE__ */ s("button", {
+							type: "button",
+							"data-slot": "date-picker-switch-month",
+							className: ye({ active: T === "month" }),
+							onClick: Qn,
+							children: /* @__PURE__ */ s("span", { children: xn })
+						}),
+						/* @__PURE__ */ s("button", {
+							type: "button",
+							"data-slot": "date-picker-switch-year",
+							className: ye({ active: T === "year" }),
+							onClick: $n,
+							children: /* @__PURE__ */ s("span", { children: Sn })
+						}),
+						/* @__PURE__ */ s("button", {
+							type: "button",
+							"data-slot": "date-picker-switch-calendar",
+							className: de(),
+							onClick: Pn,
+							"aria-label": h.datePicker.switchCalendar,
+							children: /* @__PURE__ */ s(Ke, {
+								className: "zui:size-3.5 zui:mobile:size-6",
+								"aria-hidden": "true"
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ s("button", {
+					type: "button",
+					"data-slot": "date-picker-nav-next",
+					className: me(),
+					onClick: $ ? () => cr.current?.slide("next") : Zn,
+					disabled: On,
+					"aria-label": ar.next,
+					children: /* @__PURE__ */ s(sr, { className: "zui:size-4 zui:mobile:size-[max(calc(var(--zui-spacing)*6.3),24px)]" })
+				})
+			]
+		}), /* @__PURE__ */ c("div", {
+			className: "zui:px-2 zui:pb-2 zui:pt-1.5",
+			children: [ir ? /* @__PURE__ */ s("p", {
+				"data-slot": "date-picker-panel-hint",
+				className: ge(),
+				children: ir
+			}) : null, T === "year" ? /* @__PURE__ */ s("div", {
+				ref: ln,
+				"data-slot": "date-picker-year-list",
+				className: Ce(),
+				children: wn.map((e) => /* @__PURE__ */ s("button", {
+					ref: e.isActive ? un : void 0,
+					type: "button",
+					"data-slot": "date-picker-year-item",
+					className: _e({ active: e.isActive }),
+					onClick: () => tr(e.value),
+					children: e.label
+				}, e.value))
+			}) : T === "month" ? /* @__PURE__ */ s("div", {
+				"data-slot": "date-picker-month-grid",
+				className: he(),
+				children: Cn.map((e) => /* @__PURE__ */ s("button", {
+					type: "button",
+					"data-slot": "date-picker-month-item",
+					className: _e({ active: e.isActive }),
+					onClick: () => er(e.value),
+					children: e.label
+				}, e.value))
+			}) : $ ? /* @__PURE__ */ s(We, {
+				ref: cr,
+				month: z,
+				dateLib: F,
+				dir: _,
+				canGoPrevious: !Dn,
+				canGoNext: !On,
+				onMonthChange: K,
+				renderMonth: lr
+			}) : lr(z)]
+		})]
+	});
 	return /* @__PURE__ */ c("div", {
 		"data-slot": "date-picker-field",
-		dir: v,
+		dir: _,
 		className: "zui:relative zui:w-full zui:space-y-1.5 zui:text-start",
 		children: [
-			/* @__PURE__ */ s(ee, {
-				title: Ze,
-				htmlFor: vt,
-				required: yt,
-				showRequiredMessage: $e
+			/* @__PURE__ */ s(ie, {
+				title: at,
+				htmlFor: Dt,
+				required: Ot,
+				showRequiredMessage: st
 			}),
 			/* @__PURE__ */ c(l.Root, {
-				open: H,
-				onOpenChange: Y,
+				open: B && !V,
+				onOpenChange: J,
 				children: [G ? /* @__PURE__ */ s(l.Anchor, {
 					asChild: !0,
 					children: /* @__PURE__ */ c("div", {
-						ref: Bt,
-						role: b ? "group" : void 0,
-						"aria-label": b ? ht : void 0,
-						"aria-labelledby": b ? gt : void 0,
+						ref: rn,
+						role: y ? "group" : void 0,
+						"aria-label": y ? Ct : void 0,
+						"aria-labelledby": y ? wt : void 0,
 						"data-slot": "date-picker-trigger",
 						"data-has-value": W,
-						"data-state": H ? "open" : "closed",
-						"aria-invalid": un || At || Nt || Ft || void 0,
-						dir: v,
-						onMouseDown: vn,
-						className: t(fe({ size: Xe }), m && "zui:pointer-events-none zui:cursor-not-allowed zui:bg-[var(--zui-color-muted-surface)] zui:opacity-50", Ye),
+						"data-state": B ? "open" : "closed",
+						"aria-invalid": Nn || qt || Xt || Qt || void 0,
+						dir: _,
+						onMouseDown: Vn,
+						className: t(xe(), m && "zui:pointer-events-none zui:cursor-not-allowed zui:bg-[var(--zui-color-muted-surface)] zui:opacity-50", it),
 						children: [
-							b ? /* @__PURE__ */ c("div", {
+							y ? /* @__PURE__ */ c("div", {
 								className: "zui:flex zui:min-w-0 zui:flex-1 zui:items-center zui:justify-start zui:gap-1.5",
 								children: [
 									/* @__PURE__ */ s("span", {
 										className: "zui:shrink-0 zui:text-xs zui:text-[var(--zui-color-text)]",
-										children: g.datePicker.rangeFrom
+										children: h.datePicker.rangeFrom
 									}),
 									/* @__PURE__ */ s("input", {
-										ref: Ut,
-										id: vt,
+										ref: sn,
+										id: Dt,
 										type: "text",
-										inputMode: "numeric",
+										inputMode: H ? "none" : "numeric",
+										readOnly: H,
+										onClick: Jn,
 										autoComplete: "off",
 										dir: "ltr",
 										disabled: m,
-										"aria-label": g.datePicker.rangeStartLabel,
-										"aria-describedby": h,
-										"aria-invalid": Nt || void 0,
-										value: ye(A, _),
-										onChange: yn,
-										onKeyDown: bn,
-										onBlur: xn,
-										onFocus: Tn,
+										"aria-label": h.datePicker.rangeStartLabel,
+										"aria-describedby": Tt,
+										"aria-invalid": Xt || void 0,
+										value: Te(O, g),
+										onChange: Hn,
+										onKeyDown: Un,
+										onBlur: Wn,
+										onFocus: Yn,
 										className: `${r} zui:shrink-0 zui:truncate zui:bg-transparent zui:text-center zui:text-base zui:text-[var(--zui-color-text)] zui:outline-none zui:md:text-sm`
 									}),
 									/* @__PURE__ */ s("span", {
 										className: "zui:shrink-0 zui:text-xs zui:text-[var(--zui-color-text)]",
-										children: g.datePicker.rangeTo
+										children: h.datePicker.rangeTo
 									}),
 									/* @__PURE__ */ s("input", {
-										ref: Ht,
+										ref: on,
 										type: "text",
-										inputMode: "numeric",
+										inputMode: H ? "none" : "numeric",
+										readOnly: H,
+										onClick: Jn,
 										autoComplete: "off",
 										dir: "ltr",
 										disabled: m,
-										"aria-label": g.datePicker.rangeEndLabel,
-										"aria-describedby": h,
-										"aria-invalid": Ft || void 0,
-										value: ye(j, _),
-										onChange: Sn,
-										onKeyDown: Cn,
-										onBlur: wn,
-										onFocus: Tn,
-										onMouseDown: _n,
+										"aria-label": h.datePicker.rangeEndLabel,
+										"aria-describedby": Tt,
+										"aria-invalid": Qt || void 0,
+										value: Te(k, g),
+										onChange: Gn,
+										onKeyDown: Kn,
+										onBlur: qn,
+										onFocus: Yn,
+										onMouseDown: Bn,
 										className: `${r} zui:shrink-0 zui:truncate zui:bg-transparent zui:text-center zui:text-base zui:text-[var(--zui-color-text)] zui:outline-none zui:md:text-sm`
 									})
 								]
 							}) : /* @__PURE__ */ s("input", {
-								ref: Wt,
-								id: vt,
+								ref: cn,
+								id: Dt,
 								type: "text",
-								inputMode: "numeric",
+								inputMode: H ? "none" : "numeric",
+								readOnly: H,
+								onClick: Jn,
 								autoComplete: "off",
 								dir: "ltr",
 								disabled: m,
-								"aria-label": ht,
-								"aria-labelledby": gt,
-								"aria-describedby": h,
-								"aria-invalid": un || At || void 0,
-								value: ye(O, _),
-								onChange: mn,
-								onKeyDown: hn,
-								onBlur: () => Q(O),
-								onFocus: Tn,
-								className: "zui:w-full zui:truncate zui:bg-transparent zui:text-start zui:text-base zui:text-[var(--zui-color-text)] zui:outline-none zui:md:text-sm"
+								"aria-label": Ct,
+								"aria-labelledby": wt,
+								"aria-describedby": Tt,
+								"aria-invalid": Nn || qt || void 0,
+								value: Te(Gt, g),
+								onChange: Ln,
+								onKeyDown: Rn,
+								onBlur: () => Z(Gt),
+								onFocus: Yn,
+								className: t("zui:w-full zui:truncate zui:bg-transparent zui:text-base zui:text-[var(--zui-color-text)] zui:outline-none zui:md:text-sm", _ === "rtl" ? "zui:text-right" : "zui:text-left")
 							}),
-							W && !m ? /* @__PURE__ */ s(i, {
-								text: g.datePicker.clear,
+							W && !m ? /* @__PURE__ */ s(te, {
+								text: h.datePicker.clear,
 								position: "top",
 								trigger: /* @__PURE__ */ s("button", {
 									type: "button",
 									"data-slot": "date-picker-clear-button",
-									"aria-label": g.datePicker.clear,
-									onClick: pn,
+									"aria-label": h.datePicker.clear,
+									onClick: In,
 									className: "zui:shrink-0 zui:rounded-full zui:p-0.5 zui:text-[var(--zui-color-text)] zui:opacity-70 zui:outline-none zui:hover:cursor-pointer zui:hover:bg-[var(--zui-color-muted-surface)] zui:hover:opacity-100 zui:focus-visible:opacity-100",
-									children: /* @__PURE__ */ s(He, { className: "zui:size-3.5" })
+									children: /* @__PURE__ */ s(Xe, { className: i })
 								})
 							}) : null,
 							/* @__PURE__ */ s("button", {
 								type: "button",
 								"data-slot": "date-picker-trigger-icon",
-								"aria-label": Zt,
+								"aria-label": yn,
 								disabled: m,
-								onClick: () => Y(!H),
+								onClick: () => J(!B),
 								className: "zui:shrink-0 zui:outline-none",
-								children: /* @__PURE__ */ s(ze, { className: "zui:size-4 zui:text-[var(--zui-color-text)]" })
+								children: /* @__PURE__ */ s(qe, { className: "zui:size-4 zui:text-[var(--zui-color-text)]" })
 							})
 						]
 					})
@@ -463,155 +623,99 @@ function Je(Je, u) {
 					children: [/* @__PURE__ */ s(l.Trigger, {
 						asChild: !0,
 						children: /* @__PURE__ */ c("button", {
-							ref: Vt,
+							ref: an,
 							type: "button",
-							id: vt,
-							"aria-label": ht,
-							"aria-labelledby": gt,
-							"aria-describedby": h,
+							id: Dt,
+							"aria-label": Ct,
+							"aria-labelledby": wt,
+							"aria-describedby": Tt,
 							"data-slot": "date-picker-trigger",
 							"data-has-value": W,
-							dir: v,
-							"aria-invalid": un || void 0,
+							dir: _,
+							"aria-invalid": Nn || void 0,
 							disabled: m,
-							className: t(fe({ size: Xe }), Ye),
+							className: t(xe(), it),
 							children: [
 								/* @__PURE__ */ s("span", {
-									className: t("zui:min-w-0 zui:flex-1 zui:truncate zui:text-base zui:md:text-sm", W ? "zui:text-[var(--zui-color-text)]" : "zui:text-[var(--zui-theme-text-muted)]"),
-									children: Xt ?? Zt
+									className: t("zui:min-w-0 zui:flex-1 zui:truncate zui:text-base zui:md:text-sm", W ? "zui:text-[var(--zui-color-text)]" : "zui:text-[var(--zui-theme-text-muted)] zui:mobile:text-sm"),
+									children: vn ?? yn
 								}),
-								W && !m ? /* @__PURE__ */ s(ge, {}) : null,
-								/* @__PURE__ */ s(ze, { className: "zui:size-4 zui:text-[var(--zui-color-text)]" })
+								W && !m ? /* @__PURE__ */ s(re, {}) : null,
+								/* @__PURE__ */ s(qe, { className: "zui:size-4 zui:text-[var(--zui-color-text)]" })
 							]
 						})
-					}), W && !m ? /* @__PURE__ */ s(he, {
+					}), W && !m ? /* @__PURE__ */ s(ne, {
 						"data-slot": "date-picker-clear-button",
-						label: g.datePicker.clear,
-						onClear: fn
+						label: h.datePicker.clear,
+						onClear: Fn
 					}) : null]
 				}), /* @__PURE__ */ s(l.Portal, { children: /* @__PURE__ */ s(l.Content, {
 					"data-slot": "date-picker-content",
-					dir: v,
+					dir: _,
 					sideOffset: 8,
 					align: "start",
 					onOpenAutoFocus: (e) => {
 						G && e.preventDefault();
 					},
 					onInteractOutside: (e) => {
-						zt.current?.contains(e.target) && e.preventDefault();
+						nn.current?.contains(e.target) && e.preventDefault();
 					},
-					className: le(),
-					children: /* @__PURE__ */ c("div", {
-						"data-slot": "date-picker-calendar",
-						className: "zui:w-fit zui:max-w-full",
-						children: [/* @__PURE__ */ c("div", {
-							"data-slot": "date-picker-header",
-							className: ie(),
-							children: [
-								/* @__PURE__ */ s("button", {
-									type: "button",
-									"data-slot": "date-picker-nav-previous",
-									className: ae(),
-									onClick: En,
-									disabled: an,
-									"aria-label": Fn.previous,
-									children: /* @__PURE__ */ s(In, { className: "zui:size-4" })
-								}),
-								/* @__PURE__ */ c("div", {
-									"data-slot": "date-picker-switch-group",
-									className: de(),
-									children: [
-										/* @__PURE__ */ s("button", {
-											type: "button",
-											"data-slot": "date-picker-switch-month",
-											className: ue({ active: T === "month" }),
-											onClick: On,
-											children: /* @__PURE__ */ s("span", { children: Qt })
-										}),
-										/* @__PURE__ */ s("button", {
-											type: "button",
-											"data-slot": "date-picker-switch-year",
-											className: ue({ active: T === "year" }),
-											onClick: kn,
-											children: /* @__PURE__ */ s("span", { children: $t })
-										}),
-										/* @__PURE__ */ s("button", {
-											type: "button",
-											"data-slot": "date-picker-switch-calendar",
-											className: ne(),
-											onClick: dn,
-											"aria-label": g.datePicker.switchCalendar,
-											children: /* @__PURE__ */ s(Re, {
-												className: "zui:size-3.5",
-												"aria-hidden": "true"
-											})
-										})
-									]
-								}),
-								/* @__PURE__ */ s("button", {
-									type: "button",
-									"data-slot": "date-picker-nav-next",
-									className: ae(),
-									onClick: Dn,
-									disabled: on,
-									"aria-label": Fn.next,
-									children: /* @__PURE__ */ s(Ln, { className: "zui:size-4" })
-								})
-							]
-						}), /* @__PURE__ */ c("div", {
-							className: "zui:px-2 zui:pb-2 zui:pt-1.5",
-							children: [Pn ? /* @__PURE__ */ s("p", {
-								"data-slot": "date-picker-panel-hint",
-								className: se(),
-								children: Pn
-							}) : null, T === "year" ? /* @__PURE__ */ s("div", {
-								ref: Gt,
-								"data-slot": "date-picker-year-list",
-								className: me(),
-								children: tn.map((e) => /* @__PURE__ */ s("button", {
-									ref: e.isActive ? Kt : void 0,
-									type: "button",
-									"data-slot": "date-picker-year-item",
-									className: ce({ active: e.isActive }),
-									onClick: () => jn(e.value),
-									children: e.label
-								}, e.value))
-							}) : T === "month" ? /* @__PURE__ */ s("div", {
-								"data-slot": "date-picker-month-grid",
-								className: oe(),
-								children: en.map((e) => /* @__PURE__ */ s("button", {
-									type: "button",
-									"data-slot": "date-picker-month-item",
-									className: ce({ active: e.isActive }),
-									onClick: () => An(e.value),
-									children: e.label
-								}, e.value))
-							}) : b ? /* @__PURE__ */ s(Mn, {
-								...Nn,
-								mode: "range",
-								selected: w,
-								onSelect: Z,
-								min: 1
-							}) : /* @__PURE__ */ s(Mn, {
-								...Nn,
-								mode: "single",
-								selected: C,
-								onSelect: X
-							})]
-						})]
-					})
+					className: ve(),
+					children: fr
 				}) })]
 			}),
-			yt ? /* @__PURE__ */ s(_e, {
+			/* @__PURE__ */ s(ee, {
+				trigger: null,
+				open: V,
+				onOpenChange: J,
+				dir: _,
+				triggerLabel: at ?? yn,
+				showCloseButton: !1,
+				className: "zui:mobile:px-1",
+				content: /* @__PURE__ */ s("div", {
+					"data-slot": "date-picker-modal-body",
+					ref: Pt,
+					children: x ? bn ? /* @__PURE__ */ s("div", {
+						className: "zui:px-2",
+						children: /* @__PURE__ */ s(Ue, {
+							mode: y ? "range" : "single",
+							dateLib: F,
+							calendarSystem: j,
+							selection: y ? {
+								from: w?.from,
+								to: w?.to
+							} : { from: C },
+							minDate: f,
+							maxDate: p,
+							disabledMatchers: R,
+							formatMonth: (e) => a(P.monthFormatter.format(e), j, g),
+							formatDate: (e) => De(e, j, g, N),
+							onSwitchCalendar: Pn,
+							onConfirm: (e) => {
+								y ? X({
+									from: e.from,
+									to: e.to
+								}) : Y(e.from);
+							},
+							dir: _
+						})
+					}) : fr : /* @__PURE__ */ s("div", {
+						ref: It,
+						"aria-hidden": "true",
+						className: "zui:h-[max(calc(var(--zui-scale,10px)*36.8),394px)] zui:short:h-[min(394px,calc(100dvh-80px))]"
+					})
+				})
+			}),
+			Ot ? /* @__PURE__ */ s(Ge, {
 				"data-slot": "date-picker-validation",
 				hasValue: W,
 				disabled: m,
-				onInvalid: Ot
+				onInvalid: Wt
 			}) : null
 		]
 	});
 }
-var u = o.forwardRef(Je);
+var u = o.forwardRef(rt);
 u.displayName = "DatePicker";
 //#endregion
 export { u as default };