@spear-ai/spectral 1.4.26 → 1.4.27

package/dist/Select.js

@@ -64,118 +64,117 @@ import "./Icons/ZoomAllIcon.js";
 import "./Icons/ZoomXIcon.js";
 import "./Icons/ZoomYIcon.js";
 import { Label as C } from "./Label.js";
-import { R as X, T as Y, f as Z, e as _, C as $, c as tt, V as et, S as rt, d as I, G as at, I as it, b as st, a as ot } from "./index-BSCg4Mei.js";
-import { useFormFieldId as lt, useFormFieldState as dt, getAriaProps as mt, getErrorMessageId as ct, groupOptions as pt, getFormFieldCSSProperties as nt, getStateClasses as ut, getTriggerClasses as ht, ErrorMessage as gt, LoadingState as bt, EmptyState as ft, getOptionClasses as xt } from "./utils/formFieldUtils.js";
+import { R as X, T as Y, f as Z, e as _, C as $, c as tt, V as et, S as rt, d as I, G as at, I as it, b as st, a as ot } from "./index-B0Kp8R0j.js";
+import { useFormFieldId as lt, useFormFieldState as dt, getAriaProps as mt, groupOptions as ct, getFormFieldCSSProperties as pt, getStateClasses as nt, getTriggerClasses as ut, ErrorMessage as ht, getErrorMessageId as gt, LoadingState as bt, EmptyState as ft, getOptionClasses as xt } from "./utils/formFieldUtils.js";
 import { cn as s } from "./utils/twUtils.js";
-import { forwardRef as yt, useState as Nt } from "react";
-const vt = yt(
-  ({
-    align: w = "start",
-    alignOffset: z = 0,
-    className: F,
-    collisionPadding: O = 10,
-    defaultValue: j,
-    emptyMessage: k = "No options found",
-    errorMessage: p,
-    id: L,
-    label: l,
-    labelClassName: n,
-    loadingMessage: T = "Loading…",
-    name: u,
-    onChange: V,
-    options: h = [],
-    placeholder: q = "Select an option",
-    position: D = "popper",
-    side: E = "bottom",
-    sideOffset: P = 4,
-    state: a = "default",
-    value: g,
-    "aria-label": R,
-    "aria-describedby": B,
-    ...o
-  }, G) => {
-    const [b, M] = Nt(!1), i = lt(L, u), f = ct(i), { isDisabled: d, isLoading: x, isInvalid: A } = dt(o.disabled, a), H = mt(a, B, o.required, f), { groups: y, ungrouped: N } = pt(h), U = () => {
-      if (x)
-        return /* @__PURE__ */ t(bt, { "data-testid": "spectral-select-loading", message: T });
-      if (h.length === 0)
-        return /* @__PURE__ */ t(ft, { "data-testid": "spectral-select-empty", message: k });
-      const v = (e) => {
-        const m = g === e.value;
-        return /* @__PURE__ */ r(it, { className: s(xt(!!e.disabled, !1, m), "relative flex w-full cursor-pointer items-center"), "data-testid": "spectral-select-item", disabled: e.disabled, value: e.value, children: [
-          /* @__PURE__ */ t(st, { "data-testid": "spectral-select-item-text", className: "block truncate", children: e.label }),
-          /* @__PURE__ */ t(ot, { "data-testid": "spectral-select-item-selected-indicator", asChild: !0, children: /* @__PURE__ */ t("span", { className: "absolute right-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ t(Q, { size: 16 }) }) })
-        ] }, e.value);
-      };
-      return /* @__PURE__ */ r(S, { children: [
-        N.length > 0 && /* @__PURE__ */ r(S, { children: [
-          N.map(v),
-          Object.keys(y).length > 0 && /* @__PURE__ */ t(I, { className: "-mx-1 my-1 h-px bg-border-secondary", "data-testid": "spectral-select-separator" })
-        ] }),
-        Object.entries(y).map(([e, m], J) => /* @__PURE__ */ r(at, { "data-testid": "spectral-select-group", children: [
-          J > 0 && /* @__PURE__ */ t(I, { className: "-mx-1 my-1 h-px bg-border-secondary", "data-testid": "spectral-select-group-separator" }),
-          /* @__PURE__ */ t(C, { "data-testid": "spectral-select-group-label", htmlFor: i, className: s("px-2 py-1.5 text-base font-semibold text-text-primary", n), children: e }),
-          m.map((K) => v(K))
-        ] }, e))
-      ] });
+import { useState as yt } from "react";
+const Nt = ({
+  ref: w,
+  align: z = "start",
+  alignOffset: F = 0,
+  className: O,
+  collisionPadding: j = 10,
+  defaultValue: k,
+  emptyMessage: L = "No options found",
+  errorMessage: p,
+  id: T,
+  label: l,
+  labelClassName: n,
+  loadingMessage: V = "Loading…",
+  name: u,
+  onChange: q,
+  options: h = [],
+  placeholder: D = "Select an option",
+  position: E = "popper",
+  side: P = "bottom",
+  sideOffset: B = 4,
+  state: a = "default",
+  value: g,
+  "aria-label": G,
+  "aria-describedby": M,
+  ...o
+}) => {
+  const [b, R] = yt(!1), i = lt(T, u), f = gt(i), { isDisabled: d, isLoading: x, isInvalid: A } = dt(o.disabled, a), H = mt(a, M, o.required, f), { groups: y, ungrouped: N } = ct(h), U = () => {
+    if (x)
+      return /* @__PURE__ */ t(bt, { "data-testid": "spectral-select-loading", message: V });
+    if (h.length === 0)
+      return /* @__PURE__ */ t(ft, { "data-testid": "spectral-select-empty", message: L });
+    const v = (e) => {
+      const m = g === e.value;
+      return /* @__PURE__ */ r(it, { className: s(xt(!!e.disabled, !1, m), "relative flex w-full cursor-pointer items-center"), "data-testid": "spectral-select-item", disabled: e.disabled, value: e.value, children: [
+        /* @__PURE__ */ t(st, { "data-testid": "spectral-select-item-text", className: "block truncate", children: e.label }),
+        /* @__PURE__ */ t(ot, { "data-testid": "spectral-select-item-selected-indicator", asChild: !0, children: /* @__PURE__ */ t("span", { className: "absolute right-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ t(Q, { size: 16 }) }) })
+      ] }, e.value);
     };
-    return /* @__PURE__ */ r("div", { className: "w-full", children: [
-      l && /* @__PURE__ */ t(C, { "data-testid": "spectral-select-label", htmlFor: i, className: s("block mb-4 text-text-primary", n, d && "text-text-secondary"), children: l }),
-      /* @__PURE__ */ r(X, { "data-testid": "spectral-select", defaultValue: j, disabled: d, name: u, onOpenChange: M, onValueChange: V, open: b, required: o.required, value: g, children: [
-        /* @__PURE__ */ t(
-          Y,
-          {
-            "aria-controls": i,
-            "aria-expanded": b,
-            "aria-label": R || l,
-            asChild: !0,
-            className: s(ht(!1, a), ut(a), F),
-            "data-slot": "select-trigger",
-            "data-state": a,
-            "data-testid": "spectral-select-trigger",
-            id: i,
-            ref: G,
-            role: "combobox",
-            style: nt(),
-            ...H,
-            ...o,
-            children: /* @__PURE__ */ r("button", { type: "button", disabled: d, children: [
-              /* @__PURE__ */ t(Z, { placeholder: q, className: "block truncate", "data-testid": "spectral-select-value" }),
-              /* @__PURE__ */ t(_, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "flex items-center", children: x ? /* @__PURE__ */ t(W, { size: 20 }) : /* @__PURE__ */ t(c, { className: "transition-transform duration-200 data-[state=open]:rotate-180", size: 20 }) }) })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ t($, { align: w, alignOffset: z, "data-slot": "select-content", "data-testid": "spectral-select-content", asChild: !0, collisionPadding: O, position: D, side: E, sideOffset: P, children: /* @__PURE__ */ r(
-          "div",
-          {
-            className: s(
-              "z-50 rounded-lg border border-input-border bg-input-bg shadow-md",
-              "data-[state=open]:animate-in data-[state=closed]:animate-out",
-              "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-              "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-              "data-[side=bottom]:slide-in-from-top-2",
-              "data-[side=left]:slide-in-from-right-2",
-              "data-[side=right]:slide-in-from-left-2",
-              "data-[side=top]:slide-in-from-bottom-2"
-            ),
-            style: {
-              boxSizing: "border-box",
-              maxHeight: "var(--radix-select-content-available-height)",
-              position: "fixed",
-              width: "var(--radix-select-trigger-width)"
-            },
-            children: [
-              /* @__PURE__ */ t(tt, { className: "flex cursor-default items-center justify-center py-1", "data-testid": "spectral-select-scroll-up-button", children: /* @__PURE__ */ t(c, { className: "rotate-180", size: 18 }) }),
-              /* @__PURE__ */ t(et, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "p-1 max-h-96", "data-testid": "spectral-select-items", style: { position: "relative", overflow: "hidden auto" }, children: U() }) }),
-              /* @__PURE__ */ t(rt, { className: "flex cursor-default items-center justify-center py-1", "data-testid": "spectral-select-scroll-down-button", children: /* @__PURE__ */ t(c, { size: 18 }) })
-            ]
-          }
-        ) })
+    return /* @__PURE__ */ r(S, { children: [
+      N.length > 0 && /* @__PURE__ */ r(S, { children: [
+        N.map(v),
+        Object.keys(y).length > 0 && /* @__PURE__ */ t(I, { className: "bg-border-secondary -mx-1 my-1 h-px", "data-testid": "spectral-select-separator" })
       ] }),
-      A && p && /* @__PURE__ */ t(gt, { "data-testid": "spectral-select-error-message", id: f, message: p })
+      Object.entries(y).map(([e, m], J) => /* @__PURE__ */ r(at, { "data-testid": "spectral-select-group", children: [
+        J > 0 && /* @__PURE__ */ t(I, { className: "bg-border-secondary -mx-1 my-1 h-px", "data-testid": "spectral-select-group-separator" }),
+        /* @__PURE__ */ t(C, { "data-testid": "spectral-select-group-label", htmlFor: i, className: s("text-text-primary px-2 py-1.5 text-base font-semibold", n), children: e }),
+        m.map((K) => v(K))
+      ] }, e))
     ] });
-  }
-);
-vt.displayName = "Select";
+  };
+  return /* @__PURE__ */ r("div", { className: "w-full", children: [
+    l && /* @__PURE__ */ t(C, { "data-testid": "spectral-select-label", htmlFor: i, className: s("text-text-primary mb-4 block", n, d && "text-text-secondary"), children: l }),
+    /* @__PURE__ */ r(X, { "data-testid": "spectral-select", defaultValue: k, disabled: d, name: u, onOpenChange: R, onValueChange: q, open: b, required: o.required, value: g, children: [
+      /* @__PURE__ */ t(
+        Y,
+        {
+          "aria-controls": i,
+          "aria-expanded": b,
+          "aria-label": G || l,
+          asChild: !0,
+          className: s(ut(!1, a), nt(a), O),
+          "data-slot": "select-trigger",
+          "data-state": a,
+          "data-testid": "spectral-select-trigger",
+          id: i,
+          ref: w,
+          role: "combobox",
+          style: pt(),
+          ...H,
+          ...o,
+          children: /* @__PURE__ */ r("button", { type: "button", disabled: d, children: [
+            /* @__PURE__ */ t(Z, { placeholder: D, className: "block truncate", "data-testid": "spectral-select-value" }),
+            /* @__PURE__ */ t(_, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "flex items-center", children: x ? /* @__PURE__ */ t(W, { size: 20 }) : /* @__PURE__ */ t(c, { className: "transition-transform duration-200 data-[state=open]:rotate-180", size: 20 }) }) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ t($, { align: z, alignOffset: F, "data-slot": "select-content", "data-testid": "spectral-select-content", asChild: !0, collisionPadding: j, position: E, side: P, sideOffset: B, children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: s(
+            "border-input-border bg-input-bg z-50 rounded-lg border shadow-md",
+            "data-[state=open]:animate-in data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+            "data-[side=bottom]:slide-in-from-top-2",
+            "data-[side=left]:slide-in-from-right-2",
+            "data-[side=right]:slide-in-from-left-2",
+            "data-[side=top]:slide-in-from-bottom-2"
+          ),
+          style: {
+            boxSizing: "border-box",
+            maxHeight: "var(--radix-select-content-available-height)",
+            position: "fixed",
+            width: "var(--radix-select-trigger-width)"
+          },
+          children: [
+            /* @__PURE__ */ t(tt, { className: "flex cursor-default items-center justify-center py-1", "data-testid": "spectral-select-scroll-up-button", children: /* @__PURE__ */ t(c, { className: "rotate-180", size: 18 }) }),
+            /* @__PURE__ */ t(et, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "max-h-96 p-1", "data-testid": "spectral-select-items", style: { position: "relative", overflow: "hidden auto" }, children: U() }) }),
+            /* @__PURE__ */ t(rt, { className: "flex cursor-default items-center justify-center py-1", "data-testid": "spectral-select-scroll-down-button", children: /* @__PURE__ */ t(c, { size: 18 }) })
+          ]
+        }
+      ) })
+    ] }),
+    A && p && /* @__PURE__ */ t(ht, { "data-testid": "spectral-select-error-message", id: f, message: p })
+  ] });
+};
+Nt.displayName = "Select";
 export {
-  vt as Select
+  Nt as Select
 };

package/dist/Separator.d.ts

@@ -1,12 +1,12 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, Ref } from 'react';
 export type SeparatorProps = {
-    orientation?: 'horizontal' | 'vertical';
-    decorative?: boolean;
     className?: string;
-} & ComponentPropsWithoutRef<'div'>;
-export declare const Separator: import('react').ForwardRefExoticComponent<{
-    orientation?: "horizontal" | "vertical";
     decorative?: boolean;
-    className?: string;
-} & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    orientation?: 'horizontal' | 'vertical';
+    ref?: Ref<HTMLDivElement>;
+} & ComponentPropsWithoutRef<'div'>;
+export declare const Separator: {
+    ({ className, decorative, orientation, ref, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=Separator.d.ts.map

package/dist/Separator.js

@@ -1,22 +1,21 @@
-"use client";
 import "./styles/main.css";
-import { jsx as i } from "react/jsx-runtime";
-import { cn as p } from "./utils/twUtils.js";
-import { forwardRef as l } from "react";
-const n = l(({ className: o, orientation: r = "horizontal", decorative: a = !0, ...t }, e) => /* @__PURE__ */ i(
+import { jsx as p } from "react/jsx-runtime";
+import { cn as e } from "./utils/twUtils.js";
+import "react";
+const l = ({ className: o, decorative: r = !0, orientation: a = "horizontal", ref: t, ...i }) => /* @__PURE__ */ p(
   "div",
   {
-    ref: e,
+    ref: t,
     "data-slot": "separator",
-    "data-orientation": r,
-    role: a ? "none" : "separator",
-    "aria-hidden": a ? "true" : void 0,
-    "aria-orientation": a ? void 0 : r,
-    className: p("bg-border shrink-0", r === "horizontal" ? "h-px w-full" : "h-full w-px", o),
-    ...t
+    "data-orientation": a,
+    role: r ? "none" : "separator",
+    "aria-hidden": r ? "true" : void 0,
+    "aria-orientation": r ? void 0 : a,
+    className: e("bg-border shrink-0", a === "horizontal" ? "h-px w-full" : "h-full w-px", o),
+    ...i
   }
-));
-n.displayName = "Separator";
+);
+l.displayName = "Separator";
 export {
-  n as Separator
+  l as Separator
 };

package/dist/Switch/SwitchBase.d.ts

@@ -1,5 +1,5 @@
 import { AsChildProp } from '../primitives/slot';
-import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, HTMLAttributes, Ref } from 'react';
 type BaseButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value'>;
 export type SwitchProps = BaseButtonProps & AsChildProp & {
     checked?: boolean;
@@ -10,16 +10,18 @@ export type SwitchProps = BaseButtonProps & AsChildProp & {
     required?: boolean;
     value?: string;
 };
-export declare const Switch: import('react').ForwardRefExoticComponent<BaseButtonProps & AsChildProp & {
-    checked?: boolean;
-    defaultChecked?: boolean;
-    form?: string;
-    name?: string;
-    onCheckedChange?: (checked: boolean) => void;
-    required?: boolean;
-    value?: string;
-} & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const Switch: {
+    ({ ref, asChild, className, checked, defaultChecked, onCheckedChange, name, value, required, form, disabled, id, onClick, onKeyDown, children, ...rest }: SwitchProps & {
+        ref?: Ref<HTMLButtonElement>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export type SwitchThumbProps = HTMLAttributes<HTMLSpanElement> & AsChildProp;
-export declare const SwitchThumb: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & AsChildProp & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const SwitchThumb: {
+    ({ ref, asChild, className, ...props }: SwitchThumbProps & {
+        ref?: Ref<HTMLSpanElement>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};
 //# sourceMappingURL=SwitchBase.d.ts.map

package/dist/Switch/SwitchBase.js

@@ -1,80 +1,99 @@
 "use client";
 import "../styles/main.css";
-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: 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({
+import { jsx as f, jsxs as F } from "react/jsx-runtime";
+import { useControllableState as K } from "../hooks/useControllableState.js";
+import { Slot as w } from "../primitives/slot.js";
+import { cn as g } from "../utils/twUtils.js";
+import { createContext as M, useRef as O, useId as V, useEffect as v, useCallback as a, useContext as $ } from "react";
+const x = M(null), z = ({
+  ref: u,
+  asChild: d,
+  className: l,
+  checked: h,
+  defaultChecked: n = !1,
+  onCheckedChange: m,
+  name: y,
+  value: C = "on",
+  required: E,
+  form: S,
+  disabled: r,
+  id: I,
+  onClick: p,
+  onKeyDown: b,
+  children: N,
+  ...P
+}) => {
+  const c = O(null), R = V(), T = I ?? `swt-${R}`, [t, s] = K({
     value: h,
-    defaultValue: r,
-    onChange: o
+    defaultValue: n,
+    onChange: m
   });
-  k(() => {
+  v(() => {
     c.current && (c.current.checked = t);
-  }, [t]), k(() => {
+  }, [t]), v(() => {
     const e = c.current?.form ?? null;
     if (!e) return;
-    const a = () => s(r);
-    return e.addEventListener("reset", a), () => e.removeEventListener("reset", a);
-  }, [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(() => {
-    n || (s(!t), queueMicrotask(() => w()));
-  }, [n, w, t, s]), D = d(
+    const o = () => s(n);
+    return e.addEventListener("reset", o), () => e.removeEventListener("reset", o);
+  }, [n, s]);
+  const k = a((e) => {
+    const o = c.current;
+    if (!o) return;
+    o.checked = e;
+    const q = new Event("change", { bubbles: !0 });
+    o.dispatchEvent(q);
+  }, []), i = a(() => {
+    if (r) return;
+    const e = !t;
+    s(e), queueMicrotask(() => k(e));
+  }, [r, k, t, s]), j = a(
     (e) => {
-      b?.(e), !e.defaultPrevented && i();
+      p?.(e), !e.defaultPrevented && i();
     },
-    [b, i]
-  ), L = d(
+    [p, i]
+  ), D = a(
     (e) => {
-      v?.(e), !e.defaultPrevented && (e.key === " " || e.key === "Enter") && (e.preventDefault(), i());
+      b?.(e), !e.defaultPrevented && (e.key === " " || e.key === "Enter") && (e.preventDefault(), i());
     },
-    [v, i]
-  ), q = u ? g : "button", F = P;
-  return /* @__PURE__ */ p(C.Provider, { value: { checked: t, disabled: n }, children: /* @__PURE__ */ K(
-    q,
+    [b, i]
+  ), L = d ? w : "button";
+  return /* @__PURE__ */ f(x.Provider, { value: { checked: t, disabled: r }, children: /* @__PURE__ */ F(
+    L,
     {
       "aria-checked": t,
-      "aria-disabled": n || void 0,
-      className: x(
+      "aria-disabled": r || void 0,
+      className: g(
         "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",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "data-[state=checked]:bg-primary",
         l
       ),
-      "data-disabled": n || void 0,
+      "data-disabled": r || void 0,
       "data-state": t ? "checked" : "unchecked",
-      disabled: n,
-      id: j,
-      onClick: D,
-      onKeyDown: L,
-      ref: F,
+      disabled: r,
+      id: T,
+      onClick: j,
+      onKeyDown: D,
+      ref: u,
       role: "switch",
       type: "button",
-      ...N,
+      ...P,
       children: [
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ f(
           "input",
           {
             "aria-hidden": "true",
             checked: t,
-            disabled: n,
+            disabled: r,
             form: S,
-            name: f,
+            name: y,
             readOnly: !0,
             ref: c,
             required: E,
             tabIndex: -1,
             type: "checkbox",
-            value: m,
+            value: C,
             style: {
               position: "absolute",
               opacity: 0,
@@ -84,29 +103,33 @@ const C = O(null), A = y(({ asChild: u, className: l, checked: h, defaultChecked
             }
           }
         ),
-        I
+        N
       ]
     }
   ) });
-});
-A.displayName = "Switch";
-const B = y(({ asChild: u, className: l, ...h }, r) => {
-  const o = z(C);
-  if (!o) throw new Error("SwitchThumb must be used within Switch");
-  const f = u ? g : "span", m = r;
-  return /* @__PURE__ */ p(
-    f,
+};
+z.displayName = "Switch";
+const A = ({
+  ref: u,
+  asChild: d,
+  className: l,
+  ...h
+}) => {
+  const n = $(x);
+  if (!n) throw new Error("SwitchThumb must be used within Switch");
+  return /* @__PURE__ */ f(
+    d ? w : "span",
     {
-      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),
-      "data-disabled": o.disabled || void 0,
-      "data-state": o.checked ? "checked" : "unchecked",
-      ref: m,
+      className: g("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),
+      "data-disabled": n.disabled || void 0,
+      "data-state": n.checked ? "checked" : "unchecked",
+      ref: u,
       ...h
     }
   );
-});
-B.displayName = "SwitchThumb";
+};
+A.displayName = "SwitchThumb";
 export {
-  A as Switch,
-  B as SwitchThumb
+  z as Switch,
+  A as SwitchThumb
 };

package/dist/Switch.d.ts

@@ -1,12 +1,19 @@
 import { SwitchProps as SwitchBaseProps } from './SwitchBase';
-export declare const Switch: import('react').ForwardRefExoticComponent<Omit<SwitchBaseProps, "onCheckedChange"> & {
-    labelPosition?: "left" | "right";
+import { Ref } from 'react';
+type SwitchProps = Omit<SwitchBaseProps, 'onCheckedChange'> & {
+    labelPosition?: 'left' | 'right';
     labelText: string;
     id: string;
     hideLabel?: boolean;
     onChange?: (checked: boolean) => void;
+    ref?: Ref<HTMLButtonElement>;
     required?: boolean;
     value?: string;
-    variant?: "default" | "squared";
-} & import('react').RefAttributes<HTMLButtonElement>>;
+    variant?: 'default' | 'squared';
+};
+export declare const Switch: {
+    ({ ref, className, disabled, id, labelPosition, labelText, name, onChange, required, value, hideLabel, variant, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};
 //# sourceMappingURL=Switch.d.ts.map

package/dist/Switch.js

@@ -1,35 +1,34 @@
-"use client";
 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 { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { Switch as w, 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: 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: [
+import { cn as l } from "./utils/twUtils.js";
+import "react";
+const x = ({ ref: o, className: d, disabled: h, id: e, labelPosition: i = "right", labelText: s, name: b, onChange: u, required: c, value: m, hideLabel: a = !1, variant: f, ...g }) => {
+  const n = f === "squared";
+  return /* @__PURE__ */ p("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,
+      w,
       {
         "aria-required": c,
-        className: o(
+        className: l(
           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
+          d
         ),
         "data-testid": "spectral-switch",
-        disabled: d,
+        disabled: h,
         id: e,
-        name: h,
-        onCheckedChange: b,
-        ref: g,
+        name: b,
+        onCheckedChange: u,
+        ref: o,
         required: c,
         value: m,
-        ...f,
+        ...g,
         children: /* @__PURE__ */ t(
           k,
           {
-            className: o(
+            className: l(
               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"
             )
           }
@@ -39,8 +38,8 @@ const v = x(({ className: l, disabled: d, id: e, labelPosition: i = "right", lab
     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", "data-testid": "spectral-switch-label-hidden", children: s })
   ] });
-});
-v.displayName = "Switch";
+};
+x.displayName = "Switch";
 export {
-  v as Switch
+  x as Switch
 };