@spear-ai/spectral 1.4.26 → 1.4.27

package/dist/Textarea.js

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

package/dist/Toggle/ToggleBase.d.ts

@@ -1,5 +1,5 @@
 import { AsChildProp } from '../primitives/slot';
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, Ref } from 'react';
 export type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> & Omit<AsChildProp, 'asChild'> & {
     pressed?: boolean;
     defaultPressed?: boolean;
@@ -7,11 +7,7 @@ export type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChang
     disabled?: boolean;
     asChild?: boolean;
 };
-export declare const ToggleBase: import('react').ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & Omit<AsChildProp, "asChild"> & {
-    pressed?: boolean;
-    defaultPressed?: boolean;
-    onPressedChange?: (pressed: boolean) => void;
-    disabled?: boolean;
-    asChild?: boolean;
-} & import('react').RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+export declare const ToggleBase: ({ ref, pressed: pressedProp, defaultPressed, onPressedChange, disabled, className, onKeyDown, onClick, type, asChild, children, ...rest }: ToggleProps & {
+    ref?: Ref<HTMLButtonElement>;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ToggleBase.d.ts.map

package/dist/Toggle/ToggleBase.js

@@ -1,26 +1,39 @@
 "use client";
 import "../styles/main.css";
-import { jsx as f } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import { useControllableState as k } from "../hooks/useControllableState.js";
 import { Slot as C } from "../primitives/slot.js";
-import { forwardRef as T, useCallback as s } from "react";
-const B = T(function({ pressed: c, defaultPressed: m = !1, onPressedChange: g, disabled: t, className: v, onKeyDown: a, onClick: n, type: h = "button", asChild: b = !1, children: l, ...u }, d) {
+import { useCallback as f } from "react";
+const B = function({
+  ref: l,
+  pressed: c,
+  defaultPressed: m = !1,
+  onPressedChange: g,
+  disabled: t,
+  className: v,
+  onKeyDown: n,
+  onClick: a,
+  type: h = "button",
+  asChild: b = !1,
+  children: u,
+  ...d
+}) {
   const [r, i] = k({
     defaultValue: m,
     onChange: g,
     value: c
-  }), o = s(() => {
+  }), o = f(() => {
     t || i(!r);
-  }, [t, r, i]), x = s(
+  }, [t, r, i]), x = f(
     (e) => {
-      a && a(e), !e.defaultPrevented && (e.key === " " || e.key === "Enter") && (e.preventDefault(), o());
+      n && n(e), !e.defaultPrevented && (e.key === " " || e.key === "Enter") && (e.preventDefault(), o());
     },
-    [o, a]
-  ), P = s(
+    [o, n]
+  ), P = f(
     (e) => {
-      n && n(e), !e.defaultPrevented && o();
+      a && a(e), !e.defaultPrevented && o();
     },
-    [o, n]
+    [o, a]
   ), p = {
     "aria-disabled": t || void 0,
     "aria-pressed": r,
@@ -30,18 +43,18 @@ const B = T(function({ pressed: c, defaultPressed: m = !1, onPressedChange: g, d
     onClick: P,
     onKeyDown: x
   };
-  return b ? /* @__PURE__ */ f(
+  return b ? /* @__PURE__ */ s(
     "div",
     {
-      ref: d,
+      ref: l,
       role: "button",
       tabIndex: t ? -1 : 0,
-      ...u,
+      ...d,
       ...p,
-      children: /* @__PURE__ */ f(C, { children: l })
+      children: /* @__PURE__ */ s(C, { children: u })
     }
-  ) : /* @__PURE__ */ f("button", { ref: d, tabIndex: t ? -1 : 0, type: h, ...u, ...p, children: l });
-});
+  ) : /* @__PURE__ */ s("button", { ref: l, tabIndex: t ? -1 : 0, type: h, ...d, ...p, children: u });
+};
 export {
   B as ToggleBase
 };

package/dist/Toggle.d.ts

@@ -1,6 +1,6 @@
 import { ToggleBase } from './ToggleBase';
 import { VariantProps } from 'class-variance-authority';
-import { ComponentProps, CSSProperties } from 'react';
+import { ComponentProps, CSSProperties, Ref } from 'react';
 export type ActiveColor = string;
 export declare function getActiveColorStyle(activeColor: ActiveColor | undefined, activeTextColor?: ActiveColor): CSSProperties | undefined;
 export type ToggleProps = ComponentProps<typeof ToggleBase> & VariantProps<typeof toggleVariants> & {
@@ -12,5 +12,7 @@ export declare const toggleVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
     layout?: "default" | "expanded" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const Toggle: import('react').ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const Toggle: ({ ref, className, variant, size, layout, disabled, activeColor, activeTextColor, style, ...props }: ToggleProps & {
+    ref?: Ref<HTMLButtonElement>;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Toggle.d.ts.map

package/dist/Toggle.js

@@ -1,27 +1,26 @@
-"use client";
 import "./styles/main.css";
 import { jsx as c } from "react/jsx-runtime";
 import { ToggleBase as v } from "./Toggle/ToggleBase.js";
 import { cn as b } from "./utils/twUtils.js";
 import { c as u } from "./index-D29mdTf5.js";
-import { forwardRef as h } from "react";
-const f = /^(#|rgb|hsl|oklch|oklab|lab|lch|color|var\(|transparent|currentcolor)/i, p = /^(success|warning|danger|primary|neutral|secondary)-\d+$/;
-function r(e) {
-  return f.test(e) ? e : p.test(e) ? `var(--horizon-color-${e})` : `var(--color-${e})`;
+import "react";
+const h = /^(#|rgb|hsl|oklch|oklab|lab|lch|color|var\(|transparent|currentcolor)/i, f = /^(success|warning|danger|primary|neutral|secondary)-\d+$/;
+function o(e) {
+  return h.test(e) ? e : f.test(e) ? `var(--horizon-color-${e})` : `var(--color-${e})`;
 }
-function m(e, t) {
+function p(e, t) {
   if (!(!e && !t))
     return {
       ...e && {
-        "--color-toggle-bg--active": r(e),
-        "--color-toggle-border--active": r(e)
+        "--color-toggle-bg--active": o(e),
+        "--color-toggle-border--active": o(e)
       },
       ...t && {
-        "--color-toggle-text--active": r(t)
+        "--color-toggle-text--active": o(t)
       }
     };
 }
-const x = u(
+const m = u(
   `
     bg-toggle-bg inline-flex items-center justify-center gap-2 border rounded-md text-sm shadow-sm font-medium w-fit text-toggle-text whitespace-nowrap outline-none transition-[colors]
     [&_svg]:pointer-events-none [&_svg]:shrink-0 active:bg-toggle-bg--active hover:cursor-pointer hover:bg-toggle-bg--hover hover:border-toggle-border--hover hover:text-toggle-text--hover
@@ -51,9 +50,20 @@ const x = u(
       layout: "default"
     }
   }
-), A = h(({ className: e, variant: t, size: o, layout: a, disabled: i, activeColor: g, activeTextColor: n, style: s, ...l }, d) => /* @__PURE__ */ c(v, { ref: d, disabled: i, "data-slot": "toggle", "data-testid": "spectral-toggle", className: b(x({ variant: t, size: o, layout: a }), e), style: { ...m(g, n), ...s }, ...l }));
+), A = ({
+  ref: e,
+  className: t,
+  variant: r,
+  size: a,
+  layout: i,
+  disabled: g,
+  activeColor: n,
+  activeTextColor: s,
+  style: l,
+  ...d
+}) => /* @__PURE__ */ c(v, { ref: e, disabled: g, "data-slot": "toggle", "data-testid": "spectral-toggle", className: b(m({ variant: r, size: a, layout: i }), t), style: { ...p(n, s), ...l }, ...d });
 export {
   A as Toggle,
-  m as getActiveColorStyle,
-  x as toggleVariants
+  p as getActiveColorStyle,
+  m as toggleVariants
 };

package/dist/ToggleGroup/ToggleGroupBase.d.ts

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode, Ref } from 'react';
 type Orientation = 'horizontal' | 'vertical';
 export type CommonGroupProps = {
     className?: string;
@@ -30,11 +30,8 @@ export type ToggleGroupItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>,
     /** @deprecated This prop is ignored - pressed state is managed by ToggleGroup */
     defaultPressed?: boolean;
 };
-export declare const ToggleGroupItemBase: import('react').ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "pressed" | "defaultPressed" | "onPressedChange"> & ItemRenderProps & {
-    /** @deprecated This prop is ignored - pressed state is managed by ToggleGroup */
-    pressed?: boolean;
-    /** @deprecated This prop is ignored - pressed state is managed by ToggleGroup */
-    defaultPressed?: boolean;
-} & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const ToggleGroupItemBase: ({ ref, value, disabled, className, children, onKeyDown, onClick, ...rest }: ToggleGroupItemProps & {
+    ref?: Ref<HTMLButtonElement>;
+}) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ToggleGroupBase.d.ts.map

package/dist/ToggleGroup/ToggleGroupBase.js

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

package/dist/ToggleGroup.d.ts

@@ -1,7 +1,7 @@
 import { ToggleGroupBase, ToggleGroupItemBase } from './ToggleGroupBase';
 import { toggleVariants, ActiveColor } from '../Toggle/Toggle';
 import { VariantProps } from 'class-variance-authority';
-import { ComponentProps } from 'react';
+import { ComponentProps, Ref } from 'react';
 export type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupItemBase> & VariantProps<typeof toggleVariants> & {
     activeColor?: ActiveColor;
     activeTextColor?: ActiveColor;
@@ -11,5 +11,10 @@ export type ToggleGroupProps = ComponentProps<typeof ToggleGroupBase> & VariantP
     activeTextColor?: ActiveColor;
 };
 export declare const ToggleGroup: ({ className, variant, size, layout, activeColor, activeTextColor, children, ...props }: ToggleGroupProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ToggleGroupItem: import('react').ForwardRefExoticComponent<Omit<ToggleGroupItemProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const ToggleGroupItem: {
+    ({ ref, className, children, variant, size, value, layout, activeColor, activeTextColor, style, ...props }: ToggleGroupItemProps & {
+        ref?: Ref<HTMLButtonElement>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=ToggleGroup.d.ts.map

package/dist/ToggleGroup.js

@@ -1,16 +1,16 @@
 "use client";
 import "./styles/main.css";
 import { jsx as s } from "react/jsx-runtime";
-import { ToggleGroupItemBase as C, ToggleGroupBase as T } from "./ToggleGroup/ToggleGroupBase.js";
+import { ToggleGroupBase as C, ToggleGroupItemBase as T } from "./ToggleGroup/ToggleGroupBase.js";
 import { getActiveColorStyle as z, toggleVariants as G } from "./Toggle.js";
 import { cn as c } from "./utils/twUtils.js";
-import { createContext as w, forwardRef as h, useContext as A } from "react";
-const m = w({
+import { createContext as h, useContext as w } from "react";
+const m = h({
   size: "default",
   variant: "default",
   layout: "default"
-}), j = ({ className: r, variant: o, size: e, layout: a, activeColor: l, activeTextColor: d, children: n, ...i }) => /* @__PURE__ */ s(
-  T,
+}), _ = ({ className: r, variant: o, size: e, layout: a, activeColor: l, activeTextColor: d, children: n, ...i }) => /* @__PURE__ */ s(
+  C,
   {
     "data-slot": "toggle-group",
     "data-testid": "spectral-toggle-group",
@@ -18,24 +18,36 @@ const m = w({
     "data-size": e,
     "data-layout": a,
     className: c(
-      "group/toggle-group [&[data-variant='outline']]:bg-toggle-group-bg flex h-fit w-fit [&[data-layout='expanded']]:w-full items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md [&[data-variant='outline']]:gap-0.25",
+      "group/toggle-group [&[data-variant='outline']]:bg-toggle-group-bg flex h-fit w-fit items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md [&[data-layout='expanded']]:w-full [&[data-variant='outline']]:gap-0.25",
       r
     ),
     ...i,
     children: /* @__PURE__ */ s(m.Provider, { value: { variant: o, size: e, layout: a, activeColor: l, activeTextColor: d }, children: n })
   }
-), I = h(({ className: r, children: o, variant: e, size: a, value: l, layout: d, activeColor: n, activeTextColor: i, style: v, ...f }, y) => {
-  const t = A(m), g = t.variant ?? e, u = t.size ?? a, p = t.layout ?? d, x = n ?? t.activeColor, b = i ?? t.activeTextColor;
+), A = ({
+  ref: r,
+  className: o,
+  children: e,
+  variant: a,
+  size: l,
+  value: d,
+  layout: n,
+  activeColor: i,
+  activeTextColor: v,
+  style: f,
+  ...y
+}) => {
+  const t = w(m), g = t.variant ?? a, u = t.size ?? l, p = t.layout ?? n, x = i ?? t.activeColor, b = v ?? t.activeTextColor;
   return /* @__PURE__ */ s(
-    C,
+    T,
     {
-      ref: y,
+      ref: r,
       "data-slot": "toggle-group-item",
       "data-testid": "spectral-toggle-group-item",
       "data-variant": g,
       "data-size": u,
       "data-layout": p,
-      value: l,
+      value: d,
       className: c(
         G({
           variant: g,
@@ -43,16 +55,16 @@ const m = w({
           layout: p
         }),
         "group data-[variant=outline]:border-togglegroup-border rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0",
-        r
+        o
       ),
-      style: { ...z(x, b), ...v },
-      ...f,
-      children: o
+      style: { ...z(x, b), ...f },
+      ...y,
+      children: e
     }
   );
-});
-I.displayName = "ToggleGroupItem";
+};
+A.displayName = "ToggleGroupItem";
 export {
-  j as ToggleGroup,
-  I as ToggleGroupItem
+  _ as ToggleGroup,
+  A as ToggleGroupItem
 };