@slotted/react 0.1.0-beta.4 → 0.1.0-beta.6

package/dist/date-range-picker-6Yz7avTS.js

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

package/dist/date-range-picker.js

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

package/dist/{datetime-field-B8TrmsDK.js → datetime-field-D2f9u6im.js}

@@ -1,6 +1,6 @@
 import { n as e, t } from "./icon-T9Yt4tnm.js";
 import { n, r } from "./i18n-DpW8lqJ1.js";
-import { b as i } from "./field-NJaCxl2h.js";
+import { b as i } from "./field-BxQFpOXS.js";
 import { createControllable as a } from "@slotted/core/state";
 import { createContext as o, useCallback as s, useContext as c, useEffect as l, useId as u, useImperativeHandle as d, useMemo as f, useRef as p, useState as m } from "react";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";

package/dist/datetime-field.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./datetime-field-B8TrmsDK.js";
+import { n as e, r as t, t as n } from "./datetime-field-D2f9u6im.js";
 export { n as DateTimeField, e as DateTimeFieldDefaultsProvider, t as useDateTimeFieldDefaults };