haze-ui 1.26.0 → 1.28.0

package/dist/components/Calendar/Calendar.js

@@ -1,14 +1,15 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { useStrings as t } from "../LocaleProvider/useStrings.js";
-import { addMonths as n, buildMonthCells as r, formatDate as i, parseCivilDate as a } from "./date.js";
+import { getDirection as t } from "../../utils/direction.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import { addMonths as r, buildMonthCells as i, formatDate as a, formatMonthValue as o, formatQuarterValue as s, formatYearValue as c, getDaysInMonth as l, getISOWeekNumber as u, parseCivilDate as d, parseMonthValue as f, parseQuarterValue as ee, parseYearValue as p } from "./date.js";
 /* empty css                   */
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useState as c } from "react";
-import { useControl as l } from "react-use-control";
+import { Fragment as te, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useEffect as ne, useRef as g, useState as _ } from "react";
+import { useControl as re } from "react-use-control";
 //#region src/lib/components/Calendar/Calendar.tsx
-var u = "haze-Calendar__calendarWrapper", d = "haze-Calendar__header", f = "haze-Calendar__headerBtn", p = "haze-Calendar__headerTitle", m = "haze-Calendar__headerTrailing", h = "haze-Calendar__grid", g = "haze-Calendar__rowContents", _ = "haze-Calendar__cellContents", v = "haze-Calendar__weekday", y = "haze-Calendar__dayBtn", b = "haze-Calendar__daySelected", x = "haze-Calendar__dayOutside", S = [
+var ie = "haze-Calendar__calendarWrapper", ae = "haze-Calendar__header", v = "haze-Calendar__headerBtn", y = "haze-Calendar__headerTitle", oe = "haze-Calendar__titleBtn", se = "haze-Calendar__headerTrailing", ce = "haze-Calendar__grid", b = "haze-Calendar__rowContents", x = "haze-Calendar__cellContents", le = "haze-Calendar__weekday", ue = "haze-Calendar__weekNumber", S = "haze-Calendar__dayBtn", C = "haze-Calendar__daySelected", de = "haze-Calendar__dayInRange", fe = "haze-Calendar__dayOutside", pe = "haze-Calendar__monthPanels", me = "haze-Calendar__monthPanel", he = "haze-Calendar__paneHeader", ge = "haze-Calendar__quickSelect", _e = "haze-Calendar__quickToolbar", w = "haze-Calendar__quickGrid", ve = "haze-Calendar__quarterGrid", ye = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -17,7 +18,7 @@ var u = "haze-Calendar__calendarWrapper", d = "haze-Calendar__header", f = "haze
 	"Fr",
 	"Sa"
 ];
-function C(e, t) {
+function be(e, t) {
 	if (t !== void 0) return t;
 	if (e === void 0) return 0;
 	try {
@@ -27,98 +28,544 @@ function C(e, t) {
 		return 0;
 	}
 }
-function w(e, t) {
-	if (e === void 0) return Array.from({ length: 7 }, (e, n) => S[(t + n) % 7]);
+function xe(e, t) {
+	if (e === void 0) return Array.from({ length: 7 }, (e, n) => ye[(t + n) % 7]);
 	let n = new Intl.DateTimeFormat(e, { weekday: "short" }), r = Array.from({ length: 7 }, (e, t) => n.format(new Date(2024, 0, 7 + t)));
 	return Array.from({ length: 7 }, (e, n) => r[(t + n) % 7]);
 }
-function T({ value: S, min: T, max: E, locale: D, weekStartsOn: O, onSelect: k, className: A, ...j }) {
-	let [M, N] = l(S, ""), P = t("calendar"), F = M && a(M) || /* @__PURE__ */ new Date(), [I, L] = c(F.getFullYear()), [R, z] = c(F.getMonth()), B = C(D, O), V = w(D, B), H = r(I, R, B), U = () => {
-		let e = n(I, R, -1);
-		L(e.year), z(e.month);
-	}, W = () => {
-		let e = n(I, R, 1);
-		L(e.year), z(e.month);
-	}, G = () => {
-		let e = /* @__PURE__ */ new Date();
-		L(e.getFullYear()), z(e.getMonth());
-	}, K = (e) => !!(T && e < T || E && e > E), q = new Intl.DateTimeFormat(D ?? "default", {
+function T(e) {
+	return Array.from(e?.querySelectorAll("button") ?? []);
+}
+function E(e, t, n) {
+	let r = t + n;
+	for (; r >= 0 && r < e.length && e[r].disabled;) r += n;
+	return r < 0 || r >= e.length ? null : r;
+}
+function Se(e, n, i, o) {
+	return (s) => {
+		let c = e.current;
+		if (!c) return;
+		let u = T(c);
+		if (u.length === 0) return;
+		let d = u.indexOf(s.target.closest("button")), f = t(c) === "rtl" ? "ArrowLeft" : "ArrowRight", ee = f === "ArrowLeft" ? "ArrowRight" : "ArrowLeft", p = (e) => {
+			let t = E(u, d < 0 ? 0 : d, e);
+			t !== null && (s.preventDefault(), u[t].focus());
+		};
+		switch (s.key) {
+			case f:
+				p(1);
+				return;
+			case ee:
+				p(-1);
+				return;
+			case "ArrowDown":
+				p(7);
+				return;
+			case "ArrowUp":
+				p(-7);
+				return;
+			case "Home": {
+				let e = E(u, (d < 0 ? 0 : d - d % 7) - 1, 1);
+				e !== null && (s.preventDefault(), u[e].focus());
+				return;
+			}
+			case "End": {
+				let e = E(u, (d < 0 ? 6 : d - d % 7 + 6) + 1, -1);
+				e !== null && (s.preventDefault(), u[e].focus());
+				return;
+			}
+			case "PageUp":
+			case "PageDown": {
+				s.preventDefault();
+				let e = s.key === "PageDown" ? 1 : -1, t = r(n.year, n.month, e), c = d >= 0 ? Number(u[d].textContent) : 1, f = Math.min(Math.max(c, 1), l(t.year, t.month));
+				i(t), o.current = a(t.year, t.month, f);
+				return;
+			}
+		}
+	};
+}
+function D(e, n, r, i) {
+	return (a) => {
+		let o = e.current;
+		if (!o) return;
+		let s = T(o);
+		if (s.length === 0) return;
+		let c = s.indexOf(a.target.closest("button")), l = t(o) === "rtl" ? "ArrowLeft" : "ArrowRight", u = l === "ArrowLeft" ? "ArrowRight" : "ArrowLeft", d = (e) => {
+			let t = E(s, c < 0 ? 0 : c, e);
+			t !== null && (a.preventDefault(), s[t].focus());
+		};
+		switch (a.key) {
+			case l:
+				d(1);
+				return;
+			case u:
+				d(-1);
+				return;
+			case "ArrowDown":
+				d(n);
+				return;
+			case "ArrowUp":
+				d(-n);
+				return;
+			case "Home": {
+				let e = E(s, (c < 0 ? 0 : c - c % n) - 1, 1);
+				e !== null && (a.preventDefault(), s[e].focus());
+				return;
+			}
+			case "End": {
+				let e = E(s, (c < 0 ? n - 1 : Math.min(c - c % n + n - 1, s.length - 1)) + 1, -1);
+				e !== null && (a.preventDefault(), s[e].focus());
+				return;
+			}
+			case "PageUp":
+			case "PageDown":
+				a.preventDefault(), i.current = c < 0 ? 0 : c, r(a.key === "PageDown" ? 1 : -1);
+				return;
+		}
+	};
+}
+function O({ picker: t = "date", value: ye, min: E, max: O, disabledDate: k, locale: A, weekStartsOn: Ce, showWeekNumbers: j = !1, months: we = 1, rangeStart: M, rangeEnd: N, onSelect: Te, className: Ee, ...De }) {
+	let [P, Oe] = re(ye, ""), F = n("calendar"), I = g(null), ke = g(null), L = g(null), R = g(null), z = g(null), B = g(null), V = g(null), Ae = g(null), H = g(null), [U, W] = _(!1), [G, K] = _(0), [q, je] = _(!1), Me = t === "month" ? f(P) : t === "quarter" ? ee(P) : t === "year" ? p(P) : null, Ne = t === "date" ? P && d(P) || M && d(M) || /* @__PURE__ */ new Date() : Me ? new Date(Me.year, 0, 1) : /* @__PURE__ */ new Date(), [J, Pe] = _(Ne.getFullYear()), [Y, Fe] = _(Ne.getMonth()), Ie = be(A, Ce), Le = xe(A, Ie), Re = new Intl.DateTimeFormat(A ?? "default", {
 		month: "long",
 		year: "numeric"
-	}).format(new Date(I, R)), J = [];
-	for (let e = 0; e < H.length; e += 7) J.push(H.slice(e, e + 7));
-	return /* @__PURE__ */ s("div", {
-		...j,
-		className: e([u, A]),
-		children: [/* @__PURE__ */ s("div", {
-			className: e([d]),
-			children: [
-				/* @__PURE__ */ o("button", {
-					type: "button",
-					onClick: U,
-					"aria-label": P.previousMonth,
-					className: e([f]),
-					children: "‹"
-				}),
-				/* @__PURE__ */ o("span", {
-					className: e([p]),
-					children: q
-				}),
-				/* @__PURE__ */ s("span", {
-					className: e([m]),
-					children: [/* @__PURE__ */ o("button", {
-						type: "button",
-						onClick: G,
-						className: e([f]),
-						children: P.today
-					}), /* @__PURE__ */ o("button", {
-						type: "button",
-						onClick: W,
-						"aria-label": P.nextMonth,
-						className: e([f]),
-						children: "›"
-					})]
-				})
-			]
-		}), /* @__PURE__ */ s("div", {
+	}), ze = new Intl.DateTimeFormat(A ?? "default", { month: "short" }), Be = Array.from({ length: 12 }, (e, t) => ze.format(new Date(2026, t, 15))), X = (e) => {
+		Pe(e.year), Fe(e.month);
+	};
+	ne(() => {
+		if (U) return;
+		let e = R.current;
+		e && (R.current = null, L.current?.querySelector(`[data-haze-day="${e}"]`)?.focus());
+	}, [
+		J,
+		Y,
+		U
+	]), ne(() => {
+		if (!U) return;
+		let e = z.current;
+		z.current = null;
+		let t = T(H.current);
+		t.length !== 0 && (t[e ?? 0] ?? t[0]).focus();
+	}, [
+		U,
+		G,
+		q
+	]), ne(() => {
+		if (t === "date") return;
+		let e = B.current;
+		if (B.current = null, e === null) return;
+		let n = T(V.current);
+		(n[e] ?? n[0])?.focus();
+	}, [t, J]);
+	let Ve = () => {
+		z.current = Y, K(J), je(!1), W(!0);
+	}, He = () => {
+		W(!1), Ae.current?.focus();
+	}, Ue = (e) => {
+		W(!1), X({
+			year: G,
+			month: e
+		}), R.current = a(G, e, 1);
+	}, Z = Math.floor(G / 10) * 10, We = () => {
+		z.current = G - Z, je(!0);
+	}, Ge = () => {
+		je(!1), z.current = Y;
+	}, Ke = (e) => {
+		K(e), Ge();
+	}, Q = r(J, Y, we - 1), qe = Se(I, {
+		year: J,
+		month: Y
+	}, X, R), Je = Se(ke, Q, X, R), Ye = D(H, 3, (e) => K((t) => t + e), z), Xe = D(H, 3, (e) => K((t) => t + e * 10), z), Ze = t === "quarter" ? 4 : 3, Qe = (e) => Pe((n) => n + e * (t === "year" ? 10 : 1)), $e = D(V, Ze, Qe, B), et = () => X(r(J, Y, -1)), tt = () => X(r(J, Y, 1)), nt = () => {
+		let e = /* @__PURE__ */ new Date();
+		Pe(e.getFullYear()), Fe(e.getMonth());
+	}, rt = (e, t, n) => {
+		let r = a(e, t, n);
+		return E && r < E || O && r > O ? !0 : k?.(new Date(e, t, n)) ?? !1;
+	}, it = (e, t) => E && a(e, t, l(e, t)) < E || O && a(e, t, 1) > O ? !0 : k?.(new Date(e, t, 1)) ?? !1, at = (e, t) => {
+		let n = t * 3 - 3, r = t * 3 - 1;
+		return E && a(e, r, l(e, r)) < E || O && a(e, n, 1) > O ? !0 : k?.(new Date(e, n, 1)) ?? !1;
+	}, ot = (e) => E && a(e, 11, 31) < E || O && a(e, 0, 1) > O ? !0 : k?.(new Date(e, 0, 1)) ?? !1, st = (e) => {
+		Oe(e), Te?.(e);
+	}, ct = M !== void 0 && M !== "", lt = N !== void 0 && N !== "", ut = (e) => ct && e === M || lt && e === N, dt = (e) => ct && lt && e > M && e < N, ft = Re.format(new Date(J, Y)), $ = (t, n, r) => {
+		let o = i(t.year, t.month, Ie), s = [];
+		for (let e = 0; e < o.length; e += 7) s.push(o.slice(e, e + 7));
+		let c = Re.format(new Date(t.year, t.month));
+		return /* @__PURE__ */ h("div", {
+			ref: n,
+			style: j ? { gridTemplateColumns: "repeat(8, 1fr)" } : void 0,
 			role: "grid",
-			"aria-label": q,
-			className: e([h]),
-			children: [/* @__PURE__ */ o("div", {
+			"aria-label": c,
+			onKeyDown: r,
+			className: e([ce]),
+			children: [/* @__PURE__ */ h("div", {
 				role: "row",
-				className: e([g]),
-				children: V.map((t, n) => /* @__PURE__ */ o("span", {
+				className: e([b]),
+				children: [j && /* @__PURE__ */ m("span", {
 					role: "columnheader",
-					className: e([v]),
+					className: e([le]),
+					children: F.weekNumber
+				}), Le.map((t, n) => /* @__PURE__ */ m("span", {
+					role: "columnheader",
+					className: e([le]),
 					children: t
-				}, n))
-			}), J.map((t, n) => /* @__PURE__ */ o("div", {
+				}, n))]
+			}), s.map((t, n) => /* @__PURE__ */ h("div", {
 				role: "row",
-				className: e([g]),
-				children: t.map((t) => {
-					let n = i(t.year, t.month, t.day);
-					return /* @__PURE__ */ o("span", {
+				className: e([b]),
+				children: [j && /* @__PURE__ */ m("span", {
+					role: "gridcell",
+					className: e([ue]),
+					children: u(t[0].year, t[0].month, t[0].day)
+				}), t.map((t) => {
+					let n = a(t.year, t.month, t.day), r = ut(n), i = n === P || r;
+					return /* @__PURE__ */ m("span", {
 						role: "gridcell",
-						"aria-selected": n === M,
-						className: e([_]),
-						children: /* @__PURE__ */ o("button", {
+						"aria-selected": i || dt(n),
+						className: e([x]),
+						children: /* @__PURE__ */ m("button", {
 							type: "button",
-							disabled: K(n),
+							"data-haze-day": n,
+							disabled: rt(t.year, t.month, t.day),
 							onClick: () => {
-								N(n), k?.(n);
+								Oe(n), Te?.(n);
 							},
 							className: e([
-								y,
-								n === M && b,
-								t.outside && x
+								S,
+								i && C,
+								!i && dt(n) && de,
+								t.outside && fe
 							]),
 							children: t.day
 						})
 					}, n);
-				})
+				})]
 			}, n))]
+		});
+	}, pt = /* @__PURE__ */ h("div", {
+		onKeyDown: mt,
+		className: e([ge]),
+		children: [/* @__PURE__ */ m("div", {
+			className: e([_e]),
+			children: q ? /* @__PURE__ */ h(te, { children: [
+				/* @__PURE__ */ m("button", {
+					type: "button",
+					onClick: () => K((e) => e - 10),
+					"aria-label": F.previousDecade,
+					className: e([v]),
+					children: "‹"
+				}),
+				/* @__PURE__ */ h("span", {
+					className: e([y]),
+					children: [
+						Z,
+						" – ",
+						Z + 11
+					]
+				}),
+				/* @__PURE__ */ m("button", {
+					type: "button",
+					onClick: () => K((e) => e + 10),
+					"aria-label": F.nextDecade,
+					className: e([v]),
+					children: "›"
+				})
+			] }) : /* @__PURE__ */ h(te, { children: [
+				/* @__PURE__ */ m("button", {
+					type: "button",
+					onClick: () => K((e) => e - 1),
+					"aria-label": F.previousYear,
+					className: e([v]),
+					children: "‹"
+				}),
+				/* @__PURE__ */ m("button", {
+					type: "button",
+					"aria-haspopup": "grid",
+					onClick: We,
+					className: e([oe, y]),
+					children: G
+				}),
+				/* @__PURE__ */ m("button", {
+					type: "button",
+					onClick: () => K((e) => e + 1),
+					"aria-label": F.nextYear,
+					className: e([v]),
+					children: "›"
+				})
+			] })
+		}), q ? /* @__PURE__ */ m("div", {
+			ref: H,
+			role: "grid",
+			"aria-label": F.selectYear,
+			onKeyDown: Xe,
+			className: e([w]),
+			children: [
+				0,
+				1,
+				2,
+				3
+			].map((t) => /* @__PURE__ */ m("div", {
+				role: "row",
+				className: e([b]),
+				children: [
+					0,
+					1,
+					2
+				].map((n) => {
+					let r = Z + t * 3 + n, i = r === J;
+					return /* @__PURE__ */ m("span", {
+						role: "gridcell",
+						"aria-selected": i,
+						className: e([x]),
+						children: /* @__PURE__ */ m("button", {
+							type: "button",
+							"data-haze-year": r,
+							disabled: ot(r),
+							onClick: () => Ke(r),
+							className: e([S, i && C]),
+							children: r
+						})
+					}, r);
+				})
+			}, t))
+		}) : /* @__PURE__ */ m("div", {
+			ref: H,
+			role: "grid",
+			"aria-label": F.selectMonth,
+			onKeyDown: Ye,
+			className: e([w]),
+			children: [
+				0,
+				1,
+				2,
+				3
+			].map((t) => /* @__PURE__ */ m("div", {
+				role: "row",
+				className: e([b]),
+				children: [
+					0,
+					1,
+					2
+				].map((n) => {
+					let r = t * 3 + n, i = G === J && r === Y;
+					return /* @__PURE__ */ m("span", {
+						role: "gridcell",
+						"aria-selected": i,
+						className: e([x]),
+						children: /* @__PURE__ */ m("button", {
+							type: "button",
+							"data-haze-month": r,
+							onClick: () => Ue(r),
+							className: e([S, i && C]),
+							children: Be[r]
+						})
+					}, r);
+				})
+			}, t))
 		})]
 	});
+	function mt(e) {
+		e.key === "Escape" && (e.preventDefault(), q ? Ge() : He());
+	}
+	if (t !== "date") {
+		let n = Math.floor(J / 10) * 10, r = t === "year" ? F.previousDecade : F.previousYear, i = t === "year" ? F.nextDecade : F.nextYear, a = t === "year" ? `${n} – ${n + 11}` : String(J), l = t === "month" ? /* @__PURE__ */ m("div", {
+			ref: V,
+			role: "grid",
+			"aria-label": F.selectMonth,
+			onKeyDown: $e,
+			className: e([w]),
+			children: [
+				0,
+				1,
+				2,
+				3
+			].map((t) => /* @__PURE__ */ m("div", {
+				role: "row",
+				className: e([b]),
+				children: [
+					0,
+					1,
+					2
+				].map((n) => {
+					let r = t * 3 + n, i = P === o(J, r);
+					return /* @__PURE__ */ m("span", {
+						role: "gridcell",
+						"aria-selected": i,
+						className: e([x]),
+						children: /* @__PURE__ */ m("button", {
+							type: "button",
+							"data-haze-month": r,
+							disabled: it(J, r),
+							onClick: () => st(o(J, r)),
+							className: e([S, i && C]),
+							children: Be[r]
+						})
+					}, r);
+				})
+			}, t))
+		}) : t === "quarter" ? /* @__PURE__ */ m("div", {
+			ref: V,
+			role: "grid",
+			"aria-label": F.selectQuarter,
+			onKeyDown: $e,
+			className: e([ve]),
+			children: m("div", {
+				role: "row",
+				className: e([b]),
+				children: [
+					1,
+					2,
+					3,
+					4
+				].map((t) => {
+					let n = P === s(J, t);
+					return /* @__PURE__ */ m("span", {
+						role: "gridcell",
+						"aria-selected": n,
+						className: e([x]),
+						children: /* @__PURE__ */ h("button", {
+							type: "button",
+							"data-haze-quarter": t,
+							disabled: at(J, t),
+							onClick: () => st(s(J, t)),
+							className: e([S, n && C]),
+							children: ["Q", t]
+						})
+					}, t);
+				})
+			})
+		}) : /* @__PURE__ */ m("div", {
+			ref: V,
+			role: "grid",
+			"aria-label": F.selectYear,
+			onKeyDown: $e,
+			className: e([w]),
+			children: [
+				0,
+				1,
+				2,
+				3
+			].map((t) => /* @__PURE__ */ m("div", {
+				role: "row",
+				className: e([b]),
+				children: [
+					0,
+					1,
+					2
+				].map((r) => {
+					let i = n + t * 3 + r, a = P === c(i);
+					return /* @__PURE__ */ m("span", {
+						role: "gridcell",
+						"aria-selected": a,
+						className: e([x]),
+						children: /* @__PURE__ */ m("button", {
+							type: "button",
+							"data-haze-year": i,
+							disabled: ot(i),
+							onClick: () => st(c(i)),
+							className: e([S, a && C]),
+							children: i
+						})
+					}, i);
+				})
+			}, t))
+		});
+		return /* @__PURE__ */ h("div", {
+			ref: L,
+			...De,
+			className: e([ie, Ee]),
+			children: [/* @__PURE__ */ h("div", {
+				className: e([ae]),
+				children: [
+					/* @__PURE__ */ m("button", {
+						type: "button",
+						onClick: () => Qe(-1),
+						"aria-label": r,
+						className: e([v]),
+						children: "‹"
+					}),
+					/* @__PURE__ */ m("span", {
+						className: e([y]),
+						children: a
+					}),
+					/* @__PURE__ */ h("span", {
+						className: e([se]),
+						children: [/* @__PURE__ */ m("button", {
+							type: "button",
+							onClick: nt,
+							className: e([v]),
+							children: F.today
+						}), /* @__PURE__ */ m("button", {
+							type: "button",
+							onClick: () => Qe(1),
+							"aria-label": i,
+							className: e([v]),
+							children: "›"
+						})]
+					})
+				]
+			}), l]
+		});
+	}
+	return /* @__PURE__ */ h("div", {
+		ref: L,
+		...De,
+		className: e([ie, Ee]),
+		children: [/* @__PURE__ */ h("div", {
+			className: e([ae]),
+			children: [
+				/* @__PURE__ */ m("button", {
+					type: "button",
+					onClick: et,
+					"aria-label": F.previousMonth,
+					className: e([v]),
+					children: "‹"
+				}),
+				/* @__PURE__ */ m("button", {
+					ref: Ae,
+					type: "button",
+					"aria-expanded": U,
+					onClick: U ? He : Ve,
+					className: e([oe, y]),
+					children: ft
+				}),
+				/* @__PURE__ */ h("span", {
+					className: e([se]),
+					children: [/* @__PURE__ */ m("button", {
+						type: "button",
+						onClick: nt,
+						className: e([v]),
+						children: F.today
+					}), /* @__PURE__ */ m("button", {
+						type: "button",
+						onClick: tt,
+						"aria-label": F.nextMonth,
+						className: e([v]),
+						children: "›"
+					})]
+				})
+			]
+		}), U ? pt : we === 2 ? /* @__PURE__ */ h("div", {
+			className: e([pe]),
+			children: [/* @__PURE__ */ m("div", {
+				className: e([me]),
+				children: $({
+					year: J,
+					month: Y
+				}, I, qe)
+			}), /* @__PURE__ */ h("div", {
+				className: e([me]),
+				children: [/* @__PURE__ */ m("div", {
+					className: e([he]),
+					children: /* @__PURE__ */ m("span", {
+						className: e([y]),
+						children: Re.format(new Date(Q.year, Q.month))
+					})
+				}), $(Q, ke, Je)]
+			})]
+		}) : $({
+			year: J,
+			month: Y
+		}, I, qe)]
+	});
 }
 //#endregion
-export { T as default };
+export { O as default };