@spear-ai/spectral 1.4.18 → 1.4.19

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