@spear-ai/spectral 1.4.17 → 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

@@ -1,7 +1,12 @@
 import { ToggleBase } from './ToggleBase';
 import { VariantProps } from 'class-variance-authority';
-import { ComponentProps } from 'react';
-export type ToggleProps = ComponentProps<typeof ToggleBase> & VariantProps<typeof toggleVariants>;
+import { ComponentProps, CSSProperties } from 'react';
+export type ActiveColor = string;
+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;
     size?: "default" | "sm" | "lg" | null | undefined;

package/dist/Toggle.js

@@ -1,17 +1,33 @@
 "use client";
 import "./styles/main.css";
-import { jsx as s } from "react/jsx-runtime";
-import { ToggleBase as n } from "./Toggle/ToggleBase.js";
-import { cn as d } from "./utils/twUtils.js";
-import { c as l } from "./index-D29mdTf5.js";
-import { forwardRef as v } from "react";
-const b = l(
+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})`;
+}
+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 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed
-    hover:cursor-pointer data-[state=on]:text-toggle-text--active text-toggle-text hover:bg-toggle-bg--hover hover:border-toggle-border--hover data-[state=on]:bg-toggle-bg--active data-[state=on]:border-toggle-border--active
-    data-[state=on]:border-toggle-border--active hover:text-toggle-text--hover data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active aria-pressed:bg-toggle-bg--active
-    aria-pressed:text-toggle-text--active aria-pressed:border-toggle-border--active active:bg-selected-primary focus:outline-none outline-none transition-[colors] [&_svg]:pointer-events-none
-    [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-danger-200/20 dark:aria-invalid:ring-danger-200/40 aria-invalid:border-danger-200 whitespace-nowrap
+    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
+    data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active
+    data-[state=on]:border-toggle-border--active focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus:outline-none aria-invalid:ring-danger-200/20
+    aria-invalid:border-danger-200 aria-pressed:bg-toggle-bg--active aria-pressed:border-toggle-border--active aria-pressed:text-toggle-text--active
   `,
   {
     variants: {
@@ -35,8 +51,9 @@ const b = l(
       layout: "default"
     }
   }
-), m = v(({ className: e, variant: t, size: o, layout: r, disabled: a, ...i }, g) => /* @__PURE__ */ s(n, { ref: g, disabled: a, "data-slot": "toggle", "data-testid": "spectral-toggle", className: d(b({ variant: t, size: o, layout: r }), e), ...i }));
+), 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 {
-  m as Toggle,
-  b as toggleVariants
+  A as Toggle,
+  m as getActiveColorStyle,
+  x as toggleVariants
 };

package/dist/ToggleGroup.d.ts

@@ -1,15 +1,15 @@
-import { ToggleGroupBase } from './ToggleGroupBase';
-import { toggleVariants } from '../Toggle/Toggle';
+import { ToggleGroupBase, ToggleGroupItemBase } from './ToggleGroupBase';
+import { toggleVariants, ActiveColor } from '../Toggle/Toggle';
 import { VariantProps } from 'class-variance-authority';
 import { ComponentProps } from 'react';
-export type ToggleGroupProps = ComponentProps<typeof ToggleGroupBase> & VariantProps<typeof toggleVariants>;
-export declare const ToggleGroup: ({ className, variant, size, layout, children, ...props }: ToggleGroupProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ToggleGroupItem: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "pressed" | "defaultPressed" | "onPressedChange"> & import('./ToggleGroupBase').ItemRenderProps & {
-    pressed?: boolean;
-    defaultPressed?: boolean;
-} & import('react').RefAttributes<HTMLButtonElement> & VariantProps<(props?: ({
-    variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
-    layout?: "default" | "expanded" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+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, 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,56 +1,58 @@
 "use client";
 import "./styles/main.css";
-import { jsx as u } from "react/jsx-runtime";
-import { ToggleGroupItemBase as p, ToggleGroupBase as m } from "./ToggleGroup/ToggleGroupBase.js";
-import { toggleVariants as f } from "./Toggle.js";
-import { cn as g } from "./utils/twUtils.js";
-import { createContext as c, forwardRef as v, useContext as b } from "react";
-const n = c({
+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"
-}), w = ({ className: d, variant: e, size: o, layout: a, children: l, ...r }) => /* @__PURE__ */ u(
-  m,
+}), 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": e,
-    "data-size": o,
+    "data-variant": o,
+    "data-size": e,
     "data-layout": a,
-    className: g(
+    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",
-      d
+      r
     ),
-    ...r,
-    children: /* @__PURE__ */ u(n.Provider, { value: { variant: e, size: o, layout: a }, children: l })
+    ...i,
+    children: /* @__PURE__ */ s(m.Provider, { value: { variant: o, size: e, layout: a, activeColor: l, activeTextColor: d }, children: n })
   }
-), h = v(({ className: d, children: e, variant: o, size: a, value: l, layout: r, ...i }, s) => {
-  const t = b(n);
-  return /* @__PURE__ */ u(
-    p,
+), 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: s,
+      ref: y,
       "data-slot": "toggle-group-item",
       "data-testid": "spectral-toggle-group-item",
-      "data-variant": t.variant || o,
-      "data-size": t.size || a,
-      "data-layout": t.layout || r,
+      "data-variant": g,
+      "data-size": u,
+      "data-layout": p,
       value: l,
-      className: g(
-        f({
-          variant: t.variant || o,
-          size: t.size || a,
-          layout: t.layout || r
+      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",
-        d
+        r
       ),
-      ...i,
-      children: e
+      style: { ...z(x, b), ...v },
+      ...f,
+      children: o
     }
   );
 });
+I.displayName = "ToggleGroupItem";
 export {
-  w as ToggleGroup,
-  h as ToggleGroupItem
+  j as ToggleGroup,
+  I as ToggleGroupItem
 };