@jfrader/ui 0.4.0 → 0.5.1

package/dist/countdown-Dp_TD1VP.js

@@ -0,0 +1,293 @@
+'use client';
+import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./use-latest-callback-cj1OOQL6.js";
+import { t as o } from "./visually-hidden-BJdvqqvn.js";
+import { t as s } from "./renderable-DzcIj1Lo.js";
+import { useEffect as c, useId as l, useRef as u, useState as d } from "react";
+import { vars as f } from "@jfrader/tokens/vars";
+import { Fragment as p, jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
+//#region src/components/countdown/countdown.tsx
+var ee = 2147483647, g = 864e13, _ = 1e3, v = [
+	"days",
+	"hours",
+	"minutes",
+	"seconds"
+], y = {
+	days: 86400,
+	hours: 3600,
+	minutes: 60,
+	seconds: 1
+}, b = {
+	days: "day",
+	hours: "hour",
+	minutes: "minute",
+	seconds: "second"
+}, te = () => Date.now(), x = (e) => Number.isFinite(e) && Math.abs(e) <= g, S = (e) => s(e) && e !== "";
+function ne(e) {
+	if (typeof e == "string") {
+		let t = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2})(?:\.\d{1,3})?)?(Z|[+-](\d{2}):(\d{2}))$/.exec(e);
+		if (!t) return null;
+		let [, n, r, i, a, o, s, , c, l] = t, u = /* @__PURE__ */ new Date(`${n}-${r}-01T00:00:00Z`);
+		if (u.setUTCMonth(u.getUTCMonth() + 1, 0), +r < 1 || +r > 12 || +i < 1 || +i > u.getUTCDate() || +a > 23 || +o > 59 || +(s ?? 0) > 59 || +(c ?? 0) > 23 || +(l ?? 0) > 59) return null;
+	}
+	let t = typeof e == "number" ? e : e instanceof Date ? e.getTime() : Date.parse(e);
+	return x(t) ? t : null;
+}
+function C(e, t) {
+	return t.map((t) => {
+		let n = Math.floor(e / y[t]);
+		return e %= y[t], {
+			unit: t,
+			value: n
+		};
+	});
+}
+function re(e, t, n) {
+	let r = e >= 60 && t.length > 1 ? t.filter((e) => e !== "seconds") : t, i = C(e, r);
+	if (r.length === 1 && r[0] === "seconds") return new Intl.NumberFormat(n, {
+		style: "unit",
+		unit: "second",
+		unitDisplay: "long"
+	}).format(e);
+	let a = i.filter(({ value: e }) => e > 0);
+	a.length || a.push(i[i.length - 1]);
+	let o = Intl.DurationFormat;
+	return typeof o == "function" ? new o(n, {
+		style: "long",
+		...Object.fromEntries(a.map(({ unit: e }) => [`${e}Display`, "always"]))
+	}).format(Object.fromEntries(a.map(({ unit: e, value: t }) => [e, t]))) : new Intl.ListFormat(n, {
+		style: "long",
+		type: "conjunction"
+	}).format(a.map(({ unit: e, value: t }) => new Intl.NumberFormat(n, {
+		style: "unit",
+		unit: b[e],
+		unitDisplay: "long"
+	}).format(t)));
+}
+var w = e({
+	from: {
+		transform: "translateY(100%)",
+		opacity: 0
+	},
+	to: {
+		transform: "translateY(0)",
+		opacity: 1
+	}
+}), T = e({
+	from: { opacity: 0 },
+	to: { opacity: 1 }
+}), ie = t({
+	display: "grid",
+	gap: f.space[2],
+	inlineSize: "fit-content",
+	maxInlineSize: "100%",
+	minInlineSize: 0,
+	fontFamily: f.font.sans,
+	color: f.color.text,
+	textAlign: "start",
+	lineHeight: f.lineHeight.base,
+	overflowWrap: "anywhere",
+	[r]: { color: "CanvasText" }
+}), E = t({
+	fontSize: f.textSize.sm,
+	color: f.color.textMuted
+}), D = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "baseline",
+	gap: f.space[4],
+	minInlineSize: 0,
+	maxInlineSize: "100%"
+}), ae = t({
+	minBlockSize: f.space[8],
+	boxSizing: "border-box",
+	border: `1px solid ${f.color.borderControl}`,
+	borderRadius: f.radius.full,
+	paddingInline: f.space[3],
+	paddingBlock: f.space[1],
+	backgroundColor: f.color.surfaceRaised,
+	"& [data-ui=\"countdown-content\"]": { gap: f.space[2] },
+	[r]: {
+		borderColor: "CanvasText",
+		backgroundColor: "transparent"
+	}
+}), oe = t({
+	maxInlineSize: "100%",
+	minInlineSize: 0,
+	fontSize: f.textSize.xs
+}), O = t({
+	display: "inline-block",
+	maxInlineSize: "100%",
+	fontFamily: f.font.mono,
+	fontVariantNumeric: "tabular-nums",
+	fontWeight: f.fontWeight.medium,
+	lineHeight: f.lineHeight.tight
+}), k = t({ fontSize: `clamp(${f.textSize["2xl"]}, 8cqi, ${f.textSize["3xl"]})` }), A = t({ fontSize: f.textSize.sm }), j = t({
+	animation: `${w} ${f.motion.duration.base} ${f.motion.easeStandard}`,
+	[i]: { animation: "none" }
+}), M = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: f.space[2],
+	color: f.color.text,
+	animation: `${T} ${f.motion.duration.fast} ${f.motion.easeStandard}`,
+	[i]: { animation: "none" }
+}), se = t({
+	display: "inline-flex",
+	color: f.color.success,
+	[r]: { color: "CanvasText" }
+});
+function ce({ value: e, variant: t, slot: n }) {
+	let r = u(e), i = r.current !== e;
+	return c(() => {
+		r.current = e;
+	}, [e]), /* @__PURE__ */ m("span", {
+		"data-ui": "countdown-number",
+		className: n?.className,
+		css: [
+			O,
+			t === "display" ? k : A,
+			i && j,
+			n?.css
+		],
+		children: e
+	}, e);
+}
+function N({ ref: e, target: t, variant: r = "display", units: i = v, label: s = "Time remaining", locale: f, unitDisplay: g = r === "display" ? "long" : "narrow", completeLabel: y = "Live now", completeText: w = "Complete", pendingLabel: T = "—", invalidLabel: O = "Unavailable", invalidText: k = "Unavailable", clock: A = te, initialNow: j, onComplete: N, announceCompletion: P = !1, completionIcon: F, slotProps: I, className: L, sx: le, "aria-labelledby": R, "aria-describedby": ue, "aria-label": de, ...fe }) {
+	let z = `${l()}-label`, B = `${l()}-description`, V = ne(t), H = v.filter((e) => i.includes(e)), U = H.length ? H : v, [W, pe] = d(j), [me, G] = d(null), K = a(N), q = u({
+		epoch: V,
+		fired: !1
+	});
+	c(() => {
+		if (q.current.epoch !== V && (q.current = {
+			epoch: V,
+			fired: !1
+		}), G(null), V === null) return;
+		let e, t, n = () => {
+			clearTimeout(e), clearTimeout(t);
+			let r;
+			try {
+				r = A();
+			} catch {
+				r = NaN;
+			}
+			if (pe(r), !x(r)) {
+				t = setTimeout(n, _);
+				return;
+			}
+			let i = V - r;
+			i <= 0 ? q.current.fired ? G(V) : (q.current.fired = !0, G(V), K(V)) : (t = setTimeout(n, Math.min(i, ee)), document.visibilityState !== "hidden" && (e = setTimeout(n, Math.min(i, i % _ || _))));
+		};
+		return n(), document.addEventListener("visibilitychange", n), window.addEventListener("pageshow", n), () => {
+			clearTimeout(e), clearTimeout(t), document.removeEventListener("visibilitychange", n), window.removeEventListener("pageshow", n);
+		};
+	}, [
+		V,
+		A,
+		K
+	]);
+	let J = V === null || W !== void 0 && !x(W) ? "invalid" : W === void 0 ? "pending" : W >= V ? "complete" : "running", Y = J === "running" ? Math.ceil((V - W) / _) : 0, he = J === "running" ? re(Y, U, f) : void 0, X = S(y) && (typeof y == "string" || typeof y == "number"), ge = typeof O == "string" || typeof O == "number", Z = P && J === "complete" && me === V, Q = he ?? (J === "invalid" ? k : J === "complete" && !X && !Z ? w : void 0), $ = /* @__PURE__ */ h(p, { children: [
+		S(F) && /* @__PURE__ */ m("span", {
+			"data-ui": "countdown-icon",
+			"aria-hidden": "true",
+			className: I?.icon?.className,
+			css: [se, I?.icon?.css],
+			children: F
+		}),
+		S(y) ? /* @__PURE__ */ m("span", {
+			"aria-hidden": !X || void 0,
+			children: y
+		}) : null,
+		!X && Z && /* @__PURE__ */ m("span", {
+			css: o,
+			children: w
+		})
+	] });
+	return /* @__PURE__ */ m(n, {
+		className: L,
+		styles: [ie, r === "compact" && ae],
+		sx: le,
+		children: (t) => /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h("div", {
+			...fe,
+			ref: e,
+			className: t,
+			"data-ui": "countdown",
+			"data-state": J,
+			"data-variant": r,
+			role: "timer",
+			"aria-live": "off",
+			"aria-label": de ?? (!S(s) && !R ? "Time remaining" : void 0),
+			"aria-labelledby": [R, S(s) && z].filter(Boolean).join(" ") || void 0,
+			"aria-describedby": [ue, Q !== void 0 && B].filter(Boolean).join(" ") || void 0,
+			children: [
+				S(s) && /* @__PURE__ */ m("span", {
+					id: z,
+					"data-ui": "countdown-label",
+					className: I?.label?.className,
+					css: [E, I?.label?.css],
+					children: s
+				}),
+				J === "running" && /* @__PURE__ */ m("div", {
+					"data-ui": "countdown-content",
+					"aria-hidden": "true",
+					className: I?.content?.className,
+					css: [D, I?.content?.css],
+					children: C(Y, U).map(({ unit: e, value: t }) => {
+						let n = new Intl.NumberFormat(f, {
+							style: "unit",
+							unit: b[e],
+							unitDisplay: g,
+							minimumIntegerDigits: 2,
+							useGrouping: !1
+						}), i = n.resolvedOptions();
+						return /* @__PURE__ */ m("bdi", {
+							"data-ui": "countdown-unit",
+							className: I?.unit?.className,
+							css: [oe, I?.unit?.css],
+							children: n.formatToParts(t).map((e, t) => e.type === "integer" ? /* @__PURE__ */ m(ce, {
+								value: e.value,
+								variant: r,
+								slot: I?.number
+							}, t) : /* @__PURE__ */ m("span", { children: e.value }, t))
+						}, `${e}-${i.locale}-${i.numberingSystem}`);
+					})
+				}),
+				J === "complete" && !Z && (S(y) || S(F)) && /* @__PURE__ */ m("span", {
+					"data-ui": "countdown-complete",
+					className: I?.complete?.className,
+					css: [M, I?.complete?.css],
+					children: $
+				}),
+				J === "pending" && S(T) && /* @__PURE__ */ m("span", {
+					"data-ui": "countdown-pending",
+					children: T
+				}),
+				J === "invalid" && S(O) && /* @__PURE__ */ m("span", {
+					"data-ui": "countdown-invalid",
+					"aria-hidden": !ge || void 0,
+					children: O
+				}),
+				Q !== void 0 && /* @__PURE__ */ m("span", {
+					id: B,
+					"data-ui": "countdown-description",
+					className: I?.description?.className,
+					css: [o, I?.description?.css],
+					children: Q
+				})
+			]
+		}), P && /* @__PURE__ */ m("span", {
+			role: "status",
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			"data-ui": "countdown-announcement",
+			className: I?.complete?.className,
+			css: Z ? [M, I?.complete?.css] : o,
+			children: Z ? $ : null
+		})] })
+	});
+}
+N.displayName = "Countdown";
+//#endregion
+export { N as t };

package/dist/countdown.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as Countdown } from "./countdown-Dp_TD1VP.js";

package/dist/date-picker-BiPN7yeK.js

@@ -0,0 +1,255 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./use-controlled-state-DpeVQZNR.js";
+import { t as r } from "./renderable-DzcIj1Lo.js";
+import { n as i } from "./surface-DZ4d-2aL.js";
+import { t as a } from "./overlay-layer-qEbpEtb8.js";
+import { t as o } from "./calendar-BzJdv_SZ.js";
+import { t as s } from "./overlay-portal-C4JZFq2M.js";
+import { t as c } from "./use-overlay-floating-Bx2jBKAA.js";
+import { t as l } from "./text-field-hU72iSVS.js";
+import { createContext as u, useContext as d, useEffect as f, useId as p, useLayoutEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { vars as v } from "@jfrader/tokens/vars";
+import { jsx as y, jsxs as b } from "@emotion/react/jsx-runtime";
+import { FloatingFocusManager as x, useClick as S, useDismiss as C, useInteractions as w, useMergeRefs as T, useRole as E } from "@floating-ui/react";
+//#region src/components/date-picker/date-picker.tsx
+var D = "bottom-start", O = /* @__PURE__ */ new Set(["Enter", "ArrowDown"]), k = " ", A = "[data-ui=\"calendar-day\"][tabindex=\"0\"]", j = "[data-ui=\"calendar-day\"]", M = /^\d{4}-\d{2}-\d{2}$/, N = {
+	calendar: "gregory",
+	timeZone: "UTC",
+	dateStyle: "medium"
+}, P = u(null);
+function F(e) {
+	let t = d(P);
+	if (!t) throw Error(`DatePicker.${e} must be rendered inside <DatePicker>.`);
+	return t;
+}
+var I = (e, t) => String(e).padStart(t, "0"), L = (e, t, n) => `${I(e, 4)}-${I(t, 2)}-${I(n, 2)}`;
+function R(e) {
+	if (e === void 0 || !M.test(e)) return;
+	let [t = NaN, n = NaN, r = NaN] = e.split("-").map(Number), i = new Date(Date.UTC(0, 0, 1));
+	return i.setUTCFullYear(t, n - 1, r), L(i.getUTCFullYear(), i.getUTCMonth() + 1, i.getUTCDate()) === e ? i : void 0;
+}
+var z = (e) => R(e) ? e : void 0;
+function ee(e, t, n) {
+	return t !== void 0 && e < t ? t : n !== void 0 && e > n ? n : e;
+}
+function te() {
+	let e = /* @__PURE__ */ new Date();
+	return L(e.getFullYear(), e.getMonth() + 1, e.getDate());
+}
+var ne = () => typeof navigator > "u" ? void 0 : navigator.language;
+function re(e, t) {
+	let n = new Intl.DisplayNames(t, { type: "dateTimeField" });
+	return e.formatToParts(/* @__PURE__ */ new Date(0)).map((e) => e.type === "literal" ? e.value : n.of(e.type) ?? e.value).join("");
+}
+function B(e) {
+	let t = e?.querySelector(A) ?? null;
+	return t?.focus({ preventScroll: !0 }), t;
+}
+var V = e({
+	cursor: "pointer",
+	"&:disabled": { cursor: "not-allowed" }
+}), H = e({
+	...i,
+	borderRadius: v.radius.md,
+	boxShadow: v.shadow.overlay,
+	padding: v.space[3]
+});
+function U({ value: e, defaultValue: t, onValueChange: r, open: i, defaultOpen: a = !1, onOpenChange: o, min: s, max: l, locale: u, firstDayOfWeek: d, disabled: p = !1, name: m, placeholder: v, children: x }) {
+	let [T, O] = n(e, t, r), [k = !1, A] = n(i, a, o), [j, M] = _(!1), F = p || j, I = k && !F, [L, B] = _(null), V = g(null), H = g(!1), U = h(() => new Intl.DateTimeFormat(u ?? ne()).resolvedOptions().locale, [u]), W = h(() => new Intl.DateTimeFormat(U, N), [U]), G = h(() => re(W, U), [W, U]), K = R(T), q = K ? W.format(K) : "", J = z(s), Y = z(l), X = ee(z(T) ?? te(), J, Y).slice(0, 7), { refs: Z, floatingStyles: Q, context: $ } = c({
+		open: I,
+		placement: D,
+		onOpenChange: (e, t, n) => {
+			F && e || (e || (H.current = n === "escape-key"), A(e));
+		}
+	});
+	f(() => {
+		F && (H.current = !1, k && A(!1));
+	}, [
+		F,
+		k,
+		A
+	]), f(() => {
+		!F && !I && H.current && (H.current = !1, Z.domReference.current?.focus());
+	}, [
+		F,
+		I,
+		Z
+	]);
+	let ie = S($, {
+		enabled: !F,
+		keyboardHandlers: !1
+	}), ae = C($, {
+		escapeKey: !0,
+		outsidePress: !0
+	}), oe = E($, { role: "dialog" }), { getReferenceProps: se, getFloatingProps: ce } = w([
+		ie,
+		ae,
+		oe
+	]), le = h(() => ({
+		open: I,
+		disabled: F,
+		value: T,
+		displayValue: q,
+		placeholder: v ?? G,
+		initialMonth: X,
+		min: J,
+		max: Y,
+		locale: U,
+		firstDayOfWeek: d,
+		inputLabelling: L,
+		gridRef: V,
+		refs: Z,
+		floatingContext: $,
+		floatingStyles: Q,
+		getReferenceProps: se,
+		getFloatingProps: ce,
+		requestOpenChange: (e) => {
+			F && e || A(e);
+		},
+		selectDate: (e) => {
+			F || (O(e), H.current = !0, A(!1));
+		},
+		setInputLabelling: B,
+		setInputDisabled: M
+	}), [
+		I,
+		F,
+		T,
+		q,
+		v,
+		G,
+		X,
+		J,
+		Y,
+		U,
+		d,
+		L,
+		Z,
+		$,
+		Q,
+		se,
+		ce,
+		A,
+		O
+	]);
+	return /* @__PURE__ */ b(P.Provider, {
+		value: le,
+		children: [x, m !== void 0 && /* @__PURE__ */ y("input", {
+			type: "hidden",
+			name: m,
+			value: T ?? "",
+			disabled: F
+		})]
+	});
+}
+function W(e) {
+	return /* @__PURE__ */ y(a, { children: /* @__PURE__ */ y(U, { ...e }) });
+}
+W.displayName = "DatePicker";
+function G({ ref: e, label: t, id: n, disabled: i, slotProps: a, onKeyDown: o, onKeyUp: s, ...c }) {
+	let { open: u, disabled: d, displayValue: f, placeholder: h, gridRef: g, refs: _, getReferenceProps: v, requestOpenChange: b, setInputLabelling: x, setInputDisabled: S } = F("Input"), C = T([_.setReference, e]), w = p(), E = n ?? w, D = `${E}-label`, A = r(t), j = c["aria-labelledby"], M = c["aria-label"], N = M ?? (typeof t == "string" ? t : void 0), P = d || i === !0;
+	m(() => (S(i === !0), () => S(!1)), [i, S]), m(() => (x(j === void 0 ? M === void 0 ? typeof t == "string" ? { label: t } : { labelledBy: A ? D : void 0 } : { label: M } : { labelledBy: j }), () => x(null)), [
+		j,
+		M,
+		t,
+		A,
+		D,
+		x
+	]);
+	let I = () => {
+		P || (u ? B(g.current) : b(!0));
+	}, L = (e) => {
+		o?.(e), !(e.defaultPrevented || P) && (e.key === k ? e.preventDefault() : O.has(e.key) && (e.preventDefault(), I()));
+	}, R = (e) => {
+		s?.(e), !(e.defaultPrevented || P || e.key !== k) && I();
+	};
+	return /* @__PURE__ */ y(l, {
+		...v({
+			...c,
+			onKeyDown: L,
+			onKeyUp: R
+		}),
+		ref: C,
+		id: E,
+		label: A ? /* @__PURE__ */ y("span", {
+			id: D,
+			children: t
+		}) : t,
+		slotProps: {
+			...a,
+			control: {
+				...a?.control,
+				css: [V, a?.control?.css]
+			}
+		},
+		value: f,
+		placeholder: h,
+		disabled: P,
+		readOnly: !0,
+		role: "combobox",
+		"aria-label": N,
+		"aria-autocomplete": "none",
+		"data-state": u ? "open" : "closed",
+		"data-ui": "date-picker-input"
+	});
+}
+G.displayName = "DatePicker.Input";
+function K({ ref: e, style: n, className: r, sx: i, ...a }) {
+	let { open: c, value: l, initialMonth: u, min: d, max: f, locale: p, firstDayOfWeek: m, inputLabelling: h, gridRef: _, refs: v, floatingContext: S, floatingStyles: C, getFloatingProps: w, selectDate: E } = F("Popup"), D = T([v.setFloating, e]), O = g(null), k = T([(e) => {
+		_.current = e, O.current = B(e);
+	}]);
+	if (!c) return null;
+	let A = a["aria-labelledby"] !== void 0 || a["aria-label"] !== void 0 ? {} : h?.labelledBy === void 0 ? { "aria-label": h?.label } : { "aria-labelledby": h.labelledBy }, M = (e) => {
+		let t = e.target.closest(j);
+		if (t?.disabled) return;
+		let n = t?.dataset.date;
+		n !== void 0 && E(n);
+	}, N = (e) => {
+		e.target.closest(j)?.disabled && e.preventDefault();
+	};
+	return /* @__PURE__ */ y(s, { children: /* @__PURE__ */ y(x, {
+		context: S,
+		modal: !1,
+		initialFocus: O,
+		returnFocus: !1,
+		children: /* @__PURE__ */ y(t, {
+			className: r,
+			styles: H,
+			sx: i,
+			children: (e) => /* @__PURE__ */ y("div", {
+				...w({
+					...A,
+					...a
+				}),
+				ref: D,
+				"data-ui": "date-picker-popup",
+				style: {
+					...n,
+					...C
+				},
+				className: e,
+				children: /* @__PURE__ */ b(o, {
+					value: l ?? "",
+					defaultVisibleMonth: u,
+					min: d,
+					max: f,
+					locale: p,
+					firstDayOfWeek: m,
+					children: [/* @__PURE__ */ y(o.Header, {}), /* @__PURE__ */ y(o.Grid, {
+						ref: k,
+						onClick: M,
+						onPointerDownCapture: N
+					})]
+				})
+			})
+		})
+	}) });
+}
+K.displayName = "DatePicker.Popup";
+var q = Object.assign(W, {
+	Input: G,
+	Popup: K
+});
+//#endregion
+export { q as t };

package/dist/date-picker.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as DatePicker } from "./date-picker-C29Uo4Tx.js";
+export { t as DatePicker } from "./date-picker-BiPN7yeK.js";