@jfrader/ui 0.5.0 → 0.6.0

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

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