@spear-ai/spectral 1.3.44 → 1.3.46

package/dist/Input.js

@@ -1,24 +1,24 @@
 "use client";
 import "./styles/main.css";
 import { jsx as t, jsxs as I } from "react/jsx-runtime";
-import { usePasswordVisibility as Q, usePrefixWidth as U, useClearOnFocus as X } from "./Input/InputUtils.js";
+import { usePasswordVisibility as U, usePrefixWidth as X, useClearOnFocus as Y } from "./Input/InputUtils.js";
 import "./Icons/AnnotationsIcon.js";
 import "./Icons/CalendarIcon.js";
-import { CheckCircleIcon as Y } from "./Icons/CheckCircleIcon.js";
+import { CheckCircleIcon as Z } from "./Icons/CheckCircleIcon.js";
 import "./Icons/CheckSquareIcon.js";
 import "./Icons/ChevronDownIcon.js";
 import "./Icons/ChevronUpIcon.js";
 import "./Icons/ClockIcon.js";
-import { CloseCircleIcon as Z } from "./Icons/CloseCircleIcon.js";
+import { CloseCircleIcon as _ } from "./Icons/CloseCircleIcon.js";
 import "./Icons/CloseIcon.js";
 import "./Icons/DashboardIcon.js";
 import "./Icons/DeleteIcon.js";
 import "./Icons/DurationIcon.js";
 import "./Icons/EraserIcon.js";
-import { ErrorIcon as _ } from "./Icons/ErrorIcon.js";
-import { EyeClosedIcon as q } from "./Icons/EyeClosedIcon.js";
+import { ErrorIcon as q } from "./Icons/ErrorIcon.js";
+import { EyeClosedIcon as tt } from "./Icons/EyeClosedIcon.js";
 import "./Icons/EyeClosedIcon2.js";
-import { EyeOpenIcon as tt } from "./Icons/EyeOpenIcon.js";
+import { EyeOpenIcon as et } from "./Icons/EyeOpenIcon.js";
 import "./Icons/GoToFirstIcon.js";
 import "./Icons/GoToLastIcon.js";
 import "./Icons/HarmonicCursorsIcon.js";
@@ -27,7 +27,7 @@ import "./Icons/LabelIcon.js";
 import "./Icons/LassoIcon.js";
 import "./Icons/LineToolIcon.js";
 import "./Icons/LiveViewIcon.js";
-import { LoaderIcon as et } from "./Icons/LoaderIcon.js";
+import { LoaderIcon as rt } from "./Icons/LoaderIcon.js";
 import "./Icons/LocationIcon.js";
 import "./Icons/LogoutIcon.js";
 import "./Icons/MetadataIcon.js";
@@ -45,10 +45,10 @@ import "./Icons/WarningIcon.js";
 import "./Icons/ZoomAllIcon.js";
 import "./Icons/ZoomXIcon.js";
 import "./Icons/ZoomYIcon.js";
-import { useFormFieldId as rt, getAriaProps as ot, getInputClasses as it, useFormFieldState as st, getFormFieldCSSProperties as at, ErrorMessage as nt } from "./utils/formFieldUtils.js";
+import { useFormFieldId as ot, getAriaProps as it, getInputClasses as st, useFormFieldState as at, getFormFieldCSSProperties as nt, ErrorMessage as pt } from "./utils/formFieldUtils.js";
 import { c as N } from "./twUtils-CRiPKpXj.js";
-import { forwardRef as pt, useRef as lt, useCallback as m } from "react";
-const ct = (p) => ({
+import { forwardRef as lt, useRef as ct, useCallback as m } from "react";
+const mt = (p) => ({
   email: "email",
   password: "current-password",
   tel: "tel",
@@ -57,7 +57,7 @@ const ct = (p) => ({
   number: "off",
   date: "off",
   "datetime-local": "off"
-})[p] || "off", mt = pt(
+})[p] || "off", dt = lt(
   ({
     className: p,
     clearOnFocus: d = !1,
@@ -71,39 +71,40 @@ const ct = (p) => ({
     onFocus: C,
     prefix: a,
     showClearButton: z = !1,
+    suppressHydrationWarning: P = !0,
     state: e = "default",
     type: n = "text",
     value: g = "",
     required: x,
-    "aria-label": P,
-    "aria-describedby": R,
-    ...$
-  }, k) => {
-    const l = rt(E, f), w = `${l}-error`, { isDisabled: S, isLoading: V, isInvalid: M } = st(F, e), O = ot(e, x, w, R), j = lt(null), r = k || j, { isVisible: c, toggleVisibility: A, inputType: B } = Q(), { prefixWidth: H, prefixRef: L } = U(a), { handleFocus: y } = X(d, b), W = m(
+    "aria-label": R,
+    "aria-describedby": $,
+    ...k
+  }, S) => {
+    const l = ot(E, f), w = `${l}-error`, { isDisabled: V, isLoading: M, isInvalid: O } = at(F, e), j = it(e, x, w, $), A = ct(null), r = S || A, { isVisible: c, toggleVisibility: B, inputType: H } = U(), { prefixWidth: L, prefixRef: W } = X(a), { handleFocus: y } = Y(d, b), D = m(
       (o) => {
         h?.(o);
       },
       [h]
-    ), D = m(
+    ), T = m(
       (o) => {
         y(o, C);
       },
       [y, C]
-    ), T = m(() => {
+    ), G = m(() => {
       r.current && (r.current.value = "", r.current.dispatchEvent(new Event("input", { bubbles: !0 })), r.current.focus());
-    }, [r]), v = z && g.length > 0, G = () => {
+    }, [r]), v = z && g.length > 0, J = () => {
       const o = "absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer", s = {
         password: () => /* @__PURE__ */ t(
           "button",
           {
             className: o,
             type: "button",
-            onClick: A,
+            onClick: B,
             "aria-label": c ? `Hide ${i}` : `Show ${i}`,
             "aria-pressed": c,
             "aria-controls": l,
             "data-testid": "input-password-toggle",
-            children: c ? /* @__PURE__ */ t(q, { size: 22 }) : /* @__PURE__ */ t(tt, { size: 22 })
+            children: c ? /* @__PURE__ */ t(tt, { size: 22 }) : /* @__PURE__ */ t(et, { size: 22 })
           }
         ),
         clear: () => /* @__PURE__ */ t(
@@ -111,60 +112,61 @@ const ct = (p) => ({
           {
             className: o,
             type: "button",
-            onClick: T,
+            onClick: G,
             "aria-label": `Clear ${i}`,
             "data-testid": "input-clear-button",
-            children: /* @__PURE__ */ t(Z, { size: 24 })
+            children: /* @__PURE__ */ t(_, { size: 24 })
           }
         ),
-        loading: () => /* @__PURE__ */ t("div", { className: "absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "input-loading-icon", children: /* @__PURE__ */ t(et, { size: 24 }) }),
-        error: () => /* @__PURE__ */ t("div", { className: "text-danger-400 absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "input-error-icon", children: /* @__PURE__ */ t(_, { size: 24 }) }),
-        success: () => /* @__PURE__ */ t("div", { className: "text-success-400 absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "input-success-icon", children: /* @__PURE__ */ t(Y, { size: 24 }) })
+        loading: () => /* @__PURE__ */ t("div", { className: "absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "input-loading-icon", children: /* @__PURE__ */ t(rt, { size: 24 }) }),
+        error: () => /* @__PURE__ */ t("div", { className: "text-danger-400 absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "input-error-icon", children: /* @__PURE__ */ t(q, { size: 24 }) }),
+        success: () => /* @__PURE__ */ t("div", { className: "text-success-400 absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "input-success-icon", children: /* @__PURE__ */ t(Z, { size: 24 }) })
       };
-      return n === "password" ? s.password() : v ? s.clear() : V ? s.loading() : e === "success" ? s.success() : e === "error" ? s.error() : null;
-    }, J = N(
-      it(e, p),
+      return n === "password" ? s.password() : v ? s.clear() : M ? s.loading() : e === "success" ? s.success() : e === "error" ? s.error() : null;
+    }, K = N(
+      st(e, p),
       "[text-indent:var(--prefix-width)]",
       v && "pr-10"
-    ), K = N(
+    ), Q = N(
       "pointer-events-none absolute inset-y-0 left-4 flex items-center text-base text-input-text-prefix opacity-100 peer-disabled:opacity-50"
     );
     return /* @__PURE__ */ t("div", { className: "w-full space-y-1.5", "data-testid": "input-root", children: /* @__PURE__ */ I("div", { className: "relative", "data-testid": "input-wrapper", children: [
       /* @__PURE__ */ I("div", { className: "relative", children: [
-        a && /* @__PURE__ */ t("span", { ref: L, className: K, children: a }),
+        a && /* @__PURE__ */ t("span", { ref: W, className: Q, children: a }),
         /* @__PURE__ */ t(
           "input",
           {
             id: l,
             name: f,
             ref: r,
-            type: n === "password" ? B : n,
+            type: n === "password" ? H : n,
             value: g,
-            disabled: S,
+            disabled: V,
             required: x,
-            autoComplete: ct(n),
-            className: J,
+            autoComplete: mt(n),
+            className: K,
             onChange: b,
-            onFocus: D,
-            onBlur: W,
+            onFocus: T,
+            onBlur: D,
             placeholder: i,
-            ...O,
-            ...$,
+            suppressHydrationWarning: P,
+            ...j,
+            ...k,
             "data-testid": "input-input",
             "data-state": e,
-            style: at({
-              "--prefix-width": a ? `${H}px` : "0px"
+            style: nt({
+              "--prefix-width": a ? `${L}px` : "0px"
             }),
-            "aria-label": P || i
+            "aria-label": R || i
           }
         ),
-        G()
+        J()
       ] }),
-      M && u && /* @__PURE__ */ t(nt, { id: w, message: u })
+      O && u && /* @__PURE__ */ t(pt, { id: w, message: u })
     ] }) });
   }
 );
-mt.displayName = "Input";
+dt.displayName = "Input";
 export {
-  mt as Input
+  dt as Input
 };

package/dist/RadioGroup/RadioGroupBase.js

@@ -1,203 +1,195 @@
 "use client";
 import "../styles/main.css";
 import { jsx as A, jsxs as T } from "react/jsx-runtime";
+import { useControllableState as z } from "../hooks/useControllableState.js";
 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(" ");
+import { createContext as J, forwardRef as P, useId as U, useState as $, useRef as V, useEffect as E, useCallback as G, useContext as B, useImperativeHandle as K } from "react";
+function q(...u) {
+  return u.filter(Boolean).join(" ");
 }
-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 [g, l];
-}
-function Q(s, i, t, r) {
-  const d = s.length;
-  let n = i;
-  for (let u = 0; u < d; u += 1) {
-    if (n = t === "next" ? n + 1 : n - 1, r && (n < 0 && (n = d - 1), n >= d && (n = 0)), n < 0 || n >= d) return i;
-    if (!s[n].disabled) return n;
+const H = J(null);
+function Q(u, a, t, o) {
+  const l = u.length;
+  let n = a;
+  for (let f = 0; f < l; f += 1) {
+    if (n = t === "next" ? n + 1 : n - 1, o && (n < 0 && (n = l - 1), n >= l && (n = 0)), n < 0 || n >= l) return a;
+    if (!u[n].disabled) return n;
   }
-  return i;
+  return a;
 }
-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;
+function W(u, a, t) {
+  const { key: o } = u;
+  return o === "Home" ? "first" : o === "End" ? "last" : a === "vertical" ? o === "ArrowDown" ? "next" : o === "ArrowUp" ? "prev" : null : o === "ArrowRight" ? t === "rtl" ? "prev" : "next" : o === "ArrowLeft" ? t === "rtl" ? "next" : "prev" : null;
 }
 const X = P(
   ({
-    asChild: s,
-    className: i,
+    asChild: u,
+    className: a,
     value: t,
-    defaultValue: r,
-    onValueChange: d,
+    defaultValue: o,
+    onValueChange: l,
     name: n,
-    required: u = !1,
-    form: g,
-    disabled: l = !1,
+    required: f = !1,
+    form: y,
+    disabled: b = !1,
     orientation: e = "vertical",
     dir: N = "ltr",
     loop: p = !0,
-    variant: m = "default",
-    id: f,
-    ...b
-  }, v) => {
-    const O = $(), F = f ?? `rg-${O}`, [R, x] = J({
+    variant: v = "default",
+    id: c,
+    ...d
+  }, m) => {
+    const O = U(), F = c ?? `rg-${O}`, [g, k] = z({
       value: t,
-      defaultValue: r ?? void 0,
-      onChange: d
-    }), [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 = () => {
-        x(r ?? void 0);
+      defaultValue: o ?? void 0,
+      onChange: l
+    }), [w, C] = $(g), R = V([]), I = V(null);
+    E(() => {
+      g !== void 0 && C(g);
+    }, [g]), E(() => {
+      const s = I.current;
+      if (!s) return;
+      const i = () => {
+        k(o ?? void 0);
       };
-      return c.addEventListener("reset", a), () => c.removeEventListener("reset", a);
-    }, [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 || (x(c), a?.focus && (V(c), y.current.find((M) => M.value === c)?.ref.current?.focus()));
+      return s.addEventListener("reset", i), () => s.removeEventListener("reset", i);
+    }, [o, k]);
+    const r = G((s) => (R.current.push(s), () => {
+      R.current = R.current.filter((i) => i.value !== s.value);
+    }), []), h = G(
+      (s, i) => {
+        b || (k(s), i?.focus && (C(s), R.current.find((M) => M.value === s)?.ref.current?.focus()));
       },
-      [l, x]
-    ), k = {
-      value: R,
+      [b, k]
+    ), x = {
+      value: g,
       setValue: h,
       name: n,
-      required: u,
-      form: g,
-      disabled: l,
+      required: f,
+      form: y,
+      disabled: b,
       orientation: e,
       dir: N,
       loop: p,
-      registerItem: o,
+      registerItem: r,
       focusableValue: w,
-      setFocusableValue: V,
+      setFocusableValue: C,
       formElRef: I,
-      itemsRef: y,
-      variant: m
-    }, D = s ? L : "div", S = v;
-    return /* @__PURE__ */ A(H.Provider, { value: k, children: /* @__PURE__ */ A(
+      itemsRef: R,
+      variant: v
+    }, D = u ? L : "div", S = m;
+    return /* @__PURE__ */ A(H.Provider, { value: x, children: /* @__PURE__ */ A(
       D,
       {
         id: F,
         ref: S,
         role: "radiogroup",
         "aria-orientation": e,
-        "data-disabled": l ? "" : void 0,
-        className: q(i),
-        ...b
+        "data-disabled": b ? "" : void 0,
+        className: q(a),
+        ...d
       }
     ) });
   }
 );
 X.displayName = "RadioGroup";
 const Y = P(
-  ({ asChild: s, className: i, value: t, disabled: r, id: d, onKeyDown: n, onClick: u, ...g }, l) => {
+  ({ asChild: u, className: a, value: t, disabled: o, id: l, onKeyDown: n, onClick: f, ...y }, b) => {
     const e = B(H);
     if (!e) throw new Error("RadioGroupItem must be used within RadioGroup");
-    const N = $(), p = d ?? `rgi-${N}`, m = G(null), f = G(null);
+    const N = U(), p = l ?? `rgi-${N}`, v = V(null), c = V(null);
     K(
-      l,
-      () => m.current,
+      b,
+      () => v.current,
       []
     );
-    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, v, p]), C(() => {
-      !e.formElRef.current && f.current?.form && (e.formElRef.current = f.current.form);
-    }, [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 (!v && (e.setValue(t, { focus: !0, user: o }), f.current)) {
+    const d = e.value === t, m = !!o || e.disabled;
+    E(() => {
+      const r = { value: t, ref: v, disabled: !!m, id: p };
+      return e.registerItem(r);
+    }, [t, m, p]), E(() => {
+      !e.formElRef.current && c.current?.form && (e.formElRef.current = c.current.form);
+    }, [e.formElRef]), E(() => {
+      c.current && (c.current.checked = d);
+    }, [d]);
+    const F = (e.focusableValue ? e.focusableValue === t : d) && !m ? 0 : -1, g = u ? L : "button", k = (r) => {
+      v.current = r;
+    }, w = G(
+      (r) => {
+        if (!m && (e.setValue(t, { focus: !0, user: r }), c.current)) {
           const h = new Event("change", { bubbles: !0 });
-          f.current.dispatchEvent(h);
+          c.current.dispatchEvent(h);
         }
       },
-      [e, v, t]
-    ), V = E(
-      (o) => {
-        u?.(o), !o.defaultPrevented && w(!0);
+      [e, m, t]
+    ), C = G(
+      (r) => {
+        f?.(r), !r.defaultPrevented && w(!0);
       },
-      [u, w]
-    ), y = E(
-      (o) => {
-        if (n?.(o), o.defaultPrevented) return;
-        if (o.key === " " || o.key === "Enter") {
-          o.preventDefault(), w(!0);
+      [f, w]
+    ), R = G(
+      (r) => {
+        if (n?.(r), r.defaultPrevented) return;
+        if (r.key === " " || r.key === "Enter") {
+          r.preventDefault(), w(!0);
           return;
         }
-        const h = W(o, e.orientation, e.dir);
+        const h = W(r, e.orientation, e.dir);
         if (h) {
-          o.preventDefault();
-          const k = [...e.itemsRef.current], D = k.findIndex((a) => a.value === t);
+          r.preventDefault();
+          const x = [...e.itemsRef.current], D = x.findIndex((i) => i.value === t);
           if (D === -1) return;
           if (h === "first") {
-            const a = k.find((j) => !j.disabled);
-            a && e.setValue(a.value, { focus: !0, user: !0 });
+            const i = x.find((j) => !j.disabled);
+            i && e.setValue(i.value, { focus: !0, user: !0 });
             return;
           }
           if (h === "last") {
-            const a = [...k].reverse().find((j) => !j.disabled);
-            a && e.setValue(a.value, { focus: !0, user: !0 });
+            const i = [...x].reverse().find((j) => !j.disabled);
+            i && e.setValue(i.value, { focus: !0, user: !0 });
             return;
           }
-          const S = Q(k, D, h, e.loop), c = k[S];
-          c && !c.disabled && e.setValue(c.value, { focus: !0, user: !0 });
+          const S = Q(x, D, h, e.loop), s = x[S];
+          s && !s.disabled && e.setValue(s.value, { focus: !0, user: !0 });
         }
       },
       [e, n, w, t]
     ), I = e.variant === "unstyled";
     return /* @__PURE__ */ T(
-      R,
+      g,
       {
         id: p,
-        ref: x,
+        ref: k,
         type: "button",
         role: "radio",
-        "aria-checked": b,
-        "aria-disabled": v || void 0,
-        "data-state": b ? "checked" : "unchecked",
-        "data-disabled": v ? "" : void 0,
+        "aria-checked": d,
+        "aria-disabled": m || void 0,
+        "data-state": d ? "checked" : "unchecked",
+        "data-disabled": m ? "" : void 0,
         tabIndex: F,
-        onClick: V,
-        onKeyDown: y,
+        onClick: C,
+        onKeyDown: R,
         className: q(
           // 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
+          a
         ),
-        ...g,
+        ...y,
         children: [
           /* @__PURE__ */ A(
             "input",
             {
-              ref: f,
+              ref: c,
               type: "radio",
               name: e.name,
               value: t,
               required: e.required,
-              disabled: v,
+              disabled: m,
               form: e.form,
-              checked: b,
+              checked: d,
               readOnly: !0,
               tabIndex: -1,
               "aria-hidden": "true",
@@ -210,7 +202,7 @@ const Y = P(
               }
             }
           ),
-          g.children
+          y.children
         ]
       }
     );
@@ -218,33 +210,33 @@ const Y = P(
 );
 Y.displayName = "RadioGroupItem";
 const Z = P(
-  ({ asChild: s, className: i, forceMount: t, ...r }, d) => {
+  ({ asChild: u, className: a, forceMount: t, ...o }, l) => {
     if (!B(H)) return null;
-    const [u, g] = U(!1), l = G(null);
+    const [f, y] = $(!1), b = V(null);
     return K(
-      d,
-      () => l.current,
+      l,
+      () => b.current,
       []
-    ), C(() => {
-      const p = l.current;
+    ), E(() => {
+      const p = b.current;
       if (!p) return;
-      const m = p.closest('[role="radio"]');
-      if (!m) return;
-      const f = () => {
-        g(m.getAttribute("aria-checked") === "true");
+      const v = p.closest('[role="radio"]');
+      if (!v) return;
+      const c = () => {
+        y(v.getAttribute("aria-checked") === "true");
       };
-      f();
-      const b = new MutationObserver(f);
-      return b.observe(m, { attributes: !0, attributeFilter: ["aria-checked"] }), () => b.disconnect();
-    }, []), !u && !t ? null : /* @__PURE__ */ A(
-      s ? L : "span",
+      c();
+      const d = new MutationObserver(c);
+      return d.observe(v, { attributes: !0, attributeFilter: ["aria-checked"] }), () => d.disconnect();
+    }, []), !f && !t ? null : /* @__PURE__ */ A(
+      u ? L : "span",
       {
         ref: (p) => {
-          l.current = p;
+          b.current = p;
         },
-        "data-state": u ? "checked" : "unchecked",
-        className: q("flex items-center justify-center text-current", i),
-        ...r
+        "data-state": f ? "checked" : "unchecked",
+        className: q("flex items-center justify-center text-current", a),
+        ...o
       }
     );
   }