@hexdspace/react 0.1.15 → 0.1.16

package/dist/index.js

@@ -1552,9 +1552,8 @@ var dialogPanelVariants = cva2(
     "-translate-x-1/2 -translate-y-1/2",
     "w-[min(92vw,var(--dialog-width))]",
     "pointer-events-auto",
-    "data-[state=open]:animate-[dialog-fade-in_var(--motion-med)_cubic-bezier(0.2,0,0.2,1)]",
-    "data-[state=closed]:animate-[dialog-fade-out_var(--motion-med)_cubic-bezier(0.2,0,0.2,1)]",
-    "motion-reduce:animate-none",
+    "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"
   )
 );
@@ -1562,20 +1561,15 @@ var dialogOverlayClass = cn(
   "fixed inset-0 bg-[color:var(--overlay)]",
   "data-[state=open]:animate-[dialog-overlay-in_var(--motion-med)_cubic-bezier(0.2,0,0.2,1)]",
   "data-[state=closed]:animate-[dialog-overlay-out_var(--motion-med)_cubic-bezier(0.2,0,0.2,1)]",
-  "motion-reduce:animate-none",
   "data-[state=closed]:pointer-events-none"
 );
 function DialogContent({ className, ...props }) {
   return /* @__PURE__ */ jsx7("div", { className: cn("DialogContent p-6", className), ...props });
 }
-function AutoHeight({ children, freeze = false }) {
+function AutoHeight({ children }) {
   const ref = React2.useRef(null);
   const [height, setHeight] = React2.useState("auto");
-  React2.useEffect(() => {
-    if (freeze) {
-      setHeight("auto");
-      return;
-    }
+  React2.useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
     const dpr = Math.max(1, Math.round(window.devicePixelRatio || 1));
@@ -1597,15 +1591,19 @@ function AutoHeight({ children, freeze = false }) {
       ro.disconnect();
       cancelAnimationFrame(raf);
     };
-  }, [freeze]);
+  }, []);
   return /* @__PURE__ */ jsx7(
     "div",
     {
       className: cn(
-        "transition-[height] duration-(--motion-med) ease motion-reduce:transition-none",
-        freeze && "transition-none"
+        "transition-[height] duration-(--motion-med) ease motion-reduce:transition-none"
       ),
-      style: { height: height === "auto" ? "auto" : height, overflow: "hidden", willChange: "height" },
+      style: {
+        height: height === "auto" ? "auto" : height,
+        maxHeight: "calc(100vh - 4rem)",
+        overflow: "auto",
+        willChange: "height"
+      },
       children: /* @__PURE__ */ jsx7("div", { ref, style: { boxSizing: "border-box" }, children })
     }
   );
@@ -1632,19 +1630,14 @@ function Dialog({
 }) {
   const fallbackId = React2.useId();
   const resolvedRef = React2.useRef(false);
-  const [isAnimating, setIsAnimating] = React2.useState(false);
-  const animationTimer = React2.useRef(null);
-  const motionMs = useMotionDurationMs("--motion-med", 160);
+  const rafRef = React2.useRef(null);
+  const isControlled = open2 !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(defaultOpen ?? false);
+  const currentOpen = isControlled ? open2 : uncontrolledOpen;
+  const [animateSurface, setAnimateSurface] = React2.useState(false);
   const Template = template;
   const handleOpenChange = (nextOpen) => {
-    if (typeof window !== "undefined") {
-      if (animationTimer.current) window.clearTimeout(animationTimer.current);
-      setIsAnimating(true);
-      animationTimer.current = window.setTimeout(() => {
-        setIsAnimating(false);
-        animationTimer.current = null;
-      }, motionMs);
-    }
+    if (!isControlled) setUncontrolledOpen(nextOpen);
     onOpenChange?.(nextOpen);
     if (nextOpen) {
       resolvedRef.current = false;
@@ -1663,6 +1656,25 @@ function Dialog({
     },
     [onResolve]
   );
+  React2.useEffect(() => {
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    if (!currentOpen) {
+      setAnimateSurface(false);
+      return;
+    }
+    setAnimateSurface(false);
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = requestAnimationFrame(() => {
+        setAnimateSurface(true);
+      });
+    });
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [currentOpen]);
   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: [
@@ -1679,12 +1691,9 @@ function Dialog({
           className: cn(
             "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-med)_cubic-bezier(0.4,0,1,1)]",
-            "motion-reduce:[&_.dialog-surface]:animate-none",
             className
           ),
-          "aria-describedby": void 0,
           style: {
             ...style,
             zIndex,
@@ -1697,43 +1706,34 @@ function Dialog({
             if (!dismissible) event.preventDefault();
           },
           ...props,
-          children: /* @__PURE__ */ jsxs3("div", { className: "dialog-surface relative shell overflow-hidden", 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, { freeze: isAnimating, children: /* @__PURE__ */ jsx7(Template, { id: id ?? fallbackId, payload, onResolve: handleResolve }) })
-          ] })
+          children: /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              className: cn(
+                "dialog-surface relative shell overflow-hidden",
+                currentOpen && !animateSurface ? "opacity-0 translate-y-5" : null,
+                animateSurface ? "animate-[dialog-surface-in_var(--motion-med)_cubic-bezier(0.16,1,0.3,1)]" : null
+              ),
+              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, { children: /* @__PURE__ */ jsx7(Template, { id: id ?? fallbackId, payload, onResolve: handleResolve }) })
+              ]
+            }
+          )
         }
       )
     ] })
   ] });
 }
-function useMotionDurationMs(token, fallback) {
-  const [ms, setMs] = React2.useState(fallback);
-  React2.useEffect(() => {
-    if (typeof window === "undefined") return;
-    const raw = getComputedStyle(document.documentElement).getPropertyValue(token).trim();
-    const parsed = parseDurationMs(raw);
-    if (parsed !== null) setMs(parsed);
-  }, [token]);
-  return ms;
-}
-function parseDurationMs(value) {
-  if (!value) return null;
-  const trimmed = value.trim();
-  const numeric = Number(trimmed.replace(/ms|s/g, ""));
-  if (Number.isNaN(numeric)) return null;
-  if (trimmed.endsWith("ms")) return numeric;
-  if (trimmed.endsWith("s")) return numeric * 1e3;
-  return numeric;
-}
 
 // src/ui/components/dialog/dialog-variant/ConfirmDialog.tsx
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -1954,7 +1954,7 @@ var DialogHost = () => {
   React3.useEffect(() => {
     if (typeof window === "undefined") return;
     const raw = getComputedStyle(document.documentElement).getPropertyValue("--motion-fast").trim();
-    const parsed = parseDurationMs2(raw);
+    const parsed = parseDurationMs(raw);
     if (parsed) setCloseDelayMs(parsed);
   }, []);
   React3.useEffect(() => {
@@ -2010,7 +2010,7 @@ var DialogHost = () => {
     );
   }) });
 };
-function parseDurationMs2(value) {
+function parseDurationMs(value) {
   if (!value) return null;
   const trimmed = value.trim();
   const asNumber = Number(trimmed.replace(/ms|s/g, ""));

package/package.json

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