@spear-ai/spectral 1.3.62 → 1.3.63

package/dist/RadioGroup.js

@@ -1,15 +1,18 @@
 "use client";
 import "./styles/main.css";
 import { jsx as n, jsxs as N } from "react/jsx-runtime";
-import { Label as O } from "./Label.js";
+import { Label as _ } from "./Label.js";
 import * as c from "react";
-import { createContext as Re, forwardRef as A, useMemo as ge, memo as Ie, useContext as he } from "react";
-import { c as K, b as we, P as F, e as w, a as G, d as Y, h as ye } from "./index-CA7haECj.js";
-import { c as Ce, u as j, a as Ee } from "./index-CbXx14YO.js";
-import { u as Se } from "./index-Cb7rjMhE.js";
-import { P as Fe } from "./index-CBwRmAsQ.js";
-import { c as S } from "./twUtils-CRiPKpXj.js";
-var L = "rovingFocusGroup.onEntryFocus", xe = { bubbles: !1, cancelable: !0 }, x = "RovingFocusGroup", [M, z, Ne] = Ce(x), [_e, H] = K(
+import { createContext as Re, forwardRef as G, useMemo as ge, memo as he, useContext as Ie } from "react";
+import { c as K, P as S, b as w, a as P, u as Y } from "./index-BhufZRa2.js";
+import { c as we, u as j } from "./index-UEFPWH8U.js";
+import { u as ye } from "./index-CVSxKOPp.js";
+import { u as Ce } from "./index-0ioNhtNM.js";
+import { u as Ee } from "./index-y6Br5T4h.js";
+import { u as Fe } from "./index-BZPx6jYI.js";
+import { P as Se } from "./index-6Abv_Flm.js";
+import { cn as F } from "./utils/twUtils.js";
+var O = "rovingFocusGroup.onEntryFocus", xe = { bubbles: !1, cancelable: !0 }, x = "RovingFocusGroup", [M, z, Ne] = we(x), [_e, H] = K(
   x,
   [Ne]
 ), [Ae, Ge] = _e(x), $ = c.forwardRef(
@@ -25,42 +28,42 @@ var Pe = c.forwardRef((e, t) => {
     currentTabStopId: i,
     defaultCurrentTabStopId: v,
     onCurrentTabStopIdChange: b,
-    onEntryFocus: d,
-    preventScrollOnEntryFocus: u = !1,
+    onEntryFocus: f,
+    preventScrollOnEntryFocus: d = !1,
     ...R
-  } = e, m = c.useRef(null), l = G(t, m), f = j(s), [g, p] = Y({
+  } = e, g = c.useRef(null), l = P(t, g), p = j(s), [m, u] = Y({
     prop: i,
     defaultProp: v ?? null,
     onChange: b,
     caller: x
-  }), [y, T] = c.useState(!1), h = ye(d), C = z(o), k = c.useRef(!1), [fe, V] = c.useState(0);
+  }), [y, k] = c.useState(!1), I = Ce(f), C = z(o), D = c.useRef(!1), [fe, V] = c.useState(0);
   return c.useEffect(() => {
-    const I = m.current;
-    if (I)
-      return I.addEventListener(L, h), () => I.removeEventListener(L, h);
-  }, [h]), /* @__PURE__ */ n(
+    const h = g.current;
+    if (h)
+      return h.addEventListener(O, I), () => h.removeEventListener(O, I);
+  }, [I]), /* @__PURE__ */ n(
     Ae,
     {
       scope: o,
       orientation: r,
-      dir: f,
+      dir: p,
       loop: a,
-      currentTabStopId: g,
+      currentTabStopId: m,
       onItemFocus: c.useCallback(
-        (I) => p(I),
-        [p]
+        (h) => u(h),
+        [u]
       ),
-      onItemShiftTab: c.useCallback(() => T(!0), []),
+      onItemShiftTab: c.useCallback(() => k(!0), []),
       onFocusableItemAdd: c.useCallback(
-        () => V((I) => I + 1),
+        () => V((h) => h + 1),
         []
       ),
       onFocusableItemRemove: c.useCallback(
-        () => V((I) => I - 1),
+        () => V((h) => h - 1),
         []
       ),
       children: /* @__PURE__ */ n(
-        F.div,
+        S.div,
         {
           tabIndex: y || fe === 0 ? -1 : 0,
           "data-orientation": r,
@@ -68,22 +71,22 @@ var Pe = c.forwardRef((e, t) => {
           ref: l,
           style: { outline: "none", ...e.style },
           onMouseDown: w(e.onMouseDown, () => {
-            k.current = !0;
+            D.current = !0;
           }),
-          onFocus: w(e.onFocus, (I) => {
-            const pe = !k.current;
-            if (I.target === I.currentTarget && pe && !y) {
-              const q = new CustomEvent(L, xe);
-              if (I.currentTarget.dispatchEvent(q), !q.defaultPrevented) {
-                const D = C().filter((E) => E.focusable), me = D.find((E) => E.active), ve = D.find((E) => E.id === g), be = [me, ve, ...D].filter(
+          onFocus: w(e.onFocus, (h) => {
+            const pe = !D.current;
+            if (h.target === h.currentTarget && pe && !y) {
+              const q = new CustomEvent(O, xe);
+              if (h.currentTarget.dispatchEvent(q), !q.defaultPrevented) {
+                const L = C().filter((E) => E.focusable), me = L.find((E) => E.active), ve = L.find((E) => E.id === m), be = [me, ve, ...L].filter(
                   Boolean
                 ).map((E) => E.ref.current);
-                J(be, u);
+                J(be, d);
               }
             }
-            k.current = !1;
+            D.current = !1;
           }),
-          onBlur: w(e.onBlur, () => T(!1))
+          onBlur: w(e.onBlur, () => k(!1))
         }
       )
     }
@@ -97,49 +100,49 @@ var Pe = c.forwardRef((e, t) => {
       tabStopId: s,
       children: i,
       ...v
-    } = e, b = we(), d = s || b, u = Ge(W, o), R = u.currentTabStopId === d, m = z(o), { onFocusableItemAdd: l, onFocusableItemRemove: f, currentTabStopId: g } = u;
+    } = e, b = ye(), f = s || b, d = Ge(W, o), R = d.currentTabStopId === f, g = z(o), { onFocusableItemAdd: l, onFocusableItemRemove: p, currentTabStopId: m } = d;
     return c.useEffect(() => {
       if (r)
-        return l(), () => f();
-    }, [r, l, f]), /* @__PURE__ */ n(
+        return l(), () => p();
+    }, [r, l, p]), /* @__PURE__ */ n(
       M.ItemSlot,
       {
         scope: o,
-        id: d,
+        id: f,
         focusable: r,
         active: a,
         children: /* @__PURE__ */ n(
-          F.span,
+          S.span,
           {
             tabIndex: R ? 0 : -1,
-            "data-orientation": u.orientation,
+            "data-orientation": d.orientation,
             ...v,
             ref: t,
-            onMouseDown: w(e.onMouseDown, (p) => {
-              r ? u.onItemFocus(d) : p.preventDefault();
+            onMouseDown: w(e.onMouseDown, (u) => {
+              r ? d.onItemFocus(f) : u.preventDefault();
             }),
-            onFocus: w(e.onFocus, () => u.onItemFocus(d)),
-            onKeyDown: w(e.onKeyDown, (p) => {
-              if (p.key === "Tab" && p.shiftKey) {
-                u.onItemShiftTab();
+            onFocus: w(e.onFocus, () => d.onItemFocus(f)),
+            onKeyDown: w(e.onKeyDown, (u) => {
+              if (u.key === "Tab" && u.shiftKey) {
+                d.onItemShiftTab();
                 return;
               }
-              if (p.target !== p.currentTarget) return;
-              const y = De(p, u.orientation, u.dir);
+              if (u.target !== u.currentTarget) return;
+              const y = De(u, d.orientation, d.dir);
               if (y !== void 0) {
-                if (p.metaKey || p.ctrlKey || p.altKey || p.shiftKey) return;
-                p.preventDefault();
-                let h = m().filter((C) => C.focusable).map((C) => C.ref.current);
-                if (y === "last") h.reverse();
+                if (u.metaKey || u.ctrlKey || u.altKey || u.shiftKey) return;
+                u.preventDefault();
+                let I = g().filter((C) => C.focusable).map((C) => C.ref.current);
+                if (y === "last") I.reverse();
                 else if (y === "prev" || y === "next") {
-                  y === "prev" && h.reverse();
-                  const C = h.indexOf(p.currentTarget);
-                  h = u.loop ? Le(h, C + 1) : h.slice(C + 1);
+                  y === "prev" && I.reverse();
+                  const C = I.indexOf(u.currentTarget);
+                  I = d.loop ? Le(I, C + 1) : I.slice(C + 1);
                 }
-                setTimeout(() => J(h));
+                setTimeout(() => J(I));
               }
             }),
-            children: typeof i == "function" ? i({ isCurrentTabStop: R, hasTabStop: g != null }) : i
+            children: typeof i == "function" ? i({ isCurrentTabStop: R, hasTabStop: m != null }) : i
           }
         )
       }
@@ -183,12 +186,12 @@ var Oe = $, Me = X, U = "Radio", [Be, Q] = K(U), [Ke, Ue] = Be(U), Z = c.forward
       disabled: i,
       value: v = "on",
       onCheck: b,
-      form: d,
-      ...u
-    } = e, [R, m] = c.useState(null), l = G(t, (p) => m(p)), f = c.useRef(!1), g = R ? d || !!R.closest("form") : !0;
+      form: f,
+      ...d
+    } = e, [R, g] = c.useState(null), l = P(t, (u) => g(u)), p = c.useRef(!1), m = R ? f || !!R.closest("form") : !0;
     return /* @__PURE__ */ N(Ke, { scope: o, checked: a, disabled: i, children: [
       /* @__PURE__ */ n(
-        F.button,
+        S.button,
         {
           type: "button",
           role: "radio",
@@ -197,24 +200,24 @@ var Oe = $, Me = X, U = "Radio", [Be, Q] = K(U), [Ke, Ue] = Be(U), Z = c.forward
           "data-disabled": i ? "" : void 0,
           disabled: i,
           value: v,
-          ...u,
+          ...d,
           ref: l,
-          onClick: w(e.onClick, (p) => {
-            a || b?.(), g && (f.current = p.isPropagationStopped(), f.current || p.stopPropagation());
+          onClick: w(e.onClick, (u) => {
+            a || b?.(), m && (p.current = u.isPropagationStopped(), p.current || u.stopPropagation());
           })
         }
       ),
-      g && /* @__PURE__ */ n(
+      m && /* @__PURE__ */ n(
         te,
         {
           control: R,
-          bubbles: !f.current,
+          bubbles: !p.current,
           name: r,
           value: v,
           checked: a,
           required: s,
           disabled: i,
-          form: d,
+          form: f,
           style: { transform: "translateX(-100%)" }
         }
       )
@@ -225,8 +228,8 @@ Z.displayName = U;
 var ee = "RadioIndicator", oe = c.forwardRef(
   (e, t) => {
     const { __scopeRadio: o, forceMount: r, ...a } = e, s = Ue(ee, o);
-    return /* @__PURE__ */ n(Fe, { present: r || s.checked, children: /* @__PURE__ */ n(
-      F.span,
+    return /* @__PURE__ */ n(Se, { present: r || s.checked, children: /* @__PURE__ */ n(
+      S.span,
       {
         "data-state": re(s.checked),
         "data-disabled": s.disabled ? "" : void 0,
@@ -245,20 +248,20 @@ var Ve = "RadioBubbleInput", te = c.forwardRef(
     bubbles: r = !0,
     ...a
   }, s) => {
-    const i = c.useRef(null), v = G(i, s), b = Ee(o), d = Se(t);
+    const i = c.useRef(null), v = P(i, s), b = Fe(o), f = Ee(t);
     return c.useEffect(() => {
-      const u = i.current;
-      if (!u) return;
+      const d = i.current;
+      if (!d) return;
       const R = window.HTMLInputElement.prototype, l = Object.getOwnPropertyDescriptor(
         R,
         "checked"
       ).set;
       if (b !== o && l) {
-        const f = new Event("click", { bubbles: r });
-        l.call(u, o), u.dispatchEvent(f);
+        const p = new Event("click", { bubbles: r });
+        l.call(d, o), d.dispatchEvent(p);
       }
     }, [b, o, r]), /* @__PURE__ */ n(
-      F.input,
+      S.input,
       {
         type: "radio",
         "aria-hidden": !0,
@@ -268,7 +271,7 @@ var Ve = "RadioBubbleInput", te = c.forwardRef(
         ref: v,
         style: {
           ...a.style,
-          ...d,
+          ...f,
           position: "absolute",
           pointerEvents: "none",
           opacity: 0,
@@ -282,10 +285,10 @@ te.displayName = Ve;
 function re(e) {
   return e ? "checked" : "unchecked";
 }
-var qe = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], P = "RadioGroup", [Ye] = K(P, [
+var qe = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], T = "RadioGroup", [Ye] = K(T, [
   H,
   Q
-]), ae = H(), ne = Q(), [je, ze] = Ye(P), se = c.forwardRef(
+]), ae = H(), ne = Q(), [je, ze] = Ye(T), se = c.forwardRef(
   (e, t) => {
     const {
       __scopeRadioGroup: o,
@@ -295,15 +298,15 @@ var qe = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], P = "RadioGroup",
       required: i = !1,
       disabled: v = !1,
       orientation: b,
-      dir: d,
-      loop: u = !0,
+      dir: f,
+      loop: d = !0,
       onValueChange: R,
-      ...m
-    } = e, l = ae(o), f = j(d), [g, p] = Y({
+      ...g
+    } = e, l = ae(o), p = j(f), [m, u] = Y({
       prop: s,
       defaultProp: a ?? null,
       onChange: R,
-      caller: P
+      caller: T
     });
     return /* @__PURE__ */ n(
       je,
@@ -312,25 +315,25 @@ var qe = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], P = "RadioGroup",
         name: r,
         required: i,
         disabled: v,
-        value: g,
-        onValueChange: p,
+        value: m,
+        onValueChange: u,
         children: /* @__PURE__ */ n(
           Oe,
           {
             asChild: !0,
             ...l,
             orientation: b,
-            dir: f,
-            loop: u,
+            dir: p,
+            loop: d,
             children: /* @__PURE__ */ n(
-              F.div,
+              S.div,
               {
                 role: "radiogroup",
                 "aria-required": i,
                 "aria-orientation": b,
                 "data-disabled": v ? "" : void 0,
-                dir: f,
-                ...m,
+                dir: p,
+                ...g,
                 ref: t
               }
             )
@@ -340,16 +343,16 @@ var qe = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], P = "RadioGroup",
     );
   }
 );
-se.displayName = P;
+se.displayName = T;
 var ie = "RadioGroupItem", ce = c.forwardRef(
   (e, t) => {
-    const { __scopeRadioGroup: o, disabled: r, ...a } = e, s = ze(ie, o), i = s.disabled || r, v = ae(o), b = ne(o), d = c.useRef(null), u = G(t, d), R = s.value === a.value, m = c.useRef(!1);
+    const { __scopeRadioGroup: o, disabled: r, ...a } = e, s = ze(ie, o), i = s.disabled || r, v = ae(o), b = ne(o), f = c.useRef(null), d = P(t, f), R = s.value === a.value, g = c.useRef(!1);
     return c.useEffect(() => {
-      const l = (g) => {
-        qe.includes(g.key) && (m.current = !0);
-      }, f = () => m.current = !1;
-      return document.addEventListener("keydown", l), document.addEventListener("keyup", f), () => {
-        document.removeEventListener("keydown", l), document.removeEventListener("keyup", f);
+      const l = (m) => {
+        qe.includes(m.key) && (g.current = !0);
+      }, p = () => g.current = !1;
+      return document.addEventListener("keydown", l), document.addEventListener("keyup", p), () => {
+        document.removeEventListener("keydown", l), document.removeEventListener("keyup", p);
       };
     }, []), /* @__PURE__ */ n(
       Me,
@@ -367,13 +370,13 @@ var ie = "RadioGroupItem", ce = c.forwardRef(
             ...b,
             ...a,
             name: s.name,
-            ref: u,
+            ref: d,
             onCheck: () => s.onValueChange(a.value),
             onKeyDown: w((l) => {
               l.key === "Enter" && l.preventDefault();
             }),
             onFocus: w(a.onFocus, () => {
-              m.current && d.current?.click();
+              g.current && f.current?.click();
             })
           }
         )
@@ -395,7 +398,7 @@ const le = Re({
   variant: "default",
   disabledValues: [],
   groupDisabled: !1
-}), _ = "pointer-events-none opacity-60", Xe = A(
+}), A = "pointer-events-none opacity-60", Xe = G(
   ({
     className: e,
     itemClassName: t,
@@ -406,7 +409,7 @@ const le = Re({
     variant: i = "default",
     ...v
   }, b) => {
-    const d = ge(
+    const f = ge(
       () => ({
         orientation: r,
         variant: i,
@@ -417,34 +420,35 @@ const le = Re({
       }),
       [r, i, a, t, s]
     );
-    return /* @__PURE__ */ n(le.Provider, { value: d, children: /* @__PURE__ */ n(
+    return /* @__PURE__ */ n(le.Provider, { value: f, children: /* @__PURE__ */ n(
       $e,
       {
-        className: S(
+        className: F(
           "text-text-primary flex w-full",
-          r === "vertical" ? "flex-col gap-4" : "flex-row gap-4",
+          r === "vertical" ? "flex-col gap-4" : "flex-row gap-5",
+          i === "unstyled" && "w-fit gap-2.5",
           e
         ),
         ref: b,
         onValueChange: o,
         value: s,
-        disabled: d.groupDisabled,
+        disabled: f.groupDisabled,
         ...v
       }
     ) });
   }
 );
 Xe.displayName = "RadioGroup";
-const B = Ie(
-  A(({ value: e, id: t, isDisabled: o, className: r, ...a }, s) => /* @__PURE__ */ n(
+const B = he(
+  G(({ value: e, id: t, isDisabled: o, className: r, ...a }, s) => /* @__PURE__ */ n(
     de,
     {
       ref: s,
-      className: S(
+      className: F(
         "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:ring-1 focus-visible:ring-offset-2",
         "[&[data-state=checked]]:border-radio-border--selected [&[data-state=checked]]:bg-radio-bg",
-        o && _,
+        o && A,
         r
       ),
       disabled: o,
@@ -456,53 +460,56 @@ const B = Ie(
   ))
 );
 B.displayName = "RadioButton";
-const Je = A(
+const Je = G(
   ({ className: e, children: t, value: o, description: r, disabled: a, ...s }, i) => {
-    const { disabledValues: v, groupDisabled: b, itemClassName: d, variant: u, selected: R } = he(le), m = o.toString(), l = s.id?.toString() || m, f = b || v.includes(m) || !!a, g = R === m;
-    return u === "tiles" ? /* @__PURE__ */ n(
-      O,
+    const { disabledValues: v, groupDisabled: b, itemClassName: f, variant: d, selected: R, orientation: g } = Ie(le), l = o.toString(), p = s.id?.toString() || l, m = b || v.includes(l) || !!a, u = R === l;
+    return d === "tiles" ? /* @__PURE__ */ n(
+      _,
       {
-        htmlFor: l,
-        className: S(
+        htmlFor: p,
+        className: F(
           "border-border-subtle flex w-full cursor-pointer items-start rounded-xl border p-4",
-          g && "border-tile-border--selected bg-tile-bg--selected",
-          f && _,
-          d,
+          u && "border-tile-border--selected bg-tile-bg--selected",
+          m && A,
+          f,
           e
         ),
         children: /* @__PURE__ */ N("div", { className: "flex w-full items-start justify-between gap-4", children: [
-          /* @__PURE__ */ n("div", { className: "relative top-0.75 mr-3 flex-shrink-0", children: /* @__PURE__ */ n(B, { ref: i, value: m, id: l, isDisabled: f, ...s }) }),
+          /* @__PURE__ */ n("div", { className: "relative top-0.75 mr-3 flex-shrink-0", children: /* @__PURE__ */ n(B, { ref: i, value: l, id: p, isDisabled: m, ...s }) }),
           /* @__PURE__ */ N("div", { className: "flex flex-grow flex-col", children: [
             /* @__PURE__ */ n("div", { className: "font-bold", children: t }),
             r && /* @__PURE__ */ n("div", { className: "mt-1 text-sm", children: r })
           ] })
         ] })
       }
-    ) : u === "unstyled" ? /* @__PURE__ */ n(
-      de,
+    ) : d === "unstyled" ? /* @__PURE__ */ n(de, { ref: i, value: l, id: p, disabled: m, asChild: !0, ...s, children: /* @__PURE__ */ n(
+      _,
       {
-        ref: i,
-        value: m,
-        id: l,
-        disabled: f,
-        className: S(
+        htmlFor: p,
+        className: F(
           "[&[data-state=checked]]:border-radio-border--selected flex h-fit w-fit rounded border-2 border-transparent",
-          f && _,
-          d,
+          m && A,
+          f,
           e
         ),
-        ...s,
         children: t
       }
-    ) : /* @__PURE__ */ N("div", { className: S("flex items-center", f && _, d, e), children: [
-      /* @__PURE__ */ n(B, { ref: i, value: m, id: l, isDisabled: f, ...s }),
-      t && /* @__PURE__ */ n(O, { className: "text-md ml-2 cursor-pointer font-normal", htmlFor: l, children: t })
+    ) }) : /* @__PURE__ */ N("div", { className: F("flex items-center", m && A, f, e, g), children: [
+      /* @__PURE__ */ n(B, { ref: i, value: l, id: p, isDisabled: m, ...s }),
+      t && /* @__PURE__ */ n(
+        _,
+        {
+          className: F("text-md cursor-pointer font-normal", g === "vertical" ? "ml-2" : "ml-1"),
+          htmlFor: p,
+          children: t
+        }
+      )
     ] });
   }
 );
 Je.displayName = "RadioGroup.Item";
-const Qe = A(
-  ({ className: e, ...t }, o) => /* @__PURE__ */ n(O, { ref: o, className: S("text-md block font-medium", e), ...t })
+const Qe = G(
+  ({ className: e, ...t }, o) => /* @__PURE__ */ n(_, { ref: o, className: F("text-md block font-medium", e), ...t })
 );
 Qe.displayName = "RadioGroup.Label";
 export {