@slotted/react 0.1.0-beta.3 → 0.1.0-beta.5

package/dist/calendar-BZ6PP7Ke.js

@@ -0,0 +1,436 @@
+import { n as e, t } from "./icon-T9Yt4tnm.js";
+import { n, r } from "./i18n-DpW8lqJ1.js";
+import { createControllable as i } from "@slotted/core/state";
+import { createContext as a, useCallback as o, useContext as s, useEffect as c, useId as ee, useImperativeHandle as l, useMemo as u, useRef as d, useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { calendarMessages as g } from "@slotted/core/i18n";
+import { addDays as _, clampDate as v, compareDate as y, createDateFormat as te, endOfWeek as ne, isDateInRange as re, isSameDate as b, monthGrid as ie, plainDate as x, startOfWeek as ae, stepMonth as S, stepYear as C, todayIn as oe, visibleMonths as se, yearPage as w } from "@slotted/core/date";
+//#region src/calendar/calendar-defaults.tsx
+var T = a({
+	calendar: "gregory",
+	firstDayOfWeek: void 0,
+	fixedWeeks: !1,
+	months: 1,
+	outsideDays: void 0,
+	timeZone: void 0,
+	weekNumbers: !1
+});
+function E() {
+	return s(T);
+}
+function D({ children: e, ...t }) {
+	let n = E();
+	return /* @__PURE__ */ m(T.Provider, {
+		value: {
+			calendar: t.calendar ?? n.calendar,
+			firstDayOfWeek: t.firstDayOfWeek ?? n.firstDayOfWeek,
+			fixedWeeks: t.fixedWeeks ?? n.fixedWeeks,
+			months: t.months ?? n.months,
+			outsideDays: t.outsideDays ?? n.outsideDays,
+			timeZone: t.timeZone ?? n.timeZone,
+			weekNumbers: t.weekNumbers ?? n.weekNumbers
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/calendar/calendar-selection.ts
+function O(e) {
+	return e !== null && !Array.isArray(e) && "start" in e;
+}
+function k(e) {
+	return e === null ? [] : Array.isArray(e) ? e : O(e) ? [e.start, e.end].filter((e) => e !== null) : [e];
+}
+function A(e, t) {
+	if (!O(t)) return null;
+	let { start: n, end: r } = t;
+	return n !== null && b(e, n) ? "start" : r !== null && b(e, r) ? "end" : n === null || r === null ? null : y(e, n) > 0 && y(e, r) < 0 ? "inside" : null;
+}
+function j(e, t) {
+	if (O(t)) {
+		let n = A(e, t);
+		return n === "start" || n === "end";
+	}
+	return k(t).some((t) => b(t, e));
+}
+function ce(e, t, n) {
+	if (n === "single") return j(e, t) ? null : e;
+	if (n === "multiple") {
+		let n = k(t), r = n.filter((t) => !b(t, e));
+		return r.length === n.length ? [...n, e].sort(y) : r;
+	}
+	let r = O(t) ? t : {
+		start: null,
+		end: null
+	};
+	return r.start === null || r.end !== null ? {
+		start: e,
+		end: null
+	} : y(e, r.start) < 0 ? {
+		start: e,
+		end: r.start
+	} : {
+		start: r.start,
+		end: e
+	};
+}
+function le(e, t) {
+	return t === null || !O(e) || e.start === null || e.end !== null ? null : y(t, e.start) < 0 ? {
+		start: t,
+		end: e.start
+	} : {
+		start: e.start,
+		end: t
+	};
+}
+function ue(e, t) {
+	if (O(e) || O(t)) return !O(e) || !O(t) ? !1 : b(e.start, t.start) && b(e.end, t.end);
+	let n = k(e), r = k(t);
+	return n.length === r.length && n.every((e, t) => b(e, r[t] ?? null));
+}
+//#endregion
+//#region src/calendar/calendar.tsx
+var de = {
+	day: 7,
+	month: 4,
+	year: 4
+}, M = 12;
+function fe({ calendar: a, className: s, defaultFocusedDate: y, defaultValue: ie, defaultView: T, disabled: D, firstDayOfWeek: k, fixedWeeks: A, focusedDate: j, granularity: fe, invalid: me, isDateUnavailable: he, locale: ge, max: N, min: P, messages: _e, months: ve, onFocusedDateChange: ye, onKeyDown: be, onPreviewChange: xe, onValueChange: Se, onViewChange: Ce, outsideDays: we, readOnly: Te, ref: Ee, render: De, selectionMode: Oe = "single", style: ke, timeZone: Ae, value: F, view: I, weekNumbers: je, ...Me }) {
+	let L = E(), Ne = n(), Pe = r(g, _e), R = d(null), Fe = ee(), Ie = ge ?? Ne, Le = k ?? L.firstDayOfWeek, Re = Ae ?? L.timeZone, z = Math.max(1, ve ?? L.months), ze = je ?? L.weekNumbers, Be = A ?? L.fixedWeeks, Ve = we ?? L.outsideDays ?? (z > 1 ? "hidden" : "shown"), He = a ?? L.calendar, B = D !== !0 && Te !== !0, V = u(() => te({
+		locale: Ie,
+		firstDayOfWeek: Le
+	}), [Le, Ie]), [H, Ue] = f(null);
+	c(() => Ue(oe(Re)), [Re]);
+	let [We, Ge] = f(ie ?? null), U = F ?? We, W = ie ?? F ?? null, Ke = W === null ? null : Array.isArray(W) ? W[0] ?? null : "start" in W ? W.start : W, qe = y !== void 0 || j !== void 0 || Ke !== null, G = y ?? j ?? Ke ?? x(2026, 1, 1), [Je, Ye] = f(G), K = j ?? Je, q = d(!1), J = fe === "month", [Xe, Ze] = f(T ?? (J ? "month" : "day")), Qe = I ?? Xe, Y = J && Qe === "day" ? "month" : Qe, [$e, et] = f(null), X = Oe === "range" && B ? le(U, $e ?? K) : null, Z = X === null ? null : O(U) && U.start !== null && b(X.start, U.start) ? X.end : X.start, tt = d(null);
+	c(() => {
+		b(tt.current, Z) || (tt.current = Z, xe?.(Z));
+	}, [xe, Z]);
+	let [nt, rt] = f(() => ({
+		year: G.year,
+		month: G.month
+	})), it = o((e, t) => {
+		let n = t.year * 12 + (t.month - 1), r = e.year * 12 + (e.month - 1);
+		if (r >= n && r < n + z) return t;
+		let i = n + Math.floor((r - n) / z) * z;
+		return {
+			year: Math.floor(i / 12),
+			month: i % 12 + 1
+		};
+	}, [z]);
+	c(() => {
+		if (H === null || qe) return;
+		let e = v(H, P, N);
+		Ye((t) => b(t, G) ? e : t), rt((t) => t.year === G.year && t.month === G.month ? {
+			year: e.year,
+			month: e.month
+		} : t);
+	}, [H]);
+	let at = o((e, t, n) => {
+		i({
+			controlled: F,
+			initial: U,
+			equals: ue,
+			onRequest: (e) => Se?.(e.value, e)
+		}).request(e, t, n) && Ge(e);
+	}, [
+		U,
+		Se,
+		F
+	]), Q = o((e, t, n) => {
+		let r = v(e, P, N), a = i({
+			controlled: j,
+			initial: K,
+			equals: (e, t) => b(e, t),
+			onRequest: (e) => ye?.(e.value, e)
+		});
+		q.current = t === "keyboard", a.request(r, t, n) && Ye(r);
+	}, [
+		K,
+		j,
+		N,
+		P,
+		ye
+	]);
+	c(() => {
+		rt((e) => it(K, e));
+	}, [K, it]);
+	let $ = o((e) => {
+		I === void 0 && Ze(e), Ce?.(e);
+	}, [Ce, I]);
+	c(() => {
+		if (!q.current) return;
+		let e = R.current, t = e?.querySelector("[data-part=\"cell\"]:not([data-outside-month]) [data-part=\"day\"][tabindex=\"0\"], [data-part=\"period\"][tabindex=\"0\"]");
+		if (t == null) {
+			e?.querySelector("[data-part=\"day\"][tabindex=\"0\"]") ?? (q.current = !1);
+			return;
+		}
+		q.current = !1, t.focus();
+	}), l(Ee, () => ({
+		focus: () => {
+			R.current?.querySelector("[data-part=\"day\"][tabindex=\"0\"], [data-part=\"period\"][tabindex=\"0\"]")?.focus();
+		},
+		focusDate: (e) => Q(e, "keyboard", void 0)
+	}), [Q]);
+	let ot = o((e) => !re(e, P, N) || he?.(e) === !0, [
+		he,
+		N,
+		P
+	]), st = (e, t, n) => {
+		B && !ot(e) && (at(ce(e, U, Oe), t, n), Q(e, t, n));
+	}, ct = (e, t) => P !== void 0 && e * 12 + t < P.year * 12 + P.month || N !== void 0 && e * 12 + t > N.year * 12 + N.month, lt = (e, t, n, r) => {
+		if (!B || ct(e, t)) return;
+		let i = x(e, t, 1);
+		at(i, n, r), Q(i, n, r);
+	}, ut = U === null || Array.isArray(U) || O(U) ? null : {
+		year: U.year,
+		month: U.month
+	}, dt = (e) => {
+		if (be?.(e), e.defaultPrevented) return;
+		let t = R.current !== null && getComputedStyle(R.current).direction === "rtl", n = t ? "ArrowLeft" : "ArrowRight", r = t ? "ArrowRight" : "ArrowLeft", i = () => {
+			e.preventDefault(), e.stopPropagation();
+		}, a = (t) => {
+			i(), Q(t, "keyboard", e);
+		};
+		if (J && Y === "month") {
+			let t = (e) => {
+				let t = K.year * 12 + (K.month - 1) + e;
+				return x(Math.floor(t / 12), t % 12 + 1, 1);
+			}, o = de.month;
+			switch (e.key) {
+				case n: return a(t(1));
+				case r: return a(t(-1));
+				case "ArrowUp": return a(t(-o));
+				case "ArrowDown": return a(t(o));
+				case "Home": return a(x(K.year, 1, 1));
+				case "End": return a(x(K.year, 12, 1));
+				case "PageUp": return a(t(-12));
+				case "PageDown": return a(t(12));
+				case "Enter":
+				case " ":
+					i(), lt(K.year, K.month, "keyboard", e);
+					return;
+			}
+		}
+		switch (e.key) {
+			case n: return a(_(K, 1));
+			case r: return a(_(K, -1));
+			case "ArrowUp": return a(_(K, -7));
+			case "ArrowDown": return a(_(K, 7));
+			case "Home": return a(ae(K, V.firstDayOfWeek));
+			case "End": return a(ne(K, V.firstDayOfWeek));
+			case "PageUp": return a(e.shiftKey ? C(K, -1).date : S(K, -1).date);
+			case "PageDown": return a(e.shiftKey ? C(K, 1).date : S(K, 1).date);
+			case "Enter":
+			case " ":
+				i(), st(K, "keyboard", e);
+				return;
+			case "Escape":
+				if (Y === "day" || J && Y === "month") return;
+				i(), $(Y === "year" ? "month" : "day");
+				return;
+			default: return;
+		}
+	}, ft = (e) => (t) => {
+		if (Y === "day") {
+			Q(S(K, e * z).date, "pointer", t);
+			return;
+		}
+		Q(Y === "month" ? C(K, e).date : C(K, e * M).date, "pointer", t);
+	}, pt = x(nt.year, nt.month, 1), mt = Y === "day" ? z === 1 ? V.monthYear(pt) : `${V.monthYear(pt, "short")} – ${V.monthYear(S(pt, z - 1).date, "short")}` : Y === "month" ? String(K.year) : `${String(w(K.year, M)[0] ?? K.year)} – ${String(w(K.year, M).at(-1) ?? K.year)}`, ht = Y === "day" ? /* @__PURE__ */ m("div", {
+		"data-part": "grids",
+		children: se(nt, z).map((e) => /* @__PURE__ */ m(pe, {
+			editable: B,
+			firstDayOfWeek: V.firstDayOfWeek,
+			fixedWeeks: Be,
+			focused: K,
+			format: V,
+			headingId: Fe,
+			month: e,
+			onHover: et,
+			onSelect: st,
+			outsideDays: Ve,
+			pending: X,
+			today: H,
+			unavailable: ot,
+			value: U,
+			weekNumbers: ze
+		}, `${String(e.year)}-${String(e.month)}`))
+	}) : Y === "month" && J ? /* @__PURE__ */ m("div", {
+		"data-part": "months",
+		children: V.monthNames("short").map((e, t) => {
+			let n = t + 1, r = ct(K.year, n), i = ut?.year === K.year && ut.month === n;
+			return /* @__PURE__ */ m("button", {
+				"aria-label": V.monthYear(x(K.year, n, 1)),
+				"data-part": "period",
+				onClick: (e) => lt(K.year, n, "pointer", e),
+				tabIndex: K.month === n ? 0 : -1,
+				type: "button",
+				...i ? {
+					"aria-selected": !0,
+					"data-selected": ""
+				} : {},
+				...r ? {
+					"aria-disabled": !0,
+					"data-unavailable": ""
+				} : {},
+				...K.month === n ? { "data-focused": "" } : {},
+				children: e
+			}, e);
+		})
+	}) : Y === "month" ? /* @__PURE__ */ m("div", {
+		"data-part": "months",
+		children: V.monthNames("short").map((e, t) => /* @__PURE__ */ m("button", {
+			"data-part": "period",
+			onClick: (e) => {
+				Q({
+					...K,
+					month: t + 1,
+					day: 1
+				}, "pointer", e), $("day");
+			},
+			type: "button",
+			...K.month === t + 1 ? {
+				"aria-selected": !0,
+				"data-selected": ""
+			} : {},
+			children: e
+		}, e))
+	}) : /* @__PURE__ */ m("div", {
+		"data-part": "years",
+		children: w(K.year, M).map((e) => /* @__PURE__ */ m("button", {
+			"data-part": "period",
+			onClick: (t) => {
+				Q({
+					...K,
+					year: e,
+					day: 1
+				}, "pointer", t), $("month");
+			},
+			type: "button",
+			...K.year === e ? {
+				"aria-selected": !0,
+				"data-selected": ""
+			} : {},
+			children: e
+		}, e))
+	}), gt = /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h("div", {
+		"data-part": "header",
+		children: [
+			/* @__PURE__ */ m("button", {
+				"aria-label": Pe("previous"),
+				"data-part": "previous",
+				disabled: !B,
+				onClick: ft(-1),
+				type: "button",
+				children: /* @__PURE__ */ m(t, {
+					directional: !0,
+					children: /* @__PURE__ */ m(e, { name: "chevron-right" })
+				})
+			}),
+			/* @__PURE__ */ h("button", {
+				"aria-live": "polite",
+				"data-part": "heading",
+				disabled: !B || Y === "year",
+				id: Fe,
+				onClick: () => $(Y === "day" ? "month" : "year"),
+				type: "button",
+				children: [mt, Y === "year" ? null : /* @__PURE__ */ m(t, { children: /* @__PURE__ */ m(e, { name: "chevron-down" }) })]
+			}),
+			/* @__PURE__ */ m("button", {
+				"aria-label": Pe("next"),
+				"data-part": "next",
+				disabled: !B,
+				onClick: ft(1),
+				type: "button",
+				children: /* @__PURE__ */ m(t, {
+					directional: !0,
+					children: /* @__PURE__ */ m(e, { name: "chevron-right" })
+				})
+			})
+		]
+	}), ht] }), _t = {
+		...Me,
+		children: gt,
+		className: s,
+		onKeyDown: dt,
+		style: ke,
+		...D === !0 ? { "data-disabled": "" } : {},
+		...me === !0 ? { "data-invalid": "" } : {},
+		...Te === !0 ? { "data-readonly": "" } : {},
+		...ze ? { "data-week-numbers": "" } : {},
+		...z > 1 ? { "data-months": String(z) } : {},
+		"data-calendar": He,
+		"data-columns": String(de[Y]),
+		"data-part": "root",
+		"data-ui": "calendar",
+		"data-view": Y,
+		ref: R
+	};
+	return De === void 0 ? /* @__PURE__ */ m("div", { ..._t }) : De(_t);
+}
+function pe({ editable: e, firstDayOfWeek: t, fixedWeeks: n, focused: r, format: i, headingId: a, month: o, onHover: s, onSelect: c, outsideDays: ee, pending: l, today: u, unavailable: d, value: f, weekNumbers: p }) {
+	let g = ie({
+		...o,
+		firstDayOfWeek: t,
+		fixedWeeks: n
+	}), _ = i.monthYear(x(o.year, o.month, 1)), v = i.weekdayNames("long"), y = i.weekdayNames("narrow");
+	return /* @__PURE__ */ h("table", {
+		"aria-labelledby": a,
+		"data-part": "grid",
+		role: "grid",
+		children: [
+			/* @__PURE__ */ m("caption", {
+				"data-part": "grid-caption",
+				children: _
+			}),
+			/* @__PURE__ */ m("thead", { children: /* @__PURE__ */ h("tr", {
+				"data-part": "week-headers",
+				children: [p ? /* @__PURE__ */ m("th", {
+					"aria-hidden": "true",
+					"data-part": "week-number"
+				}) : null, y.map((e, t) => /* @__PURE__ */ m("th", {
+					abbr: v[t],
+					"data-part": "week-header",
+					scope: "col",
+					children: e
+				}, v[t]))]
+			}) }),
+			/* @__PURE__ */ m("tbody", { children: g.map((t) => /* @__PURE__ */ h("tr", {
+				"data-part": "week",
+				children: [p ? /* @__PURE__ */ m("th", {
+					"data-part": "week-number",
+					scope: "row",
+					children: t.weekNumber
+				}) : null, t.days.map((t) => {
+					let n = t.outsideMonth, i = n && ee === "hidden", a = d(t.date) || n && ee === "shown", o = j(t.date, f), p = A(t.date, l ?? f), h = l !== null && p !== null && !o, g = b(t.date, r);
+					return /* @__PURE__ */ m("td", {
+						"data-part": "cell",
+						...n ? { "data-outside-month": "" } : {},
+						...!i && d(t.date) ? { "data-unavailable": "" } : {},
+						...!i && o ? { "data-selected": "" } : {},
+						...!i && p === "start" ? { "data-range-start": "" } : {},
+						...!i && p === "end" ? { "data-range-end": "" } : {},
+						...!i && p === "inside" ? { "data-in-range": "" } : {},
+						...!i && h ? { "data-preview": "" } : {},
+						children: i ? null : /* @__PURE__ */ m("span", {
+							"aria-disabled": a ? !0 : void 0,
+							"aria-selected": o ? !0 : void 0,
+							"data-part": "day",
+							...u !== null && b(t.date, u) ? { "data-today": "" } : {},
+							onClick: (e) => {
+								a || c(t.date, "pointer", e);
+							},
+							onPointerEnter: () => s(t.date),
+							onPointerLeave: () => s(null),
+							role: "button",
+							tabIndex: g && e ? 0 : -1,
+							children: t.date.day
+						})
+					}, `${String(t.date.month)}-${String(t.date.day)}`);
+				})]
+			}, t.weekNumber)) })
+		]
+	});
+}
+//#endregion
+export { j as a, D as c, ue as i, E as l, k as n, ce as o, O as r, A as s, fe as t };

package/dist/calendar.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./calendar-B3mio8iQ.js";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./calendar-BZ6PP7Ke.js";
 export { c as Calendar, t as CalendarDefaultsProvider, i as asDates, o as isRange, n as isSameValue, e as isSelected, a as nextValue, s as rangeStateOf, r as useCalendarDefaults };