@jfrader/ui 0.5.1 → 0.6.0

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

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