@spear-ai/spectral 1.9.0 → 1.10.0

package/dist/Slider-BzzZT3Zm.js

@@ -0,0 +1,490 @@
+import "./styles/main.css";
+import { a as e, d as t, l as n, r, t as i } from "./dist-7HRQ5IKN.js";
+import { n as a, t as o } from "./dist-CGzgmYB9.js";
+import { t as s } from "./twUtils-VNWgstKL.js";
+import { Input as c } from "./primitives/input.js";
+import { t as l } from "./dist-D8Wb_MX9.js";
+import { t as u } from "./dist-BK1K0g9W.js";
+import { t as d } from "./dist-s1uWaZYZ.js";
+import * as f from "react";
+import { useCallback as p, useEffect as m, useMemo as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region node_modules/.pnpm/@radix-ui+react-slider@1.3.6_@types+react-dom@19.2.3_@types+react@19.2.14__@types+react_75ed1eb593bd235383d6c38bc5087147/node_modules/@radix-ui/react-slider/dist/index.mjs
+var y = ["PageUp", "PageDown"], b = [
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight"
+], x = {
+	"from-left": [
+		"Home",
+		"PageDown",
+		"ArrowDown",
+		"ArrowLeft"
+	],
+	"from-right": [
+		"Home",
+		"PageDown",
+		"ArrowDown",
+		"ArrowRight"
+	],
+	"from-bottom": [
+		"Home",
+		"PageDown",
+		"ArrowDown",
+		"ArrowLeft"
+	],
+	"from-top": [
+		"Home",
+		"PageDown",
+		"ArrowUp",
+		"ArrowLeft"
+	]
+}, S = "Slider", [C, w, T] = a(S), [E, D] = t(S, [T]), [O, k] = E(S), A = f.forwardRef((t, n) => {
+	let { name: i, min: a = 0, max: o = 100, step: s = 1, orientation: c = "horizontal", disabled: u = !1, minStepsBetweenThumbs: d = 0, defaultValue: p = [a], value: m, onValueChange: h = () => {}, onValueCommit: g = () => {}, inverted: v = !1, form: x, ...S } = t, w = f.useRef(/* @__PURE__ */ new Set()), T = f.useRef(0), E = c === "horizontal" ? N : P, [D = [], k] = r({
+		prop: m,
+		defaultProp: p,
+		onChange: (e) => {
+			[...w.current][T.current]?.focus(), h(e);
+		}
+	}), A = f.useRef(D);
+	function j(e) {
+		I(e, q(D, e));
+	}
+	function M(e) {
+		I(e, T.current);
+	}
+	function F() {
+		let e = A.current[T.current];
+		D[T.current] !== e && g(D);
+	}
+	function I(e, t, { commit: n } = { commit: !1 }) {
+		let r = Q(s), i = l($(Math.round((e - a) / s) * s + a, r), [a, o]);
+		k((e = []) => {
+			let r = ee(e, i, t);
+			if (X(r, d * s)) {
+				T.current = r.indexOf(i);
+				let t = String(r) !== String(e);
+				return t && n && g(r), t ? r : e;
+			} else return e;
+		});
+	}
+	return /* @__PURE__ */ _(O, {
+		scope: t.__scopeSlider,
+		name: i,
+		disabled: u,
+		min: a,
+		max: o,
+		valueIndexToChangeRef: T,
+		thumbs: w.current,
+		values: D,
+		orientation: c,
+		form: x,
+		children: /* @__PURE__ */ _(C.Provider, {
+			scope: t.__scopeSlider,
+			children: /* @__PURE__ */ _(C.Slot, {
+				scope: t.__scopeSlider,
+				children: /* @__PURE__ */ _(E, {
+					"aria-disabled": u,
+					"data-disabled": u ? "" : void 0,
+					...S,
+					ref: n,
+					onPointerDown: e(S.onPointerDown, () => {
+						u || (A.current = D);
+					}),
+					min: a,
+					max: o,
+					inverted: v,
+					onSlideStart: u ? void 0 : j,
+					onSlideMove: u ? void 0 : M,
+					onSlideEnd: u ? void 0 : F,
+					onHomeKeyDown: () => !u && I(a, 0, { commit: !0 }),
+					onEndKeyDown: () => !u && I(o, D.length - 1, { commit: !0 }),
+					onStepKeyDown: ({ event: e, direction: t }) => {
+						if (!u) {
+							let n = y.includes(e.key) || e.shiftKey && b.includes(e.key) ? 10 : 1, r = T.current, i = D[r];
+							I(i + s * n * t, r, { commit: !0 });
+						}
+					}
+				})
+			})
+		})
+	});
+});
+A.displayName = S;
+var [j, M] = E(S, {
+	startEdge: "left",
+	endEdge: "right",
+	size: "width",
+	direction: 1
+}), N = f.forwardRef((e, t) => {
+	let { min: r, max: i, dir: a, inverted: s, onSlideStart: c, onSlideMove: l, onSlideEnd: u, onStepKeyDown: d, ...p } = e, [m, h] = f.useState(null), g = n(t, (e) => h(e)), v = f.useRef(void 0), y = o(a), b = y === "ltr", S = b && !s || !b && s;
+	function C(e) {
+		let t = v.current || m.getBoundingClientRect(), n = Z([0, t.width], S ? [r, i] : [i, r]);
+		return v.current = t, n(e - t.left);
+	}
+	return /* @__PURE__ */ _(j, {
+		scope: e.__scopeSlider,
+		startEdge: S ? "left" : "right",
+		endEdge: S ? "right" : "left",
+		direction: S ? 1 : -1,
+		size: "width",
+		children: /* @__PURE__ */ _(F, {
+			dir: y,
+			"data-orientation": "horizontal",
+			...p,
+			ref: g,
+			style: {
+				...p.style,
+				"--radix-slider-thumb-transform": "translateX(-50%)"
+			},
+			onSlideStart: (e) => {
+				let t = C(e.clientX);
+				c?.(t);
+			},
+			onSlideMove: (e) => {
+				let t = C(e.clientX);
+				l?.(t);
+			},
+			onSlideEnd: () => {
+				v.current = void 0, u?.();
+			},
+			onStepKeyDown: (e) => {
+				let t = x[S ? "from-left" : "from-right"].includes(e.key);
+				d?.({
+					event: e,
+					direction: t ? -1 : 1
+				});
+			}
+		})
+	});
+}), P = f.forwardRef((e, t) => {
+	let { min: r, max: i, inverted: a, onSlideStart: o, onSlideMove: s, onSlideEnd: c, onStepKeyDown: l, ...u } = e, d = f.useRef(null), p = n(t, d), m = f.useRef(void 0), h = !a;
+	function g(e) {
+		let t = m.current || d.current.getBoundingClientRect(), n = Z([0, t.height], h ? [i, r] : [r, i]);
+		return m.current = t, n(e - t.top);
+	}
+	return /* @__PURE__ */ _(j, {
+		scope: e.__scopeSlider,
+		startEdge: h ? "bottom" : "top",
+		endEdge: h ? "top" : "bottom",
+		size: "height",
+		direction: h ? 1 : -1,
+		children: /* @__PURE__ */ _(F, {
+			"data-orientation": "vertical",
+			...u,
+			ref: p,
+			style: {
+				...u.style,
+				"--radix-slider-thumb-transform": "translateY(50%)"
+			},
+			onSlideStart: (e) => {
+				let t = g(e.clientY);
+				o?.(t);
+			},
+			onSlideMove: (e) => {
+				let t = g(e.clientY);
+				s?.(t);
+			},
+			onSlideEnd: () => {
+				m.current = void 0, c?.();
+			},
+			onStepKeyDown: (e) => {
+				let t = x[h ? "from-bottom" : "from-top"].includes(e.key);
+				l?.({
+					event: e,
+					direction: t ? -1 : 1
+				});
+			}
+		})
+	});
+}), F = f.forwardRef((t, n) => {
+	let { __scopeSlider: r, onSlideStart: a, onSlideMove: o, onSlideEnd: s, onHomeKeyDown: c, onEndKeyDown: l, onStepKeyDown: u, ...d } = t, f = k(S, r);
+	return /* @__PURE__ */ _(i.span, {
+		...d,
+		ref: n,
+		onKeyDown: e(t.onKeyDown, (e) => {
+			e.key === "Home" ? (c(e), e.preventDefault()) : e.key === "End" ? (l(e), e.preventDefault()) : y.concat(b).includes(e.key) && (u(e), e.preventDefault());
+		}),
+		onPointerDown: e(t.onPointerDown, (e) => {
+			let t = e.target;
+			t.setPointerCapture(e.pointerId), e.preventDefault(), f.thumbs.has(t) ? t.focus() : a(e);
+		}),
+		onPointerMove: e(t.onPointerMove, (e) => {
+			e.target.hasPointerCapture(e.pointerId) && o(e);
+		}),
+		onPointerUp: e(t.onPointerUp, (e) => {
+			let t = e.target;
+			t.hasPointerCapture(e.pointerId) && (t.releasePointerCapture(e.pointerId), s(e));
+		})
+	});
+}), I = "SliderTrack", L = f.forwardRef((e, t) => {
+	let { __scopeSlider: n, ...r } = e, a = k(I, n);
+	return /* @__PURE__ */ _(i.span, {
+		"data-disabled": a.disabled ? "" : void 0,
+		"data-orientation": a.orientation,
+		...r,
+		ref: t
+	});
+});
+L.displayName = I;
+var R = "SliderRange", z = f.forwardRef((e, t) => {
+	let { __scopeSlider: r, ...a } = e, o = k(R, r), s = M(R, r), c = n(t, f.useRef(null)), l = o.values.length, u = o.values.map((e) => G(e, o.min, o.max)), d = l > 1 ? Math.min(...u) : 0, p = 100 - Math.max(...u);
+	return /* @__PURE__ */ _(i.span, {
+		"data-orientation": o.orientation,
+		"data-disabled": o.disabled ? "" : void 0,
+		...a,
+		ref: c,
+		style: {
+			...e.style,
+			[s.startEdge]: d + "%",
+			[s.endEdge]: p + "%"
+		}
+	});
+});
+z.displayName = R;
+var B = "SliderThumb", V = f.forwardRef((e, t) => {
+	let r = w(e.__scopeSlider), [i, a] = f.useState(null), o = n(t, (e) => a(e)), s = f.useMemo(() => i ? r().findIndex((e) => e.ref.current === i) : -1, [r, i]);
+	return /* @__PURE__ */ _(H, {
+		...e,
+		ref: o,
+		index: s
+	});
+}), H = f.forwardRef((t, r) => {
+	let { __scopeSlider: a, index: o, name: s, ...c } = t, l = k(B, a), d = M(B, a), [p, m] = f.useState(null), h = n(r, (e) => m(e)), g = p ? l.form || !!p.closest("form") : !0, y = u(p), b = l.values[o], x = b === void 0 ? 0 : G(b, l.min, l.max), S = K(o, l.values.length), w = y?.[d.size], T = w ? J(w, x, d.direction) : 0;
+	return f.useEffect(() => {
+		if (p) return l.thumbs.add(p), () => {
+			l.thumbs.delete(p);
+		};
+	}, [p, l.thumbs]), /* @__PURE__ */ v("span", {
+		style: {
+			transform: "var(--radix-slider-thumb-transform)",
+			position: "absolute",
+			[d.startEdge]: `calc(${x}% + ${T}px)`
+		},
+		children: [/* @__PURE__ */ _(C.ItemSlot, {
+			scope: t.__scopeSlider,
+			children: /* @__PURE__ */ _(i.span, {
+				role: "slider",
+				"aria-label": t["aria-label"] || S,
+				"aria-valuemin": l.min,
+				"aria-valuenow": b,
+				"aria-valuemax": l.max,
+				"aria-orientation": l.orientation,
+				"data-orientation": l.orientation,
+				"data-disabled": l.disabled ? "" : void 0,
+				tabIndex: l.disabled ? void 0 : 0,
+				...c,
+				ref: h,
+				style: b === void 0 ? { display: "none" } : t.style,
+				onFocus: e(t.onFocus, () => {
+					l.valueIndexToChangeRef.current = o;
+				})
+			})
+		}), g && /* @__PURE__ */ _(W, {
+			name: s ?? (l.name ? l.name + (l.values.length > 1 ? "[]" : "") : void 0),
+			form: l.form,
+			value: b
+		}, o)]
+	});
+});
+V.displayName = B;
+var U = "RadioBubbleInput", W = f.forwardRef(({ __scopeSlider: e, value: t, ...r }, a) => {
+	let o = f.useRef(null), s = n(o, a), c = d(t);
+	return f.useEffect(() => {
+		let e = o.current;
+		if (!e) return;
+		let n = window.HTMLInputElement.prototype, r = Object.getOwnPropertyDescriptor(n, "value").set;
+		if (c !== t && r) {
+			let n = new Event("input", { bubbles: !0 });
+			r.call(e, t), e.dispatchEvent(n);
+		}
+	}, [c, t]), /* @__PURE__ */ _(i.input, {
+		style: { display: "none" },
+		...r,
+		ref: s,
+		defaultValue: t
+	});
+});
+W.displayName = U;
+function ee(e = [], t, n) {
+	let r = [...e];
+	return r[n] = t, r.sort((e, t) => e - t);
+}
+function G(e, t, n) {
+	return l(100 / (n - t) * (e - t), [0, 100]);
+}
+function K(e, t) {
+	if (t > 2) return `Value ${e + 1} of ${t}`;
+	if (t === 2) return ["Minimum", "Maximum"][e];
+}
+function q(e, t) {
+	if (e.length === 1) return 0;
+	let n = e.map((e) => Math.abs(e - t)), r = Math.min(...n);
+	return n.indexOf(r);
+}
+function J(e, t, n) {
+	let r = e / 2;
+	return (r - Z([0, 50], [0, r])(t) * n) * n;
+}
+function Y(e) {
+	return e.slice(0, -1).map((t, n) => e[n + 1] - t);
+}
+function X(e, t) {
+	if (t > 0) {
+		let n = Y(e);
+		return Math.min(...n) >= t;
+	}
+	return !0;
+}
+function Z(e, t) {
+	return (n) => {
+		if (e[0] === e[1] || t[0] === t[1]) return t[0];
+		let r = (t[1] - t[0]) / (e[1] - e[0]);
+		return t[0] + r * (n - e[0]);
+	};
+}
+function Q(e) {
+	return (String(e).split(".")[1] || "").length;
+}
+function $(e, t) {
+	let n = 10 ** t;
+	return Math.round(e * n) / n;
+}
+var te = A, ne = L, re = z, ie = V, ae = ({ accessibleName: e, className: t, defaultValue: n, disabled: r, inputPosition: i, label: a, labelPosition: o, max: l = 100, min: u = 0, minStepsBetweenThumbs: d = 1, name: f, onValueChange: y, onValueCommit: b, orientation: x = "horizontal", step: S = 1, value: C }) => {
+	let w = C !== void 0, [T, E] = g(h(() => Array.isArray(C) ? C : Array.isArray(n) ? n : [u], [])), D = w ? C : T, [O, k] = g(() => D.map(String));
+	m(() => {
+		k(D.map(String));
+	}, [D]);
+	let A = p((e) => {
+		w || E(e), y?.(e);
+	}, [w, y]), j = p((e, t) => {
+		let n = [...O];
+		n[e] = t.target.value, k(n);
+	}, [O]), M = p((e) => {
+		let t = O[e];
+		if (t === "") {
+			k(D.map(String));
+			return;
+		}
+		let n = parseFloat(t);
+		if (isNaN(n)) {
+			k(D.map(String));
+			return;
+		}
+		n = Math.max(u, Math.min(l, n));
+		let r = [...D];
+		if (e === 0 && D.length > 1) {
+			let e = D[1] - d * S;
+			n = Math.min(n, e);
+		} else if (e === 1) {
+			let e = D[0] + d * S;
+			n = Math.max(n, e);
+		}
+		r[e] = n, A(r), b?.(r);
+	}, [
+		O,
+		D,
+		u,
+		l,
+		S,
+		d,
+		A,
+		b
+	]), N = p((e, t) => {
+		t.key === "Enter" && (M(e), t.currentTarget.blur());
+	}, [M]), P = x === "vertical", F = o === "both", I = a && (o === "end" || o === "both"), L = i === "start" || i === "both", R = i === "both" && D.length > 1, z = s("text-slider-label text-sm shrink-0 tabular-nums", P ? "text-center" : ""), B = "w-10 h-fit px-1 shrink-0 text-center text-sm tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none";
+	return /* @__PURE__ */ v("div", {
+		className: s("gap-3 flex items-center", P ? "flex-col" : "w-full", t),
+		"data-testid": "spectral-slider-container",
+		children: [
+			F && /* @__PURE__ */ _("span", {
+				className: z,
+				"data-slot": "slider-label",
+				"data-testid": "spectral-slider-label-start",
+				children: a?.({
+					values: D,
+					min: u,
+					max: l,
+					position: "start"
+				})
+			}),
+			L && /* @__PURE__ */ _(c, {
+				"aria-label": e ? `${e} start value` : "Slider start value",
+				className: B,
+				"data-slot": "slider-input",
+				"data-testid": "spectral-slider-input-start",
+				disabled: r,
+				max: D.length > 1 ? D[1] - d * S : l,
+				min: u,
+				onBlur: () => M(0),
+				onChange: (e) => j(0, e),
+				onKeyDown: (e) => N(0, e),
+				step: S,
+				type: "number",
+				value: O[0] ?? ""
+			}),
+			/* @__PURE__ */ v(te, {
+				"aria-label": e,
+				"aria-valuemax": l,
+				"aria-valuemin": u,
+				"aria-valuenow": D[0],
+				className: "data-[orientation=vertical]:min-h-44 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+				"data-slot": "slider",
+				"data-testid": "spectral-slider",
+				disabled: r,
+				max: l,
+				min: u,
+				minStepsBetweenThumbs: d,
+				name: f,
+				onValueChange: A,
+				onValueCommit: b,
+				orientation: x,
+				step: S,
+				value: D,
+				children: [/* @__PURE__ */ _(ne, {
+					className: "data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 relative grow overflow-hidden rounded-full bg-slider-track data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
+					"data-slot": "slider-track",
+					"data-testid": "spectral-slider-track",
+					children: /* @__PURE__ */ _(re, {
+						className: "absolute bg-slider-range data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+						"data-slot": "slider-range",
+						"data-testid": "spectral-slider-range"
+					})
+				}), Array.from({ length: D.length }, (e, t) => /* @__PURE__ */ _(ie, {
+					className: "size-5 shadow-sm block shrink-0 rounded-full border border-slider-thumb-border bg-slider-thumb-bg ring-slider-thumb-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+					"data-slot": "slider-thumb",
+					"data-testid": "spectral-slider-thumb"
+				}, t))]
+			}),
+			R && /* @__PURE__ */ _(c, {
+				"aria-label": e ? `${e} end value` : "Slider end value",
+				className: B,
+				"data-slot": "slider-input",
+				"data-testid": "spectral-slider-input-end",
+				disabled: r,
+				max: l,
+				min: D[0] + d * S,
+				onBlur: () => M(1),
+				onChange: (e) => j(1, e),
+				onKeyDown: (e) => N(1, e),
+				step: S,
+				type: "number",
+				value: O[1] ?? ""
+			}),
+			I && /* @__PURE__ */ _("span", {
+				className: z,
+				"data-slot": "slider-label",
+				"data-testid": "spectral-slider-label-end",
+				children: a({
+					values: D,
+					min: u,
+					max: l,
+					position: "end"
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { ae as t };