@spear-ai/spectral 1.3.63 → 1.3.64

package/dist/Button.js

@@ -4,23 +4,28 @@ import { jsxs as s, jsx as o } from "react/jsx-runtime";
 import { cn as u } from "./utils/twUtils.js";
 import { c as y } from "./index-D29mdTf5.js";
 import { forwardRef as h } from "react";
-import { L as f } from "./loader-circle-CvdzOiQ_.js";
-const N = y(
+import { L as f } from "./loader-circle-CdRVlFhN.js";
+const w = y(
   `
-    !font-sans flex relative items-center justify-center gap-2 whitespace-nowrap transition-colors cursor-pointer rounded-lg border font-semibold disabled:pointer-events-none
-    focus:outline-none focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
+    !font-sans flex relative items-center justify-center gap-2 whitespace-nowrap transition-colors cursor-pointer rounded-lg border font-semibold focus:outline-none focus:outline-none
+    focus-visible:outline-1 focus-visible:outline-offset-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
   `,
   {
     variants: {
       variant: {
-        primary: "bg-button-primary-bg text-button-primary-text border-button-primary-border hover:bg-button-primary-bg--hover hover:text-button-primary-text--hover hover:border-button-primary-border--hover focus-visible:outline-button-primary-border disabled:bg-button-primary-bg--disabled disabled:text-button-primary-text--disabled disabled:border-button-primary-border--disabled",
-        secondary: "bg-button-secondary-bg border-button-secondary-border text-button-secondary-text hover:bg-button-secondary-bg--hover hover:text-button-secondary-text--hover focus-visible:outline-button-secondary-border disabled:bg-button-secondary-bg--disabled disabled:text-button-secondary-text--disabled disabled:border-button-secondary-border--disabled",
-        outline: "bg-button-outline-bg border-button-outline-border text-button-outline-text hover:bg-button-outline-bg--hover hover:text-button-outline-text--hover focus-visible:outline-button-outline-border disabled:text-button-outline-text--disabled disabled:border-button-outline-border--disabled",
-        ghost: "bg-button-ghost-bg border-none text-button-ghost-text hover:bg-button-ghost-bg--hover hover:text-button-ghost-text--hover focus-visible:outline-none disabled:text-button-ghost-text--disabled"
+        primary: `bg-button-primary-bg text-button-primary-text border-button-primary-border hover:bg-button-primary-bg--hover hover:text-button-primary-text--hover hover:border-button-primary-border--hover
+          focus-visible:outline-button-primary-border disabled:bg-button-primary-bg--disabled disabled:text-button-primary-text--disabled disabled:border-button-primary-border--disabled`,
+        secondary: `bg-button-secondary-bg border-button-secondary-border text-button-secondary-text hover:bg-button-secondary-bg--hover hover:text-button-secondary-text--hover
+          focus-visible:outline-button-secondary-border disabled:bg-button-secondary-bg--disabled disabled:text-button-secondary-text--disabled disabled:border-button-secondary-border--disabled`,
+        outline: `bg-button-outline-bg border-button-outline-border text-button-outline-text hover:bg-button-outline-bg--hover hover:text-button-outline-text--hover focus-visible:outline-button-outline-border
+          disabled:text-button-outline-text--disabled disabled:border-button-outline-border--disabled`,
+        ghost: "bg-button-ghost-bg border-none text-button-ghost-text hover:bg-button-ghost-bg--hover hover:text-button-ghost-text--hover focus-visible:outline-none disabled:text-button-ghost-text--disabled",
+        card: "bg-button-card-bg border-button-card-border"
       },
       size: {
         default: "py-2 px-6 w-fit",
-        fullWidth: "py-2 px-6 w-full"
+        fullWidth: "py-2 px-6 w-full",
+        card: "py-2 px-3 w-fit"
       },
       state: {
         default: "",
@@ -34,38 +39,40 @@ const N = y(
       size: "default"
     }
   }
-), w = h(
+), N = h(
   ({
     className: l,
     dataTestId: g,
     disabled: n,
     endIcon: b,
-    errorMessage: i,
+    errorMessage: d,
     label: p,
     size: r,
-    startIcon: d,
+    startIcon: a,
     state: t,
-    type: x = "button",
+    type: c = "button",
     variant: e,
-    ...c
+    ...x
   }, v) => {
-    const a = {
+    const i = {
       error: {
         primary: "bg-button-danger border-button-danger text-button-primary-text pointer-events-none",
         secondary: "bg-button-danger border-button-danger text-button-secondary-text pointer-events-none",
         outline: "bg-transparent border-button-danger text-button-danger pointer-events-none",
-        ghost: "bg-transparent text-button-danger pointer-events-none"
+        ghost: "bg-transparent text-button-danger pointer-events-none",
+        card: "bg-transparent border-button-danger text-button-danger pointer-events-none"
       },
       loading: {
         primary: "bg-button-primary-bg--disabled border-button-primary-border--disabled text-button-primary-text--disabled pointer-events-none",
         secondary: "bg-button-secondary-bg--disabled border-button-secondary-border--disabled text-button-secondary-text--disabled pointer-events-none",
         outline: "bg-button-outline-bg--disabled border-button-outline-border--disabled text-button-outline-text--disabled pointer-events-none",
-        ghost: "bg-transparent text-button-ghost-text--disabled pointer-events-none"
+        ghost: "bg-transparent text-button-ghost-text--disabled pointer-events-none",
+        card: "bg-button-card-bg--disabled border-button-card-border--disabled text-button-card-text--disabled pointer-events-none"
       }
     }, m = u(
-      N({ variant: e, state: t, size: r }),
-      t === "error" && a.error[e || "primary"],
-      t === "loading" && a.loading[e || "primary"],
+      w({ variant: e, state: t, size: r }),
+      t === "error" && i.error[e || "primary"],
+      t === "loading" && i.loading[e || "primary"],
       r,
       l
     );
@@ -79,21 +86,21 @@ const N = y(
           "data-testid": g || `button-${e}`,
           disabled: n,
           ref: v,
-          type: x,
-          ...c,
+          type: c,
+          ...x,
           children: [
-            d && /* @__PURE__ */ o("span", { className: "flex pr-2", "aria-hidden": !0, children: d }),
+            a && /* @__PURE__ */ o("span", { className: "flex pr-2", "aria-hidden": !0, children: a }),
             t === "loading" && /* @__PURE__ */ o(f, { className: "ml-2 animate-spin", size: 16 }),
             b && t !== "loading" && /* @__PURE__ */ o("span", { className: "flex pl-2", "aria-hidden": !0, children: b }),
             p
           ]
         }
       ),
-      t === "error" && i && /* @__PURE__ */ o("p", { className: "text-danger-100 mt-2 text-xs", role: "alert", "aria-live": "assertive", children: i })
+      t === "error" && d && /* @__PURE__ */ o("p", { className: "text-danger-100 mt-2 text-xs", role: "alert", "aria-live": "assertive", children: d })
     ] });
   }
 );
-w.displayName = "Button";
+N.displayName = "Button";
 export {
-  w as Button
+  N as Button
 };

package/dist/ButtonIcon.js

@@ -1,7 +1,9 @@
 "use client";
 import "./styles/main.css";
 import { jsx as a } from "react/jsx-runtime";
+import "./Icons/AnalyzeIcon.js";
 import "./Icons/AnnotationsIcon.js";
+import "./Icons/ApprovedIcon.js";
 import "./Icons/CalendarIcon.js";
 import "./Icons/CheckCircleIcon.js";
 import "./Icons/CheckSquareIcon.js";
@@ -12,6 +14,7 @@ import "./Icons/ClockIcon.js";
 import "./Icons/CloseCircleIcon.js";
 import "./Icons/CloseIcon.js";
 import "./Icons/DashboardIcon.js";
+import "./Icons/DatabaseIcon.js";
 import "./Icons/DeleteIcon.js";
 import "./Icons/DurationIcon.js";
 import "./Icons/EmailIcon.js";
@@ -27,6 +30,7 @@ import "./Icons/InfoIcon.js";
 import "./Icons/LabelIcon.js";
 import "./Icons/LassoIcon.js";
 import "./Icons/LineToolIcon.js";
+import "./Icons/LineToolIcon2.js";
 import "./Icons/LiveViewIcon.js";
 import { LoaderIcon as N } from "./Icons/LoaderIcon.js";
 import "./Icons/LocationIcon.js";
@@ -40,8 +44,13 @@ import "./Icons/PanelIconOpen.js";
 import "./Icons/PlayIcon.js";
 import "./Icons/PlusIcon.js";
 import "./Icons/ResetIcon.js";
+import "./Icons/ReviewedIcon.js";
 import "./Icons/ScissorsIcon.js";
 import "./Icons/SettingsIcon.js";
+import "./Icons/SortAscendingIcon.js";
+import "./Icons/SortDescendingIcon.js";
+import "./Icons/StackIcon.js";
+import "./Icons/StarIcon.js";
 import "./Icons/TrashIcon.js";
 import "./Icons/UndoIcon.js";
 import "./Icons/UserIcon.js";

package/dist/Card.d.ts

@@ -0,0 +1,16 @@
+import { VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
+export type CardProps = ComponentProps<'div'> & VariantProps<typeof cardVariants> & {
+    asChild?: boolean;
+};
+declare const cardVariants: (props?: ({
+    variant?: "small" | "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const CardBase: ({ ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardHeader: ({ className, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardTitle: ({ className, asChild, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardHeaderEndSlot: ({ className, asChild, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardContent: ({ className, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ className, variant, asChild, children, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Card.d.ts.map

package/dist/Card.js

@@ -0,0 +1,32 @@
+import "./styles/main.css";
+import { jsx as r } from "react/jsx-runtime";
+import { Slot as n } from "./primitives/slot.js";
+import { cn as o } from "./utils/twUtils.js";
+import { c } from "./index-D29mdTf5.js";
+import "react";
+const l = c("text-text-primary flex flex-col w-full card-effects p-3", {
+  variants: {
+    variant: {
+      default: "gap-6 rounded-xl content-card",
+      small: "data-card gap-2"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), v = ({ ...a }) => /* @__PURE__ */ r("div", { "data-slot": "card", ...a }), x = ({ className: a, ...t }) => /* @__PURE__ */ r(
+  "div",
+  {
+    "data-slot": "card-header",
+    className: o("@container/card-header flex items-center justify-between pb-4", a),
+    ...t
+  }
+), N = ({ className: a, asChild: t = !1, ...e }) => /* @__PURE__ */ r(t ? n : "div", { "data-slot": "card-title", className: o("text-xl leading-none font-semibold", a), ...e }), b = ({ className: a, asChild: t = !1, ...e }) => /* @__PURE__ */ r(t ? n : "div", { "data-slot": "card-action", className: o("justify-self-end", a), ...e }), g = ({ className: a, ...t }) => /* @__PURE__ */ r("div", { "data-slot": "card-content", className: a, ...t }), j = ({ className: a, variant: t, asChild: e = !1, children: d, ...s }) => /* @__PURE__ */ r(e ? n : "div", { "data-slot": "card", className: o(l({ variant: t }), a), ...s, children: d });
+export {
+  j as Card,
+  v as CardBase,
+  g as CardContent,
+  x as CardHeader,
+  b as CardHeaderEndSlot,
+  N as CardTitle
+};

package/dist/Checkbox.js

@@ -2,7 +2,9 @@
 import "./styles/main.css";
 import { jsxs as d, jsx as o } from "react/jsx-runtime";
 import { CheckboxBase as l, CheckboxIndicator as b } from "./Checkbox/CheckboxBase.js";
+import "./Icons/AnalyzeIcon.js";
 import "./Icons/AnnotationsIcon.js";
+import "./Icons/ApprovedIcon.js";
 import "./Icons/CalendarIcon.js";
 import "./Icons/CheckCircleIcon.js";
 import "./Icons/CheckSquareIcon.js";
@@ -13,6 +15,7 @@ import "./Icons/ClockIcon.js";
 import "./Icons/CloseCircleIcon.js";
 import "./Icons/CloseIcon.js";
 import "./Icons/DashboardIcon.js";
+import "./Icons/DatabaseIcon.js";
 import "./Icons/DeleteIcon.js";
 import "./Icons/DurationIcon.js";
 import "./Icons/EmailIcon.js";
@@ -28,6 +31,7 @@ import "./Icons/InfoIcon.js";
 import "./Icons/LabelIcon.js";
 import "./Icons/LassoIcon.js";
 import "./Icons/LineToolIcon.js";
+import "./Icons/LineToolIcon2.js";
 import "./Icons/LiveViewIcon.js";
 import "./Icons/LoaderIcon.js";
 import "./Icons/LocationIcon.js";
@@ -41,8 +45,13 @@ import "./Icons/PanelIconOpen.js";
 import "./Icons/PlayIcon.js";
 import "./Icons/PlusIcon.js";
 import "./Icons/ResetIcon.js";
+import "./Icons/ReviewedIcon.js";
 import "./Icons/ScissorsIcon.js";
 import "./Icons/SettingsIcon.js";
+import "./Icons/SortAscendingIcon.js";
+import "./Icons/SortDescendingIcon.js";
+import "./Icons/StackIcon.js";
+import "./Icons/StarIcon.js";
 import "./Icons/TrashIcon.js";
 import "./Icons/UndoIcon.js";
 import "./Icons/UserIcon.js";
@@ -53,7 +62,7 @@ import "./Icons/ZoomYIcon.js";
 import { cn as t } from "./utils/twUtils.js";
 import { forwardRef as x } from "react";
 const k = x(
-  ({ className: e, id: r, labelText: i, onCheckedChange: m, checked: c, required: p, ...a }, s) => /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
+  ({ className: i, id: r, labelText: e, onCheckedChange: m, checked: p, required: c, ...a }, s) => /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ o(
       l,
       {
@@ -63,12 +72,12 @@ const k = x(
             "focus-visible:outline-checkbox-border--focus focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-2 disabled:cursor-not-allowed",
             "data-[state=checked]:border-checkbox-border--checked disabled:opacity-50"
           ].join(" "),
-          e
+          i
         ),
         "data-testid": "checkbox",
         id: r,
         "aria-labelledby": `${r}-label`,
-        "aria-required": p,
+        "aria-required": c,
         onCheckedChange: m,
         ref: s,
         ...a,
@@ -76,7 +85,7 @@ const k = x(
           b,
           {
             className: t("checkbox-indicator text-checkbox-indicator--checked flex items-center justify-center"),
-            children: c === "indeterminate" ? /* @__PURE__ */ o(h, { className: "checkbox-indeterminate", size: 16, strokeWidth: 4 }) : /* @__PURE__ */ o(n, { className: "checkbox-check", size: 16, strokeWidth: 4 })
+            children: p === "indeterminate" ? /* @__PURE__ */ o(h, { className: "checkbox-indeterminate", size: 16, strokeWidth: 4 }) : /* @__PURE__ */ o(n, { className: "checkbox-check", size: 16, strokeWidth: 4 })
           }
         )
       }
@@ -87,7 +96,7 @@ const k = x(
         htmlFor: r,
         className: "text-md text-text-primary peer-disabled:text-neutral-400",
         "data-testid": "checkbox-label",
-        children: i
+        children: e
       }
     )
   ] })

package/dist/Dialog/DialogBase.d.ts

@@ -5,6 +5,7 @@ export type DialogBaseProps = {
     readonly defaultOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     readonly children: ReactNode;
+    readonly modal?: boolean;
 };
 export type DialogContextValue = {
     isOpen: boolean;
@@ -12,12 +13,13 @@ export type DialogContextValue = {
     contentId: string;
     titleId: string;
     descriptionId: string;
+    modal: boolean;
 };
 export type TriggerableElement = ReactElement<{
     onClick?: (...args: unknown[]) => void;
 }>;
 export declare function useDialogContext(): DialogContextValue;
-export declare function DialogBase({ isOpen: controlledOpen, defaultOpen, onOpenChange, children }: DialogBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogBase({ isOpen: controlledOpen, defaultOpen, onOpenChange, children, modal, }: DialogBaseProps): import("react/jsx-runtime").JSX.Element;
 type DialogTriggerProps = {
     readonly children: ReactNode;
     readonly asChild?: boolean;
@@ -46,9 +48,10 @@ export type DialogContentProps = {
     className?: string;
     readonly size?: DialogSize;
     onPointerDownOutside?: (event: PointerEvent) => void;
+    onInteractOutside?: (event: PointerEvent | KeyboardEvent) => void;
     onEscapeKeyDown?: (event: KeyboardEvent) => void;
 } & VariantProps<typeof contentVariants>;
-export declare function DialogContentBase({ children, className, size, onPointerDownOutside, onEscapeKeyDown, }: DialogContentProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function DialogContentBase({ children, className, size, onPointerDownOutside, onInteractOutside, onEscapeKeyDown, }: DialogContentProps): import("react/jsx-runtime").JSX.Element | null;
 type DialogTitleProps = {
     readonly children: ReactNode;
     className?: string;

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 { cn as d } from "../utils/twUtils.js";
-import { c as B } from "../index-D29mdTf5.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;