@spear-ai/spectral 1.9.1 → 1.10.0

package/dist/Avatar.js

@@ -1,68 +1,86 @@
 "use client";
 import "./styles/main.css";
-import { jsx as e } from "react/jsx-runtime";
-import { UserIcon as g } from "./Icons/UserIcon.js";
-import { cn as o } from "./utils/twUtils.js";
-import { useState as v, useEffect as w, isValidElement as y, cloneElement as u } from "react";
-const j = {
-  sm: "h-8 w-8",
-  md: "h-10 w-10",
-  lg: "h-12 w-12"
-}, p = {
-  sm: "text-xs",
-  md: "text-base",
-  lg: "text-xl"
-}, I = {
-  sm: 24,
-  md: 32,
-  lg: 40
-}, N = (n) => {
-  const l = n.trim();
-  if (!l) return "?";
-  const t = l.split(/\s+/).filter(Boolean);
-  return t.length === 0 ? "?" : t.length === 1 ? t[0].charAt(0).toUpperCase() : (t[0].charAt(0) + t[t.length - 1].charAt(0)).toUpperCase();
-}, k = ({ alt: n, className: l, fallback: t, icon: r, imageSource: a, size: i = "md", userFullName: c }) => {
-  const [d, f] = v("loading");
-  w(() => {
-    if (!a) return;
-    f("loading");
-    const s = new Image();
-    return s.src = a, s.onload = () => f("loaded"), s.onerror = () => f("error"), () => {
-      s.onload = null, s.onerror = null;
-    };
-  }, [a]);
-  const h = () => {
-    if (c)
-      return /* @__PURE__ */ e(
-        "span",
-        {
-          "aria-label": c + " avatar",
-          className: o("text-text-primary flex h-full w-full items-center justify-center font-bold tracking-tighter font-stretch-condensed", p[i]),
-          "data-testid": "spectral-avatar-initials",
-          children: N(c)
-        }
-      );
-    if (r) {
-      const s = I[i];
-      return /* @__PURE__ */ e("span", { className: "flex h-full w-full items-center justify-center", children: y(r) ? (() => {
-        const m = {
-          className: o("shrink-0", r.props.className),
-          "aria-hidden": "true"
-        };
-        if (r.type.displayName?.includes("Icon") ?? !1) {
-          const x = {
-            ...m,
-            size: s
-          };
-          return u(r, x);
-        }
-        return u(r, m);
-      })() : r });
-    }
-    return a && d === "loaded" ? /* @__PURE__ */ e("img", { alt: n ?? "Avatar", "aria-label": n ?? "Avatar", className: "absolute inset-0 h-full w-full rounded-full object-cover", "data-testid": "spectral-avatar-image", role: "img", src: a }) : a && d === "error" && t ? /* @__PURE__ */ e("span", { className: "flex h-full w-full items-center justify-center", "data-testid": "spectral-avatar-img-error-fallback", children: t }) : t ? /* @__PURE__ */ e("span", { className: o("text-text-primary flex h-full w-full items-center justify-center", p[i]), "data-testid": "spectral-avatar-fallback", children: t }) : a && d === "loading" ? /* @__PURE__ */ e("span", { className: "flex h-full w-full items-center justify-center motion-safe:animate-pulse", "data-testid": "spectral-avatar-loading" }) : /* @__PURE__ */ e(g, {});
-  };
-  return /* @__PURE__ */ e("div", { className: o("bg-level-two relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full", j[i], l), "data-slot": "avatar", "data-testid": "spectral-avatar", children: h() });
-};
-export {
-  k as Avatar
+import { UserIcon as e } from "./Icons/UserIcon.js";
+import { t } from "./twUtils-VNWgstKL.js";
+import { cloneElement as n, isValidElement as r, useEffect as i, useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/Avatar/Avatar.tsx
+var s = {
+	sm: "h-8 w-8",
+	md: "h-10 w-10",
+	lg: "h-12 w-12"
+}, c = {
+	sm: "text-xs",
+	md: "text-base",
+	lg: "text-xl"
+}, l = {
+	sm: 24,
+	md: 32,
+	lg: 40
+}, u = (e) => {
+	let t = e.trim();
+	if (!t) return "?";
+	let n = t.split(/\s+/).filter(Boolean);
+	return n.length === 0 ? "?" : n.length === 1 ? n[0].charAt(0).toUpperCase() : (n[0].charAt(0) + n[n.length - 1].charAt(0)).toUpperCase();
+}, d = ({ alt: d, className: f, fallback: p, icon: m, imageSource: h, size: g = "md", userFullName: _ }) => {
+	let [v, y] = a("loading");
+	i(() => {
+		if (!h) return;
+		y("loading");
+		let e = new Image();
+		return e.src = h, e.onload = () => y("loaded"), e.onerror = () => y("error"), () => {
+			e.onload = null, e.onerror = null;
+		};
+	}, [h]);
+	let b = () => {
+		if (_) return /* @__PURE__ */ o("span", {
+			"aria-label": _ + " avatar",
+			className: t("font-bold tracking-tighter flex h-full w-full items-center justify-center text-text-primary font-stretch-condensed", c[g]),
+			"data-testid": "spectral-avatar-initials",
+			children: u(_)
+		});
+		if (m) {
+			let e = l[g];
+			return /* @__PURE__ */ o("span", {
+				className: "flex h-full w-full items-center justify-center",
+				children: r(m) ? (() => {
+					let r = {
+						className: t("shrink-0", m.props.className),
+						"aria-hidden": "true"
+					};
+					return m.type.displayName?.includes("Icon") ?? !1 ? n(m, {
+						...r,
+						size: e
+					}) : n(m, r);
+				})() : m
+			});
+		}
+		return h && v === "loaded" ? /* @__PURE__ */ o("img", {
+			alt: d ?? "Avatar",
+			"aria-label": d ?? "Avatar",
+			className: "inset-0 absolute h-full w-full rounded-full object-cover",
+			"data-testid": "spectral-avatar-image",
+			role: "img",
+			src: h
+		}) : h && v === "error" && p ? /* @__PURE__ */ o("span", {
+			className: "flex h-full w-full items-center justify-center",
+			"data-testid": "spectral-avatar-img-error-fallback",
+			children: p
+		}) : p ? /* @__PURE__ */ o("span", {
+			className: t("flex h-full w-full items-center justify-center text-text-primary", c[g]),
+			"data-testid": "spectral-avatar-fallback",
+			children: p
+		}) : h && v === "loading" ? /* @__PURE__ */ o("span", {
+			className: "motion-safe:animate-pulse flex h-full w-full items-center justify-center",
+			"data-testid": "spectral-avatar-loading"
+		}) : /* @__PURE__ */ o(e, {});
+	};
+	return /* @__PURE__ */ o("div", {
+		className: t("relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-level-two", s[g], f),
+		"data-slot": "avatar",
+		"data-testid": "spectral-avatar",
+		children: b()
+	});
 };
+//#endregion
+export { d as Avatar };

package/dist/Badge.d.ts

@@ -6,8 +6,6 @@ export type BadgeProps = ComponentProps<'span'> & VariantProps<typeof badgeVaria
 declare const badgeVariants: (props?: ({
     variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const Badge: ({ asChild, className, variant, ...props }: ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
-    asChild?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ asChild, className, variant, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Badge.d.ts.map

package/dist/Badge.js

@@ -1,27 +1,23 @@
 import "./styles/main.css";
-import { jsx as i } from "react/jsx-runtime";
-import { Slot as o } from "./primitives/slot.js";
-import { cn as d } from "./utils/twUtils.js";
-import { c as n } from "./index-D29mdTf5.js";
+import { t as e } from "./twUtils-VNWgstKL.js";
+import { t } from "./dist-B4g6zpUF.js";
+import { Slot as n } from "./primitives/slot.js";
 import "react";
-const g = n(
-  `inline-flex items-center justify-center rounded-sm px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none
-  focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-danger-200 aria-invalid:border-danger-200
-  transition-[color,box-shadow] overflow-hidden`,
-  {
-    variants: {
-      variant: {
-        default: "bg-badge-primary-bg text-text-primary [a&]:hover:bg-badge-primary-bg--hover group-data-[state=on]:bg-badge-primary-bg--active group-aria-pressed:bg-badge-primary-bg--active",
-        secondary: "bg-badge-secondary-bg text-badge-secondary-text [a&]:hover:bg-badge-secondary-bg--hover",
-        destructive: "bg-badge-destructive-bg text-text-primary [a&]:hover:bg-danger-400 focus-visible:ring-badge-destructive-border",
-        outline: "border border-badge-outline-border text-text-primary [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-), l = ({ asChild: e = !1, className: r, variant: a, ...t }) => /* @__PURE__ */ i(e ? o : "span", { className: d(g({ variant: a }), r), "data-slot": "badge", "data-testid": "spectral-badge", ...t });
-export {
-  l as Badge
-};
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Badge/Badge.tsx
+var i = t("rounded-sm px-2 py-0.5 text-xs font-medium [&>svg]:size-3 gap-1 focus-visible:border-ring focus-visible:ring-ring/50 inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:border-danger-200 aria-invalid:ring-danger-200 [&>svg]:pointer-events-none", {
+	variants: { variant: {
+		default: "bg-badge-primary-bg text-text-primary group-aria-pressed:bg-badge-primary-bg--active group-data-[state=on]:bg-badge-primary-bg--active [a&]:hover:bg-badge-primary-bg--hover",
+		secondary: "[a&]:hover:bg-badge-secondary-bg--hover bg-badge-secondary-bg text-badge-secondary-text",
+		destructive: "bg-badge-destructive-bg text-text-primary focus-visible:ring-badge-destructive-border [a&]:hover:bg-danger-400",
+		outline: "[a&]:hover:text-accent-foreground border border-badge-outline-border text-text-primary [a&]:hover:bg-accent"
+	} },
+	defaultVariants: { variant: "default" }
+}), a = ({ asChild: t = !1, className: a, variant: o, ...s }) => /* @__PURE__ */ r(t ? n : "span", {
+	className: e(i({ variant: o }), a),
+	"data-slot": "badge",
+	"data-testid": "spectral-badge",
+	...s
+});
+//#endregion
+export { a as Badge };

package/dist/Button.js

@@ -1,181 +1,105 @@
 "use client";
 import "./styles/main.css";
-import { jsxs as g, jsx as n, Fragment as z } from "react/jsx-runtime";
-import "./Icons/AnalyzeIcon.js";
-import "./Icons/AnnotationsIcon.js";
-import "./Icons/ApprovedIcon.js";
-import "./Icons/ArrowDownIcon.js";
-import "./Icons/ArrowUpIcon.js";
-import "./Icons/BoxToolIcon.js";
-import "./Icons/CalendarIcon.js";
-import "./Icons/CheckCircleIcon.js";
-import "./Icons/CheckSquareIcon.js";
-import "./Icons/CheckmarkIcon.js";
-import "./Icons/ChevronDownIcon.js";
-import "./Icons/ChevronUpIcon.js";
-import "./Icons/ClockIcon.js";
-import "./Icons/CloseCircleIcon.js";
-import "./Icons/CloseIcon.js";
-import "./Icons/DashboardIcon.js";
-import "./Icons/DatabaseIcon.js";
-import "./Icons/DeleteIcon.js";
-import "./Icons/DurationIcon.js";
-import "./Icons/EditIcon.js";
-import "./Icons/EmailIcon.js";
-import "./Icons/EraserIcon.js";
-import "./Icons/ErrorIcon.js";
-import "./Icons/EyeClosedIcon.js";
-import "./Icons/EyeClosedIcon2.js";
-import "./Icons/EyeOpenIcon.js";
-import "./Icons/FileDownloadIcon.js";
-import "./Icons/GoToFirstIcon.js";
-import "./Icons/GoToLastIcon.js";
-import "./Icons/HarmonicCursorsIcon.js";
-import "./Icons/InfoIcon.js";
-import "./Icons/KeyboardIcon.js";
-import "./Icons/LabelIcon.js";
-import "./Icons/LassoIcon.js";
-import "./Icons/LineToolIcon.js";
-import "./Icons/LiveViewIcon.js";
-import { LoaderIcon as B } from "./Icons/LoaderIcon.js";
-import "./Icons/LocationIcon.js";
-import "./Icons/LogoutIcon.js";
-import "./Icons/MeasureIcon.js";
-import "./Icons/MessagesIcon.js";
-import "./Icons/MetadataIcon.js";
-import "./Icons/MinusIcon.js";
-import "./Icons/OntologyIcon.js";
-import "./Icons/PanelIconClose.js";
-import "./Icons/PanelIconOpen.js";
-import "./Icons/PlayIcon.js";
-import "./Icons/PlusIcon.js";
-import "./Icons/PolygonIcon.js";
-import "./Icons/ResetIcon.js";
-import "./Icons/ReviewedIcon.js";
-import "./Icons/ScissorsIcon.js";
-import "./Icons/SearchIcon.js";
-import "./Icons/SettingsIcon.js";
-import "./Icons/SortAscendingIcon.js";
-import "./Icons/SortAtoZIcon.js";
-import "./Icons/SortDescendingIcon.js";
-import "./Icons/SortZtoAIcon.js";
-import "./Icons/StackIcon.js";
-import "./Icons/StarIcon.js";
-import "./Icons/TrashIcon.js";
-import "./Icons/UndoIcon.js";
-import "./Icons/User2Icon.js";
-import "./Icons/UserIcon.js";
-import "./Icons/WarningIcon.js";
-import "./Icons/ZoomAllIcon.js";
-import "./Icons/ZoomXIcon.js";
-import "./Icons/ZoomYIcon.js";
-import { Slot as E } from "./primitives/slot.js";
-import { ErrorMessage as V } from "./utils/formFieldUtils.js";
-import { cn as i } from "./utils/twUtils.js";
-import { c as _ } from "./index-D29mdTf5.js";
-import { isValidElement as D, Children as S } from "react";
-const q = _(
-  `
-    font-sans! flex relative items-center justify-center gap-2 whitespace-nowrap transition-colors cursor-pointer rounded-lg border font-semibold focus:outline-none focus:outline-none
-    focus-visible:outline-1 focus-visible:outline-offset-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 disabled:pointer-events-none
-  `,
-  {
-    variants: {
-      variant: {
-        primary: `bg-button-primary-bg text-button-primary-text border-button-primary-border hover:bg-button-primary-bg--hover hover:text-button-primary-text--hover hover:border-button-primary-border--hover
-          focus-visible:outline-button-primary-border disabled:bg-button-primary-bg--disabled disabled:text-button-primary-text--disabled disabled:border-button-primary-border--disabled`,
-        secondary: `bg-button-secondary-bg border-button-secondary-border text-button-secondary-text hover:bg-button-secondary-bg--hover hover:text-button-secondary-text--hover
-          focus-visible:outline-button-secondary-border disabled:bg-button-secondary-bg--disabled disabled:text-button-secondary-text--disabled disabled:border-button-secondary-border--disabled`,
-        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",
-        unstyled: "font-inherit! font-normal text-inherit inline-flex justify-start gap-0 bg-transparent border-none! p-0! w-auto! rounded-none! shadow-none! hover:cursor-pointer hover:bg-transparent focus-visible:outline-button-outline-border disabled:opacity-50"
-      },
-      size: {
-        small: "py-1 px-4 w-fit text-sm!",
-        default: "py-2 px-6 w-fit text-base!",
-        fullWidth: "py-2 px-6 w-full text-base!"
-      },
-      state: {
-        default: "",
-        error: "bg-button-danger text-text-primary transition focus-visible:outline-button-danger",
-        loading: "cursor-wait pointer-events-none"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      state: "default",
-      size: "default"
-    }
-  }
-), A = ({
-  asChild: c = !1,
-  children: a,
-  className: x,
-  dataTestId: v,
-  disabled: r,
-  endIcon: b,
-  errorMessage: d,
-  label: h,
-  onClick: y,
-  ref: f,
-  size: s,
-  startIcon: p,
-  state: o,
-  type: w = "button",
-  variant: e = "primary",
-  ...C
-}) => {
-  const u = {
-    error: {
-      primary: "bg-button-danger border-button-danger text-text-primary hover:bg-button-danger--hover hover:text-text-primary",
-      secondary: "bg-button-danger border-button-danger text-text-primary hover:bg-button-danger--hover hover:text-text-primary",
-      outline: "bg-transparent border-button-danger text-button-danger hover:border-button-danger--hover hover:text-button-danger/80",
-      ghost: "bg-transparent text-button-danger hover:text-button-danger/80",
-      unstyled: "bg-transparent text-button-danger"
-    },
-    loading: {
-      primary: "bg-button-primary-bg--disabled border-button-primary-border--disabled text-button-primary-text--disabled pointer-events-none",
-      secondary: "bg-button-secondary-bg--disabled border-button-secondary-border--disabled text-button-secondary-text--disabled pointer-events-none",
-      outline: "bg-button-outline-bg--disabled border-button-outline-border--disabled text-button-outline-text--disabled pointer-events-none",
-      ghost: "bg-transparent text-button-ghost-text--disabled pointer-events-none",
-      unstyled: "bg-transparent opacity-50 pointer-events-none"
-    }
-  }, N = i(q({ variant: e, state: o, size: s }), o === "error" && u.error[e], o === "loading" && u.loading[e], x), t = c && D(a) && S.count(a) === 1, l = t ? void 0 : a ?? h;
-  if (!t && !l)
-    throw new Error("Button requires either `label` or `children`");
-  const j = (m) => {
-    r && (m.preventDefault(), m.stopPropagation());
-  }, k = t ? E : "button";
-  return /* @__PURE__ */ g("div", { className: i("flex flex-col justify-items-center", s), children: [
-    /* @__PURE__ */ n(
-      k,
-      {
-        "aria-disabled": r,
-        className: i(N, t && "no-underline! before:content-none after:content-none", t && r && "pointer-events-none opacity-50"),
-        "data-as-child": t ? "true" : void 0,
-        "data-state": o,
-        "data-testid": v ?? `spectral-button-${e}`,
-        "data-variant": e,
-        disabled: t ? void 0 : r,
-        onClick: y,
-        onClickCapture: t ? j : void 0,
-        ref: f,
-        tabIndex: t && r ? -1 : void 0,
-        type: t ? void 0 : w,
-        ...C,
-        children: t ? a : /* @__PURE__ */ g(z, { children: [
-          p && /* @__PURE__ */ n("span", { className: i("flex", e !== "unstyled" && "pr-1"), "aria-hidden": !0, "data-testid": "spectral-button-start-icon", children: p }),
-          o === "loading" && /* @__PURE__ */ n(B, { className: "ml-2 motion-safe:animate-spin", size: 16 }),
-          l,
-          b && o !== "loading" && /* @__PURE__ */ n("span", { className: i("flex", e !== "unstyled" && "pl-2"), "aria-hidden": !0, "data-testid": "spectral-button-end-icon", children: b })
-        ] })
-      }
-    ),
-    o === "error" && d && /* @__PURE__ */ n(V, { message: d, dataTestId: "spectral-button-error-message", id: "button-error" })
-  ] });
-};
-A.displayName = "Button";
-export {
-  A as Button
+import { LoaderIcon as e } from "./Icons/LoaderIcon.js";
+import { t } from "./twUtils-VNWgstKL.js";
+import { t as n } from "./dist-B4g6zpUF.js";
+import { Slot as r } from "./primitives/slot.js";
+import { ErrorMessage as i } from "./utils/formFieldUtils.js";
+import { Children as a, isValidElement as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/Button/Button.tsx
+var u = n("gap-2 rounded-lg font-semibold [&_svg]:size-4 relative flex cursor-pointer items-center justify-center border font-sans! whitespace-nowrap transition-colors focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: {
+		variant: {
+			primary: "border-button-primary-border bg-button-primary-bg text-button-primary-text hover:border-button-primary-border--hover hover:bg-button-primary-bg--hover hover:text-button-primary-text--hover focus-visible:outline-button-primary-border disabled:border-button-primary-border--disabled disabled:bg-button-primary-bg--disabled disabled:text-button-primary-text--disabled",
+			secondary: "border-button-secondary-border bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg--hover hover:text-button-secondary-text--hover focus-visible:outline-button-secondary-border disabled:border-button-secondary-border--disabled disabled:bg-button-secondary-bg--disabled disabled:text-button-secondary-text--disabled",
+			outline: "border-button-outline-border bg-button-outline-bg text-button-outline-text hover:bg-button-outline-bg--hover hover:text-button-outline-text--hover focus-visible:outline-button-outline-border disabled:border-button-outline-border--disabled disabled:text-button-outline-text--disabled",
+			ghost: "border-none bg-button-ghost-bg 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",
+			unstyled: "font-inherit! font-normal gap-0 p-0! inline-flex w-auto! justify-start rounded-none! border-none! bg-transparent text-inherit shadow-none! hover:cursor-pointer hover:bg-transparent focus-visible:outline-button-outline-border disabled:opacity-50"
+		},
+		size: {
+			small: "py-1 px-4 text-sm! w-fit",
+			default: "py-2 px-6 text-base! w-fit",
+			fullWidth: "py-2 px-6 text-base! w-full"
+		},
+		state: {
+			default: "",
+			error: "bg-button-danger text-text-primary transition focus-visible:outline-button-danger",
+			loading: "pointer-events-none cursor-wait"
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		state: "default",
+		size: "default"
+	}
+}), d = ({ asChild: n = !1, children: d, className: f, dataTestId: p, disabled: m, endIcon: h, errorMessage: g, label: _, onClick: v, ref: y, size: b, startIcon: x, state: S, type: C = "button", variant: w = "primary", ...T }) => {
+	let E = {
+		error: {
+			primary: "bg-button-danger border-button-danger text-text-primary hover:bg-button-danger--hover hover:text-text-primary",
+			secondary: "bg-button-danger border-button-danger text-text-primary hover:bg-button-danger--hover hover:text-text-primary",
+			outline: "bg-transparent border-button-danger text-button-danger hover:border-button-danger--hover hover:text-button-danger/80",
+			ghost: "bg-transparent text-button-danger hover:text-button-danger/80",
+			unstyled: "bg-transparent text-button-danger"
+		},
+		loading: {
+			primary: "bg-button-primary-bg--disabled border-button-primary-border--disabled text-button-primary-text--disabled pointer-events-none",
+			secondary: "bg-button-secondary-bg--disabled border-button-secondary-border--disabled text-button-secondary-text--disabled pointer-events-none",
+			outline: "bg-button-outline-bg--disabled border-button-outline-border--disabled text-button-outline-text--disabled pointer-events-none",
+			ghost: "bg-transparent text-button-ghost-text--disabled pointer-events-none",
+			unstyled: "bg-transparent opacity-50 pointer-events-none"
+		}
+	}, D = t(u({
+		variant: w,
+		state: S,
+		size: b
+	}), S === "error" && E.error[w], S === "loading" && E.loading[w], f), O = n && o(d) && a.count(d) === 1, k = O ? void 0 : d ?? _;
+	if (!O && !k) throw Error("Button requires either `label` or `children`");
+	let A = (e) => {
+		m && (e.preventDefault(), e.stopPropagation());
+	}, j = O ? r : "button";
+	return /* @__PURE__ */ l("div", {
+		className: t("flex flex-col justify-items-center", b),
+		children: [/* @__PURE__ */ c(j, {
+			"aria-disabled": m,
+			className: t(D, O && "no-underline! before:content-none after:content-none", O && m && "pointer-events-none opacity-50"),
+			"data-as-child": O ? "true" : void 0,
+			"data-state": S,
+			"data-testid": p ?? `spectral-button-${w}`,
+			"data-variant": w,
+			disabled: O ? void 0 : m,
+			onClick: v,
+			onClickCapture: O ? A : void 0,
+			ref: y,
+			tabIndex: O && m ? -1 : void 0,
+			type: O ? void 0 : C,
+			...T,
+			children: O ? d : /* @__PURE__ */ l(s, { children: [
+				x && /* @__PURE__ */ c("span", {
+					className: t("flex", w !== "unstyled" && "pr-1"),
+					"aria-hidden": !0,
+					"data-testid": "spectral-button-start-icon",
+					children: x
+				}),
+				S === "loading" && /* @__PURE__ */ c(e, {
+					className: "ml-2 motion-safe:animate-spin",
+					size: 16
+				}),
+				k,
+				h && S !== "loading" && /* @__PURE__ */ c("span", {
+					className: t("flex", w !== "unstyled" && "pl-2"),
+					"aria-hidden": !0,
+					"data-testid": "spectral-button-end-icon",
+					children: h
+				})
+			] })
+		}), S === "error" && g && /* @__PURE__ */ c(i, {
+			message: g,
+			dataTestId: "spectral-button-error-message",
+			id: "button-error"
+		})]
+	});
 };
+d.displayName = "Button";
+//#endregion
+export { d as Button };

package/dist/ButtonGroup/ButtonGroupButton.js

@@ -1,42 +1,40 @@
 import "../styles/main.css";
-import { jsx as n } 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 { t as e } from "../twUtils-VNWgstKL.js";
+import { t } from "../dist-B4g6zpUF.js";
+import { Slot as n } from "../primitives/slot.js";
 import "react";
-const c = l(
-  `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-visible: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-text-inverted active:bg-accent`,
-  {
-    variants: {
-      variant: {
-        default: "",
-        outline: "border border-level-three"
-      },
-      size: {
-        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-md": "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md"
-    }
-  }
-), u = ({
-  asChild: i = !1,
-  className: o,
-  size: t,
-  variant: e,
-  ...s
-}) => /* @__PURE__ */ n(i ? a : "button", { className: r(c({ variant: e, size: t, className: o })), "data-size": t, "data-slot": "button-group-item", "data-variant": e, ...s });
-u.displayName = "ButtonGroupButton";
-export {
-  u as ButtonGroupButton,
-  c as buttonVariants
-};
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/ButtonGroup/ButtonGroupButton.tsx
+var i = t("gap-2 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 aria-invalid:ring-destructive/20 aria-invalid:border-destructive inline-flex shrink-0 cursor-pointer items-center justify-center rounded-[var(--radius,0.375rem)] bg-level-one whitespace-nowrap text-text-primary transition-all outline-none hover:bg-level-two focus-visible:border-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:bg-accent active:text-text-inverted disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: "",
+			outline: "border border-level-three"
+		},
+		size: {
+			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-md": "size-9",
+			"icon-sm": "size-8",
+			"icon-lg": "size-10"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
+}), a = ({ asChild: t = !1, className: a, size: o, variant: s, ...c }) => /* @__PURE__ */ r(t ? n : "button", {
+	className: e(i({
+		variant: s,
+		size: o,
+		className: a
+	})),
+	"data-size": o,
+	"data-slot": "button-group-item",
+	"data-variant": s,
+	...c
+});
+a.displayName = "ButtonGroupButton";
+//#endregion
+export { a as ButtonGroupButton, i as buttonVariants };