@jfrader/ui 0.4.0 → 0.5.0

package/dist/slider-t0B5cecO.js

@@ -0,0 +1,477 @@
+'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 { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as o } from "./visually-hidden-BJdvqqvn.js";
+import { t as s } from "./renderable-DzcIj1Lo.js";
+import { useEffect as c, useId as ee, useMemo as te, useRef as l, useState as u } from "react";
+import { vars as d } from "@jfrader/tokens/vars";
+import { createElement as ne } from "@emotion/react";
+import { jsx as f, jsxs as p } from "@emotion/react/jsx-runtime";
+import { MotionConfig as re, motion as ie, useReducedMotion as ae } from "motion/react";
+//#region src/components/slider/slider.tsx
+var m = 1e-7, oe = {
+	type: "spring",
+	stiffness: 420,
+	damping: 30
+}, se = 8, ce = e({
+	label: "slider",
+	display: "grid",
+	gap: d.space[2],
+	minInlineSize: 0,
+	inlineSize: "100%",
+	fontFamily: d.font.sans,
+	fontSize: d.textSize.sm,
+	lineHeight: d.lineHeight.base,
+	color: d.color.text
+}), le = e({
+	display: "flex",
+	flexWrap: "wrap",
+	justifyContent: "space-between",
+	gap: d.space[2],
+	alignItems: "baseline"
+}), ue = e({ fontWeight: d.fontWeight.medium }), de = e({
+	fontVariantNumeric: "tabular-nums",
+	overflowWrap: "anywhere"
+}), fe = e({ color: d.color.textMuted }), pe = e({ color: d.color.dangerText }), me = e({
+	display: "flex",
+	alignItems: "center",
+	gap: d.space[3],
+	minInlineSize: 0,
+	paddingBlockStart: d.space[8]
+}), he = e({
+	position: "relative",
+	flex: 1,
+	minInlineSize: d.space[8],
+	marginInline: d.space[4],
+	touchAction: "pan-y",
+	userSelect: "none",
+	cursor: "pointer",
+	"&[data-disabled]": { cursor: "default" }
+}), ge = {
+	sm: e({ minBlockSize: d.space[8] }),
+	md: e({ minBlockSize: d.space[10] })
+}, _e = e({
+	position: "absolute",
+	insetInline: 0,
+	insetBlockStart: "50%",
+	transform: "translateY(-50%)",
+	blockSize: d.space[1],
+	boxSizing: "border-box",
+	border: `1px solid ${d.color.borderControl}`,
+	borderRadius: d.radius.full,
+	background: d.color.surfaceInset,
+	pointerEvents: "none",
+	[r]: {
+		forcedColorAdjust: "none",
+		background: "Canvas",
+		borderColor: "CanvasText"
+	}
+}), ve = e({
+	position: "absolute",
+	insetBlock: 0,
+	background: d.color.accent,
+	borderRadius: d.radius.full,
+	[r]: { background: "Highlight" }
+}), ye = e({
+	position: "absolute",
+	insetBlockStart: "50%",
+	transform: "translate(-50%, -50%)",
+	"&:dir(rtl)": { transform: "translate(50%, -50%)" },
+	inlineSize: d.space[8],
+	blockSize: d.space[8],
+	display: "grid",
+	placeItems: "center",
+	borderRadius: d.radius.full,
+	cursor: "grab",
+	"&:focus-visible": {
+		...n,
+		zIndex: 2
+	},
+	"&[data-dragging]": {
+		cursor: "grabbing",
+		zIndex: 3
+	},
+	"&[aria-disabled=\"true\"]": { cursor: "default" }
+}), be = e({
+	inlineSize: d.space[6],
+	blockSize: d.space[6],
+	boxSizing: "border-box",
+	border: `2px solid ${d.color.borderControl}`,
+	borderRadius: d.radius.full,
+	background: d.color.surfaceRaised,
+	boxShadow: d.shadow.raised,
+	pointerEvents: "none",
+	[r]: {
+		forcedColorAdjust: "none",
+		background: "Canvas",
+		borderColor: "CanvasText",
+		boxShadow: "none"
+	}
+}), xe = e({
+	position: "absolute",
+	insetBlockEnd: `calc(100% + ${d.space[2]})`,
+	paddingInline: d.space[2],
+	paddingBlock: d.space[1],
+	inlineSize: "max-content",
+	maxInlineSize: "min(24rem, 80vw)",
+	overflowWrap: "anywhere",
+	border: `1px solid ${d.color.borderControl}`,
+	borderRadius: d.radius.md,
+	background: d.color.surfaceRaised,
+	color: d.color.text,
+	boxShadow: d.shadow.raised,
+	pointerEvents: "none",
+	fontSize: d.textSize.xs,
+	opacity: 0,
+	transition: `opacity ${d.motion.duration.fast} ${d.motion.easeStandard}`,
+	"[data-dragging] > &, [data-slider-thumb]:focus-visible > &": { opacity: 1 },
+	[i]: { transitionDuration: "0s" },
+	[r]: {
+		borderColor: "CanvasText",
+		boxShadow: "none"
+	}
+}), Se = e({
+	position: "absolute",
+	insetBlockStart: "50%",
+	transform: "translate(-50%, -50%)",
+	inlineSize: d.space[1],
+	blockSize: d.space[2],
+	border: `1px solid ${d.color.borderControl}`,
+	background: d.color.surfaceRaised,
+	boxSizing: "border-box",
+	pointerEvents: "none",
+	[r]: {
+		background: "Canvas",
+		borderColor: "CanvasText"
+	}
+}), Ce = e({
+	display: "flex",
+	flexWrap: "wrap",
+	gap: d.space[2]
+}), we = e({
+	minBlockSize: d.space[8],
+	minInlineSize: d.space[8],
+	paddingBlock: d.space[1],
+	paddingInline: d.space[2],
+	font: "inherit",
+	overflowWrap: "anywhere",
+	maxInlineSize: "100%",
+	color: d.color.text,
+	background: d.color.surfaceRaised,
+	border: `1px solid ${d.color.borderControl}`,
+	borderRadius: d.radius.md,
+	cursor: "pointer",
+	"&:focus-visible": n,
+	"&:disabled": { cursor: "default" },
+	[r]: { borderColor: "ButtonText" }
+});
+function h(e, t) {
+	return typeof e == "number" ? e === t : typeof t != "number" && e[0] === t[0] && e[1] === t[1];
+}
+function Te(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+function g(e) {
+	return s(e) && e !== "";
+}
+function Ee(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+function _(e) {
+	let { ref: n, type: r = "single", value: i, defaultValue: s, label: d, description: _, error: De, invalid: Oe = !1, disabled: v = !1, min: y = 0, max: b = 100, step: x = 1, largeStep: S, minStepsBetweenThumbs: C = 0, marks: ke = [], thumbLabels: w, locale: Ae, formatOptions: je, formatValue: T, showValue: Me = !0, start: Ne, end: Pe, name: E, size: Fe = "md", slotProps: D, onValueChange: Ie, onValueCommit: Le, className: Re, sx: ze, onKeyDown: Be, "aria-label": Ve, "aria-labelledby": He, "aria-describedby": Ue, "aria-invalid": We, ...Ge } = e, O = r === "range", k = (b - y) / x;
+	if (![
+		y,
+		b,
+		x,
+		k
+	].every(Number.isFinite) || b <= y || x <= 0 || !Number.isSafeInteger(Math.round(k)) || Math.abs(k - Math.round(k)) > m) throw Error("Slider requires finite min < max, a positive step, and max aligned to min + n * step.");
+	if (!Number.isInteger(C) || C < 0 || C > Math.round(k)) throw Error("Slider minStepsBetweenThumbs must be a nonnegative integer that fits the domain.");
+	if (S !== void 0 && (!Number.isFinite(S) || S <= 0)) throw Error("Slider largeStep must be finite and positive.");
+	let A = C * x, j = Math.max(1, Math.round((S ?? (b - y) / 10) / x)) * x, M = (e) => {
+		if (!Number.isFinite(e)) throw Error("Slider values must be finite.");
+		let t = Math.max(0, Math.min(Math.round(k), Math.round((e - y) / x))), n = y + t * x, r = Number(n.toPrecision(15));
+		return Math.abs(r - n) <= x * m ? r : n;
+	}, Ke = (e) => {
+		if (!O) {
+			if (typeof e != "number") throw Error("Slider single mode requires a number.");
+			return M(e);
+		}
+		if (typeof e == "number" || e.length !== 2 || e[0] > e[1]) throw Error("Slider range requires an ordered [lower, upper] tuple.");
+		let t = M(e[0]), n = M(e[1]);
+		if ((n - t) / x + m < C) throw Error("Slider range values must respect minStepsBetweenThumbs.");
+		return [t, n];
+	}, [qe] = u(() => Ke(s ?? (O ? [y, b] : y))), Je = (t) => {
+		e.type, e.onValueChange?.(t);
+	}, N = (t) => {
+		e.type, e.onValueCommit?.(t);
+	}, [Ye, Xe, Ze] = a(i, qe, Je), P = Ke(Ye ?? qe), F = typeof P == "number" ? [P] : P, I = ee(), L = te(() => new Intl.NumberFormat(Ae, je), [Ae, je]), R = (e) => T ? T(e, L) : L.format(e), Qe = typeof P == "number" ? R(P) : !T && "formatRange" in L ? L.formatRange(P[0], P[1]) : `${R(P[0])} – ${R(P[1])}`, z = ae(), B = l(null), V = l(null), $e = l(0), [H, U] = u(null), [et, tt] = u(0), W = (e) => O ? [e === 0 ? y : F[0] + A, e === 0 ? F[1] - A : b] : [y, b], G = (e, t) => {
+		let [n, r] = W(e), i = M(Math.max(n, Math.min(r, t)));
+		return O ? e === 0 ? [i, F[1]] : [F[0], i] : i;
+	}, K = (e) => {
+		h(P, e) || Xe(e);
+	}, q = (e) => {
+		let t = V.current;
+		t && (V.current = null, U(null), tt(0), t.control.hasPointerCapture(t.pointerId) && t.control.releasePointerCapture(t.pointerId), e && !h(t.initial, t.candidate) && N(t.candidate));
+	};
+	c(() => {
+		v && q(!1);
+	}, [v]), c(() => () => {
+		let e = V.current;
+		V.current = null, e?.control.hasPointerCapture(e.pointerId) && e.control.releasePointerCapture(e.pointerId);
+	}, []), c(() => {
+		let e = B.current?.closest("form");
+		if (!e) return;
+		let t = (e) => {
+			queueMicrotask(() => {
+				e.defaultPrevented || (q(!1), Ze());
+			});
+		};
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, [Ze]);
+	let nt = (e) => B.current?.querySelector(`[data-slider-thumb="${e}"]`)?.focus(), J = () => B.current?.matches(":dir(rtl)") ?? !1, rt = (e) => {
+		let t = B.current.getBoundingClientRect(), n = t.width > 0 ? (e - t.left) / t.width : 0;
+		return y + (J() ? 1 - n : n) * (b - y);
+	}, it = (e) => O ? Math.abs(e - F[0]) === Math.abs(e - F[1]) ? $e.current : Math.abs(e - F[0]) < Math.abs(e - F[1]) ? 0 : 1 : 0, at = (e) => {
+		let t = V.current;
+		if (!t || e.pointerId !== t.pointerId || v) return;
+		t.coincident && e.clientX !== t.originX && (t.thumb = e.clientX > t.originX === J() ? 0 : 1, t.coincident = !1, U(t.thumb), nt(t.thumb));
+		let n = rt(e.clientX - t.offset), r = G(t.thumb, n), [i, a] = W(t.thumb);
+		tt(z ? 0 : Math.max(-8, Math.min(se, (n - Math.max(i, Math.min(a, n))) * (J() ? -1 : 1)))), h(t.candidate, r) || (t.candidate = r, K(r));
+	}, ot = (e) => {
+		if (e.defaultPrevented || v || V.current || !e.isPrimary || e.button !== 0) return;
+		let t = e.target.closest("[data-slider-thumb]"), n = t ? Number(t.dataset.sliderThumb) : it(rt(e.clientX)), r = t?.getBoundingClientRect(), i = r ? e.clientX - (r.left + r.width / 2) : 0;
+		V.current = {
+			pointerId: e.pointerId,
+			thumb: n,
+			offset: i,
+			originX: e.clientX,
+			coincident: O && F[0] === F[1],
+			initial: P,
+			candidate: P,
+			control: e.currentTarget
+		}, e.currentTarget.setPointerCapture(e.pointerId), e.preventDefault(), U(n), nt(n), t || at(e);
+	}, st = (e, t) => {
+		if (v || e.defaultPrevented) return;
+		let n = J() ? -1 : 1, r = e.shiftKey ? j : x, [i, a] = W(t), o = {
+			ArrowRight: F[t] + r * n,
+			ArrowLeft: F[t] - r * n,
+			ArrowUp: F[t] + r,
+			ArrowDown: F[t] - r,
+			PageUp: F[t] + j,
+			PageDown: F[t] - j,
+			Home: i,
+			End: a
+		}[e.key];
+		if (o === void 0) return;
+		e.preventDefault();
+		let s = G(t, o);
+		h(P, s) || (K(s), N(s));
+	}, Y = Array.from(new Map(ke.flatMap((e) => {
+		let t = typeof e == "number" ? { value: e } : e;
+		return Number.isFinite(t.value) && t.value >= y && t.value <= b ? [[M(t.value), {
+			...t,
+			value: M(t.value)
+		}]] : [];
+	})).values()), X = (e) => (e - y) / (b - y) * 100, ct = O ? X(F[0]) : 0, lt = X(F[+!!O]), Z = g(d), Q = g(_), $ = g(De);
+	return /* @__PURE__ */ f(re, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ f(t, {
+			className: Re,
+			styles: ce,
+			sx: ze,
+			children: (e) => /* @__PURE__ */ p("div", {
+				...Ge,
+				ref: n,
+				className: e,
+				"data-ui": "slider",
+				"data-disabled": v || void 0,
+				onKeyDown: (e) => {
+					Be?.(e);
+					let t = e.target.closest("[data-slider-thumb]");
+					t && B.current?.contains(t) && st(e, Number(t.dataset.sliderThumb));
+				},
+				children: [
+					(Z || Me) && /* @__PURE__ */ p("div", {
+						css: le,
+						children: [Z && /* @__PURE__ */ f("span", {
+							...D?.label,
+							id: `${I}-label`,
+							css: [ue, D?.label?.css],
+							children: d
+						}), Me && /* @__PURE__ */ f("span", {
+							...D?.readout,
+							"aria-hidden": "true",
+							css: [de, D?.readout?.css],
+							children: Qe
+						})]
+					}),
+					Q && /* @__PURE__ */ f("div", {
+						...D?.description,
+						id: `${I}-description`,
+						css: [fe, D?.description?.css],
+						children: _
+					}),
+					$ && /* @__PURE__ */ f("div", {
+						...D?.error,
+						id: `${I}-error`,
+						role: "alert",
+						css: [pe, D?.error?.css],
+						children: De
+					}),
+					/* @__PURE__ */ p("div", {
+						css: me,
+						children: [
+							g(Ne) && /* @__PURE__ */ f("div", {
+								...D?.start,
+								children: Ne
+							}),
+							/* @__PURE__ */ p("div", {
+								...D?.control,
+								ref: (e) => {
+									B.current = e;
+									let t = D?.control?.ref;
+									if (typeof t == "function") return t(e);
+									t && (t.current = e);
+								},
+								css: [
+									he,
+									ge[Fe],
+									D?.control?.css
+								],
+								"data-ui": "slider-control",
+								"data-disabled": v || void 0,
+								onPointerDown: (e) => {
+									D?.control?.onPointerDown?.(e), ot(e);
+								},
+								onPointerMove: (e) => {
+									D?.control?.onPointerMove?.(e), e.defaultPrevented || at(e);
+								},
+								onPointerUp: (e) => {
+									D?.control?.onPointerUp?.(e), V.current?.pointerId === e.pointerId && q(!0);
+								},
+								onPointerCancel: (e) => {
+									D?.control?.onPointerCancel?.(e), V.current?.pointerId === e.pointerId && q(!1);
+								},
+								onLostPointerCapture: (e) => {
+									D?.control?.onLostPointerCapture?.(e), V.current?.pointerId === e.pointerId && q(!1);
+								},
+								children: [
+									/* @__PURE__ */ f("div", {
+										...D?.track,
+										"data-ui": "slider-track",
+										"aria-hidden": "true",
+										css: [_e, D?.track?.css],
+										children: /* @__PURE__ */ f("div", {
+											...D?.fill,
+											"data-ui": "slider-fill",
+											css: [ve, D?.fill?.css],
+											style: {
+												...D?.fill?.style,
+												insetInlineStart: `${ct}%`,
+												inlineSize: `${lt - ct}%`
+											}
+										})
+									}),
+									Y.map((e, t) => /* @__PURE__ */ f("span", {
+										"aria-hidden": "true",
+										css: Se,
+										style: { insetInlineStart: `${X(e.value)}%` }
+									}, t)),
+									F.map((e, t) => {
+										let n = Ee(D?.thumb, t), [r, i] = W(t);
+										return /* @__PURE__ */ ne("div", {
+											...n,
+											key: t,
+											id: `${I}-thumb-${t}`,
+											"data-slider-thumb": t,
+											"data-dragging": H === t || void 0,
+											role: "slider",
+											tabIndex: v ? -1 : 0,
+											"aria-orientation": "horizontal",
+											"aria-disabled": v,
+											"aria-invalid": $ || Oe ? !0 : n?.["aria-invalid"] ?? We,
+											"aria-valuemin": r,
+											"aria-valuemax": i,
+											"aria-valuenow": e,
+											"aria-valuetext": R(e),
+											"aria-label": n?.["aria-label"] ?? (O ? w?.[t] : Ve),
+											"aria-labelledby": Te(He, n?.["aria-labelledby"], O ? `${I}-name-${t}` : Z && `${I}-label`),
+											"aria-describedby": Te(Ue, n?.["aria-describedby"], Q && `${I}-description`, $ && `${I}-error`),
+											css: [ye, n?.css],
+											style: {
+												...n?.style,
+												insetInlineStart: `${X(e)}%`
+											},
+											onFocus: (e) => {
+												$e.current = t, n?.onFocus?.(e);
+											},
+											onKeyDown: (e) => {
+												n?.onKeyDown?.(e);
+											}
+										}, /* @__PURE__ */ f(ie.span, {
+											"aria-hidden": "true",
+											css: be,
+											animate: {
+												scale: z ? 1 : H === t ? .95 : 1,
+												x: z ? 0 : H === t ? et : 0
+											},
+											transition: z ? { duration: 0 } : oe
+										}), O && /* @__PURE__ */ f("span", {
+											id: `${I}-name-${t}`,
+											css: o,
+											children: w?.[t]
+										}), /* @__PURE__ */ f("span", {
+											...D?.bubble,
+											"data-ui": "slider-bubble",
+											"aria-hidden": "true",
+											css: [xe, D?.bubble?.css],
+											style: {
+												...D?.bubble?.style,
+												...X(e) <= 50 ? { insetInlineStart: 0 } : { insetInlineEnd: 0 }
+											},
+											children: R(e)
+										}));
+									})
+								]
+							}),
+							g(Pe) && /* @__PURE__ */ f("div", {
+								...D?.end,
+								children: Pe
+							})
+						]
+					}),
+					Y.some((e) => g(e.label)) && /* @__PURE__ */ f("div", {
+						css: Ce,
+						children: Y.map((e, t) => {
+							if (!g(e.label)) return null;
+							let n = Ee(D?.mark, t);
+							return /* @__PURE__ */ ne("button", {
+								...n,
+								key: t,
+								type: "button",
+								disabled: v,
+								css: [we, n?.css],
+								onClick: (t) => {
+									if (n?.onClick?.(t), v || t.defaultPrevented) return;
+									let r = G(it(e.value), e.value);
+									h(P, r) || (K(r), N(r));
+								}
+							}, e.label);
+						})
+					}),
+					E !== void 0 && F.map((e, t) => /* @__PURE__ */ f("input", {
+						type: "hidden",
+						disabled: v,
+						name: typeof E == "string" ? E : E[t],
+						value: e
+					}, t))
+				]
+			})
+		})
+	});
+}
+_.displayName = "Slider";
+//#endregion
+export { _ as t };

package/dist/slider.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as Slider } from "./slider-t0B5cecO.js";