@hexdspace/react 0.1.12 → 0.1.13

package/dist/index.js

@@ -1553,7 +1553,7 @@ var dialogPanelVariants = cva2(
     "w-[min(92vw,var(--dialog-width))]",
     "pointer-events-auto",
     "data-[state=open]:animate-[dialog-fade-in_var(--motion-med)_cubic-bezier(0.16,1,0.3,1)]",
-    "data-[state=closed]:animate-[dialog-fade-out_var(--motion-fast)_cubic-bezier(0.4,0,1,1)]",
+    "data-[state=closed]:animate-[dialog-fade-out_var(--motion-med)_cubic-bezier(0.4,0,1,1)]",
     "motion-reduce:animate-none",
     "data-[state=closed]:pointer-events-none"
   )
@@ -1561,7 +1561,7 @@ var dialogPanelVariants = cva2(
 var dialogOverlayClass = cn(
   "fixed inset-0 bg-[color:var(--overlay)]",
   "data-[state=open]:animate-[dialog-overlay-in_var(--motion-med)_cubic-bezier(0.16,1,0.3,1)]",
-  "data-[state=closed]:animate-[dialog-overlay-out_var(--motion-fast)_cubic-bezier(0.4,0,1,1)]",
+  "data-[state=closed]:animate-[dialog-overlay-out_var(--motion-med)_cubic-bezier(0.4,0,1,1)]",
   "motion-reduce:animate-none",
   "data-[state=closed]:pointer-events-none"
 );
@@ -1662,7 +1662,7 @@ function Dialog({
             "DialogContent",
             dialogPanelVariants(),
             "data-[state=open]:[&_.dialog-surface]:animate-[dialog-surface-in_var(--motion-med)_cubic-bezier(0.16,1,0.3,1)]",
-            "data-[state=closed]:[&_.dialog-surface]:animate-[dialog-surface-out_var(--motion-fast)_cubic-bezier(0.4,0,1,1)]",
+            "data-[state=closed]:[&_.dialog-surface]:animate-[dialog-surface-out_var(--motion-med)_cubic-bezier(0.4,0,1,1)]",
             "motion-reduce:[&_.dialog-surface]:animate-none",
             className
           ),
@@ -1905,13 +1905,52 @@ var dialogController = new DialogController(registry, open, resolve, dismiss, cl
 import { Fragment as Fragment2, jsx as jsx11 } from "react/jsx-runtime";
 var DialogHost = () => {
   const [state, setState] = React3.useState(dialogController.handleGetRegistry().getState());
+  const [closingIds, setClosingIds] = React3.useState(() => /* @__PURE__ */ new Set());
+  const closeTimers = React3.useRef(/* @__PURE__ */ new Map());
+  const [closeDelayMs, setCloseDelayMs] = React3.useState(160);
   React3.useEffect(() => dialogController.handleGetRegistry().subscribe(setState), []);
+  React3.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const raw = getComputedStyle(document.documentElement).getPropertyValue("--motion-fast").trim();
+    const parsed = parseDurationMs(raw);
+    if (parsed) setCloseDelayMs(parsed);
+  }, []);
+  React3.useEffect(() => {
+    return () => {
+      for (const timer of closeTimers.current.values()) {
+        window.clearTimeout(timer);
+      }
+      closeTimers.current.clear();
+    };
+  }, []);
+  const scheduleClose = React3.useCallback(
+    (id, action, result) => {
+      if (closingIds.has(id)) return;
+      setClosingIds((prev) => new Set(prev).add(id));
+      const timer = window.setTimeout(() => {
+        if (action === "resolve") {
+          dialogController.handleResolve(id, result);
+        } else {
+          dialogController.handleDismiss(id);
+        }
+        setClosingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+        closeTimers.current.delete(id);
+      }, closeDelayMs);
+      closeTimers.current.set(id, timer);
+    },
+    [closeDelayMs, closingIds]
+  );
   return /* @__PURE__ */ jsx11(Fragment2, { children: state.stack.map((dialog, index) => {
     const template = getDialogTemplate(dialog.templateKey);
     if (!template) {
       console.error(`Missing dialog template: ${dialog.templateKey}`);
       return null;
     }
+    const isClosing = closingIds.has(dialog.id);
     return /* @__PURE__ */ jsx11(
       Dialog,
       {
@@ -1921,14 +1960,23 @@ var DialogHost = () => {
         modal: dialog.options.modal,
         dismissible: dialog.options.dismissible,
         zIndex: dialog.options.zIndex + index,
-        defaultOpen: true,
-        onResolve: (result) => dialogController.handleResolve(dialog.id, result),
-        onDismiss: () => dialogController.handleDismiss(dialog.id)
+        open: !isClosing,
+        onResolve: (result) => scheduleClose(dialog.id, "resolve", result),
+        onDismiss: () => scheduleClose(dialog.id, "dismiss")
       },
       dialog.id
     );
   }) });
 };
+function parseDurationMs(value) {
+  if (!value) return null;
+  const trimmed = value.trim();
+  const asNumber = Number(trimmed.replace(/ms|s/g, ""));
+  if (Number.isNaN(asNumber)) return null;
+  if (trimmed.endsWith("ms")) return asNumber;
+  if (trimmed.endsWith("s")) return asNumber * 1e3;
+  return asNumber;
+}
 
 // src/feature/dialog/infra/web/react/useDialog.tsx
 import { useMemo as useMemo3 } from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexdspace/react",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",