@spear-ai/spectral 1.4.4 → 1.4.6

package/dist/Slider.js

@@ -4,7 +4,7 @@ import { jsx as m, jsxs as j } from "react/jsx-runtime";
 import * as c from "react";
 import { useMemo as de } from "react";
 import { c as X } from "./index-rKs9bXHr.js";
-import { u as ue, c as fe, b as _, P as B, a as C } from "./index-BhufZRa2.js";
+import { u as ue, c as fe, b as _, P as k, a as C } from "./index-BhufZRa2.js";
 import { c as me, u as he } from "./index-UEFPWH8U.js";
 import { u as pe } from "./index-BZPx6jYI.js";
 import { u as Se } from "./index-y6Br5T4h.js";
@@ -16,7 +16,7 @@ var G = ["PageUp", "PageDown"], W = ["ArrowUp", "ArrowDown", "ArrowLeft", "Arrow
   "from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
 }, M = "Slider", [L, ge, ve] = me(M), [J] = fe(M, [
   ve
-]), [be, T] = J(M), Q = c.forwardRef(
+]), [be, B] = J(M), Q = c.forwardRef(
   (e, t) => {
     const {
       name: o,
@@ -41,7 +41,7 @@ var G = ["PageUp", "PageDown"], W = ["ArrowUp", "ArrowDown", "ArrowLeft", "Arrow
       onChange: (y) => {
         [...g.current][f.current]?.focus(), r(y);
       }
-    }), k = c.useRef(v);
+    }), T = c.useRef(v);
     function z(y) {
       const P = Ee(v, y);
       K(y, P);
@@ -50,7 +50,7 @@ var G = ["PageUp", "PageDown"], W = ["ArrowUp", "ArrowDown", "ArrowLeft", "Arrow
       K(y, f.current);
     }
     function ce() {
-      const y = k.current[f.current];
+      const y = T.current[f.current];
       v[f.current] !== y && d(v);
     }
     function K(y, P, { commit: V } = { commit: !1 }) {
@@ -86,7 +86,7 @@ var G = ["PageUp", "PageDown"], W = ["ArrowUp", "ArrowDown", "ArrowLeft", "Arrow
             ...S,
             ref: t,
             onPointerDown: _(S.onPointerDown, () => {
-              s || (k.current = v);
+              s || (T.current = v);
             }),
             min: n,
             max: i,
@@ -235,9 +235,9 @@ var [Z, ee] = J(M, {
       onEndKeyDown: s,
       onStepKeyDown: u,
       ...b
-    } = e, h = T(M, o);
+    } = e, h = B(M, o);
     return /* @__PURE__ */ m(
-      B.span,
+      k.span,
       {
         ...b,
         ref: t,
@@ -260,9 +260,9 @@ var [Z, ee] = J(M, {
   }
 ), ne = "SliderTrack", oe = c.forwardRef(
   (e, t) => {
-    const { __scopeSlider: o, ...n } = e, i = T(ne, o);
+    const { __scopeSlider: o, ...n } = e, i = B(ne, o);
     return /* @__PURE__ */ m(
-      B.span,
+      k.span,
       {
         "data-disabled": i.disabled ? "" : void 0,
         "data-orientation": i.orientation,
@@ -275,11 +275,11 @@ var [Z, ee] = J(M, {
 oe.displayName = ne;
 var O = "SliderRange", re = c.forwardRef(
   (e, t) => {
-    const { __scopeSlider: o, ...n } = e, i = T(O, o), l = ee(O, o), a = c.useRef(null), s = C(t, a), u = i.values.length, b = i.values.map(
+    const { __scopeSlider: o, ...n } = e, i = B(O, o), l = ee(O, o), a = c.useRef(null), s = C(t, a), u = i.values.length, b = i.values.map(
       (d) => se(d, i.min, i.max)
     ), h = u > 1 ? Math.min(...b) : 0, r = 100 - Math.max(...b);
     return /* @__PURE__ */ m(
-      B.span,
+      k.span,
       {
         "data-orientation": i.orientation,
         "data-disabled": i.disabled ? "" : void 0,
@@ -305,7 +305,7 @@ var U = "SliderThumb", ie = c.forwardRef(
   }
 ), Re = c.forwardRef(
   (e, t) => {
-    const { __scopeSlider: o, index: n, name: i, ...l } = e, a = T(U, o), s = ee(U, o), [u, b] = c.useState(null), h = C(t, (D) => b(D)), r = u ? a.form || !!u.closest("form") : !0, d = Se(u), p = a.values[n], R = p === void 0 ? 0 : se(p, a.min, a.max), S = De(n, a.values.length), g = d?.[s.size], f = g ? _e(g, R, s.direction) : 0;
+    const { __scopeSlider: o, index: n, name: i, ...l } = e, a = B(U, o), s = ee(U, o), [u, b] = c.useState(null), h = C(t, (D) => b(D)), r = u ? a.form || !!u.closest("form") : !0, d = Se(u), p = a.values[n], R = p === void 0 ? 0 : se(p, a.min, a.max), S = De(n, a.values.length), g = d?.[s.size], f = g ? _e(g, R, s.direction) : 0;
     return c.useEffect(() => {
       if (u)
         return a.thumbs.add(u), () => {
@@ -321,7 +321,7 @@ var U = "SliderThumb", ie = c.forwardRef(
         },
         children: [
           /* @__PURE__ */ m(L.ItemSlot, { scope: e.__scopeSlider, children: /* @__PURE__ */ m(
-            B.span,
+            k.span,
             {
               role: "slider",
               "aria-label": e["aria-label"] || S,
@@ -367,7 +367,7 @@ var Pe = "RadioBubbleInput", ae = c.forwardRef(
         h.call(s, t), s.dispatchEvent(r);
       }
     }, [a, t]), /* @__PURE__ */ m(
-      B.input,
+      k.input,
       {
         style: { display: "none" },
         ...o,
@@ -422,7 +422,7 @@ function Ke(e, t) {
   const o = Math.pow(10, t);
   return Math.round(e * o) / o;
 }
-var Ie = Q, Be = oe, Te = re, ke = ie;
+var Ie = Q, ke = oe, Be = re, Te = ie;
 const Ye = ({ className: e, defaultValue: t, disabled: o, max: n = 100, min: i = 0, minStepsBetweenThumbs: l = 1, name: a, onValueChange: s, onValueCommit: u, orientation: b = "horizontal", step: h = 1, value: r, ...d }) => {
   const p = de(() => Array.isArray(r) ? r : Array.isArray(t) ? t : [i, n], [r, t, i, n]);
   return /* @__PURE__ */ j(
@@ -447,11 +447,20 @@ const Ye = ({ className: e, defaultValue: t, disabled: o, max: n = 100, min: i =
       className: H("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", e),
       ...d,
       children: [
-        /* @__PURE__ */ m(Be, { "data-slot": "slider-track", className: H("bg-slider-track relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"), children: /* @__PURE__ */ m(Te, { "data-slot": "slider-range", className: H("bg-slider-range absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full") }) }),
-        Array.from({ length: p.length }, (R, S) => /* @__PURE__ */ m(
+        /* @__PURE__ */ m(
           ke,
+          {
+            "data-slot": "slider-track",
+            "data-testid": "spectral-slider-track",
+            className: H("bg-slider-track relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"),
+            children: /* @__PURE__ */ m(Be, { "data-slot": "slider-range", "data-testid": "spectral-slider-range", className: H("bg-slider-range absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full") })
+          }
+        ),
+        Array.from({ length: p.length }, (R, S) => /* @__PURE__ */ m(
+          Te,
           {
             "data-slot": "slider-thumb",
+            "data-testid": "spectral-slider-thumb",
             className: "border-slider-thumb-border bg-slider-thumb-bg ring-slider-thumb-ring/50 block size-5 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
           },
           S

package/dist/Switch.js

@@ -5,39 +5,39 @@ import { Switch as p, SwitchThumb as k } from "./Switch/SwitchBase.js";
 import { Label as r } from "./Label.js";
 import { cn as o } from "./utils/twUtils.js";
 import { forwardRef as x } from "react";
-const v = x(({ className: l, disabled: d, id: e, labelPosition: i = "right", labelText: s, name: h, onChange: b, required: n, value: m, hideLabel: a = !1, variant: u, ...f }, g) => {
-  const c = u === "squared";
+const v = x(({ className: l, disabled: d, id: e, labelPosition: i = "right", labelText: s, name: h, onChange: b, required: c, value: m, hideLabel: a = !1, variant: u, ...f }, g) => {
+  const n = u === "squared";
   return /* @__PURE__ */ w("div", { className: "flex items-center", "data-testid": "spectral-switch-container", children: [
     i === "left" && !a && /* @__PURE__ */ t(r, { htmlFor: e, className: "mr-2", "data-testid": "spectral-switch-label-left", children: s }),
     /* @__PURE__ */ t(
       p,
       {
-        "aria-required": n,
+        "aria-required": c,
         className: o(
-          c ? "peer data-[state=checked]:bg-switch-bg--checked data-[state=unchecked]:bg-switch-bg inline-flex h-6 w-10 shrink-0 items-center rounded-sm border-2 border-transparent transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-black disabled:cursor-not-allowed disabled:opacity-50 [&_span]:rounded-[4px]" : "focus-visible:ring-ring focus-visible:ring-offset-background peer data-[state=checked]:bg-switch-bg--checked data-[state=unchecked]:bg-switch-bg inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-2xs transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          n ? "peer data-[state=checked]:bg-switch-bg--checked data-[state=unchecked]:bg-switch-bg inline-flex h-6 w-10 shrink-0 items-center rounded-sm border-2 border-transparent transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-black disabled:cursor-not-allowed disabled:opacity-50 [&_span]:rounded-[4px]" : "focus-visible:ring-ring focus-visible:ring-offset-background peer data-[state=checked]:bg-switch-bg--checked data-[state=unchecked]:bg-switch-bg inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-2xs transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
           l
         ),
-        "data-testid": "spectral-switch-root",
+        "data-testid": "spectral-switch",
         disabled: d,
         id: e,
         name: h,
         onCheckedChange: b,
         ref: g,
-        required: n,
+        required: c,
         value: m,
         ...f,
         children: /* @__PURE__ */ t(
           k,
           {
             className: o(
-              c ? "bg-switch-thumb pointer-events-none block size-5 rounded-full shadow-xs ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 data-[state=checked]:rtl:-translate-x-4" : "bg-switch-thumb pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+              n ? "bg-switch-thumb pointer-events-none block size-5 rounded-full shadow-xs ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 data-[state=checked]:rtl:-translate-x-4" : "bg-switch-thumb pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
             )
           }
         )
       }
     ),
     i === "right" && !a && /* @__PURE__ */ t(r, { htmlFor: e, id: `${e}-label`, className: "ml-2", "data-testid": "spectral-switch-label-right", children: s }),
-    a && /* @__PURE__ */ t(r, { htmlFor: e, className: "sr-only", children: s })
+    a && /* @__PURE__ */ t(r, { htmlFor: e, className: "sr-only", "data-testid": "spectral-switch-label-hidden", children: s })
   ] });
 });
 v.displayName = "Switch";

package/dist/Tabs/TabsBase.js

@@ -24,7 +24,7 @@ const E = M(null), C = (I = "Tabs") => {
     disabled: l,
     baseId: d
   };
-  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 }) });
+  return /* @__PURE__ */ x(E.Provider, { value: r, children: /* @__PURE__ */ x("div", { ref: c, "data-testid": "spectral-tabs", "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,
@@ -117,22 +117,22 @@ const E = M(null), C = (I = "Tabs") => {
   return /* @__PURE__ */ x(
     "button",
     {
-      ref: o,
-      role: "tab",
-      type: "button",
-      "data-testid": "spectral-tabs-trigger",
-      id: d,
       "aria-controls": a,
-      "aria-selected": t,
       "aria-disabled": n,
-      disabled: n,
-      "data-state": t ? "active" : "inactive",
-      "data-disabled": n ? "" : void 0,
-      tabIndex: t ? 0 : -1,
+      "aria-selected": t,
       className: y("tabs-trigger z-10 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600", u),
+      "data-disabled": n ? "" : void 0,
+      "data-state": t ? "active" : "inactive",
+      "data-testid": "spectral-tabs-trigger",
+      disabled: n,
+      id: d,
       onClick: r,
-      onKeyDown: p,
       onFocus: A,
+      onKeyDown: p,
+      ref: o,
+      role: "tab",
+      tabIndex: t ? 0 : -1,
+      type: "button",
       ...f
     }
   );
@@ -141,15 +141,15 @@ const E = M(null), C = (I = "Tabs") => {
   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),
+      "data-state": c ? "active" : "inactive",
+      "data-testid": "spectral-tabs-content",
       hidden: !c,
+      id: v,
+      ref: l,
+      role: "tabpanel",
+      tabIndex: 0,
       ...b
     }
   );

package/dist/Tabs/tabsUtils.js

@@ -1,5 +1,5 @@
 import "react";
-const u = (e) => {
+const s = (e) => {
   const n = {
     left: 0,
     top: 0,
@@ -9,18 +9,18 @@ const u = (e) => {
     isEnclosed: !1
   };
   if (!e.current) return n;
-  const t = e.current.querySelector("[data-state='active']"), o = e.current.closest("[data-orientation]")?.getAttribute("data-orientation") ?? "horizontal", r = e.current.closest(".enclosed") !== null;
-  if (!t) return { ...n, orientation: o, isEnclosed: r };
-  const i = t.getBoundingClientRect(), a = e.current.getBoundingClientRect();
+  const t = e.current.querySelector("[data-state='active']"), r = e.current.closest("[data-orientation]")?.getAttribute("data-orientation") ?? "horizontal", o = e.current.closest(".enclosed") !== null;
+  if (!t) return { ...n, orientation: r, isEnclosed: o };
+  const a = t.getBoundingClientRect(), i = e.current.getBoundingClientRect();
   return {
-    left: i.left - a.left,
-    top: i.top - a.top,
-    width: i.width,
-    height: i.height,
-    orientation: o,
-    isEnclosed: r
+    left: a.left - i.left,
+    top: a.top - i.top,
+    width: a.width,
+    height: a.height,
+    orientation: r,
+    isEnclosed: o
   };
-}, l = (e) => e.orientation === "horizontal" ? {
+}, u = (e) => e.orientation === "horizontal" ? {
   left: `${e.left}px`,
   width: `${e.width}px`
 } : {
@@ -28,9 +28,9 @@ const u = (e) => {
   height: `${e.height}px`
 }, d = (e, n) => {
   let t = null;
-  return (...o) => {
+  return (...r) => {
     t !== null && clearTimeout(t), t = setTimeout(() => {
-      e(...o);
+      e(...r);
     }, n);
   };
 }, f = () => {
@@ -40,32 +40,33 @@ const u = (e) => {
   } catch {
     return !1;
   }
-}, p = (e = "tabs") => typeof crypto < "u" && crypto.randomUUID ? `${e}-${crypto.randomUUID()}` : `${e}-${Math.random().toString(36).substring(2, 11)}-${Date.now().toString(36)}`, c = (e, n) => {
+}, h = (e = "tabs") => typeof crypto < "u" && crypto.randomUUID ? `${e}-${crypto.randomUUID()}` : `${e}-${Math.random().toString(36).substring(2, 11)}-${Date.now().toString(36)}`, c = (e, n) => {
   if (typeof e != "object" || e === null)
-    return process.env.NODE_ENV !== "production" && console.warn(`Tabs: Tab at index ${n} must be an object, received: ${typeof e}`), !1;
+    return console.warn(`Tabs: Tab at index ${n} must be an object, received: ${typeof e}`), !1;
   const t = e;
-  return !("key" in t) || typeof t.key != "string" || t.key.length === 0 ? (process.env.NODE_ENV !== "production" && console.warn(`Tabs: Tab at index ${n} must have a non-empty string 'key' property`), !1) : "label" in t ? "children" in t ? !0 : (process.env.NODE_ENV !== "production" && console.warn(`Tabs: Tab at index ${n} must have a 'children' property`), !1) : (process.env.NODE_ENV !== "production" && console.warn(`Tabs: Tab at index ${n} must have a 'label' property`), !1);
-}, h = (e) => {
+  return !("key" in t) || typeof t.key != "string" || t.key.length === 0 ? (console.warn(`Tabs: Tab at index ${n} must have a non-empty string 'key' property`), !1) : "label" in t ? "children" in t ? !0 : (console.warn(`Tabs: Tab at index ${n} must have a 'children' property`), !1) : (console.warn(`Tabs: Tab at index ${n} must have a 'label' property`), !1);
+}, p = (e) => {
   if (!Array.isArray(e) || e.length === 0)
-    return process.env.NODE_ENV !== "production" && console.warn("Tabs: tabValues must be a non-empty array"), !1;
+    return console.warn("Tabs: tabValues must be a non-empty array"), !1;
   const n = /* @__PURE__ */ new Set();
-  for (const [t, o] of e.entries()) {
-    if (!c(o, t))
+  for (let t = 0; t < e.length; t++) {
+    const r = e[t];
+    if (!c(r, t))
       return !1;
-    const r = o;
-    if (n.has(r.key))
-      return process.env.NODE_ENV !== "production" && console.warn(`Tabs: Duplicate key found: '${r.key}' at index ${t}`), !1;
-    n.add(r.key);
+    const o = r;
+    if (n.has(o.key))
+      return console.warn(`Tabs: Duplicate key found: '${o.key}' at index ${t}`), !1;
+    n.add(o.key);
   }
   return !0;
-}, y = (e) => e.map((n) => n.key), b = (e, n) => e.find((t) => t.key === n);
+}, y = (e) => e.map((n) => n.key), g = (e, n) => e.find((t) => t.key === n);
 export {
-  u as calculateIndicatorStyle,
+  s as calculateIndicatorStyle,
   d as debounce,
-  b as findTabByKey,
-  p as generateId,
-  l as getIndicatorPosition,
+  g as findTabByKey,
+  h as generateId,
+  u as getIndicatorPosition,
   y as getTabKeys,
   f as prefersReducedMotion,
-  h as validateTabValues
+  p as validateTabValues
 };

package/dist/Textarea.js

@@ -82,7 +82,7 @@ const K = "absolute right-4 top-4", Q = (t) => t || "off", U = (t, a) => {
     });
     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__ */ n("div", { className: "relative", children: [
         /* @__PURE__ */ e(
           "textarea",
           {
@@ -109,7 +109,7 @@ const K = "absolute right-4 top-4", Q = (t) => t || "off", U = (t, a) => {
           }
         ),
         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: [
+        /* @__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

package/dist/Toggle/ToggleBase.d.ts

@@ -13,5 +13,5 @@ export declare const ToggleBase: import('react').ForwardRefExoticComponent<Omit<
     onPressedChange?: (pressed: boolean) => void;
     disabled?: boolean;
     asChild?: boolean;
-} & import('react').RefAttributes<HTMLButtonElement>>;
+} & import('react').RefAttributes<HTMLButtonElement | HTMLDivElement>>;
 //# sourceMappingURL=ToggleBase.d.ts.map

package/dist/Toggle/ToggleBase.js

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

package/dist/Toggle.js

@@ -1,13 +1,13 @@
 "use client";
 import "./styles/main.css";
-import { jsx as g } from "react/jsx-runtime";
-import { ToggleBase as n } from "./Toggle/ToggleBase.js";
-import { cn as s } from "./utils/twUtils.js";
-import { c as d } from "./index-D29mdTf5.js";
-import { forwardRef as l } from "react";
-const v = d(
+import { jsx as n } from "react/jsx-runtime";
+import { ToggleBase as s } from "./Toggle/ToggleBase.js";
+import { cn as d } from "./utils/twUtils.js";
+import { c as l } from "./index-D29mdTf5.js";
+import { forwardRef as v } from "react";
+const b = l(
   `
-    bg-toggle-bg inline-flex items-center justify-center gap-2 border rounded-md text-sm shadow-sm font-medium w-fit disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed
+    bg-toggle-bg inline-flex items-center justify-center gap-2 border rounded-md text-sm shadow-sm font-medium w-fit data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed
     hover:cursor-pointer data-[state=on]:text-toggle-text--active text-toggle-text hover:bg-toggle-bg--hover hover:border-toggle-border--hover data-[state=on]:bg-toggle-bg--active
     data-[state=on]:border-toggle-border--active hover:text-toggle-text--hover data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active data-[state=on]:border-toggle-border--active
     transition-[colors] [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus:outline-none outline-none
@@ -35,8 +35,8 @@ 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", "data-testid": "spectral-toggle", className: s(v({ variant: t, size: o, layout: r }), e), ...a }));
+), p = v(({ className: e, variant: t, size: o, layout: r, disabled: a, ...i }, g) => /* @__PURE__ */ n(s, { ref: g, disabled: a, "data-slot": "toggle", "data-testid": "spectral-toggle", className: d(b({ variant: t, size: o, layout: r }), e), ...i }));
 export {
-  m as Toggle,
-  v as toggleVariants
+  p as Toggle,
+  b as toggleVariants
 };

package/dist/Tooltip.d.ts

@@ -1,9 +1,14 @@
+import { VariantProps } from 'class-variance-authority';
 import { ComponentProps } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 export declare const TooltipProvider: ({ delayDuration, ...props }: ComponentProps<typeof TooltipPrimitive.Provider>) => import("react/jsx-runtime").JSX.Element;
 export declare const Tooltip: ({ ...props }: ComponentProps<typeof TooltipPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
-export declare const TooltipTrigger: ({ ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>) => import("react/jsx-runtime").JSX.Element;
-export declare const TooltipContent: ({ children, className, showArrow, sideOffset, ...props }: ComponentProps<typeof TooltipPrimitive.Content> & {
+export declare const TooltipTrigger: ({ asChild, children, ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>) => import("react/jsx-runtime").JSX.Element;
+declare const tooltipVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const TooltipContent: ({ children, className, showArrow, sideOffset, variant, side, ...props }: ComponentProps<typeof TooltipPrimitive.Content> & VariantProps<typeof tooltipVariants> & {
     showArrow?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=Tooltip.d.ts.map