@spear-ai/spectral 1.3.56 → 1.3.57

package/dist/RadioGroup.js

@@ -1,41 +1,512 @@
 "use client";
 import "./styles/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,
+import { jsx as n, jsxs as N } from "react/jsx-runtime";
+import { Label as O } 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(
+  x,
+  [Ne]
+), [Ae, Ge] = _e(x), $ = c.forwardRef(
+  (e, t) => /* @__PURE__ */ n(M.Provider, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ n(M.Slot, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ n(Pe, { ...e, ref: t }) }) })
+);
+$.displayName = x;
+var Pe = c.forwardRef((e, t) => {
+  const {
+    __scopeRovingFocusGroup: o,
+    orientation: r,
+    loop: a = !1,
+    dir: s,
+    currentTabStopId: i,
+    defaultCurrentTabStopId: v,
+    onCurrentTabStopIdChange: b,
+    onEntryFocus: d,
+    preventScrollOnEntryFocus: u = !1,
+    ...R
+  } = e, m = c.useRef(null), l = G(t, m), f = j(s), [g, p] = 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);
+  return c.useEffect(() => {
+    const I = m.current;
+    if (I)
+      return I.addEventListener(L, h), () => I.removeEventListener(L, h);
+  }, [h]), /* @__PURE__ */ n(
+    Ae,
+    {
+      scope: o,
+      orientation: r,
+      dir: f,
+      loop: a,
+      currentTabStopId: g,
+      onItemFocus: c.useCallback(
+        (I) => p(I),
+        [p]
+      ),
+      onItemShiftTab: c.useCallback(() => T(!0), []),
+      onFocusableItemAdd: c.useCallback(
+        () => V((I) => I + 1),
+        []
+      ),
+      onFocusableItemRemove: c.useCallback(
+        () => V((I) => I - 1),
+        []
+      ),
+      children: /* @__PURE__ */ n(
+        F.div,
+        {
+          tabIndex: y || fe === 0 ? -1 : 0,
+          "data-orientation": r,
+          ...R,
+          ref: l,
+          style: { outline: "none", ...e.style },
+          onMouseDown: w(e.onMouseDown, () => {
+            k.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(
+                  Boolean
+                ).map((E) => E.ref.current);
+                J(be, u);
+              }
+            }
+            k.current = !1;
+          }),
+          onBlur: w(e.onBlur, () => T(!1))
+        }
+      )
+    }
+  );
+}), W = "RovingFocusGroupItem", X = c.forwardRef(
+  (e, t) => {
+    const {
+      __scopeRovingFocusGroup: o,
+      focusable: r = !0,
+      active: a = !1,
+      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;
+    return c.useEffect(() => {
+      if (r)
+        return l(), () => f();
+    }, [r, l, f]), /* @__PURE__ */ n(
+      M.ItemSlot,
+      {
+        scope: o,
+        id: d,
+        focusable: r,
+        active: a,
+        children: /* @__PURE__ */ n(
+          F.span,
+          {
+            tabIndex: R ? 0 : -1,
+            "data-orientation": u.orientation,
+            ...v,
+            ref: t,
+            onMouseDown: w(e.onMouseDown, (p) => {
+              r ? u.onItemFocus(d) : p.preventDefault();
+            }),
+            onFocus: w(e.onFocus, () => u.onItemFocus(d)),
+            onKeyDown: w(e.onKeyDown, (p) => {
+              if (p.key === "Tab" && p.shiftKey) {
+                u.onItemShiftTab();
+                return;
+              }
+              if (p.target !== p.currentTarget) return;
+              const y = De(p, u.orientation, u.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();
+                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);
+                }
+                setTimeout(() => J(h));
+              }
+            }),
+            children: typeof i == "function" ? i({ isCurrentTabStop: R, hasTabStop: g != null }) : i
+          }
+        )
+      }
+    );
+  }
+);
+X.displayName = W;
+var Te = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  PageUp: "first",
+  Home: "first",
+  PageDown: "last",
+  End: "last"
+};
+function ke(e, t) {
+  return t !== "rtl" ? e : e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e;
+}
+function De(e, t, o) {
+  const r = ke(e.key, o);
+  if (!(t === "vertical" && ["ArrowLeft", "ArrowRight"].includes(r)) && !(t === "horizontal" && ["ArrowUp", "ArrowDown"].includes(r)))
+    return Te[r];
+}
+function J(e, t = !1) {
+  const o = document.activeElement;
+  for (const r of e)
+    if (r === o || (r.focus({ preventScroll: t }), document.activeElement !== o)) return;
+}
+function Le(e, t) {
+  return e.map((o, r) => e[(t + r) % e.length]);
+}
+var Oe = $, Me = X, U = "Radio", [Be, Q] = K(U), [Ke, Ue] = Be(U), Z = c.forwardRef(
+  (e, t) => {
+    const {
+      __scopeRadio: o,
+      name: r,
+      checked: a = !1,
+      required: s,
+      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;
+    return /* @__PURE__ */ N(Ke, { scope: o, checked: a, disabled: i, children: [
+      /* @__PURE__ */ n(
+        F.button,
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": a,
+          "data-state": re(a),
+          "data-disabled": i ? "" : void 0,
+          disabled: i,
+          value: v,
+          ...u,
+          ref: l,
+          onClick: w(e.onClick, (p) => {
+            a || b?.(), g && (f.current = p.isPropagationStopped(), f.current || p.stopPropagation());
+          })
+        }
+      ),
+      g && /* @__PURE__ */ n(
+        te,
+        {
+          control: R,
+          bubbles: !f.current,
+          name: r,
+          value: v,
+          checked: a,
+          required: s,
+          disabled: i,
+          form: d,
+          style: { transform: "translateX(-100%)" }
+        }
+      )
+    ] });
+  }
+);
+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,
+      {
+        "data-state": re(s.checked),
+        "data-disabled": s.disabled ? "" : void 0,
+        ...a,
+        ref: t
+      }
+    ) });
+  }
+);
+oe.displayName = ee;
+var Ve = "RadioBubbleInput", te = c.forwardRef(
+  ({
+    __scopeRadio: e,
+    control: t,
+    checked: o,
+    bubbles: r = !0,
     ...a
+  }, s) => {
+    const i = c.useRef(null), v = G(i, s), b = Ee(o), d = Se(t);
+    return c.useEffect(() => {
+      const u = i.current;
+      if (!u) 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);
+      }
+    }, [b, o, r]), /* @__PURE__ */ n(
+      F.input,
+      {
+        type: "radio",
+        "aria-hidden": !0,
+        defaultChecked: o,
+        ...a,
+        tabIndex: -1,
+        ref: v,
+        style: {
+          ...a.style,
+          ...d,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        }
+      }
+    );
   }
-) }), 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,
+);
+te.displayName = Ve;
+function re(e) {
+  return e ? "checked" : "unchecked";
+}
+var qe = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], P = "RadioGroup", [Ye] = K(P, [
+  H,
+  Q
+]), ae = H(), ne = Q(), [je, ze] = Ye(P), se = c.forwardRef(
+  (e, t) => {
+    const {
+      __scopeRadioGroup: o,
+      name: r,
+      defaultValue: a,
+      value: s,
+      required: i = !1,
+      disabled: v = !1,
+      orientation: b,
+      dir: d,
+      loop: u = !0,
+      onValueChange: R,
+      ...m
+    } = e, l = ae(o), f = j(d), [g, p] = Y({
+      prop: s,
+      defaultProp: a ?? null,
+      onChange: R,
+      caller: P
+    });
+    return /* @__PURE__ */ n(
+      je,
       {
-        "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" })
+        scope: o,
+        name: r,
+        required: i,
+        disabled: v,
+        value: g,
+        onValueChange: p,
+        children: /* @__PURE__ */ n(
+          Oe,
+          {
+            asChild: !0,
+            ...l,
+            orientation: b,
+            dir: f,
+            loop: u,
+            children: /* @__PURE__ */ n(
+              F.div,
+              {
+                role: "radiogroup",
+                "aria-required": i,
+                "aria-orientation": b,
+                "data-disabled": v ? "" : void 0,
+                dir: f,
+                ...m,
+                ref: t
+              }
+            )
+          }
+        )
       }
-    ),
-    o
-  ] });
-};
+    );
+  }
+);
+se.displayName = P;
+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);
+    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);
+      };
+    }, []), /* @__PURE__ */ n(
+      Me,
+      {
+        asChild: !0,
+        ...v,
+        focusable: !i,
+        active: R,
+        children: /* @__PURE__ */ n(
+          Z,
+          {
+            disabled: i,
+            required: s.required,
+            checked: R,
+            ...b,
+            ...a,
+            name: s.name,
+            ref: u,
+            onCheck: () => s.onValueChange(a.value),
+            onKeyDown: w((l) => {
+              l.key === "Enter" && l.preventDefault();
+            }),
+            onFocus: w(a.onFocus, () => {
+              m.current && d.current?.click();
+            })
+          }
+        )
+      }
+    );
+  }
+);
+ce.displayName = ie;
+var He = "RadioGroupIndicator", ue = c.forwardRef(
+  (e, t) => {
+    const { __scopeRadioGroup: o, ...r } = e, a = ne(o);
+    return /* @__PURE__ */ n(oe, { ...a, ...r, ref: t });
+  }
+);
+ue.displayName = He;
+var $e = se, de = ce, We = ue;
+const le = Re({
+  orientation: "vertical",
+  variant: "default",
+  disabledValues: [],
+  groupDisabled: !1
+}), _ = "pointer-events-none opacity-60", Xe = A(
+  ({
+    className: e,
+    itemClassName: t,
+    onValueChange: o,
+    orientation: r = "vertical",
+    disabled: a,
+    selected: s,
+    variant: i = "default",
+    ...v
+  }, b) => {
+    const d = ge(
+      () => ({
+        orientation: r,
+        variant: i,
+        disabledValues: Array.isArray(a) ? a : [],
+        groupDisabled: typeof a == "boolean" ? a : !1,
+        itemClassName: t,
+        selected: s
+      }),
+      [r, i, a, t, s]
+    );
+    return /* @__PURE__ */ n(le.Provider, { value: d, children: /* @__PURE__ */ n(
+      $e,
+      {
+        className: S(
+          "text-text-primary flex w-full",
+          r === "vertical" ? "flex-col gap-4" : "flex-row gap-4",
+          e
+        ),
+        ref: b,
+        onValueChange: o,
+        value: s,
+        disabled: d.groupDisabled,
+        ...v
+      }
+    ) });
+  }
+);
+Xe.displayName = "RadioGroup";
+const B = Ie(
+  A(({ value: e, id: t, isDisabled: o, className: r, ...a }, s) => /* @__PURE__ */ n(
+    de,
+    {
+      ref: s,
+      className: S(
+        "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 && _,
+        r
+      ),
+      disabled: o,
+      value: e,
+      id: t,
+      ...a,
+      children: /* @__PURE__ */ n(We, { className: "after:bg-radio-bg--selected transition-colors after:absolute after:inset-0 after:m-auto after:h-2.5 after:w-2.5 after:rounded-full after:content-['']" })
+    }
+  ))
+);
+B.displayName = "RadioButton";
+const Je = A(
+  ({ 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,
+      {
+        htmlFor: l,
+        className: S(
+          "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,
+          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: "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,
+      {
+        ref: i,
+        value: m,
+        id: l,
+        disabled: f,
+        className: S(
+          "[&[data-state=checked]]:border-radio-border--selected flex h-fit w-fit rounded border-2 border-transparent",
+          f && _,
+          d,
+          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 })
+    ] });
+  }
+);
+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 })
+);
+Qe.displayName = "RadioGroup.Label";
 export {
-  v as RadioGroup,
-  C as RadioGroupItem
+  Xe as RadioGroup,
+  Je as RadioGroupItem,
+  Qe as RadioGroupLabel
 };