@spear-ai/spectral 1.4.18 → 1.4.22

package/dist/ButtonGroup/ButtonGroupButton.js

@@ -1,18 +1,18 @@
 import "../styles/main.css";
-import { jsx as s } from "react/jsx-runtime";
+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 } from "../index-D29mdTf5.js";
+import { c as l } from "../index-D29mdTf5.js";
 import "react";
-const l = c(
+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-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 active:text-accent active:border-accent"
+        outline: "border border-level-three"
       },
       size: {
         md: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -33,10 +33,10 @@ const l = c(
   variant: t,
   size: e,
   asChild: o = !1,
-  ...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 });
+  ...s
+}) => /* @__PURE__ */ n(o ? a : "button", { "data-slot": "button-group-item", "data-variant": t, "data-size": e, className: r(c({ variant: t, size: e, className: i })), ...s });
 u.displayName = "ButtonGroupButton";
 export {
   u as ButtonGroupButton,
-  l as buttonVariants
+  c as buttonVariants
 };

package/dist/InputGroup.d.ts

@@ -3,7 +3,7 @@ import { VariantProps } from 'class-variance-authority';
 import { ComponentProps } from 'react';
 export declare const InputGroup: ({ className, ...props }: ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
 export declare const inputGroupAddonVariants: (props?: ({
-    align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const InputGroupAddon: ({ className, align, ...props }: ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => import("react/jsx-runtime").JSX.Element;
 export declare const inputGroupButtonVariants: (props?: ({

package/dist/Tabs.js

@@ -1,14 +1,14 @@
 import "./styles/main.css";
-import { jsx as a, jsxs as x } from "react/jsx-runtime";
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
 import { TabsBase as N, TabsList as T, TabsTrigger as z, TabsContent as k } from "./Tabs/TabsBase.js";
 import { validateTabValues as j, getTabKeys as C } from "./Tabs/tabsUtils.js";
 import { cn as r } from "./utils/twUtils.js";
 import "react";
-const V = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ x("div", { className: "flex flex-col relative w-full", role: "status", children: [
+const V = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ m("div", { className: "flex flex-col relative w-full", role: "status", children: [
   /* @__PURE__ */ a("div", { className: r("inline-flex items-center justify-start w-full", s === "horizontal" && "border-b border-neutral-600", s === "vertical" && "flex-col items-stretch border-r border-neutral-600"), children: Array.from({ length: Math.min(d, 5) }, (i, t) => /* @__PURE__ */ a("div", { className: r("animate-pulse bg-neutral-600 rounded", s === "horizontal" ? "h-6 w-16 mx-2 my-2" : "h-6 w-full mx-2 my-1"), "aria-hidden": "true" }, t)) }),
   /* @__PURE__ */ a("div", { className: "animate-pulse bg-neutral-600 h-32 w-full mt-4 rounded", "aria-hidden": "true" }),
   /* @__PURE__ */ a("span", { className: "sr-only", children: "Loading tabs…" })
-] }), L = ({ ariaLabel: d, className: s, openOnLoad: i, orientation: t = "horizontal", tabValues: f = [], variant: l = "default", activationMode: m = "automatic", loading: p = !1, onError: n, onBeforeChange: h, onValueChange: v, ...y }) => {
+] }), L = ({ ariaLabel: d, className: s, openOnLoad: i, orientation: t = "horizontal", tabValues: f = [], variant: l = "default", activationMode: x = "automatic", loading: p = !1, onError: n, onBeforeChange: h, onValueChange: v, ...y }) => {
   const o = f.filter((e) => e.key !== void 0);
   if (!j(o)) {
     const e = new Error("Invalid tabValues provided to Tabs component");
@@ -34,7 +34,7 @@ const V = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ x("div", { classN
     }
     v?.(e);
   };
-  return /* @__PURE__ */ a("div", { className: "flex flex-col relative w-full", children: /* @__PURE__ */ x(N, { "aria-label": d, className: r("relative w-full data-[orientation=vertical]:flex", l, s), defaultValue: c, orientation: t, activationMode: m, onValueChange: g, ...y, children: [
+  return /* @__PURE__ */ a("div", { className: "flex flex-col relative w-full", children: /* @__PURE__ */ m(N, { "aria-label": d, className: r("relative w-full data-[orientation=vertical]:flex", l, s), defaultValue: c, orientation: t, activationMode: x, onValueChange: g, ...y, children: [
     /* @__PURE__ */ a(
       T,
       {
@@ -70,12 +70,7 @@ const V = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ x("div", { classN
       k,
       {
         value: e.key,
-        className: r(
-          "focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent text-text-primary",
-          t === "horizontal" && "py-6 px-4",
-          t === "vertical" && "py-0 ps-8",
-          "data-[state=active]:animate-fade-in-tabs"
-        ),
+        className: r("focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent text-text-primary", t === "horizontal" && "py-6", t === "vertical" && "ps-8", "data-[state=active]:animate-fade-in-tabs"),
         children: e.children
       },
       e.key

package/dist/Toggle.d.ts

@@ -2,9 +2,10 @@ import { ToggleBase } from './ToggleBase';
 import { VariantProps } from 'class-variance-authority';
 import { ComponentProps, CSSProperties } from 'react';
 export type ActiveColor = string;
-export declare function getActiveColorStyle(activeColor: ActiveColor | undefined): CSSProperties | undefined;
+export declare function getActiveColorStyle(activeColor: ActiveColor | undefined, activeTextColor?: ActiveColor): CSSProperties | undefined;
 export type ToggleProps = ComponentProps<typeof ToggleBase> & VariantProps<typeof toggleVariants> & {
     activeColor?: ActiveColor;
+    activeTextColor?: ActiveColor;
 };
 export declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;

package/dist/Toggle.js

@@ -1,20 +1,27 @@
 "use client";
 import "./styles/main.css";
-import { jsx as l } from "react/jsx-runtime";
-import { ToggleBase as d } from "./Toggle/ToggleBase.js";
-import { cn as c } from "./utils/twUtils.js";
-import { c as b } from "./index-D29mdTf5.js";
-import { forwardRef as v } from "react";
-const h = /^(#|rgb|hsl|oklch|oklab|lab|lch|color|var\(|transparent|currentcolor)/i;
-function u(e) {
-  if (!e) return;
-  const t = h.test(e) ? e : `var(--color-${e})`;
-  return {
-    "--color-toggle-bg--active": t,
-    "--color-toggle-border--active": t
-  };
+import { jsx as c } from "react/jsx-runtime";
+import { ToggleBase as v } from "./Toggle/ToggleBase.js";
+import { cn as b } from "./utils/twUtils.js";
+import { c as u } from "./index-D29mdTf5.js";
+import { forwardRef as h } from "react";
+const f = /^(#|rgb|hsl|oklch|oklab|lab|lch|color|var\(|transparent|currentcolor)/i, p = /^(success|warning|danger|primary|neutral|secondary)-\d+$/;
+function r(e) {
+  return f.test(e) ? e : p.test(e) ? `var(--horizon-color-${e})` : `var(--color-${e})`;
 }
-const f = b(
+function m(e, t) {
+  if (!(!e && !t))
+    return {
+      ...e && {
+        "--color-toggle-bg--active": r(e),
+        "--color-toggle-border--active": r(e)
+      },
+      ...t && {
+        "--color-toggle-text--active": r(t)
+      }
+    };
+}
+const x = u(
   `
     bg-toggle-bg inline-flex items-center justify-center gap-2 border rounded-md text-sm shadow-sm font-medium w-fit text-toggle-text whitespace-nowrap outline-none transition-[colors]
     [&_svg]:pointer-events-none [&_svg]:shrink-0 active:bg-toggle-bg--active hover:cursor-pointer hover:bg-toggle-bg--hover hover:border-toggle-border--hover hover:text-toggle-text--hover
@@ -44,9 +51,9 @@ const f = b(
       layout: "default"
     }
   }
-), _ = v(({ className: e, variant: t, size: o, layout: r, disabled: a, activeColor: i, style: g, ...n }, s) => /* @__PURE__ */ l(d, { ref: s, disabled: a, "data-slot": "toggle", "data-testid": "spectral-toggle", className: c(f({ variant: t, size: o, layout: r }), e), style: { ...u(i), ...g }, ...n }));
+), A = h(({ className: e, variant: t, size: o, layout: a, disabled: i, activeColor: g, activeTextColor: n, style: s, ...l }, d) => /* @__PURE__ */ c(v, { ref: d, disabled: i, "data-slot": "toggle", "data-testid": "spectral-toggle", className: b(x({ variant: t, size: o, layout: a }), e), style: { ...m(g, n), ...s }, ...l }));
 export {
-  _ as Toggle,
-  u as getActiveColorStyle,
-  f as toggleVariants
+  A as Toggle,
+  m as getActiveColorStyle,
+  x as toggleVariants
 };

package/dist/ToggleGroup.d.ts

@@ -4,10 +4,12 @@ import { VariantProps } from 'class-variance-authority';
 import { ComponentProps } from 'react';
 export type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupItemBase> & VariantProps<typeof toggleVariants> & {
     activeColor?: ActiveColor;
+    activeTextColor?: ActiveColor;
 };
 export type ToggleGroupProps = ComponentProps<typeof ToggleGroupBase> & VariantProps<typeof toggleVariants> & {
     activeColor?: ActiveColor;
+    activeTextColor?: ActiveColor;
 };
-export declare const ToggleGroup: ({ className, variant, size, layout, activeColor, children, ...props }: ToggleGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToggleGroup: ({ className, variant, size, layout, activeColor, activeTextColor, children, ...props }: ToggleGroupProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ToggleGroupItem: import('react').ForwardRefExoticComponent<Omit<ToggleGroupItemProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=ToggleGroup.d.ts.map

package/dist/ToggleGroup.js

@@ -1,58 +1,58 @@
 "use client";
 import "./styles/main.css";
-import { jsx as g } from "react/jsx-runtime";
-import { ToggleGroupItemBase as b, ToggleGroupBase as x } from "./ToggleGroup/ToggleGroupBase.js";
-import { getActiveColorStyle as z, toggleVariants as C } from "./Toggle.js";
-import { cn as p } from "./utils/twUtils.js";
-import { createContext as G, forwardRef as T, useContext as w } from "react";
-const c = G({
+import { jsx as s } from "react/jsx-runtime";
+import { ToggleGroupItemBase as C, ToggleGroupBase as T } from "./ToggleGroup/ToggleGroupBase.js";
+import { getActiveColorStyle as z, toggleVariants as G } from "./Toggle.js";
+import { cn as c } from "./utils/twUtils.js";
+import { createContext as w, forwardRef as h, useContext as A } from "react";
+const m = w({
   size: "default",
   variant: "default",
   layout: "default"
-}), V = ({ className: r, variant: t, size: o, layout: e, activeColor: l, children: d, ...n }) => /* @__PURE__ */ g(
-  x,
+}), j = ({ className: r, variant: o, size: e, layout: a, activeColor: l, activeTextColor: d, children: n, ...i }) => /* @__PURE__ */ s(
+  T,
   {
     "data-slot": "toggle-group",
     "data-testid": "spectral-toggle-group",
-    "data-variant": t,
-    "data-size": o,
-    "data-layout": e,
-    className: p(
+    "data-variant": o,
+    "data-size": e,
+    "data-layout": a,
+    className: c(
       "group/toggle-group [&[data-variant='outline']]:bg-toggle-group-bg flex h-fit w-fit [&[data-layout='expanded']]:w-full items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md [&[data-variant='outline']]:gap-0.25",
       r
     ),
-    ...n,
-    children: /* @__PURE__ */ g(c.Provider, { value: { variant: t, size: o, layout: e, activeColor: l }, children: d })
+    ...i,
+    children: /* @__PURE__ */ s(m.Provider, { value: { variant: o, size: e, layout: a, activeColor: l, activeTextColor: d }, children: n })
   }
-), h = T(({ className: r, children: t, variant: o, size: e, value: l, layout: d, activeColor: n, style: m, ...f }, v) => {
-  const a = w(c), u = a.variant ?? o, i = a.size ?? e, s = a.layout ?? d, y = n ?? a.activeColor;
-  return /* @__PURE__ */ g(
-    b,
+), I = h(({ className: r, children: o, variant: e, size: a, value: l, layout: d, activeColor: n, activeTextColor: i, style: v, ...f }, y) => {
+  const t = A(m), g = t.variant ?? e, u = t.size ?? a, p = t.layout ?? d, x = n ?? t.activeColor, b = i ?? t.activeTextColor;
+  return /* @__PURE__ */ s(
+    C,
     {
-      ref: v,
+      ref: y,
       "data-slot": "toggle-group-item",
       "data-testid": "spectral-toggle-group-item",
-      "data-variant": u,
-      "data-size": i,
-      "data-layout": s,
+      "data-variant": g,
+      "data-size": u,
+      "data-layout": p,
       value: l,
-      className: p(
-        C({
-          variant: u,
-          size: i,
-          layout: s
+      className: c(
+        G({
+          variant: g,
+          size: u,
+          layout: p
         }),
         "group data-[variant=outline]:border-togglegroup-border rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0",
         r
       ),
-      style: { ...z(y), ...m },
+      style: { ...z(x, b), ...v },
       ...f,
-      children: t
+      children: o
     }
   );
 });
-h.displayName = "ToggleGroupItem";
+I.displayName = "ToggleGroupItem";
 export {
-  V as ToggleGroup,
-  h as ToggleGroupItem
+  j as ToggleGroup,
+  I as ToggleGroupItem
 };