@hexdspace/react 0.1.18 → 0.1.20

package/dist/css/component.css

@@ -143,64 +143,6 @@
         }
     }
 
-    @keyframes dialog-overlay-in {
-        from {
-            opacity: 0;
-        }
-        to {
-            opacity: 1;
-        }
-    }
-
-    @keyframes dialog-overlay-out {
-        from {
-            opacity: 1;
-        }
-        to {
-            opacity: 0;
-        }
-    }
-
-    @keyframes dialog-fade-in {
-        from {
-            opacity: 0;
-        }
-        to {
-            opacity: 1;
-        }
-    }
-
-    @keyframes dialog-fade-out {
-        from {
-            opacity: 1;
-        }
-        to {
-            opacity: 0;
-        }
-    }
-
-    @keyframes dialog-surface-in {
-        from {
-            opacity: 0;
-            transform: translateY(1.25rem);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-
-    @keyframes dialog-surface-out {
-        from {
-            opacity: 1;
-            transform: translateY(0);
-        }
-        to {
-            opacity: 0;
-            transform: translateY(1.25rem);
-        }
-    }
-
     :root .prose code {
         background: rgba(0, 0, 0, 0.08);
         padding: 3px 3px 0;

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: {
@@ -1592,12 +1586,13 @@ var dialogSurfaceVariants = cva2("dialog-surface relative overflow-hidden", {
   }
 });
 function DialogContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx7("div", { className: cn("DialogContent p-6", className), ...props });
+  return /* @__PURE__ */ jsx7("div", { className: cn("p-6", 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,
@@ -1677,11 +1695,10 @@ function Dialog({
   const isControlled = open2 !== void 0;
   const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(defaultOpen ?? false);
   const isOpen = isControlled ? open2 : uncontrolledOpen;
-  const prevOpenRef = React2.useRef(false);
-  const [contentCycle, setContentCycle] = React2.useState(0);
   const [surfaceReady, setSurfaceReady] = React2.useState(false);
   const [overlayReady, setOverlayReady] = React2.useState(false);
   const Template = template;
+  const motionDuration = useMotionDuration("--motion-med", 0.16);
   const handleOpenChange = (nextOpen) => {
     if (!isControlled) setUncontrolledOpen(nextOpen);
     onOpenChange?.(nextOpen);
@@ -1702,20 +1719,6 @@ function Dialog({
     },
     [onResolve]
   );
-  React2.useEffect(() => {
-    const wasOpen = prevOpenRef.current;
-    prevOpenRef.current = Boolean(isOpen);
-    if (isOpen && !wasOpen) {
-      setContentCycle((value) => value + 1);
-      setSurfaceReady(false);
-      setOverlayReady(false);
-      return;
-    }
-    if (!isOpen && wasOpen) {
-      setSurfaceReady(false);
-      setOverlayReady(false);
-    }
-  }, [isOpen]);
   const handleAutoHeightReady = React2.useCallback(() => {
     if (!isOpen) return;
     requestAnimationFrame(() => {
@@ -1723,35 +1726,30 @@ 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(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 +1757,68 @@ 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(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,
+                        durationSeconds: motionDuration,
+                        children: /* @__PURE__ */ jsx7(
+                          Template,
+                          {
+                            id: id ?? fallbackId,
+                            payload,
+                            onResolve: handleResolve
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
         }
       )
-    ] })
+    ] }) : null }) })
   ] });
 }
 
@@ -1801,6 +1845,7 @@ var CustomDialog = (props) => {
   const p = props.payload ?? { children: /* @__PURE__ */ jsx9("div", { children: "Empty custom dialog" }) };
   return /* @__PURE__ */ jsxs5(DialogContent, { children: [
     /* @__PURE__ */ jsx9(DialogPrimitive3.Title, { className: "sr-only", children: p.title ?? "Dialog" }),
+    /* @__PURE__ */ jsx9(DialogPrimitive3.Description, { "aria-describedby": void 0 }),
     p.children
   ] });
 };
@@ -1987,7 +2032,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 +2074,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.20",
   "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"