@spear-ai/spectral 1.6.17 → 1.8.0

package/dist/MultiSelect.js

@@ -3,23 +3,23 @@ import { jsx as u } from "react/jsx-runtime";
 import { MultiSelectBase as c } from "./MultiSelect/MultiSelectBase.js";
 import "react";
 const n = ({
-  ref: l,
-  emptyText: t = "No matches found.",
-  loading: s = !1,
-  onValueChange: d,
-  options: i,
+  emptyText: l = "No matches found.",
+  loading: t = !1,
+  onValueChange: s,
+  options: d,
+  ref: i,
   state: o,
   value: b = [],
   ...a
 }) => {
-  const m = i.map((e) => ({
+  const m = d.map((e) => ({
     disabled: e.disabled ?? !1,
     group: e.group,
     label: e.label,
     value: e.value
-  })), r = s ? "loading" : o;
-  return /* @__PURE__ */ u(c, { disabled: a.disabled, "data-disabled": a.disabled, emptyMessage: t, onChange: d ?? (() => {
-  }), options: m, ref: l, state: r, value: b, ...a });
+  })), r = t ? "loading" : o;
+  return /* @__PURE__ */ u(c, { "data-disabled": a.disabled, disabled: a.disabled, emptyMessage: l, onChange: s ?? (() => {
+  }), options: m, ref: i, state: r, value: b, ...a });
 };
 n.displayName = "MultiSelect";
 export {

package/dist/Popover.js

@@ -1,248 +1,33 @@
-"use client";
 import "./styles/main.css";
-import { jsx as s } from "react/jsx-runtime";
-import * as p from "react";
-import { e as L, c as z, u as x, P as O, b as P, a as G } from "./index-OnYbwQjk.js";
-import { P as H, D as K } from "./index-u1k2AYWy.js";
-import { h as j, R as U, u as V, F as W } from "./Combination-CK_g12Qb.js";
-import { u as Z } from "./index-Dy-Hzr7y.js";
-import { c as _, R as q, A as b, C as B, a as J } from "./index-B3FZpM60.js";
-import { P as w } from "./index-D6HcSXrq.js";
-import { cn as Q } from "./utils/twUtils.js";
-var C = "Popover", [E] = z(C, [
-  _
-]), g = _(), [X, l] = E(C), F = (e) => {
-  const {
-    __scopePopover: n,
-    children: r,
-    open: a,
-    defaultOpen: o,
-    onOpenChange: t,
-    modal: c = !1
-  } = e, i = g(n), f = p.useRef(null), [v, h] = p.useState(!1), [m, u] = L({
-    prop: a,
-    defaultProp: o ?? !1,
-    onChange: t,
-    caller: C
-  });
-  return /* @__PURE__ */ s(q, { ...i, children: /* @__PURE__ */ s(
-    X,
-    {
-      scope: n,
-      contentId: Z(),
-      triggerRef: f,
-      open: m,
-      onOpenChange: u,
-      onOpenToggle: p.useCallback(() => u((R) => !R), [u]),
-      hasCustomAnchor: v,
-      onCustomAnchorAdd: p.useCallback(() => h(!0), []),
-      onCustomAnchorRemove: p.useCallback(() => h(!1), []),
-      modal: c,
-      children: r
-    }
-  ) });
-};
-F.displayName = C;
-var N = "PopoverAnchor", y = p.forwardRef(
-  (e, n) => {
-    const { __scopePopover: r, ...a } = e, o = l(N, r), t = g(r), { onCustomAnchorAdd: c, onCustomAnchorRemove: i } = o;
-    return p.useEffect(() => (c(), () => i()), [c, i]), /* @__PURE__ */ s(b, { ...t, ...a, ref: n });
-  }
-);
-y.displayName = N;
-var S = "PopoverTrigger", D = p.forwardRef(
-  (e, n) => {
-    const { __scopePopover: r, ...a } = e, o = l(S, r), t = g(r), c = x(n, o.triggerRef), i = /* @__PURE__ */ s(
-      O.button,
-      {
-        type: "button",
-        "aria-haspopup": "dialog",
-        "aria-expanded": o.open,
-        "aria-controls": o.contentId,
-        "data-state": $(o.open),
-        ...a,
-        ref: c,
-        onClick: P(e.onClick, o.onOpenToggle)
-      }
-    );
-    return o.hasCustomAnchor ? i : /* @__PURE__ */ s(b, { asChild: !0, ...t, children: i });
-  }
-);
-D.displayName = S;
-var A = "PopoverPortal", [Y, ee] = E(A, {
-  forceMount: void 0
-}), M = (e) => {
-  const { __scopePopover: n, forceMount: r, children: a, container: o } = e, t = l(A, n);
-  return /* @__PURE__ */ s(Y, { scope: n, forceMount: r, children: /* @__PURE__ */ s(w, { present: r || t.open, children: /* @__PURE__ */ s(H, { asChild: !0, container: o, children: a }) }) });
-};
-M.displayName = A;
-var d = "PopoverContent", T = p.forwardRef(
-  (e, n) => {
-    const r = ee(d, e.__scopePopover), { forceMount: a = r.forceMount, ...o } = e, t = l(d, e.__scopePopover);
-    return /* @__PURE__ */ s(w, { present: a || t.open, children: t.modal ? /* @__PURE__ */ s(te, { ...o, ref: n }) : /* @__PURE__ */ s(re, { ...o, ref: n }) });
-  }
-);
-T.displayName = d;
-var oe = G("PopoverContent.RemoveScroll"), te = p.forwardRef(
-  (e, n) => {
-    const r = l(d, e.__scopePopover), a = p.useRef(null), o = x(n, a), t = p.useRef(!1);
-    return p.useEffect(() => {
-      const c = a.current;
-      if (c) return j(c);
-    }, []), /* @__PURE__ */ s(U, { as: oe, allowPinchZoom: !0, children: /* @__PURE__ */ s(
-      k,
-      {
-        ...e,
-        ref: o,
-        trapFocus: r.open,
-        disableOutsidePointerEvents: !0,
-        onCloseAutoFocus: P(e.onCloseAutoFocus, (c) => {
-          c.preventDefault(), t.current || r.triggerRef.current?.focus();
-        }),
-        onPointerDownOutside: P(
-          e.onPointerDownOutside,
-          (c) => {
-            const i = c.detail.originalEvent, f = i.button === 0 && i.ctrlKey === !0, v = i.button === 2 || f;
-            t.current = v;
-          },
-          { checkForDefaultPrevented: !1 }
-        ),
-        onFocusOutside: P(
-          e.onFocusOutside,
-          (c) => c.preventDefault(),
-          { checkForDefaultPrevented: !1 }
-        )
-      }
-    ) });
-  }
-), re = p.forwardRef(
-  (e, n) => {
-    const r = l(d, e.__scopePopover), a = p.useRef(!1), o = p.useRef(!1);
-    return /* @__PURE__ */ s(
-      k,
-      {
-        ...e,
-        ref: n,
-        trapFocus: !1,
-        disableOutsidePointerEvents: !1,
-        onCloseAutoFocus: (t) => {
-          e.onCloseAutoFocus?.(t), t.defaultPrevented || (a.current || r.triggerRef.current?.focus(), t.preventDefault()), a.current = !1, o.current = !1;
-        },
-        onInteractOutside: (t) => {
-          e.onInteractOutside?.(t), t.defaultPrevented || (a.current = !0, t.detail.originalEvent.type === "pointerdown" && (o.current = !0));
-          const c = t.target;
-          r.triggerRef.current?.contains(c) && t.preventDefault(), t.detail.originalEvent.type === "focusin" && o.current && t.preventDefault();
-        }
-      }
-    );
-  }
-), k = p.forwardRef(
-  (e, n) => {
-    const {
-      __scopePopover: r,
-      trapFocus: a,
-      onOpenAutoFocus: o,
-      onCloseAutoFocus: t,
-      disableOutsidePointerEvents: c,
-      onEscapeKeyDown: i,
-      onPointerDownOutside: f,
-      onFocusOutside: v,
-      onInteractOutside: h,
-      ...m
-    } = e, u = l(d, r), R = g(r);
-    return V(), /* @__PURE__ */ s(
-      W,
-      {
-        asChild: !0,
-        loop: !0,
-        trapped: a,
-        onMountAutoFocus: o,
-        onUnmountAutoFocus: t,
-        children: /* @__PURE__ */ s(
-          K,
-          {
-            asChild: !0,
-            disableOutsidePointerEvents: c,
-            onInteractOutside: h,
-            onEscapeKeyDown: i,
-            onPointerDownOutside: f,
-            onFocusOutside: v,
-            onDismiss: () => u.onOpenChange(!1),
-            children: /* @__PURE__ */ s(
-              B,
-              {
-                "data-state": $(u.open),
-                role: "dialog",
-                id: u.contentId,
-                ...R,
-                ...m,
-                ref: n,
-                style: {
-                  ...m.style,
-                  "--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
-                  "--radix-popover-content-available-width": "var(--radix-popper-available-width)",
-                  "--radix-popover-content-available-height": "var(--radix-popper-available-height)",
-                  "--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
-                  "--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
-                }
-              }
-            )
-          }
-        )
-      }
-    );
-  }
-), I = "PopoverClose", ne = p.forwardRef(
-  (e, n) => {
-    const { __scopePopover: r, ...a } = e, o = l(I, r);
-    return /* @__PURE__ */ s(
-      O.button,
-      {
-        type: "button",
-        ...a,
-        ref: n,
-        onClick: P(e.onClick, () => o.onOpenChange(!1))
-      }
-    );
-  }
-);
-ne.displayName = I;
-var ae = "PopoverArrow", se = p.forwardRef(
-  (e, n) => {
-    const { __scopePopover: r, ...a } = e, o = g(r);
-    return /* @__PURE__ */ s(J, { ...o, ...a, ref: n });
-  }
-);
-se.displayName = ae;
-function $(e) {
-  return e ? "open" : "closed";
-}
-var ce = F, pe = y, ie = D, le = M, ue = T;
-const Re = ({ ...e }) => /* @__PURE__ */ s(ce, { "data-slot": "popover", "data-testid": "spectral-popover", ...e }), Ae = ({ ...e }) => /* @__PURE__ */ s(ie, { "data-slot": "popover-trigger", "data-testid": "spectral-popover-trigger", ...e }), xe = ({ align: e = "center", className: n, side: r = "bottom", sideOffset: a = 4, width: o = "w-fit", ...t }) => /* @__PURE__ */ s(le, { children: /* @__PURE__ */ s(
-  ue,
+import { jsx as t } from "react/jsx-runtime";
+import { R as s, P as p, C as d, T as m, A as f } from "./index-Q3N6lgwg.js";
+import { cn as l } from "./utils/twUtils.js";
+import "react";
+const u = ({ ...o }) => /* @__PURE__ */ t(s, { "data-slot": "popover", "data-testid": "spectral-popover", ...o }), x = ({ ...o }) => /* @__PURE__ */ t(m, { "data-slot": "popover-trigger", "data-testid": "spectral-popover-trigger", ...o }), b = ({ align: o = "center", className: a, side: r = "bottom", sideOffset: n = 4, width: e = "w-fit", ...i }) => /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(
+  d,
   {
-    align: e,
+    align: o,
     "data-slot": "popover-content",
     "data-testid": "spectral-popover-content",
     side: r,
-    sideOffset: a,
-    className: Q(
-      "bg-popover-bg text-popover-text data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
-      "data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2",
-      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 h-fit",
-      "max-h-[var(--radix-popover-content-max-height)] origin-[--radix-popover-content-transform-origin] rounded-lg border-none p-4",
-      "w-[var(--popover-width)] shadow-md outline-none",
-      n
+    sideOffset: n,
+    className: l(
+      "bg-popover-bg text-popover-text motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0",
+      "motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[side=bottom]:slide-in-from-top-2",
+      "motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 z-50 h-fit",
+      "max-h-(--radix-popover-content-max-height) origin-[--radix-popover-content-transform-origin] rounded-lg border-none p-4",
+      "w-(--popover-width) overflow-x-hidden overflow-y-auto shadow-md outline-none",
+      a
     ),
     style: {
-      "--popover-width": typeof o == "number" ? `${o}px` : o === "w-fit" ? "320px" : o
+      "--popover-width": typeof e == "number" ? `${e}px` : e === "w-fit" ? "320px" : e
     },
-    ...t
+    ...i
   }
-) }), Oe = ({ ...e }) => /* @__PURE__ */ s(pe, { "data-slot": "popover-anchor", ...e });
+) }), P = ({ ...o }) => /* @__PURE__ */ t(f, { "data-slot": "popover-anchor", ...o });
 export {
-  Re as Popover,
-  Oe as PopoverAnchor,
-  xe as PopoverContent,
-  Ae as PopoverTrigger
+  u as Popover,
+  P as PopoverAnchor,
+  b as PopoverContent,
+  x as PopoverTrigger
 };

package/dist/RadioButtonGroup/RadioButtonGroupBase.d.ts

@@ -1,22 +1,22 @@
 import { AsChildProp } from '../primitives/slot';
 import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
-export type RadioButtonGroupProps = {
-    value?: string;
-    onValueChange?: (value: string) => void;
+export interface RadioButtonGroupProps {
+    asChild?: boolean;
     children: ReactNode;
     className?: string;
-    isKeptActive?: boolean;
     expanded?: boolean;
-    asChild?: boolean;
-};
-export type RadioButtonGroupItemProps = AsChildProp & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onSelect' | 'type'> & {
-    value: string;
+    isKeptActive?: boolean;
+    onValueChange?: (value: string) => void;
+    value?: string;
+}
+export interface RadioButtonGroupItemProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onSelect' | 'type'> {
     children: ReactNode;
     onSelect?: (value: string) => void;
-};
-export declare const RadioButtonGroupBase: ({ value, onValueChange, children, className, isKeptActive, expanded }: RadioButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
+    value: string;
+}
+export declare const RadioButtonGroupBase: ({ children, className, expanded, isKeptActive, onValueChange, value }: RadioButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
 export declare const RadioButtonGroupItem: {
-    ({ ref, value, children, className, disabled, asChild, onSelect, onClick, ...rest }: RadioButtonGroupItemProps & {
+    ({ asChild, children, className, disabled, onClick, onSelect, ref, value, ...rest }: RadioButtonGroupItemProps & {
         ref?: Ref<HTMLButtonElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/RadioButtonGroup/RadioButtonGroupBase.js

@@ -1,33 +1,27 @@
 "use client";
 import "../styles/main.css";
 import { jsx as n } from "react/jsx-runtime";
-import { Slot as w } from "../primitives/slot.js";
+import { Slot as B } from "../primitives/slot.js";
 import { cn as b } from "../utils/twUtils.js";
-import { createContext as B, useContext as y } from "react";
-const p = B(null), I = ({ value: e, onValueChange: t, children: o, className: a, isKeptActive: r = !1, expanded: i = !1 }) => /* @__PURE__ */ n(p.Provider, { value: { value: e, onValueChange: t, isKeptActive: r, expanded: i }, children: /* @__PURE__ */ n("div", { role: "radiogroup", "data-testid": "spectral-radio-button-group", "data-expanded": i, className: b("flex h-fit w-fit items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md", "data-[expanded=true]:w-full", a), children: o }) }), C = ({
-  ref: e,
-  value: t,
-  children: o,
-  className: a,
-  disabled: r = !1,
-  asChild: i = !1,
-  onSelect: s,
-  onClick: d,
+import { createContext as y, useContext as G } from "react";
+const p = y(null), I = ({ children: a, className: t, expanded: e = !1, isKeptActive: o = !1, onValueChange: r, value: i }) => /* @__PURE__ */ n(p.Provider, { value: { value: i, onValueChange: r, isKeptActive: o, expanded: e }, children: /* @__PURE__ */ n("div", { className: b("flex h-fit w-fit items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md", "data-[expanded=true]:w-full", t), "data-expanded": e, "data-testid": "spectral-radio-button-group", role: "radiogroup", children: a }) }), R = ({
+  asChild: a = !1,
+  children: t,
+  className: e,
+  disabled: o = !1,
+  onClick: r,
+  onSelect: i,
+  ref: d,
+  value: s,
   ...v
 }) => {
-  const l = y(p);
+  const l = G(p);
   if (!l)
     throw new Error("RadioButtonGroupItem must be used within a RadioButtonGroup");
-  const { value: m, onValueChange: u, isKeptActive: h, expanded: x } = l, c = m === t, g = {
+  const { value: m, onValueChange: u, isKeptActive: x, expanded: h } = l, g = m === s, w = (f) => {
+    r && r(f), !f.defaultPrevented && (o || (u && u(s), i && i(s)));
+  }, c = {
     ...v,
-    role: "radio",
-    "aria-checked": c,
-    "data-state": c ? "on" : "off",
-    "data-testid": "spectral-radio-button-group-item",
-    disabled: r,
-    onClick: (f) => {
-      d && d(f), !f.defaultPrevented && (r || (u && u(t), s && s(t)));
-    },
     className: b(
       `bg-toggle-bg inline-flex items-center justify-center gap-2 border text-sm font-medium disabled:pointer-events-none disabled:opacity-50
       disabled:cursor-not-allowed hover:cursor-pointer text-toggle-text hover:bg-toggle-bg--hover hover:text-toggle-text--hover transition-[colors]
@@ -35,15 +29,21 @@ const p = B(null), I = ({ value: e, onValueChange: t, children: o, className: a,
       outline-none border-toggle-border hover:border-toggle-border--hover h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4
       rounded-none shadow-none focus:z-10 focus-visible:z-10 [&:not(:first-child)]:border-l-0 active:bg-toggle-bg--active active:text-toggle-text--active
       active:border-toggle-border--active`,
-      x && "w-full",
-      h && "data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active data-[state=on]:border-toggle-border--active",
-      a
-    )
+      h && "w-full",
+      x && "data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active data-[state=on]:border-toggle-border--active",
+      e
+    ),
+    disabled: o,
+    onClick: w,
+    role: "radio",
+    "aria-checked": g,
+    "data-state": g ? "on" : "off",
+    "data-testid": "spectral-radio-button-group-item"
   };
-  return i ? /* @__PURE__ */ n(w, { ref: e, ...g, children: o }) : /* @__PURE__ */ n("button", { ref: e, ...g, type: "button", children: o });
+  return a ? /* @__PURE__ */ n(B, { ref: d, ...c, children: t }) : /* @__PURE__ */ n("button", { ref: d, ...c, type: "button", children: t });
 };
-C.displayName = "RadioButtonGroupItem";
+R.displayName = "RadioButtonGroupItem";
 export {
   I as RadioButtonGroupBase,
-  C as RadioButtonGroupItem
+  R as RadioButtonGroupItem
 };

package/dist/RadioButtonGroup.d.ts

@@ -4,7 +4,7 @@ export type RadioButtonGroupProps = ComponentProps<typeof RadioButtonGroupBase>;
 export type RadioButtonGroupItemProps = RadioButtonGroupItemPropsBase;
 export declare const RadioButtonGroup: ({ className, children, ...props }: RadioButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
 export declare const RadioButtonGroupItem: {
-    ({ ref, value, children, className, disabled, asChild, onSelect, onClick, ...rest }: RadioButtonGroupItemPropsBase & {
+    ({ asChild, children, className, disabled, onClick, onSelect, ref, value, ...rest }: RadioButtonGroupItemPropsBase & {
         ref?: import('react').Ref<HTMLButtonElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/RadioGroup.d.ts

@@ -1,39 +1,39 @@
 import { Label } from '../Label/Label';
-import { ComponentPropsWithoutRef, ComponentRef, ReactElement, ReactNode, Ref } from 'react';
+import { ComponentProps, ComponentRef, ReactElement, ReactNode, Ref } from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-type RadioGroupVariant = 'default' | 'tiles' | 'unstyled';
-export type RadioGroupProps = Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, 'onChange' | 'disabled'> & {
-    onValueChange: (selected: string) => void;
-    selected?: string;
-    name: string;
-    required?: boolean;
-    orientation?: 'horizontal' | 'vertical';
-    variant?: RadioGroupVariant;
+type RadioGroupVariant = 'default' | 'unstyled';
+export interface RadioGroupProps extends Omit<ComponentProps<typeof RadioGroupPrimitive.Root>, 'onChange' | 'disabled'> {
     className?: string;
     disabled?: boolean | string[];
     itemClassName?: string;
-};
-export interface RadioGroupItemProps extends ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
+    name: string;
+    onValueChange: (selected: string) => void;
+    orientation?: 'horizontal' | 'vertical';
+    required?: boolean;
+    selected?: string;
+    variant?: RadioGroupVariant;
+}
+export interface RadioGroupItemProps extends ComponentProps<typeof RadioGroupPrimitive.Item> {
     className?: string;
     children?: ReactNode;
+    description?: string | ReactNode;
     id?: string;
     value: string;
-    description?: string | ReactNode;
 }
 declare const RadioGroup: {
-    ({ ref, className, itemClassName, onValueChange, orientation, disabled, selected, variant, ...props }: RadioGroupProps & {
+    ({ className, disabled, itemClassName, onValueChange, orientation, ref, selected, variant, ...props }: RadioGroupProps & {
         ref?: Ref<ComponentRef<typeof RadioGroupPrimitive.Root>>;
     }): ReactElement;
     displayName: string;
 };
 declare const RadioGroupItem: {
-    ({ ref, className, children, value, description, disabled, ...props }: RadioGroupItemProps & {
+    ({ children, className, disabled, ref, value, ...props }: RadioGroupItemProps & {
         ref?: Ref<ComponentRef<typeof RadioGroupPrimitive.Item>>;
     }): ReactElement;
     displayName: string;
 };
 declare const RadioGroupLabel: {
-    ({ ref, className, ...props }: ComponentPropsWithoutRef<typeof Label> & {
+    ({ ref, className, ...props }: ComponentProps<typeof Label> & {
         ref?: Ref<ComponentRef<typeof Label>>;
     }): ReactElement;
     displayName: string;