@hexdspace/react 0.1.15 → 0.1.17

package/dist/css/component.css

@@ -181,18 +181,22 @@
 
     @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);
         }
     }

package/dist/index.js

@@ -1552,30 +1552,34 @@ 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"
   )
 );
 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,
+  onReady,
+  resetKey
+}) {
   const ref = React2.useRef(null);
   const [height, setHeight] = React2.useState("auto");
+  const readyRef = React2.useRef(false);
+  const resetKeyRef = React2.useRef(resetKey);
   React2.useEffect(() => {
-    if (freeze) {
-      setHeight("auto");
-      return;
-    }
+    if (resetKeyRef.current === resetKey) return;
+    resetKeyRef.current = resetKey;
+    readyRef.current = false;
+  });
+  React2.useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
     const dpr = Math.max(1, Math.round(window.devicePixelRatio || 1));
@@ -1590,6 +1594,12 @@ function AutoHeight({ children, freeze = false }) {
           if (prevNum < 0 || Math.abs(snapped - prevNum) >= 2) return snapped;
           return prev;
         });
+        if (!readyRef.current) {
+          readyRef.current = true;
+          requestAnimationFrame(() => {
+            onReady?.();
+          });
+        }
       });
     });
     ro.observe(el);
@@ -1597,15 +1607,17 @@ function AutoHeight({ children, freeze = false }) {
       ro.disconnect();
       cancelAnimationFrame(raf);
     };
-  }, [freeze]);
+  }, [onReady]);
   return /* @__PURE__ */ jsx7(
     "div",
     {
-      className: cn(
-        "transition-[height] duration-(--motion-med) ease motion-reduce:transition-none",
-        freeze && "transition-none"
-      ),
-      style: { height: height === "auto" ? "auto" : height, overflow: "hidden", willChange: "height" },
+      className: cn("transition-[height] duration-(--motion-med) ease motion-reduce:transition-none"),
+      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 +1644,16 @@ 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 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 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,28 +1672,51 @@ 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(() => {
+      setSurfaceReady(true);
+      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(
+    "dialog-surface relative shell overflow-hidden",
+    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
+  );
   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: cn("DialogOverlay", dialogOverlayClass),
-          style: { zIndex: zIndex - 1 }
-        }
-      ) : null,
+      modal ? /* @__PURE__ */ jsx7(DialogPrimitive.Overlay, { className: overlayClassName, style: { zIndex: zIndex - 1 } }) : null,
       /* @__PURE__ */ jsx7(
         DialogPrimitive.Content,
         {
           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,7 +1729,7 @@ function Dialog({
             if (!dismissible) event.preventDefault();
           },
           ...props,
-          children: /* @__PURE__ */ jsxs3("div", { className: "dialog-surface relative shell overflow-hidden", children: [
+          children: /* @__PURE__ */ jsxs3("div", { className: surfaceClassName, children: [
             showClose ? /* @__PURE__ */ jsx7(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx7(
               Button,
               {
@@ -1708,32 +1740,13 @@ function Dialog({
                 "aria-label": closeLabel
               }
             ) }) : null,
-            /* @__PURE__ */ jsx7(AutoHeight, { freeze: isAnimating, children: /* @__PURE__ */ jsx7(Template, { id: id ?? fallbackId, payload, onResolve: handleResolve }) })
+            /* @__PURE__ */ jsx7(AutoHeight, { onReady: handleAutoHeightReady, resetKey: contentCycle, 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 +1967,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 +2023,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.17",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",