@spear-ai/spectral 1.4.2 → 1.4.4

package/dist/ButtonGroup/ButtonGroupButton.js

@@ -1,10 +1,10 @@
 import "../styles/main.css";
-import { jsx as n } from "react/jsx-runtime";
-import { Slot as s } from "../primitives/slot.js";
+import { jsx as s } from "react/jsx-runtime";
+import { Slot as a } from "../primitives/slot.js";
 import { cn as r } from "../utils/twUtils.js";
-import { c as l } from "../index-D29mdTf5.js";
+import { c } from "../index-D29mdTf5.js";
 import "react";
-const c = l(
+const l = c(
   `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius,0.375rem)] text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none
   [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-accent focus-visible:outline-offset-2 focus-visible:outline-2 focus-visitble:outline-accent
   aria-invalid:ring-destructive/20 aria-invalid:border-destructive bg-level-one text-text-primary hover:bg-level-two cursor-pointer active:text-accent`,
@@ -15,17 +15,17 @@ const c = l(
         outline: "border border-level-three active:text-accent active:border-accent"
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        md: "h-9 px-4 py-2 has-[>svg]:px-3",
         sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 px-6 has-[>svg]:px-4",
-        icon: "size-9",
+        "icon-md": "size-9",
         "icon-sm": "size-8",
         "icon-lg": "size-10"
       }
     },
     defaultVariants: {
       variant: "default",
-      size: "default"
+      size: "md"
     }
   }
 ), u = ({
@@ -33,10 +33,10 @@ const c = l(
   variant: t,
   size: e,
   asChild: o = !1,
-  ...a
-}) => /* @__PURE__ */ n(o ? s : "button", { "data-slot": "button-group-item", "data-variant": t, "data-size": e, className: r(c({ variant: t, size: e, className: i })), ...a });
+  ...n
+}) => /* @__PURE__ */ s(o ? a : "button", { "data-slot": "button-group-item", "data-variant": t, "data-size": e, className: r(l({ variant: t, size: e, className: i })), ...n });
 u.displayName = "ButtonGroupButton";
 export {
   u as ButtonGroupButton,
-  c as buttonVariants
+  l as buttonVariants
 };

package/dist/ButtonGroup.d.ts

@@ -1,4 +1,3 @@
-import { ButtonGroupButton, buttonVariants } from './ButtonGroupButton';
 import { Separator } from '../Separator/Separator';
 import { VariantProps } from 'class-variance-authority';
 import { ComponentProps } from 'react';
@@ -7,13 +6,17 @@ export declare const buttonGroupVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const ButtonGroup: {
-    ({ className, orientation, variant, size, children, ...props }: ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants> & VariantProps<typeof buttonVariants>): import("react/jsx-runtime").JSX.Element;
+    ({ className, orientation, variant, size, children, ...props }: ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants> & {
+        variant?: "default" | "outline";
+        size?: "md" | "sm" | "lg" | "icon-md" | "icon-sm" | "icon-lg";
+    }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const ButtonGroupItem: {
-    ({ children, className, size, variant, ...props }: ComponentProps<typeof ButtonGroupButton> & {
-        size?: VariantProps<typeof buttonVariants>["size"];
-        variant?: VariantProps<typeof buttonVariants>["variant"];
+    ({ children, className, size, variant, asChild, ...props }: ComponentProps<"button"> & {
+        size?: "sm" | "md" | "lg" | "icon-sm" | "icon-md" | "icon-lg";
+        variant?: "default" | "outline";
+        asChild?: boolean;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/ButtonGroup.js

@@ -1,13 +1,13 @@
 "use client";
 import "./styles/main.css";
-import { jsx as n } from "react/jsx-runtime";
-import { ButtonGroupButton as d } from "./ButtonGroup/ButtonGroupButton.js";
-import { Separator as p } from "./Separator.js";
+import { jsx as s } from "react/jsx-runtime";
+import { ButtonGroupButton as u } from "./ButtonGroup/ButtonGroupButton.js";
+import { Separator as d } from "./Separator.js";
 import { Slot as m } from "./primitives/slot.js";
-import { cn as s } from "./utils/twUtils.js";
+import { cn as i } from "./utils/twUtils.js";
 import { c } from "./index-D29mdTf5.js";
-import { Children as f, isValidElement as v, cloneElement as b } from "react";
-const g = c(
+import { Children as f, isValidElement as b, cloneElement as g } from "react";
+const v = c(
   `flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1
   has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2`,
   {
@@ -21,33 +21,41 @@ const g = c(
       orientation: "horizontal"
     }
   }
-), h = ({ className: o, orientation: t, variant: r, size: a, children: i, ...l }) => /* @__PURE__ */ n("div", { role: "group", "data-slot": "button-group", "aria-label": l["aria-label"], "data-orientation": t, className: s(g({ orientation: t }), o), ...l, children: f.map(i, (e) => v(e) && e.type === u ? b(e, {
+), h = ({
+  className: o,
+  orientation: t = "horizontal",
+  variant: r = "default",
+  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 === p || e.type === u) ? g(e, {
   variant: e.props.variant ?? r,
   size: e.props.size ?? a
 }) : e) });
 h.displayName = "ButtonGroup";
-const u = ({
+const p = ({
   children: o,
   className: t,
   size: r,
   variant: a,
-  ...i
-}) => /* @__PURE__ */ n(d, { "data-slot": "button-group-item", size: r, variant: a, className: s(t), ...i, children: o });
-u.displayName = "ButtonGroupItem";
+  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 });
+p.displayName = "ButtonGroupItem";
 const C = ({
   className: o,
   asChild: t = !1,
   ...r
-}) => /* @__PURE__ */ n(t ? m : "div", { "data-slot": "button-group-text", className: s("bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", o), ...r }), x = ({
+}) => /* @__PURE__ */ s(t ? m : "div", { "data-slot": "button-group-text", "data-testid": "spectral-button-group-text", className: i("bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", o), ...r }), x = ({
   className: o,
   orientation: t = "vertical",
   ...r
-}) => /* @__PURE__ */ n(p, { "data-slot": "button-group-separator", orientation: t, className: s("bg-level-three 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,
-  u as ButtonGroupItem,
+  p as ButtonGroupItem,
   x as ButtonGroupSeparator,
   C as ButtonGroupText,
-  g as buttonGroupVariants
+  v as buttonGroupVariants
 };

package/dist/ButtonIcon.d.ts

@@ -7,7 +7,7 @@ export interface ButtonIconProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
     label: string;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     shape?: 'circle' | 'square';
-    size?: 'small' | 'default' | 'large';
+    size?: 'sm' | 'md' | 'lg';
 }
 export declare const ButtonIcon: import('react').ForwardRefExoticComponent<ButtonIconProps & import('react').RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/ButtonIcon.js

@@ -62,10 +62,10 @@ import { cn as n } from "./utils/twUtils.js";
 import { forwardRef as g, isValidElement as k, cloneElement as p } from "react";
 const x = `bg-transparent hover:bg-level-one text-text-primary inline-flex items-center justify-center whitespace-nowrap transition-colors focus:outline-none focus-visible:outline-2
   focus-visible:outline-offset-2 focus-visible:outline-level-two cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0`, m = {
-  small: { button: "h-8 w-8", icon: 16 },
-  default: { button: "h-10 w-10", icon: 24 },
-  large: { button: "h-12 w-12", icon: 32 }
-}, C = g(({ className: u, disabled: s, icon: r, isLoading: o = !1, label: c, onClick: f, shape: d = "square", size: i = "default", ...h }, b) => {
+  sm: { button: "h-8 w-8", icon: 16 },
+  md: { button: "h-10 w-10", icon: 24 },
+  lg: { button: "h-12 w-12", icon: 32 }
+}, C = g(({ className: u, disabled: s, icon: r, isLoading: o = !1, label: c, onClick: f, shape: d = "square", size: i = "md", ...h }, b) => {
   const v = (t) => {
     f?.(t);
   }, y = o ? `${c} - Loading` : c, w = () => {
@@ -103,7 +103,7 @@ const x = `bg-transparent hover:bg-level-one text-text-primary inline-flex items
     {
       "aria-label": y,
       className: n(x, d === "circle" ? "rounded-full" : "rounded-[0.75rem]", m[i].button, o && "cursor-wait", s && "opacity-50 cursor-not-allowed", u),
-      "data-testid": "button-icon",
+      "data-testid": "spectral-button-icon",
       disabled: s || o,
       onClick: v,
       ref: b,

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?: "small" | "default" | 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

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

package/dist/Checkbox/CheckboxBase.d.ts

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

package/dist/Checkbox/CheckboxBase.js

@@ -1,110 +1,110 @@
 "use client";
 import "../styles/main.css";
-import { jsx as m, jsxs as K } from "react/jsx-runtime";
+import { jsx as b, jsxs as K } from "react/jsx-runtime";
 import { useControllableState as M } from "../hooks/useControllableState.js";
 import { Slot as C } from "../primitives/slot.js";
 import { cn as w } from "../utils/twUtils.js";
-import { createContext as O, forwardRef as E, useRef as T, useId as V, useEffect as y, useCallback as u, useContext as $ } from "react";
-const R = O(null);
-function I(r) {
-  return r === "indeterminate" ? "indeterminate" : r ? "checked" : "unchecked";
+import { createContext as O, forwardRef as E, useRef as T, useId as V, useEffect as y, useCallback as d, useContext as $ } from "react";
+const I = O(null);
+function R(n) {
+  return n === "indeterminate" ? "indeterminate" : n ? "checked" : "unchecked";
 }
-function z(r) {
-  return r === "indeterminate" ? !0 : !r;
+function z(n) {
+  return n === "indeterminate" ? !0 : !n;
 }
 const A = E(
   ({
-    asChild: r,
-    className: d,
+    asChild: n,
     checked: l,
-    defaultChecked: i = !1,
-    onCheckedChange: f,
-    disabled: n,
-    required: h,
-    name: p,
-    value: b = "on",
-    form: N,
-    id: j,
+    className: f,
+    disabled: r,
+    defaultChecked: o = !1,
+    form: i,
+    id: p,
+    name: m,
+    onCheckedChange: h,
     onClick: v,
     onKeyDown: x,
+    required: N,
     type: H,
     // oxlint-disable-line no-unused-vars
+    value: j = "on",
     ...k
   }, S) => {
-    const o = T(null), P = V(), B = j ?? `chk-${P}`, [t, a] = M({
-      value: l,
-      defaultValue: i,
-      onChange: f
+    const a = T(null), P = V(), B = p ?? `chk-${P}`, [t, s] = M({
+      defaultValue: o,
+      onChange: h,
+      value: l
     });
     y(() => {
-      o.current && (o.current.indeterminate = t === "indeterminate");
+      a.current && (a.current.indeterminate = t === "indeterminate");
     }, [t]), y(() => {
-      const e = o.current?.form ?? null;
+      const e = a.current?.form ?? null;
       if (!e) return;
-      const c = () => {
-        a(i);
+      const u = () => {
+        s(o);
       };
-      return e.addEventListener("reset", c), () => e.removeEventListener("reset", c);
-    }, [i, a]);
-    const g = u(() => {
-      const e = o.current;
+      return e.addEventListener("reset", u), () => e.removeEventListener("reset", u);
+    }, [o, s]);
+    const g = d(() => {
+      const e = a.current;
       if (!e) return;
       e.checked = t === !0, e.indeterminate = t === "indeterminate";
-      const c = new Event("change", { bubbles: !0 });
-      e.dispatchEvent(c);
-    }, [t]), s = u(() => {
-      if (n) return;
+      const u = new Event("change", { bubbles: !0 });
+      e.dispatchEvent(u);
+    }, [t]), c = d(() => {
+      if (r) return;
       const e = z(t);
-      a(e), queueMicrotask(() => g());
-    }, [n, g, a, t]), D = u(
+      s(e), queueMicrotask(() => g());
+    }, [r, g, s, t]), D = d(
       (e) => {
-        v?.(e), !e.defaultPrevented && s();
+        v?.(e), !e.defaultPrevented && c();
       },
-      [s, v]
-    ), L = u(
+      [c, v]
+    ), L = d(
       (e) => {
-        x?.(e), !e.defaultPrevented && e.key === " " && (e.preventDefault(), s());
+        x?.(e), !e.defaultPrevented && e.key === " " && (e.preventDefault(), c());
       },
-      [s, x]
-    ), q = r ? C : "button", F = S;
-    return /* @__PURE__ */ m(R.Provider, { value: { state: t, disabled: n }, children: /* @__PURE__ */ K(
+      [c, x]
+    ), q = n ? C : "button", F = S;
+    return /* @__PURE__ */ b(I.Provider, { value: { state: t, disabled: r }, children: /* @__PURE__ */ K(
       q,
       {
-        id: B,
-        ref: F,
-        type: "button",
-        role: "checkbox",
         "aria-checked": t === "indeterminate" ? "mixed" : t,
-        "aria-disabled": n || void 0,
-        "data-state": I(t),
-        "data-indeterminate": t === "indeterminate" ? "" : void 0,
+        "aria-disabled": r || void 0,
         className: w(
           "inline-flex h-4 w-4 shrink-0 items-center justify-center",
           "border-input bg-background rounded-sm border",
           "focus-visible:ring-ring 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 data-[state=checked]:text-primary-foreground",
-          d
+          f
         ),
+        "data-indeterminate": t === "indeterminate" ? "" : void 0,
+        "data-state": R(t),
+        disabled: r,
+        id: B,
+        ref: F,
+        role: "checkbox",
+        type: "button",
         onClick: D,
         onKeyDown: L,
-        disabled: n,
         ...k,
         children: [
-          /* @__PURE__ */ m(
+          /* @__PURE__ */ b(
             "input",
             {
-              ref: o,
-              type: "checkbox",
-              name: p,
-              value: b,
-              required: h,
-              disabled: n,
-              form: N,
+              "aria-hidden": "true",
               checked: t === !0,
+              disabled: r,
+              form: i,
+              name: m,
+              ref: a,
               readOnly: !0,
+              required: N,
               tabIndex: -1,
-              "aria-hidden": "true",
+              type: "checkbox",
+              value: j,
               style: {
                 position: "absolute",
                 opacity: 0,
@@ -121,9 +121,11 @@ const A = E(
   }
 );
 A.displayName = "CheckboxBase";
-const G = E(({ asChild: r, className: d, forceMount: l, ...i }, f) => {
-  const n = $(R);
-  return !n || !(n.state === !0 || n.state === "indeterminate") && !l ? null : /* @__PURE__ */ m(r ? C : "span", { ref: f, "data-state": I(n.state), "data-indeterminate": n.state === "indeterminate" ? "" : void 0, className: w("flex items-center justify-center text-current", d), ...i });
+const G = E(({ asChild: n, className: l, forceMount: f, ...r }, o) => {
+  const i = $(I);
+  if (!i || !(i.state === !0 || i.state === "indeterminate") && !f) return null;
+  const m = n ? C : "span", h = o;
+  return /* @__PURE__ */ b(m, { className: w("flex items-center justify-center text-current", l), "data-indeterminate": i.state === "indeterminate" ? "" : void 0, "data-state": R(i.state), ref: h, ...r });
 });
 G.displayName = "CheckboxIndicator";
 export {

package/dist/Checkbox.js

@@ -1,14 +1,14 @@
 "use client";
 import "./styles/main.css";
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import { CheckboxBase as l, CheckboxIndicator as b } from "./Checkbox/CheckboxBase.js";
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { CheckboxBase as l, CheckboxIndicator as n } from "./Checkbox/CheckboxBase.js";
 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 n } from "./Icons/CheckmarkIcon.js";
+import { CheckmarkIcon as b } from "./Icons/CheckmarkIcon.js";
 import "./Icons/ChevronDownIcon.js";
 import "./Icons/ChevronUpIcon.js";
 import "./Icons/ClockIcon.js";
@@ -59,31 +59,33 @@ import "./Icons/WarningIcon.js";
 import "./Icons/ZoomAllIcon.js";
 import "./Icons/ZoomXIcon.js";
 import "./Icons/ZoomYIcon.js";
-import { cn as t } from "./utils/twUtils.js";
+import { cn as i } from "./utils/twUtils.js";
 import { forwardRef as x } from "react";
-const k = x(({ className: i, id: r, labelText: e, onCheckedChange: m, checked: p, required: c, ...a }, s) => /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
-  /* @__PURE__ */ o(
+const k = x(({ className: e, id: r, labelText: m, onCheckedChange: p, checked: o, required: c, ...a }, s) => /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
+  /* @__PURE__ */ t(
     l,
     {
-      className: t(
+      "aria-labelledby": `${r}-label`,
+      "aria-required": c,
+      checked: o,
+      className: i(
         [
           "checkbox peer h-5 w-5 shrink-0 rounded-sm border border-checkbox-border hover:opacity-80",
           "focus:outline-none focus-visible:outline-1 focus-visible:outline-checkbox-border--focus focus-visible:outline-offset-2 disabled:cursor-not-allowed",
           "disabled:opacity-50 data-[state=checked]:border-checkbox-border--checked"
         ].join(" "),
-        i
+        e
       ),
-      "data-testid": "checkbox",
+      "data-state": o === !0 ? "checked" : o === "indeterminate" ? "indeterminate" : "unchecked",
+      "data-testid": "spectral-checkbox",
       id: r,
-      "aria-labelledby": `${r}-label`,
-      "aria-required": c,
-      onCheckedChange: m,
+      onCheckedChange: p,
       ref: s,
       ...a,
-      children: /* @__PURE__ */ o(b, { className: t("checkbox-indicator flex items-center justify-center text-checkbox-indicator--checked"), children: p === "indeterminate" ? /* @__PURE__ */ o(h, { className: "checkbox-indeterminate", size: 16, strokeWidth: 4 }) : /* @__PURE__ */ o(n, { className: "checkbox-check", size: 16, strokeWidth: 4 }) })
+      children: /* @__PURE__ */ t(n, { "data-testid": "spectral-checkbox-indicator", className: i("checkbox-indicator flex items-center justify-center text-checkbox-indicator--checked"), children: o === "indeterminate" ? /* @__PURE__ */ t(h, { className: "checkbox-indeterminate", size: 16, strokeWidth: 4 }) : /* @__PURE__ */ t(b, { className: "checkbox-check", size: 16, strokeWidth: 4 }) })
     }
   ),
-  /* @__PURE__ */ o("label", { htmlFor: r, className: "text-md text-text-primary peer-disabled:text-neutral-400", "data-testid": "checkbox-label", children: e })
+  /* @__PURE__ */ t("label", { className: "text-md text-text-primary peer-disabled:text-neutral-400", "data-testid": "spectral-checkbox-label", htmlFor: r, children: m })
 ] }));
 k.displayName = "Checkbox";
 export {

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
+};