@spear-ai/spectral 1.8.8 → 1.8.9

package/dist/RadioGroup.d.ts

@@ -21,7 +21,7 @@ export interface RadioGroupItemProps extends ComponentProps<typeof RadioGroupPri
     value: string;
 }
 declare const RadioGroup: {
-    ({ className, disabled, itemClassName, onValueChange, orientation, ref, selected, variant, ...props }: RadioGroupProps & {
+    (allProps: RadioGroupProps & {
         ref?: Ref<ComponentRef<typeof RadioGroupPrimitive.Root>>;
     }): ReactElement;
     displayName: string;

package/dist/RadioGroup.js

@@ -2,65 +2,65 @@
 import "./styles/main.css";
 import { jsx as a, jsxs as Y } from "react/jsx-runtime";
 import { Label as D } from "./Label.js";
-import * as c from "react";
+import * as d from "react";
 import { useState as ge, createContext as he, memo as Ie, useMemo as ye, useContext as we, useId as Ce } from "react";
 import { P as F, c as y, a as L, u as _, e as $ } from "./index-9OmOYyjJ.js";
 import { c as Ee, u as j } from "./index-Cgdmxb3F.js";
 import { u as Se } from "./index-obMGvcdD.js";
 import { u as Fe } from "./index-0ioNhtNM.js";
-import { u as Ae } from "./index-WBfSMXvE.js";
-import { u as Ne } from "./index-BZPx6jYI.js";
+import { u as Ne } from "./index-WBfSMXvE.js";
+import { u as Ae } from "./index-BZPx6jYI.js";
 import { P as _e } from "./index-CtqlhLRO.js";
 import { cn as E } from "./utils/twUtils.js";
 import { h as Pe, c as Te, p as xe, w as Ge, m as V } from "./proxy-CO_-Vget.js";
 import { A as ke } from "./index-Cl8VeY0o.js";
-var k = "rovingFocusGroup.onEntryFocus", De = { bubbles: !1, cancelable: !0 }, N = "RovingFocusGroup", [M, H, Me] = Ee(N), [Oe, z] = L(
-  N,
+var k = "rovingFocusGroup.onEntryFocus", De = { bubbles: !1, cancelable: !0 }, A = "RovingFocusGroup", [M, H, Me] = Ee(A), [Oe, z] = L(
+  A,
   [Me]
-), [Le, Be] = Oe(N), W = c.forwardRef(
-  (e, t) => /* @__PURE__ */ a(M.Provider, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ a(M.Slot, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ a(Ke, { ...e, ref: t }) }) })
+), [Le, Be] = Oe(A), W = d.forwardRef(
+  (e, r) => /* @__PURE__ */ a(M.Provider, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ a(M.Slot, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ a(Ke, { ...e, ref: r }) }) })
 );
-W.displayName = N;
-var Ke = c.forwardRef((e, t) => {
+W.displayName = A;
+var Ke = d.forwardRef((e, r) => {
   const {
     __scopeRovingFocusGroup: o,
-    orientation: r,
+    orientation: t,
     loop: n = !1,
     dir: s,
     currentTabStopId: i,
-    defaultCurrentTabStopId: m,
-    onCurrentTabStopIdChange: v,
-    onEntryFocus: f,
-    preventScrollOnEntryFocus: u = !1,
-    ...R
-  } = e, b = c.useRef(null), l = _(t, b), p = j(s), [h, d] = $({
+    defaultCurrentTabStopId: R,
+    onCurrentTabStopIdChange: b,
+    onEntryFocus: l,
+    preventScrollOnEntryFocus: c = !1,
+    ...p
+  } = e, m = d.useRef(null), f = _(r, m), v = j(s), [h, u] = $({
     prop: i,
-    defaultProp: m ?? null,
-    onChange: v,
-    caller: N
-  }), [w, T] = c.useState(!1), I = Fe(f), C = H(o), x = c.useRef(!1), [pe, K] = c.useState(0);
-  return c.useEffect(() => {
-    const g = b.current;
+    defaultProp: R ?? null,
+    onChange: b,
+    caller: A
+  }), [w, T] = d.useState(!1), I = Fe(l), C = H(o), x = d.useRef(!1), [pe, K] = d.useState(0);
+  return d.useEffect(() => {
+    const g = m.current;
     if (g)
       return g.addEventListener(k, I), () => g.removeEventListener(k, I);
   }, [I]), /* @__PURE__ */ a(
     Le,
     {
       scope: o,
-      orientation: r,
-      dir: p,
+      orientation: t,
+      dir: v,
       loop: n,
       currentTabStopId: h,
-      onItemFocus: c.useCallback(
-        (g) => d(g),
-        [d]
+      onItemFocus: d.useCallback(
+        (g) => u(g),
+        [u]
       ),
-      onItemShiftTab: c.useCallback(() => T(!0), []),
-      onFocusableItemAdd: c.useCallback(
+      onItemShiftTab: d.useCallback(() => T(!0), []),
+      onFocusableItemAdd: d.useCallback(
         () => K((g) => g + 1),
         []
       ),
-      onFocusableItemRemove: c.useCallback(
+      onFocusableItemRemove: d.useCallback(
         () => K((g) => g - 1),
         []
       ),
@@ -68,9 +68,9 @@ var Ke = c.forwardRef((e, t) => {
         F.div,
         {
           tabIndex: w || pe === 0 ? -1 : 0,
-          "data-orientation": r,
-          ...R,
-          ref: l,
+          "data-orientation": t,
+          ...p,
+          ref: f,
           style: { outline: "none", ...e.style },
           onMouseDown: y(e.onMouseDown, () => {
             x.current = !0;
@@ -83,7 +83,7 @@ var Ke = c.forwardRef((e, t) => {
                 const G = C().filter((S) => S.focusable), ve = G.find((S) => S.active), be = G.find((S) => S.id === h), Re = [ve, be, ...G].filter(
                   Boolean
                 ).map((S) => S.ref.current);
-                Q(Re, u);
+                Q(Re, c);
               }
             }
             x.current = !1;
@@ -93,58 +93,58 @@ var Ke = c.forwardRef((e, t) => {
       )
     }
   );
-}), X = "RovingFocusGroupItem", J = c.forwardRef(
-  (e, t) => {
+}), X = "RovingFocusGroupItem", J = d.forwardRef(
+  (e, r) => {
     const {
       __scopeRovingFocusGroup: o,
-      focusable: r = !0,
+      focusable: t = !0,
       active: n = !1,
       tabStopId: s,
       children: i,
-      ...m
-    } = e, v = Se(), f = s || v, u = Be(X, o), R = u.currentTabStopId === f, b = H(o), { onFocusableItemAdd: l, onFocusableItemRemove: p, currentTabStopId: h } = u;
-    return c.useEffect(() => {
-      if (r)
-        return l(), () => p();
-    }, [r, l, p]), /* @__PURE__ */ a(
+      ...R
+    } = e, b = Se(), l = s || b, c = Be(X, o), p = c.currentTabStopId === l, m = H(o), { onFocusableItemAdd: f, onFocusableItemRemove: v, currentTabStopId: h } = c;
+    return d.useEffect(() => {
+      if (t)
+        return f(), () => v();
+    }, [t, f, v]), /* @__PURE__ */ a(
       M.ItemSlot,
       {
         scope: o,
-        id: f,
-        focusable: r,
+        id: l,
+        focusable: t,
         active: n,
         children: /* @__PURE__ */ a(
           F.span,
           {
-            tabIndex: R ? 0 : -1,
-            "data-orientation": u.orientation,
-            ...m,
-            ref: t,
-            onMouseDown: y(e.onMouseDown, (d) => {
-              r ? u.onItemFocus(f) : d.preventDefault();
+            tabIndex: p ? 0 : -1,
+            "data-orientation": c.orientation,
+            ...R,
+            ref: r,
+            onMouseDown: y(e.onMouseDown, (u) => {
+              t ? c.onItemFocus(l) : u.preventDefault();
             }),
-            onFocus: y(e.onFocus, () => u.onItemFocus(f)),
-            onKeyDown: y(e.onKeyDown, (d) => {
-              if (d.key === "Tab" && d.shiftKey) {
-                u.onItemShiftTab();
+            onFocus: y(e.onFocus, () => c.onItemFocus(l)),
+            onKeyDown: y(e.onKeyDown, (u) => {
+              if (u.key === "Tab" && u.shiftKey) {
+                c.onItemShiftTab();
                 return;
               }
-              if (d.target !== d.currentTarget) return;
-              const w = qe(d, u.orientation, u.dir);
+              if (u.target !== u.currentTarget) return;
+              const w = qe(u, c.orientation, c.dir);
               if (w !== void 0) {
-                if (d.metaKey || d.ctrlKey || d.altKey || d.shiftKey) return;
-                d.preventDefault();
-                let I = b().filter((C) => C.focusable).map((C) => C.ref.current);
+                if (u.metaKey || u.ctrlKey || u.altKey || u.shiftKey) return;
+                u.preventDefault();
+                let I = m().filter((C) => C.focusable).map((C) => C.ref.current);
                 if (w === "last") I.reverse();
                 else if (w === "prev" || w === "next") {
                   w === "prev" && I.reverse();
-                  const C = I.indexOf(d.currentTarget);
-                  I = u.loop ? Ye(I, C + 1) : I.slice(C + 1);
+                  const C = I.indexOf(u.currentTarget);
+                  I = c.loop ? Ye(I, C + 1) : I.slice(C + 1);
                 }
                 setTimeout(() => Q(I));
               }
             }),
-            children: typeof i == "function" ? i({ isCurrentTabStop: R, hasTabStop: h != null }) : i
+            children: typeof i == "function" ? i({ isCurrentTabStop: p, hasTabStop: h != null }) : i
           }
         )
       }
@@ -162,35 +162,35 @@ var Ue = {
   PageDown: "last",
   End: "last"
 };
-function Ve(e, t) {
-  return t !== "rtl" ? e : e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e;
+function Ve(e, r) {
+  return r !== "rtl" ? e : e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e;
 }
-function qe(e, t, o) {
-  const r = Ve(e.key, o);
-  if (!(t === "vertical" && ["ArrowLeft", "ArrowRight"].includes(r)) && !(t === "horizontal" && ["ArrowUp", "ArrowDown"].includes(r)))
-    return Ue[r];
+function qe(e, r, o) {
+  const t = Ve(e.key, o);
+  if (!(r === "vertical" && ["ArrowLeft", "ArrowRight"].includes(t)) && !(r === "horizontal" && ["ArrowUp", "ArrowDown"].includes(t)))
+    return Ue[t];
 }
-function Q(e, t = !1) {
+function Q(e, r = !1) {
   const o = document.activeElement;
-  for (const r of e)
-    if (r === o || (r.focus({ preventScroll: t }), document.activeElement !== o)) return;
+  for (const t of e)
+    if (t === o || (t.focus({ preventScroll: r }), document.activeElement !== o)) return;
 }
-function Ye(e, t) {
-  return e.map((o, r) => e[(t + r) % e.length]);
+function Ye(e, r) {
+  return e.map((o, t) => e[(r + t) % e.length]);
 }
-var $e = W, je = J, B = "Radio", [He, Z] = L(B), [ze, We] = He(B), ee = c.forwardRef(
-  (e, t) => {
+var $e = W, je = J, B = "Radio", [He, Z] = L(B), [ze, We] = He(B), ee = d.forwardRef(
+  (e, r) => {
     const {
       __scopeRadio: o,
-      name: r,
+      name: t,
       checked: n = !1,
       required: s,
       disabled: i,
-      value: m = "on",
-      onCheck: v,
-      form: f,
-      ...u
-    } = e, [R, b] = c.useState(null), l = _(t, (d) => b(d)), p = c.useRef(!1), h = R ? f || !!R.closest("form") : !0;
+      value: R = "on",
+      onCheck: b,
+      form: l,
+      ...c
+    } = e, [p, m] = d.useState(null), f = _(r, (u) => m(u)), v = d.useRef(!1), h = p ? l || !!p.closest("form") : !0;
     return /* @__PURE__ */ Y(ze, { scope: o, checked: n, disabled: i, children: [
       /* @__PURE__ */ a(
         F.button,
@@ -201,25 +201,25 @@ var $e = W, je = J, B = "Radio", [He, Z] = L(B), [ze, We] = He(B), ee = c.forwar
           "data-state": ae(n),
           "data-disabled": i ? "" : void 0,
           disabled: i,
-          value: m,
-          ...u,
-          ref: l,
-          onClick: y(e.onClick, (d) => {
-            n || v?.(), h && (p.current = d.isPropagationStopped(), p.current || d.stopPropagation());
+          value: R,
+          ...c,
+          ref: f,
+          onClick: y(e.onClick, (u) => {
+            n || b?.(), h && (v.current = u.isPropagationStopped(), v.current || u.stopPropagation());
           })
         }
       ),
       h && /* @__PURE__ */ a(
         re,
         {
-          control: R,
-          bubbles: !p.current,
-          name: r,
-          value: m,
+          control: p,
+          bubbles: !v.current,
+          name: t,
+          value: R,
           checked: n,
           required: s,
           disabled: i,
-          form: f,
+          form: l,
           style: { transform: "translateX(-100%)" }
         }
       )
@@ -227,42 +227,42 @@ var $e = W, je = J, B = "Radio", [He, Z] = L(B), [ze, We] = He(B), ee = c.forwar
   }
 );
 ee.displayName = B;
-var oe = "RadioIndicator", te = c.forwardRef(
-  (e, t) => {
-    const { __scopeRadio: o, forceMount: r, ...n } = e, s = We(oe, o);
-    return /* @__PURE__ */ a(_e, { present: r || s.checked, children: /* @__PURE__ */ a(
+var oe = "RadioIndicator", te = d.forwardRef(
+  (e, r) => {
+    const { __scopeRadio: o, forceMount: t, ...n } = e, s = We(oe, o);
+    return /* @__PURE__ */ a(_e, { present: t || s.checked, children: /* @__PURE__ */ a(
       F.span,
       {
         "data-state": ae(s.checked),
         "data-disabled": s.disabled ? "" : void 0,
         ...n,
-        ref: t
+        ref: r
       }
     ) });
   }
 );
 te.displayName = oe;
-var Xe = "RadioBubbleInput", re = c.forwardRef(
+var Xe = "RadioBubbleInput", re = d.forwardRef(
   ({
     __scopeRadio: e,
-    control: t,
+    control: r,
     checked: o,
-    bubbles: r = !0,
+    bubbles: t = !0,
     ...n
   }, s) => {
-    const i = c.useRef(null), m = _(i, s), v = Ne(o), f = Ae(t);
-    return c.useEffect(() => {
-      const u = i.current;
-      if (!u) return;
-      const R = window.HTMLInputElement.prototype, l = Object.getOwnPropertyDescriptor(
-        R,
+    const i = d.useRef(null), R = _(i, s), b = Ae(o), l = Ne(r);
+    return d.useEffect(() => {
+      const c = i.current;
+      if (!c) return;
+      const p = window.HTMLInputElement.prototype, f = Object.getOwnPropertyDescriptor(
+        p,
         "checked"
       ).set;
-      if (v !== o && l) {
-        const p = new Event("click", { bubbles: r });
-        l.call(u, o), u.dispatchEvent(p);
+      if (b !== o && f) {
+        const v = new Event("click", { bubbles: t });
+        f.call(c, o), c.dispatchEvent(v);
       }
-    }, [v, o, r]), /* @__PURE__ */ a(
+    }, [b, o, t]), /* @__PURE__ */ a(
       F.input,
       {
         type: "radio",
@@ -270,10 +270,10 @@ var Xe = "RadioBubbleInput", re = c.forwardRef(
         defaultChecked: o,
         ...n,
         tabIndex: -1,
-        ref: m,
+        ref: R,
         style: {
           ...n.style,
-          ...f,
+          ...l,
           position: "absolute",
           pointerEvents: "none",
           opacity: 0,
@@ -290,53 +290,53 @@ function ae(e) {
 var Je = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], P = "RadioGroup", [Qe] = L(P, [
   z,
   Z
-]), ne = z(), se = Z(), [Ze, eo] = Qe(P), ie = c.forwardRef(
-  (e, t) => {
+]), ne = z(), se = Z(), [Ze, eo] = Qe(P), ie = d.forwardRef(
+  (e, r) => {
     const {
       __scopeRadioGroup: o,
-      name: r,
+      name: t,
       defaultValue: n,
       value: s,
       required: i = !1,
-      disabled: m = !1,
-      orientation: v,
-      dir: f,
-      loop: u = !0,
-      onValueChange: R,
-      ...b
-    } = e, l = ne(o), p = j(f), [h, d] = $({
+      disabled: R = !1,
+      orientation: b,
+      dir: l,
+      loop: c = !0,
+      onValueChange: p,
+      ...m
+    } = e, f = ne(o), v = j(l), [h, u] = $({
       prop: s,
       defaultProp: n ?? null,
-      onChange: R,
+      onChange: p,
       caller: P
     });
     return /* @__PURE__ */ a(
       Ze,
       {
         scope: o,
-        name: r,
+        name: t,
         required: i,
-        disabled: m,
+        disabled: R,
         value: h,
-        onValueChange: d,
+        onValueChange: u,
         children: /* @__PURE__ */ a(
           $e,
           {
             asChild: !0,
-            ...l,
-            orientation: v,
-            dir: p,
-            loop: u,
+            ...f,
+            orientation: b,
+            dir: v,
+            loop: c,
             children: /* @__PURE__ */ a(
               F.div,
               {
                 role: "radiogroup",
                 "aria-required": i,
-                "aria-orientation": v,
-                "data-disabled": m ? "" : void 0,
-                dir: p,
-                ...b,
-                ref: t
+                "aria-orientation": b,
+                "data-disabled": R ? "" : void 0,
+                dir: v,
+                ...m,
+                ref: r
               }
             )
           }
@@ -346,39 +346,39 @@ var Je = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], P = "RadioGroup",
   }
 );
 ie.displayName = P;
-var ce = "RadioGroupItem", ue = c.forwardRef(
-  (e, t) => {
-    const { __scopeRadioGroup: o, disabled: r, ...n } = e, s = eo(ce, o), i = s.disabled || r, m = ne(o), v = se(o), f = c.useRef(null), u = _(t, f), R = s.value === n.value, b = c.useRef(!1);
-    return c.useEffect(() => {
-      const l = (h) => {
-        Je.includes(h.key) && (b.current = !0);
-      }, p = () => b.current = !1;
-      return document.addEventListener("keydown", l), document.addEventListener("keyup", p), () => {
-        document.removeEventListener("keydown", l), document.removeEventListener("keyup", p);
+var ce = "RadioGroupItem", de = d.forwardRef(
+  (e, r) => {
+    const { __scopeRadioGroup: o, disabled: t, ...n } = e, s = eo(ce, o), i = s.disabled || t, R = ne(o), b = se(o), l = d.useRef(null), c = _(r, l), p = s.value === n.value, m = d.useRef(!1);
+    return d.useEffect(() => {
+      const f = (h) => {
+        Je.includes(h.key) && (m.current = !0);
+      }, v = () => m.current = !1;
+      return document.addEventListener("keydown", f), document.addEventListener("keyup", v), () => {
+        document.removeEventListener("keydown", f), document.removeEventListener("keyup", v);
       };
     }, []), /* @__PURE__ */ a(
       je,
       {
         asChild: !0,
-        ...m,
+        ...R,
         focusable: !i,
-        active: R,
+        active: p,
         children: /* @__PURE__ */ a(
           ee,
           {
             disabled: i,
             required: s.required,
-            checked: R,
-            ...v,
+            checked: p,
+            ...b,
             ...n,
             name: s.name,
-            ref: u,
+            ref: c,
             onCheck: () => s.onValueChange(n.value),
-            onKeyDown: y((l) => {
-              l.key === "Enter" && l.preventDefault();
+            onKeyDown: y((f) => {
+              f.key === "Enter" && f.preventDefault();
             }),
             onFocus: y(n.onFocus, () => {
-              b.current && f.current?.click();
+              m.current && l.current?.click();
             })
           }
         )
@@ -386,15 +386,15 @@ var ce = "RadioGroupItem", ue = c.forwardRef(
     );
   }
 );
-ue.displayName = ce;
-var oo = "RadioGroupIndicator", de = c.forwardRef(
-  (e, t) => {
-    const { __scopeRadioGroup: o, ...r } = e, n = se(o);
-    return /* @__PURE__ */ a(te, { ...n, ...r, ref: t });
+de.displayName = ce;
+var oo = "RadioGroupIndicator", ue = d.forwardRef(
+  (e, r) => {
+    const { __scopeRadioGroup: o, ...t } = e, n = se(o);
+    return /* @__PURE__ */ a(te, { ...n, ...t, ref: r });
   }
 );
-de.displayName = oo;
-var to = ie, O = ue, q = de;
+ue.displayName = oo;
+var to = ie, O = de, q = ue;
 function ro() {
   !Pe.current && Te();
   const [e] = ge(xe.current);
@@ -405,38 +405,28 @@ const le = he({
   groupDisabled: !1,
   orientation: "vertical",
   variant: "default"
-}), A = "pointer-events-none opacity-60", ao = ({
-  className: e,
-  disabled: t,
-  itemClassName: o,
-  onValueChange: r,
-  orientation: n = "vertical",
-  ref: s,
-  selected: i,
-  variant: m = "default",
-  ...v
-}) => {
-  const f = ye(
+}), N = "pointer-events-none opacity-60", ao = (e) => {
+  const r = "selected" in e, { className: o, disabled: t, itemClassName: n, onValueChange: s, orientation: i = "vertical", ref: R, selected: b, variant: l = "default", ...c } = e, p = r ? b ?? "" : b, m = ye(
     () => ({
       disabledValues: Array.isArray(t) ? t : [],
       groupDisabled: typeof t == "boolean" ? t : !1,
-      itemClassName: o,
-      orientation: n,
-      selected: i,
-      variant: m
+      itemClassName: n,
+      orientation: i,
+      selected: p,
+      variant: l
     }),
-    [n, m, t, o, i]
+    [i, l, t, n, p]
   );
-  return /* @__PURE__ */ a(le.Provider, { value: f, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(le.Provider, { value: m, children: /* @__PURE__ */ a(
     to,
     {
-      className: E("text-text-primary flex w-full", n === "vertical" ? "flex-col gap-4" : "flex-row gap-5", m === "unstyled" && "w-fit gap-2.5", e),
+      className: E("text-text-primary flex w-full", i === "vertical" ? "flex-col gap-4" : "flex-row gap-5", l === "unstyled" && "w-fit gap-2.5", o),
       "data-testid": "spectral-radio-group",
-      disabled: f.groupDisabled,
-      onValueChange: r,
-      ref: s,
-      value: i,
-      ...v
+      disabled: m.groupDisabled,
+      onValueChange: s,
+      ref: R,
+      value: p,
+      ...c
     }
   ) });
 };
@@ -444,9 +434,9 @@ ao.displayName = "RadioGroup";
 const no = { type: "spring", stiffness: 200, damping: 16 }, fe = Ie(
   ({
     className: e,
-    id: t,
+    id: r,
     isDisabled: o,
-    ref: r,
+    ref: t,
     transition: n = no,
     value: s,
     ...i
@@ -457,29 +447,29 @@ const no = { type: "spring", stiffness: 200, damping: 16 }, fe = Ie(
         "border-border-subtle bg-radio-bg relative aspect-square h-4.5 w-4.5 cursor-pointer rounded-full border-2 ring-black transition-colors",
         "hover:border-radio-border--hover focus-visible:outline-accent focus-visible:outline-1 focus-visible:outline-offset-2",
         "data-[state=checked]:border-radio-border--selected data-[state=checked]:bg-radio-bg",
-        o && A,
+        o && N,
         e
       ),
       "data-testid": "spectral-radio-group-item",
       disabled: o,
-      id: t,
-      ref: r,
+      id: r,
+      ref: t,
       value: s,
       ...i,
-      children: /* @__PURE__ */ a(q, { className: E("after:bg-radio-bg--selected after:absolute after:inset-0 after:m-auto after:h-2.5 after:w-2.5 after:rounded-full after:content-['']", o && A) })
+      children: /* @__PURE__ */ a(q, { className: E("after:bg-radio-bg--selected after:absolute after:inset-0 after:m-auto after:h-2.5 after:w-2.5 after:rounded-full after:content-['']", o && N) })
     }
-  ) : /* @__PURE__ */ a(O, { value: s, id: t, disabled: o, asChild: !0, ...i, children: /* @__PURE__ */ a(
+  ) : /* @__PURE__ */ a(O, { value: s, id: r, disabled: o, asChild: !0, ...i, children: /* @__PURE__ */ a(
     V.button,
     {
       className: E(
         "border-border-subtle bg-radio-bg relative aspect-square h-4.5 w-4.5 cursor-pointer rounded-full border-2 ring-black transition-colors",
         "hover:border-radio-border--hover focus-visible:outline-accent focus-visible:outline-1 focus-visible:outline-offset-2",
         "data-[state=checked]:border-radio-border--selected data-[state=checked]:bg-radio-bg",
-        o && A,
+        o && N,
         e
       ),
       "data-testid": "spectral-radio-group-item",
-      ref: r,
+      ref: t,
       whileHover: { scale: 1.05 },
       whileTap: { scale: 0.95 },
       children: /* @__PURE__ */ a(q, { className: "relative flex items-center justify-center", children: /* @__PURE__ */ a(ke, { children: /* @__PURE__ */ a(V.div, { animate: { opacity: 1, scale: 1 }, className: "bg-radio-bg--selected absolute h-2.5 w-2.5 rounded-full", exit: { opacity: 0, scale: 0 }, initial: { opacity: 0, scale: 0 }, transition: n }, "radio-indicator") }) })
@@ -489,24 +479,24 @@ const no = { type: "spring", stiffness: 200, damping: 16 }, fe = Ie(
 fe.displayName = "RadioButton";
 const so = ({
   children: e,
-  className: t,
+  className: r,
   disabled: o,
-  ref: r,
+  ref: t,
   value: n,
   ...s
 }) => {
-  const { disabledValues: i, groupDisabled: m, itemClassName: v, variant: f, orientation: u } = we(le), R = Ce(), b = n.toString(), l = s.id?.toString() ?? `${b}-${R}`, p = m || i.includes(b) || !!o;
-  return f === "unstyled" ? /* @__PURE__ */ a(O, { asChild: !0, "data-testid": "spectral-radio-group-item", disabled: p, id: l, ref: r, value: b, ...s, children: /* @__PURE__ */ a(D, { className: E("data-[state=checked]:border-radio-border--selected flex h-fit w-fit rounded border-2 border-transparent", p && A, v, t), "data-testid": "spectral-radio-group-item-label", htmlFor: l, children: e }) }) : /* @__PURE__ */ Y("div", { className: E("flex items-center", p && A, v, t, u), children: [
-    /* @__PURE__ */ a(fe, { ref: r, value: b, id: l, isDisabled: p, ...s }),
-    e && /* @__PURE__ */ a(D, { className: E("text-md cursor-pointer font-normal", u === "vertical" ? "ml-2" : "ml-1"), htmlFor: l, children: e })
+  const { disabledValues: i, groupDisabled: R, itemClassName: b, variant: l, orientation: c } = we(le), p = Ce(), m = n.toString(), f = s.id?.toString() ?? `${m}-${p}`, v = R || i.includes(m) || !!o;
+  return l === "unstyled" ? /* @__PURE__ */ a(O, { asChild: !0, "data-testid": "spectral-radio-group-item", disabled: v, id: f, ref: t, value: m, ...s, children: /* @__PURE__ */ a(D, { className: E("data-[state=checked]:border-radio-border--selected flex h-fit w-fit rounded border-2 border-transparent", v && N, b, r), "data-testid": "spectral-radio-group-item-label", htmlFor: f, children: e }) }) : /* @__PURE__ */ Y("div", { className: E("flex items-center", v && N, b, r, c), children: [
+    /* @__PURE__ */ a(fe, { ref: t, value: m, id: f, isDisabled: v, ...s }),
+    e && /* @__PURE__ */ a(D, { className: E("text-md cursor-pointer font-normal", c === "vertical" ? "ml-2" : "ml-1"), htmlFor: f, children: e })
   ] });
 };
 so.displayName = "RadioGroup.Item";
 const io = ({
   ref: e,
-  className: t,
+  className: r,
   ...o
-}) => /* @__PURE__ */ a(D, { ref: e, "data-testid": "spectral-radio-group-label", className: E("text-md block font-medium", t), ...o });
+}) => /* @__PURE__ */ a(D, { ref: e, "data-testid": "spectral-radio-group-label", className: E("text-md block font-medium", r), ...o });
 io.displayName = "RadioGroup.Label";
 export {
   ao as RadioGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spear-ai/spectral",
-  "version": "1.8.8",
+  "version": "1.8.9",
   "type": "module",
   "private": false,
   "repository": {