@slotted/react 0.0.0-stage → 0.1.0-beta.0

package/dist/date-range-picker-lpB08hK_.js

@@ -0,0 +1,471 @@
+import { t as e } from "./react-dom-DzrKNxo6.js";
+import { n as t, t as n } from "./icon-T9Yt4tnm.js";
+import { n as r, r as i } from "./i18n-DpW8lqJ1.js";
+import { i as ee, t as te } from "./calendar-B3mio8iQ.js";
+import { b as a } from "./field-BJh5HI7w.js";
+import { t as ne } from "./date-field-D_kLLTfL.js";
+import { tabbables as re } from "@slotted/core/focus";
+import { createControllable as o } from "@slotted/core/state";
+import { createContext as s, useCallback as c, useContext as ie, useEffect as l, useId as ae, useImperativeHandle as oe, useMemo as u, useRef as d, useState as f } from "react";
+import { Fragment as se, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { createPresence as ce } from "@slotted/core/presence";
+import { createPortalRoot as le } from "@slotted/core/portal";
+import { createDismissableLayer as ue } from "@slotted/core/dismissable-layer";
+import { createPositioner as de } from "@slotted/core/positioner";
+import { dateRangePickerMessages as fe } from "@slotted/core/i18n";
+import { blockedAround as pe, clampDate as me, compareDate as he, createDateFormat as ge, isDateRefusedInRun as _e, isSameDate as ve, orderedRun as ye, rangeLength as be, rangeProblems as xe, todayIn as Se } from "@slotted/core/date";
+//#region src/date-range-picker/date-range-picker-defaults.tsx
+var Ce = e(), we = s({
+	calendar: "gregory",
+	closeOnSelect: "auto",
+	count: "days",
+	months: 2,
+	placement: "bottom-start",
+	size: "md",
+	timeZone: void 0,
+	variant: "outline"
+});
+function Te() {
+	return ie(we);
+}
+function h({ children: e, ...t }) {
+	let n = Te();
+	return /* @__PURE__ */ p(we.Provider, {
+		value: {
+			calendar: t.calendar ?? n.calendar,
+			closeOnSelect: t.closeOnSelect ?? n.closeOnSelect,
+			count: t.count ?? n.count,
+			months: t.months ?? n.months,
+			placement: t.placement ?? n.placement,
+			size: t.size ?? n.size,
+			timeZone: t.timeZone ?? n.timeZone,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/date-range-picker/date-range-picker.tsx
+var Ee = "(max-width: 480px) and (pointer: coarse)", De = 366, Oe = s(null);
+function g(e) {
+	return e === null || e.start === null && e.end === null ? null : e;
+}
+function ke({ calendar: e, className: s, clearable: ie = !1, closeOnSelect: we, contiguous: h = !0, count: ke, defaultOpen: Ae = !1, defaultPosition: je = "start", defaultValue: Me, disabled: Ne, endName: Pe, firstDayOfWeek: _, fixedWeeks: Fe = !0, footer: Ie, invalid: Le, isDateUnavailable: v, locale: Re, max: y, maxLength: b, messages: ze, min: x, minLength: S, months: Be, onKeyDown: Ve, onOpenChange: He, onPositionChange: Ue, onValueChange: We, open: Ge, placement: Ke, position: qe, presets: Je, readOnly: Ye, ref: Xe, render: Ze, required: Qe, size: $e, startName: et, style: tt, timeZone: nt, value: C, variant: rt, weekNumbers: it, yearPivot: at, ...ot }) {
+	let w = a(), T = Te(), st = r(), E = i(fe, ze), D = d(null), ct = d(null), lt = d(null), ut = d(null), O = d(null), k = ae(), [A, dt] = f(null), [j, ft] = f(null), [pt, mt] = f("unmounted"), [ht, gt] = f(!1), [M, _t] = f(!1), [vt, yt] = f(Ae), N = Ge ?? vt, [bt, xt] = f(g(Me ?? null)), P = C === void 0 ? bt : g(C), [St, Ct] = f(je), F = qe ?? St, [I, wt] = f("day"), [L, R] = f(null), [Tt, Et] = f(null), z = Re ?? st, Dt = nt ?? T.timeZone, Ot = e ?? T.calendar, kt = $e ?? w?.size ?? T.size, At = rt ?? T.variant, jt = Ke ?? T.placement, Mt = we ?? T.closeOnSelect, B = ke ?? T.count, Nt = Be ?? T.months, Pt = (e) => E(`${B}.length`, { count: e }), V = Ne ?? w?.disabled, H = Ye ?? w?.readOnly, Ft = Qe ?? w?.required, U = V !== !0 && H !== !0, W = P?.start ?? null, G = P?.end ?? null, K = W !== null && G !== null && he(W, G) <= 0, It = u(() => xe(P, {
+		contiguous: h,
+		count: B,
+		max: y,
+		maxLength: b,
+		min: x,
+		minLength: S,
+		unavailable: v
+	}), [
+		h,
+		P,
+		v,
+		y,
+		b,
+		x,
+		S,
+		B
+	]), Lt = Le ?? (It.length > 0 || w?.invalid), Rt = u(() => ge({ locale: z }), [z]), zt = u(() => new Intl.DateTimeFormat(z, {
+		day: "numeric",
+		month: "short",
+		timeZone: "UTC"
+	}), [z]), Bt = (e) => zt.format(Date.UTC(e.year, e.month - 1, e.day)), Vt = d(!1), q = c((e, t, n, r = !1) => {
+		o({
+			controlled: Ge,
+			initial: N,
+			onRequest: (e) => {
+				He?.(e.value, e), Vt.current = r && e.value && !e.cancelled;
+			}
+		}).request(e, t, n) && yt(e), e || R(null);
+	}, [
+		N,
+		He,
+		Ge
+	]), J = c((e, t, n) => {
+		let r = g(e);
+		o({
+			controlled: C === void 0 ? void 0 : P,
+			initial: P,
+			equals: (e, t) => ee(e, t),
+			onRequest: (e) => We?.(e.value, e)
+		}).request(r, t, n) && xt(r);
+	}, [
+		P,
+		We,
+		C
+	]), [Ht] = f(() => g(Me ?? null));
+	l(() => {
+		let e = D.current?.closest("form");
+		if (e == null) return;
+		let t = (e) => {
+			R(null), J(Ht, "programmatic", e);
+		};
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, [Ht, J]);
+	let Y = c((e, t, n) => {
+		o({
+			controlled: qe,
+			initial: F,
+			onRequest: (e) => Ue?.(e.value, e)
+		}).request(e, t, n) && Ct(e);
+	}, [
+		F,
+		Ue,
+		qe
+	]), X = d(null);
+	l(() => {
+		let e = ce({
+			present: N,
+			onStatusChange: mt
+		});
+		return X.current = e, mt(e.status), () => {
+			e.destroy(), X.current = null;
+		};
+	}, []), l(() => X.current?.sync(N), [N]), l(() => X.current?.setNode(A), [A]);
+	let Ut = pt !== "unmounted";
+	l(() => {
+		if (!Ut) {
+			ft(null);
+			return;
+		}
+		let e = le({
+			origin: O.current,
+			disabled: !1
+		});
+		return ft(e.container), () => e.release();
+	}, [Ut]), l(() => {
+		if (typeof window > "u" || typeof window.matchMedia != "function") return;
+		let e = window.matchMedia(Ee), t = () => _t(e.matches);
+		return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, []), l(() => {
+		if (A === null || D.current === null || M) return;
+		let e = !0, t = D.current.querySelector("[data-part=\"control\"]") ?? D.current, [n, r = "center"] = jt.split("-"), i = de(t, A, {
+			align: r,
+			side: n
+		});
+		return i.update().then(() => {
+			e && gt(!0);
+		}), () => {
+			e = !1, i.destroy(), gt(!1);
+		};
+	}, [
+		A,
+		jt,
+		M
+	]);
+	let Wt = d(I);
+	Wt.current = I, l(() => {
+		if (A === null || !N) return;
+		let e = O.current === null ? [] : [O.current], t = ue(A, {
+			branches: e,
+			escape: !0,
+			focusOutside: !1,
+			modal: !1,
+			outsidePress: !0,
+			scrollLock: !1,
+			onDismiss: (e) => {
+				if (e.reason === "escape" && Wt.current !== "day") {
+					wt(Wt.current === "year" ? "month" : "day");
+					return;
+				}
+				q(!1, e.reason === "escape" ? "escape" : "outsidePress", e.source), e.reason === "escape" && O.current?.focus({ preventScroll: !0 });
+			}
+		});
+		return () => t.destroy();
+	}, [
+		N,
+		A,
+		q
+	]), l(() => {
+		if (!N || A === null || j === null || !Vt.current || !j.contains(A)) return;
+		Vt.current = !1;
+		let e = ut.current;
+		if (e === null) return;
+		let t = F === "end" ? G : W;
+		t !== null && e.focusDate(t), e.focus();
+	}, [
+		j,
+		F,
+		G,
+		N,
+		A,
+		W
+	]);
+	let Gt = (e) => {
+		if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey) return;
+		let t = re(e.currentTarget), n = t[0], r = t[t.length - 1];
+		if (n === void 0 || r === void 0) return;
+		let i = e.currentTarget.ownerDocument.activeElement;
+		e.shiftKey && i === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && i === r && (e.preventDefault(), n.focus());
+	}, Kt = c((e) => (e === "end" ? lt : ct).current?.focus(), []);
+	oe(Xe, () => ({
+		focus: (e) => Kt(e ?? F),
+		open: () => q(!0, "keyboard", void 0, !0),
+		close: () => q(!1, "keyboard", void 0)
+	}), [
+		F,
+		Kt,
+		q
+	]);
+	let Z = L === null ? F === "end" && W !== null ? {
+		start: W,
+		end: null
+	} : P : {
+		start: L,
+		end: null
+	}, Q = Z !== null && !Array.isArray(Z) && "start" in Z && Z.end === null ? Z.start : null, qt = u(() => Q === null || !h ? {
+		before: null,
+		after: null
+	} : pe(Q, v ?? (() => !1), b ?? De), [
+		h,
+		v,
+		b,
+		Q
+	]), Jt = c((e) => Q === null ? v?.(e) === !0 : _e(Q, e, {
+		contiguous: h,
+		count: B,
+		maxLength: b,
+		minLength: S,
+		unavailable: v
+	}, qt), [
+		qt,
+		h,
+		v,
+		b,
+		S,
+		Q,
+		B
+	]), $ = Q !== null && Tt !== null ? ye(Q, Tt) : null, Yt = $?.start ?? L ?? W, Xt = $?.end ?? (L === null ? G : null), Zt = $ !== null && !ve($.start, Q), Qt = $ !== null && !Zt, $t = $ === null ? K ? Pt(be(W, G, B)) : "" : Pt(be($.start, $.end, B)), en = S !== void 0 && b !== void 0 ? E(`${B}.between`, {
+		min: S,
+		max: b
+	}) : S === void 0 ? b === void 0 ? null : E(`${B}.atMost`, { max: b }) : E(`${B}.atLeast`, { min: S }), tn = K ? E("change", {
+		start: Rt.describe(W),
+		end: Rt.describe(G),
+		length: $t
+	}) : E("choose"), nn = (e, t) => {
+		(Mt === "always" || Mt === "auto" && e) && (q(!1, "select", t), O.current?.focus({ preventScroll: !0 }));
+	}, rn = (e, t) => {
+		if (e !== null && !Array.isArray(e) && "start" in e) {
+			if (e.end === null) {
+				R(e.start), Y("end", "select", t.source), nn(!1, t.source);
+				return;
+			}
+			R(null), J(e, "select", t.source), Y("start", "select", t.source), nn(!0, t.source);
+		}
+	}, an = (e, t) => {
+		R(null), J(e, "select", t), Y("start", "select", t), nn(!0, t);
+	}, on = d(!1), sn = (e) => (t) => {
+		let n = on.current ? "pointer" : "keyboard";
+		on.current = !1, e !== F && Y(e, n, t);
+	}, cn = (e) => {
+		Ve?.(e), !e.defaultPrevented && U && e.altKey && e.key === "ArrowDown" && (e.preventDefault(), q(!0, "keyboard", e));
+	}, ln = {
+		held: P,
+		choose: an
+	}, un = Ut ? /* @__PURE__ */ p("div", {
+		"data-part": "positioner",
+		"data-presentation": M ? "sheet" : "popover",
+		"data-ui": "date-range-picker",
+		ref: dt,
+		...N ? { "data-open": "" } : {},
+		...ht ? { "data-positioned": "" } : {},
+		children: /* @__PURE__ */ m("div", {
+			"aria-label": tn,
+			"data-part": "content",
+			id: k,
+			onKeyDown: Gt,
+			role: "dialog",
+			children: [
+				/* @__PURE__ */ m("div", {
+					"data-part": "head",
+					children: [
+						/* @__PURE__ */ p("span", {
+							"data-part": "head-start",
+							...Yt === null ? { "data-placeholder": "" } : {},
+							...Zt ? { "data-pending": "" } : {},
+							children: Yt === null ? E("start") : Bt(Yt)
+						}),
+						" – ",
+						/* @__PURE__ */ p("span", {
+							"data-part": "head-end",
+							...Xt === null ? { "data-placeholder": "" } : {},
+							...Qt ? { "data-pending": "" } : {},
+							children: Xt === null ? E("end") : Bt(Xt)
+						}),
+						/* @__PURE__ */ p("span", {
+							"aria-live": "polite",
+							"data-part": "length",
+							...$ === null ? {} : { "data-pending": "" },
+							children: $t
+						}),
+						en === null ? null : /* @__PURE__ */ p("span", {
+							"data-part": "limit",
+							children: en
+						})
+					]
+				}),
+				/* @__PURE__ */ m("div", {
+					"data-part": "panels",
+					children: [Je === void 0 ? null : /* @__PURE__ */ p(Oe.Provider, {
+						value: ln,
+						children: /* @__PURE__ */ p("div", {
+							"data-part": "presets",
+							children: Je
+						})
+					}), /* @__PURE__ */ p(te, {
+						defaultFocusedDate: me((F === "end" ? G : W) ?? Se(Dt), x, y),
+						fixedWeeks: Fe,
+						isDateUnavailable: Jt,
+						locale: z,
+						max: y,
+						min: x,
+						months: Nt,
+						onPreviewChange: Et,
+						onValueChange: rn,
+						onViewChange: wt,
+						readOnly: H,
+						ref: ut,
+						selectionMode: "range",
+						timeZone: Dt,
+						value: Z,
+						view: I,
+						weekNumbers: it,
+						..._ === void 0 ? {} : { firstDayOfWeek: _ }
+					})]
+				}),
+				Ie === void 0 ? null : /* @__PURE__ */ p("div", {
+					"data-part": "footer",
+					children: Ie
+				})
+			]
+		})
+	}) : null, dn = K && (y === void 0 || he(G, y) < 0) ? G : y, fn = K && (x === void 0 || he(W, x) > 0) ? W : x, pn = {
+		calendar: Ot,
+		disabled: V,
+		isDateUnavailable: v,
+		locale: z,
+		readOnly: H,
+		required: Ft,
+		size: kt,
+		timeZone: Dt,
+		variant: "plain",
+		..._ === void 0 ? {} : { firstDayOfWeek: _ },
+		...at === void 0 ? {} : { yearPivot: at }
+	}, mn = /* @__PURE__ */ m(se, { children: [/* @__PURE__ */ m("div", {
+		"data-part": "control",
+		...w === void 0 ? {} : {
+			"aria-labelledby": w.ids.label,
+			id: w.ids.control,
+			role: "group"
+		},
+		onKeyDown: cn,
+		onPointerDownCapture: () => {
+			on.current = !0;
+		},
+		children: [
+			/* @__PURE__ */ p("div", {
+				"data-part": "start",
+				onFocus: sn("start"),
+				...F === "start" ? { "data-current": "" } : {},
+				children: /* @__PURE__ */ p(ne, {
+					...pn,
+					"aria-label": E("start"),
+					id: `${k}-start`,
+					max: dn,
+					min: x,
+					name: et,
+					onValueChange: (e, t) => J({
+						start: e,
+						end: G
+					}, t.reason, t.source),
+					ref: ct,
+					value: W
+				})
+			}),
+			/* @__PURE__ */ p("span", {
+				"aria-hidden": "true",
+				"data-part": "separator",
+				children: "–"
+			}),
+			/* @__PURE__ */ p("div", {
+				"data-part": "end",
+				onFocus: sn("end"),
+				...F === "end" ? { "data-current": "" } : {},
+				children: /* @__PURE__ */ p(ne, {
+					...pn,
+					"aria-label": E("end"),
+					id: `${k}-end`,
+					invalid: It.includes("order") ? !0 : void 0,
+					max: y,
+					min: fn,
+					name: Pe,
+					onValueChange: (e, t) => J({
+						start: W,
+						end: e
+					}, t.reason, t.source),
+					ref: lt,
+					value: G
+				})
+			}),
+			ie && P !== null ? /* @__PURE__ */ p("button", {
+				"aria-label": E("clear"),
+				"data-part": "clear",
+				disabled: !U,
+				onClick: (e) => {
+					J(null, "clear", e), Y("start", "clear", e), Kt("start");
+				},
+				type: "button",
+				children: /* @__PURE__ */ p(n, { children: /* @__PURE__ */ p(t, { name: "x" }) })
+			}) : null,
+			/* @__PURE__ */ p("button", {
+				"aria-controls": N ? k : void 0,
+				"aria-expanded": N,
+				"aria-haspopup": "dialog",
+				"aria-label": tn,
+				"data-part": "trigger",
+				disabled: !U,
+				onClick: (e) => q(!N, "pointer", e, !0),
+				ref: O,
+				type: "button",
+				children: /* @__PURE__ */ p(n, { children: /* @__PURE__ */ p(t, { name: "calendar" }) })
+			})
+		]
+	}), j === null ? un : null] }), hn = {
+		...ot,
+		children: mn,
+		className: s,
+		style: tt,
+		...V === !0 ? { "data-disabled": "" } : {},
+		...Lt === !0 ? { "data-invalid": "" } : {},
+		...H === !0 ? { "data-readonly": "" } : {},
+		...Ft === !0 ? { "data-required": "" } : {},
+		...N ? { "data-open": "" } : {},
+		"data-calendar": Ot,
+		"data-count": B,
+		"data-part": "root",
+		"data-size": kt,
+		"data-ui": "date-range-picker",
+		"data-variant": At,
+		ref: D
+	};
+	return /* @__PURE__ */ m(se, { children: [Ze === void 0 ? /* @__PURE__ */ p("div", { ...hn }) : Ze(hn), j === null ? null : (0, Ce.createPortal)(un, j)] });
+}
+function Ae({ children: e, onClick: t, ref: n, render: r, value: i, ...te }) {
+	let a = ie(Oe), ne = typeof i == "function" ? i() : i, re = a !== null && ee(a.held, ne), o = {
+		...te,
+		children: e,
+		"data-part": "preset",
+		...re ? { "data-selected": "" } : {},
+		onClick: (e) => {
+			t?.(e), !e.defaultPrevented && a?.choose(typeof i == "function" ? i() : i, e);
+		},
+		ref: n,
+		type: "button"
+	};
+	return r === void 0 ? /* @__PURE__ */ p("button", { ...o }) : r(o);
+}
+//#endregion
+export { Te as i, Ae as n, h as r, ke as t };

package/dist/date-range-picker.js

@@ -0,0 +1,2 @@
+import { i as e, n as t, r as n, t as r } from "./date-range-picker-lpB08hK_.js";
+export { r as DateRangePicker, n as DateRangePickerDefaultsProvider, t as DateRangePickerPreset, e as useDateRangePickerDefaults };