@spear-ai/spectral 1.6.17 → 1.8.0

package/dist/Toggle/ToggleBase.d.ts

@@ -1,13 +1,13 @@
 import { AsChildProp } from '../primitives/slot';
 import { ButtonHTMLAttributes, Ref } from 'react';
 export type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> & Omit<AsChildProp, 'asChild'> & {
-    pressed?: boolean;
+    asChild?: boolean;
     defaultPressed?: boolean;
-    onPressedChange?: (pressed: boolean) => void;
     disabled?: boolean;
-    asChild?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    pressed?: boolean;
 };
-export declare const ToggleBase: ({ ref, pressed: pressedProp, defaultPressed, onPressedChange, disabled, className, onKeyDown, onClick, type, asChild, children, ...rest }: ToggleProps & {
+export declare const ToggleBase: ({ asChild, children, className, defaultPressed, disabled, onClick, onKeyDown, onPressedChange, pressed: pressedProp, ref, ...rest }: ToggleProps & {
     ref?: Ref<HTMLButtonElement>;
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ToggleBase.d.ts.map

package/dist/Toggle/ToggleBase.js

@@ -1,60 +1,59 @@
 "use client";
 import "../styles/main.css";
 import { jsx as s } from "react/jsx-runtime";
-import { useControllableState as x } from "../hooks/useControllableState.js";
-import { Slot as C } from "../primitives/slot.js";
+import { useControllableState as k } from "../hooks/useControllableState.js";
+import { Slot as x } from "../primitives/slot.js";
 import { useCallback as f } from "react";
-const D = function({
-  ref: l,
-  pressed: c,
-  defaultPressed: m = !1,
-  onPressedChange: g,
+const B = function({
+  asChild: c = !1,
+  children: l,
+  className: m,
+  defaultPressed: g = !1,
   disabled: t,
-  className: v,
-  onKeyDown: n,
-  onClick: a,
-  type: h = "button",
-  asChild: P = !1,
-  children: u,
+  onClick: n,
+  onKeyDown: a,
+  onPressedChange: v,
+  pressed: h,
+  ref: u,
   ...i
 }) {
-  const [r, d] = x({
-    defaultValue: m,
-    onChange: g,
-    value: c
+  const [r, d] = k({
+    defaultValue: g,
+    onChange: v,
+    value: h
   }), o = f(() => {
     t || d(!r);
-  }, [t, r, d]), b = f(
+  }, [t, r, d]), P = f(
     (e) => {
-      n && n(e), !e.defaultPrevented && (e.key === " " || e.key === "Enter") && (e.preventDefault(), o());
+      a && a(e), !e.defaultPrevented && (e.key === " " || e.key === "Enter") && (e.preventDefault(), o());
     },
-    [o, n]
-  ), k = f(
+    [o, a]
+  ), b = f(
     (e) => {
-      a && a(e), !e.defaultPrevented && o();
+      n && n(e), !e.defaultPrevented && o();
     },
-    [o, a]
+    [o, n]
   ), p = {
-    "aria-disabled": t || void 0,
+    className: m,
+    onClick: b,
+    onKeyDown: P,
+    "aria-disabled": t ?? void 0,
     "aria-pressed": r,
     "data-state": r ? "on" : "off",
-    "data-disabled": t || void 0,
-    className: v,
-    onClick: k,
-    onKeyDown: b
+    "data-disabled": t ?? void 0
   };
-  return P ? /* @__PURE__ */ s(
+  return c ? /* @__PURE__ */ s(
     "div",
     {
-      ref: l,
+      ref: u,
       role: "button",
       tabIndex: t ? -1 : 0,
       ...i,
       ...p,
-      children: /* @__PURE__ */ s(C, { children: u })
+      children: /* @__PURE__ */ s(x, { children: l })
     }
-  ) : /* @__PURE__ */ s("button", { ref: l, disabled: t, type: h, ...i, ...p, children: u });
+  ) : /* @__PURE__ */ s("button", { ...i, ...p, disabled: t, ref: u, type: "button", children: l });
 };
 export {
-  D as ToggleBase
+  B as ToggleBase
 };

package/dist/Toggle.d.ts

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

package/dist/Toggle.js

@@ -4,11 +4,7 @@ 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 "react";
-const h = /^(#|rgb|hsl|oklch|oklab|lab|lch|color|var\(|transparent|currentcolor)/i, f = /^(success|warning|danger|primary|neutral|secondary)-\d+$/;
-function o(e) {
-  return h.test(e) ? e : f.test(e) ? `var(--horizon-color-${e})` : `var(--color-${e})`;
-}
-function p(e, t) {
+const h = /^(#|rgb|hsl|oklch|oklab|lab|lch|color|var\(|transparent|currentcolor)/i, f = /^(success|warning|danger|primary|neutral|secondary)-\d+$/, o = (e) => h.test(e) ? e : f.test(e) ? `var(--horizon-color-${e})` : `var(--color-${e})`, p = (e, t) => {
   if (!(!e && !t))
     return {
       ...e && {
@@ -19,10 +15,9 @@ function p(e, t) {
         "--color-toggle-text--active": o(t)
       }
     };
-}
-const m = u(
+}, m = 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]
+    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
@@ -32,12 +27,12 @@ const m = u(
     variants: {
       variant: {
         default: "border-toggle-border hover:border-toggle-border--hover",
-        outline: "border-toggle-outline-border hover:bg-toggle-bg--hover"
+        outline: "border-toggle-outline-border hover:bg-toggle-bg--hover hover:border-toggle-outline-border--hover"
       },
       size: {
-        default: "h-9 px-3 min-w-9 [&_svg:not([class*='size-']:not([width]):not([height])]:size-4",
-        sm: "h-8 px-1.5 min-w-8 [&_svg:not([class*='size-']:not([width]):not([height])]:size-3",
-        lg: "h-10 px-2.5 min-w-10 [&_svg:not([class*='size-']:not([width]):not([height])]:size-5"
+        default: "h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4",
+        sm: "h-8 px-1.5 min-w-8 [&_svg:not([class*='size-']):not([width]):not([height])]:size-3",
+        lg: "h-10 px-2.5 min-w-10 [&_svg:not([class*='size-']):not([width]):not([height])]:size-5"
       },
       layout: {
         default: "w-fit",

package/dist/ToggleGroup/ToggleGroupBase.d.ts

@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode, Ref } from 'react';
 type Orientation = 'horizontal' | 'vertical';
-export type CommonGroupProps = {
+export interface CommonGroupProps {
     className?: string;
     defaultValue?: string | string[];
     disabled?: boolean;
@@ -9,7 +9,7 @@ export type CommonGroupProps = {
     onValueChange?: (v: string | string[]) => void;
     orientation?: Orientation;
     value?: string | string[];
-};
+}
 export type SingleProps = CommonGroupProps & {
     type?: 'single';
 };
@@ -17,13 +17,13 @@ export type MultipleProps = CommonGroupProps & {
     type: 'multiple';
 };
 export type ToggleGroupProps = (SingleProps | MultipleProps) & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;
-export type ItemRenderProps = {
+export interface ItemRenderProps {
     children?: ReactNode;
     className?: string;
     disabled?: boolean;
     value: string;
-};
-export declare const ToggleGroupBase: (props: ToggleGroupProps & Record<`data-${string}`, any>) => import("react/jsx-runtime").JSX.Element;
+}
+export declare const ToggleGroupBase: (props: ToggleGroupProps & Record<`data-${string}`, unknown>) => import("react/jsx-runtime").JSX.Element;
 export type ToggleGroupItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'onPressedChange' | 'pressed' | 'defaultPressed'> & ItemRenderProps & {
     /** @deprecated This prop is ignored - pressed state is managed by ToggleGroup */
     pressed?: boolean;

package/dist/ToggleGroup/ToggleGroupBase.js

@@ -9,7 +9,7 @@ const T = j(null), Q = (C) => {
     className: z,
     defaultValue: r,
     disabled: l = !1,
-    loop: c = !0,
+    loop: p = !0,
     name: x,
     onValueChange: v,
     orientation: u = "horizontal",
@@ -17,46 +17,46 @@ const T = j(null), Q = (C) => {
     value: a,
     "data-variant": D,
     "data-size": b,
-    "data-slot": f,
+    "data-slot": m,
     "data-layout": w,
     ...G
-  } = C, p = d === "multiple", [n, m] = M({
-    defaultValue: typeof r < "u" ? r : p ? [] : "",
+  } = C, g = d === "multiple", [n, y] = M({
+    defaultValue: typeof r < "u" ? r : g ? [] : "",
     onChange: v,
     value: a
-  }), o = S([]), g = i((t, s) => {
+  }), o = S([]), c = i((t, s) => {
     const P = { val: t, el: s, disabled: !!s?.disabled };
     return o.current = [...o.current.filter((A) => A.val !== t), P], () => {
       o.current = o.current.filter((A) => A.val !== t);
     };
   }, []), V = i(() => o.current.slice(), []), k = i(
-    (t) => p ? Array.isArray(n) && n.includes(t) : n === t,
-    [p, n]
-  ), e = i((t) => m(t), [m]), y = i(
+    (t) => g ? Array.isArray(n) && n.includes(t) : n === t,
+    [g, n]
+  ), e = i((t) => y(t), [y]), f = i(
     (t) => {
       const s = o.current;
       if (s.length === 0) return;
-      const P = s.length - 1, A = c ? (t % s.length + s.length) % s.length : R(t, 0, P);
+      const P = s.length - 1, A = p ? (t % s.length + s.length) % s.length : R(t, 0, P);
       s[A]?.el?.focus();
     },
-    [c]
+    [p]
   ), h = H(
     () => ({
-      focusItemByIndex: y,
+      focusItemByIndex: f,
       groupDisabled: l,
       isItemPressed: k,
       itemsSnapshot: V,
-      loop: c,
+      loop: p,
       name: x,
       orientation: u,
-      register: g,
+      register: c,
       setValue: e,
       type: d,
       value: n
     }),
-    [l, k, V, c, x, u, e, d, n]
+    [f, l, k, V, p, x, u, c, e, d, n]
   ), I = x;
-  return /* @__PURE__ */ E("div", { className: z, "data-disabled": l ? "" : void 0, "data-layout": w, "data-orientation": u, "data-size": b, "data-slot": f, "data-variant": D, role: "group", ...G, children: [
+  return /* @__PURE__ */ E("div", { className: z, "data-disabled": l ? "" : void 0, "data-layout": w, "data-orientation": u, "data-size": b, "data-slot": m, "data-variant": D, role: "group", ...G, children: [
     /* @__PURE__ */ B(T.Provider, { value: h, children: C.children }),
     I && d === "single" && typeof n == "string" ? /* @__PURE__ */ B("input", { type: "hidden", name: I, value: n }) : null,
     I && d === "multiple" && Array.isArray(n) ? n.map((t) => /* @__PURE__ */ B("input", { type: "hidden", name: I + "[]", value: t }, t)) : null
@@ -65,7 +65,7 @@ const T = j(null), Q = (C) => {
   ref: z,
   value: r,
   disabled: l,
-  className: c,
+  className: p,
   children: x,
   onKeyDown: v,
   onClick: u,
@@ -73,33 +73,33 @@ const T = j(null), Q = (C) => {
 }) {
   const a = K(T);
   if (!a) throw new Error("ToggleGroupItem must be used within ToggleGroup");
-  const { type: D, orientation: b, groupDisabled: f, setValue: w, isItemPressed: G, itemsSnapshot: p, register: n } = a, m = S(null);
-  L(z, () => m.current), N(() => n(r, m.current), [n, r]);
-  const o = G(r), g = i(() => {
-    if (!(f || l))
+  const { type: D, orientation: b, groupDisabled: m, setValue: w, isItemPressed: G, itemsSnapshot: g, register: n } = a, y = S(null);
+  L(z, () => y.current), N(() => n(r, y.current), [n, r]);
+  const o = G(r), c = i(() => {
+    if (!(m || l))
       if (D === "single") w(o ? "" : r);
       else {
-        const e = a.value, y = o ? e.filter((h) => h !== r) : [...e, r];
-        w(y);
+        const e = a.value, f = o ? e.filter((h) => h !== r) : [...e, r];
+        w(f);
       }
-  }, [a.value, l, f, o, w, D, r]), V = i(
+  }, [a.value, l, m, o, w, D, r]), V = i(
     (e) => {
       if (v && v(e), e.defaultPrevented) return;
       if (e.key === " " || e.key === "Enter") {
-        e.preventDefault(), g();
+        e.preventDefault(), c();
         return;
       }
-      const y = p(), h = y.findIndex((s) => s.val === r), I = b === "horizontal" ? "ArrowLeft" : "ArrowUp", t = b === "horizontal" ? "ArrowRight" : "ArrowDown";
-      e.key === I ? (e.preventDefault(), a.focusItemByIndex(h - 1)) : e.key === t ? (e.preventDefault(), a.focusItemByIndex(h + 1)) : e.key === "Home" ? (e.preventDefault(), a.focusItemByIndex(0)) : e.key === "End" && (e.preventDefault(), a.focusItemByIndex(y.length - 1));
+      const f = g(), h = f.findIndex((s) => s.val === r), I = b === "horizontal" ? "ArrowLeft" : "ArrowUp", t = b === "horizontal" ? "ArrowRight" : "ArrowDown";
+      e.key === I ? (e.preventDefault(), a.focusItemByIndex(h - 1)) : e.key === t ? (e.preventDefault(), a.focusItemByIndex(h + 1)) : e.key === "Home" ? (e.preventDefault(), a.focusItemByIndex(0)) : e.key === "End" && (e.preventDefault(), a.focusItemByIndex(f.length - 1));
     },
-    [a, p, v, b, g, r]
+    [a, g, v, b, c, r]
   ), k = i(
     (e) => {
-      u && u(e), !e.defaultPrevented && g();
+      u && u(e), !e.defaultPrevented && c();
     },
-    [u, g]
+    [u, c]
   );
-  return /* @__PURE__ */ B("button", { "aria-pressed": o, className: c, "data-disabled": f || l ? "" : void 0, "data-state": o ? "on" : "off", disabled: f || l, onClick: k, onKeyDown: V, ref: m, type: "button", ...d, children: x });
+  return /* @__PURE__ */ B("button", { "aria-pressed": o, className: p, "data-disabled": m || l ? "" : void 0, "data-state": o ? "on" : "off", disabled: m || l, onClick: k, onKeyDown: V, ref: y, type: "button", ...d, children: x });
 };
 export {
   Q as ToggleGroupBase,

package/dist/ToggleGroup.d.ts

@@ -12,7 +12,7 @@ export type ToggleGroupProps = ComponentProps<typeof ToggleGroupBase> & VariantP
 };
 export declare const ToggleGroup: ({ className, variant, size, layout, activeColor, activeTextColor, children, ...props }: ToggleGroupProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ToggleGroupItem: {
-    ({ ref, className, children, variant, size, value, layout, activeColor, activeTextColor, style, ...props }: ToggleGroupItemProps & {
+    ({ activeColor, activeTextColor, children, className, layout, ref, size, style, value, variant, ...props }: ToggleGroupItemProps & {
         ref?: Ref<HTMLButtonElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/ToggleGroup.js

@@ -6,58 +6,55 @@ import { getActiveColorStyle as z, toggleVariants as G } from "./Toggle.js";
 import { cn as c } from "./utils/twUtils.js";
 import { createContext as h, useContext as w } from "react";
 const m = h({
+  layout: "default",
   size: "default",
-  variant: "default",
-  layout: "default"
+  variant: "default"
 }), _ = ({ className: r, variant: o, size: e, layout: a, activeColor: l, activeTextColor: d, children: n, ...i }) => /* @__PURE__ */ s(
   C,
   {
+    className: c("group/toggle-group flex h-fit w-fit items-center rounded-md data-[layout='expanded']:w-full data-[variant='outline']:gap-0.5 [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md", r),
+    "data-layout": a,
+    "data-size": e,
     "data-slot": "toggle-group",
     "data-testid": "spectral-toggle-group",
     "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 items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md [&[data-layout='expanded']]:w-full [&[data-variant='outline']]:gap-0.25",
-      r
-    ),
     ...i,
     children: /* @__PURE__ */ s(m.Provider, { value: { variant: o, size: e, layout: a, activeColor: l, activeTextColor: d }, children: n })
   }
 ), A = ({
-  ref: r,
-  className: o,
+  activeColor: r,
+  activeTextColor: o,
   children: e,
-  variant: a,
-  size: l,
-  value: d,
-  layout: n,
-  activeColor: i,
-  activeTextColor: v,
-  style: f,
+  className: a,
+  layout: l,
+  ref: d,
+  size: n,
+  style: i,
+  value: v,
+  variant: f,
   ...y
 }) => {
-  const t = w(m), g = t.variant ?? a, u = t.size ?? l, p = t.layout ?? n, x = i ?? t.activeColor, b = v ?? t.activeTextColor;
+  const t = w(m), u = t.variant ?? f, g = t.size ?? n, p = t.layout ?? l, x = r ?? t.activeColor, b = o ?? t.activeTextColor;
   return /* @__PURE__ */ s(
     T,
     {
-      ref: r,
-      "data-slot": "toggle-group-item",
-      "data-testid": "spectral-toggle-group-item",
-      "data-variant": g,
-      "data-size": u,
-      "data-layout": p,
-      value: d,
       className: c(
         G({
-          variant: g,
-          size: u,
+          variant: u,
+          size: g,
           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",
-        o
+        "group data-[variant=outline]:border-toggle-outline-border data-[variant=outline]:hover:border-togglegroup-border rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0",
+        a
       ),
-      style: { ...z(x, b), ...f },
+      "data-layout": p,
+      "data-size": g,
+      "data-slot": "toggle-group-item",
+      "data-testid": "spectral-toggle-group-item",
+      "data-variant": u,
+      ref: d,
+      style: { ...z(x, b), ...i },
+      value: v,
       ...y,
       children: e
     }

package/dist/Tooltip.d.ts

@@ -7,7 +7,7 @@ export declare const TooltipTrigger: ({ asChild, children, ...props }: Component
 declare const tooltipVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const TooltipContent: ({ children, className, showArrow, sideOffset, variant, side, ...props }: ComponentProps<typeof TooltipPrimitive.Content> & VariantProps<typeof tooltipVariants> & {
+export declare const TooltipContent: ({ children, className, showArrow, side, sideOffset, variant, ...props }: ComponentProps<typeof TooltipPrimitive.Content> & VariantProps<typeof tooltipVariants> & {
     showArrow?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export {};