@spear-ai/spectral 1.4.2 → 1.4.3

package/dist/ToggleGroup.js

@@ -1,47 +1,49 @@
 "use client";
 import "./styles/main.css";
-import { jsx as d } from "react/jsx-runtime";
-import { ToggleGroupItemBase as p, ToggleGroupBase as f } from "./ToggleGroup/ToggleGroupBase.js";
-import { toggleVariants as m } from "./Toggle.js";
-import { cn as l } from "./utils/twUtils.js";
+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 g = c({
+const n = c({
   size: "default",
   variant: "default",
   layout: "default"
-}), w = ({ className: n, variant: e, size: o, layout: a, children: u, ...r }) => /* @__PURE__ */ d(
-  f,
+}), w = ({ className: d, variant: e, size: o, layout: a, children: l, ...r }) => /* @__PURE__ */ u(
+  m,
   {
     "data-slot": "toggle-group",
+    "data-testid": "spectral-toggle-group",
     "data-variant": e,
     "data-size": o,
     "data-layout": a,
-    className: l(
+    className: g(
       "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",
-      n
+      d
     ),
     ...r,
-    children: /* @__PURE__ */ d(g.Provider, { value: { variant: e, size: o, layout: a }, children: u })
+    children: /* @__PURE__ */ u(n.Provider, { value: { variant: e, size: o, layout: a }, children: l })
   }
-), h = v(({ className: n, children: e, variant: o, size: a, value: u, layout: r, ...i }, s) => {
-  const t = b(g);
-  return /* @__PURE__ */ d(
+), h = v(({ className: d, children: e, variant: o, size: a, value: l, layout: r, ...i }, s) => {
+  const t = b(n);
+  return /* @__PURE__ */ u(
     p,
     {
       ref: s,
       "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,
-      value: u,
-      className: l(
-        m({
+      value: l,
+      className: g(
+        f({
           variant: t.variant || o,
           size: t.size || a,
           layout: t.layout || r
         }),
         "group data-[variant=outline]:border-togglegroup-border rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0",
-        n
+        d
       ),
       ...i,
       children: e

package/dist/Tooltip/TooltipBase.d.ts

@@ -4,8 +4,8 @@ type Align = 'start' | 'center' | 'end';
 export type TooltipProviderProps = {
     children: ReactNode;
     delayDuration?: number;
-    skipDelayDuration?: number;
     disableHoverableContent?: boolean;
+    skipDelayDuration?: number;
 };
 export declare const TooltipProviderBase: import('react').ForwardRefExoticComponent<TooltipProviderProps & import('react').RefAttributes<HTMLElement>>;
 export type TooltipRootProps = {
@@ -20,7 +20,7 @@ export type TooltipRootProps = {
     side?: Side;
     sideOffset?: number;
 };
-export declare const TooltipRootBase: ({ children, open: openProp, defaultOpen, onOpenChange, side, align, sideOffset, alignOffset, avoidCollisions, delayDuration }: TooltipRootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TooltipRootBase: ({ align, alignOffset, avoidCollisions, children, defaultOpen, delayDuration, onOpenChange, open: openProp, side, sideOffset }: TooltipRootProps) => import("react/jsx-runtime").JSX.Element;
 export type TooltipTriggerProps = ComponentPropsWithoutRef<'button'> & {
     asChild?: boolean;
 };
@@ -28,24 +28,24 @@ export declare const TooltipTriggerBase: import('react').ForwardRefExoticCompone
     asChild?: boolean;
 } & import('react').RefAttributes<HTMLElement>>;
 export type TooltipContentProps = ComponentPropsWithoutRef<'div'> & {
-    forceMount?: boolean;
-    container?: Element | DocumentFragment | null | undefined;
     arrowPadding?: number;
+    container?: Element | DocumentFragment | null | undefined;
+    forceMount?: boolean;
     variant?: 'default' | 'outline';
 };
 export declare const TooltipContentBase: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    forceMount?: boolean;
-    container?: Element | DocumentFragment | null | undefined;
     arrowPadding?: number;
+    container?: Element | DocumentFragment | null | undefined;
+    forceMount?: boolean;
     variant?: "default" | "outline";
 } & import('react').RefAttributes<HTMLDivElement>>;
 export type TooltipArrowProps = ComponentPropsWithoutRef<'div'> & {
-    width?: number;
     height?: number;
+    width?: number;
 };
 export declare const TooltipArrowBase: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    width?: number;
     height?: number;
+    width?: number;
 } & import('react').RefAttributes<HTMLDivElement>>;
 export {};
 //# sourceMappingURL=TooltipBase.d.ts.map

package/dist/Tooltip/TooltipBase.js

@@ -1,54 +1,54 @@
 "use client";
 import "../styles/main.css";
 import { jsx as D } from "react/jsx-runtime";
-import { createForwardedRef as N } from "../utils/refs.js";
+import { createForwardedRef as N } from "../utils/createForwardRef.js";
 import { cn as z } from "../utils/twUtils.js";
 import { createContext as X, forwardRef as L, useMemo as Y, useRef as E, useEffect as k, useCallback as g, useState as I, useContext as M, useId as A } from "react";
 import { createPortal as S } from "react-dom";
-const F = X(null), V = L(function({ children: a, delayDuration: u = 700, skipDelayDuration: l = 300, disableHoverableContent: d = !1 }) {
-  const c = Y(() => ({ delayDuration: u, skipDelayDuration: l, disableHoverableContent: d }), [u, l, d]);
+const F = X(null), V = L(function({ children: a, delayDuration: d = 700, disableHoverableContent: l = !1, skipDelayDuration: p = 300 }) {
+  const c = Y(() => ({ delayDuration: d, skipDelayDuration: p, disableHoverableContent: l }), [d, p, l]);
   return /* @__PURE__ */ D(F.Provider, { value: c, children: a });
-}), K = X(null), Z = ({ children: h, open: a, defaultOpen: u, onOpenChange: l, side: d = "top", align: c = "center", sideOffset: f = 0, alignOffset: y = 0, avoidCollisions: p = !0, delayDuration: t }) => {
+}), K = X(null), Z = ({ align: u = "center", alignOffset: a = 0, avoidCollisions: d = !0, children: l, defaultOpen: p, delayDuration: c, onOpenChange: f, open: v, side: h = "top", sideOffset: t = 0 }) => {
   const r = M(F) ?? {
     delayDuration: 700,
     skipDelayDuration: 300,
     disableHoverableContent: !1
-  }, m = {
+  }, w = {
     ...r,
-    delayDuration: t ?? r.delayDuration
-  }, [e, o] = I(!!u), i = typeof a == "boolean", w = i ? a : e, v = g(
+    delayDuration: c ?? r.delayDuration
+  }, [e, o] = I(!!p), i = typeof v == "boolean", m = i ? v : e, y = g(
     (x) => {
-      i || o(x), l?.(x);
+      i || o(x), f?.(x);
     },
-    [i, l]
+    [i, f]
   ), T = E(null), b = A(), C = Y(
     () => ({
-      open: w,
-      setOpen: v,
-      triggerRef: T,
+      arrowPadding: 4,
       contentId: b,
-      options: { side: d, align: c, sideOffset: f, alignOffset: y, avoidCollisions: p },
-      provider: m,
-      arrowPadding: 4
+      open: m,
+      options: { side: h, align: u, sideOffset: t, alignOffset: a, avoidCollisions: d },
+      provider: w,
+      setOpen: y,
+      triggerRef: T
     }),
-    [w, v, d, c, f, y, p, m]
+    [m, y, h, u, t, a, d, w]
   );
-  return /* @__PURE__ */ D(K.Provider, { value: C, children: h });
-}, _ = L(function({ asChild: a, onPointerEnter: u, onPointerLeave: l, onFocus: d, onBlur: c, onKeyDown: f, ...y }, p) {
-  const t = H(), { provider: r } = t, m = N(t.triggerRef, p), e = E(null), o = E(null), i = E(0), w = () => {
+  return /* @__PURE__ */ D(K.Provider, { value: C, children: l });
+}, _ = L(function({ asChild: a, onPointerEnter: d, onPointerLeave: l, onFocus: p, onBlur: c, onKeyDown: f, ...v }, h) {
+  const t = H(), { provider: r } = t, w = N(t.triggerRef, h), e = E(null), o = E(null), i = E(0), m = () => {
     e.current && window.clearTimeout(e.current), o.current && window.clearTimeout(o.current), e.current = null, o.current = null;
   };
-  k(() => () => w(), []);
-  const v = g(() => {
+  k(() => () => m(), []);
+  const y = g(() => {
     const O = Date.now() - i.current < r.skipDelayDuration ? 0 : r.delayDuration;
     e.current = window.setTimeout(() => t.setOpen(!0), O);
   }, [r.skipDelayDuration, r.delayDuration, t.setOpen]), T = g(() => {
-    w(), t.setOpen(!1), i.current = Date.now();
+    m(), t.setOpen(!1), i.current = Date.now();
   }, [t.setOpen]), b = g(
     (s) => {
-      u?.(s), (s.pointerType === "mouse" || s.pointerType === "pen") && v();
+      d?.(s), (s.pointerType === "mouse" || s.pointerType === "pen") && y();
     },
-    [u, v]
+    [d, y]
   ), C = g(
     (s) => {
       l?.(s), (s.pointerType === "mouse" || s.pointerType === "pen") && (o.current = window.setTimeout(() => t.setOpen(!1), 0));
@@ -56,9 +56,9 @@ const F = X(null), V = L(function({ children: a, delayDuration: u = 700, skipDel
     [l, t.setOpen]
   ), x = g(
     (s) => {
-      d?.(s), v();
+      p?.(s), y();
     },
-    [d, v]
+    [p, y]
   ), B = g(
     (s) => {
       c?.(s), T();
@@ -70,18 +70,18 @@ const F = X(null), V = L(function({ children: a, delayDuration: u = 700, skipDel
     },
     [f, T]
   );
-  return /* @__PURE__ */ D(a ? "span" : "button", { ...y, ref: m, "aria-describedby": t.open ? t.contentId : void 0, onPointerEnter: b, onPointerLeave: C, onFocus: x, onBlur: B, onKeyDown: P });
-}), tt = L(function({ className: a, style: u, forceMount: l, container: d, onPointerEnter: c, onPointerLeave: f, children: y, arrowPadding: p = 4, variant: t = "default", ...r }, m) {
-  const e = H(), [o, i] = I(null), [w, v] = I(null), T = g(
+  return /* @__PURE__ */ D(a ? "span" : "button", { "aria-describedby": t.open ? t.contentId : void 0, onBlur: B, onFocus: x, onKeyDown: P, onPointerEnter: b, onPointerLeave: C, ref: w, ...v });
+}), tt = L(function({ arrowPadding: a = 4, children: d, className: l, container: p, forceMount: c, onPointerEnter: f, onPointerLeave: v, style: h, variant: t = "default", ...r }, w) {
+  const e = H(), [o, i] = I(null), [m, y] = I(null), T = g(
     (n) => {
-      i(n), typeof m == "function" ? m(n) : m && "current" in m && (m.current = n);
+      i(n), typeof w == "function" ? w(n) : w && "current" in w && (w.current = n);
     },
-    [m]
+    [w]
   ), b = g(() => {
     if (!e.triggerRef.current || !o) return;
-    const n = j(e.triggerRef.current, o, { ...e.options, arrowPadding: p });
-    v(n);
-  }, [o, e.triggerRef, e.options, p]);
+    const n = j(e.triggerRef.current, o, { ...e.options, arrowPadding: a });
+    y(n);
+  }, [o, e.triggerRef, e.options, a]);
   k(() => {
     if (!e.open) return;
     b();
@@ -98,82 +98,84 @@ const F = X(null), V = L(function({ children: a, delayDuration: u = 700, skipDel
   }, [e.open, e.setOpen]);
   const C = g(
     (n) => {
-      c?.(n), e.provider.disableHoverableContent || e.setOpen(!0);
+      f?.(n), e.provider.disableHoverableContent || e.setOpen(!0);
     },
-    [c, e.provider.disableHoverableContent, e.setOpen]
+    [f, e.provider.disableHoverableContent, e.setOpen]
   ), x = g(
     (n) => {
-      f?.(n), e.provider.disableHoverableContent || e.setOpen(!1);
+      v?.(n), e.provider.disableHoverableContent || e.setOpen(!1);
     },
-    [f, e.provider.disableHoverableContent, e.setOpen]
-  ), B = e.open || l ? /* @__PURE__ */ D(
+    [v, e.provider.disableHoverableContent, e.setOpen]
+  ), B = e.open || c ? /* @__PURE__ */ D(
     "div",
     {
-      ...r,
-      ref: T,
-      id: e.contentId,
-      role: "tooltip",
+      className: l,
       "data-state": e.open ? "open" : "closed",
+      "data-testid": "spectral-tooltip-content",
       "data-variant": t,
-      className: a,
+      id: e.contentId,
+      onPointerEnter: C,
+      onPointerLeave: x,
+      ref: T,
+      role: "tooltip",
       style: {
         position: "fixed",
-        left: w?.x ?? -9999,
-        top: w?.y ?? -9999,
-        transformOrigin: w ? $(w.placing) : void 0,
-        ...u
+        left: m?.x ?? -9999,
+        top: m?.y ?? -9999,
+        transformOrigin: m ? $(m.placing) : void 0,
+        ...h
       },
-      onPointerEnter: C,
-      onPointerLeave: x,
-      children: y
+      ...r,
+      children: d
     }
-  ) : null, P = typeof document < "u" ? d ?? document.body : null;
+  ) : null, P = typeof document < "u" ? p ?? document.body : null;
   return P ? S(B, P) : null;
-}), et = L(function({ width: a = 16, height: u = 16, className: l, style: d, ...c }, f) {
-  const y = H();
+}), et = L(function({ width: a = 16, height: d = 16, className: l, style: p, ...c }, f) {
+  const v = H();
   return /* @__PURE__ */ D(
     "div",
     {
-      ...c,
-      ref: f,
       "aria-hidden": !0,
       className: z("pointer-events-none", l),
+      "data-arrow": !0,
+      "data-testid": "spectral-tooltip-arrow",
+      "data-side": v.options.side,
+      ref: f,
       style: {
         width: a,
-        height: u,
-        ...d
+        height: d,
+        ...p
       },
-      "data-arrow": !0,
-      "data-side": y.options.side
+      ...c
     }
   );
 });
 function H() {
-  const h = M(K);
-  if (!h) throw new Error("Tooltip components must be used within <Tooltip>");
-  return h;
+  const u = M(K);
+  if (!u) throw new Error("Tooltip components must be used within <Tooltip>");
+  return u;
 }
 const U = {
-  top: "bottom center",
   bottom: "top center",
   left: "center right",
-  right: "center left"
+  right: "center left",
+  top: "bottom center"
 };
-function $(h) {
-  return U[h];
+function $(u) {
+  return U[u];
 }
-function R(h, a, u) {
-  return Math.max(a, Math.min(u, h));
+function R(u, a, d) {
+  return Math.max(a, Math.min(d, u));
 }
-function j(h, a, u) {
-  const { side: l, align: d, sideOffset: c, alignOffset: f, avoidCollisions: y, arrowPadding: p } = u, t = h.getBoundingClientRect(), r = a.getBoundingClientRect(), m = window.innerWidth, e = window.innerHeight;
+function j(u, a, d) {
+  const { side: l, align: p, sideOffset: c, alignOffset: f, avoidCollisions: v, arrowPadding: h } = d, t = u.getBoundingClientRect(), r = a.getBoundingClientRect(), w = window.innerWidth, e = window.innerHeight;
   let o = 0, i = 0;
-  const w = t.left + t.width / 2 - r.width / 2, v = t.left, T = t.right - r.width, b = t.top + t.height / 2 - r.height / 2, C = t.top, x = t.bottom - r.height, B = d === "start" ? v : d === "end" ? T : w, P = d === "start" ? C : d === "end" ? x : b;
+  const m = t.left + t.width / 2 - r.width / 2, y = t.left, T = t.right - r.width, b = t.top + t.height / 2 - r.height / 2, C = t.top, x = t.bottom - r.height, B = p === "start" ? y : p === "end" ? T : m, P = p === "start" ? C : p === "end" ? x : b;
   l === "top" ? (o = B + f, i = t.top - r.height - c) : l === "bottom" ? (o = B + f, i = t.bottom + c) : l === "left" ? (o = t.left - r.width - c, i = P + f) : (o = t.right + c, i = P + f);
   let n = l;
-  y && (l === "top" && i < 0 ? (n = "bottom", i = t.bottom + c) : l === "bottom" && i + r.height > e ? (n = "top", i = t.top - r.height - c) : l === "left" && o < 0 ? (n = "right", o = t.right + c) : l === "right" && o + r.width > m && (n = "left", o = t.left - r.width - c));
+  v && (l === "top" && i < 0 ? (n = "bottom", i = t.bottom + c) : l === "bottom" && i + r.height > e ? (n = "top", i = t.top - r.height - c) : l === "left" && o < 0 ? (n = "right", o = t.right + c) : l === "right" && o + r.width > w && (n = "left", o = t.left - r.width - c));
   let s = t.left + t.width / 2, O = t.top + t.height / 2;
-  return n === "top" && (O = i + r.height, s = R(t.left + t.width / 2, o + p, o + r.width - p)), n === "bottom" && (O = i, s = R(t.left + t.width / 2, o + p, o + r.width - p)), n === "left" && (s = o + r.width, O = R(t.top + t.height / 2, i + p, i + r.height - p)), n === "right" && (s = o, O = R(t.top + t.height / 2, i + p, i + r.height - p)), a.style.setProperty("--arrow-x", `${s - o}px`), a.style.setProperty("--arrow-y", `${O - i}px`), a.dataset.side = n, { x: o, y: i, placing: n, arrowX: s, arrowY: O };
+  return n === "top" && (O = i + r.height, s = R(t.left + t.width / 2, o + h, o + r.width - h)), n === "bottom" && (O = i, s = R(t.left + t.width / 2, o + h, o + r.width - h)), n === "left" && (s = o + r.width, O = R(t.top + t.height / 2, i + h, i + r.height - h)), n === "right" && (s = o, O = R(t.top + t.height / 2, i + h, i + r.height - h)), a.style.setProperty("--arrow-x", `${s - o}px`), a.style.setProperty("--arrow-y", `${O - i}px`), a.dataset.side = n, { x: o, y: i, placing: n, arrowX: s, arrowY: O };
 }
 export {
   et as TooltipArrowBase,

package/dist/Tooltip.d.ts

@@ -3,7 +3,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 export declare const TooltipProvider: ({ delayDuration, ...props }: ComponentProps<typeof TooltipPrimitive.Provider>) => import("react/jsx-runtime").JSX.Element;
 export declare const Tooltip: ({ ...props }: ComponentProps<typeof TooltipPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
 export declare const TooltipTrigger: ({ ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>) => import("react/jsx-runtime").JSX.Element;
-export declare const TooltipContent: ({ className, children, sideOffset, showArrow, ...props }: ComponentProps<typeof TooltipPrimitive.Content> & {
+export declare const TooltipContent: ({ children, className, showArrow, sideOffset, ...props }: ComponentProps<typeof TooltipPrimitive.Content> & {
     showArrow?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/Tooltip.js

@@ -319,29 +319,30 @@ function be(e) {
   return t.pop(), o.length === 1 && t.length === 1 && o[0].x === t[0].x && o[0].y === t[0].y ? o : o.concat(t);
 }
 var we = z, Pe = $, Ee = B, Re = U, _e = V, Oe = X;
-const De = ({ delayDuration: e = 0, ...o }) => /* @__PURE__ */ u(we, { "data-slot": "tooltip-provider", delayDuration: e, ...o }), Ge = ({ ...e }) => /* @__PURE__ */ u(De, { children: /* @__PURE__ */ u(Pe, { "data-slot": "tooltip", ...e }) }), je = ({ ...e }) => /* @__PURE__ */ u(Ee, { "data-slot": "tooltip-trigger", ...e }), Fe = ({
-  className: e,
-  children: o,
-  sideOffset: t = 0,
-  showArrow: r = !1,
+const De = ({ delayDuration: e = 0, ...o }) => /* @__PURE__ */ u(we, { "data-slot": "tooltip-provider", delayDuration: e, ...o }), Ge = ({ ...e }) => /* @__PURE__ */ u(De, { children: /* @__PURE__ */ u(Pe, { "data-slot": "tooltip", "data-testid": "spectral-tooltip", ...e }) }), je = ({ ...e }) => /* @__PURE__ */ u(Ee, { "data-slot": "tooltip-trigger", "data-testid": "spectral-tooltip-trigger", ...e }), Fe = ({
+  children: e,
+  className: o,
+  showArrow: t = !1,
+  sideOffset: r = 0,
   ...n
-}) => /* @__PURE__ */ u(Re, { children: /* @__PURE__ */ H(
+}) => /* @__PURE__ */ u(Re, { "data-slot": "tooltip-portal", "data-testid": "spectral-tooltip-portal", children: /* @__PURE__ */ H(
   _e,
   {
-    "data-slot": "tooltip-content",
-    sideOffset: t,
     className: ie(
       "bg-tooltip-bg text-text-primary pointer-events-auto z-50 w-fit rounded-md px-3 py-1.5 text-xs shadow-lg will-change-transform outline-none select-none",
       "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
       "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
-      e
+      o
     ),
+    "data-slot": "tooltip-content",
+    "data-testid": "spectral-tooltip-content",
+    sideOffset: r,
     ...n,
     children: [
-      o,
-      r && /* @__PURE__ */ u(Oe, { className: "bg-tooltip-arrow fill-tooltip-arrow z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      e,
+      t && /* @__PURE__ */ u(Oe, { className: "bg-tooltip-arrow fill-tooltip-arrow z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
     ]
   }
 ) });

package/dist/Tray.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import { ComponentPropsWithoutRef, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 import { Drawer as TrayBase } from 'vaul';
 declare const TrayContentVariants: (props?: ({
-    size?: "sm" | "lg" | "md" | "full" | null | undefined;
+    size?: "sm" | "md" | "lg" | "full" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type TrayBaseProps = ComponentPropsWithoutRef<typeof TrayBase.Root> & {
     size?: 'sm' | 'md' | 'lg' | 'full';