@spear-ai/spectral 1.4.1 → 1.4.3

package/dist/Tabs/TabsBase.js

@@ -3,19 +3,19 @@ import "../styles/main.css";
 import { jsx as x, jsxs as R } from "react/jsx-runtime";
 import { generateId as $, prefersReducedMotion as _, debounce as L, getIndicatorPosition as S, calculateIndicatorStyle as K } from "./tabsUtils.js";
 import { cn as y } from "../utils/twUtils.js";
-import { createContext as M, forwardRef as z, useState as D, useId as N, useCallback as p, useRef as k, useEffect as O, useContext as P } from "react";
+import { createContext as M, forwardRef as z, useState as D, useId as N, useCallback as w, useRef as k, useEffect as O, useContext as P } from "react";
 const E = M(null), C = (I = "Tabs") => {
   const u = P(E);
   if (u === null)
     throw new Error(`${I} components must be used within a Tabs.Root`);
   return u;
 }, B = z(function({ activationMode: u = "automatic", children: e, defaultValue: h, dir: b = "ltr", disabled: l = !1, onValueChange: f, orientation: o = "horizontal", value: v, ...s }, c) {
-  const [m, g] = D(h ?? ""), d = N() ?? $("tabs"), r = v !== void 0, t = r ? v : m, n = p(
-    (w) => {
-      l || (r || g(w), f?.(w));
+  const [m, g] = D(h ?? ""), d = N() ?? $("tabs"), a = v !== void 0, t = a ? v : m, n = w(
+    (p) => {
+      l || (a || g(p), f?.(p));
     },
-    [r, f, l]
-  ), a = {
+    [a, f, l]
+  ), r = {
     value: t,
     onValueChange: n,
     orientation: o,
@@ -24,7 +24,7 @@ const E = M(null), C = (I = "Tabs") => {
     disabled: l,
     baseId: d
   };
-  return /* @__PURE__ */ x(E.Provider, { value: a, children: /* @__PURE__ */ x("div", { ref: c, "data-orientation": o, "data-disabled": l ? "" : void 0, dir: b, ...s, children: e }) });
+  return /* @__PURE__ */ x(E.Provider, { value: r, children: /* @__PURE__ */ x("div", { ref: c, "data-testid": "spectral-tabs-root", "data-orientation": o, "data-disabled": l ? "" : void 0, dir: b, ...s, children: e }) });
 }), H = z(function({ className: u, loop: e = !0, ...h }, b) {
   const { orientation: l, disabled: f } = C("TabsList"), [o, v] = D(() => ({
     left: 0,
@@ -33,7 +33,7 @@ const E = M(null), C = (I = "Tabs") => {
     height: 0,
     orientation: "horizontal",
     isEnclosed: !1
-  })), s = k(null), c = _(), m = p(
+  })), s = k(null), c = _(), m = w(
     L(() => {
       const d = K(s);
       v(d);
@@ -43,30 +43,30 @@ const E = M(null), C = (I = "Tabs") => {
   );
   O(() => {
     m();
-    const d = new ResizeObserver(m), r = new MutationObserver(m), t = s.current;
-    return t && (d.observe(t), r.observe(t, {
+    const d = new ResizeObserver(m), a = new MutationObserver(m), t = s.current;
+    return t && (d.observe(t), a.observe(t, {
       attributes: !0,
       childList: !0,
       subtree: !0
     })), () => {
-      d.disconnect(), r.disconnect();
+      d.disconnect(), a.disconnect();
     };
   }, [m]);
-  const g = p(
+  const g = w(
     (d) => {
       if (f) return;
-      const r = Array.from(s.current?.querySelectorAll("[role='tab']:not([disabled]):not([aria-disabled='true'])") ?? []);
-      if (r.length === 0) return;
-      const t = r.findIndex((T) => T === document.activeElement);
+      const a = Array.from(s.current?.querySelectorAll("[role='tab']:not([disabled]):not([aria-disabled='true'])") ?? []);
+      if (a.length === 0) return;
+      const t = a.findIndex((T) => T === document.activeElement);
       if (t === -1) return;
       let n = null;
-      const { key: a, ctrlKey: w, metaKey: A } = d, i = w || A;
-      l === "horizontal" ? a === "ArrowLeft" || a === "ArrowUp" && i ? n = t > 0 ? t - 1 : e ? r.length - 1 : t : (a === "ArrowRight" || a === "ArrowDown" && i) && (n = t < r.length - 1 ? t + 1 : e ? 0 : t) : a === "ArrowUp" || a === "ArrowLeft" && i ? n = t > 0 ? t - 1 : e ? r.length - 1 : t : (a === "ArrowDown" || a === "ArrowRight" && i) && (n = t < r.length - 1 ? t + 1 : e ? 0 : t), a === "Home" ? n = 0 : a === "End" && (n = r.length - 1), n !== null && n !== t && (d.preventDefault(), d.stopPropagation(), r[n]?.focus());
+      const { key: r, ctrlKey: p, metaKey: A } = d, i = p || A;
+      l === "horizontal" ? r === "ArrowLeft" || r === "ArrowUp" && i ? n = t > 0 ? t - 1 : e ? a.length - 1 : t : (r === "ArrowRight" || r === "ArrowDown" && i) && (n = t < a.length - 1 ? t + 1 : e ? 0 : t) : r === "ArrowUp" || r === "ArrowLeft" && i ? n = t > 0 ? t - 1 : e ? a.length - 1 : t : (r === "ArrowDown" || r === "ArrowRight" && i) && (n = t < a.length - 1 ? t + 1 : e ? 0 : t), r === "Home" ? n = 0 : r === "End" && (n = a.length - 1), n !== null && n !== t && (d.preventDefault(), d.stopPropagation(), a[n]?.focus());
     },
     [f, l, e]
   );
   return /* @__PURE__ */ R("div", { className: "relative", ref: s, children: [
-    /* @__PURE__ */ x("div", { ref: b, role: "tablist", "aria-orientation": l, "aria-disabled": f, className: y("tabs-list", u), onKeyDown: g, ...h }),
+    /* @__PURE__ */ x("div", { ref: b, role: "tablist", "data-testid": "spectral-tabs-list", "aria-orientation": l, "aria-disabled": f, className: y("tabs-list", u), onKeyDown: g, ...h }),
     /* @__PURE__ */ x(
       "div",
       {
@@ -92,7 +92,7 @@ const E = M(null), C = (I = "Tabs") => {
     )
   ] });
 }), G = z(function({ className: u, value: e, onClick: h, onKeyDown: b, disabled: l = !1, ...f }, o) {
-  const { value: v, onValueChange: s, activationMode: c, disabled: m, baseId: g } = C("TabsTrigger"), d = `${g}-trigger-${e}`, r = `${g}-content-${e}`, t = v === e, n = m || l, a = p(
+  const { value: v, onValueChange: s, activationMode: c, disabled: m, baseId: g } = C("TabsTrigger"), d = `${g}-trigger-${e}`, a = `${g}-content-${e}`, t = v === e, n = m || l, r = w(
     (i) => {
       if (n) {
         i.preventDefault();
@@ -101,7 +101,7 @@ const E = M(null), C = (I = "Tabs") => {
       s(e), h?.(i);
     },
     [e, s, h, n]
-  ), w = p(
+  ), p = w(
     (i) => {
       if (n) {
         i.preventDefault();
@@ -111,7 +111,7 @@ const E = M(null), C = (I = "Tabs") => {
       (T === "Enter" || T === " ") && (i.preventDefault(), i.stopPropagation(), s(e)), b?.(i);
     },
     [e, s, b, n]
-  ), A = p(() => {
+  ), A = w(() => {
     n || c === "automatic" && s(e);
   }, [c, s, e, n]);
   return /* @__PURE__ */ x(
@@ -120,8 +120,9 @@ const E = M(null), C = (I = "Tabs") => {
       ref: o,
       role: "tab",
       type: "button",
+      "data-testid": "spectral-tabs-trigger",
       id: d,
-      "aria-controls": r,
+      "aria-controls": a,
       "aria-selected": t,
       "aria-disabled": n,
       disabled: n,
@@ -129,15 +130,29 @@ const E = M(null), C = (I = "Tabs") => {
       "data-disabled": n ? "" : void 0,
       tabIndex: t ? 0 : -1,
       className: y("tabs-trigger z-10 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600", u),
-      onClick: a,
-      onKeyDown: w,
+      onClick: r,
+      onKeyDown: p,
       onFocus: A,
       ...f
     }
   );
 }), J = z(function({ className: u, value: e, forceMount: h = !1, ...b }, l) {
   const { value: f, baseId: o } = C("TabsContent"), v = `${o}-content-${e}`, s = `${o}-trigger-${e}`, c = f === e;
-  return !h && !c ? null : /* @__PURE__ */ x("div", { ref: l, role: "tabpanel", id: v, "aria-labelledby": s, "data-state": c ? "active" : "inactive", tabIndex: 0, className: y("tabs-content focus:outline-none focus-visible:outline-none", u), hidden: !c, ...b });
+  return !h && !c ? null : /* @__PURE__ */ x(
+    "div",
+    {
+      ref: l,
+      role: "tabpanel",
+      "data-testid": "spectral-tabs-content",
+      id: v,
+      "aria-labelledby": s,
+      "data-state": c ? "active" : "inactive",
+      tabIndex: 0,
+      className: y("tabs-content focus:outline-none focus-visible:outline-none", u),
+      hidden: !c,
+      ...b
+    }
+  );
 });
 export {
   B as TabsBase,

package/dist/Tabs.js

@@ -1,43 +1,40 @@
 import "./styles/main.css";
-import { jsxs as f, jsx as a } from "react/jsx-runtime";
+import { jsx as a, jsxs as x } from "react/jsx-runtime";
 import { TabsBase as N, TabsList as T, TabsTrigger as z, TabsContent as k } from "./Tabs/TabsBase.js";
-import { validateTabValues as E, getTabKeys as V } from "./Tabs/tabsUtils.js";
+import { validateTabValues as j, getTabKeys as C } from "./Tabs/tabsUtils.js";
 import { cn as r } from "./utils/twUtils.js";
 import "react";
-const j = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ f("div", { className: "flex flex-col relative w-full", role: "status", children: [
+const V = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ x("div", { className: "flex flex-col relative w-full", role: "status", children: [
   /* @__PURE__ */ a("div", { className: r("inline-flex items-center justify-start w-full", s === "horizontal" && "border-b border-neutral-600", s === "vertical" && "flex-col items-stretch border-r border-neutral-600"), children: Array.from({ length: Math.min(d, 5) }, (i, t) => /* @__PURE__ */ a("div", { className: r("animate-pulse bg-neutral-600 rounded", s === "horizontal" ? "h-6 w-16 mx-2 my-2" : "h-6 w-full mx-2 my-1"), "aria-hidden": "true" }, t)) }),
   /* @__PURE__ */ a("div", { className: "animate-pulse bg-neutral-600 h-32 w-full mt-4 rounded", "aria-hidden": "true" }),
   /* @__PURE__ */ a("span", { className: "sr-only", children: "Loading tabs…" })
-] }), A = ({ ariaLabel: d, className: s, openOnLoad: i, orientation: t = "horizontal", tabValues: h = [], variant: l = "default", activationMode: m = "automatic", loading: p = !1, onError: n, onBeforeChange: v, onValueChange: x, ...y }) => {
-  const o = h.filter((e) => e.key !== void 0);
-  if (!E(o)) {
+] }), L = ({ ariaLabel: d, className: s, openOnLoad: i, orientation: t = "horizontal", tabValues: f = [], variant: l = "default", activationMode: m = "automatic", loading: p = !1, onError: n, onBeforeChange: h, onValueChange: v, ...y }) => {
+  const o = f.filter((e) => e.key !== void 0);
+  if (!j(o)) {
     const e = new Error("Invalid tabValues provided to Tabs component");
-    return n?.(e), /* @__PURE__ */ f("div", { className: "flex flex-col relative w-full p-4 text-center text-gray-500", role: "alert", "aria-live": "polite", children: [
-      /* @__PURE__ */ a("p", { children: "No valid tabs provided" }),
-      process.env.NODE_ENV !== "production" && /* @__PURE__ */ a("p", { className: "text-xs mt-2 text-gray-400", children: "Check console for detailed validation errors" })
-    ] });
+    return n?.(e), /* @__PURE__ */ a("div", { className: "flex flex-col relative w-full p-4 text-center text-gray-500", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ a("p", { children: "No valid tabs provided" }) });
   }
   if (p)
-    return /* @__PURE__ */ a(j, { tabCount: h.length || 3, orientation: t });
-  const u = V(o);
-  let c = i ?? u[0];
-  if (i && !u.includes(i) && (process.env.NODE_ENV !== "production" && console.warn(`Tabs: openOnLoad value '${i}' not found in tabValues. Using first tab.`), c = u[0]), !c) {
+    return /* @__PURE__ */ a(V, { tabCount: f.length || 3, orientation: t });
+  const b = C(o);
+  let c = i ?? b[0];
+  if (i && !b.includes(i) && (console.warn(`Tabs: openOnLoad value '${i}' is not a valid tab key`), c = b[0]), !c) {
     const e = new Error("No valid default tab available");
     return n?.(e), /* @__PURE__ */ a("div", { className: "flex flex-col relative w-full p-4 text-center text-text-secondary", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ a("p", { children: "Unable to render tabs" }) });
   }
   const g = async (e) => {
-    if (v && x) {
+    if (h && v) {
       const w = c;
       try {
-        if (await v(e, w) === !1) return;
-      } catch (b) {
-        n?.(b instanceof Error ? b : new Error("Before change callback failed"));
+        if (await h(e, w) === !1) return;
+      } catch (u) {
+        n?.(u instanceof Error ? u : new Error("Before change callback failed"));
         return;
       }
     }
-    x?.(e);
+    v?.(e);
   };
-  return /* @__PURE__ */ a("div", { className: "flex flex-col relative w-full", children: /* @__PURE__ */ f(N, { "aria-label": d, className: r("relative w-full data-[orientation=vertical]:flex", l, s), defaultValue: c, orientation: t, activationMode: m, onValueChange: g, ...y, children: [
+  return /* @__PURE__ */ a("div", { className: "flex flex-col relative w-full", children: /* @__PURE__ */ x(N, { "aria-label": d, className: r("relative w-full data-[orientation=vertical]:flex", l, s), defaultValue: c, orientation: t, activationMode: m, onValueChange: g, ...y, children: [
     /* @__PURE__ */ a(
       T,
       {
@@ -86,7 +83,7 @@ const j = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ f("div", { classN
   ] }) });
 };
 export {
-  A as Tabs,
+  L as Tabs,
   k as TabsContent,
   T as TabsList,
   N as TabsRoot,

package/dist/Textarea.d.ts

@@ -13,6 +13,7 @@ export type TextareaProps = Omit<ComponentProps<'textarea'>, 'onChange'> & {
     onChange?: (value: string) => void;
     onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;
     placeholder?: string | undefined;
+    required?: boolean;
     state?: TextareaState;
     value?: string | undefined;
 };

package/dist/Textarea.js

@@ -1,7 +1,7 @@
 "use client";
 import "./styles/main.css";
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { useTextarea as B } from "./Textarea/TextareaUtils.js";
+import { useTextarea as z } from "./Textarea/TextareaUtils.js";
 import "./Icons/AnalyzeIcon.js";
 import "./Icons/AnnotationsIcon.js";
 import "./Icons/ApprovedIcon.js";
@@ -33,7 +33,7 @@ import "./Icons/LassoIcon.js";
 import "./Icons/LineToolIcon.js";
 import "./Icons/LineToolIcon2.js";
 import "./Icons/LiveViewIcon.js";
-import { LoaderIcon as D } from "./Icons/LoaderIcon.js";
+import { LoaderIcon as B } from "./Icons/LoaderIcon.js";
 import "./Icons/LocationIcon.js";
 import "./Icons/LogoutIcon.js";
 import "./Icons/MessagesIcon.js";
@@ -59,67 +59,67 @@ import "./Icons/WarningIcon.js";
 import "./Icons/ZoomAllIcon.js";
 import "./Icons/ZoomXIcon.js";
 import "./Icons/ZoomYIcon.js";
-import { Label as E } from "./Label.js";
-import { useFormFieldId as O, getAriaProps as _, getErrorMessageId as $, getTextareaClasses as G, useFormFieldState as M } from "./utils/formFieldUtils.js";
+import { Label as D } from "./Label.js";
+import { useFormFieldId as M, getAriaProps as O, getErrorMessageId as _, getTextareaClasses as $, useFormFieldState as G, ErrorMessage as V } from "./utils/formFieldUtils.js";
 import { cn as g } from "./utils/twUtils.js";
-import { forwardRef as V, useRef as H } from "react";
-const J = "absolute right-4 top-4", K = (t) => t || "off", Q = (t, a) => {
-  const m = "absolute bottom-2 right-3 text-xs pointer-events-none z-10 tabular-nums", o = t >= a ? "text-danger-400" : "text-text-secondary";
-  return g(m, o);
-}, U = V(
-  ({ autoComplete: t, className: a, disabled: m, errorMessage: o, id: C, label: d, labelClassName: b, maxLength: i = 280, name: c, onBlur: N, onChange: F, onFocus: I, placeholder: v, required: u, state: r = "default", value: s = "", ...x }, S) => {
-    const p = O(C, c), h = $(p), y = H(null), P = S || y, { handleFocus: w, handleBlur: A, handleChange: R, handlePaste: T } = B({
+import { forwardRef as H, useRef as J } from "react";
+const K = "absolute right-4 top-4", Q = (t) => t || "off", U = (t, a) => {
+  const s = "absolute bottom-2 right-3 text-xs pointer-events-none z-10 tabular-nums", o = t >= a ? "text-danger-400" : "text-text-secondary";
+  return g(s, o);
+}, W = H(
+  ({ autoComplete: t, className: a, disabled: s, errorMessage: o, id: C, label: c, labelClassName: b, maxLength: i = 280, name: d, onBlur: N, onChange: I, onFocus: F, placeholder: S, required: u, state: r = "default", value: m = "", ...x }, v) => {
+    const p = M(C, d), h = _(p), y = J(null), P = v || y, { handleFocus: T, handleBlur: A, handleChange: R, handlePaste: w } = z({
       maxLength: i,
-      value: s,
-      onChange: F || (() => {
+      value: m,
+      onChange: I || (() => {
       }),
-      onFocus: I,
+      onFocus: F,
       onBlur: N
-    }), { isDisabled: f, isLoading: L } = M(m, r), j = _(r, u, h, x["aria-describedby"]), l = s?.length || 0, k = G(r, a), z = () => ({
+    }), { isDisabled: f, isLoading: E } = G(s, r), L = O(r, h, u, x["aria-describedby"]), l = m?.length || 0, j = $(r, a), k = () => ({
       "--textarea-min-height": "6rem",
       "--textarea-max-height": "12rem",
       "--textarea-border-radius": "0.5rem"
     });
-    return /* @__PURE__ */ n("div", { className: "w-full", "data-testid": "textarea-root", children: [
-      d && /* @__PURE__ */ e(E, { htmlFor: p, className: g("block mb-2", f && "opacity-50 cursor-not-allowed", b), children: d }),
-      /* @__PURE__ */ n("div", { className: "relative", "data-testid": "textarea-wrapper", children: [
+    return /* @__PURE__ */ n("div", { className: "w-full", children: [
+      c && /* @__PURE__ */ e(D, { "data-testid": "spectral-textarea-label", htmlFor: p, className: g("block mb-2", f && "opacity-50 cursor-not-allowed", b), children: c }),
+      /* @__PURE__ */ n("div", { className: "relative", "data-testid": "spectral-textarea-container", children: [
         /* @__PURE__ */ e(
           "textarea",
           {
             "aria-multiline": "true",
-            autoComplete: K(t),
-            className: k,
+            autoComplete: Q(t),
+            className: j,
             "data-state": r,
-            "data-testid": "textarea-textarea",
+            "data-testid": "spectral-textarea",
             disabled: f,
             id: p,
-            name: c,
+            name: d,
             onBlur: A,
             onChange: R,
-            onFocus: w,
-            onPaste: T,
-            placeholder: v,
+            onFocus: T,
+            onPaste: w,
+            placeholder: S,
             ref: P,
             required: u,
             spellCheck: "true",
-            style: z(),
-            value: s,
-            ...j,
+            style: k(),
+            value: m,
+            ...L,
             ...x
           }
         ),
-        L && /* @__PURE__ */ e("div", { className: J, "data-testid": "textarea-loading-icon", children: /* @__PURE__ */ e(D, { size: 24 }) }),
-        /* @__PURE__ */ n("div", { className: Q(l, i), role: "status", "aria-live": "polite", "aria-label": `${l} of ${i} characters used`, children: [
+        E && /* @__PURE__ */ e("div", { className: K, "data-testid": "spectral-textarea-loading-icon", children: /* @__PURE__ */ e(B, { size: 24 }) }),
+        /* @__PURE__ */ n("div", { className: U(l, i), role: "status", "aria-live": "polite", "aria-label": `${l} of ${i} characters used`, children: [
           l,
           "/",
           i
         ] })
       ] }),
-      r === "error" && o && /* @__PURE__ */ e("p", { id: h, className: "mt-1.5 text-sm !text-danger-300", "data-testid": "textarea-error-message", "aria-live": "polite", "aria-atomic": "true", children: o })
+      r === "error" && o && /* @__PURE__ */ e(V, { dataTestId: "spectral-textarea-error-message", id: h, message: o })
     ] });
   }
 );
-U.displayName = "Textarea";
+W.displayName = "Textarea";
 export {
-  U as Textarea
+  W as Textarea
 };

package/dist/Toggle.js

@@ -20,9 +20,9 @@ const v = d(
         outline: "border-toggle-outline-border hover:bg-toggle-bg--hover"
       },
       size: {
-        default: 'h-9 px-3 min-w-9 [&_svg:not([class*="size-"]):not([width]):not([height])]:size-4',
-        sm: 'h-8 px-1.5 min-w-8 [&_svg:not([class*="size-"]):not([width]):not([height])]:size-3',
-        lg: 'h-10 px-2.5 min-w-10 [&_svg:not([class*="size-"]):not([width]):not([height])]:size-5'
+        default: "h-9 px-3 min-w-9 [&_svg:not([class*='size-']:not([width]):not([height])]:size-4",
+        sm: "h-8 px-1.5 min-w-8 [&_svg:not([class*='size-']:not([width]):not([height])]:size-3",
+        lg: "h-10 px-2.5 min-w-10 [&_svg:not([class*='size-']:not([width]):not([height])]:size-5"
       },
       layout: {
         default: "w-fit",
@@ -35,7 +35,7 @@ const v = d(
       layout: "default"
     }
   }
-), m = l(({ className: e, variant: t, size: o, layout: r, ...a }, i) => /* @__PURE__ */ g(n, { ref: i, "data-slot": "toggle", className: s(v({ variant: t, size: o, layout: r }), e), ...a }));
+), m = l(({ className: e, variant: t, size: o, layout: r, ...a }, i) => /* @__PURE__ */ g(n, { ref: i, "data-slot": "toggle", "data-testid": "spectral-toggle", className: s(v({ variant: t, size: o, layout: r }), e), ...a }));
 export {
   m as Toggle,
   v as toggleVariants

package/dist/ToggleGroup/ToggleGroupBase.d.ts

@@ -1,14 +1,14 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 type Orientation = 'horizontal' | 'vertical';
 export type CommonGroupProps = {
-    orientation?: Orientation;
-    loop?: boolean;
+    className?: string;
+    defaultValue?: string | string[];
     disabled?: boolean;
+    loop?: boolean;
     name?: string;
-    value?: string | string[];
-    defaultValue?: string | string[];
     onValueChange?: (v: string | string[]) => void;
-    className?: string;
+    orientation?: Orientation;
+    value?: string | string[];
 };
 export type SingleProps = CommonGroupProps & {
     type?: 'single';
@@ -18,10 +18,10 @@ export type MultipleProps = CommonGroupProps & {
 };
 export type ToggleGroupProps = (SingleProps | MultipleProps) & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;
 export type ItemRenderProps = {
-    value: string;
-    disabled?: boolean;
     children?: ReactNode;
     className?: string;
+    disabled?: boolean;
+    value: string;
 };
 export declare const ToggleGroupBase: (props: ToggleGroupProps & Record<`data-${string}`, any>) => import("react/jsx-runtime").JSX.Element;
 export type ToggleGroupItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'onPressedChange' | 'pressed' | 'defaultPressed'> & ItemRenderProps;

package/dist/ToggleGroup/ToggleGroupBase.js

@@ -1,96 +1,96 @@
 "use client";
 import "../styles/main.css";
-import { jsx as B, jsxs as E } from "react/jsx-runtime";
+import { jsx as C, jsxs as E } from "react/jsx-runtime";
 import { useControllableState as R } from "../hooks/useControllableState.js";
 import { clamp as M } from "../utils/sharedUtils.js";
-import { createContext as j, forwardRef as H, useContext as K, useRef as S, useImperativeHandle as L, useEffect as N, useCallback as i, useMemo as U } from "react";
-const T = j(null), W = (C) => {
+import { createContext as j, forwardRef as H, useContext as K, useRef as S, useImperativeHandle as L, useEffect as N, useCallback as l, useMemo as U } from "react";
+const T = j(null), W = (z) => {
   const {
-    type: n = "single",
-    orientation: l = "horizontal",
-    loop: d = !0,
-    disabled: I = !1,
+    className: o,
+    defaultValue: i,
+    disabled: x = !1,
+    loop: c = !0,
     name: u,
-    className: x,
-    value: z,
-    defaultValue: A,
-    onValueChange: a,
-    "data-variant": D,
-    "data-size": v,
-    "data-slot": c,
-    "data-layout": b,
+    onValueChange: v,
+    orientation: b = "horizontal",
+    type: d = "single",
+    value: a,
+    "data-variant": V,
+    "data-size": w,
+    "data-slot": f,
+    "data-layout": A,
     ...G
-  } = C, f = n === "multiple", [r, p] = R({
-    value: z,
-    defaultValue: typeof A < "u" ? A : f ? [] : "",
-    onChange: a
-  }), o = S([]), m = i((t, s) => {
+  } = z, p = d === "multiple", [n, m] = R({
+    defaultValue: typeof i < "u" ? i : p ? [] : "",
+    onChange: v,
+    value: a
+  }), r = S([]), g = l((t, s) => {
     const P = { val: t, el: s, disabled: !!s?.disabled };
-    return o.current = [...o.current.filter((w) => w.val !== t), P], () => {
-      o.current = o.current.filter((w) => w.val !== t);
+    return r.current = [...r.current.filter((D) => D.val !== t), P], () => {
+      r.current = r.current.filter((D) => D.val !== t);
     };
-  }, []), V = i(() => o.current.slice(), []), k = i(
-    (t) => f ? Array.isArray(r) && r.includes(t) : r === t,
-    [f, r]
-  ), e = i((t) => p(t), [p]), g = i(
+  }, []), k = l(() => r.current.slice(), []), B = l(
+    (t) => p ? Array.isArray(n) && n.includes(t) : n === t,
+    [p, n]
+  ), e = l((t) => m(t), [m]), y = l(
     (t) => {
-      const s = o.current;
+      const s = r.current;
       if (s.length === 0) return;
-      const P = s.length - 1, w = d ? (t % s.length + s.length) % s.length : M(t, 0, P);
-      s[w]?.el?.focus();
+      const P = s.length - 1, D = c ? (t % s.length + s.length) % s.length : M(t, 0, P);
+      s[D]?.el?.focus();
     },
-    [d]
-  ), y = U(
+    [c]
+  ), h = U(
     () => ({
-      type: n,
-      value: r,
-      setValue: e,
-      orientation: l,
-      loop: d,
-      groupDisabled: I,
+      focusItemByIndex: y,
+      groupDisabled: x,
+      isItemPressed: B,
+      itemsSnapshot: k,
+      loop: c,
       name: u,
-      register: m,
-      isItemPressed: k,
-      focusItemByIndex: g,
-      itemsSnapshot: V
+      orientation: b,
+      register: g,
+      setValue: e,
+      type: d,
+      value: n
     }),
-    [I, k, V, d, u, l, e, n, r]
-  ), h = u;
-  return /* @__PURE__ */ E("div", { ...G, role: "group", "data-orientation": l, "data-disabled": I ? "" : void 0, "data-variant": D, "data-size": v, "data-slot": c, "data-layout": b, className: x, children: [
-    /* @__PURE__ */ B(T.Provider, { value: y, children: C.children }),
-    h && n === "single" && typeof r == "string" ? /* @__PURE__ */ B("input", { type: "hidden", name: h, value: r }) : null,
-    h && n === "multiple" && Array.isArray(r) ? r.map((t) => /* @__PURE__ */ B("input", { type: "hidden", name: h + "[]", value: t }, t)) : null
+    [x, B, k, c, u, b, e, d, n]
+  ), I = u;
+  return /* @__PURE__ */ E("div", { className: o, "data-disabled": x ? "" : void 0, "data-layout": A, "data-orientation": b, "data-size": w, "data-slot": f, "data-variant": V, role: "group", ...G, children: [
+    /* @__PURE__ */ C(T.Provider, { value: h, children: z.children }),
+    I && d === "single" && typeof n == "string" ? /* @__PURE__ */ C("input", { type: "hidden", name: I, value: n }) : null,
+    I && d === "multiple" && Array.isArray(n) ? n.map((t) => /* @__PURE__ */ C("input", { type: "hidden", name: I + "[]", value: t }, t)) : null
   ] });
-}, X = H(function({ value: n, disabled: l, className: d, children: I, onKeyDown: u, onClick: x, ...z }, A) {
+}, X = H(function({ value: o, disabled: i, className: x, children: c, onKeyDown: u, onClick: v, ...b }, d) {
   const a = K(T);
   if (!a) throw new Error("ToggleGroupItem must be used within ToggleGroup");
-  const { type: D, orientation: v, groupDisabled: c, setValue: b, isItemPressed: G, itemsSnapshot: f, register: r } = a, p = S(null);
-  L(A, () => p.current), N(() => r(n, p.current), [r, n]);
-  const o = G(n), m = i(() => {
-    if (!(c || l))
-      if (D === "single") b(o ? "" : n);
+  const { type: V, orientation: w, groupDisabled: f, setValue: A, isItemPressed: G, itemsSnapshot: p, register: n } = a, m = S(null);
+  L(d, () => m.current), N(() => n(o, m.current), [n, o]);
+  const r = G(o), g = l(() => {
+    if (!(f || i))
+      if (V === "single") A(r ? "" : o);
       else {
-        const e = a.value, g = o ? e.filter((y) => y !== n) : [...e, n];
-        b(g);
+        const e = a.value, y = r ? e.filter((h) => h !== o) : [...e, o];
+        A(y);
       }
-  }, [a.value, l, c, o, b, D, n]), V = i(
+  }, [a.value, i, f, r, A, V, o]), k = l(
     (e) => {
       if (u && u(e), e.defaultPrevented) return;
       if (e.key === " " || e.key === "Enter") {
-        e.preventDefault(), m();
+        e.preventDefault(), g();
         return;
       }
-      const g = f(), y = g.findIndex((s) => s.val === n), h = v === "horizontal" ? "ArrowLeft" : "ArrowUp", t = v === "horizontal" ? "ArrowRight" : "ArrowDown";
-      e.key === h ? (e.preventDefault(), a.focusItemByIndex(y - 1)) : e.key === t ? (e.preventDefault(), a.focusItemByIndex(y + 1)) : e.key === "Home" ? (e.preventDefault(), a.focusItemByIndex(0)) : e.key === "End" && (e.preventDefault(), a.focusItemByIndex(g.length - 1));
+      const y = p(), h = y.findIndex((s) => s.val === o), I = w === "horizontal" ? "ArrowLeft" : "ArrowUp", t = w === "horizontal" ? "ArrowRight" : "ArrowDown";
+      e.key === I ? (e.preventDefault(), a.focusItemByIndex(h - 1)) : e.key === t ? (e.preventDefault(), a.focusItemByIndex(h + 1)) : e.key === "Home" ? (e.preventDefault(), a.focusItemByIndex(0)) : e.key === "End" && (e.preventDefault(), a.focusItemByIndex(y.length - 1));
     },
-    [a, f, u, v, m, n]
-  ), k = i(
+    [a, p, u, w, g, o]
+  ), B = l(
     (e) => {
-      x && x(e), !e.defaultPrevented && m();
+      v && v(e), !e.defaultPrevented && g();
     },
-    [x, m]
+    [v, g]
   );
-  return /* @__PURE__ */ B("button", { ...z, ref: p, type: "button", "aria-pressed": o, "data-state": o ? "on" : "off", "data-disabled": c || l ? "" : void 0, disabled: c || l, onKeyDown: V, onClick: k, className: d, children: I });
+  return /* @__PURE__ */ C("button", { "aria-pressed": r, className: x, "data-disabled": f || i ? "" : void 0, "data-state": r ? "on" : "off", disabled: f || i, onClick: B, onKeyDown: k, ref: m, type: "button", ...b, children: c });
 });
 export {
   W as ToggleGroupBase,