@spear-ai/spectral 1.9.0 → 1.10.0

package/dist/RadioGroup-w_q6RGEK.js

@@ -0,0 +1,447 @@
+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 "./dist-Bft31cJh.js";
+import { t as c } from "./dist-Dtvmk11N.js";
+import { t as l } from "./twUtils-VNWgstKL.js";
+import { Label as u } from "./Label.js";
+import { t as d } from "./dist-ClmepHp4.js";
+import { t as f } from "./dist-BK1K0g9W.js";
+import { t as p } from "./dist-s1uWaZYZ.js";
+import { a as m, i as h, o as g, t as _, u as v } from "./proxy-Dn10Pl_g.js";
+import { t as y } from "./AnimatePresence-D-9jXfgI.js";
+import * as b from "react";
+import { createContext as ee, memo as x, useContext as S, useId as C, useMemo as w, useState as T } from "react";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
+//#region node_modules/.pnpm/@radix-ui+react-roving-focus@1.1.11_@types+react-dom@19.2.3_@types+react@19.2.14__@type_201cfa283d5b26fb84e6cfb74449149c/node_modules/@radix-ui/react-roving-focus/dist/index.mjs
+var O = "rovingFocusGroup.onEntryFocus", te = {
+	bubbles: !1,
+	cancelable: !0
+}, k = "RovingFocusGroup", [A, j, M] = a(k), [N, P] = t(k, [M]), [ne, re] = N(k), ie = b.forwardRef((e, t) => /* @__PURE__ */ E(A.Provider, {
+	scope: e.__scopeRovingFocusGroup,
+	children: /* @__PURE__ */ E(A.Slot, {
+		scope: e.__scopeRovingFocusGroup,
+		children: /* @__PURE__ */ E(ae, {
+			...e,
+			ref: t
+		})
+	})
+}));
+ie.displayName = k;
+var ae = b.forwardRef((t, a) => {
+	let { __scopeRovingFocusGroup: s, orientation: c, loop: l = !1, dir: u, currentTabStopId: f, defaultCurrentTabStopId: p, onCurrentTabStopIdChange: m, onEntryFocus: h, preventScrollOnEntryFocus: g = !1, ..._ } = t, v = b.useRef(null), y = n(a, v), ee = o(u), [x, S] = r({
+		prop: f,
+		defaultProp: p ?? null,
+		onChange: m,
+		caller: k
+	}), [C, w] = b.useState(!1), T = d(h), D = j(s), A = b.useRef(!1), [M, N] = b.useState(0);
+	return b.useEffect(() => {
+		let e = v.current;
+		if (e) return e.addEventListener(O, T), () => e.removeEventListener(O, T);
+	}, [T]), /* @__PURE__ */ E(ne, {
+		scope: s,
+		orientation: c,
+		dir: ee,
+		loop: l,
+		currentTabStopId: x,
+		onItemFocus: b.useCallback((e) => S(e), [S]),
+		onItemShiftTab: b.useCallback(() => w(!0), []),
+		onFocusableItemAdd: b.useCallback(() => N((e) => e + 1), []),
+		onFocusableItemRemove: b.useCallback(() => N((e) => e - 1), []),
+		children: /* @__PURE__ */ E(i.div, {
+			tabIndex: C || M === 0 ? -1 : 0,
+			"data-orientation": c,
+			..._,
+			ref: y,
+			style: {
+				outline: "none",
+				...t.style
+			},
+			onMouseDown: e(t.onMouseDown, () => {
+				A.current = !0;
+			}),
+			onFocus: e(t.onFocus, (e) => {
+				let t = !A.current;
+				if (e.target === e.currentTarget && t && !C) {
+					let t = new CustomEvent(O, te);
+					if (e.currentTarget.dispatchEvent(t), !t.defaultPrevented) {
+						let e = D().filter((e) => e.focusable);
+						L([
+							e.find((e) => e.active),
+							e.find((e) => e.id === x),
+							...e
+						].filter(Boolean).map((e) => e.ref.current), g);
+					}
+				}
+				A.current = !1;
+			}),
+			onBlur: e(t.onBlur, () => w(!1))
+		})
+	});
+}), F = "RovingFocusGroupItem", I = b.forwardRef((t, n) => {
+	let { __scopeRovingFocusGroup: r, focusable: a = !0, active: o = !1, tabStopId: s, children: l, ...u } = t, d = c(), f = s || d, p = re(F, r), m = p.currentTabStopId === f, h = j(r), { onFocusableItemAdd: g, onFocusableItemRemove: _, currentTabStopId: v } = p;
+	return b.useEffect(() => {
+		if (a) return g(), () => _();
+	}, [
+		a,
+		g,
+		_
+	]), /* @__PURE__ */ E(A.ItemSlot, {
+		scope: r,
+		id: f,
+		focusable: a,
+		active: o,
+		children: /* @__PURE__ */ E(i.span, {
+			tabIndex: m ? 0 : -1,
+			"data-orientation": p.orientation,
+			...u,
+			ref: n,
+			onMouseDown: e(t.onMouseDown, (e) => {
+				a ? p.onItemFocus(f) : e.preventDefault();
+			}),
+			onFocus: e(t.onFocus, () => p.onItemFocus(f)),
+			onKeyDown: e(t.onKeyDown, (e) => {
+				if (e.key === "Tab" && e.shiftKey) {
+					p.onItemShiftTab();
+					return;
+				}
+				if (e.target !== e.currentTarget) return;
+				let t = ce(e, p.orientation, p.dir);
+				if (t !== void 0) {
+					if (e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) return;
+					e.preventDefault();
+					let n = h().filter((e) => e.focusable).map((e) => e.ref.current);
+					if (t === "last") n.reverse();
+					else if (t === "prev" || t === "next") {
+						t === "prev" && n.reverse();
+						let r = n.indexOf(e.currentTarget);
+						n = p.loop ? le(n, r + 1) : n.slice(r + 1);
+					}
+					setTimeout(() => L(n));
+				}
+			}),
+			children: typeof l == "function" ? l({
+				isCurrentTabStop: m,
+				hasTabStop: v != null
+			}) : l
+		})
+	});
+});
+I.displayName = F;
+var oe = {
+	ArrowLeft: "prev",
+	ArrowUp: "prev",
+	ArrowRight: "next",
+	ArrowDown: "next",
+	PageUp: "first",
+	Home: "first",
+	PageDown: "last",
+	End: "last"
+};
+function se(e, t) {
+	return t === "rtl" ? e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e : e;
+}
+function ce(e, t, n) {
+	let r = se(e.key, n);
+	if (!(t === "vertical" && ["ArrowLeft", "ArrowRight"].includes(r)) && !(t === "horizontal" && ["ArrowUp", "ArrowDown"].includes(r))) return oe[r];
+}
+function L(e, t = !1) {
+	let n = document.activeElement;
+	for (let r of e) if (r === n || (r.focus({ preventScroll: t }), document.activeElement !== n)) return;
+}
+function le(e, t) {
+	return e.map((n, r) => e[(t + r) % e.length]);
+}
+var ue = ie, de = I, R = "Radio", [fe, z] = t(R), [pe, me] = fe(R), B = b.forwardRef((t, r) => {
+	let { __scopeRadio: a, name: o, checked: s = !1, required: c, disabled: l, value: u = "on", onCheck: d, form: f, ...p } = t, [m, h] = b.useState(null), g = n(r, (e) => h(e)), _ = b.useRef(!1), v = m ? f || !!m.closest("form") : !0;
+	return /* @__PURE__ */ D(pe, {
+		scope: a,
+		checked: s,
+		disabled: l,
+		children: [/* @__PURE__ */ E(i.button, {
+			type: "button",
+			role: "radio",
+			"aria-checked": s,
+			"data-state": W(s),
+			"data-disabled": l ? "" : void 0,
+			disabled: l,
+			value: u,
+			...p,
+			ref: g,
+			onClick: e(t.onClick, (e) => {
+				s || d?.(), v && (_.current = e.isPropagationStopped(), _.current || e.stopPropagation());
+			})
+		}), v && /* @__PURE__ */ E(U, {
+			control: m,
+			bubbles: !_.current,
+			name: o,
+			value: u,
+			checked: s,
+			required: c,
+			disabled: l,
+			form: f,
+			style: { transform: "translateX(-100%)" }
+		})]
+	});
+});
+B.displayName = R;
+var V = "RadioIndicator", H = b.forwardRef((e, t) => {
+	let { __scopeRadio: n, forceMount: r, ...a } = e, o = me(V, n);
+	return /* @__PURE__ */ E(s, {
+		present: r || o.checked,
+		children: /* @__PURE__ */ E(i.span, {
+			"data-state": W(o.checked),
+			"data-disabled": o.disabled ? "" : void 0,
+			...a,
+			ref: t
+		})
+	});
+});
+H.displayName = V;
+var he = "RadioBubbleInput", U = b.forwardRef(({ __scopeRadio: e, control: t, checked: r, bubbles: a = !0, ...o }, s) => {
+	let c = b.useRef(null), l = n(c, s), u = p(r), d = f(t);
+	return b.useEffect(() => {
+		let e = c.current;
+		if (!e) return;
+		let t = window.HTMLInputElement.prototype, n = Object.getOwnPropertyDescriptor(t, "checked").set;
+		if (u !== r && n) {
+			let t = new Event("click", { bubbles: a });
+			n.call(e, r), e.dispatchEvent(t);
+		}
+	}, [
+		u,
+		r,
+		a
+	]), /* @__PURE__ */ E(i.input, {
+		type: "radio",
+		"aria-hidden": !0,
+		defaultChecked: r,
+		...o,
+		tabIndex: -1,
+		ref: l,
+		style: {
+			...o.style,
+			...d,
+			position: "absolute",
+			pointerEvents: "none",
+			opacity: 0,
+			margin: 0
+		}
+	});
+});
+U.displayName = he;
+function W(e) {
+	return e ? "checked" : "unchecked";
+}
+var ge = [
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight"
+], G = "RadioGroup", [_e, ve] = t(G, [P, z]), K = P(), q = z(), [ye, be] = _e(G), J = b.forwardRef((e, t) => {
+	let { __scopeRadioGroup: n, name: a, defaultValue: s, value: c, required: l = !1, disabled: u = !1, orientation: d, dir: f, loop: p = !0, onValueChange: m, ...h } = e, g = K(n), _ = o(f), [v, y] = r({
+		prop: c,
+		defaultProp: s ?? null,
+		onChange: m,
+		caller: G
+	});
+	return /* @__PURE__ */ E(ye, {
+		scope: n,
+		name: a,
+		required: l,
+		disabled: u,
+		value: v,
+		onValueChange: y,
+		children: /* @__PURE__ */ E(ue, {
+			asChild: !0,
+			...g,
+			orientation: d,
+			dir: _,
+			loop: p,
+			children: /* @__PURE__ */ E(i.div, {
+				role: "radiogroup",
+				"aria-required": l,
+				"aria-orientation": d,
+				"data-disabled": u ? "" : void 0,
+				dir: _,
+				...h,
+				ref: t
+			})
+		})
+	});
+});
+J.displayName = G;
+var Y = "RadioGroupItem", X = b.forwardRef((t, r) => {
+	let { __scopeRadioGroup: i, disabled: a, ...o } = t, s = be(Y, i), c = s.disabled || a, l = K(i), u = q(i), d = b.useRef(null), f = n(r, d), p = s.value === o.value, m = b.useRef(!1);
+	return b.useEffect(() => {
+		let e = (e) => {
+			ge.includes(e.key) && (m.current = !0);
+		}, t = () => m.current = !1;
+		return document.addEventListener("keydown", e), document.addEventListener("keyup", t), () => {
+			document.removeEventListener("keydown", e), document.removeEventListener("keyup", t);
+		};
+	}, []), /* @__PURE__ */ E(de, {
+		asChild: !0,
+		...l,
+		focusable: !c,
+		active: p,
+		children: /* @__PURE__ */ E(B, {
+			disabled: c,
+			required: s.required,
+			checked: p,
+			...u,
+			...o,
+			name: s.name,
+			ref: f,
+			onCheck: () => s.onValueChange(o.value),
+			onKeyDown: e((e) => {
+				e.key === "Enter" && e.preventDefault();
+			}),
+			onFocus: e(o.onFocus, () => {
+				m.current && d.current?.click();
+			})
+		})
+	});
+});
+X.displayName = Y;
+var xe = "RadioGroupIndicator", Z = b.forwardRef((e, t) => {
+	let { __scopeRadioGroup: n, ...r } = e;
+	return /* @__PURE__ */ E(H, {
+		...q(n),
+		...r,
+		ref: t
+	});
+});
+Z.displayName = xe;
+var Se = J, Q = X, Ce = Z;
+//#endregion
+//#region node_modules/.pnpm/framer-motion@12.38.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs
+function we() {
+	!m.current && h();
+	let [e] = T(g.current);
+	return process.env.NODE_ENV !== "production" && v(e !== !0, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled"), e;
+}
+//#endregion
+//#region src/components/RadioGroup/RadioGroup.tsx
+var Te = ee({
+	disabledValues: [],
+	groupDisabled: !1,
+	orientation: "vertical",
+	variant: "default"
+}), $ = "pointer-events-none opacity-60", Ee = (e) => {
+	let t = "selected" in e, { className: n, disabled: r, itemClassName: i, onValueChange: a, orientation: o = "vertical", ref: s, selected: c, variant: u = "default", ...d } = e, f = t ? c ?? "" : c, p = w(() => ({
+		disabledValues: Array.isArray(r) ? r : [],
+		groupDisabled: typeof r == "boolean" ? r : !1,
+		itemClassName: i,
+		orientation: o,
+		selected: f,
+		variant: u
+	}), [
+		o,
+		u,
+		r,
+		i,
+		f
+	]);
+	return /* @__PURE__ */ E(Te.Provider, {
+		value: p,
+		children: /* @__PURE__ */ E(Se, {
+			className: l("flex w-full text-text-primary", o === "vertical" ? "gap-4 flex-col" : "gap-5 flex-row", u === "unstyled" && "gap-2.5 w-fit", n),
+			"data-testid": "spectral-radio-group",
+			disabled: p.groupDisabled,
+			onValueChange: a,
+			ref: s,
+			value: f,
+			...d
+		})
+	});
+};
+Ee.displayName = "RadioGroup";
+var De = {
+	type: "spring",
+	stiffness: 200,
+	damping: 16
+}, Oe = x(({ className: e, id: t, isDisabled: n, ref: r, transition: i = De, value: a, ...o }) => we() ? /* @__PURE__ */ E(Q, {
+	className: l("h-4.5 w-4.5 border-border-subtle ring-black relative aspect-square cursor-pointer rounded-full border-2 bg-radio-bg transition-colors", "hover:border-radio-border--hover focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-accent", "data-[state=checked]:border-radio-border--selected data-[state=checked]:bg-radio-bg", n && $, e),
+	"data-testid": "spectral-radio-group-item",
+	disabled: n,
+	id: t,
+	ref: r,
+	value: a,
+	...o,
+	children: /* @__PURE__ */ E(Ce, { className: l("after:inset-0 after:h-2.5 after:w-2.5 after:absolute after:m-auto after:rounded-full after:bg-radio-bg--selected after:content-['']", n && $) })
+}) : /* @__PURE__ */ E(Q, {
+	value: a,
+	id: t,
+	disabled: n,
+	asChild: !0,
+	...o,
+	children: /* @__PURE__ */ E(_.button, {
+		className: l("h-4.5 w-4.5 border-border-subtle ring-black relative aspect-square cursor-pointer rounded-full border-2 bg-radio-bg transition-colors", "hover:border-radio-border--hover focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-accent", "data-[state=checked]:border-radio-border--selected data-[state=checked]:bg-radio-bg", n && $, e),
+		"data-testid": "spectral-radio-group-item",
+		ref: r,
+		whileHover: { scale: 1.05 },
+		whileTap: { scale: .95 },
+		children: /* @__PURE__ */ E(Ce, {
+			className: "relative flex items-center justify-center",
+			children: /* @__PURE__ */ E(y, { children: /* @__PURE__ */ E(_.div, {
+				animate: {
+					opacity: 1,
+					scale: 1
+				},
+				className: "h-2.5 w-2.5 absolute rounded-full bg-radio-bg--selected",
+				exit: {
+					opacity: 0,
+					scale: 0
+				},
+				initial: {
+					opacity: 0,
+					scale: 0
+				},
+				transition: i
+			}, "radio-indicator") })
+		})
+	})
+}));
+Oe.displayName = "RadioButton";
+var ke = ({ children: e, className: t, disabled: n, ref: r, value: i, ...a }) => {
+	let { disabledValues: o, groupDisabled: s, itemClassName: c, variant: d, orientation: f } = S(Te), p = C(), m = i.toString(), h = a.id?.toString() ?? `${m}-${p}`, g = s || o.includes(m) || !!n;
+	return d === "unstyled" ? /* @__PURE__ */ E(Q, {
+		asChild: !0,
+		"data-testid": "spectral-radio-group-item",
+		disabled: g,
+		id: h,
+		ref: r,
+		value: m,
+		...a,
+		children: /* @__PURE__ */ E(u, {
+			className: l("rounded flex h-fit w-fit border-2 border-transparent data-[state=checked]:border-radio-border--selected", g && $, c, t),
+			"data-testid": "spectral-radio-group-item-label",
+			htmlFor: h,
+			children: e
+		})
+	}) : /* @__PURE__ */ D("div", {
+		className: l("flex items-center", g && $, c, t, f),
+		children: [/* @__PURE__ */ E(Oe, {
+			ref: r,
+			value: m,
+			id: h,
+			isDisabled: g,
+			...a
+		}), e && /* @__PURE__ */ E(u, {
+			className: l("text-md font-normal cursor-pointer", f === "vertical" ? "ml-2" : "ml-1"),
+			htmlFor: h,
+			children: e
+		})]
+	});
+};
+ke.displayName = "RadioGroup.Item";
+var Ae = ({ ref: e, className: t, ...n }) => /* @__PURE__ */ E(u, {
+	ref: e,
+	"data-testid": "spectral-radio-group-label",
+	className: l("text-md font-medium block", t),
+	...n
+});
+Ae.displayName = "RadioGroup.Label";
+//#endregion
+export { ke as n, Ae as r, Ee as t };