@spear-ai/spectral 1.4.1 → 1.4.3

package/dist/Dialog/DialogBase.js

@@ -1,98 +1,99 @@
 "use client";
 import "../styles/main.css";
-import { jsx as s, jsxs as E } from "react/jsx-runtime";
+import { jsx as r, jsxs as I } from "react/jsx-runtime";
+import { CloseIcon as V } from "../Icons/CloseIcon.js";
 import { cn as f } from "../utils/twUtils.js";
-import { c as P } from "../index-D29mdTf5.js";
-import { createContext as V, useContext as L, useState as N, useMemo as I, useCallback as y, cloneElement as O, useEffect as w, useRef as k, isValidElement as B } from "react";
-import { createPortal as j } from "react-dom";
-import { X as A } from "../x-Dl66o_vF.js";
-const z = V(null);
+import { c as L } from "../index-D29mdTf5.js";
+import { createContext as j, useContext as A, useState as z, useMemo as B, useCallback as k, cloneElement as R, useEffect as y, useRef as D, isValidElement as N } from "react";
+import { createPortal as $ } from "react-dom";
+const T = j(null);
 function m() {
-  const e = L(z);
-  if (!e)
+  const t = A(T);
+  if (!t)
     throw new Error("Dialog components must be used within <Dialog>");
-  return e;
+  return t;
 }
-function R(e) {
-  return B(e) && typeof e.type != "string" ? !0 : B(e);
+function O(t) {
+  return N(t) && typeof t.type != "string" ? !0 : N(t);
 }
-let D = 0;
-function J({ isOpen: e, defaultOpen: t = !1, onOpenChange: n, children: o, modal: r = !0 }) {
-  const [u, i] = N(t), d = e !== void 0, g = d ? e : u, x = I(
+let h = 0;
+function Q({ open: t, defaultOpen: o = !1, onOpenChange: e, children: n, modal: a = !0 }) {
+  const [l, d] = z(o), s = t !== void 0, u = s ? t : l, b = B(
     () => ({
-      contentId: `dialog-content-${++D}`,
-      titleId: `dialog-title-${D}`,
-      descriptionId: `dialog-description-${D}`
+      contentId: `dialog-content-${++h}`,
+      descriptionId: `dialog-description-${h}`,
+      titleId: `dialog-title-${h}`
     }),
     []
-  ), b = y(
-    (l) => {
-      d || i(l), n?.(l);
+  ), C = k(
+    (p) => {
+      s || d(p), e?.(p);
     },
-    [d, n]
-  ), C = I(
+    [s, e]
+  ), w = B(
     () => ({
-      isOpen: g,
-      setIsOpen: b,
-      modal: r,
-      ...x
+      modal: a,
+      open: u,
+      setOpen: C,
+      ...b
     }),
-    [g, b, r, x]
+    [u, C, a, b]
   );
-  return /* @__PURE__ */ s(z.Provider, { value: C, children: o });
+  return /* @__PURE__ */ r(T.Provider, { value: w, children: n });
 }
-function K({ children: e, asChild: t = !0 }) {
-  const { setIsOpen: n } = m(), o = y(() => {
+function W({ children: t, asChild: o = !0, dataTestId: e }) {
+  const { setOpen: n } = m(), a = k(() => {
     n(!0);
   }, [n]);
-  if (!t)
-    return /* @__PURE__ */ s("button", { onClick: o, children: e });
-  if (!R(e))
+  if (!o)
+    return /* @__PURE__ */ r("button", { "data-slot": "dialog-trigger", "data-testid": e, onClick: a, tabIndex: 0, children: t });
+  if (!O(t))
     throw new Error("DialogTrigger expects a single React element as child");
-  const r = e.props.onClick;
-  return O(e, {
-    onClick: (...u) => {
-      r?.(...u), o();
+  const l = t.props.onClick;
+  return R(t, {
+    onClick: (...d) => {
+      l?.(...d), a();
     }
   });
 }
-function $({ children: e, asChild: t = !0 }) {
-  const { setIsOpen: n } = m(), o = y(() => {
+function M({ children: t, asChild: o = !0, dataTestId: e }) {
+  const { setOpen: n } = m(), a = k(() => {
     n(!1);
   }, [n]);
-  if (!t)
-    return /* @__PURE__ */ s("button", { onClick: o, className: "cursor-pointer focus-visible:outline-none outline-transparent focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1", tabIndex: 0, children: e });
-  if (!R(e))
+  if (!o)
+    return /* @__PURE__ */ r("button", { className: "cursor-pointer focus-visible:outline-none outline-transparent focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1", "data-slot": "dialog-close", "data-testid": e, onClick: a, tabIndex: 0, children: t });
+  if (!O(t))
     throw new Error("DialogClose expects a single React element as child");
-  const r = e.props.onClick;
-  return O(e, {
-    onClick: (...u) => {
-      r?.(...u), o();
+  const l = t.props.onClick;
+  return R(t, {
+    onClick: (...d) => {
+      l?.(...d), a();
     }
   });
 }
-function T({ children: e, container: t }) {
-  const [n, o] = N(!1);
-  return w(() => (o(!0), () => o(!1)), []), n ? j(e, t ?? document.body) : null;
+function P({ children: t, container: o }) {
+  const [e, n] = z(!1);
+  return y(() => (n(!0), () => n(!1)), []), e ? $(t, o ?? document.body) : null;
 }
-function Q({ className: e }) {
-  const { isOpen: t, setIsOpen: n } = m(), o = y(
-    (r) => {
-      r.target === r.currentTarget && n(!1);
+function X({ className: t, dataTestId: o }) {
+  const { open: e, setOpen: n } = m(), a = k(
+    (l) => {
+      l.target === l.currentTarget && n(!1);
     },
     [n]
   );
-  return t ? /* @__PURE__ */ s(T, { children: /* @__PURE__ */ s(
+  return e ? /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(
     "div",
     {
-      className: f("fixed inset-0 z-40 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=open]:fade-in-0", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0", e),
-      "data-state": t ? "open" : "closed",
-      onClick: o,
-      "aria-hidden": "true"
+      "aria-hidden": "true",
+      className: f("fixed inset-0 z-40 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=open]:fade-in-0", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0", t),
+      "data-state": e ? "open" : "closed",
+      "data-testid": o,
+      onClick: a
     }
   ) }) : null;
 }
-const M = P(
+const F = L(
   [
     "fixed left-1/2 top-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 rounded-lg p-6 shadow-lg outline-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"
@@ -112,68 +113,93 @@ const M = P(
     }
   }
 );
-function W({ children: e, className: t, size: n, onPointerDownOutside: o, onInteractOutside: r, onEscapeKeyDown: u }) {
-  const { isOpen: i, setIsOpen: d, contentId: g, titleId: x, descriptionId: b, modal: C } = m(), l = k(null), p = k(null), v = k(!1);
-  return w(() => {
-    if (!i) {
-      v.current && p.current && typeof p.current.focus == "function" && p.current.focus(), p.current = null, v.current = !1;
+function Y({ children: t, className: o, dataTestId: e, onEscapeKeyDown: n, onInteractOutside: a, onPointerDownOutside: l, size: d }) {
+  const { open: s, setOpen: u, contentId: b, titleId: C, descriptionId: w, modal: p } = m(), g = D(null), x = D(null), v = D(!1);
+  return y(() => {
+    if (!s) {
+      v.current && x.current && typeof x.current.focus == "function" && x.current.focus(), x.current = null, v.current = !1;
       return;
     }
-    if (!l.current || v.current) return;
+    if (!g.current || v.current) return;
     v.current = !0;
-    const c = l.current;
-    p.current = document.activeElement, setTimeout(() => {
-      if (!c || !l.current) return;
-      const a = document.activeElement;
-      (!c.contains(a) || a === document.body) && c.focus();
+    const c = g.current;
+    x.current = document.activeElement, setTimeout(() => {
+      if (!c || !g.current) return;
+      const i = document.activeElement;
+      (!c.contains(i) || i === document.body) && c.focus();
     }, 0);
-  }, [i]), w(() => {
-    if (!i) return;
-    const c = (a) => {
-      a.key === "Escape" && (u?.(a), r?.(a), a.defaultPrevented || (a.preventDefault(), d(!1)));
+  }, [s]), y(() => {
+    if (!s) return;
+    const c = (i) => {
+      i.key === "Escape" && (n?.(i), a?.(i), i.defaultPrevented || (i.preventDefault(), u(!1)));
     };
     return document.addEventListener("keydown", c, { capture: !0 }), () => {
       document.removeEventListener("keydown", c, { capture: !0 });
     };
-  }, [i, u, r, d]), w(() => {
-    if (!i) return;
-    const c = (a) => {
-      const h = a.target;
-      l.current && !l.current.contains(h) && (h.closest('[role="dialog"]') !== null || (o?.(a), r?.(a), !C && !a.defaultPrevented && d(!1)));
+  }, [s, n, a, u]), y(() => {
+    if (!s) return;
+    const c = (i) => {
+      const E = i.target;
+      g.current && !g.current.contains(E) && (E.closest("[role='dialog']") !== null || (l?.(i), a?.(i), !p && !i.defaultPrevented && u(!1)));
     };
     return document.addEventListener("pointerdown", c), () => document.removeEventListener("pointerdown", c);
-  }, [i, o, r, d, C]), i ? /* @__PURE__ */ s(T, { children: /* @__PURE__ */ E("div", { ref: l, id: g, role: "dialog", "aria-modal": "true", "aria-labelledby": x, "aria-describedby": b, "data-state": i ? "open" : "closed", tabIndex: -1, className: f(M({ size: n }), t), children: [
-    /* @__PURE__ */ s($, { asChild: !0, children: /* @__PURE__ */ E("button", { className: f("absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"), "aria-label": "Close dialog", children: [
-      /* @__PURE__ */ s(A, { className: "h-4 w-4" }),
-      /* @__PURE__ */ s("span", { className: "sr-only", children: "Close" })
-    ] }) }),
-    e
-  ] }) }) : null;
+  }, [s, l, a, u, p]), s ? /* @__PURE__ */ r(P, { children: /* @__PURE__ */ I(
+    "div",
+    {
+      "aria-describedby": w,
+      "aria-labelledby": C,
+      "aria-modal": "true",
+      className: f(F({ size: d }), o),
+      "data-slot": "dialog-content",
+      "data-state": s ? "open" : "closed",
+      "data-testid": e,
+      id: b,
+      ref: g,
+      role: "dialog",
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ r(M, { asChild: !0, children: /* @__PURE__ */ I(
+          "button",
+          {
+            "aria-label": "Close dialog",
+            className: f("absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none cursor-pointer"),
+            "data-slot": "dialog-close",
+            "data-testid": "spectral-dialog-close-icon",
+            children: [
+              /* @__PURE__ */ r(V, { size: 16 }),
+              /* @__PURE__ */ r("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        ) }),
+        t
+      ]
+    }
+  ) }) : null;
 }
-function Y({ children: e, className: t }) {
+function Z({ children: t, className: o, dataTestId: e }) {
   const { titleId: n } = m();
-  return /* @__PURE__ */ s("h2", { id: n, className: f("text-base font-semibold leading-none tracking-tight", t), children: e });
+  return /* @__PURE__ */ r("h2", { className: f("text-base font-semibold leading-none tracking-tight", o), "data-slot": "dialog-title", "data-testid": e, id: n, children: t });
 }
-function Z({ children: e, className: t }) {
+function _({ children: t, className: o, dataTestId: e }) {
   const { descriptionId: n } = m();
-  return /* @__PURE__ */ s("p", { id: n, className: f("text-sm text-text-secondary", t), children: e });
+  return /* @__PURE__ */ r("p", { className: f("text-sm text-text-secondary", o), "data-slot": "dialog-description", "data-testid": e, id: n, children: t });
 }
-function _({ children: e, className: t }) {
-  return /* @__PURE__ */ s("div", { className: f("flex flex-col space-y-1.5 text-center text-left", t), children: e });
+function tt({ children: t, className: o, dataTestId: e }) {
+  return /* @__PURE__ */ r("div", { className: f("flex flex-col space-y-1.5 text-center text-left", o), "data-slot": "dialog-header", "data-testid": e, children: t });
 }
-function ee({ children: e, className: t }) {
-  return /* @__PURE__ */ s("div", { className: f("flex flex-col-reverse flex-row justify-end space-x-2", t), children: e });
+function et({ children: t, className: o, dataTestId: e }) {
+  return /* @__PURE__ */ r("div", { className: f("flex flex-col-reverse flex-row justify-end space-x-2", o), "data-slot": "dialog-footer", "data-testid": e, children: t });
 }
 export {
-  J as DialogBase,
-  $ as DialogCloseBase,
-  W as DialogContentBase,
-  Z as DialogDescriptionBase,
-  ee as DialogFooterBase,
-  _ as DialogHeaderBase,
-  Q as DialogOverlayBase,
-  T as DialogPortalBase,
-  Y as DialogTitleBase,
-  K as DialogTriggerBase,
+  Q as DialogBase,
+  M as DialogCloseBase,
+  Y as DialogContentBase,
+  _ as DialogDescriptionBase,
+  et as DialogFooterBase,
+  tt as DialogHeaderBase,
+  X as DialogOverlayBase,
+  P as DialogPortalBase,
+  Z as DialogTitleBase,
+  W as DialogTriggerBase,
   m as useDialogContext
 };

package/dist/Dialog.d.ts

@@ -1,16 +1,16 @@
 import { DialogCloseBase, DialogContentBase, DialogDescriptionBase, DialogFooterBase, DialogHeaderBase, DialogOverlayBase, DialogPortalBase, DialogTitleBase, DialogTriggerBase, DialogBaseProps } from './DialogBase';
 import { ComponentProps } from 'react';
 declare function Dialog({ ...props }: DialogBaseProps): import("react/jsx-runtime").JSX.Element;
-declare function DialogTrigger({ ...props }: ComponentProps<typeof DialogTriggerBase>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger({ dataTestId, ...props }: ComponentProps<typeof DialogTriggerBase>): import("react/jsx-runtime").JSX.Element;
 declare function DialogPortal({ ...props }: ComponentProps<typeof DialogPortalBase>): import("react/jsx-runtime").JSX.Element;
-declare function DialogClose({ ...props }: ComponentProps<typeof DialogCloseBase>): import("react/jsx-runtime").JSX.Element;
-declare function DialogOverlay({ className, ...props }: ComponentProps<typeof DialogOverlayBase>): import("react/jsx-runtime").JSX.Element;
-declare function DialogContent({ className, children, onInteractOutside, onPointerDownOutside, onEscapeKeyDown, ...props }: ComponentProps<typeof DialogContentBase> & {
+declare function DialogClose({ dataTestId, ...props }: ComponentProps<typeof DialogCloseBase>): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({ className, dataTestId, ...props }: ComponentProps<typeof DialogOverlayBase>): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, dataTestId, onInteractOutside, onPointerDownOutside, onEscapeKeyDown, ...props }: ComponentProps<typeof DialogContentBase> & {
     showCloseButton?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-declare function DialogHeader({ className, ...props }: ComponentProps<typeof DialogHeaderBase>): import("react/jsx-runtime").JSX.Element;
-declare function DialogFooter({ className, ...props }: ComponentProps<typeof DialogFooterBase>): import("react/jsx-runtime").JSX.Element;
-declare function DialogTitle({ className, ...props }: ComponentProps<typeof DialogTitleBase>): import("react/jsx-runtime").JSX.Element;
-declare function DialogDescription({ className, ...props }: ComponentProps<typeof DialogDescriptionBase>): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, dataTestId, ...props }: ComponentProps<typeof DialogHeaderBase>): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, dataTestId, ...props }: ComponentProps<typeof DialogFooterBase>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, dataTestId, ...props }: ComponentProps<typeof DialogTitleBase>): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, dataTestId, ...props }: ComponentProps<typeof DialogDescriptionBase>): import("react/jsx-runtime").JSX.Element;
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
 //# sourceMappingURL=Dialog.d.ts.map

package/dist/Dialog.js

@@ -1,68 +1,78 @@
 import "./styles/main.css";
-import { jsx as e, Fragment as s } from "react/jsx-runtime";
-import { DialogBase as d, DialogCloseBase as g, DialogContentBase as c, DialogDescriptionBase as u, DialogFooterBase as f, DialogHeaderBase as m, DialogOverlayBase as D, DialogPortalBase as p, DialogTitleBase as x, DialogTriggerBase as B } from "./Dialog/DialogBase.js";
-import { cn as o } from "./utils/twUtils.js";
+import { jsx as o, Fragment as n } from "react/jsx-runtime";
+import { DialogBase as g, DialogCloseBase as c, DialogContentBase as f, DialogDescriptionBase as u, DialogFooterBase as m, DialogHeaderBase as p, DialogOverlayBase as D, DialogPortalBase as x, DialogTitleBase as T, DialogTriggerBase as B } from "./Dialog/DialogBase.js";
+import { cn as l } from "./utils/twUtils.js";
 import "react";
-function C({ ...a }) {
-  return /* @__PURE__ */ e(d, { "data-slot": "dialog", ...a });
-}
 function h({ ...a }) {
-  return /* @__PURE__ */ e(B, { asChild: !0, "data-slot": "dialog-trigger", ...a });
+  return /* @__PURE__ */ o(g, { "data-slot": "dialog", "data-testid": "spectral-dialog", ...a });
+}
+function v({ dataTestId: a, ...t }) {
+  return /* @__PURE__ */ o(B, { asChild: !0, "data-slot": "dialog-trigger", dataTestId: a || "dialog-trigger", ...t });
 }
-function v({ ...a }) {
-  return /* @__PURE__ */ e(p, { "data-slot": "dialog-portal", ...a });
+function w({ ...a }) {
+  return /* @__PURE__ */ o(x, { "data-slot": "dialog-portal", "data-testid": "dialog-portal", ...a });
 }
-function z({ ...a }) {
-  return /* @__PURE__ */ e(g, { "data-slot": "dialog-close", ...a });
+function C({ dataTestId: a, ...t }) {
+  return /* @__PURE__ */ o(c, { "data-slot": "dialog-close", dataTestId: a || "dialog-close", ...t });
 }
-function T({ className: a, ...t }) {
-  return /* @__PURE__ */ e(D, { "data-slot": "dialog-overlay", className: o("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-bg-primary/50", a), ...t });
+function z({ className: a, dataTestId: t, ...e }) {
+  return /* @__PURE__ */ o(
+    D,
+    {
+      className: l("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-bg-primary/50", a),
+      "data-slot": "dialog-overlay",
+      dataTestId: t || "dialog-overlay",
+      ...e
+    }
+  );
 }
 function F({
   className: a,
   children: t,
-  onInteractOutside: l,
-  onPointerDownOutside: i,
-  onEscapeKeyDown: n,
+  dataTestId: e,
+  onInteractOutside: i,
+  onPointerDownOutside: d,
+  onEscapeKeyDown: s,
   ...r
 }) {
-  return /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(
-    c,
+  return /* @__PURE__ */ o(n, { children: /* @__PURE__ */ o(
+    f,
     {
-      "data-slot": "dialog-content",
-      className: o(
+      className: l(
         "bg-dialog-bg 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg p-6 shadow-lg duration-200 max-w-lg",
         a
       ),
-      onInteractOutside: l,
-      onPointerDownOutside: i,
-      onEscapeKeyDown: n,
+      "data-slot": "dialog-content",
+      dataTestId: e || "dialog-content",
+      onEscapeKeyDown: s,
+      onInteractOutside: i,
+      onPointerDownOutside: d,
       ...r,
       children: t
     }
   ) });
 }
-function j({ className: a, ...t }) {
-  return /* @__PURE__ */ e(m, { "data-slot": "dialog-header", className: o("flex flex-col gap-2 text-center sm:text-left", a), ...t });
+function j({ className: a, dataTestId: t, ...e }) {
+  return /* @__PURE__ */ o(p, { className: l("flex flex-col gap-2 text-center sm:text-left", a), "data-slot": "dialog-header", dataTestId: t || "dialog-header", ...e });
 }
-function H({ className: a, ...t }) {
-  return /* @__PURE__ */ e(f, { "data-slot": "dialog-footer", className: o("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", a), ...t });
+function H({ className: a, dataTestId: t, ...e }) {
+  return /* @__PURE__ */ o(m, { className: l("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", a), "data-slot": "dialog-footer", dataTestId: t || "dialog-footer", ...e });
 }
-function O({ className: a, ...t }) {
-  return /* @__PURE__ */ e(x, { "data-slot": "dialog-title", className: o("text-lg leading-none font-semibold", a), ...t });
+function O({ className: a, dataTestId: t, ...e }) {
+  return /* @__PURE__ */ o(T, { className: l("text-lg leading-none font-semibold", a), "data-slot": "dialog-title", dataTestId: t || "dialog-title", ...e });
 }
-function P({ className: a, ...t }) {
-  return /* @__PURE__ */ e(u, { "data-slot": "dialog-description", className: o("text-muted-foreground text-sm", a), ...t });
+function P({ className: a, dataTestId: t, ...e }) {
+  return /* @__PURE__ */ o(u, { className: l("text-muted-foreground text-sm", a), "data-slot": "dialog-description", dataTestId: t || "dialog-description", ...e });
 }
 export {
-  C as Dialog,
-  z as DialogClose,
+  h as Dialog,
+  C as DialogClose,
   F as DialogContent,
   P as DialogDescription,
   H as DialogFooter,
   j as DialogHeader,
-  T as DialogOverlay,
-  v as DialogPortal,
+  z as DialogOverlay,
+  w as DialogPortal,
   O as DialogTitle,
-  h as DialogTrigger
+  v as DialogTrigger
 };

package/dist/Drawer.js

@@ -1,39 +1,39 @@
 import "./styles/main.css";
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
 import { SpectralProvider as x } from "./SpectralProvider.js";
 import { D as e } from "./index-CAKA12cC.js";
-const f = ({ trigger: l, title: i, description: n, children: p, direction: o = "right", size: r = "380px" }) => {
-  const s = "!font-sans fixed", c = {
+const b = ({ trigger: d, title: o, description: i, children: c, direction: l = "right", size: r = "380px" }) => {
+  const a = "!font-sans fixed", p = {
     left: {
-      className: `${s} top-0 bottom-0 left-0 shadow-[20px_0_20px_rgba(0,0,0,0.4)]`,
+      className: `${a} top-0 bottom-0 left-0 shadow-[20px_0_20px_rgba(0,0,0,0.4)]`,
       style: { width: r }
     },
     right: {
-      className: `${s} top-0 bottom-0 right-0 shadow-[-20px_0_20px_rgba(0,0,0,0.4)]`,
+      className: `${a} top-0 bottom-0 right-0 shadow-[-20px_0_20px_rgba(0,0,0,0.4)]`,
       style: { width: r }
     },
     top: {
-      className: `${s} top-0 left-0 right-0 shadow-[0_20px_20px_rgba(0,0,0,0.4)]`,
+      className: `${a} top-0 left-0 right-0 shadow-[0_20px_20px_rgba(0,0,0,0.4)]`,
       style: { height: r }
     },
     bottom: {
-      className: `${s} bottom-0 left-0 right-0 shadow-[0_-20px_20px_rgba(0,0,0,0.4)]`,
+      className: `${a} bottom-0 left-0 right-0 shadow-[0_-20px_20px_rgba(0,0,0,0.4)]`,
       style: { height: r }
     }
-  }, { className: d, style: m } = c[o];
-  return /* @__PURE__ */ t(x, { children: /* @__PURE__ */ a(e.Root, { direction: o, children: [
-    /* @__PURE__ */ t(e.Trigger, { asChild: !0, children: l }),
-    /* @__PURE__ */ a(e.Portal, { children: [
-      /* @__PURE__ */ t(e.Overlay, { className: "fixed inset-0 bg-transparent" }),
-      /* @__PURE__ */ t(e.Content, { asChild: !0, className: `bg-drawer-bg z-10 flex flex-col outline-none [&_*]:box-border ${d}`, style: m, children: /* @__PURE__ */ a("div", { children: [
+  }, { className: n, style: m } = p[l];
+  return /* @__PURE__ */ t(x, { children: /* @__PURE__ */ s(e.Root, { direction: l, "data-testid": "spectral-drawer", children: [
+    /* @__PURE__ */ t(e.Trigger, { asChild: !0, "data-testid": "spectral-drawer-trigger", children: d }),
+    /* @__PURE__ */ s(e.Portal, { children: [
+      /* @__PURE__ */ t(e.Overlay, { className: "fixed inset-0 bg-transparent", "data-testid": "spectral-drawer-overlay" }),
+      /* @__PURE__ */ t(e.Content, { asChild: !0, className: `bg-drawer-bg z-10 flex flex-col outline-none [&_*]:box-border ${n}`, style: m, "data-testid": "spectral-drawer-content", children: /* @__PURE__ */ s("div", { children: [
         /* @__PURE__ */ t(e.Close, {}),
-        /* @__PURE__ */ t(e.Title, { className: "text-text-primary px-3 pt-4 text-lg font-medium", children: i }),
-        /* @__PURE__ */ t(e.Description, { className: "!text-text-secondary mb-2 px-3 !text-xs uppercase", children: n }),
-        /* @__PURE__ */ t("div", { className: "py-2 px-3 min-w-0 w-auto overflow-hidden [&>*]:min-w-0 [&_*]:min-w-0", children: p })
+        /* @__PURE__ */ t(e.Title, { className: "text-text-primary px-3 pt-4 text-lg font-medium", "data-testid": "spectral-drawer-title", children: o }),
+        /* @__PURE__ */ t(e.Description, { className: "!text-text-secondary mb-2 px-3 !text-xs uppercase", "data-testid": "spectral-drawer-description", children: i }),
+        /* @__PURE__ */ t("div", { className: "py-2 px-3 min-w-0 w-auto overflow-hidden [&>*]:min-w-0 [&_*]:min-w-0", "data-testid": "spectral-drawer-body", children: c })
       ] }) })
     ] })
   ] }) });
 };
 export {
-  f as Drawer
+  b as Drawer
 };

package/dist/HoverCard.d.ts

@@ -3,17 +3,17 @@ import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 type Side = 'top' | 'right' | 'bottom' | 'left';
 type Align = 'start' | 'center' | 'end';
 type HoverCardContentProps = {
-    side?: Side;
-    sideOffset?: number;
     align?: Align;
     alignOffset?: number;
     collisionBoundary?: Element | null | Array<Element | null>;
     collisionPadding?: number | Partial<Record<Side, number>>;
+    side?: Side;
+    sideOffset?: number;
     width?: number | 'w-fit' | 'trigger-width';
 };
 export type HoverCardProps = ComponentProps<typeof HoverCardPrimitive.Root> & HoverCardContentProps;
 export declare const HoverCard: {
-    ({ side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, width, ...props }: HoverCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ align, alignOffset, collisionBoundary, collisionPadding, side, sideOffset, width, ...props }: HoverCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const HoverCardTrigger: {
@@ -21,7 +21,7 @@ export declare const HoverCardTrigger: {
     displayName: string;
 };
 export declare const HoverCardContent: {
-    ({ className, align: alignProp, sideOffset: sideOffsetProp, side: sideProp, width: widthProp, alignOffset: alignOffsetProp, collisionBoundary: collisionBoundaryProp, collisionPadding: collisionPaddingProp, ...props }: ComponentProps<typeof HoverCardPrimitive.Content> & {
+    ({ align: alignProp, alignOffset: alignOffsetProp, className, collisionBoundary: collisionBoundaryProp, collisionPadding: collisionPaddingProp, side: sideProp, sideOffset: sideOffsetProp, width: widthProp, ...props }: ComponentProps<typeof HoverCardPrimitive.Content> & {
         width?: number | "w-fit" | "trigger-width";
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;