@jfrader/ui 0.5.0 → 0.6.0

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

@@ -0,0 +1,589 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
+import { n as ee } from "./roving-focus-CYlo_Kf8.js";
+import { t as te } from "./use-controlled-state-DpeVQZNR.js";
+import { c as ne, f as a, g as o, i as s, l as c, o as l, p as u, s as d, t as f, u as p, v as m } from "./calendar.utils-azmB4Ej7.js";
+import { t as h } from "./renderable-DzcIj1Lo.js";
+import { t as g } from "./button-C6OV0C7J.js";
+import { n as _ } from "./surface-C69kwSuk.js";
+import { a as v, i as y } from "./overlay-layer-qEbpEtb8.js";
+import { t as b } from "./overlay-portal-C9igMHnC.js";
+import { t as x } from "./use-overlay-floating-Bx2jBKAA.js";
+import { t as S } from "./calendar-Bg6D2sul.js";
+import { a as C, l as re } from "./overlay-motion-Cr77ihn2.js";
+import { createContext as w, useCallback as ie, useContext as T, useEffect as ae, useId as oe, useLayoutEffect as E, useMemo as D, useRef as O, useState as k } from "react";
+import { vars as A } from "@jfrader/tokens/vars";
+import { Fragment as j, jsx as M, jsxs as N } from "@emotion/react/jsx-runtime";
+import { FloatingFocusManager as se, useClick as P, useInteractions as F, useMergeRefs as ce, useRole as I } from "@floating-ui/react";
+//#region src/components/date-range-picker/date-range-picker.tsx
+var L = "bottom-start", le = 712, R = 864e5, ue = /* @__PURE__ */ new Set(["Enter", "ArrowDown"]), z = " ", B = "[data-ui=\"calendar-day\"]", V = `${B}[tabindex="0"]`, H = {
+	itemSelector: "[data-ui=\"date-range-picker-preset\"]:not([aria-disabled=\"true\"])",
+	ownerSelector: "[data-ui=\"date-range-picker-presets\"]"
+}, de = [], fe = {
+	...f,
+	dateStyle: "medium"
+}, U = w(null);
+function W(e) {
+	let t = T(U);
+	if (!t) throw Error(`DateRangePicker.${e} must be rendered inside <DateRangePicker>.`);
+	return t;
+}
+var G = (e) => e != null && p(e.start) && p(e.end) && e.start <= e.end, pe = (e, t, n) => G(e) && a(e.start, t, n) && a(e.end, t, n), me = (e, t) => e === t || e !== null && t !== null && e.start === t.start && e.end === t.end, he = (e, t) => e <= t ? {
+	start: e,
+	end: t
+} : {
+	start: t,
+	end: e
+}, ge = ({ start: e, end: t }) => Math.round((l(t).getTime() - l(e).getTime()) / R) + 1;
+function _e() {
+	let e = /* @__PURE__ */ new Date();
+	return u(d(e.getFullYear(), e.getMonth(), e.getDate()));
+}
+var ve = (e, { start: t, end: n }) => e.formatRange(l(t), l(n)), K = (e) => {
+	let t = e?.querySelector(V) ?? null;
+	return t?.focus({ preventScroll: !0 }), t;
+}, q = e({
+	appearance: "none",
+	display: "inline-flex",
+	alignItems: "center",
+	gap: A.space[2],
+	boxSizing: "border-box",
+	maxInlineSize: "100%",
+	border: `1px solid ${A.color.borderControl}`,
+	borderRadius: A.radius.md,
+	backgroundColor: A.color.surfaceRaised,
+	font: "inherit",
+	fontWeight: A.fontWeight.medium,
+	color: A.color.text,
+	textAlign: "start",
+	cursor: "pointer",
+	transitionProperty: "background-color, border-color",
+	transitionDuration: A.motion.duration.fast,
+	transitionTimingFunction: A.motion.easeStandard,
+	"&:hover:not(:disabled)": { backgroundColor: A.color.surfaceHover },
+	"&:focus-visible": { ...t },
+	"&[aria-invalid=\"true\"]:not(:focus-visible)": { borderColor: A.color.dangerText },
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	[r]: { transitionDuration: "0s" }
+}), J = {
+	sm: e({
+		minBlockSize: A.space[8],
+		paddingInline: A.space[3],
+		fontSize: A.textSize.sm
+	}),
+	md: e({
+		minBlockSize: A.space[10],
+		paddingInline: A.space[4],
+		fontSize: A.textSize.sm
+	}),
+	lg: e({
+		minBlockSize: A.space[12],
+		paddingInline: A.space[4],
+		fontSize: A.textSize.md
+	})
+}, Y = e({
+	display: "inline-flex",
+	flexShrink: 0,
+	color: A.color.textMuted,
+	"& > svg": {
+		inlineSize: "1em",
+		blockSize: "1em"
+	}
+}), X = e({ color: A.color.textMuted }), Z = e({
+	display: "block",
+	marginBlockStart: A.space[2],
+	fontSize: A.textSize.xs,
+	color: A.color.dangerText
+}), ye = e({
+	..._,
+	display: "grid",
+	gap: A.space[4],
+	borderRadius: A.radius.lg,
+	boxShadow: A.shadow.overlay,
+	padding: A.space[4],
+	overflow: "auto",
+	...C,
+	"&[data-layout=\"rail\"]": { gridTemplateColumns: "auto 1fr" },
+	[n]: { border: "1px solid CanvasText" }
+}), be = e({
+	display: "flex",
+	gap: A.space[2],
+	"[data-layout=\"row\"] > &": {
+		overflowX: "auto",
+		paddingBlock: A.space[1]
+	},
+	"[data-layout=\"rail\"] > &": {
+		flexDirection: "column",
+		gridRow: "1 / span 2",
+		paddingInlineEnd: A.space[4],
+		borderInlineEnd: `1px solid ${A.color.border}`
+	}
+}), xe = e({
+	appearance: "none",
+	flexShrink: 0,
+	minBlockSize: A.space[8],
+	paddingInline: A.space[3],
+	border: "1px solid transparent",
+	borderRadius: A.radius.md,
+	backgroundColor: "transparent",
+	font: "inherit",
+	fontSize: A.textSize.sm,
+	color: A.color.text,
+	textAlign: "start",
+	whiteSpace: "nowrap",
+	cursor: "pointer",
+	transitionProperty: "background-color, border-color",
+	transitionDuration: A.motion.duration.fast,
+	transitionTimingFunction: A.motion.easeStandard,
+	"&:hover:not([aria-disabled=\"true\"])": { backgroundColor: A.color.surfaceHover },
+	"&[aria-pressed=\"true\"]": {
+		backgroundColor: A.color.accentSoft,
+		borderColor: A.color.accentBorder
+	},
+	"&[aria-disabled=\"true\"]": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	"&:focus-visible": { ...t },
+	[r]: { transitionDuration: "0s" },
+	[n]: { "&[aria-pressed=\"true\"]": { borderColor: "Highlight" } }
+}), Se = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "flex-start",
+	gap: A.space[6]
+}), Ce = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: A.space[3],
+	"[data-layout=\"rail\"] > &": { gridColumn: 2 }
+}), we = e({
+	fontSize: A.textSize.sm,
+	color: A.color.textMuted
+}), Te = e({
+	display: "flex",
+	gap: A.space[2],
+	marginInlineStart: "auto"
+});
+function Ee({ nodeId: e, value: t, defaultValue: n, onValueChange: r, open: i, defaultOpen: ee = !1, onOpenChange: a, min: o, max: s, locale: c, firstDayOfWeek: l, today: u, months: d = "auto", boundary: m, presets: h = de, disabled: g = !1, readOnly: _ = !1, required: y = !1, startName: b, endName: S, messages: C, children: re }) {
+	let [w = null, ie, T] = te(t, n ?? null, r), [oe = !1, E] = te(i, ee, a), A = oe && !g, [j, N] = k(null), [se, ce] = k(null), le = O(null), R = O(!1), ue = O(null), z = D(() => new Intl.DateTimeFormat(c ?? ne(), f).resolvedOptions().locale, [c]), B = D(() => new Intl.DateTimeFormat(z, fe), [z]), V = G(w) ? w : null, H = p(o) ? o : void 0, W = p(s) ? s : void 0, he = w !== null && V === null || H !== void 0 && W !== void 0 && H > W, ge = p(u) ? u : _e(), { refs: K, floatingStyles: q, context: J } = x({
+		open: A,
+		placement: L,
+		nodeId: e,
+		boundary: m,
+		onAvailableSize: (e) => ce((t) => t?.width === e.width && t.height === e.height ? t : e),
+		onOpenChange: (e, t, n) => {
+			if (g && e) return;
+			let r = ue.current;
+			ue.current = n === "outside-press" && t?.target instanceof Element ? t.target : null;
+			let i = n === "focus-out" && t instanceof FocusEvent ? t.relatedTarget : null;
+			r && i instanceof Node && i.contains(r) || (e || (R.current = n === "escape-key"), E(e));
+		}
+	});
+	ae(() => {
+		!A && R.current && (R.current = !1, K.domReference.current?.focus());
+	}, [A, K]);
+	let Y = P(J, {
+		enabled: !g,
+		keyboardHandlers: !1
+	}), X = v(J, "container"), Z = I(J, { role: "dialog" }), { getReferenceProps: ye, getFloatingProps: be } = F([
+		Y,
+		...X,
+		Z
+	]), xe = D(() => V ? ve(B, V) : void 0, [B, V]), Se = D(() => {
+		let e = (e) => {
+			me(e, w) || ie(e);
+		};
+		return {
+			open: A,
+			disabled: g,
+			readOnly: _,
+			required: y,
+			invalid: he,
+			value: V,
+			startName: b,
+			endName: S,
+			displayValue: xe,
+			min: H,
+			max: W,
+			locale: z,
+			firstDayOfWeek: l,
+			today: ge,
+			months: d,
+			presets: h,
+			messages: C,
+			availableSize: se,
+			triggerLabelling: j,
+			contentRef: le,
+			refs: K,
+			floatingContext: J,
+			floatingStyles: q,
+			getReferenceProps: ye,
+			getFloatingProps: be,
+			requestOpen: () => {
+				g || E(!0);
+			},
+			apply: (t) => {
+				g || _ || !pe(t, H, W) || (e(t), R.current = !0, E(!1));
+			},
+			cancel: () => {
+				R.current = !0, E(!1);
+			},
+			resetValue: () => {
+				t === void 0 ? T() : e(n ?? null);
+			},
+			setTriggerLabelling: N
+		};
+	}, [
+		A,
+		g,
+		_,
+		y,
+		he,
+		w,
+		V,
+		b,
+		S,
+		xe,
+		H,
+		W,
+		z,
+		l,
+		ge,
+		d,
+		h,
+		C,
+		se,
+		j,
+		K,
+		J,
+		q,
+		ye,
+		be,
+		ie,
+		E,
+		T,
+		t,
+		n
+	]);
+	return /* @__PURE__ */ M(U.Provider, {
+		value: Se,
+		children: re
+	});
+}
+function De(e) {
+	return /* @__PURE__ */ M(y, { children: (t) => /* @__PURE__ */ M(Ee, {
+		...e,
+		nodeId: t
+	}) });
+}
+De.displayName = "DateRangePicker";
+function Oe({ ref: e, id: t, form: n, size: r = "md", icon: ee, placeholder: te, className: ne, sx: a, onKeyDown: o, onKeyUp: s, "aria-label": c, "aria-labelledby": l, "aria-describedby": u, "aria-invalid": d, ...f }) {
+	let { open: p, disabled: m, readOnly: g, required: _, invalid: v, displayValue: y, value: b, startName: x, endName: S, messages: C, contentRef: re, refs: w, getReferenceProps: ie, requestOpen: T, resetValue: D, setTriggerLabelling: k } = W("Trigger"), A = O(null), se = ce([
+		w.setReference,
+		e,
+		A
+	]), P = oe(), F = t ?? P, I = `${F}-value`, L = `${F}-required`, le = `${F}-error`, R = _ && h(C.required), B = v || d, V = (B === !0 || B === "true") && h(C.error);
+	E(() => (k(l === void 0 ? c === void 0 ? null : { label: c } : { labelledBy: l }), () => k(null)), [
+		l,
+		c,
+		k
+	]);
+	let H = O(D);
+	ae(() => {
+		H.current = D;
+	}), ae(() => {
+		let e = A.current?.form;
+		if (!e) return;
+		let t = () => H.current();
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, [n]);
+	let de = l ?? (c === void 0 ? void 0 : F), fe = de === void 0 ? void 0 : [
+		de,
+		I,
+		R ? L : void 0
+	].filter(Boolean).join(" "), U = [u, V ? le : void 0].filter(Boolean).join(" ") || void 0, G = () => {
+		m || (p ? K(re.current) : T());
+	}, pe = (e) => {
+		o?.(e), !(e.defaultPrevented || m) && (e.key === z ? e.preventDefault() : ue.has(e.key) && (e.preventDefault(), G()));
+	}, me = (e) => {
+		s?.(e), !(e.defaultPrevented || m || e.key !== z) && G();
+	};
+	return /* @__PURE__ */ N(j, { children: [
+		/* @__PURE__ */ M(i, {
+			className: ne,
+			styles: [q, J[r]],
+			sx: a,
+			children: (e) => /* @__PURE__ */ N("button", {
+				type: "button",
+				...ie({
+					...f,
+					onKeyDown: pe,
+					onKeyUp: me
+				}),
+				ref: se,
+				id: F,
+				form: n,
+				disabled: m,
+				"aria-label": c,
+				"aria-labelledby": fe,
+				"aria-describedby": U,
+				"aria-invalid": B,
+				"data-ui": "date-range-picker",
+				"data-state": p ? "open" : "closed",
+				"data-size": r,
+				"data-readonly": g || void 0,
+				"data-required": _ || void 0,
+				className: e,
+				children: [
+					h(ee) && /* @__PURE__ */ M("span", {
+						"aria-hidden": "true",
+						css: Y,
+						children: ee
+					}),
+					y === void 0 ? /* @__PURE__ */ M("span", {
+						id: I,
+						"data-placeholder": "",
+						css: X,
+						children: te
+					}) : /* @__PURE__ */ M("span", {
+						id: I,
+						children: y
+					}),
+					R && /* @__PURE__ */ M("span", {
+						id: L,
+						hidden: !0,
+						children: C.required
+					})
+				]
+			})
+		}),
+		V && /* @__PURE__ */ M("span", {
+			id: le,
+			role: "alert",
+			"data-ui": "date-range-picker-error",
+			css: Z,
+			children: C.error
+		}),
+		x !== void 0 && /* @__PURE__ */ M("input", {
+			type: "hidden",
+			form: n,
+			name: x,
+			value: b?.start ?? "",
+			disabled: m
+		}),
+		S !== void 0 && /* @__PURE__ */ M("input", {
+			type: "hidden",
+			form: n,
+			name: S,
+			value: b?.end ?? "",
+			disabled: m
+		})
+	] });
+}
+Oe.displayName = "DateRangePicker.Trigger";
+function Q(e) {
+	let { open: t } = W("Content"), n = re(t), [r, i] = k({
+		open: t,
+		count: 0
+	});
+	return r.open !== t && i({
+		open: t,
+		count: r.count + +!!t
+	}), n.present ? /* @__PURE__ */ M(ke, {
+		...e,
+		presenceRef: n.ref,
+		closing: n.closing
+	}, r.count) : null;
+}
+Q.displayName = "DateRangePicker.Content";
+function ke({ ref: e, presenceRef: t, closing: n, dir: r, style: te, className: ne, sx: l, slotProps: u, "aria-label": d, "aria-labelledby": f, "aria-describedby": p, ...h }) {
+	let { readOnly: _, value: v, min: y, max: x, locale: C, firstDayOfWeek: re, today: w, months: T, presets: A, messages: j, availableSize: P, triggerLabelling: F, contentRef: I, refs: L, floatingContext: R, floatingStyles: ue, getFloatingProps: z, apply: V, cancel: de } = W("Content"), U = oe(), G = D(() => new Intl.DateTimeFormat(C, fe), [C]), _e = D(() => new Intl.NumberFormat(C), [C]), q = (e) => e != null && a(e, y, x), J = y === void 0 || x === void 0 || y <= x ? q(v?.start) ? v.start : s(x !== void 0 && w > x ? c(o(x)) : w, y, x) : null, [Y, X] = k(v), [Z, Ee] = k(!1), [De, Oe] = k(v);
+	me(De, v) || (Oe(v), X(v), Ee(!1));
+	let [Q, ke] = k(J), [Ae, je] = k(null), [Me, Ne] = k(null), Pe = O(null), Fe = P?.width ?? L.domReference.current?.ownerDocument.documentElement.clientWidth ?? 0, $ = T === "auto" ? Fe >= le ? 2 : 1 : T, [Ie, Le] = k(o(J ?? s(w, y, void 0))), Re = Array.from({ length: $ }, (e, t) => m(Ie, t)), ze = Re[Re.length - 1] ?? Ie, Be = (e) => o(e) >= Ie && o(e) <= ze, Ve = (e, t = $) => {
+		let n = o(e);
+		n < Ie ? Le(n) : n > m(Ie, t - 1) && Le(m(n, 1 - t));
+	}, [He, Ue] = k($);
+	He !== $ && (Ue($), Q !== null && Ve(Q, $));
+	let We = [
+		Q,
+		Y?.start,
+		w
+	].find((e) => q(e) && Be(e)) ?? Re.map((e) => s(c(e), y, x)).find((e) => Be(e) && q(e)) ?? null, Ge = Ae ?? Q, Ke = Z && Y && q(Ge) ? he(Y.start, Ge) : null, qe = Ke ?? Y;
+	ae(() => {
+		let e = Pe.current;
+		if (e === null) return;
+		Pe.current = null;
+		let t = I.current?.querySelector(`${B}[data-date="${e}"]`);
+		t && t.ownerDocument.activeElement !== t && t.focus();
+	});
+	let Je = (e) => {
+		ke(e), je(null), Ve(e);
+		let t = I.current?.ownerDocument.activeElement;
+		Pe.current = t instanceof HTMLElement && t.dataset.date === e ? null : e;
+	}, Ye = (e) => {
+		_ || (Z && Y ? (X(he(Y.start, e)), Ee(!1)) : (X({
+			start: e,
+			end: e
+		}), Ee(!0)));
+	}, Xe = (e) => {
+		let t = e.target.closest(B);
+		je(t && !t.disabled ? t.dataset.date ?? null : null);
+	}, Ze = A.map((e) => {
+		let t = e.range(w);
+		return {
+			preset: e,
+			range: t,
+			enabled: !_ && pe(t, y, x)
+		};
+	}), Qe = Ze.find((e) => e.enabled && e.preset.id === Me) ?? Ze.find((e) => e.enabled), $e = (e) => {
+		X(e), Ee(!1), ke(e.start), Ve(e.start);
+	}, et = O(null), tt = ie((e) => {
+		I.current = e, e && !et.current && (et.current = K(e));
+	}, [I]), nt = ce([
+		L.setFloating,
+		e,
+		tt,
+		t
+	]), rt = R.elements.domReference, [it, at] = k();
+	E(() => {
+		at(rt?.ownerDocument.defaultView?.getComputedStyle(rt).direction);
+	}, [rt]);
+	let ot = f !== void 0 || d !== void 0 ? {
+		"aria-labelledby": f,
+		"aria-label": d
+	} : F?.labelledBy === void 0 ? { "aria-label": F?.label } : { "aria-labelledby": F.labelledBy }, st = $ === 2 && Ze.length > 0 ? "rail" : "row", ct = !_ && pe(Y, y, x);
+	return /* @__PURE__ */ M(b, { children: /* @__PURE__ */ M(se, {
+		context: R,
+		modal: !1,
+		initialFocus: et,
+		returnFocus: !1,
+		children: /* @__PURE__ */ M(i, {
+			className: ne,
+			styles: ye,
+			sx: l,
+			children: (e) => /* @__PURE__ */ N("div", {
+				...z({
+					...ot,
+					"aria-describedby": [p, U].filter(Boolean).join(" "),
+					...h
+				}),
+				ref: nt,
+				dir: r ?? it,
+				"data-ui": "date-range-picker-content",
+				"data-layout": st,
+				"data-side": R.placement.split("-")[0],
+				"data-state": n ? "closing" : "open",
+				inert: n,
+				"aria-hidden": n || void 0,
+				style: {
+					...te,
+					...ue,
+					...P && {
+						maxInlineSize: P.width,
+						maxBlockSize: P.height
+					}
+				},
+				className: e,
+				children: [
+					Ze.length > 0 && /* @__PURE__ */ M("div", {
+						role: "group",
+						"aria-label": j.presets,
+						"data-ui": "date-range-picker-presets",
+						className: u?.presets?.className,
+						css: [be, u?.presets?.css],
+						onKeyDown: (e) => ee(e, e.currentTarget, st === "rail" ? "vertical" : "horizontal", H),
+						children: Ze.map(({ preset: e, range: t, enabled: n }) => /* @__PURE__ */ M("button", {
+							type: "button",
+							"data-ui": "date-range-picker-preset",
+							"aria-disabled": !n || void 0,
+							"aria-pressed": n && me(t, Y) && !Z,
+							tabIndex: e === Qe?.preset ? 0 : -1,
+							onFocus: () => Ne(e.id),
+							onClick: () => {
+								n && $e(t);
+							},
+							css: xe,
+							children: e.label
+						}, e.id))
+					}),
+					/* @__PURE__ */ M("div", {
+						"data-ui": "date-range-picker-calendars",
+						className: u?.calendars?.className,
+						css: [Se, u?.calendars?.css],
+						children: Re.map((e, t) => /* @__PURE__ */ N(S, {
+							visibleMonth: e,
+							onVisibleMonthChange: (e) => Le(m(e, -t)),
+							min: y,
+							max: x,
+							locale: C,
+							firstDayOfWeek: re,
+							today: w,
+							selectionRange: Y,
+							previewRange: Ke,
+							tabStopDate: We !== null && o(We) === e ? We : null,
+							onDayActivate: Ye,
+							onFocusedDateChange: Je,
+							rangeLabels: {
+								start: j.start,
+								end: j.end
+							},
+							children: [/* @__PURE__ */ M(S.Header, {}), /* @__PURE__ */ M(S.Grid, {
+								onPointerMove: Xe,
+								onPointerLeave: () => je(null)
+							})]
+						}, t))
+					}),
+					/* @__PURE__ */ N("div", {
+						"data-ui": "date-range-picker-footer",
+						css: Ce,
+						children: [/* @__PURE__ */ M("span", {
+							id: U,
+							role: "status",
+							"data-ui": "date-range-picker-summary",
+							className: u?.summary?.className,
+							css: [we, u?.summary?.css],
+							children: qe ? j.summary({
+								range: ve(G, qe),
+								days: ge(qe),
+								formattedDays: _e.format(ge(qe))
+							}) : j.empty
+						}), /* @__PURE__ */ N("div", {
+							"data-ui": "date-range-picker-actions",
+							className: u?.actions?.className,
+							css: [Te, u?.actions?.css],
+							children: [/* @__PURE__ */ M(g, {
+								variant: "ghost",
+								size: "sm",
+								onClick: de,
+								children: j.cancel
+							}), /* @__PURE__ */ M(g, {
+								tone: "accent",
+								size: "sm",
+								disabled: !ct,
+								onClick: () => {
+									ct && V(Y);
+								},
+								children: j.apply
+							})]
+						})]
+					})
+				]
+			})
+		})
+	}) });
+}
+var Ae = Object.assign(De, {
+	Trigger: Oe,
+	Content: Q
+});
+//#endregion
+export { Ae as t };

package/dist/date-range-picker.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as DateRangePicker } from "./date-range-picker-B5uFWsm-.js";
+export { t as DateRangePicker } from "./date-range-picker-rXcZsI1Y.js";