@hexdspace/react 0.1.18 → 0.1.19

package/dist/index.js

@@ -1542,26 +1542,20 @@ Button.displayName = "Button";
 
 // src/ui/components/dialog/Dialog.tsx
 import { cva as cva2 } from "class-variance-authority";
+import { AnimatePresence, motion } from "motion/react";
 import { XIcon } from "lucide-react";
 import { Dialog as DialogPrimitive } from "radix-ui";
 import * as React2 from "react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var dialogPanelVariants = cva2(
   cn(
     "fixed left-1/2 top-1/2",
     "-translate-x-1/2 -translate-y-1/2",
     "w-[min(92vw,var(--dialog-width))]",
-    "pointer-events-auto",
-    "data-[state=open]:transition-opacity duration-[var(--motion-med)]",
-    "data-[state=closed]:animate-[dialog-fade-out_var(--motion-med)]",
-    "data-[state=closed]:pointer-events-none"
+    "pointer-events-auto"
   )
 );
-var dialogOverlayClass = cn(
-  "fixed inset-0 bg-[color:var(--overlay)]",
-  "data-[state=closed]:animate-[dialog-overlay-out_var(--motion-med)_cubic-bezier(0.2,0,0.2,1)]",
-  "data-[state=closed]:pointer-events-none"
-);
+var dialogOverlayClass = cn("fixed inset-0 bg-[color:var(--overlay)]");
 var dialogSurfaceVariants = cva2("dialog-surface relative overflow-hidden", {
   variants: {
     chrome: {
@@ -1597,7 +1591,8 @@ function DialogContent({ className, ...props }) {
 function AutoHeight({
   children,
   onReady,
-  resetKey
+  resetKey,
+  durationSeconds
 }) {
   const ref = React2.useRef(null);
   const [height, setHeight] = React2.useState("auto");
@@ -1638,11 +1633,12 @@ function AutoHeight({
     };
   }, [onReady]);
   return /* @__PURE__ */ jsx7(
-    "div",
+    motion.div,
     {
-      className: cn("transition-[height] duration-(--motion-med) ease"),
+      animate: { height: height === "auto" ? "auto" : height },
+      initial: false,
+      transition: { duration: durationSeconds, ease: "easeOut" },
       style: {
-        height: height === "auto" ? "auto" : height,
         maxHeight: "calc(100vh - 4rem)",
         overflow: "auto",
         willChange: "height"
@@ -1651,6 +1647,28 @@ function AutoHeight({
     }
   );
 }
+function parseCssTimeSeconds(value) {
+  if (!value) return null;
+  if (value.endsWith("ms")) {
+    const numeric = Number.parseFloat(value);
+    return Number.isFinite(numeric) ? numeric / 1e3 : null;
+  }
+  if (value.endsWith("s")) {
+    const numeric = Number.parseFloat(value);
+    return Number.isFinite(numeric) ? numeric : null;
+  }
+  return null;
+}
+function useMotionDuration(varName, fallbackSeconds) {
+  const [duration, setDuration] = React2.useState(fallbackSeconds);
+  React2.useLayoutEffect(() => {
+    if (typeof window === "undefined") return;
+    const value = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+    const parsed = parseCssTimeSeconds(value);
+    if (parsed !== null) setDuration(parsed);
+  }, [varName]);
+  return duration;
+}
 function Dialog({
   id,
   template,
@@ -1682,6 +1700,7 @@ function Dialog({
   const [surfaceReady, setSurfaceReady] = React2.useState(false);
   const [overlayReady, setOverlayReady] = React2.useState(false);
   const Template = template;
+  const motionDuration = useMotionDuration("--motion-fast", 0.16);
   const handleOpenChange = (nextOpen) => {
     if (!isControlled) setUncontrolledOpen(nextOpen);
     onOpenChange?.(nextOpen);
@@ -1711,10 +1730,6 @@ function Dialog({
       setOverlayReady(false);
       return;
     }
-    if (!isOpen && wasOpen) {
-      setSurfaceReady(false);
-      setOverlayReady(false);
-    }
   }, [isOpen]);
   const handleAutoHeightReady = React2.useCallback(() => {
     if (!isOpen) return;
@@ -1723,35 +1738,38 @@ function Dialog({
       setOverlayReady(true);
     });
   }, [isOpen]);
-  const overlayClassName = cn(
-    "DialogOverlay",
-    dialogOverlayClass,
-    isOpen && !overlayReady ? "opacity-0" : null,
-    overlayReady ? "animate-[dialog-overlay-in_var(--motion-med)_cubic-bezier(0.2,0,0.2,1)] [animation-fill-mode:both]" : null
-  );
-  const surfaceClassName = cn(
-    dialogSurfaceVariants({ chrome }),
-    isOpen && !surfaceReady ? "opacity-0 translate-y-5" : null,
-    surfaceReady ? "animate-[dialog-surface-in_var(--motion-med)_cubic-bezier(0.16,1,0.3,1)] [animation-fill-mode:both]" : null
-  );
+  const overlayClassName = cn("DialogOverlay", dialogOverlayClass);
+  const surfaceClassName = cn(dialogSurfaceVariants({ chrome }));
   return /* @__PURE__ */ jsxs3(DialogPrimitive.Root, { open: open2, defaultOpen, onOpenChange: handleOpenChange, modal, children: [
     trigger ? /* @__PURE__ */ jsx7(DialogPrimitive.Trigger, { asChild: true, children: trigger }) : null,
-    /* @__PURE__ */ jsxs3(DialogPrimitive.Portal, { children: [
-      modal ? /* @__PURE__ */ jsx7(DialogPrimitive.Overlay, { className: overlayClassName, style: { zIndex: zIndex - 1 } }) : null,
+    /* @__PURE__ */ jsx7(DialogPrimitive.Portal, { forceMount: true, children: /* @__PURE__ */ jsx7(AnimatePresence, { children: isOpen ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      modal ? /* @__PURE__ */ jsx7(DialogPrimitive.Overlay, { forceMount: true, asChild: true, children: /* @__PURE__ */ jsx7(
+        motion.div,
+        {
+          className: overlayClassName,
+          style: { zIndex: zIndex - 1 },
+          variants: {
+            open: {
+              opacity: 1,
+              pointerEvents: "auto",
+              transition: { duration: motionDuration, ease: "easeOut" }
+            },
+            closed: {
+              opacity: 0,
+              pointerEvents: "none",
+              transition: { duration: motionDuration, ease: "easeOut" }
+            }
+          },
+          initial: "closed",
+          animate: overlayReady ? "open" : "closed",
+          exit: "closed"
+        }
+      ) }) : null,
       /* @__PURE__ */ jsx7(
         DialogPrimitive.Content,
         {
-          className: cn(
-            "DialogContent",
-            dialogPanelVariants(),
-            "data-[state=closed]:[&_.dialog-surface]:animate-[dialog-surface-out_var(--motion-med)_cubic-bezier(0.4,0,1,1)]",
-            className
-          ),
-          style: {
-            ...style,
-            zIndex,
-            "--dialog-width": `${maxWidthPx}px`
-          },
+          forceMount: true,
+          asChild: true,
           onInteractOutside: (event) => {
             if (!dismissible) event.preventDefault();
           },
@@ -1759,22 +1777,85 @@ function Dialog({
             if (!dismissible) event.preventDefault();
           },
           ...props,
-          children: /* @__PURE__ */ jsxs3("div", { className: surfaceClassName, style: { willChange: "transform" }, children: [
-            showClose ? /* @__PURE__ */ jsx7(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx7(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                leftIcon: /* @__PURE__ */ jsx7(XIcon, { className: "w-5 h-5" }),
-                className: "absolute right-2 top-2 z-10 rounded-full",
-                "aria-label": closeLabel
-              }
-            ) }) : null,
-            /* @__PURE__ */ jsx7(AutoHeight, { onReady: handleAutoHeightReady, resetKey: contentCycle, children: /* @__PURE__ */ jsx7(Template, { id: id ?? fallbackId, payload, onResolve: handleResolve }) })
-          ] })
+          children: /* @__PURE__ */ jsx7(
+            motion.div,
+            {
+              className: cn("DialogContent", dialogPanelVariants(), className),
+              style: {
+                ...style,
+                zIndex,
+                "--dialog-width": `${maxWidthPx}px`
+              },
+              variants: {
+                open: {
+                  opacity: 1,
+                  pointerEvents: "auto",
+                  transition: { duration: motionDuration, ease: "easeOut" }
+                },
+                closed: {
+                  opacity: 0,
+                  pointerEvents: "none",
+                  transition: { duration: motionDuration, ease: "easeIn" }
+                }
+              },
+              initial: "open",
+              animate: "open",
+              exit: "closed",
+              children: /* @__PURE__ */ jsxs3(
+                motion.div,
+                {
+                  className: surfaceClassName,
+                  style: { willChange: "transform" },
+                  variants: {
+                    open: {
+                      opacity: 1,
+                      y: 0,
+                      transition: { duration: motionDuration, ease: "easeOut" }
+                    },
+                    closed: {
+                      opacity: 0,
+                      y: 20,
+                      transition: { duration: motionDuration, ease: "easeIn" }
+                    }
+                  },
+                  initial: "closed",
+                  animate: surfaceReady ? "open" : "closed",
+                  exit: "closed",
+                  children: [
+                    showClose ? /* @__PURE__ */ jsx7(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx7(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "icon",
+                        leftIcon: /* @__PURE__ */ jsx7(XIcon, { className: "w-5 h-5" }),
+                        className: "absolute right-2 top-2 z-10 rounded-full",
+                        "aria-label": closeLabel
+                      }
+                    ) }) : null,
+                    /* @__PURE__ */ jsx7(
+                      AutoHeight,
+                      {
+                        onReady: handleAutoHeightReady,
+                        resetKey: contentCycle,
+                        durationSeconds: motionDuration,
+                        children: /* @__PURE__ */ jsx7(
+                          Template,
+                          {
+                            id: id ?? fallbackId,
+                            payload,
+                            onResolve: handleResolve
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
         }
       )
-    ] })
+    ] }) : null }) })
   ] });
 }
 
@@ -1987,7 +2068,7 @@ var closeTop = new CloseTopUseCase(registry);
 var dialogController = new DialogController(registry, open, resolve, dismiss, closeTop);
 
 // src/feature/dialog/infra/web/react/DialogHost.tsx
-import { Fragment as Fragment2, jsx as jsx11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, 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());
@@ -2029,7 +2110,7 @@ var DialogHost = () => {
     },
     [closeDelayMs, closingIds]
   );
-  return /* @__PURE__ */ jsx11(Fragment2, { children: state.stack.map((dialog, index) => {
+  return /* @__PURE__ */ jsx11(Fragment3, { children: state.stack.map((dialog, index) => {
     const template = getDialogTemplate(dialog.templateKey);
     if (!template) {
       console.error(`Missing dialog template: ${dialog.templateKey}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexdspace/react",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,6 +29,7 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "motion": "^12.23.26",
     "tailwind-merge": "^3.4.0",
     "uuid": "^13.0.0",
     "@hexdspace/util": "0.0.25"
@@ -37,7 +38,7 @@
     "@tanstack/react-query": "^5.90.11",
     "lucide-react": "^0.555.0",
     "radix-ui": "^1.4.3",
-    "react": "^19.2.3",
+    "react": "^20.2.3",
     "react-dom": "^19.2.3",
     "react-router-dom": "^7.10.1",
     "react-toastify": "^11.0.5"