react-modular-datepicker 0.0.7 → 0.0.9

package/dist/index.js

@@ -1,45 +1,44 @@
-import { n as e, r as t, t as n } from "./useDates-CjPuu-VA.js";
+import { n as e, r as t, t as n } from "./useDates-BVAPuyDo.js";
 import { addMonth as r, composeEventHandlers as i, getCalendars as a, isBackDisabled as o, isForwardDisabled as s, subtractMonth as c } from "./utils.js";
-import { useEffect as l, useRef as u, useState as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-//#region src/components/Day.tsx
-var m = ({ dateObj: e, getDateProps: t, dayProps: n, classNames: r }) => {
-	if (!e) return /* @__PURE__ */ f("div", { className: "aspect-square bg-white" });
-	let { date: i, selected: a, selectable: o, isRangeStart: s, isRangeEnd: c, isRangeBetween: l, isRangeHovering: u, isRangeActive: d } = e, p = r.day, m = "rounded-full";
-	m = s && c ? `${p.selected} rounded-full` : s ? `${p.rangeStart} ${d ? "rounded-l-full rounded-r-none" : "rounded-full"}` : c ? `${p.rangeEnd} ${d ? "rounded-r-full rounded-l-none" : "rounded-full"}` : l ? p.rangeBetween || "" : u ? p.rangeHovering || "" : a ? p.selected || "" : o ? p.unselected || "" : p.disabled || "";
-	let h = [
-		p.day,
-		m,
-		...(e.modifiers || []).map((e) => p[e] || e)
-	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ f("button", {
-		...t({
-			dateObj: e,
-			...n
-		}),
-		className: h,
-		children: i.getDate()
-	});
-};
+import { useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function h(e) {
+	var t, n, r = "";
+	if (typeof e == "string" || typeof e == "number") r += e;
+	else if (typeof e == "object") {
+		if (Array.isArray(e)) {
+			var i = e.length;
+			for (t = 0; t < i; t++) e[t] && (n = h(e[t])) && (r && (r += " "), r += n);
+		} else for (n in e) e[n] && (r && (r += " "), r += n);
+	}
+	return r;
+}
+function g() {
+	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = h(e)) && (r && (r += " "), r += t);
+	return r;
+}
 //#endregion
 //#region src/i18n.ts
-function h(e = t, n) {
+function _(e = t, n) {
 	return {
 		months: e.getMonths(n),
 		weekdays: e.getWeekdays(n),
 		back: "Previous month",
-		forward: "Next month"
+		forward: "Next month",
+		selectMonth: "Select month",
+		selectYear: "Select year"
 	};
 }
-function g(e = t, n, r) {
+function v(e = t, n, r) {
 	return {
-		...h(e, n),
+		..._(e, n),
 		...r
 	};
 }
 //#endregion
 //#region src/components/CalendarHeader.tsx
-var _ = () => /* @__PURE__ */ f("svg", {
+var y = () => /* @__PURE__ */ p("svg", {
 	width: "20",
 	height: "20",
 	viewBox: "0 0 24 24",
@@ -48,8 +47,8 @@ var _ = () => /* @__PURE__ */ f("svg", {
 	strokeWidth: "2",
 	strokeLinecap: "round",
 	strokeLinejoin: "round",
-	children: /* @__PURE__ */ f("polyline", { points: "15 18 9 12 15 6" })
-}), v = () => /* @__PURE__ */ f("svg", {
+	children: /* @__PURE__ */ p("polyline", { points: "15 18 9 12 15 6" })
+}), b = () => /* @__PURE__ */ p("svg", {
 	width: "20",
 	height: "20",
 	viewBox: "0 0 24 24",
@@ -58,258 +57,467 @@ var _ = () => /* @__PURE__ */ f("svg", {
 	strokeWidth: "2",
 	strokeLinecap: "round",
 	strokeLinejoin: "round",
-	children: /* @__PURE__ */ f("polyline", { points: "9 18 15 12 9 6" })
-}), y = ({ calendars: e, getBackProps: t, getForwardProps: n, setView: r, monthNames: i, t: a, classNames: o, slideDirection: s, currentView: c }) => /* @__PURE__ */ p("div", {
-	className: o.header,
-	children: [
-		/* @__PURE__ */ f("button", {
-			...t({ calendars: e }),
-			onMouseDown: (e) => e.preventDefault(),
-			className: `${o.navButton} ${c && c !== "days" ? "invisible pointer-events-none" : ""}`,
-			"aria-label": a.back,
-			children: /* @__PURE__ */ f(_, {})
-		}),
-		/* @__PURE__ */ f("div", {
-			className: o.monthYearContainer,
-			children: e.length === 1 ? /* @__PURE__ */ p("div", {
-				className: `${o.monthYearLabel} ${s === "left" ? "animate-slide-in-left" : s === "right" ? "animate-slide-in-right" : ""}`,
-				children: [/* @__PURE__ */ f("button", {
-					onMouseDown: (e) => e.preventDefault(),
-					onClick: () => r(c === "months" ? "days" : "months"),
-					className: o.monthYearButton,
-					children: i[e[0].month]
-				}), /* @__PURE__ */ f("button", {
-					onMouseDown: (e) => e.preventDefault(),
-					onClick: () => r(c === "years" ? "days" : "years"),
-					className: o.monthYearButton,
-					children: e[0].year
-				})]
-			}, `${e[0].month}-${e[0].year}`) : /* @__PURE__ */ f("div", {
-				className: `${o.monthYearLabel} ${s === "left" ? "animate-slide-in-left" : s === "right" ? "animate-slide-in-right" : ""}`,
-				children: (() => {
-					let t = e[0], n = e[e.length - 1];
-					return e.length === 12 && t.month === 0 && n.month === 11 && t.year === n.year ? /* @__PURE__ */ f("span", { children: t.year }) : t.year === n.year ? /* @__PURE__ */ p("span", { children: [
-						i[t.month],
-						" - ",
-						i[n.month],
-						" ",
-						t.year
-					] }) : /* @__PURE__ */ p("span", { children: [
-						i[t.month],
-						" ",
-						t.year,
-						" - ",
-						i[n.month],
-						" ",
-						n.year
-					] });
-				})()
+	children: /* @__PURE__ */ p("polyline", { points: "9 18 15 12 9 6" })
+}), x = ({ calendars: e, getBackProps: t, getForwardProps: n, setView: r, monthNames: i, t: a, classNames: o, slideDirection: s, currentView: c }) => {
+	if (e.length > 1 && e.length < 12) return null;
+	let l = e[0], u = e[e.length - 1], d = !!(c && c !== "days"), f = g("rmd-nav-button", d && "rmd-nav-button-hidden", o?.navButton, d && o?.navButtonHidden), h = g("rmd-month-year-label", s === "left" && "rmd-slide-left", s === "right" && "rmd-slide-right", o?.monthYearLabel);
+	return /* @__PURE__ */ m("div", {
+		className: g("rmd-header", e.length > 1 && "rmd-header-multi-month", o?.header, e.length > 1 && o?.headerMultiMonth),
+		children: [
+			/* @__PURE__ */ p("button", {
+				...t({ calendars: e }),
+				className: f,
+				"aria-label": a.back,
+				children: /* @__PURE__ */ p(y, {})
+			}),
+			/* @__PURE__ */ p("div", {
+				className: g("rmd-month-year-container", o?.monthYearContainer),
+				children: e.length === 1 ? /* @__PURE__ */ m("div", {
+					className: h,
+					children: [/* @__PURE__ */ p("button", {
+						onClick: () => r(c === "months" ? "days" : "months"),
+						className: g("rmd-month-year-button", o?.monthYearButton),
+						"aria-label": `${i[e[0].month]}, ${a.selectMonth || "Select month"}`,
+						"aria-expanded": c === "months",
+						children: i[e[0].month]
+					}), /* @__PURE__ */ p("button", {
+						onClick: () => r(c === "years" ? "days" : "years"),
+						className: g("rmd-month-year-button", o?.monthYearButton),
+						"aria-label": `${e[0].year}, ${a.selectYear || "Select year"}`,
+						"aria-expanded": c === "years",
+						children: e[0].year
+					})]
+				}, `${e[0].month}-${e[0].year}`) : /* @__PURE__ */ p("div", {
+					className: h,
+					children: /* @__PURE__ */ p("span", { children: l.year === u.year ? l.year : `${l.year} - ${u.year}` })
+				})
+			}),
+			/* @__PURE__ */ p("button", {
+				...n({ calendars: e }),
+				className: f,
+				"aria-label": a.forward,
+				children: /* @__PURE__ */ p(b, {})
 			})
-		}),
-		/* @__PURE__ */ f("button", {
-			...n({ calendars: e }),
-			onMouseDown: (e) => e.preventDefault(),
-			className: `${o.navButton} ${c && c !== "days" ? "invisible pointer-events-none" : ""}`,
-			"aria-label": a.forward,
-			children: /* @__PURE__ */ f(v, {})
-		})
-	]
-}), b = {
-	root: "w-fit flex flex-col p-4 bg-white rounded-lg shadow-lg",
-	header: "flex items-center justify-between border-b-2 border-brand-gray-light/40 pb-2",
-	calendarsContainer: "flex flex-wrap gap-4",
-	calendarContainer: "flex-1 min-w-[280px] max-w-full",
-	weekdayGrid: "grid grid-cols-7 gap-1 mb-1 border-b border-brand-gray-light/40",
-	weekday: "text-center text-xs text-gray-400 py-2",
-	daysGrid: "grid grid-cols-7 gap-px bg-brand-gray-light/20",
-	footer: "mt-4",
-	navButton: "p-2 text-brand-text hover:bg-gray-100 rounded-full transition-colors cursor-pointer disabled:opacity-30 disabled:pointer-events-none",
-	monthYearContainer: "flex gap-8",
-	monthYearLabel: "flex gap-1 items-center font-semibold text-brand-text",
-	monthYearButton: "hover:bg-gray-100 px-2 py-1 rounded cursor-pointer",
-	day: {
-		day: "aspect-square flex items-center justify-center text-sm font-medium transition-all relative group cursor-pointer p-px",
-		selected: "bg-brand-gold text-white rounded-full",
-		unselected: "bg-white hover:bg-brand-gray-light text-brand-text",
-		disabled: "bg-white text-gray-300 cursor-not-allowed",
-		rangeStart: "bg-brand-gold text-white",
-		rangeEnd: "bg-brand-gold text-white",
-		rangeBetween: "bg-brand-gold/25 text-brand-text",
-		rangeHovering: "bg-brand-gold/25 text-brand-text"
-	},
-	monthsGrid: "grid grid-cols-3 gap-2 animate-slide-in-top",
-	monthButton: "py-3 rounded-lg hover:bg-brand-gray-light transition-colors cursor-pointer disabled:opacity-30 disabled:pointer-events-none",
-	monthButtonSelected: "bg-brand-gold text-white",
-	monthButtonUnselected: "text-brand-text",
-	yearsGrid: "grid grid-cols-3 gap-2 max-h-[210px] overflow-y-auto pr-2 animate-slide-in-top rmdp-scrollbar",
-	yearButton: "py-3 rounded-lg hover:bg-brand-gray-light transition-colors cursor-pointer disabled:opacity-30 disabled:pointer-events-none",
-	yearButtonSelected: "bg-brand-gold text-white",
-	yearButtonUnselected: "text-brand-text"
-}, x = (e) => {
-	let t = { ...b };
-	if (!e) return t;
-	for (let n in e) {
-		let r = n;
-		r === "day" && e.day ? t.day = {
-			...b.day,
-			...e.day
-		} : e[r] && (t[r] = e[r]);
-	}
-	return t;
-}, S = ({ year: e, month: t, monthNames: n, minDate: r, maxDate: i, onMonthSelect: a, classNames: o }) => {
-	let s = (t) => !!(r && e === r.getFullYear() && t < r.getMonth() || i && e === i.getFullYear() && t > i.getMonth());
-	return /* @__PURE__ */ f("div", {
-		className: o.monthsGrid,
+		]
+	});
+}, S = ({ dateObj: e, getDateProps: t, dayProps: n, classNames: r, tabIndex: i = -1, adapter: a, locale: o, onKeyDown: s, onFocus: c, buttonRef: l }) => {
+	if (!e) return /* @__PURE__ */ p("div", {
+		role: "gridcell",
+		"aria-hidden": "true",
+		className: g("rmd-day-empty", r?.day?.empty)
+	});
+	let { date: u, selected: d, selectable: f, isRangeStart: m, isRangeEnd: h, isRangeBetween: _, isRangeHovering: v, isRangeActive: y } = e, b = r?.day, x = "", S = "";
+	m && h ? (x = "rmd-day-selected", S = b?.selected || "") : m ? (x = g("rmd-day-range-start", y && "rmd-day-range-active"), S = b?.rangeStart || "") : h ? (x = g("rmd-day-range-end", y && "rmd-day-range-active"), S = b?.rangeEnd || "") : _ ? (x = "rmd-day-range-between", S = b?.rangeBetween || "") : v ? (x = "rmd-day-range-hovering", S = b?.rangeHovering || "") : d ? (x = "rmd-day-selected", S = b?.selected || "") : f ? (x = "rmd-day-unselected", S = b?.unselected || "") : (x = "rmd-day-disabled", S = b?.disabled || "");
+	let C = (e.modifiers || []).map((e) => b?.[e] || e).filter(Boolean), w = a ? a.format(a.date(u), "dddd, MMMM D, YYYY", o) : u.toDateString(), T = !!(d || m || h), E = t({
+		dateObj: e,
+		...n
+	});
+	return /* @__PURE__ */ p("button", {
+		role: "gridcell",
+		"aria-selected": T,
+		"aria-disabled": !f,
+		"aria-label": w,
+		tabIndex: i,
+		...E,
+		ref: l,
+		onKeyDown: (t) => {
+			E.onKeyDown?.(t), s?.(t, e);
+		},
+		onFocus: (t) => {
+			E.onFocus?.(t), c?.(e);
+		},
+		className: g("rmd-day", b?.day, x, S, C),
+		children: u.getDate()
+	});
+}, C = ({ year: e, month: t, monthNames: n, minDate: r, maxDate: i, onMonthSelect: a, classNames: o }) => {
+	let [s, c] = f(t), u = d([]);
+	l(() => {
+		u.current[s]?.focus();
+	}, [s]);
+	let m = (t) => !!(r && e === r.getFullYear() && t < r.getMonth() || i && e === i.getFullYear() && t > i.getMonth()), h = (e, t) => {
+		let n = s;
+		switch (e.key) {
+			case "ArrowLeft":
+				e.preventDefault(), n = (t - 1 + 12) % 12;
+				break;
+			case "ArrowRight":
+				e.preventDefault(), n = (t + 1) % 12;
+				break;
+			case "ArrowUp":
+				e.preventDefault(), n = (t - 3 + 12) % 12;
+				break;
+			case "ArrowDown":
+				e.preventDefault(), n = (t + 3) % 12;
+				break;
+			case "Home":
+				e.preventDefault(), n = 0;
+				break;
+			case "End":
+				e.preventDefault(), n = 11;
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault(), m(t) || a(t);
+				return;
+			default: return;
+		}
+		c(n);
+	}, _ = g("rmd-months-grid", o?.monthsGrid);
+	return /* @__PURE__ */ p("div", {
+		role: "grid",
+		"aria-label": "Select month",
+		className: _,
 		children: n.map((e, n) => {
-			let r = s(n);
-			return /* @__PURE__ */ f("button", {
-				onMouseDown: (e) => e.preventDefault(),
+			let r = m(n), i = n === t, l = n === s, d = g("rmd-month-button", i ? "rmd-month-button-selected" : "rmd-month-button-unselected", o?.monthButton, i ? o?.monthButtonSelected : o?.monthButtonUnselected);
+			return /* @__PURE__ */ p("button", {
+				ref: (e) => {
+					u.current[n] = e;
+				},
+				role: "gridcell",
+				"aria-selected": i,
+				"aria-disabled": r,
+				tabIndex: l ? 0 : -1,
 				onClick: () => !r && a(n),
-				className: `${o.monthButton} ${n === t ? o.monthButtonSelected : o.monthButtonUnselected}`,
+				onKeyDown: (e) => h(e, n),
+				onFocus: () => c(n),
+				className: d,
 				disabled: r,
 				children: e
 			}, e);
 		})
 	});
-}, C = ({ year: e, minDate: t, maxDate: n, adapter: r, onYearSelect: i, classNames: a }) => {
-	let o = u(null);
+}, w = ({ year: e, minDate: t, maxDate: n, adapter: r, onYearSelect: i, classNames: a }) => {
+	let o = d(null), [s, c] = f(e), u = d(/* @__PURE__ */ new Map()), m = t ? r.get(r.date(t), "year") : e - 50, h = n ? r.get(r.date(n), "year") : e + 50, _ = [];
+	for (let e = m; e <= h; e++) _.push(e);
 	l(() => {
 		if (o.current) {
-			let e = o.current.querySelector("[data-selected=\"true\"]");
-			e && e.scrollIntoView({ block: "center" });
+			let e = o.current, t = e.querySelector("[data-selected=\"true\"]");
+			if (t) {
+				let n = t.offsetTop - e.clientHeight / 2 + t.clientHeight / 2;
+				e.scrollTop = Math.max(0, n);
+			}
 		}
-	}, []);
-	let s = t ? r.get(r.date(t), "year") : e - 50, c = n ? r.get(r.date(n), "year") : e + 50, d = [];
-	for (let e = s; e <= c; e++) d.push(e);
-	return /* @__PURE__ */ f("div", {
+	}, []), l(() => {
+		let e = u.current.get(s);
+		e && e.focus();
+	}, [s]);
+	let v = (e, t) => {
+		let n = s;
+		switch (e.key) {
+			case "ArrowLeft":
+				e.preventDefault(), n = Math.max(m, t - 1);
+				break;
+			case "ArrowRight":
+				e.preventDefault(), n = Math.min(h, t + 1);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), n = Math.max(m, t - 3);
+				break;
+			case "ArrowDown":
+				e.preventDefault(), n = Math.min(h, t + 3);
+				break;
+			case "PageUp":
+				e.preventDefault(), n = Math.max(m, t - 10);
+				break;
+			case "PageDown":
+				e.preventDefault(), n = Math.min(h, t + 10);
+				break;
+			case "Home":
+				e.preventDefault(), n = m;
+				break;
+			case "End":
+				e.preventDefault(), n = h;
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault(), i(t);
+				return;
+			default: return;
+		}
+		c(n);
+	};
+	return /* @__PURE__ */ p("div", {
 		ref: o,
-		className: a.yearsGrid,
-		children: d.map((t) => /* @__PURE__ */ f("button", {
-			"data-selected": t === e,
-			onMouseDown: (e) => e.preventDefault(),
-			onClick: () => i(t),
-			className: `${a.yearButton} ${t === e ? a.yearButtonSelected : a.yearButtonUnselected}`,
-			children: t
-		}, t))
+		role: "grid",
+		"aria-label": "Select year",
+		className: g("rmd-years-grid", a?.yearsGrid),
+		children: _.map((t) => {
+			let n = t === e, r = t === s, o = g("rmd-year-button", n ? "rmd-year-button-selected" : "rmd-year-button-unselected", a?.yearButton, n ? a?.yearButtonSelected : a?.yearButtonUnselected);
+			return /* @__PURE__ */ p("button", {
+				ref: (e) => {
+					e ? u.current.set(t, e) : u.current.delete(t);
+				},
+				"data-selected": n,
+				role: "gridcell",
+				"aria-selected": n,
+				tabIndex: r ? 0 : -1,
+				onClick: () => i(t),
+				onKeyDown: (e) => v(e, t),
+				onFocus: () => c(t),
+				className: o,
+				children: t
+			}, t);
+		})
 	});
-}, w = (e) => {
-	let { classNames: r, locale: i, translations: a, adapter: o = t, firstDayOfWeek: s = 0, header: c, footer: l, getDayProps: u, ...h } = e, _ = x(r), [v, b] = d("days"), [w, T] = d(null), E = g(o, i, a), D = E.weekdays, O = E.months, { calendars: k, getBackProps: A, getForwardProps: j, getDateProps: M, setOffset: N } = n({
-		...h,
+}, T = (e) => `${e.getFullYear()}-${e.getMonth()}-${e.getDate()}`, E = (e) => {
+	let { classNames: r, locale: i, translations: a, adapter: o = t, firstDayOfWeek: s = 0, header: c, footer: h, getDayProps: _, ...E } = e, [D, O] = f("days"), [k, A] = f(null), [j, M] = f(null), [N, P] = f(null), [F, I] = f(""), L = d(null), R = d(null), z = d(/* @__PURE__ */ new Map()), B = d(!1), V = v(o, i, a), H = V.weekdays, U = V.months, { calendars: W, getBackProps: G, getForwardProps: ee, getDateProps: K, setOffset: q } = n({
+		...E,
 		adapter: o,
 		firstDayOfWeek: s
-	}), P = [...D.slice(s), ...D.slice(0, s)], { month: F, year: I } = k[0], L = (t) => {
-		let n = o.set(o.set(o.date(e.date || /* @__PURE__ */ new Date()), "year", I), "month", F), r = o.set(n, "month", t), i = o.startOf(o.date(e.date || /* @__PURE__ */ new Date()), "month"), a = o.diff(r, i, "month");
-		T(null), N(a), b("days");
-	}, R = (t) => {
-		let n = o.set(o.set(o.date(e.date || /* @__PURE__ */ new Date()), "year", I), "month", F), r = o.set(n, "year", t), i = o.startOf(o.date(e.date || /* @__PURE__ */ new Date()), "month"), a = o.diff(r, i, "month");
-		T(null), N(a), b("days");
-	}, z = (e) => {
-		let t = A(e);
+	});
+	l(() => {
+		if (D === "days" && L.current) {
+			let e = L.current, t = () => {
+				e.offsetHeight > 0 && M(e.offsetHeight);
+			};
+			if (t(), typeof ResizeObserver < "u") {
+				let n = new ResizeObserver(() => {
+					t();
+				});
+				return n.observe(e), () => n.disconnect();
+			}
+		}
+	}, [D, W]), l(() => {
+		D === "days" && W.length > 0 ? W.length === 1 ? I(`${U[W[0].month]} ${W[0].year}`) : I(`${U[W[0].month]} ${W[0].year} to ${U[W[W.length - 1].month]} ${W[W.length - 1].year}`) : D === "months" ? I("Month selection view") : D === "years" && I("Year selection view");
+	}, [
+		D,
+		W,
+		U
+	]);
+	let te = u(() => {
+		for (let e of W) for (let t of e.weeks) for (let e of t) if (e?.selectable && e.selected) return e.date;
+		for (let e of W) for (let t of e.weeks) for (let e of t) if (e?.selectable && e.today) return e.date;
+		for (let e of W) for (let t of e.weeks) for (let e of t) if (e?.selectable && !e.prevMonth && !e.nextMonth) return e.date;
+		return W[0]?.weeks[0]?.find((e) => e?.selectable)?.date || /* @__PURE__ */ new Date();
+	}, [W]), J = N || te;
+	l(() => {
+		if (D === "days" && J && B.current) {
+			let e = T(J), t = z.current.get(e);
+			t && t.focus();
+		}
+	}, [
+		J,
+		W,
+		D
+	]);
+	let ne = [...H.slice(s), ...H.slice(0, s)], { month: Y, year: X } = W[0], re = (t) => {
+		let n = o.set(o.set(o.date(e.date || /* @__PURE__ */ new Date()), "year", X), "month", Y), r = o.set(n, "month", t), i = o.startOf(o.date(e.date || /* @__PURE__ */ new Date()), "month"), a = o.diff(r, i, "month");
+		A(null), q(a), O("days");
+	}, ie = (t) => {
+		let n = o.set(o.set(o.date(e.date || /* @__PURE__ */ new Date()), "year", X), "month", Y), r = o.set(n, "year", t), i = o.startOf(o.date(e.date || /* @__PURE__ */ new Date()), "month"), a = o.diff(r, i, "month");
+		A(null), q(a), O("days");
+	}, Z = E.monthsToDisplay || 1, Q = (e) => {
+		let t = G({
+			offset: Z,
+			...e
+		});
 		return {
 			...t,
 			onClick: (e) => {
-				T("left"), t.onClick?.(e);
+				A("left"), t.onClick?.(e);
 			}
 		};
-	}, B = (e) => {
-		let t = j(e);
+	}, $ = (e) => {
+		let t = ee({
+			offset: Z,
+			...e
+		});
 		return {
 			...t,
 			onClick: (e) => {
-				T("right"), t.onClick?.(e);
+				A("right"), t.onClick?.(e);
 			}
 		};
+	}, ae = (t, n) => {
+		let r = !!(R.current?.closest("[dir=\"rtl\"]") || typeof document < "u" && document.documentElement.dir === "rtl"), i = null, a = o.date(n.date);
+		switch (t.key) {
+			case "ArrowLeft":
+				t.preventDefault(), i = o.toDate(o.add(a, r ? 1 : -1, "day"));
+				break;
+			case "ArrowRight":
+				t.preventDefault(), i = o.toDate(o.add(a, r ? -1 : 1, "day"));
+				break;
+			case "ArrowUp":
+				t.preventDefault(), i = o.toDate(o.subtract(a, 7, "day"));
+				break;
+			case "ArrowDown":
+				t.preventDefault(), i = o.toDate(o.add(a, 7, "day"));
+				break;
+			case "Home": {
+				t.preventDefault();
+				let e = (o.toDate(a).getDay() - s + 7) % 7;
+				i = o.toDate(o.subtract(a, e, "day"));
+				break;
+			}
+			case "End": {
+				t.preventDefault();
+				let e = 6 - (o.toDate(a).getDay() - s + 7) % 7;
+				i = o.toDate(o.add(a, e, "day"));
+				break;
+			}
+			case "PageUp": {
+				t.preventDefault();
+				let e = t.shiftKey ? "year" : "month";
+				i = o.toDate(o.subtract(a, 1, e));
+				break;
+			}
+			case "PageDown": {
+				t.preventDefault();
+				let e = t.shiftKey ? "year" : "month";
+				i = o.toDate(o.add(a, 1, e));
+				break;
+			}
+			case "Enter":
+			case " ": return;
+			default: return;
+		}
+		if (i) {
+			B.current = !0, P(i);
+			let t = o.startOf(o.date(e.date || /* @__PURE__ */ new Date()), "month"), n = o.startOf(o.date(i), "month"), r = o.diff(n, t, "month");
+			q(r);
+		}
 	};
-	return /* @__PURE__ */ p("div", {
-		className: `rmdp ${_.root}`,
+	return /* @__PURE__ */ m("div", {
+		ref: R,
+		className: g("rmd", "rmd-root", r?.root),
 		children: [
+			/* @__PURE__ */ p("div", {
+				className: "rmd-sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: F
+			}),
 			typeof c == "function" ? c({
-				calendars: k,
-				getBackProps: z,
-				getForwardProps: B,
-				setView: b,
-				monthNames: O,
-				t: E,
-				slideDirection: w,
-				currentView: v
-			}) : c || /* @__PURE__ */ f(y, {
-				calendars: k,
-				getBackProps: z,
-				getForwardProps: B,
-				setView: b,
-				monthNames: O,
-				t: E,
-				classNames: _,
-				slideDirection: w,
-				currentView: v
+				calendars: W,
+				getBackProps: Q,
+				getForwardProps: $,
+				setView: O,
+				monthNames: U,
+				t: V,
+				slideDirection: k,
+				currentView: D
+			}) : c || /* @__PURE__ */ p(x, {
+				calendars: W,
+				getBackProps: Q,
+				getForwardProps: $,
+				setView: O,
+				monthNames: U,
+				t: V,
+				classNames: r,
+				slideDirection: k,
+				currentView: D
 			}),
-			/* @__PURE__ */ p("div", {
-				className: _.calendarsContainer,
+			/* @__PURE__ */ m("div", {
+				className: g("rmd-calendars-container", r?.calendarsContainer),
 				children: [
-					v === "months" && k.map((t) => /* @__PURE__ */ f("div", {
-						className: _.calendarContainer,
-						children: /* @__PURE__ */ f(S, {
+					D === "months" && W.map((t) => /* @__PURE__ */ p("div", {
+						className: g("rmd-calendar-container", r?.calendarContainer),
+						style: j ? { height: `${j}px` } : void 0,
+						children: /* @__PURE__ */ p(C, {
 							year: t.year,
 							month: t.month,
-							monthNames: O,
+							monthNames: U,
 							minDate: e.minDate,
 							maxDate: e.maxDate,
-							onMonthSelect: L,
-							classNames: _
+							onMonthSelect: re,
+							classNames: r
 						})
 					}, `months-${t.year}`)),
-					v === "years" && k.map((t) => /* @__PURE__ */ f("div", {
-						className: _.calendarContainer,
-						children: /* @__PURE__ */ f(C, {
+					D === "years" && W.map((t) => /* @__PURE__ */ p("div", {
+						className: g("rmd-calendar-container", r?.calendarContainer),
+						style: j ? { height: `${j}px` } : void 0,
+						children: /* @__PURE__ */ p(w, {
 							year: t.year,
 							minDate: e.minDate,
 							maxDate: e.maxDate,
 							adapter: o,
-							onYearSelect: R,
-							classNames: _
+							onYearSelect: ie,
+							classNames: r
 						})
 					}, `years-${t.year}`)),
-					v === "days" && k.map((e) => /* @__PURE__ */ p("div", {
-						className: _.calendarContainer,
+					D === "days" && W.map((e, t) => /* @__PURE__ */ m("div", {
+						ref: t === 0 ? L : void 0,
+						role: "grid",
+						"aria-label": `${U[e.month]} ${e.year}`,
+						className: g("rmd-calendar-container", r?.calendarContainer),
 						children: [
-							k.length > 1 && /* @__PURE__ */ p("button", {
-								type: "button",
-								"aria-label": O[e.month],
-								className: "block w-full text-center font-semibold mb-2 text-brand-text",
+							W.length > 1 && /* @__PURE__ */ m("div", {
+								className: g("rmd-header", r?.header),
 								children: [
-									O[e.month],
-									" ",
-									k[0].year === k[k.length - 1].year ? "" : e.year
+									/* @__PURE__ */ p("div", {
+										className: g("rmd-nav-button-slot-start", r?.navButtonSlotStart),
+										children: t === 0 && W.length < 12 && /* @__PURE__ */ p("button", {
+											...Q({ calendars: W }),
+											className: g("rmd-nav-button", r?.navButton),
+											"aria-label": V.back,
+											children: /* @__PURE__ */ p(y, {})
+										})
+									}),
+									/* @__PURE__ */ m("span", {
+										className: g("rmd-header-title-container", r?.headerTitleContainer),
+										children: [U[e.month], W.length < 12 ? ` ${e.year}` : ""]
+									}),
+									/* @__PURE__ */ p("div", {
+										className: g("rmd-nav-button-slot-end", r?.navButtonSlotEnd),
+										children: t === W.length - 1 && W.length < 12 && /* @__PURE__ */ p("button", {
+											...$({ calendars: W }),
+											className: g("rmd-nav-button", r?.navButton),
+											"aria-label": V.forward,
+											children: /* @__PURE__ */ p(b, {})
+										})
+									})
 								]
 							}),
-							/* @__PURE__ */ f("div", {
-								className: _.weekdayGrid,
-								children: P.map((e) => /* @__PURE__ */ f("div", {
-									className: _.weekday,
+							/* @__PURE__ */ p("div", {
+								role: "row",
+								className: g("rmd-weekday-grid", r?.weekdayGrid),
+								children: ne.map((e) => /* @__PURE__ */ p("div", {
+									role: "columnheader",
+									"aria-label": e,
+									className: g("rmd-weekday", r?.weekday),
 									children: e
 								}, e))
 							}),
-							/* @__PURE__ */ f("div", {
-								className: `${_.daysGrid} ${w === "left" ? "animate-slide-in-left" : w === "right" ? "animate-slide-in-right" : ""}`,
-								children: e.weeks.map((e, t) => e.map((e, n) => /* @__PURE__ */ f(m, {
-									dateObj: e,
-									getDateProps: M,
-									dayProps: e ? u?.(e) : void 0,
-									classNames: _
-								}, `${t}-${n}`)))
-							})
+							/* @__PURE__ */ p("div", {
+								role: "row",
+								className: g("rmd-days-grid", k === "left" && "rmd-slide-left", k === "right" && "rmd-slide-right", r?.daysGrid),
+								children: e.weeks.map((e, t) => e.map((e, n) => {
+									if (!e) return /* @__PURE__ */ p(S, {
+										dateObj: null,
+										getDateProps: K,
+										classNames: r
+									}, `${t}-${n}`);
+									let a = T(e.date), s = o.isSame(o.date(e.date), o.date(J), "day");
+									return /* @__PURE__ */ p(S, {
+										dateObj: e,
+										getDateProps: K,
+										dayProps: _?.(e),
+										classNames: r,
+										tabIndex: s ? 0 : -1,
+										adapter: o,
+										locale: i,
+										onKeyDown: ae,
+										onFocus: (e) => {
+											P(e.date);
+										},
+										buttonRef: (e) => {
+											e ? z.current.set(a, e) : z.current.delete(a);
+										}
+									}, `${t}-${n}`);
+								}))
+							}, `daysGrid-${e.month}-${e.year}`)
 						]
 					}, `${e.month}-${e.year}`))
 				]
 			}),
-			l && /* @__PURE__ */ f("div", {
-				className: _.footer,
-				children: l
+			h && /* @__PURE__ */ p("div", {
+				className: g("rmd-footer", r?.footer),
+				children: h
 			})
 		]
 	});
 };
 //#endregion
-export { w as Calendar, y as CalendarHeader, _ as ChevronLeftIcon, v as ChevronRightIcon, m as Day, e as DayjsAdapter, S as MonthSelection, C as YearSelection, r as addMonth, i as composeEventHandlers, t as defaultAdapter, b as defaultClassNames, a as getCalendars, h as getDefaults, g as getTranslations, o as isBackDisabled, s as isForwardDisabled, x as mergeClassNames, c as subtractMonth, n as useDates };
+export { E as Calendar, x as CalendarHeader, y as ChevronLeftIcon, b as ChevronRightIcon, S as Day, e as DayjsAdapter, C as MonthSelection, w as YearSelection, r as addMonth, i as composeEventHandlers, t as defaultAdapter, a as getCalendars, _ as getDefaults, v as getTranslations, o as isBackDisabled, s as isForwardDisabled, c as subtractMonth, n as useDates };
 
 //# sourceMappingURL=index.js.map