@spear-ai/spectral 1.4.3 → 1.4.5

package/dist/Alert/AlertBase.js

@@ -28,15 +28,15 @@ const g = n(
   danger: "text-alert-danger-text",
   info: "text-alert-info-text",
   default: "text-alert-text"
-}, f = i(({ className: t, variant: e, ...r }, a) => /* @__PURE__ */ l("div", { className: s(g({ variant: e }), t), "data-slot": "alert", ref: a, role: "alert", ...r }));
+}, f = i(({ className: t, variant: e, ...a }, r) => /* @__PURE__ */ l("div", { className: s(g({ variant: e }), t), "data-slot": "alert", "data-testid": "spectral-alert", ref: r, role: "alert", ...a }));
 f.displayName = "AlertBase";
-const m = i(({ className: t, variant: e, ...r }, a) => /* @__PURE__ */ l("div", { className: s(x[e], "col-start-2 line-clamp-1 min-h-4 font-semibold text-base tracking-tight h-6 flex items-center", t), "data-slot": "alert-title", "data-testid": "spectral-alert-title", ref: a, ...r }));
+const m = i(({ className: t, variant: e, ...a }, r) => /* @__PURE__ */ l("div", { className: s(x[e], "col-start-2 line-clamp-1 min-h-4 font-semibold text-base tracking-tight h-6 flex items-center", t), "data-slot": "alert-title", "data-testid": "spectral-alert-title", ref: r, ...a }));
 m.displayName = "AlertTitle";
-const u = i(({ className: t, ...e }, r) => /* @__PURE__ */ l("div", { className: s("text-primary-inverse col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", t), "data-slot": "alert-description", "data-testid": "spectral-alert-description", ref: r, ...e }));
+const u = i(({ className: t, ...e }, a) => /* @__PURE__ */ l("div", { className: s("text-primary-inverse col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", t), "data-slot": "alert-description", "data-testid": "spectral-alert-description", ref: a, ...e }));
 u.displayName = "AlertDescription";
 function A({ children: t, container: e }) {
-  const [r, a] = o(!1);
-  return d(() => (a(!0), () => a(!1)), []), r ? c(t, e ?? document.body) : null;
+  const [a, r] = o(!1);
+  return d(() => (r(!0), () => r(!1)), []), a ? c(t, e ?? document.body) : null;
 }
 export {
   f as AlertBase,

package/dist/Button.js

@@ -27,7 +27,7 @@ const w = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], _ = N
         outline: `bg-button-outline-bg border-button-outline-border text-button-outline-text hover:bg-button-outline-bg--hover hover:text-button-outline-text--hover focus-visible:outline-button-outline-border
           disabled:text-button-outline-text--disabled disabled:border-button-outline-border--disabled`,
         ghost: "bg-button-ghost-bg border-none text-button-ghost-text hover:bg-button-ghost-bg--hover hover:text-button-ghost-text--hover focus-visible:outline-none disabled:text-button-ghost-text--disabled",
-        card: "bg-button-card-bg border-button-card-border text-button-card-text !py-1 hover:text-button-card-text--hover"
+        card: "bg-button-card-bg border-button-card-border text-button-card-text !py-1 hover:text-button-card-text--hover !font-medium text-sm hover:border-button-card-border--hover"
       },
       size: {
         default: "py-2 px-6 w-fit",
@@ -64,9 +64,9 @@ const w = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], _ = N
   }, v = u(j({ variant: e, state: t, size: r }), t === "error" && i.error[e || "primary"], t === "loading" && i.loading[e || "primary"], r, l);
   return /* @__PURE__ */ s("div", { className: u("flex flex-col justify-items-center", r), children: [
     /* @__PURE__ */ s("button", { "aria-disabled": n, className: v, "data-state": t, "data-testid": c || `spectral-button-${e}`, disabled: n, ref: m, type: p, ...x, children: [
-      a && /* @__PURE__ */ o("span", { className: "flex pr-2", "aria-hidden": !0, children: a }),
+      a && /* @__PURE__ */ o("span", { className: "flex pr-2", "aria-hidden": !0, "data-testid": "spectral-button-start-icon", children: a }),
       t === "loading" && /* @__PURE__ */ o(_, { className: "ml-2 animate-spin", size: 16 }),
-      b && t !== "loading" && /* @__PURE__ */ o("span", { className: "flex pl-2", "aria-hidden": !0, children: b }),
+      b && t !== "loading" && /* @__PURE__ */ o("span", { className: "flex pl-2", "aria-hidden": !0, "data-testid": "spectral-button-end-icon", children: b }),
       g
     ] }),
     t === "error" && d && /* @__PURE__ */ o(y, { message: d, dataTestId: "spectral-button-error-message", id: "button-error" })

package/dist/ButtonGroup.js

@@ -2,7 +2,7 @@
 import "./styles/main.css";
 import { jsx as s } from "react/jsx-runtime";
 import { ButtonGroupButton as u } from "./ButtonGroup/ButtonGroupButton.js";
-import { Separator as p } from "./Separator.js";
+import { Separator as d } from "./Separator.js";
 import { Slot as m } from "./primitives/slot.js";
 import { cn as i } from "./utils/twUtils.js";
 import { c } from "./index-D29mdTf5.js";
@@ -28,12 +28,12 @@ const v = c(
   size: a = "md",
   children: l,
   ...n
-}) => /* @__PURE__ */ s("div", { role: "group", "data-slot": "button-group", "data-testid": "spectral-button-group", "aria-label": n["aria-label"], "data-orientation": t, className: i(v({ orientation: t }), o), ...n, children: f.map(l, (e) => b(e) && (e.type === d || e.type === u) ? g(e, {
+}) => /* @__PURE__ */ s("div", { role: "group", "data-slot": "button-group", "data-testid": "spectral-button-group", "aria-label": n["aria-label"], "data-orientation": t, className: i(v({ orientation: t }), o), ...n, children: f.map(l, (e) => b(e) && (e.type === p || e.type === u) ? g(e, {
   variant: e.props.variant ?? r,
   size: e.props.size ?? a
 }) : e) });
 h.displayName = "ButtonGroup";
-const d = ({
+const p = ({
   children: o,
   className: t,
   size: r,
@@ -41,7 +41,7 @@ const d = ({
   asChild: l,
   ...n
 }) => /* @__PURE__ */ s(u, { "data-slot": "button-group-item", "data-testid": "spectral-button-group-item", "data-variant": a, size: r, variant: a, asChild: l, className: i(t), ...n, children: o });
-d.displayName = "ButtonGroupItem";
+p.displayName = "ButtonGroupItem";
 const C = ({
   className: o,
   asChild: t = !1,
@@ -50,11 +50,11 @@ const C = ({
   className: o,
   orientation: t = "vertical",
   ...r
-}) => /* @__PURE__ */ s(p, { "data-slot": "button-group-separator", orientation: t, className: i("bg-input-primitive-border relative !m-0 self-stretch data-[orientation=vertical]:h-auto", o), ...r });
+}) => /* @__PURE__ */ s(d, { "data-slot": "button-group-separator", "data-testid": "spectral-button-group-separator", orientation: t, className: i("bg-input-primitive-border relative !m-0 self-stretch data-[orientation=vertical]:h-auto", o), ...r });
 x.displayName = "ButtonGroupSeparator";
 export {
   h as ButtonGroup,
-  d as ButtonGroupItem,
+  p as ButtonGroupItem,
   x as ButtonGroupSeparator,
   C as ButtonGroupText,
   v as buttonGroupVariants

package/dist/Card.d.ts

@@ -1,16 +1,11 @@
-import { VariantProps } from 'class-variance-authority';
 import { ComponentProps } from 'react';
-export type CardProps = ComponentProps<'div'> & VariantProps<typeof cardVariants> & {
+export type CardProps = ComponentProps<'div'> & {
     asChild?: boolean;
 };
-declare const cardVariants: (props?: ({
-    variant?: "default" | "sm" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const CardBase: ({ ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
 export declare const CardHeader: ({ className, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
 export declare const CardTitle: ({ className, asChild, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
 export declare const CardHeaderEndSlot: ({ className, asChild, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
 export declare const CardContent: ({ className, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Card: ({ className, variant, asChild, children, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Card: ({ className, asChild, children, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Card.d.ts.map

package/dist/Card.js

@@ -2,24 +2,13 @@ import "./styles/main.css";
 import { jsx as e } from "react/jsx-runtime";
 import { Slot as c } from "./primitives/slot.js";
 import { cn as d } from "./utils/twUtils.js";
-import { c as n } from "./index-D29mdTf5.js";
 import "react";
-const l = n("text-text-primary flex flex-col w-full card-effects p-3", {
-  variants: {
-    variant: {
-      default: "gap-6 rounded-xl content-card",
-      sm: "data-card gap-2 rounded-lg"
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-}), v = ({ ...t }) => /* @__PURE__ */ e("div", { "data-slot": "card", "data-testid": "spectral-card", ...t }), x = ({ className: t, ...a }) => /* @__PURE__ */ e("div", { "data-slot": "card-header", "data-testid": "spectral-card-header", className: d("@container/card-header pb-4 flex justify-between items-center", t), ...a }), N = ({ className: t, asChild: a = !1, ...r }) => /* @__PURE__ */ e(a ? c : "div", { "data-slot": "card-title", "data-testid": "spectral-card-title", className: d("font-semibold text-xl", t), ...r }), b = ({ className: t, asChild: a = !1, ...r }) => /* @__PURE__ */ e(a ? c : "div", { "data-slot": "card-action", "data-testid": "spectral-card-action", className: d("justify-self-end", t), ...r }), g = ({ className: t, ...a }) => /* @__PURE__ */ e("div", { "data-slot": "card-content", "data-testid": "spectral-card-content", className: t, ...a }), h = ({ className: t, variant: a, asChild: r = !1, children: s, ...o }) => /* @__PURE__ */ e(r ? c : "div", { "data-slot": "card", "data-testid": "spectral-card", className: d(l({ variant: a }), t), ...o, children: s });
+const o = "text-text-primary flex flex-col w-full card-effects p-3 gap-6 rounded-xl", f = ({ ...t }) => /* @__PURE__ */ e("div", { "data-slot": "card", "data-testid": "spectral-card", ...t }), C = ({ className: t, ...a }) => /* @__PURE__ */ e("div", { "data-slot": "card-header", "data-testid": "spectral-card-header", className: d("@container/card-header pb-4 flex justify-between items-center", t), ...a }), u = ({ className: t, asChild: a = !1, ...r }) => /* @__PURE__ */ e(a ? c : "div", { "data-slot": "card-title", "data-testid": "spectral-card-title", className: d("font-semibold text-xl", t), ...r }), x = ({ className: t, asChild: a = !1, ...r }) => /* @__PURE__ */ e(a ? c : "div", { "data-slot": "card-action", "data-testid": "spectral-card-action", className: d("justify-self-end", t), ...r }), v = ({ className: t, ...a }) => /* @__PURE__ */ e("div", { "data-slot": "card-content", "data-testid": "spectral-card-content", className: t, ...a }), N = ({ className: t, asChild: a = !1, children: r, ...s }) => /* @__PURE__ */ e(a ? c : "div", { "data-slot": "card", "data-testid": "spectral-card", className: d(o, t), ...s, children: r });
 export {
-  h as Card,
-  v as CardBase,
-  g as CardContent,
-  x as CardHeader,
-  b as CardHeaderEndSlot,
-  N as CardTitle
+  N as Card,
+  f as CardBase,
+  v as CardContent,
+  C as CardHeader,
+  x as CardHeaderEndSlot,
+  u as CardTitle
 };

package/dist/DataCard.d.ts

@@ -0,0 +1,11 @@
+import { CardProps } from '../Card/Card';
+import { ReactNode } from 'react';
+export type DataCardProps = CardProps & {
+    accentColor: string;
+    cardHeaderEndSlot: ReactNode;
+    dataDescription: string;
+    dataValue: string | number;
+    title: string;
+};
+export declare const DataCard: ({ accentColor, cardHeaderEndSlot, className, dataDescription, dataValue, title, ...props }: DataCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataCard.d.ts.map

package/dist/DataCard.js

@@ -0,0 +1,18 @@
+import "./styles/main.css";
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { Card as o, CardHeader as p, CardTitle as n, CardContent as m } from "./Card.js";
+import { cn as x } from "./utils/twUtils.js";
+import "react";
+const C = ({ accentColor: d, cardHeaderEndSlot: e, className: r, dataDescription: s, dataValue: c, title: l, ...i }) => /* @__PURE__ */ t(o, { className: x("gap-4 card-effects", r), ...i, "data-testid": "spectral-datacard", children: [
+  /* @__PURE__ */ t(p, { className: "pb-0", "data-testid": "spectral-datacard-header", children: [
+    /* @__PURE__ */ a(n, { className: "uppercase text-sm font-bold", "data-testid": "spectral-datacard-title", children: l }),
+    /* @__PURE__ */ a("div", { style: { color: d }, "data-testid": "spectral-datacard-end-slot", children: e })
+  ] }),
+  /* @__PURE__ */ a(m, { children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ a("div", { className: "text-4xl font-bold", style: { color: d }, "data-testid": "spectral-datacard-data-value", children: c }),
+    /* @__PURE__ */ a("div", { className: "text-xs text-data-card-description", "data-testid": "spectral-datacard-data-description", children: s })
+  ] }) })
+] });
+export {
+  C as DataCard
+};

package/dist/Select.d.ts

@@ -3,7 +3,7 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react';
 type SelectOption = BaseOption;
 type Align = 'start' | 'center' | 'end';
 type Side = 'top' | 'bottom' | 'left' | 'right';
-export interface SelectProps extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'onChange'>, BaseFormFieldProps {
+export interface SelectProps extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'onChange' | 'aria-disabled' | 'aria-invalid' | 'aria-required' | 'aria-describedby' | 'aria-label'>, BaseFormFieldProps {
     defaultValue?: string;
     emptyMessage?: ReactNode;
     id?: string;

package/dist/Select.js

@@ -1,6 +1,6 @@
 "use client";
 import "./styles/main.css";
-import { jsxs as r, jsx as e, Fragment as v } from "react/jsx-runtime";
+import { jsxs as r, jsx as t, Fragment as S } from "react/jsx-runtime";
 import "./Icons/AnalyzeIcon.js";
 import "./Icons/AnnotationsIcon.js";
 import "./Icons/ApprovedIcon.js";
@@ -8,7 +8,7 @@ import "./Icons/CalendarIcon.js";
 import "./Icons/CheckCircleIcon.js";
 import "./Icons/CheckSquareIcon.js";
 import { CheckmarkIcon as Q } from "./Icons/CheckmarkIcon.js";
-import { ChevronDownIcon as n } from "./Icons/ChevronDownIcon.js";
+import { ChevronDownIcon as c } from "./Icons/ChevronDownIcon.js";
 import "./Icons/ChevronUpIcon.js";
 import "./Icons/ClockIcon.js";
 import "./Icons/CloseCircleIcon.js";
@@ -59,11 +59,11 @@ 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 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 ye, useState as Ne } from "react";
-const Se = ye(
+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 st, b as it, a as ot } from "./index-CevVJ05e.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 { cn as i } from "./utils/twUtils.js";
+import { forwardRef as yt, useState as Nt } from "react";
+const vt = yt(
   ({
     align: w = "start",
     alignOffset: z = 0,
@@ -73,76 +73,76 @@ const Se = ye(
     emptyMessage: k = "No options found",
     errorMessage: p,
     id: L,
-    label: s,
-    labelClassName: c,
+    label: l,
+    labelClassName: n,
     loadingMessage: T = "Loading…",
     name: u,
     onChange: V,
     options: h = [],
-    placeholder: D = "Select an option",
-    position: E = "popper",
-    side: P = "bottom",
-    sideOffset: R = 4,
+    placeholder: q = "Select an option",
+    position: D = "popper",
+    side: E = "bottom",
+    sideOffset: P = 4,
     state: a = "default",
     value: g,
-    "aria-label": q,
+    "aria-label": R,
     "aria-describedby": B,
-    ...l
+    ...o
   }, G) => {
-    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 = () => {
+    const [b, M] = Nt(!1), s = lt(L, u), f = ct(s), { 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__ */ e(fe, { message: T });
+        return /* @__PURE__ */ t(bt, { "data-testid": "spectral-select-loading", 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__ */ t(ft, { "data-testid": "spectral-select-empty", message: k });
+      const v = (e) => {
+        const m = g === e.value;
+        return /* @__PURE__ */ r(st, { className: i(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(it, { "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(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" })
+      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(([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))
+        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: s, className: i("px-2 py-1.5 text-base font-semibold text-text-primary", n), children: e }),
+          m.map((K) => v(K))
+        ] }, e))
       ] });
     };
-    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(
+    return /* @__PURE__ */ r("div", { className: "w-full", children: [
+      l && /* @__PURE__ */ t(C, { "data-testid": "spectral-select-label", htmlFor: s, className: i("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": f,
-            "aria-label": q || s,
+            "aria-controls": s,
+            "aria-expanded": b,
+            "aria-label": R || l,
             asChild: !0,
-            className: o(he(!1, a), ue(a), F),
+            className: i(ht(!1, a), ut(a), F),
             "data-slot": "select-trigger",
             "data-state": a,
             "data-testid": "spectral-select-trigger",
-            id: i,
+            id: s,
             ref: G,
             role: "combobox",
-            style: ce(),
+            style: nt(),
             ...H,
-            ...l,
+            ...o,
             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__ */ 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__ */ 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(
+        /* @__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: o(
+            className: i(
               "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",
@@ -159,18 +159,18 @@ const Se = ye(
               width: "var(--radix-select-trigger-width)"
             },
             children: [
-              /* @__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 }) })
+              /* @__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 }) })
             ]
           }
         ) })
       ] }),
-      A && p && /* @__PURE__ */ e(ge, { "data-testid": "spectral-select-error-message", id: b, message: p })
+      A && p && /* @__PURE__ */ t(gt, { "data-testid": "spectral-select-error-message", id: f, message: p })
     ] });
   }
 );
-Se.displayName = "Select";
+vt.displayName = "Select";
 export {
-  Se as Select
+  vt as Select
 };

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";