@mngh/jalali-datepicker 1.1.8 → 1.2.0

package/dist/index.mjs

@@ -232,18 +232,56 @@ function j(e) {
 	}];
 }
 //#endregion
+//#region src/core/date-availability.ts
+function M(e, t = {}) {
+	let { minDate: n, maxDate: r, isDateDisabled: i } = t;
+	return n && O(e, n) < 0 || r && O(e, r) > 0 ? !1 : !i?.(e);
+}
+function N(e, t, n = {}) {
+	let r = {
+		year: e,
+		month: t,
+		day: 1
+	}, i = {
+		year: e,
+		month: t,
+		day: g(e, t)
+	};
+	if (n.minDate && O(i, n.minDate) < 0 || n.maxDate && O(r, n.maxDate) > 0) return !1;
+	if (!n.isDateDisabled) return !0;
+	for (let r = 1; r <= i.day; r += 1) if (M({
+		year: e,
+		month: t,
+		day: r
+	}, n)) return !0;
+	return !1;
+}
+function P(e, t = {}) {
+	for (let n = 0; n < 12; n += 1) if (N(e, n, t)) return !0;
+	return !1;
+}
+//#endregion
 //#region src/hooks/useJalaliDatePicker.ts
-function M(e = {}) {
-	let { mode: t = "single", value: r, defaultValue: i, initialViewDate: o, onChange: c, minDate: l, maxDate: u, isDateDisabled: d, firstDayOfWeek: f = 0 } = e, p = a(() => y(), []), [m, h] = s(() => i === void 0 ? t === "single" ? null : t === "range" ? [null, null] : [] : i), g = r === void 0 ? m : r, [_, v] = s(() => o ? o.year : i && !Array.isArray(i) ? i.year : p.year), [x, C] = s(() => o ? o.month : i && !Array.isArray(i) ? i.month : p.month), [w, T] = s(null), E = n((e, t) => {
+function F(e = {}) {
+	let { mode: t = "single", value: r, defaultValue: i, initialViewDate: o, onChange: c, minDate: l, maxDate: u, isDateDisabled: d, firstDayOfWeek: f = 0 } = e, p = a(() => y(), []), [m, h] = s(() => i === void 0 ? t === "single" ? null : t === "range" ? [null, null] : [] : i), g = r === void 0 ? m : r, [_, v] = s(() => o ? o.year : i && !Array.isArray(i) ? i.year : p.year), [x, C] = s(() => o ? o.month : i && !Array.isArray(i) ? i.month : p.month), [w, T] = s(null), E = n((e) => M(e, {
+		minDate: l,
+		maxDate: u,
+		isDateDisabled: d
+	}), [
+		l,
+		u,
+		d
+	]), D = n((e, t) => {
 		v(e), C(t);
-	}, []), D = n(() => {
+	}, []), O = n(() => {
 		x === 0 ? (v((e) => e - 1), C(11)) : C((e) => e - 1);
-	}, [x]), O = n(() => {
-		x === 11 ? (v((e) => e + 1), C(0)) : C((e) => e + 1);
 	}, [x]), A = n(() => {
+		x === 11 ? (v((e) => e + 1), C(0)) : C((e) => e + 1);
+	}, [x]), j = n(() => {
 		let e = y();
 		v(e.year), C(e.month);
-	}, []), j = n((e) => {
+	}, []), N = n((e) => {
+		if (!E(e)) return;
 		let n;
 		if (t === "single") n = e;
 		else if (t === "range") {
@@ -258,8 +296,16 @@ function M(e = {}) {
 		t,
 		g,
 		r,
-		c
-	]), M = n(() => {
+		c,
+		E
+	]), P = n((e) => {
+		if (t === "single") return b(g, e);
+		if (t === "range") {
+			let [t, n] = g || [null, null];
+			return !!(t && b(t, e) || n && b(n, e));
+		}
+		return (g || []).some((t) => b(t, e));
+	}, [t, g]), F = n(() => {
 		let e = t === "single" ? null : t === "range" ? [null, null] : [];
 		r === void 0 && h(e), c?.(e);
 	}, [
@@ -319,19 +365,20 @@ function M(e = {}) {
 			g,
 			w
 		]),
-		goToPrevMonth: D,
-		goToNextMonth: O,
-		goToToday: A,
-		setView: E,
-		selectDate: j,
+		goToPrevMonth: O,
+		goToNextMonth: A,
+		goToToday: j,
+		setView: D,
+		selectDate: N,
+		isDateSelected: P,
 		setHoverDate: T,
 		hoverDate: w,
-		clear: M
+		clear: F
 	};
 }
 //#endregion
 //#region src/a11y/keyboard-navigation.ts
-function N(e) {
+function I(e) {
 	let { currentFocused: t, key: n, isRtl: r = !0 } = e, { year: i, month: a, day: o } = t, s = !1, c = !0, l = r ? 1 : -1, u = r ? -1 : 1;
 	switch (n) {
 		case "ArrowRight":
@@ -378,13 +425,13 @@ function N(e) {
 }
 //#endregion
 //#region src/a11y/aria-helpers.ts
-function P(e) {
+function L(e) {
 	let t = m[(v(e.year, e.month, e.day).getDay() + 1) % 7], n = d[e.month];
 	return `${t}، ${e.day} ${n} ${e.year}`;
 }
 //#endregion
 //#region src/a11y/useCalendarKeyboard.ts
-function F(e) {
+function R(e) {
 	let { viewYear: t, viewMonth: r, selectedDate: i, onSelectDate: a, onViewChange: o, isRtl: c = !0 } = e, [l, u] = s(() => i ?? {
 		year: t,
 		month: r,
@@ -398,7 +445,7 @@ function F(e) {
 				e.preventDefault(), a(l);
 				return;
 			}
-			let t = N({
+			let t = I({
 				currentFocused: l,
 				key: e.key,
 				isRtl: c
@@ -415,7 +462,7 @@ function F(e) {
 }
 //#endregion
 //#region src/formatters/persian-digits.ts
-var I = [
+var ee = [
 	"۰",
 	"۱",
 	"۲",
@@ -426,7 +473,7 @@ var I = [
 	"۷",
 	"۸",
 	"۹"
-], ee = {
+], te = {
 	"۰": "0",
 	"۱": "1",
 	"۲": "2",
@@ -448,22 +495,22 @@ var I = [
 	"٨": "8",
 	"٩": "9"
 };
-function L(e) {
-	return String(e).replace(/[0-9]/g, (e) => I[+e]);
+function z(e) {
+	return String(e).replace(/[0-9]/g, (e) => ee[+e]);
 }
-function R(e) {
-	return e.replace(/[۰-۹٠-٩]/g, (e) => ee[e] ?? e);
+function B(e) {
+	return e.replace(/[۰-۹٠-٩]/g, (e) => te[e] ?? e);
 }
 //#endregion
 //#region src/formatters/jalali-formatter.ts
-function z(e, t = "YYYY/MM/DD", n = {}) {
+function V(e, t = "YYYY/MM/DD", n = {}) {
 	if (!e) return "";
 	let { digitType: r = "persian" } = n, i = (v(e.year, e.month, e.day).getDay() + 1) % 7, a = String(e.year), o = a.slice(-2), s = e.month + 1, c = s < 10 ? `0${s}` : String(s), l = d[e.month], u = e.day < 10 ? `0${e.day}` : String(e.day), f = m[i], p = t.replace(/\bYYYY\b/g, a).replace(/\bYY\b/g, o).replace(/\bMMMM\b/g, l).replace(/\bMM\b/g, c).replace(/\bM\b/g, String(s)).replace(/\bdddd\b/g, f).replace(/\bDD\b/g, u).replace(/\bD\b/g, String(e.day));
-	return r === "persian" && (p = p.replace(/\d+/g, (e) => L(e))), p;
+	return r === "persian" && (p = p.replace(/\d+/g, (e) => z(e))), p;
 }
 //#endregion
 //#region src/theme/tokens.ts
-var B = {
+var H = {
 	mode: "light",
 	colors: {
 		primary: "#4f46e5",
@@ -492,7 +539,7 @@ var B = {
 		md: "0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04)",
 		lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05)"
 	}
-}, V = {
+}, ne = {
 	mode: "dark",
 	colors: {
 		primary: "#6366f1",
@@ -521,14 +568,14 @@ var B = {
 		md: "0 4px 6px -1px rgba(0, 0, 0, 0.4)",
 		lg: "0 10px 15px -3px rgba(0, 0, 0, 0.5)"
 	}
-}, H = t({
-	theme: B,
+}, re = t({
+	theme: H,
 	mode: "light"
-}), U = () => r(H) || {
-	theme: B,
+}), U = () => r(re) || {
+	theme: H,
 	mode: "light"
-}, te = ({ children: e, mode: t = "light", customTheme: n }) => {
-	let r = t === "dark" ? V : B, i = a(() => n ? {
+}, ie = ({ children: e, mode: t = "light", customTheme: n }) => {
+	let r = t === "dark" ? ne : H, i = a(() => n ? {
 		mode: t,
 		theme: {
 			...r,
@@ -555,29 +602,39 @@ var B = {
 		n,
 		t
 	]);
-	return /* @__PURE__ */ l(H.Provider, {
+	return /* @__PURE__ */ l(re.Provider, {
 		value: i,
 		children: e
 	});
-}, ne = ({ year: e, monthName: t, onPrevMonth: n, onNextMonth: r, onTitleClick: i, isPickerOpen: a = !1, digitType: o = "persian", direction: c = "rtl", classNames: d, styles: f }) => {
-	let { theme: p } = U(), [m, h] = s(null), g = o === "persian" ? L(e) : String(e), _ = (e) => ({
+};
+//#endregion
+//#region src/theme/style-utils.ts
+function W(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+//#endregion
+//#region src/components/Header.tsx
+var G = ({ year: e, monthName: t, onPrevMonth: n, onNextMonth: r, onTitleClick: i, isPickerOpen: a = !1, digitType: o = "persian", direction: c = "rtl", isPrevDisabled: d = !1, isNextDisabled: f = !1, classNames: p, styles: m }) => {
+	let { theme: h } = U(), [g, _] = s(null), v = o === "persian" ? z(e) : String(e), y = (e, t) => ({
 		width: "32px",
 		height: "32px",
 		padding: 0,
-		borderRadius: p.radii.md,
+		borderRadius: h.radii.md,
 		border: "none",
-		backgroundColor: m === e ? p.colors.backgroundHover : "transparent",
-		color: p.colors.textPrimary,
-		cursor: "pointer",
+		backgroundColor: g === e ? h.colors.backgroundHover : "transparent",
+		color: h.colors.textPrimary,
+		cursor: t ? "not-allowed" : "pointer",
+		opacity: t ? .38 : 1,
 		display: "inline-flex",
 		alignItems: "center",
 		justifyContent: "center",
 		transition: "background-color 0.15s ease, color 0.15s ease",
-		...f?.navButton
+		...m?.navButton,
+		...t ? m?.disabledNavButton : void 0
 	});
 	return /* @__PURE__ */ u("div", {
 		dir: c,
-		className: d?.header,
+		className: p?.header,
 		style: {
 			display: "flex",
 			minHeight: "40px",
@@ -585,19 +642,21 @@ var B = {
 			justifyContent: "space-between",
 			gap: "8px",
 			padding: "4px 0 10px",
-			borderBottom: `1px solid ${p.colors.border}`,
+			borderBottom: `1px solid ${h.colors.border}`,
 			userSelect: "none",
-			...f?.header
+			...m?.header
 		},
 		children: [
 			/* @__PURE__ */ l("button", {
 				type: "button",
 				onClick: n,
+				disabled: d,
+				"aria-disabled": d,
 				"aria-label": "ماه قبل",
-				className: d?.navButton,
-				style: _("prev"),
-				onMouseEnter: () => h("prev"),
-				onMouseLeave: () => h(null),
+				className: W(p?.navButton, d && p?.disabledNavButton),
+				style: y("prev", d),
+				onMouseEnter: () => _("prev"),
+				onMouseLeave: () => _(null),
 				children: /* @__PURE__ */ l("svg", {
 					width: "18",
 					height: "18",
@@ -616,14 +675,14 @@ var B = {
 				type: "button",
 				onClick: i,
 				"aria-expanded": a,
-				className: d?.headerTitle,
+				className: p?.headerTitle,
 				style: {
 					minHeight: "32px",
 					padding: "6px 12px",
-					borderRadius: p.radii.md,
+					borderRadius: h.radii.md,
 					border: "none",
-					backgroundColor: a || m === "title" ? p.colors.backgroundHover : "transparent",
-					color: p.colors.textPrimary,
+					backgroundColor: a || g === "title" ? h.colors.backgroundHover : "transparent",
+					color: h.colors.textPrimary,
 					cursor: i ? "pointer" : "default",
 					display: "inline-flex",
 					alignItems: "center",
@@ -633,14 +692,14 @@ var B = {
 					fontWeight: 700,
 					whiteSpace: "nowrap",
 					transition: "background-color 0.15s ease",
-					...f?.headerTitle
+					...m?.headerTitle
 				},
-				onMouseEnter: () => h("title"),
-				onMouseLeave: () => h(null),
+				onMouseEnter: () => _("title"),
+				onMouseLeave: () => _(null),
 				children: [/* @__PURE__ */ u("span", { children: [
 					t,
 					" ",
-					g
+					v
 				] }), /* @__PURE__ */ l("svg", {
 					width: "14",
 					height: "14",
@@ -661,11 +720,13 @@ var B = {
 			/* @__PURE__ */ l("button", {
 				type: "button",
 				onClick: r,
+				disabled: f,
+				"aria-disabled": f,
 				"aria-label": "ماه بعد",
-				className: d?.navButton,
-				style: _("next"),
-				onMouseEnter: () => h("next"),
-				onMouseLeave: () => h(null),
+				className: W(p?.navButton, f && p?.disabledNavButton),
+				style: y("next", f),
+				onMouseEnter: () => _("next"),
+				onMouseLeave: () => _(null),
 				children: /* @__PURE__ */ l("svg", {
 					width: "18",
 					height: "18",
@@ -682,7 +743,7 @@ var B = {
 			})
 		]
 	});
-}, re = ({ firstDayOfWeek: t = 0, classNames: n, styles: r }) => {
+}, ae = ({ firstDayOfWeek: t = 0, classNames: n, styles: r }) => {
 	let i = e.useMemo(() => {
 		let e = [...p];
 		return [...e.slice(t), ...e.slice(0, t)];
@@ -692,7 +753,7 @@ var B = {
 		className: n?.weekdays,
 		style: {
 			display: "grid",
-			gridTemplateColumns: "repeat(7, var(--pdp-cell-size, 34px))",
+			gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
 			gap: "4px",
 			justifyContent: "center",
 			alignItems: "center",
@@ -707,7 +768,8 @@ var B = {
 				"aria-label": e,
 				className: n?.weekdayCell,
 				style: {
-					width: "var(--pdp-cell-size, 34px)",
+					width: "100%",
+					minWidth: 0,
 					height: "24px",
 					display: "flex",
 					alignItems: "center",
@@ -722,8 +784,8 @@ var B = {
 			}, e);
 		})
 	});
-}, ie = ({ cell: e, digitType: t = "persian", isHoliday: n = !1, holidayTitle: r, events: i = [], tabIndex: a = -1, classNames: o, styles: c, onSelect: d, onHover: f, onFocus: p }) => {
-	let [m, h] = s(!1), [g, _] = s(!1), { jalali: v, dayNumber: y, isCurrentMonth: b, isToday: x, isSelected: S, isDisabled: C, isInRange: w, isRangeStart: T, isRangeEnd: E } = e, D = t === "persian" ? L(y) : R(y.toString()), O = !C && b, k = (e) => {
+}, oe = ({ cell: e, digitType: t = "persian", isHoliday: n = !1, holidayTitle: r, events: i = [], tabIndex: a = -1, classNames: o, styles: c, onSelect: d, onHover: f, onFocus: p }) => {
+	let [m, h] = s(!1), [g, _] = s(!1), { jalali: v, dayNumber: y, isCurrentMonth: b, isToday: x, isSelected: S, isDisabled: C, isInRange: w, isRangeStart: T, isRangeEnd: E } = e, D = t === "persian" ? z(y) : B(y.toString()), O = !C && b, k = (e) => {
 		e.stopPropagation(), O && d(v);
 	}, A = () => {
 		h(!0), O && f && f(v);
@@ -732,16 +794,26 @@ var B = {
 	}, M = () => {
 		O && p && p(v);
 	}, N = "transparent", P = b ? "var(--pdp-text-primary, #0f172a)" : "var(--pdp-text-disabled, #cbd5e1)", F = T || E;
-	S || F ? (N = "var(--pdp-primary, #4f46e5)", P = "#ffffff") : w ? N = "var(--pdp-range-between-bg, rgba(79, 70, 229, 0.12))" : m && O && (N = "var(--pdp-hover-bg, #f1f5f9)"), n && b && !S && !F && (P = "var(--pdp-holiday-color, #e11d48)");
-	let I = "scale(1)";
-	return O && (g ? I = "scale(0.92)" : m && !w && (I = "scale(1.08)")), /* @__PURE__ */ u("div", {
+	S || F ? (N = "var(--pdp-primary, #4f46e5)", P = "#ffffff") : w ? N = "var(--pdp-range-between-bg, rgba(79, 70, 229, 0.12))" : m && O && (N = "var(--pdp-hover-bg, #f1f5f9)"), n && b && !C && !S && !F && (P = "var(--pdp-holiday-color, #e11d48)"), C && (N = "var(--pdp-disabled-bg, #f1f5f9)", P = "var(--pdp-text-disabled, #94a3b8)");
+	let I = W(o?.dayCell, x && o?.todayCell, S && o?.selectedCell, w && o?.rangeBetweenCell, T && o?.rangeStartCell, E && o?.rangeEndCell, C && o?.disabledCell, !b && o?.outsideMonthCell, n && o?.holidayCell), L = {
+		...x ? c?.todayCell : void 0,
+		...S ? c?.selectedCell : void 0,
+		...w ? c?.rangeBetweenCell : void 0,
+		...T ? c?.rangeStartCell : void 0,
+		...E ? c?.rangeEndCell : void 0,
+		...b ? void 0 : c?.outsideMonthCell,
+		...n ? c?.holidayCell : void 0,
+		...C ? c?.disabledCell : void 0
+	}, R = "scale(1)";
+	return O && (g ? R = "scale(0.92)" : m && !w && (R = "scale(1.08)")), /* @__PURE__ */ u("div", {
 		style: {
 			position: "relative",
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
-			width: "var(--pdp-cell-size, 34px)",
-			height: "var(--pdp-cell-size, 34px)",
+			width: "100%",
+			minWidth: 0,
+			aspectRatio: "1 / 1",
 			margin: 0,
 			padding: 0,
 			boxSizing: "border-box"
@@ -753,13 +825,14 @@ var B = {
 			role: "gridcell",
 			tabIndex: a,
 			disabled: C || !b,
+			"aria-disabled": C || !b,
 			"aria-selected": S,
 			"aria-label": `${v.year}/${v.month + 1}/${v.day}${r ? ` - ${r}` : ""}`,
 			onClick: k,
 			onFocus: M,
 			onMouseDown: () => O && _(!0),
 			onMouseUp: () => O && _(!1),
-			className: o?.dayCell,
+			className: I,
 			style: {
 				width: "100%",
 				height: "100%",
@@ -771,7 +844,7 @@ var B = {
 				border: x && !S ? "1px solid var(--pdp-primary, #4f46e5)" : "none",
 				backgroundColor: N,
 				color: P,
-				cursor: O ? "pointer" : "default",
+				cursor: C ? "not-allowed" : O ? "pointer" : "default",
 				fontSize: "13px",
 				fontWeight: S || x ? 700 : 500,
 				outline: "none",
@@ -779,11 +852,14 @@ var B = {
 				padding: 0,
 				margin: 0,
 				boxSizing: "border-box",
-				transform: I,
+				transform: R,
 				boxShadow: m && O && !w && !S ? "0 2px 6px rgba(0, 0, 0, 0.08)" : "none",
 				transition: "transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.14s ease, color 0.14s ease, box-shadow 0.16s ease",
 				zIndex: m && O ? 2 : 1,
-				...c?.dayCell
+				opacity: C ? .42 : b ? 1 : .55,
+				filter: C ? "grayscale(0.65)" : void 0,
+				...c?.dayCell,
+				...L
 			},
 			children: [/* @__PURE__ */ l("span", { children: D }), i.length > 0 && /* @__PURE__ */ l("div", {
 				style: {
@@ -849,18 +925,26 @@ var B = {
 			]
 		})]
 	});
-}, ae = ({ currentYear: e, currentMonth: t, onSelectMonth: n, onSelectYear: r, classNames: i, styles: a }) => {
-	let [o, c] = s("months"), [f, p] = s(() => Math.floor(e / 10) * 10), [m, h] = s(e), g = Array.from({ length: 12 }, (e, t) => f - 1 + t), _ = () => {
-		if (o === "months") {
-			let e = m - 1;
-			h(e), r(e);
-		} else p((e) => e - 10);
-	}, v = () => {
-		if (o === "months") {
-			let e = m + 1;
-			h(e), r(e);
-		} else p((e) => e + 10);
-	}, y = {
+}, se = ({ currentYear: e, currentMonth: t, onSelectMonth: n, onSelectYear: r, minDate: i, maxDate: a, isDateDisabled: o, classNames: c, styles: f }) => {
+	let [p, m] = s("months"), [h, g] = s(() => Math.floor(e / 10) * 10), [_, v] = s(e), y = Array.from({ length: 12 }, (e, t) => h - 1 + t), b = {
+		minDate: i,
+		maxDate: a,
+		isDateDisabled: o
+	}, x = (e) => P(e, b), S = (e, t) => N(e, t, b), C = p === "months" ? !x(_ - 1) : !Array.from({ length: 10 }, (e, t) => h - 10 + t).some(x), w = p === "months" ? !x(_ + 1) : !Array.from({ length: 10 }, (e, t) => h + 10 + t).some(x), T = () => {
+		if (!C) {
+			if (p === "months") {
+				let e = _ - 1;
+				v(e), r(e);
+			} else g((e) => e - 10);
+		}
+	}, E = () => {
+		if (!w) {
+			if (p === "months") {
+				let e = _ + 1;
+				v(e), r(e);
+			} else g((e) => e + 10);
+		}
+	}, D = {
 		background: "transparent",
 		border: "none",
 		cursor: "pointer",
@@ -871,7 +955,7 @@ var B = {
 		justifyContent: "center",
 		color: "var(--pdp-text-primary, #0f172a)",
 		transition: "all 0.15s ease"
-	}, b = {
+	}, O = {
 		height: "46px",
 		borderRadius: "10px",
 		border: "none",
@@ -887,19 +971,20 @@ var B = {
 		userSelect: "none"
 	};
 	return /* @__PURE__ */ u("div", {
-		className: i?.calendar,
+		className: c?.calendar,
 		style: {
 			display: "flex",
 			flexDirection: "column",
 			gap: "10px",
 			width: "100%",
-			minWidth: "260px",
+			minWidth: 0,
+			maxWidth: "100%",
 			height: "260px",
 			padding: "6px",
 			boxSizing: "border-box",
 			justifyContent: "space-between",
 			userSelect: "none",
-			...a?.calendar
+			...f?.calendar
 		},
 		children: [/* @__PURE__ */ u("div", {
 			style: {
@@ -912,9 +997,17 @@ var B = {
 			children: [
 				/* @__PURE__ */ l("button", {
 					type: "button",
-					onClick: _,
+					onClick: T,
+					disabled: C,
+					"aria-disabled": C,
 					"aria-label": "Previous",
-					style: y,
+					className: W(c?.navButton, C && c?.disabledNavButton),
+					style: {
+						...D,
+						cursor: C ? "not-allowed" : "pointer",
+						opacity: C ? .38 : 1,
+						...C ? f?.disabledNavButton : void 0
+					},
 					onMouseEnter: (e) => {
 						e.currentTarget.style.backgroundColor = "var(--pdp-hover-bg, #f1f5f9)";
 					},
@@ -936,12 +1029,12 @@ var B = {
 				/* @__PURE__ */ u("button", {
 					type: "button",
 					onClick: () => {
-						o === "months" && (p(Math.floor(m / 10) * 10), c("years"));
+						p === "months" && (g(Math.floor(_ / 10) * 10), m("years"));
 					},
 					style: {
-						background: o === "months" ? "var(--pdp-surface-subtle, #f1f5f9)" : "transparent",
-						border: o === "months" ? "1px solid var(--pdp-surface-border, #e2e8f0)" : "none",
-						cursor: o === "months" ? "pointer" : "default",
+						background: p === "months" ? "var(--pdp-surface-subtle, #f1f5f9)" : "transparent",
+						border: p === "months" ? "1px solid var(--pdp-surface-border, #e2e8f0)" : "none",
+						cursor: p === "months" ? "pointer" : "default",
 						fontSize: "13.5px",
 						fontWeight: 700,
 						color: "var(--pdp-text-primary, #0f172a)",
@@ -953,12 +1046,12 @@ var B = {
 						transition: "all 0.15s ease"
 					},
 					onMouseEnter: (e) => {
-						o === "months" && (e.currentTarget.style.backgroundColor = "var(--pdp-hover-bg, #e2e8f0)", e.currentTarget.style.borderColor = "var(--pdp-primary, #4f46e5)");
+						p === "months" && (e.currentTarget.style.backgroundColor = "var(--pdp-hover-bg, #e2e8f0)", e.currentTarget.style.borderColor = "var(--pdp-primary, #4f46e5)");
 					},
 					onMouseLeave: (e) => {
-						o === "months" && (e.currentTarget.style.backgroundColor = "var(--pdp-surface-subtle, #f1f5f9)", e.currentTarget.style.borderColor = "var(--pdp-surface-border, #e2e8f0)");
+						p === "months" && (e.currentTarget.style.backgroundColor = "var(--pdp-surface-subtle, #f1f5f9)", e.currentTarget.style.borderColor = "var(--pdp-surface-border, #e2e8f0)");
 					},
-					children: [/* @__PURE__ */ l("span", { children: o === "months" ? L(m) : `${L(f)} - ${L(f + 9)}` }), o === "months" && /* @__PURE__ */ l("svg", {
+					children: [/* @__PURE__ */ l("span", { children: p === "months" ? z(_) : `${z(h)} - ${z(h + 9)}` }), p === "months" && /* @__PURE__ */ l("svg", {
 						width: "13",
 						height: "13",
 						viewBox: "0 0 24 24",
@@ -973,9 +1066,17 @@ var B = {
 				}),
 				/* @__PURE__ */ l("button", {
 					type: "button",
-					onClick: v,
+					onClick: E,
+					disabled: w,
+					"aria-disabled": w,
 					"aria-label": "Next",
-					style: y,
+					className: W(c?.navButton, w && c?.disabledNavButton),
+					style: {
+						...D,
+						cursor: w ? "not-allowed" : "pointer",
+						opacity: w ? .38 : 1,
+						...w ? f?.disabledNavButton : void 0
+					},
 					onMouseEnter: (e) => {
 						e.currentTarget.style.backgroundColor = "var(--pdp-hover-bg, #f1f5f9)";
 					},
@@ -1004,16 +1105,24 @@ var B = {
 				flex: 1,
 				alignItems: "center"
 			},
-			children: o === "months" ? d.map((r, i) => {
-				let a = i === t && m === e;
+			children: p === "months" ? d.map((r, i) => {
+				let a = i === t && _ === e, o = !S(_, i);
 				return /* @__PURE__ */ l("button", {
 					type: "button",
+					disabled: o,
+					"aria-disabled": o,
 					onClick: () => n(i),
+					className: W(c?.monthButton, a && c?.selectedMonthButton, o && c?.disabledMonthButton),
 					style: {
-						...b,
+						...O,
 						background: a ? "var(--pdp-primary, #4f46e5)" : "transparent",
 						color: a ? "#ffffff" : "var(--pdp-text-primary, #0f172a)",
-						fontWeight: a ? 700 : 500
+						fontWeight: a ? 700 : 500,
+						cursor: o ? "not-allowed" : "pointer",
+						opacity: o ? .35 : 1,
+						...f?.monthButton ?? {},
+						...a ? f?.selectedMonthButton : void 0,
+						...o ? f?.disabledMonthButton : void 0
 					},
 					onMouseEnter: (e) => {
 						a || (e.currentTarget.style.backgroundColor = "var(--pdp-hover-bg, #f1f5f9)");
@@ -1023,19 +1132,26 @@ var B = {
 					},
 					children: r
 				}, r);
-			}) : g.map((e, t) => {
-				let n = t === 0 || t === 11, i = e === m;
+			}) : y.map((e, t) => {
+				let n = t === 0 || t === 11, i = e === _, a = !x(e);
 				return /* @__PURE__ */ l("button", {
 					type: "button",
+					disabled: a,
+					"aria-disabled": a,
+					className: W(c?.yearButton, i && c?.selectedYearButton, a && c?.disabledYearButton),
 					onClick: () => {
-						h(e), r(e), c("months");
+						v(e), r(e), m("months");
 					},
 					style: {
-						...b,
+						...O,
 						background: i ? "var(--pdp-primary, #4f46e5)" : "transparent",
 						color: i ? "#ffffff" : n ? "var(--pdp-text-disabled, #94a3b8)" : "var(--pdp-text-primary, #0f172a)",
 						fontWeight: i ? 700 : 500,
-						opacity: n ? .4 : 1
+						cursor: a ? "not-allowed" : "pointer",
+						opacity: a ? .3 : n ? .4 : 1,
+						...f?.yearButton ?? {},
+						...i ? f?.selectedYearButton : void 0,
+						...a ? f?.disabledYearButton : void 0
 					},
 					onMouseEnter: (e) => {
 						i || (e.currentTarget.style.backgroundColor = "var(--pdp-hover-bg, #f1f5f9)");
@@ -1043,7 +1159,7 @@ var B = {
 					onMouseLeave: (e) => {
 						i || (e.currentTarget.style.backgroundColor = "transparent");
 					},
-					children: L(e)
+					children: z(e)
 				}, e);
 			})
 		})]
@@ -1051,11 +1167,11 @@ var B = {
 };
 //#endregion
 //#region src/plugins/time-picker/time-utils.ts
-function W(e, t = "persian") {
+function K(e, t = "persian") {
 	let n = e < 10 ? `0${e}` : `${e}`;
-	return t === "persian" ? L(n) : n;
+	return t === "persian" ? z(n) : n;
 }
-function oe() {
+function ce() {
 	let e = /* @__PURE__ */ new Date();
 	return {
 		hour: e.getHours(),
@@ -1063,34 +1179,34 @@ function oe() {
 		second: e.getSeconds()
 	};
 }
-function se(e) {
+function q(e) {
 	return {
 		hour: Math.max(0, Math.min(23, e.hour)),
 		minute: Math.max(0, Math.min(59, e.minute)),
 		second: e.second === void 0 ? void 0 : Math.max(0, Math.min(59, e.second))
 	};
 }
-function ce(e, t = !1, n = "persian") {
+function le(e, t = !1, n = "persian") {
 	if (!e) return "";
-	let r = W(e.hour, n), i = W(e.minute, n);
-	return t && e.second !== void 0 ? `${r}:${i}:${W(e.second, n)}` : `${r}:${i}`;
+	let r = K(e.hour, n), i = K(e.minute, n);
+	return t && e.second !== void 0 ? `${r}:${i}:${K(e.second, n)}` : `${r}:${i}`;
 }
 //#endregion
 //#region src/components/footer/CalendarFooter.tsx
-var le = ({ selectedDate: e, selectedRange: t, selectedDates: n, selectedTime: r, showSeconds: i = !1, mode: a = "single", digitType: o = "persian", showStatusText: s = !0, showActions: c = !0, onToday: d, onClear: f, onConfirm: p, direction: m = "rtl", classNames: h, styles: g }) => {
+var ue = ({ selectedDate: e, selectedRange: t, selectedDates: n, selectedTime: r, showSeconds: i = !1, mode: a = "single", digitType: o = "persian", showStatusText: s = !0, showActions: c = !0, onToday: d, onClear: f, onConfirm: p, direction: m = "rtl", classNames: h, styles: g }) => {
 	let { theme: _ } = U(), v = (() => {
 		if (a === "single") {
 			if (!e) return "تاریخی انتخاب نشده";
-			let t = z(e, "YYYY/MM/DD", { digitType: o }), n = r ? ce(r, i, o) : "";
+			let t = V(e, "YYYY/MM/DD", { digitType: o }), n = r ? le(r, i, o) : "";
 			return n ? `${t}، ${n}` : t;
 		}
 		if (a === "range") {
 			let [e, n] = t ?? [null, null];
 			if (!e) return "بازه‌ای انتخاب نشده";
-			let r = z(e, "YYYY/MM/DD", { digitType: o });
-			return n ? `${r} تا ${z(n, "YYYY/MM/DD", { digitType: o })}` : `${r} تا …`;
+			let r = V(e, "YYYY/MM/DD", { digitType: o });
+			return n ? `${r} تا ${V(n, "YYYY/MM/DD", { digitType: o })}` : `${r} تا …`;
 		}
-		let s = n?.length ?? 0, c = o === "persian" ? L(s) : String(s);
+		let s = n?.length ?? 0, c = o === "persian" ? z(s) : String(s);
 		return s ? `${c} تاریخ انتخاب شده` : "تاریخی انتخاب نشده";
 	})(), y = {
 		minHeight: "34px",
@@ -1113,6 +1229,9 @@ var le = ({ selectedDate: e, selectedRange: t, selectedDates: n, selectedTime: r
 			justifyContent: s ? "space-between" : "flex-end",
 			flexWrap: "wrap",
 			gap: "8px",
+			width: "100%",
+			minWidth: 0,
+			boxSizing: "border-box",
 			padding: "10px 0 0",
 			borderTop: `1px solid ${_.colors.border}`,
 			color: _.colors.textPrimary,
@@ -1124,6 +1243,8 @@ var le = ({ selectedDate: e, selectedRange: t, selectedDates: n, selectedTime: r
 				color: _.colors.textSecondary,
 				fontSize: "0.78rem",
 				lineHeight: 1.5,
+				minWidth: 0,
+				overflowWrap: "anywhere",
 				...g?.footerStatus
 			},
 			children: v
@@ -1174,7 +1295,7 @@ var le = ({ selectedDate: e, selectedRange: t, selectedDates: n, selectedTime: r
 			]
 		})]
 	});
-}, ue = ({ value: e, onChange: t, minuteStep: n = 1, hourStep: r = 1, showSeconds: a = !1, digitType: d = "persian", classNames: f, styles: p }) => {
+}, de = ({ value: e, onChange: t, minuteStep: n = 1, hourStep: r = 1, showSeconds: a = !1, digitType: d = "persian", classNames: f, styles: p }) => {
 	let [m, h] = s(null), g = o(null), _ = Array.from({ length: Math.ceil(24 / r) }, (e, t) => t * r), v = Array.from({ length: Math.ceil(60 / n) }, (e, t) => t * n), y = Array.from({ length: 60 }, (e, t) => t);
 	i(() => {
 		let e = (e) => {
@@ -1186,7 +1307,7 @@ var le = ({ selectedDate: e, selectedRange: t, selectedDates: n, selectedTime: r
 	}, []);
 	let b = (e) => {
 		let t = String(e).padStart(2, "0");
-		return d === "persian" ? L(t) : t;
+		return d === "persian" ? z(t) : t;
 	}, x = (e, t, n, r) => {
 		let i = m === e;
 		return /* @__PURE__ */ u("div", {
@@ -1274,6 +1395,7 @@ var le = ({ selectedDate: e, selectedRange: t, selectedDates: n, selectedTime: r
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
+			flexWrap: "wrap",
 			gap: "6px",
 			padding: "6px 12px",
 			borderTop: "1px solid var(--pdp-surface-border, #e2e8f0)",
@@ -1281,6 +1403,9 @@ var le = ({ selectedDate: e, selectedRange: t, selectedDates: n, selectedTime: r
 			borderRadius: "0 0 var(--pdp-border-radius, 10px) var(--pdp-border-radius, 10px)",
 			direction: "ltr",
 			userSelect: "none",
+			width: "100%",
+			maxWidth: "100%",
+			boxSizing: "border-box",
 			...p?.timePicker
 		},
 		children: [
@@ -1316,12 +1441,12 @@ var le = ({ selectedDate: e, selectedRange: t, selectedDates: n, selectedTime: r
 };
 //#endregion
 //#region src/components/masked-input/mask-utils.ts
-function G(e, t = "persian") {
-	let n = R(e).replace(/\D/g, "").slice(0, 8), r = "";
-	return n.length > 0 && (r = n.slice(0, 4)), n.length >= 5 && (r += `/${n.slice(4, 6)}`), n.length >= 7 && (r += `/${n.slice(6, 8)}`), t === "persian" ? L(r) : r;
+function fe(e, t = "persian") {
+	let n = B(e).replace(/\D/g, "").slice(0, 8), r = "";
+	return n.length > 0 && (r = n.slice(0, 4)), n.length >= 5 && (r += `/${n.slice(4, 6)}`), n.length >= 7 && (r += `/${n.slice(6, 8)}`), t === "persian" ? z(r) : r;
 }
-function K(e, t, n, r) {
-	let i = R(e).trim();
+function pe(e, t, n, r) {
+	let i = B(e).trim();
 	if (!i) return {
 		isValid: !0,
 		date: null
@@ -1368,15 +1493,15 @@ function K(e, t, n, r) {
 }
 //#endregion
 //#region src/components/masked-input/MaskedDateInput.tsx
-var de = ({ value: e, defaultValue: t = null, onChange: r, onValidationError: a, digitType: c = "persian", minDate: d, maxDate: f, isDateDisabled: p, clearable: m = !0, placeholder: h = "۱۴۰۵/۰۱/۱۵", disabled: g = !1, direction: _ = "rtl", wrapperClassName: v, wrapperStyle: y, clearButtonClassName: b, clearButtonStyle: x, style: S, ...C }) => {
-	let { theme: w } = U(), [T, E] = s(t), D = e === void 0 ? T : e, [O, k] = s(() => D ? z(D, "YYYY/MM/DD", { digitType: c }) : ""), [A, j] = s(!1), M = o(null);
+var me = ({ value: e, defaultValue: t = null, onChange: r, onValidationError: a, digitType: c = "persian", minDate: d, maxDate: f, isDateDisabled: p, clearable: m = !0, placeholder: h = "۱۴۰۵/۰۱/۱۵", disabled: g = !1, direction: _ = "rtl", wrapperClassName: v, wrapperStyle: y, clearButtonClassName: b, clearButtonStyle: x, style: S, ...C }) => {
+	let { theme: w } = U(), [T, E] = s(t), D = e === void 0 ? T : e, [O, k] = s(() => D ? V(D, "YYYY/MM/DD", { digitType: c }) : ""), [A, j] = s(!1), M = o(null);
 	i(() => {
-		e !== void 0 && (k(e ? z(e, "YYYY/MM/DD", { digitType: c }) : ""), j(!1));
+		e !== void 0 && (k(e ? V(e, "YYYY/MM/DD", { digitType: c }) : ""), j(!1));
 	}, [e, c]);
 	let N = (t) => {
-		let n = t.target.value, i = G(n, c);
+		let n = t.target.value, i = fe(n, c);
 		if (k(i), i.length === 10 || i.length === 0) {
-			let t = K(i, d, f, p);
+			let t = pe(i, d, f, p);
 			t.isValid ? (j(!1), a?.(null), e === void 0 && E(t.date), r?.(t.date)) : (j(!0), a?.(t.error));
 		} else j(!1), a?.(null);
 	}, P = n(() => {
@@ -1393,6 +1518,8 @@ var de = ({ value: e, defaultValue: t = null, onChange: r, onValidationError: a,
 			position: "relative",
 			display: "inline-flex",
 			alignItems: "center",
+			width: "100%",
+			maxWidth: "180px",
 			...y
 		},
 		children: [/* @__PURE__ */ l("input", {
@@ -1405,6 +1532,9 @@ var de = ({ value: e, defaultValue: t = null, onChange: r, onValidationError: a,
 			onChange: N,
 			style: {
 				width: "180px",
+				maxWidth: "100%",
+				minWidth: 0,
+				boxSizing: "border-box",
 				padding: "8px 12px",
 				paddingInlineEnd: m && O ? "32px" : "12px",
 				borderRadius: w.radii.sm,
@@ -1446,12 +1576,12 @@ var de = ({ value: e, defaultValue: t = null, onChange: r, onValidationError: a,
 };
 //#endregion
 //#region src/events/event-utils.ts
-function fe(e, t) {
+function he(e, t) {
 	return !t || t.length === 0 ? [] : t.filter((t) => b(t.date, e));
 }
 //#endregion
 //#region src/holidays/iran-holidays.ts
-var pe = {
+var ge = {
 	"0-1": "جشن نوروز / سال نو",
 	"0-2": "عید نوروز",
 	"0-3": "عید نوروز",
@@ -1463,10 +1593,10 @@ var pe = {
 	"10-22": "پیروزی انقلاب اسلامی",
 	"11-29": "روز ملی شدن صنعت نفت"
 };
-function q(e) {
+function J(e) {
 	return v(e.year, e.month, e.day).getDay() === 5;
 }
-function me(e, t) {
+function _e(e, t) {
 	if (t && t.length > 0) {
 		let n = t.find((t) => t.date.year === e.year && t.date.month === e.month && t.date.day === e.day);
 		if (n) return {
@@ -1476,11 +1606,11 @@ function me(e, t) {
 		};
 	}
 	let n = `${e.month}-${e.day}`;
-	return pe[n] ? {
-		title: pe[n],
+	return ge[n] ? {
+		title: ge[n],
 		type: "solar",
 		isOff: !0
-	} : q(e) ? {
+	} : J(e) ? {
 		title: "جمعه (تعطیل پایان هفته)",
 		type: "solar",
 		isOff: !0
@@ -1488,8 +1618,12 @@ function me(e, t) {
 }
 //#endregion
 //#region src/components/JalaliDatePicker.tsx
-function he({ mode: e = "single", value: t, defaultValue: r, onChange: f, minDate: p, maxDate: m, isDateDisabled: h, firstDayOfWeek: g = 0, variant: _ = "popover", placeholder: v = "YYYY/MM/DD", digitType: y = "persian", className: x, style: T, classNames: E, styles: D, showFooter: O = !0, showStatusText: A = !0, allowClear: j = !0, enableTime: N = !1, timeValue: P, defaultTimeValue: I, onTimeChange: ee, minuteStep: R = 1, hourStep: B = 1, showSeconds: V = !1, numberOfMonths: H = 1, useMaskedInput: U = !1, events: te, showHolidays: W = !1, customHolidays: se }) {
-	let [G, K] = s(_ === "inline"), [pe, q] = s(!1), he = o(null), J = _ === "modal", ge = a(() => I || (t instanceof Date ? {
+function ve({ mode: e = "single", value: t, defaultValue: r, onChange: f, minDate: p, maxDate: m, isDateDisabled: h, firstDayOfWeek: g = 0, variant: _ = "popover", placeholder: v = "YYYY/MM/DD", digitType: y = "persian", className: x, style: T, classNames: E, styles: D, showFooter: O = !0, showStatusText: A = !0, allowClear: j = !0, enableTime: M = !1, timeValue: P, defaultTimeValue: I, onTimeChange: L, minuteStep: ee = 1, hourStep: te = 1, showSeconds: B = !1, numberOfMonths: H = 1, useMaskedInput: ne = !1, events: re, showHolidays: U = !1, customHolidays: ie, zIndex: W = 9999 }) {
+	let [K, q] = s(_ === "inline"), [fe, pe] = s(!1), ge = o(null), J = _ === "modal";
+	i(() => {
+		_ === "inline" && q(!0);
+	}, [_]);
+	let ve = a(() => I || (t instanceof Date ? {
 		hour: t.getHours(),
 		minute: t.getMinutes(),
 		second: t.getSeconds()
@@ -1497,21 +1631,21 @@ function he({ mode: e = "single", value: t, defaultValue: r, onChange: f, minDat
 		hour: r.getHours(),
 		minute: r.getMinutes(),
 		second: r.getSeconds()
-	} : oe()), [
+	} : ce()), [
 		I,
 		t,
 		r
-	]), [_e, ve] = s(ge), Y = P === void 0 ? _e : P ?? oe();
+	]), [ye, be] = s(ve), Y = P === void 0 ? ye : P ?? ce();
 	i(() => {
-		if (_ === "inline" || !G) return;
+		if (_ === "inline" || !K) return;
 		let e = (e) => {
-			he.current && !he.current.contains(e.target) && (K(!1), q(!1));
+			ge.current && !ge.current.contains(e.target) && (q(!1), pe(!1));
 		};
-		return document.addEventListener("mousedown", e), document.addEventListener("touchstart", e), () => {
+		return document.addEventListener("mousedown", e), document.addEventListener("touchstart", e, { passive: !0 }), () => {
 			document.removeEventListener("mousedown", e), document.removeEventListener("touchstart", e);
 		};
-	}, [_, G]);
-	let ye = a(() => {
+	}, [_, K]);
+	let xe = a(() => {
 		if (t !== void 0) {
 			if (!t) return null;
 			if (t instanceof Date) return C(t);
@@ -1524,7 +1658,7 @@ function he({ mode: e = "single", value: t, defaultValue: r, onChange: f, minDat
 			}
 			return null;
 		}
-	}, [t, e]), be = a(() => {
+	}, [t, e]), Se = a(() => {
 		if (r !== void 0) {
 			if (!r) return null;
 			if (r instanceof Date) return C(r);
@@ -1537,9 +1671,9 @@ function he({ mode: e = "single", value: t, defaultValue: r, onChange: f, minDat
 			}
 			return null;
 		}
-	}, [r, e]), xe = a(() => p ? C(p) : void 0, [p]), Se = a(() => m ? C(m) : void 0, [m]), Ce = n((t, n) => {
+	}, [r, e]), Ce = a(() => p ? C(p) : void 0, [p]), we = a(() => m ? C(m) : void 0, [m]), Te = n((e) => h ? h(w(e)) : !1, [h]), Ee = n((t, n) => {
 		if (!t) return null;
-		let r = n ?? Y, i = N ? r.hour : 0, a = N ? r.minute : 0, o = N && V ? r.second ?? 0 : 0;
+		let r = n ?? Y, i = M ? r.hour : 0, a = M ? r.minute : 0, o = M && B ? r.second ?? 0 : 0;
 		if (e === "single" && !Array.isArray(t)) return w(t, i, a, o);
 		if (e === "range" && Array.isArray(t)) {
 			let [e, n] = t;
@@ -1548,68 +1682,86 @@ function he({ mode: e = "single", value: t, defaultValue: r, onChange: f, minDat
 		return e === "multiple" && Array.isArray(t) ? t.map((e) => w(e, i, a, o)) : null;
 	}, [
 		e,
-		N,
+		M,
 		Y,
-		V
-	]), { selected: X, viewYear: Z, viewMonth: Q, grid: we, goToPrevMonth: Te, goToNextMonth: Ee, setView: De, goToToday: Oe, selectDate: ke, setHoverDate: Ae, hoverDate: je, clear: Me } = M({
+		B
+	]), { selected: X, viewYear: Z, viewMonth: Q, grid: De, goToPrevMonth: Oe, goToNextMonth: ke, setView: Ae, goToToday: je, selectDate: Me, setHoverDate: Ne, hoverDate: Pe, clear: Fe } = F({
 		mode: e,
-		value: ye,
-		defaultValue: be,
-		minDate: xe,
-		maxDate: Se,
+		value: xe,
+		defaultValue: Se,
+		minDate: Ce,
+		maxDate: we,
 		firstDayOfWeek: g,
-		isDateDisabled: h ? (e) => h(w(e)) : void 0,
+		isDateDisabled: h ? Te : void 0,
 		onChange: (e) => {
-			f?.(Ce(e));
+			f?.(Ee(e));
 		}
-	}), Ne = n((e) => {
-		P === void 0 && ve(e), ee?.(e), X && f && f(Ce(X, e));
+	}), Ie = n((e) => {
+		P === void 0 && be(e), L?.(e), X && f && f(Ee(X, e));
 	}, [
 		P,
-		ee,
+		L,
 		X,
 		f,
-		Ce
-	]), Pe = e === "single" ? X : null, Fe = (t) => {
-		ke(t), _ === "popover" && e === "single" && !N && K(!1);
-	}, Ie = (e) => {
-		e.stopPropagation(), Me();
-	}, { handleKeyDown: Le, getCellTabIndex: Re, setFocusedDate: ze } = F({
+		Ee
+	]), Le = e === "single" ? X : null, Re = (t) => {
+		Me(t), _ === "popover" && e === "single" && !M && q(!1);
+	}, ze = (e) => {
+		e.stopPropagation(), Fe();
+	}, { handleKeyDown: Be, getCellTabIndex: Ve, setFocusedDate: He } = R({
 		viewYear: Z,
 		viewMonth: Q,
-		selectedDate: Pe,
-		onSelectDate: Fe,
-		onViewChange: De,
+		selectedDate: Le,
+		onSelectDate: Re,
+		onViewChange: Ae,
 		isRtl: !0
 	});
 	i(() => {
-		if (!J || !G) return;
+		if (!J || !K) return;
 		let e = document.body.style.overflow;
 		document.body.style.overflow = "hidden";
 		let t = (e) => {
-			e.key === "Escape" && K(!1);
+			e.key === "Escape" && q(!1);
 		};
 		return window.addEventListener("keydown", t), () => {
 			document.body.style.overflow = e, window.removeEventListener("keydown", t);
 		};
-	}, [J, G]);
+	}, [J, K]);
 	let $ = a(() => Q === 11 ? {
 		year: Z + 1,
 		month: 0
 	} : {
 		year: Z,
 		month: Q + 1
-	}, [Z, Q]), Be = a(() => {
+	}, [Z, Q]), Ue = a(() => Q === 0 ? {
+		year: Z - 1,
+		month: 11
+	} : {
+		year: Z,
+		month: Q - 1
+	}, [Z, Q]), We = !N(Ue.year, Ue.month, {
+		minDate: Ce,
+		maxDate: we
+	}), Ge = H === 2 ? $.month === 11 ? {
+		year: $.year + 1,
+		month: 0
+	} : {
+		year: $.year,
+		month: $.month + 1
+	} : $, Ke = !N(Ge.year, Ge.month, {
+		minDate: Ce,
+		maxDate: we
+	}), qe = a(() => {
 		if (H !== 2) return [];
 		let t = S({
 			year: $.year,
 			month: $.month,
 			firstDayOfWeek: g,
-			minDate: xe,
-			maxDate: Se
+			minDate: Ce,
+			maxDate: we
 		});
 		if (e !== "range") return t;
-		let [n, r] = X || [null, null], i = r ?? (n && je ? je : null);
+		let [n, r] = X || [null, null], i = r ?? (n && Pe ? Pe : null);
 		return t.map((e) => {
 			let t = n ? b(e.jalali, n) : !1, r = i ? b(e.jalali, i) : !1, a = !1;
 			return n && i && (a = k(e.jalali, n, i)), {
@@ -1624,66 +1776,72 @@ function he({ mode: e = "single", value: t, defaultValue: r, onChange: f, minDat
 		H,
 		$,
 		g,
-		xe,
-		Se,
+		Ce,
+		we,
 		e,
 		X,
-		je
-	]), Ve = a(() => {
+		Pe
+	]), Je = a(() => {
 		if (!X) return "";
 		if (e === "single") {
-			let e = z(X, "YYYY/MM/DD", { digitType: y });
-			return N && Y ? `${e} ${ce(Y, V, y)}` : e;
+			let e = V(X, "YYYY/MM/DD", { digitType: y });
+			return M && Y ? `${e} ${le(Y, B, y)}` : e;
 		}
 		if (e === "range") {
 			let [e, t] = X || [null, null];
-			if (e && t) return `${z(e, "YYYY/MM/DD", { digitType: y })} - ${z(t, "YYYY/MM/DD", { digitType: y })}`;
-			if (e) return `${z(e, "YYYY/MM/DD", { digitType: y })} - ...`;
+			if (e && t) return `${V(e, "YYYY/MM/DD", { digitType: y })} - ${V(t, "YYYY/MM/DD", { digitType: y })}`;
+			if (e) return `${V(e, "YYYY/MM/DD", { digitType: y })} - ...`;
 		}
-		return e === "multiple" && Array.isArray(X) ? `${L(X.length)} تاریخ انتخاب شده` : "";
+		return e === "multiple" && Array.isArray(X) ? `${z(X.length)} تاریخ انتخاب شده` : "";
 	}, [
 		X,
 		e,
 		y,
-		N,
+		M,
 		Y,
-		V
-	]), He = !!(e === "single" ? X : e === "range" ? X?.[0] : X?.length), Ue = (e, t, n, r = !0, i = !0) => /* @__PURE__ */ u("div", {
+		B
+	]), Ye = !!(e === "single" ? X : e === "range" ? X?.[0] : X?.length), Xe = (e, t, n, r = !0, i = !0) => /* @__PURE__ */ u("div", {
+		className: E?.calendarPane,
 		style: {
 			width: "calc(7 * var(--pdp-cell-size, 34px) + 6 * 4px)",
-			flexShrink: 0
+			maxWidth: "100%",
+			minWidth: 0,
+			flex: "1 1 calc(7 * var(--pdp-cell-size, 34px) + 6 * 4px)",
+			...D?.calendarPane
 		},
 		children: [
-			/* @__PURE__ */ l(ne, {
+			/* @__PURE__ */ l(G, {
 				year: e,
 				monthName: d[t],
-				onPrevMonth: r ? Te : () => {},
-				onNextMonth: i ? Ee : () => {},
-				onTitleClick: () => q((e) => !e),
-				isPickerOpen: pe,
+				onPrevMonth: r ? Oe : () => {},
+				onNextMonth: i ? ke : () => {},
+				onTitleClick: () => pe((e) => !e),
+				isPickerOpen: fe,
+				isPrevDisabled: !r || We,
+				isNextDisabled: !i || Ke,
 				classNames: E,
 				styles: D
 			}),
-			/* @__PURE__ */ l(re, {
+			/* @__PURE__ */ l(ae, {
 				firstDayOfWeek: g,
 				classNames: E,
 				styles: D
 			}),
 			/* @__PURE__ */ l("div", {
 				role: "grid",
-				"aria-label": `${d[t]} ${L(e)}`,
+				"aria-label": `${d[t]} ${z(e)}`,
 				className: E?.grid,
 				style: {
 					display: "grid",
-					gridTemplateColumns: "repeat(7, var(--pdp-cell-size, 34px))",
+					gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
 					gap: "4px",
 					justifyContent: "center",
 					alignItems: "center",
 					...D?.grid
 				},
 				children: n.map((e, t) => {
-					let n = W ? me(e.jalali, se) : null, r = fe(e.jalali, te);
-					return /* @__PURE__ */ l(ie, {
+					let n = U ? _e(e.jalali, ie) : null, r = he(e.jalali, re);
+					return /* @__PURE__ */ l(oe, {
 						cell: e,
 						digitType: y,
 						isHoliday: !!n,
@@ -1691,32 +1849,36 @@ function he({ mode: e = "single", value: t, defaultValue: r, onChange: f, minDat
 						events: r,
 						classNames: E,
 						styles: D,
-						tabIndex: Re(e.jalali),
-						onSelect: Fe,
-						onHover: Ae,
-						onFocus: ze
+						tabIndex: Ve(e.jalali),
+						onSelect: Re,
+						onHover: Ne,
+						onFocus: He
 					}, t);
 				})
 			})
 		]
-	}), We = /* @__PURE__ */ l("div", {
+	}), Ze = /* @__PURE__ */ l("div", {
 		role: J ? "dialog" : "region",
 		"aria-modal": J ? !0 : void 0,
 		"aria-label": "تقویم شمسی",
-		onKeyDown: Le,
-		onClick: (e) => J && e.stopPropagation(),
+		onKeyDown: Be,
+		onClick: (e) => e.stopPropagation(),
 		className: E?.calendar,
 		style: {
 			position: _ === "popover" ? "absolute" : J ? "relative" : "static",
-			top: _ === "popover" ? "calc(100% + 4px)" : void 0,
+			top: _ === "popover" ? "calc(100% + 6px)" : void 0,
 			left: _ === "popover" ? 0 : void 0,
-			zIndex: J ? 1001 : 1e3,
+			zIndex: J ? W + 1 : W,
 			padding: "12px",
 			backgroundColor: "var(--pdp-surface-bg, #ffffff)",
 			borderRadius: "var(--pdp-border-radius, 12px)",
 			border: "1px solid var(--pdp-surface-border, #e2e8f0)",
-			boxShadow: J ? "0 20px 25px -5px rgb(0 0 0 / 0.3)" : "var(--pdp-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1))",
+			boxShadow: J ? "0 20px 25px -5px rgb(0 0 0 / 0.3)" : "0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
 			width: "max-content",
+			maxWidth: _ === "inline" ? "100%" : "calc(100vw - 24px)",
+			maxHeight: J ? "calc(100dvh - 32px)" : void 0,
+			overflowY: J ? "auto" : void 0,
+			overflowX: "hidden",
 			userSelect: "none",
 			display: "flex",
 			flexDirection: "column",
@@ -1725,73 +1887,79 @@ function he({ mode: e = "single", value: t, defaultValue: r, onChange: f, minDat
 			boxSizing: "border-box",
 			...D?.calendar
 		},
-		children: pe ? /* @__PURE__ */ l(ae, {
+		children: fe ? /* @__PURE__ */ l(se, {
 			currentYear: Z,
 			currentMonth: Q,
 			onSelectMonth: (e) => {
-				De(Z, e), q(!1);
+				Ae(Z, e), pe(!1);
 			},
-			onSelectYear: (e) => De(e, Q),
+			onSelectYear: (e) => Ae(e, Q),
+			minDate: Ce,
+			maxDate: we,
+			isDateDisabled: h ? Te : void 0,
 			classNames: E,
 			styles: D
 		}) : /* @__PURE__ */ u(c, { children: [
 			/* @__PURE__ */ u("div", {
+				className: E?.calendarPanes,
 				style: {
 					display: "flex",
 					flexDirection: "row",
-					flexWrap: "nowrap",
+					flexWrap: "wrap",
 					gap: "20px",
 					alignItems: "flex-start",
-					justifyContent: "center"
+					justifyContent: "center",
+					width: "100%",
+					minWidth: 0,
+					boxSizing: "border-box",
+					...D?.calendarPanes
 				},
-				children: [Ue(Z, Q, we, !0, H === 1), H === 2 && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", { style: {
-					width: "1px",
-					alignSelf: "stretch",
-					backgroundColor: "var(--pdp-surface-border, #e2e8f0)",
-					margin: "0 2px"
-				} }), Ue($.year, $.month, Be, !1, !0)] })]
+				children: [Xe(Z, Q, De, !0, H === 1), H === 2 && /* @__PURE__ */ l(c, { children: Xe($.year, $.month, qe, !1, !0) })]
 			}),
-			N && /* @__PURE__ */ l(ue, {
+			M && /* @__PURE__ */ l(de, {
 				value: Y,
-				onChange: Ne,
-				minuteStep: R,
-				hourStep: B,
-				showSeconds: V,
+				onChange: Ie,
+				minuteStep: ee,
+				hourStep: te,
+				showSeconds: B,
 				digitType: y,
 				classNames: E,
 				styles: D
 			}),
-			O && /* @__PURE__ */ l(le, {
+			O && /* @__PURE__ */ l(ue, {
 				mode: e,
 				digitType: y,
 				showStatusText: A,
 				selectedDate: e === "single" ? X : null,
 				selectedRange: e === "range" ? X : void 0,
 				selectedDates: e === "multiple" ? X : void 0,
-				selectedTime: N ? Y : void 0,
-				onToday: Oe,
+				selectedTime: M ? Y : void 0,
+				onToday: je,
 				classNames: E,
 				styles: D
 			})
 		] })
 	});
 	return /* @__PURE__ */ u("div", {
-		ref: he,
+		ref: ge,
 		className: x ?? E?.root,
 		style: {
 			position: "relative",
 			display: "inline-block",
+			maxWidth: "100%",
+			verticalAlign: "top",
+			zIndex: K && _ === "popover" ? W : 1,
 			...T,
 			...D?.root
 		},
-		children: [_ !== "inline" && (U && e === "single" && _ === "popover" ? /* @__PURE__ */ l(de, {
-			value: Pe,
+		children: [_ !== "inline" && (ne && e === "single" && _ === "popover" ? /* @__PURE__ */ l(me, {
+			value: Le,
 			digitType: y,
 			placeholder: v,
 			onChange: (e) => {
-				e ? (ke(e), De(e.year, e.month)) : Me();
+				e ? (Me(e), Ae(e.year, e.month)) : Fe();
 			},
-			onClick: () => K(!0),
+			onClick: () => q(!0),
 			className: E?.input,
 			style: {
 				direction: "ltr",
@@ -1799,20 +1967,23 @@ function he({ mode: e = "single", value: t, defaultValue: r, onChange: f, minDat
 				...D?.input
 			}
 		}) : /* @__PURE__ */ u("div", {
-			onClick: () => K((e) => !e),
+			onClick: (e) => {
+				e.stopPropagation(), q((e) => !e);
+			},
 			style: {
 				position: "relative",
 				display: "inline-flex",
 				alignItems: "center",
 				cursor: "pointer",
 				direction: "ltr",
-				width: "100%"
+				width: "100%",
+				maxWidth: "100%"
 			},
 			children: [/* @__PURE__ */ l("input", {
 				type: "text",
 				readOnly: !0,
 				placeholder: v,
-				value: Ve,
+				value: Je,
 				className: E?.input,
 				style: {
 					direction: "ltr",
@@ -1824,14 +1995,15 @@ function he({ mode: e = "single", value: t, defaultValue: r, onChange: f, minDat
 					color: "var(--pdp-text-primary, #0f172a)",
 					cursor: "pointer",
 					fontSize: "13.5px",
-					minWidth: N ? "190px" : "150px",
+					minWidth: M ? "190px" : "150px",
 					width: "100%",
+					maxWidth: "100%",
 					boxSizing: "border-box",
 					...D?.input
 				}
-			}), j && He && /* @__PURE__ */ l("button", {
+			}), j && Ye && /* @__PURE__ */ l("button", {
 				type: "button",
-				onClick: Ie,
+				onClick: ze,
 				"aria-label": "Clear value",
 				style: {
 					position: "absolute",
@@ -1858,9 +2030,9 @@ function he({ mode: e = "single", value: t, defaultValue: r, onChange: f, minDat
 				},
 				children: "✕"
 			})]
-		})), G && (J ? /* @__PURE__ */ l("div", {
+		})), K && (J ? /* @__PURE__ */ l("div", {
 			role: "presentation",
-			onClick: () => K(!1),
+			onClick: () => q(!1),
 			className: E?.modalBackdrop,
 			style: {
 				position: "fixed",
@@ -1870,62 +2042,77 @@ function he({ mode: e = "single", value: t, defaultValue: r, onChange: f, minDat
 				bottom: 0,
 				backgroundColor: "rgba(15, 23, 42, 0.6)",
 				backdropFilter: "blur(4px)",
-				zIndex: 1e3,
+				zIndex: W,
 				display: "flex",
 				alignItems: "center",
 				justifyContent: "center",
 				padding: "16px",
+				boxSizing: "border-box",
+				overflowY: "auto",
 				direction: "rtl",
 				...D?.modalBackdrop
 			},
-			children: We
-		}) : We)]
+			children: Ze
+		}) : Ze)]
 	});
 }
 //#endregion
-//#region src/theme/style-utils.ts
-function J(...e) {
-	return e.filter(Boolean).join(" ") || void 0;
-}
-//#endregion
 //#region src/components/dual-calendar/DualMonthCalendar.tsx
-var ge = ({ value: e, defaultValue: t = [null, null], onChange: r, initialViewDate: i, firstDayOfWeek: o = 0, digitType: c = "persian", minDate: f, maxDate: p, isDateDisabled: m, direction: h = "rtl", className: g, style: _, classNames: v, styles: x }) => {
-	let { theme: C } = U(), [w, T] = s(t), E = e === void 0 ? w : e, [D, A] = s(null), j = (e) => c === "persian" ? L(e) : String(e), M = a(() => y(), []), [N, P] = s(() => i || (E[0] ? {
-		year: E[0].year,
-		month: E[0].month
+var ye = ({ value: e, defaultValue: t = [null, null], onChange: r, initialViewDate: i, firstDayOfWeek: o = 0, digitType: c = "persian", minDate: f, maxDate: p, isDateDisabled: m, direction: h = "rtl", className: g, style: _, classNames: v, styles: C }) => {
+	let { theme: w } = U(), [T, E] = s(t), D = e === void 0 ? T : e, [A, j] = s(null), M = (e) => c === "persian" ? z(e) : String(e), P = a(() => y(), []), [F, I] = s(() => i || (D[0] ? {
+		year: D[0].year,
+		month: D[0].month
+	} : {
+		year: P.year,
+		month: P.month
+	})), L = a(() => F.month === 11 ? {
+		year: F.year + 1,
+		month: 0
+	} : {
+		year: F.year,
+		month: F.month + 1
+	}, [F]), R = a(() => F.month === 0 ? {
+		year: F.year - 1,
+		month: 11
 	} : {
-		year: M.year,
-		month: M.month
-	})), F = a(() => N.month === 11 ? {
-		year: N.year + 1,
+		year: F.year,
+		month: F.month - 1
+	}, [F]), ee = a(() => f ? x(f) : void 0, [f]), te = a(() => p ? x(p) : void 0, [p]), B = !N(R.year, R.month, {
+		minDate: ee,
+		maxDate: te
+	}), V = L.month === 11 ? {
+		year: L.year + 1,
 		month: 0
 	} : {
-		year: N.year,
-		month: N.month + 1
-	}, [N]), I = () => {
-		P((e) => e.month === 0 ? {
+		year: L.year,
+		month: L.month + 1
+	}, H = !N(V.year, V.month, {
+		minDate: ee,
+		maxDate: te
+	}), ne = () => {
+		B || I((e) => e.month === 0 ? {
 			year: e.year - 1,
 			month: 11
 		} : {
 			year: e.year,
 			month: e.month - 1
 		});
-	}, ee = () => {
-		P((e) => e.month === 11 ? {
+	}, re = () => {
+		H || I((e) => e.month === 11 ? {
 			year: e.year + 1,
 			month: 0
 		} : {
 			year: e.year,
 			month: e.month + 1
 		});
-	}, R = n((t) => {
-		let [n, i] = E, a;
-		!n || n && i ? a = [t, null] : (a = O(t, n) < 0 ? [t, n] : [n, t], A(null)), e === void 0 && T(a), r?.(a);
+	}, ie = n((t) => {
+		let [n, i] = D, a;
+		!n || n && i ? a = [t, null] : (a = O(t, n) < 0 ? [t, n] : [n, t], j(null)), e === void 0 && E(a), r?.(a);
 	}, [
-		E,
+		D,
 		e,
 		r
-	]), z = n((e, t) => {
+	]), G = n((e, t) => {
 		let n = S({
 			year: e,
 			month: t,
@@ -1933,7 +2120,7 @@ var ge = ({ value: e, defaultValue: t = [null, null], onChange: r, initialViewDa
 			minDate: f,
 			maxDate: p,
 			isDateDisabled: m
-		}), [r, i] = E, a = i ?? (r && D ? D : null);
+		}), [r, i] = D, a = i ?? (r && A ? A : null);
 		return n.map((e) => {
 			let t = r ? b(e.jalali, r) : !1, n = a ? b(e.jalali, a) : !1, i = !1;
 			return r && a && (i = k(e.jalali, r, a)), {
@@ -1949,17 +2136,17 @@ var ge = ({ value: e, defaultValue: t = [null, null], onChange: r, initialViewDa
 		f,
 		p,
 		m,
-		E,
-		D
-	]), B = a(() => z(N.year, N.month), [
-		z,
-		N.year,
-		N.month
-	]), V = a(() => z(F.year, F.month), [
-		z,
+		D,
+		A
+	]), se = a(() => G(F.year, F.month), [
+		G,
 		F.year,
 		F.month
-	]), H = (e, t, n, r) => /* @__PURE__ */ u("div", {
+	]), K = a(() => G(L.year, L.month), [
+		G,
+		L.year,
+		L.month
+	]), ce = (e, t, n, r) => /* @__PURE__ */ u("div", {
 		dir: h,
 		className: v?.calendarPane,
 		style: {
@@ -1967,8 +2154,10 @@ var ge = ({ value: e, defaultValue: t = [null, null], onChange: r, initialViewDa
 			flexDirection: "column",
 			gap: "8px",
 			width: "var(--pdp-calendar-pane-width, 276px)",
-			minWidth: "var(--pdp-calendar-pane-width, 276px)",
-			...x?.calendarPane
+			maxWidth: "100%",
+			minWidth: 0,
+			flex: "1 1 var(--pdp-calendar-pane-width, 276px)",
+			...C?.calendarPane
 		},
 		children: [
 			/* @__PURE__ */ u("div", {
@@ -1979,23 +2168,27 @@ var ge = ({ value: e, defaultValue: t = [null, null], onChange: r, initialViewDa
 					justifyContent: "space-between",
 					padding: "0 4px",
 					height: "32px",
-					...x?.header
+					...C?.header
 				},
 				children: [
 					r ? /* @__PURE__ */ l("button", {
 						type: "button",
 						"aria-label": "ماه قبل",
-						onClick: I,
-						className: v?.navButton,
+						onClick: ne,
+						disabled: B,
+						"aria-disabled": B,
+						className: W(v?.navButton, B && v?.disabledNavButton),
 						style: {
 							width: "28px",
 							height: "28px",
 							borderRadius: "6px",
-							border: `1px solid ${C.colors.border}`,
-							backgroundColor: C.colors.background,
-							color: C.colors.textPrimary,
-							cursor: "pointer",
-							...x?.navButton
+							border: `1px solid ${w.colors.border}`,
+							backgroundColor: w.colors.background,
+							color: w.colors.textPrimary,
+							cursor: B ? "not-allowed" : "pointer",
+							opacity: B ? .38 : 1,
+							...C?.navButton,
+							...B ? C?.disabledNavButton : void 0
 						},
 						children: h === "rtl" ? "›" : "‹"
 					}) : /* @__PURE__ */ l("div", { style: { width: "28px" } }),
@@ -2003,58 +2196,63 @@ var ge = ({ value: e, defaultValue: t = [null, null], onChange: r, initialViewDa
 						style: {
 							fontWeight: 600,
 							fontSize: "14px",
-							color: C.colors.textPrimary
+							color: w.colors.textPrimary
 						},
 						children: [
 							d[t],
 							" ",
-							j(e)
+							M(e)
 						]
 					}),
 					r ? /* @__PURE__ */ l("div", { style: { width: "28px" } }) : /* @__PURE__ */ l("button", {
 						type: "button",
 						"aria-label": "ماه بعد",
-						onClick: ee,
-						className: v?.navButton,
+						onClick: re,
+						disabled: H,
+						"aria-disabled": H,
+						className: W(v?.navButton, H && v?.disabledNavButton),
 						style: {
 							width: "28px",
 							height: "28px",
 							borderRadius: "6px",
-							border: `1px solid ${C.colors.border}`,
-							backgroundColor: C.colors.background,
-							color: C.colors.textPrimary,
-							cursor: "pointer",
-							...x?.navButton
+							border: `1px solid ${w.colors.border}`,
+							backgroundColor: w.colors.background,
+							color: w.colors.textPrimary,
+							cursor: H ? "not-allowed" : "pointer",
+							opacity: H ? .38 : 1,
+							...C?.navButton,
+							...H ? C?.disabledNavButton : void 0
 						},
 						children: h === "rtl" ? "‹" : "›"
 					})
 				]
 			}),
-			/* @__PURE__ */ l(re, {
+			/* @__PURE__ */ l(ae, {
 				firstDayOfWeek: o,
 				classNames: v,
-				styles: x
+				styles: C
 			}),
 			/* @__PURE__ */ l("div", {
 				role: "grid",
-				"aria-label": `${d[t]} ${j(e)}`,
+				"aria-label": `${d[t]} ${M(e)}`,
 				dir: h,
 				className: v?.grid,
 				style: {
 					display: "grid",
-					width: "var(--pdp-calendar-pane-width, 276px)",
-					gridTemplateColumns: "repeat(7, var(--pdp-cell-size, 36px))",
+					width: "100%",
+					minWidth: 0,
+					gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
 					gap: "var(--pdp-cell-gap, 4px)",
-					...x?.grid
+					...C?.grid
 				},
-				children: n.map((e) => /* @__PURE__ */ l(ie, {
+				children: n.map((e) => /* @__PURE__ */ l(oe, {
 					cell: e,
 					digitType: c,
 					classNames: v,
-					styles: x,
+					styles: C,
 					tabIndex: 0,
-					onSelect: R,
-					onHover: A
+					onSelect: ie,
+					onHover: j
 				}, `${e.jalali.year}-${e.jalali.month}-${e.jalali.day}`))
 			})
 		]
@@ -2063,7 +2261,7 @@ var ge = ({ value: e, defaultValue: t = [null, null], onChange: r, initialViewDa
 		role: "region",
 		"aria-label": "تقویم دوقلو شمسی",
 		dir: h,
-		className: J(g, v?.calendar),
+		className: W(g, v?.calendar),
 		style: {
 			"--pdp-cell-size": "36px",
 			"--pdp-cell-gap": "4px",
@@ -2072,30 +2270,21 @@ var ge = ({ value: e, defaultValue: t = [null, null], onChange: r, initialViewDa
 			flexWrap: "wrap",
 			gap: "24px",
 			padding: "16px",
-			backgroundColor: C.colors.background,
-			color: C.colors.textPrimary,
-			borderRadius: C.radii.lg,
-			border: `1px solid ${C.colors.border}`,
-			boxShadow: C.shadows.lg,
-			width: "fit-content",
+			boxSizing: "border-box",
+			backgroundColor: w.colors.background,
+			color: w.colors.textPrimary,
+			borderRadius: w.radii.lg,
+			border: `1px solid ${w.colors.border}`,
+			boxShadow: w.shadows.lg,
+			width: "calc(var(--pdp-calendar-pane-width, 276px) + var(--pdp-calendar-pane-width, 276px) + 56px)",
+			maxWidth: "100%",
 			..._,
-			...x?.calendar
+			...C?.calendar
 		},
-		children: [
-			H(N.year, N.month, B, !0),
-			/* @__PURE__ */ l("div", {
-				className: v?.paneDivider,
-				style: {
-					width: "1px",
-					backgroundColor: C.colors.border,
-					...x?.paneDivider
-				}
-			}),
-			H(F.year, F.month, V, !1)
-		]
+		children: [ce(F.year, F.month, se, !0), ce(L.year, L.month, K, !1)]
 	});
 };
 //#endregion
-export { te as DatePickerThemeProvider, ie as DayCell, ge as DualMonthCalendar, ne as Header, f as JALALI_MONTH_NAMES_EN, he as JalaliDatePicker, de as MaskedDateInput, ae as MonthYearPicker, d as PERSIAN_MONTH_NAMES, m as PERSIAN_WEEK_DAYS_LONG, p as PERSIAN_WEEK_DAYS_SHORT, ue as TimePicker, re as Weekdays, E as addDaysToJalali, D as addJalaliDays, G as applyDateMask, N as calculateNextFocusedDate, se as clampTime, O as compareJalaliDates, V as darkTheme, z as formatJalaliDate, W as formatTimeSegment, ce as formatTimeString, S as generateJalaliCalendarGrid, P as getAriaDayLabel, oe as getCurrentTime, g as getDaysInJalaliMonth, fe as getEventsForDate, T as getJalaliDayOfWeek, j as getJalaliMonthRange, A as getJalaliWeekRange, me as getOfficialHoliday, y as getTodayJalali, _ as gregorianToJalali, k as isJalaliDateBetween, q as isJalaliFriday, h as isJalaliLeapYear, b as isSameJalaliDay, v as jalaliToGregorian, w as jalaliToJsDate, C as jsDateToJalali, B as lightTheme, K as parseAndValidateJalaliString, x as toJalaliDate, R as toLatinDigits, L as toPersianDigits, F as useCalendarKeyboard, M as useJalaliDatePicker, U as useTheme };
+export { ie as DatePickerThemeProvider, oe as DayCell, ye as DualMonthCalendar, G as Header, f as JALALI_MONTH_NAMES_EN, ve as JalaliDatePicker, me as MaskedDateInput, se as MonthYearPicker, d as PERSIAN_MONTH_NAMES, m as PERSIAN_WEEK_DAYS_LONG, p as PERSIAN_WEEK_DAYS_SHORT, de as TimePicker, ae as Weekdays, E as addDaysToJalali, D as addJalaliDays, fe as applyDateMask, I as calculateNextFocusedDate, q as clampTime, O as compareJalaliDates, ne as darkTheme, V as formatJalaliDate, K as formatTimeSegment, le as formatTimeString, S as generateJalaliCalendarGrid, L as getAriaDayLabel, ce as getCurrentTime, g as getDaysInJalaliMonth, he as getEventsForDate, T as getJalaliDayOfWeek, j as getJalaliMonthRange, A as getJalaliWeekRange, _e as getOfficialHoliday, y as getTodayJalali, _ as gregorianToJalali, k as isJalaliDateBetween, M as isJalaliDateSelectable, J as isJalaliFriday, h as isJalaliLeapYear, N as isJalaliMonthSelectable, P as isJalaliYearSelectable, b as isSameJalaliDay, v as jalaliToGregorian, w as jalaliToJsDate, C as jsDateToJalali, H as lightTheme, pe as parseAndValidateJalaliString, x as toJalaliDate, B as toLatinDigits, z as toPersianDigits, R as useCalendarKeyboard, F as useJalaliDatePicker, U as useTheme };
 
 //# sourceMappingURL=index.mjs.map