@spear-ai/spectral 1.3.62 → 1.3.64

package/dist/Dialog/DialogBase.js

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

package/dist/Dialog.d.ts

@@ -5,7 +5,7 @@ declare function DialogTrigger({ ...props }: ComponentProps<typeof DialogTrigger
 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, ...props }: ComponentProps<typeof DialogContentBase> & {
+declare function DialogContent({ className, children, 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;

package/dist/Dialog.js

@@ -1,23 +1,23 @@
 import "./styles/main.css";
-import { jsx as e, Fragment as i } from "react/jsx-runtime";
-import { DialogBase as n, DialogCloseBase as s, DialogContentBase as r, DialogDescriptionBase as d, DialogFooterBase as g, DialogHeaderBase as c, DialogOverlayBase as u, DialogPortalBase as f, DialogTitleBase as m, DialogTriggerBase as D } from "./Dialog/DialogBase.js";
-import { c as o } from "./twUtils-CRiPKpXj.js";
+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 "react";
-function N({ ...a }) {
-  return /* @__PURE__ */ e(n, { "data-slot": "dialog", ...a });
+function C({ ...a }) {
+  return /* @__PURE__ */ e(d, { "data-slot": "dialog", ...a });
 }
-function b({ ...a }) {
-  return /* @__PURE__ */ e(D, { asChild: !0, "data-slot": "dialog-trigger", ...a });
+function h({ ...a }) {
+  return /* @__PURE__ */ e(B, { asChild: !0, "data-slot": "dialog-trigger", ...a });
 }
-function w({ ...a }) {
-  return /* @__PURE__ */ e(f, { "data-slot": "dialog-portal", ...a });
+function v({ ...a }) {
+  return /* @__PURE__ */ e(p, { "data-slot": "dialog-portal", ...a });
 }
-function C({ ...a }) {
-  return /* @__PURE__ */ e(s, { "data-slot": "dialog-close", ...a });
+function z({ ...a }) {
+  return /* @__PURE__ */ e(g, { "data-slot": "dialog-close", ...a });
 }
-function h({ className: a, ...t }) {
+function T({ className: a, ...t }) {
   return /* @__PURE__ */ e(
-    u,
+    D,
     {
       "data-slot": "dialog-overlay",
       className: o(
@@ -28,27 +28,33 @@ function h({ className: a, ...t }) {
     }
   );
 }
-function v({
+function F({
   className: a,
   children: t,
-  ...l
+  onInteractOutside: l,
+  onPointerDownOutside: i,
+  onEscapeKeyDown: n,
+  ...r
 }) {
-  return /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(
-    r,
+  return /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(
+    c,
     {
       "data-slot": "dialog-content",
       className: o(
         "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)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg p-6 shadow-lg duration-200",
         a
       ),
-      ...l,
+      onInteractOutside: l,
+      onPointerDownOutside: i,
+      onEscapeKeyDown: n,
+      ...r,
       children: t
     }
   ) });
 }
-function z({ className: a, ...t }) {
+function j({ className: a, ...t }) {
   return /* @__PURE__ */ e(
-    c,
+    m,
     {
       "data-slot": "dialog-header",
       className: o("flex flex-col gap-2 text-center sm:text-left", a),
@@ -56,9 +62,9 @@ function z({ className: a, ...t }) {
     }
   );
 }
-function T({ className: a, ...t }) {
+function H({ className: a, ...t }) {
   return /* @__PURE__ */ e(
-    g,
+    f,
     {
       "data-slot": "dialog-footer",
       className: o("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", a),
@@ -66,9 +72,9 @@ function T({ className: a, ...t }) {
     }
   );
 }
-function F({ className: a, ...t }) {
+function O({ className: a, ...t }) {
   return /* @__PURE__ */ e(
-    m,
+    x,
     {
       "data-slot": "dialog-title",
       className: o("text-lg leading-none font-semibold", a),
@@ -76,9 +82,9 @@ function F({ className: a, ...t }) {
     }
   );
 }
-function j({ className: a, ...t }) {
+function P({ className: a, ...t }) {
   return /* @__PURE__ */ e(
-    d,
+    u,
     {
       "data-slot": "dialog-description",
       className: o("text-muted-foreground text-sm", a),
@@ -87,14 +93,14 @@ function j({ className: a, ...t }) {
   );
 }
 export {
-  N as Dialog,
-  C as DialogClose,
-  v as DialogContent,
-  j as DialogDescription,
-  T as DialogFooter,
-  z as DialogHeader,
-  h as DialogOverlay,
-  w as DialogPortal,
-  F as DialogTitle,
-  b as DialogTrigger
+  C as Dialog,
+  z as DialogClose,
+  F as DialogContent,
+  P as DialogDescription,
+  H as DialogFooter,
+  j as DialogHeader,
+  T as DialogOverlay,
+  v as DialogPortal,
+  O as DialogTitle,
+  h as DialogTrigger
 };