@almadar/ui 5.122.3 → 5.122.5

package/dist/avl/index.cjs

@@ -5106,6 +5106,77 @@ var init_Dialog = __esm({
     Dialog.displayName = "Dialog";
   }
 });
+function isMotionEnabled() {
+  if (typeof document === "undefined") return true;
+  if (motionEnabledCache !== null) return motionEnabledCache;
+  const v = getComputedStyle(document.documentElement).getPropertyValue("--motion-enable").trim().toLowerCase();
+  motionEnabledCache = v !== "off";
+  return motionEnabledCache;
+}
+function usePresence(show, opts) {
+  const { animation, animate = true, onExited } = opts;
+  const [mounted, setMounted] = React91.useState(show);
+  const [exiting, setExiting] = React91.useState(false);
+  const prev = React91.useRef(show);
+  const onExitedRef = React91.useRef(onExited);
+  onExitedRef.current = onExited;
+  const safeTimer = React91.useRef(null);
+  const clearSafe = React91.useCallback(() => {
+    if (safeTimer.current) {
+      clearTimeout(safeTimer.current);
+      safeTimer.current = null;
+    }
+  }, []);
+  const finishExit = React91.useCallback(() => {
+    clearSafe();
+    setExiting(false);
+    setMounted(false);
+    onExitedRef.current?.();
+  }, [clearSafe]);
+  React91.useLayoutEffect(() => {
+    const moving = animate && isMotionEnabled();
+    if (show && !prev.current) {
+      setExiting(false);
+      setMounted(true);
+    } else if (!show && prev.current) {
+      if (moving) {
+        setExiting(true);
+        clearSafe();
+        safeTimer.current = setTimeout(finishExit, SAFE_EXIT_MS);
+      } else {
+        setMounted(false);
+        setExiting(false);
+      }
+    }
+    prev.current = show;
+  }, [show, animate, clearSafe, finishExit]);
+  React91.useEffect(() => () => clearSafe(), [clearSafe]);
+  const disabled = !animate || !isMotionEnabled();
+  const className = disabled ? "" : exiting ? `animate-${animation}-out` : `animate-${animation}-in`;
+  const onAnimationEnd = React91.useCallback(
+    (e) => {
+      if (e.target !== e.currentTarget) return;
+      if (exiting) finishExit();
+    },
+    [exiting, finishExit]
+  );
+  return { mounted, exiting, className, onAnimationEnd };
+}
+var SAFE_EXIT_MS, motionEnabledCache, Presence;
+var init_Presence = __esm({
+  "components/core/atoms/Presence.tsx"() {
+    "use client";
+    init_cn();
+    SAFE_EXIT_MS = 1e3;
+    motionEnabledCache = null;
+    Presence = ({ show, className, children, ...opts }) => {
+      const { mounted, className: animClass, onAnimationEnd } = usePresence(show, opts);
+      if (!mounted) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(animClass, className), onAnimationEnd, children });
+    };
+    Presence.displayName = "Presence";
+  }
+});
 var sizeClasses2, minWidthClasses, lookStyles, Modal;
 var init_Modal = __esm({
   "components/core/molecules/Modal.tsx"() {
@@ -5116,6 +5187,7 @@ var init_Modal = __esm({
     init_Typography();
     init_cn();
     init_useEventBus();
+    init_Presence();
     sizeClasses2 = {
       sm: "max-w-md",
       md: "max-w-2xl",
@@ -5160,18 +5232,10 @@ var init_Modal = __esm({
       const [dragY, setDragY] = React91.useState(0);
       const dragStartY = React91.useRef(0);
       const isDragging = React91.useRef(false);
-      const [closing, setClosing] = React91.useState(false);
-      const wasOpenRef = React91.useRef(isOpen);
-      React91.useEffect(() => {
-        if (wasOpenRef.current && !isOpen) setClosing(true);
-        wasOpenRef.current = isOpen;
-      }, [isOpen]);
-      const handleAnimEnd = (e) => {
-        if (closing && e.target === e.currentTarget) {
-          setClosing(false);
-          onExited?.();
-        }
-      };
+      const { mounted, exiting, onAnimationEnd: handleAnimEnd } = usePresence(isOpen, {
+        animation: "modal",
+        onExited
+      });
       React91.useEffect(() => {
         if (isOpen) {
           previousActiveElement.current = document.activeElement;
@@ -5206,10 +5270,9 @@ var init_Modal = __esm({
         };
       }, [isOpen]);
       if (typeof document === "undefined") return null;
-      const renderOpen = isOpen || closing;
-      if (!renderOpen) return null;
-      const dialogAnim = closing ? "animate-modal-out" : "animate-modal-in";
-      const overlayAnim = closing ? "animate-overlay-out" : "animate-overlay-in";
+      if (!mounted) return null;
+      const dialogAnim = exiting ? "animate-modal-out" : "animate-modal-in";
+      const overlayAnim = exiting ? "animate-overlay-out" : "animate-overlay-in";
       const handleClose = () => {
         if (closeEvent) eventBus.emit(`UI:${closeEvent}`, {});
         onClose();
@@ -5340,77 +5403,6 @@ var init_Modal = __esm({
     Modal.displayName = "Modal";
   }
 });
-function isMotionEnabled() {
-  if (typeof document === "undefined") return true;
-  if (motionEnabledCache !== null) return motionEnabledCache;
-  const v = getComputedStyle(document.documentElement).getPropertyValue("--motion-enable").trim().toLowerCase();
-  motionEnabledCache = v !== "off";
-  return motionEnabledCache;
-}
-function usePresence(show, opts) {
-  const { animation, animate = true, onExited } = opts;
-  const [mounted, setMounted] = React91.useState(show);
-  const [exiting, setExiting] = React91.useState(false);
-  const prev = React91.useRef(show);
-  const onExitedRef = React91.useRef(onExited);
-  onExitedRef.current = onExited;
-  const safeTimer = React91.useRef(null);
-  const clearSafe = React91.useCallback(() => {
-    if (safeTimer.current) {
-      clearTimeout(safeTimer.current);
-      safeTimer.current = null;
-    }
-  }, []);
-  const finishExit = React91.useCallback(() => {
-    clearSafe();
-    setExiting(false);
-    setMounted(false);
-    onExitedRef.current?.();
-  }, [clearSafe]);
-  React91.useEffect(() => {
-    const moving = animate && isMotionEnabled();
-    if (show && !prev.current) {
-      setExiting(false);
-      setMounted(true);
-    } else if (!show && prev.current) {
-      if (moving) {
-        setExiting(true);
-        clearSafe();
-        safeTimer.current = setTimeout(finishExit, SAFE_EXIT_MS);
-      } else {
-        setMounted(false);
-        setExiting(false);
-      }
-    }
-    prev.current = show;
-  }, [show, animate, clearSafe, finishExit]);
-  React91.useEffect(() => () => clearSafe(), [clearSafe]);
-  const disabled = !animate || !isMotionEnabled();
-  const className = disabled ? "" : exiting ? `animate-${animation}-out` : `animate-${animation}-in`;
-  const onAnimationEnd = React91.useCallback(
-    (e) => {
-      if (e.target !== e.currentTarget) return;
-      if (exiting) finishExit();
-    },
-    [exiting, finishExit]
-  );
-  return { mounted, exiting, className, onAnimationEnd };
-}
-var SAFE_EXIT_MS, motionEnabledCache, Presence;
-var init_Presence = __esm({
-  "components/core/atoms/Presence.tsx"() {
-    "use client";
-    init_cn();
-    SAFE_EXIT_MS = 1e3;
-    motionEnabledCache = null;
-    Presence = ({ show, className, children, ...opts }) => {
-      const { mounted, className: animClass, onAnimationEnd } = usePresence(show, opts);
-      if (!mounted) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(animClass, className), onAnimationEnd, children });
-    };
-    Presence.displayName = "Presence";
-  }
-});
 var Overlay;
 var init_Overlay = __esm({
   "components/core/atoms/Overlay.tsx"() {

package/dist/avl/index.js

@@ -5060,6 +5060,77 @@ var init_Dialog = __esm({
     Dialog.displayName = "Dialog";
   }
 });
+function isMotionEnabled() {
+  if (typeof document === "undefined") return true;
+  if (motionEnabledCache !== null) return motionEnabledCache;
+  const v = getComputedStyle(document.documentElement).getPropertyValue("--motion-enable").trim().toLowerCase();
+  motionEnabledCache = v !== "off";
+  return motionEnabledCache;
+}
+function usePresence(show, opts) {
+  const { animation, animate = true, onExited } = opts;
+  const [mounted, setMounted] = useState(show);
+  const [exiting, setExiting] = useState(false);
+  const prev = useRef(show);
+  const onExitedRef = useRef(onExited);
+  onExitedRef.current = onExited;
+  const safeTimer = useRef(null);
+  const clearSafe = useCallback(() => {
+    if (safeTimer.current) {
+      clearTimeout(safeTimer.current);
+      safeTimer.current = null;
+    }
+  }, []);
+  const finishExit = useCallback(() => {
+    clearSafe();
+    setExiting(false);
+    setMounted(false);
+    onExitedRef.current?.();
+  }, [clearSafe]);
+  useLayoutEffect(() => {
+    const moving = animate && isMotionEnabled();
+    if (show && !prev.current) {
+      setExiting(false);
+      setMounted(true);
+    } else if (!show && prev.current) {
+      if (moving) {
+        setExiting(true);
+        clearSafe();
+        safeTimer.current = setTimeout(finishExit, SAFE_EXIT_MS);
+      } else {
+        setMounted(false);
+        setExiting(false);
+      }
+    }
+    prev.current = show;
+  }, [show, animate, clearSafe, finishExit]);
+  useEffect(() => () => clearSafe(), [clearSafe]);
+  const disabled = !animate || !isMotionEnabled();
+  const className = disabled ? "" : exiting ? `animate-${animation}-out` : `animate-${animation}-in`;
+  const onAnimationEnd = useCallback(
+    (e) => {
+      if (e.target !== e.currentTarget) return;
+      if (exiting) finishExit();
+    },
+    [exiting, finishExit]
+  );
+  return { mounted, exiting, className, onAnimationEnd };
+}
+var SAFE_EXIT_MS, motionEnabledCache, Presence;
+var init_Presence = __esm({
+  "components/core/atoms/Presence.tsx"() {
+    "use client";
+    init_cn();
+    SAFE_EXIT_MS = 1e3;
+    motionEnabledCache = null;
+    Presence = ({ show, className, children, ...opts }) => {
+      const { mounted, className: animClass, onAnimationEnd } = usePresence(show, opts);
+      if (!mounted) return null;
+      return /* @__PURE__ */ jsx("div", { className: cn(animClass, className), onAnimationEnd, children });
+    };
+    Presence.displayName = "Presence";
+  }
+});
 var sizeClasses2, minWidthClasses, lookStyles, Modal;
 var init_Modal = __esm({
   "components/core/molecules/Modal.tsx"() {
@@ -5070,6 +5141,7 @@ var init_Modal = __esm({
     init_Typography();
     init_cn();
     init_useEventBus();
+    init_Presence();
     sizeClasses2 = {
       sm: "max-w-md",
       md: "max-w-2xl",
@@ -5114,18 +5186,10 @@ var init_Modal = __esm({
       const [dragY, setDragY] = useState(0);
       const dragStartY = useRef(0);
       const isDragging = useRef(false);
-      const [closing, setClosing] = useState(false);
-      const wasOpenRef = useRef(isOpen);
-      useEffect(() => {
-        if (wasOpenRef.current && !isOpen) setClosing(true);
-        wasOpenRef.current = isOpen;
-      }, [isOpen]);
-      const handleAnimEnd = (e) => {
-        if (closing && e.target === e.currentTarget) {
-          setClosing(false);
-          onExited?.();
-        }
-      };
+      const { mounted, exiting, onAnimationEnd: handleAnimEnd } = usePresence(isOpen, {
+        animation: "modal",
+        onExited
+      });
       useEffect(() => {
         if (isOpen) {
           previousActiveElement.current = document.activeElement;
@@ -5160,10 +5224,9 @@ var init_Modal = __esm({
         };
       }, [isOpen]);
       if (typeof document === "undefined") return null;
-      const renderOpen = isOpen || closing;
-      if (!renderOpen) return null;
-      const dialogAnim = closing ? "animate-modal-out" : "animate-modal-in";
-      const overlayAnim = closing ? "animate-overlay-out" : "animate-overlay-in";
+      if (!mounted) return null;
+      const dialogAnim = exiting ? "animate-modal-out" : "animate-modal-in";
+      const overlayAnim = exiting ? "animate-overlay-out" : "animate-overlay-in";
       const handleClose = () => {
         if (closeEvent) eventBus.emit(`UI:${closeEvent}`, {});
         onClose();
@@ -5294,77 +5357,6 @@ var init_Modal = __esm({
     Modal.displayName = "Modal";
   }
 });
-function isMotionEnabled() {
-  if (typeof document === "undefined") return true;
-  if (motionEnabledCache !== null) return motionEnabledCache;
-  const v = getComputedStyle(document.documentElement).getPropertyValue("--motion-enable").trim().toLowerCase();
-  motionEnabledCache = v !== "off";
-  return motionEnabledCache;
-}
-function usePresence(show, opts) {
-  const { animation, animate = true, onExited } = opts;
-  const [mounted, setMounted] = useState(show);
-  const [exiting, setExiting] = useState(false);
-  const prev = useRef(show);
-  const onExitedRef = useRef(onExited);
-  onExitedRef.current = onExited;
-  const safeTimer = useRef(null);
-  const clearSafe = useCallback(() => {
-    if (safeTimer.current) {
-      clearTimeout(safeTimer.current);
-      safeTimer.current = null;
-    }
-  }, []);
-  const finishExit = useCallback(() => {
-    clearSafe();
-    setExiting(false);
-    setMounted(false);
-    onExitedRef.current?.();
-  }, [clearSafe]);
-  useEffect(() => {
-    const moving = animate && isMotionEnabled();
-    if (show && !prev.current) {
-      setExiting(false);
-      setMounted(true);
-    } else if (!show && prev.current) {
-      if (moving) {
-        setExiting(true);
-        clearSafe();
-        safeTimer.current = setTimeout(finishExit, SAFE_EXIT_MS);
-      } else {
-        setMounted(false);
-        setExiting(false);
-      }
-    }
-    prev.current = show;
-  }, [show, animate, clearSafe, finishExit]);
-  useEffect(() => () => clearSafe(), [clearSafe]);
-  const disabled = !animate || !isMotionEnabled();
-  const className = disabled ? "" : exiting ? `animate-${animation}-out` : `animate-${animation}-in`;
-  const onAnimationEnd = useCallback(
-    (e) => {
-      if (e.target !== e.currentTarget) return;
-      if (exiting) finishExit();
-    },
-    [exiting, finishExit]
-  );
-  return { mounted, exiting, className, onAnimationEnd };
-}
-var SAFE_EXIT_MS, motionEnabledCache, Presence;
-var init_Presence = __esm({
-  "components/core/atoms/Presence.tsx"() {
-    "use client";
-    init_cn();
-    SAFE_EXIT_MS = 1e3;
-    motionEnabledCache = null;
-    Presence = ({ show, className, children, ...opts }) => {
-      const { mounted, className: animClass, onAnimationEnd } = usePresence(show, opts);
-      if (!mounted) return null;
-      return /* @__PURE__ */ jsx("div", { className: cn(animClass, className), onAnimationEnd, children });
-    };
-    Presence.displayName = "Presence";
-  }
-});
 var Overlay;
 var init_Overlay = __esm({
   "components/core/atoms/Overlay.tsx"() {

package/dist/components/index.cjs

@@ -4122,7 +4122,7 @@ function usePresence(show, opts) {
     setMounted(false);
     onExitedRef.current?.();
   }, [clearSafe]);
-  React74.useEffect(() => {
+  React74.useLayoutEffect(() => {
     const moving = animate && isMotionEnabled();
     if (show && !prev.current) {
       setExiting(false);
@@ -6122,6 +6122,7 @@ var init_Modal = __esm({
     init_Typography();
     init_cn();
     init_useEventBus();
+    init_Presence();
     sizeClasses6 = {
       sm: "max-w-md",
       md: "max-w-2xl",
@@ -6166,18 +6167,10 @@ var init_Modal = __esm({
       const [dragY, setDragY] = React74.useState(0);
       const dragStartY = React74.useRef(0);
       const isDragging = React74.useRef(false);
-      const [closing, setClosing] = React74.useState(false);
-      const wasOpenRef = React74.useRef(isOpen);
-      React74.useEffect(() => {
-        if (wasOpenRef.current && !isOpen) setClosing(true);
-        wasOpenRef.current = isOpen;
-      }, [isOpen]);
-      const handleAnimEnd = (e) => {
-        if (closing && e.target === e.currentTarget) {
-          setClosing(false);
-          onExited?.();
-        }
-      };
+      const { mounted, exiting, onAnimationEnd: handleAnimEnd } = usePresence(isOpen, {
+        animation: "modal",
+        onExited
+      });
       React74.useEffect(() => {
         if (isOpen) {
           previousActiveElement.current = document.activeElement;
@@ -6212,10 +6205,9 @@ var init_Modal = __esm({
         };
       }, [isOpen]);
       if (typeof document === "undefined") return null;
-      const renderOpen = isOpen || closing;
-      if (!renderOpen) return null;
-      const dialogAnim = closing ? "animate-modal-out" : "animate-modal-in";
-      const overlayAnim = closing ? "animate-overlay-out" : "animate-overlay-in";
+      if (!mounted) return null;
+      const dialogAnim = exiting ? "animate-modal-out" : "animate-modal-in";
+      const overlayAnim = exiting ? "animate-overlay-out" : "animate-overlay-in";
       const handleClose = () => {
         if (closeEvent) eventBus.emit(`UI:${closeEvent}`, {});
         onClose();

package/dist/components/index.d.cts

@@ -6389,7 +6389,7 @@ interface DataGridProps extends DataDndProps {
      */
     look?: "dense" | "spacious" | "striped" | "borderless" | "card-rows";
 }
-declare function DataGrid({ entity, fields, columns, itemActions, maxInlineActions, scrollX, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataGridProps): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
+declare function DataGrid({ entity, fields, columns, itemActions, maxInlineActions, scrollX, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataGridProps): string | number | bigint | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | null | undefined;
 declare namespace DataGrid {
     var displayName: string;
 }
@@ -6516,7 +6516,7 @@ interface DataListProps extends DataDndProps {
      */
     look?: "dense" | "spacious" | "striped" | "borderless" | "card-rows";
 }
-declare function DataList({ entity, fields, columns, itemActions, maxInlineActions, itemClickEvent, gap, variant, groupBy, senderField, currentUser, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataListProps): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
+declare function DataList({ entity, fields, columns, itemActions, maxInlineActions, itemClickEvent, gap, variant, groupBy, senderField, currentUser, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataListProps): string | number | bigint | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | null | undefined;
 declare namespace DataList {
     var displayName: string;
 }

package/dist/components/index.d.ts

@@ -6389,7 +6389,7 @@ interface DataGridProps extends DataDndProps {
      */
     look?: "dense" | "spacious" | "striped" | "borderless" | "card-rows";
 }
-declare function DataGrid({ entity, fields, columns, itemActions, maxInlineActions, scrollX, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataGridProps): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
+declare function DataGrid({ entity, fields, columns, itemActions, maxInlineActions, scrollX, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataGridProps): string | number | bigint | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | null | undefined;
 declare namespace DataGrid {
     var displayName: string;
 }
@@ -6516,7 +6516,7 @@ interface DataListProps extends DataDndProps {
      */
     look?: "dense" | "spacious" | "striped" | "borderless" | "card-rows";
 }
-declare function DataList({ entity, fields, columns, itemActions, maxInlineActions, itemClickEvent, gap, variant, groupBy, senderField, currentUser, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataListProps): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
+declare function DataList({ entity, fields, columns, itemActions, maxInlineActions, itemClickEvent, gap, variant, groupBy, senderField, currentUser, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataListProps): string | number | bigint | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | null | undefined;
 declare namespace DataList {
     var displayName: string;
 }

package/dist/components/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React74 from 'react';
-import React74__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, useState, Suspense, lazy, useSyncExternalStore, useLayoutEffect, useId } from 'react';
+import React74__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, useState, useLayoutEffect, Suspense, lazy, useSyncExternalStore, useId } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { EventBusContext, useTraitScopeChain, useCurrentPagePath, useGameAudioContextOptional, useEntitySchemaOptional, TraitScopeProvider } from '@almadar/ui/providers';
@@ -4077,7 +4077,7 @@ function usePresence(show, opts) {
     setMounted(false);
     onExitedRef.current?.();
   }, [clearSafe]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     const moving = animate && isMotionEnabled();
     if (show && !prev.current) {
       setExiting(false);
@@ -6077,6 +6077,7 @@ var init_Modal = __esm({
     init_Typography();
     init_cn();
     init_useEventBus();
+    init_Presence();
     sizeClasses6 = {
       sm: "max-w-md",
       md: "max-w-2xl",
@@ -6121,18 +6122,10 @@ var init_Modal = __esm({
       const [dragY, setDragY] = useState(0);
       const dragStartY = useRef(0);
       const isDragging = useRef(false);
-      const [closing, setClosing] = useState(false);
-      const wasOpenRef = useRef(isOpen);
-      useEffect(() => {
-        if (wasOpenRef.current && !isOpen) setClosing(true);
-        wasOpenRef.current = isOpen;
-      }, [isOpen]);
-      const handleAnimEnd = (e) => {
-        if (closing && e.target === e.currentTarget) {
-          setClosing(false);
-          onExited?.();
-        }
-      };
+      const { mounted, exiting, onAnimationEnd: handleAnimEnd } = usePresence(isOpen, {
+        animation: "modal",
+        onExited
+      });
       useEffect(() => {
         if (isOpen) {
           previousActiveElement.current = document.activeElement;
@@ -6167,10 +6160,9 @@ var init_Modal = __esm({
         };
       }, [isOpen]);
       if (typeof document === "undefined") return null;
-      const renderOpen = isOpen || closing;
-      if (!renderOpen) return null;
-      const dialogAnim = closing ? "animate-modal-out" : "animate-modal-in";
-      const overlayAnim = closing ? "animate-overlay-out" : "animate-overlay-in";
+      if (!mounted) return null;
+      const dialogAnim = exiting ? "animate-modal-out" : "animate-modal-in";
+      const overlayAnim = exiting ? "animate-overlay-out" : "animate-overlay-in";
       const handleClose = () => {
         if (closeEvent) eventBus.emit(`UI:${closeEvent}`, {});
         onClose();