@spear-ai/spectral 1.4.1 → 1.4.3

package/dist/RadioButtonGroup/RadioButtonGroupBase.js

@@ -1,34 +1,35 @@
 "use client";
 import "../styles/main.css";
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import { Slot as x } from "../primitives/slot.js";
 import { cn as c } from "../utils/twUtils.js";
 import { createContext as h, useContext as w } from "react";
-const g = h(null), R = ({ value: e, onValueChange: n, children: i, className: o, isKeptActive: r = !1, expanded: t = !1 }) => /* @__PURE__ */ s(g.Provider, { value: { value: e, onValueChange: n, isKeptActive: r, expanded: t }, children: /* @__PURE__ */ s("div", { role: "radiogroup", "data-expanded": t, className: c("flex h-fit w-fit items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md", "data-[expanded=true]:w-full", o), children: i }) }), _ = ({ value: e, children: n, className: i, disabled: o = !1, asChild: r = !1, onSelect: t }) => {
-  const a = w(g);
-  if (!a)
+const u = h(null), R = ({ value: t, onValueChange: n, children: i, className: o, isKeptActive: r = !1, expanded: e = !1 }) => /* @__PURE__ */ a(u.Provider, { value: { value: t, onValueChange: n, isKeptActive: r, expanded: e }, children: /* @__PURE__ */ a("div", { role: "radiogroup", "data-testid": "spectral-radio-button-group", "data-expanded": e, className: c("flex h-fit w-fit items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md", "data-[expanded=true]:w-full", o), children: i }) }), _ = ({ value: t, children: n, className: i, disabled: o = !1, asChild: r = !1, onSelect: e }) => {
+  const s = w(u);
+  if (!s)
     throw new Error("RadioButtonGroupItem must be used within a RadioButtonGroup");
-  const { value: u, onValueChange: d, isKeptActive: f, expanded: b } = a, l = u === e, v = () => {
-    o || (d && d(e), t && t(e));
-  }, p = r ? x : "button", m = {
+  const { value: g, onValueChange: d, isKeptActive: b, expanded: f } = s, l = g === t, p = () => {
+    o || (d && d(t), e && e(t));
+  }, v = r ? x : "button", m = {
     role: "radio",
     "aria-checked": l,
     "data-state": l ? "on" : "off",
+    "data-testid": "spectral-radio-button-group-item",
     disabled: o,
-    onClick: v,
+    onClick: p,
     className: c(
-      "bg-toggle-bg inline-flex items-center justify-center gap-2 border text-sm font-medium disabled:pointer-events-none disabled:opacity-50",
-      "disabled:cursor-not-allowed hover:cursor-pointer text-toggle-text hover:bg-toggle-bg--hover hover:text-toggle-text--hover 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 border-toggle-border hover:border-toggle-border--hover h-9 px-3 min-w-9 [&_svg:not([class*="size-"]):not([width]):not([height])]:size-4',
-      "rounded-none shadow-none focus:z-10 focus-visible:z-10 [&:not(:first-child)]:border-l-0 active:bg-toggle-bg--active active:text-toggle-text--active",
-      "active:border-toggle-border--active",
-      b && "w-full",
-      f && "data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active data-[state=on]:border-toggle-border--active",
+      `bg-toggle-bg inline-flex items-center justify-center gap-2 border text-sm font-medium disabled:pointer-events-none disabled:opacity-50
+      disabled:cursor-not-allowed hover:cursor-pointer text-toggle-text hover:bg-toggle-bg--hover hover:text-toggle-text--hover 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 border-toggle-border hover:border-toggle-border--hover h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4
+      rounded-none shadow-none focus:z-10 focus-visible:z-10 [&:not(:first-child)]:border-l-0 active:bg-toggle-bg--active active:text-toggle-text--active
+      active:border-toggle-border--active`,
+      f && "w-full",
+      b && "data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active data-[state=on]:border-toggle-border--active",
       i
     )
   };
-  return /* @__PURE__ */ s(p, { ...!r && { type: "button" }, ...m, children: n });
+  return /* @__PURE__ */ a(v, { ...!r && { type: "button" }, ...m, children: n });
 };
 export {
   R as RadioButtonGroupBase,

package/dist/RadioGroup.js

@@ -414,10 +414,11 @@ const le = Re({
     $e,
     {
       className: F("flex text-text-primary w-full", r === "vertical" ? "flex-col gap-4" : "flex-row gap-5", i === "unstyled" && "gap-2.5 w-fit", e),
-      ref: b,
+      "data-testid": "spectral-radio-group",
+      disabled: f.groupDisabled,
       onValueChange: o,
+      ref: b,
       value: s,
-      disabled: f.groupDisabled,
       ...v
     }
   ) });
@@ -428,6 +429,7 @@ const B = he(
     de,
     {
       ref: s,
+      "data-testid": "spectral-radio-group-item",
       className: F(
         "relative aspect-square h-4.5 w-4.5 rounded-full border-2 border-border-subtle bg-radio-bg ring-black transition-colors cursor-pointer",
         "hover:border-radio-border--hover focus-visible:ring-1 focus-visible:ring-offset-2",
@@ -458,7 +460,7 @@ const Je = G(({ className: e, children: t, value: o, description: r, disabled: a
   ] });
 });
 Je.displayName = "RadioGroup.Item";
-const Qe = G(({ className: e, ...t }, o) => /* @__PURE__ */ n(_, { ref: o, className: F("block text-md font-medium", e), ...t }));
+const Qe = G(({ className: e, ...t }, o) => /* @__PURE__ */ n(_, { ref: o, "data-testid": "spectral-radio-group-label", className: F("block text-md font-medium", e), ...t }));
 Qe.displayName = "RadioGroup.Label";
 export {
   Xe as RadioGroup,

package/dist/Select.js

@@ -1,14 +1,14 @@
 "use client";
 import "./styles/main.css";
-import { jsxs as r, jsx as e, Fragment as S } from "react/jsx-runtime";
+import { jsxs as r, jsx as e, Fragment as v } from "react/jsx-runtime";
 import "./Icons/AnalyzeIcon.js";
 import "./Icons/AnnotationsIcon.js";
 import "./Icons/ApprovedIcon.js";
 import "./Icons/CalendarIcon.js";
 import "./Icons/CheckCircleIcon.js";
 import "./Icons/CheckSquareIcon.js";
-import { CheckmarkIcon as J } from "./Icons/CheckmarkIcon.js";
-import { ChevronDownIcon as l } from "./Icons/ChevronDownIcon.js";
+import { CheckmarkIcon as Q } from "./Icons/CheckmarkIcon.js";
+import { ChevronDownIcon as n } from "./Icons/ChevronDownIcon.js";
 import "./Icons/ChevronUpIcon.js";
 import "./Icons/ClockIcon.js";
 import "./Icons/CloseCircleIcon.js";
@@ -32,7 +32,7 @@ import "./Icons/LassoIcon.js";
 import "./Icons/LineToolIcon.js";
 import "./Icons/LineToolIcon2.js";
 import "./Icons/LiveViewIcon.js";
-import { LoaderIcon as K } from "./Icons/LoaderIcon.js";
+import { LoaderIcon as W } from "./Icons/LoaderIcon.js";
 import "./Icons/LocationIcon.js";
 import "./Icons/LogoutIcon.js";
 import "./Icons/MessagesIcon.js";
@@ -58,69 +58,88 @@ import "./Icons/WarningIcon.js";
 import "./Icons/ZoomAllIcon.js";
 import "./Icons/ZoomXIcon.js";
 import "./Icons/ZoomYIcon.js";
-import { Label as I } from "./Label.js";
-import { R as Q, T as W, f as X, e as Y, C as Z, c as _, V as $, S as ee, d as C, G as te, I as re, b as ie, a as oe } from "./index-CevVJ05e.js";
-import { useFormFieldId as ae, useFormFieldState as se, getAriaProps as me, getErrorMessageId as de, groupOptions as le, getFormFieldCSSProperties as ne, getStateClasses as pe, getTriggerClasses as ce, ErrorMessage as ue, LoadingState as he, EmptyState as fe, getOptionClasses as ge } from "./utils/formFieldUtils.js";
+import { Label as C } from "./Label.js";
+import { R as X, T as Y, f as Z, e as _, C as $, c as ee, V as te, S as re, d as I, G as ae, I as ie, b as oe, a as se } from "./index-CevVJ05e.js";
+import { useFormFieldId as le, useFormFieldState as de, getAriaProps as me, getErrorMessageId as ne, groupOptions as pe, getFormFieldCSSProperties as ce, getStateClasses as ue, getTriggerClasses as he, ErrorMessage as ge, LoadingState as fe, EmptyState as be, getOptionClasses as xe } from "./utils/formFieldUtils.js";
 import { cn as o } from "./utils/twUtils.js";
-import { forwardRef as be } from "react";
-const xe = be(
+import { forwardRef as ye, useState as Ne } from "react";
+const Se = ye(
   ({
     align: w = "start",
     alignOffset: z = 0,
     className: F,
-    collisionPadding: j = 10,
-    defaultValue: k,
-    emptyMessage: O = "No options found",
-    errorMessage: n,
+    collisionPadding: O = 10,
+    defaultValue: j,
+    emptyMessage: k = "No options found",
+    errorMessage: p,
     id: L,
     label: s,
-    labelClassName: p,
+    labelClassName: c,
     loadingMessage: T = "Loading…",
-    name: c,
+    name: u,
     onChange: V,
-    options: u = [],
+    options: h = [],
     placeholder: D = "Select an option",
     position: E = "popper",
     side: P = "bottom",
     sideOffset: R = 4,
-    state: i = "default",
-    value: h,
+    state: a = "default",
+    value: g,
     "aria-label": q,
     "aria-describedby": B,
-    ...m
+    ...l
   }, G) => {
-    const a = ae(L, c), f = de(a), { isDisabled: g, isLoading: b, isInvalid: x } = se(m.disabled, i), M = me(i, x, f, B), { groups: y, ungrouped: N } = le(u), A = () => {
-      if (b)
-        return /* @__PURE__ */ e(he, { message: T });
-      if (u.length === 0)
-        return /* @__PURE__ */ e(fe, { message: O });
-      const v = (t) => {
-        const d = h === t.value;
-        return /* @__PURE__ */ r(re, { className: o(ge(d, !1, t.disabled), "relative flex w-full cursor-pointer items-center"), disabled: t.disabled, value: t.value, children: [
-          /* @__PURE__ */ e(ie, { className: "block truncate", children: t.label }),
-          /* @__PURE__ */ e(oe, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "absolute right-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ e(J, { size: 16 }) }) })
+    const [f, M] = Ne(!1), i = le(L, u), b = ne(i), { isDisabled: d, isLoading: x, isInvalid: A } = de(l.disabled, a), H = me(a, b, B), { groups: y, ungrouped: N } = pe(h), U = () => {
+      if (x)
+        return /* @__PURE__ */ e(fe, { message: T });
+      if (h.length === 0)
+        return /* @__PURE__ */ e(be, { message: k });
+      const S = (t) => {
+        const m = g === t.value;
+        return /* @__PURE__ */ r(ie, { className: o(xe(!!t.disabled, !1, m), "relative flex w-full cursor-pointer items-center"), disabled: t.disabled, value: t.value, children: [
+          /* @__PURE__ */ e(oe, { className: "block truncate", children: t.label }),
+          /* @__PURE__ */ e(se, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "absolute right-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ e(Q, { size: 16 }) }) })
         ] }, t.value);
       };
-      return /* @__PURE__ */ r(S, { children: [
-        N.length > 0 && /* @__PURE__ */ r(S, { children: [
-          N.map(v),
-          Object.keys(y).length > 0 && /* @__PURE__ */ e(C, { className: "-mx-1 my-1 h-px bg-border-secondary" })
+      return /* @__PURE__ */ r(v, { children: [
+        N.length > 0 && /* @__PURE__ */ r(v, { children: [
+          N.map(S),
+          Object.keys(y).length > 0 && /* @__PURE__ */ e(I, { className: "-mx-1 my-1 h-px bg-border-secondary" })
         ] }),
-        Object.entries(y).map(([t, d], H) => /* @__PURE__ */ r(te, { children: [
-          H > 0 && /* @__PURE__ */ e(C, { className: "-mx-1 my-1 h-px bg-border-secondary" }),
-          /* @__PURE__ */ e(I, { htmlFor: a, className: o("px-2 py-1.5 text-base font-semibold text-text-primary", p), children: t }),
-          d.map((U) => v(U))
+        Object.entries(y).map(([t, m], J) => /* @__PURE__ */ r(ae, { children: [
+          J > 0 && /* @__PURE__ */ e(I, { className: "-mx-1 my-1 h-px bg-border-secondary" }),
+          /* @__PURE__ */ e(C, { htmlFor: i, className: o("px-2 py-1.5 text-base font-semibold text-text-primary", c), children: t }),
+          m.map((K) => S(K))
         ] }, t))
       ] });
     };
-    return /* @__PURE__ */ r("div", { className: "w-full", "data-testid": "select-root", children: [
-      s && /* @__PURE__ */ e(I, { htmlFor: a, className: o("block mb-4 text-text-primary", p, g && "text-text-secondary"), children: s }),
-      /* @__PURE__ */ r(Q, { defaultValue: k, disabled: g, name: c, onValueChange: V, required: m.required, value: h, children: [
-        /* @__PURE__ */ e(W, { "aria-label": q || s, asChild: !0, className: o(ce(i, !1), pe(i), F), "data-state": i, id: a, ref: G, style: ne(), ...M, ...m, children: /* @__PURE__ */ r("button", { type: "button", children: [
-          /* @__PURE__ */ e(X, { placeholder: D, className: "block truncate" }),
-          /* @__PURE__ */ e(Y, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "flex items-center", children: b ? /* @__PURE__ */ e(K, { size: 20 }) : /* @__PURE__ */ e(l, { className: "transition-transform duration-200 data-[state=open]:rotate-180", size: 20 }) }) })
-        ] }) }),
-        /* @__PURE__ */ e(Z, { align: w, alignOffset: z, asChild: !0, collisionPadding: j, position: E, side: P, sideOffset: R, children: /* @__PURE__ */ r(
+    return /* @__PURE__ */ r("div", { className: "w-full", "data-testid": "spectral-select-wrapper", children: [
+      s && /* @__PURE__ */ e(C, { "data-testid": "spectral-select-label", htmlFor: i, className: o("block mb-4 text-text-primary", c, d && "text-text-secondary"), children: s }),
+      /* @__PURE__ */ r(X, { "data-testid": "spectral-select", defaultValue: j, disabled: d, name: u, onOpenChange: M, onValueChange: V, open: f, required: l.required, value: g, children: [
+        /* @__PURE__ */ e(
+          Y,
+          {
+            "aria-controls": i,
+            "aria-expanded": f,
+            "aria-label": q || s,
+            asChild: !0,
+            className: o(he(!1, a), ue(a), F),
+            "data-slot": "select-trigger",
+            "data-state": a,
+            "data-testid": "spectral-select-trigger",
+            id: i,
+            ref: G,
+            role: "combobox",
+            style: ce(),
+            ...H,
+            ...l,
+            children: /* @__PURE__ */ r("button", { type: "button", disabled: d, children: [
+              /* @__PURE__ */ e(Z, { placeholder: D, className: "block truncate" }),
+              /* @__PURE__ */ e(_, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "flex items-center", children: x ? /* @__PURE__ */ e(W, { size: 20 }) : /* @__PURE__ */ e(n, { className: "transition-transform duration-200 data-[state=open]:rotate-180", size: 20 }) }) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ e($, { align: w, alignOffset: z, "data-slot": "select-content", "data-testid": "spectral-select-content", asChild: !0, collisionPadding: O, position: E, side: P, sideOffset: R, children: /* @__PURE__ */ r(
           "div",
           {
             className: o(
@@ -140,18 +159,18 @@ const xe = be(
               width: "var(--radix-select-trigger-width)"
             },
             children: [
-              /* @__PURE__ */ e(_, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ e(l, { className: "rotate-180", size: 18 }) }),
-              /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "p-1 max-h-96", style: { position: "relative", overflow: "hidden auto" }, children: A() }) }),
-              /* @__PURE__ */ e(ee, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ e(l, { size: 18 }) })
+              /* @__PURE__ */ e(ee, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ e(n, { className: "rotate-180", size: 18 }) }),
+              /* @__PURE__ */ e(te, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "p-1 max-h-96", style: { position: "relative", overflow: "hidden auto" }, children: U() }) }),
+              /* @__PURE__ */ e(re, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ e(n, { size: 18 }) })
             ]
           }
         ) })
       ] }),
-      x && n && /* @__PURE__ */ e(ue, { id: f, message: n })
+      A && p && /* @__PURE__ */ e(ge, { "data-testid": "spectral-select-error-message", id: b, message: p })
     ] });
   }
 );
-xe.displayName = "Select";
+Se.displayName = "Select";
 export {
-  xe as Select
+  Se as Select
 };

package/dist/Slider.js

@@ -6,8 +6,8 @@ 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 { c as me, u as he } from "./index-UEFPWH8U.js";
-import { u as Se } from "./index-BZPx6jYI.js";
-import { u as pe } from "./index-y6Br5T4h.js";
+import { u as pe } from "./index-BZPx6jYI.js";
+import { u as Se } from "./index-y6Br5T4h.js";
 import { cn as H } from "./utils/twUtils.js";
 var G = ["PageUp", "PageDown"], W = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], q = {
   "from-left": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
@@ -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 = pe(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 = 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;
     return c.useEffect(() => {
       if (u)
         return a.thumbs.add(u), () => {
@@ -357,7 +357,7 @@ var U = "SliderThumb", ie = c.forwardRef(
 ie.displayName = U;
 var Pe = "RadioBubbleInput", ae = c.forwardRef(
   ({ __scopeSlider: e, value: t, ...o }, n) => {
-    const i = c.useRef(null), l = C(i, n), a = Se(t);
+    const i = c.useRef(null), l = C(i, n), a = pe(t);
     return c.useEffect(() => {
       const s = i.current;
       if (!s) return;
@@ -428,7 +428,11 @@ const Ye = ({ className: e, defaultValue: t, disabled: o, max: n = 100, min: i =
   return /* @__PURE__ */ j(
     Ie,
     {
+      "aria-valuemin": i,
+      "aria-valuemax": n,
+      "aria-valuenow": p[0],
       "data-slot": "slider",
+      "data-testid": "spectral-slider",
       defaultValue: t,
       value: r,
       min: i,

package/dist/Switch/SwitchBase.d.ts

@@ -4,20 +4,20 @@ type BaseButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'
 export type SwitchProps = BaseButtonProps & AsChildProp & {
     checked?: boolean;
     defaultChecked?: boolean;
-    onCheckedChange?: (checked: boolean) => void;
+    form?: string;
     name?: string;
-    value?: string;
+    onCheckedChange?: (checked: boolean) => void;
     required?: boolean;
-    form?: string;
+    value?: string;
 };
 export declare const Switch: import('react').ForwardRefExoticComponent<BaseButtonProps & AsChildProp & {
     checked?: boolean;
     defaultChecked?: boolean;
-    onCheckedChange?: (checked: boolean) => void;
+    form?: string;
     name?: string;
-    value?: string;
+    onCheckedChange?: (checked: boolean) => void;
     required?: boolean;
-    form?: string;
+    value?: string;
 } & import('react').RefAttributes<HTMLButtonElement>>;
 export type SwitchThumbProps = HTMLAttributes<HTMLSpanElement> & AsChildProp;
 export declare const SwitchThumb: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & AsChildProp & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/Switch/SwitchBase.js

@@ -1,14 +1,14 @@
 "use client";
 import "../styles/main.css";
-import { jsx as h, jsxs as K } from "react/jsx-runtime";
+import { jsx as p, jsxs as K } from "react/jsx-runtime";
 import { useControllableState as M } from "../hooks/useControllableState.js";
 import { Slot as g } from "../primitives/slot.js";
 import { cn as x } from "../utils/twUtils.js";
 import { createContext as O, forwardRef as y, useRef as V, useId as $, useEffect as k, useCallback as d, useContext as z } from "react";
-const C = O(null), A = y(({ asChild: u, className: l, checked: f, defaultChecked: n = !1, onCheckedChange: o, name: m, value: p = "on", required: E, form: S, disabled: r, id: R, onClick: b, onKeyDown: w, children: I, ...N }, P) => {
+const C = O(null), A = y(({ asChild: u, className: l, checked: h, defaultChecked: r = !1, onCheckedChange: o, name: f, value: m = "on", required: E, form: S, disabled: n, id: R, onClick: b, onKeyDown: v, children: I, ...N }, P) => {
   const c = V(null), T = $(), j = R ?? `swt-${T}`, [t, s] = M({
-    value: f,
-    defaultValue: n,
+    value: h,
+    defaultValue: r,
     onChange: o
   });
   k(() => {
@@ -16,42 +16,33 @@ const C = O(null), A = y(({ asChild: u, className: l, checked: f, defaultChecked
   }, [t]), k(() => {
     const e = c.current?.form ?? null;
     if (!e) return;
-    const a = () => s(n);
+    const a = () => s(r);
     return e.addEventListener("reset", a), () => e.removeEventListener("reset", a);
-  }, [n, s]);
-  const v = d(() => {
+  }, [r, s]);
+  const w = d(() => {
     const e = c.current;
     if (!e) return;
     e.checked = t;
     const a = new Event("change", { bubbles: !0 });
     e.dispatchEvent(a);
   }, [t]), i = d(() => {
-    r || (s(!t), queueMicrotask(() => v()));
-  }, [r, v, t, s]), D = d(
+    n || (s(!t), queueMicrotask(() => w()));
+  }, [n, w, t, s]), D = d(
     (e) => {
       b?.(e), !e.defaultPrevented && i();
     },
     [b, i]
   ), L = d(
     (e) => {
-      w?.(e), !e.defaultPrevented && (e.key === " " || e.key === "Enter") && (e.preventDefault(), i());
+      v?.(e), !e.defaultPrevented && (e.key === " " || e.key === "Enter") && (e.preventDefault(), i());
     },
-    [w, i]
+    [v, i]
   ), q = u ? g : "button", F = P;
-  return /* @__PURE__ */ h(C.Provider, { value: { checked: t, disabled: r }, children: /* @__PURE__ */ K(
+  return /* @__PURE__ */ p(C.Provider, { value: { checked: t, disabled: n }, children: /* @__PURE__ */ K(
     q,
     {
-      id: j,
-      ref: F,
-      type: "button",
-      role: "switch",
       "aria-checked": t,
-      "aria-disabled": r || void 0,
-      "data-state": t ? "checked" : "unchecked",
-      "data-disabled": r || void 0,
-      onClick: D,
-      onKeyDown: L,
-      disabled: r,
+      "aria-disabled": n || void 0,
       className: x(
         "peer border-input inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border",
         "bg-input focus-visible:ring-ring transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
@@ -59,22 +50,31 @@ const C = O(null), A = y(({ asChild: u, className: l, checked: f, defaultChecked
         "data-[state=checked]:bg-primary",
         l
       ),
+      "data-disabled": n || void 0,
+      "data-state": t ? "checked" : "unchecked",
+      disabled: n,
+      id: j,
+      onClick: D,
+      onKeyDown: L,
+      ref: F,
+      role: "switch",
+      type: "button",
       ...N,
       children: [
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ p(
           "input",
           {
-            ref: c,
-            type: "checkbox",
-            name: m,
-            value: p,
-            required: E,
-            disabled: r,
-            form: S,
+            "aria-hidden": "true",
             checked: t,
+            disabled: n,
+            form: S,
+            name: f,
             readOnly: !0,
+            ref: c,
+            required: E,
             tabIndex: -1,
-            "aria-hidden": "true",
+            type: "checkbox",
+            value: m,
             style: {
               position: "absolute",
               opacity: 0,
@@ -90,17 +90,18 @@ const C = O(null), A = y(({ asChild: u, className: l, checked: f, defaultChecked
   ) });
 });
 A.displayName = "Switch";
-const B = y(({ asChild: u, className: l, ...f }, n) => {
+const B = y(({ asChild: u, className: l, ...h }, r) => {
   const o = z(C);
   if (!o) throw new Error("SwitchThumb must be used within Switch");
-  return /* @__PURE__ */ h(
-    u ? g : "span",
+  const f = u ? g : "span", m = r;
+  return /* @__PURE__ */ p(
+    f,
     {
-      ref: n,
-      "data-state": o.checked ? "checked" : "unchecked",
-      "data-disabled": o.disabled || void 0,
       className: x("bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform", "translate-x-0 data-[state=checked]:translate-x-5", l),
-      ...f
+      "data-disabled": o.disabled || void 0,
+      "data-state": o.checked ? "checked" : "unchecked",
+      ref: m,
+      ...h
     }
   );
 });

package/dist/Switch.js

@@ -3,39 +3,40 @@ import "./styles/main.css";
 import { jsxs as w, jsx as t } from "react/jsx-runtime";
 import { Switch as p, SwitchThumb as k } from "./Switch/SwitchBase.js";
 import { Label as r } from "./Label.js";
-import { cn as c } from "./utils/twUtils.js";
+import { cn as o } from "./utils/twUtils.js";
 import { forwardRef as x } from "react";
-const v = x(({ className: o, disabled: d, id: e, labelPosition: i = "right", labelText: s, name: l, onChange: h, required: b, value: m, hideLabel: a = !1, variant: u, ...f }, g) => {
-  const n = u === "squared";
-  return /* @__PURE__ */ w("div", { className: "flex items-center", "data-testid": "switch-container", children: [
-    i === "left" && !a && /* @__PURE__ */ t(r, { htmlFor: e, className: "mr-2", "data-testid": "switch-label-left", children: s }),
+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";
+  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,
       {
-        "data-testid": "switch-root",
-        className: c(
-          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",
-          o
+        "aria-required": n,
+        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",
+          l
         ),
+        "data-testid": "spectral-switch-root",
         disabled: d,
         id: e,
-        name: l,
-        onCheckedChange: h,
+        name: h,
+        onCheckedChange: b,
+        ref: g,
+        required: n,
         value: m,
-        required: b,
         ...f,
-        ref: g,
         children: /* @__PURE__ */ t(
           k,
           {
-            className: c(
-              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"
+            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"
             )
           }
         )
       }
     ),
-    i === "right" && !a && /* @__PURE__ */ t(r, { htmlFor: e, id: `${e}-label`, className: "ml-2", "data-testid": "switch-label-right", children: s }),
+    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 })
   ] });
 });