@spear-ai/spectral 1.3.20 → 1.3.22

package/dist/RadioGroup/RadioGroupBase.js

@@ -1,21 +1,21 @@
 "use client";
-import { jsx as j, jsxs as M } from "react/jsx-runtime";
-import { Slot as S } from "../primitives/slot.js";
-import { createContext as T, forwardRef as L, useId as U, useState as P, useRef as E, useEffect as I, useCallback as C, useContext as $, useImperativeHandle as B } from "react";
+import { jsx as A, jsxs as T } from "react/jsx-runtime";
+import { Slot as L } from "../primitives/slot.js";
+import { createContext as z, forwardRef as P, useId as $, useState as U, useRef as G, useEffect as C, useCallback as E, useContext as B, useImperativeHandle as K } from "react";
 function q(...s) {
   return s.filter(Boolean).join(" ");
 }
-const H = T(null);
-function z(s) {
-  const { value: i, defaultValue: t, onChange: r } = s, [d, n] = P(t), u = i !== void 0, R = u ? i : d, l = C(
+const H = z(null);
+function J(s) {
+  const { value: i, defaultValue: t, onChange: r } = s, [d, n] = U(t), u = i !== void 0, g = u ? i : d, l = E(
     (e) => {
       u || n(e), r?.(e);
     },
     [u, r]
   );
-  return [R, l];
+  return [g, l];
 }
-function J(s, i, t, r) {
+function Q(s, i, t, r) {
   const d = s.length;
   let n = i;
   for (let u = 0; u < d; u += 1) {
@@ -24,11 +24,11 @@ function J(s, i, t, r) {
   }
   return i;
 }
-function Q(s, i, t) {
+function W(s, i, t) {
   const { key: r } = s;
   return r === "Home" ? "first" : r === "End" ? "last" : i === "vertical" ? r === "ArrowDown" ? "next" : r === "ArrowUp" ? "prev" : null : r === "ArrowRight" ? t === "rtl" ? "prev" : "next" : r === "ArrowLeft" ? t === "rtl" ? "next" : "prev" : null;
 }
-const W = L(
+const X = P(
   ({
     asChild: s,
     className: i,
@@ -37,154 +37,156 @@ const W = L(
     onValueChange: d,
     name: n,
     required: u = !1,
-    form: R,
+    form: g,
     disabled: l = !1,
     orientation: e = "vertical",
-    dir: V = "ltr",
-    loop: b = !0,
-    id: v,
-    ...f
-  }, p) => {
-    const m = U(), O = v ?? `rg-${m}`, [x, y] = z({
+    dir: N = "ltr",
+    loop: p = !0,
+    variant: m = "default",
+    id: f,
+    ...b
+  }, v) => {
+    const O = $(), F = f ?? `rg-${O}`, [R, x] = J({
       value: t,
       defaultValue: r ?? void 0,
       onChange: d
-    }), [A, g] = P(x), k = E([]), G = E(null);
-    I(() => {
-      x !== void 0 && g(x);
-    }, [x]), I(() => {
-      const c = G.current;
+    }), [w, V] = U(R), y = G([]), I = G(null);
+    C(() => {
+      R !== void 0 && V(R);
+    }, [R]), C(() => {
+      const c = I.current;
       if (!c) return;
       const a = () => {
-        y(r ?? void 0);
+        x(r ?? void 0);
       };
       return c.addEventListener("reset", a), () => c.removeEventListener("reset", a);
-    }, [r, y]);
-    const o = C((c) => (k.current.push(c), () => {
-      k.current = k.current.filter((a) => a.value !== c.value);
-    }), []), h = C(
+    }, [r, x]);
+    const o = E((c) => (y.current.push(c), () => {
+      y.current = y.current.filter((a) => a.value !== c.value);
+    }), []), h = E(
       (c, a) => {
-        l || (y(c), a?.focus && (g(c), k.current.find((K) => K.value === c)?.ref.current?.focus()));
+        l || (x(c), a?.focus && (V(c), y.current.find((M) => M.value === c)?.ref.current?.focus()));
       },
-      [l, y]
-    ), w = {
-      value: x,
+      [l, x]
+    ), k = {
+      value: R,
       setValue: h,
       name: n,
       required: u,
-      form: R,
+      form: g,
       disabled: l,
       orientation: e,
-      dir: V,
-      loop: b,
+      dir: N,
+      loop: p,
       registerItem: o,
-      focusableValue: A,
-      setFocusableValue: g,
-      formElRef: G,
-      itemsRef: k
-    }, N = s ? S : "div", F = p;
-    return /* @__PURE__ */ j(H.Provider, { value: w, children: /* @__PURE__ */ j(
-      N,
+      focusableValue: w,
+      setFocusableValue: V,
+      formElRef: I,
+      itemsRef: y,
+      variant: m
+    }, D = s ? L : "div", S = v;
+    return /* @__PURE__ */ A(H.Provider, { value: k, children: /* @__PURE__ */ A(
+      D,
       {
-        id: O,
-        ref: F,
+        id: F,
+        ref: S,
         role: "radiogroup",
         "aria-orientation": e,
         "data-disabled": l ? "" : void 0,
         className: q(i),
-        ...f
+        ...b
       }
     ) });
   }
 );
-W.displayName = "RadioGroup";
-const X = L(
-  ({ asChild: s, className: i, value: t, disabled: r, id: d, onKeyDown: n, onClick: u, ...R }, l) => {
-    const e = $(H);
+X.displayName = "RadioGroup";
+const Y = P(
+  ({ asChild: s, className: i, value: t, disabled: r, id: d, onKeyDown: n, onClick: u, ...g }, l) => {
+    const e = B(H);
     if (!e) throw new Error("RadioGroupItem must be used within RadioGroup");
-    const V = U(), b = d ?? `rgi-${V}`, v = E(null), f = E(null);
-    B(
+    const N = $(), p = d ?? `rgi-${N}`, m = G(null), f = G(null);
+    K(
       l,
-      () => v.current,
+      () => m.current,
       []
     );
-    const p = e.value === t, m = !!r || e.disabled;
-    I(() => {
-      const o = { value: t, ref: v, disabled: !!m, id: b };
+    const b = e.value === t, v = !!r || e.disabled;
+    C(() => {
+      const o = { value: t, ref: m, disabled: !!v, id: p };
       return e.registerItem(o);
-    }, [t, m, b]), I(() => {
+    }, [t, v, p]), C(() => {
       !e.formElRef.current && f.current?.form && (e.formElRef.current = f.current.form);
-    }, [e.formElRef]), I(() => {
-      f.current && (f.current.checked = p);
-    }, [p]);
-    const x = (e.focusableValue ? e.focusableValue === t : p) && !m ? 0 : -1, y = s ? S : "button", A = (o) => {
-      v.current = o;
-    }, g = C(
+    }, [e.formElRef]), C(() => {
+      f.current && (f.current.checked = b);
+    }, [b]);
+    const F = (e.focusableValue ? e.focusableValue === t : b) && !v ? 0 : -1, R = s ? L : "button", x = (o) => {
+      m.current = o;
+    }, w = E(
       (o) => {
-        if (!m && (e.setValue(t, { focus: !0, user: o }), f.current)) {
+        if (!v && (e.setValue(t, { focus: !0, user: o }), f.current)) {
           const h = new Event("change", { bubbles: !0 });
           f.current.dispatchEvent(h);
         }
       },
-      [e, m, t]
-    ), k = C(
+      [e, v, t]
+    ), V = E(
       (o) => {
-        u?.(o), !o.defaultPrevented && g(!0);
+        u?.(o), !o.defaultPrevented && w(!0);
       },
-      [u, g]
-    ), G = C(
+      [u, w]
+    ), y = E(
       (o) => {
         if (n?.(o), o.defaultPrevented) return;
         if (o.key === " " || o.key === "Enter") {
-          o.preventDefault(), g(!0);
+          o.preventDefault(), w(!0);
           return;
         }
-        const h = Q(o, e.orientation, e.dir);
+        const h = W(o, e.orientation, e.dir);
         if (h) {
           o.preventDefault();
-          const w = [...e.itemsRef.current], N = w.findIndex((a) => a.value === t);
-          if (N === -1) return;
+          const k = [...e.itemsRef.current], D = k.findIndex((a) => a.value === t);
+          if (D === -1) return;
           if (h === "first") {
-            const a = w.find((D) => !D.disabled);
+            const a = k.find((j) => !j.disabled);
             a && e.setValue(a.value, { focus: !0, user: !0 });
             return;
           }
           if (h === "last") {
-            const a = [...w].reverse().find((D) => !D.disabled);
+            const a = [...k].reverse().find((j) => !j.disabled);
             a && e.setValue(a.value, { focus: !0, user: !0 });
             return;
           }
-          const F = J(w, N, h, e.loop), c = w[F];
+          const S = Q(k, D, h, e.loop), c = k[S];
           c && !c.disabled && e.setValue(c.value, { focus: !0, user: !0 });
         }
       },
-      [e, n, g, t]
-    );
-    return /* @__PURE__ */ M(
-      y,
+      [e, n, w, t]
+    ), I = e.variant === "unstyled";
+    return /* @__PURE__ */ T(
+      R,
       {
-        id: b,
-        ref: A,
+        id: p,
+        ref: x,
         type: "button",
         role: "radio",
-        "aria-checked": p,
-        "aria-disabled": m || void 0,
-        "data-state": p ? "checked" : "unchecked",
-        "data-disabled": m ? "" : void 0,
-        tabIndex: x,
-        onClick: k,
-        onKeyDown: G,
+        "aria-checked": b,
+        "aria-disabled": v || void 0,
+        "data-state": b ? "checked" : "unchecked",
+        "data-disabled": v ? "" : void 0,
+        tabIndex: F,
+        onClick: V,
+        onKeyDown: y,
         className: q(
-          "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full",
-          "border-input bg-background border",
-          "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
-          "data-[state=checked]:border-primary data-[state=checked]:bg-primary/10",
-          "disabled:cursor-not-allowed disabled:opacity-50",
+          // Only apply default styles when not unstyled
+          !I && "border-input bg-background focus-visible:ring-ring inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border focus-visible:ring-2 focus-visible:ring-offset-2",
+          !I && "data-[state=checked]:border-primary data-[state=checked]:bg-primary/10 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          // Always preserve basic accessibility for unstyled variant
+          I && "border-sm focus-visible:ring-ring data-[state=checked]:border-selected-primary cursor-pointer rounded-sm border-2 border-transparent transition-opacity hover:opacity-70 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
           i
         ),
-        ...R,
+        ...g,
         children: [
-          /* @__PURE__ */ j(
+          /* @__PURE__ */ A(
             "input",
             {
               ref: f,
@@ -192,9 +194,9 @@ const X = L(
               name: e.name,
               value: t,
               required: e.required,
-              disabled: m,
+              disabled: v,
               form: e.form,
-              checked: p,
+              checked: b,
               readOnly: !0,
               tabIndex: -1,
               "aria-hidden": "true",
@@ -207,37 +209,37 @@ const X = L(
               }
             }
           ),
-          R.children
+          g.children
         ]
       }
     );
   }
 );
-X.displayName = "RadioGroupItem";
-const Y = L(
+Y.displayName = "RadioGroupItem";
+const Z = P(
   ({ asChild: s, className: i, forceMount: t, ...r }, d) => {
-    if (!$(H)) return null;
-    const [u, R] = P(!1), l = E(null);
-    return B(
+    if (!B(H)) return null;
+    const [u, g] = U(!1), l = G(null);
+    return K(
       d,
       () => l.current,
       []
-    ), I(() => {
-      const b = l.current;
-      if (!b) return;
-      const v = b.closest('[role="radio"]');
-      if (!v) return;
+    ), C(() => {
+      const p = l.current;
+      if (!p) return;
+      const m = p.closest('[role="radio"]');
+      if (!m) return;
       const f = () => {
-        R(v.getAttribute("aria-checked") === "true");
+        g(m.getAttribute("aria-checked") === "true");
       };
       f();
-      const p = new MutationObserver(f);
-      return p.observe(v, { attributes: !0, attributeFilter: ["aria-checked"] }), () => p.disconnect();
-    }, []), !u && !t ? null : /* @__PURE__ */ j(
-      s ? S : "span",
+      const b = new MutationObserver(f);
+      return b.observe(m, { attributes: !0, attributeFilter: ["aria-checked"] }), () => b.disconnect();
+    }, []), !u && !t ? null : /* @__PURE__ */ A(
+      s ? L : "span",
       {
-        ref: (b) => {
-          l.current = b;
+        ref: (p) => {
+          l.current = p;
         },
         "data-state": u ? "checked" : "unchecked",
         className: q("flex items-center justify-center text-current", i),
@@ -246,9 +248,9 @@ const Y = L(
     );
   }
 );
-Y.displayName = "RadioGroupIndicator";
+Z.displayName = "RadioGroupIndicator";
 export {
-  W as RadioGroup,
-  Y as RadioGroupIndicator,
-  X as RadioGroupItem
+  X as RadioGroup,
+  Z as RadioGroupIndicator,
+  Y as RadioGroupItem
 };

package/dist/RadioGroup.js

@@ -0,0 +1,41 @@
+"use client";
+import './assets/main.css';
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { RadioGroup as l, RadioGroupItem as n, RadioGroupIndicator as m } from "./RadioGroup/RadioGroupBase.js";
+import { c as e } from "./twUtils-CRiPKpXj.js";
+import { createContext as u, useContext as p } from "react";
+import { c as f } from "./createLucideIcon-CI1yJrZf.js";
+/**
+ * @license lucide-react v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const x = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]], y = f("circle", x), i = u({
+  variant: "default"
+}), v = ({ className: r, variant: o = "default", ...a }) => /* @__PURE__ */ t(i.Provider, { value: { variant: o }, children: /* @__PURE__ */ t(
+  l,
+  {
+    "data-slot": "radio-group",
+    className: e("grid gap-3", r),
+    variant: o,
+    ...a
+  }
+) }), C = ({ className: r, children: o, ...a }) => {
+  const { variant: s } = p(i), c = s === "unstyled";
+  return /* @__PURE__ */ d(n, { "data-slot": "radio-group-item", className: e(r), ...a, children: [
+    !c && /* @__PURE__ */ t(
+      m,
+      {
+        "data-slot": "radio-group-indicator",
+        className: "relative flex items-center justify-center",
+        children: /* @__PURE__ */ t(y, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" })
+      }
+    ),
+    o
+  ] });
+};
+export {
+  v as RadioGroup,
+  C as RadioGroupItem
+};