@slotted/react 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/calendar-DZyC1gAT.js

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

package/dist/card-DRmq8_5e.js

@@ -0,0 +1,103 @@
+import { definedProps as e, keyedProps as t } from "@slotted/core/selector-key";
+import { createContext as n, useContext as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/card/card-defaults.tsx
+var a = n({
+	fill: "outline",
+	orientation: "vertical",
+	size: "md"
+});
+function o() {
+	return r(a);
+}
+function s({ children: e, ...t }) {
+	let n = o();
+	return /* @__PURE__ */ i(a.Provider, {
+		value: {
+			fill: t.fill ?? n.fill,
+			orientation: t.orientation ?? n.orientation,
+			size: t.size ?? n.size
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/card/card.tsx
+function c({ disabled: e = !1, fill: n, orientation: r, render: a, selected: s = !1, size: c, ...l }) {
+	let u = o(), d = t({
+		...l,
+		...e ? { "data-disabled": "" } : {},
+		...s ? { "data-selected": "" } : {},
+		"data-fill": n ?? u.fill,
+		"data-orientation": r ?? u.orientation,
+		"data-part": "root",
+		"data-size": c ?? u.size,
+		"data-ui": "card"
+	});
+	return a === void 0 ? /* @__PURE__ */ i("div", { ...d }) : a(d);
+}
+//#endregion
+//#region src/card/card-actions.tsx
+function l({ render: e, ...n }) {
+	let r = t({
+		...n,
+		"data-part": "actions"
+	});
+	return e === void 0 ? /* @__PURE__ */ i("div", { ...r }) : e(r);
+}
+//#endregion
+//#region src/card/card-body.tsx
+function u({ render: e, ...n }) {
+	let r = t({
+		...n,
+		"data-part": "body"
+	});
+	return e === void 0 ? /* @__PURE__ */ i("div", { ...r }) : e(r);
+}
+//#endregion
+//#region src/card/card-footer.tsx
+function d({ render: e, ...n }) {
+	let r = t({
+		...n,
+		"data-part": "footer"
+	});
+	return e === void 0 ? /* @__PURE__ */ i("div", { ...r }) : e(r);
+}
+//#endregion
+//#region src/card/card-header.tsx
+function f({ render: e, ...n }) {
+	let r = t({
+		...n,
+		"data-part": "header"
+	});
+	return e === void 0 ? /* @__PURE__ */ i("div", { ...r }) : e(r);
+}
+//#endregion
+//#region src/card/card-link.tsx
+function p({ render: n, ...r }) {
+	let a = t({
+		...r,
+		"data-part": "link"
+	});
+	return n === void 0 ? /* @__PURE__ */ i("a", { ...a }) : n(e(a));
+}
+//#endregion
+//#region src/card/card-media.tsx
+function m({ render: e, ...n }) {
+	let r = t({
+		...n,
+		"data-part": "media"
+	});
+	return e === void 0 ? /* @__PURE__ */ i("div", { ...r }) : e(r);
+}
+//#endregion
+//#region src/card/card-selection.tsx
+function h({ render: e, ...n }) {
+	let r = t({
+		...n,
+		"data-part": "selection"
+	});
+	return e === void 0 ? /* @__PURE__ */ i("span", { ...r }) : e(r);
+}
+//#endregion
+export { d as a, c, f as i, s as l, m as n, u as o, p as r, l as s, h as t, o as u };

package/dist/card.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, u as l } from "./card-CpVu8PyZ.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, u as l } from "./card-DRmq8_5e.js";
 export { t as Card, s as CardActions, a as CardBody, r as CardDefaultsProvider, e as CardFooter, n as CardHeader, o as CardLink, i as CardMedia, c as CardSelection, l as useCardDefaults };