@xanui/core 1.3.0 → 1.3.2

package/Transition/index.cjs

@@ -2,18 +2,20 @@
 'use strict';
 
 var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var variants = require('./variants.cjs');
-var useTransition = require('../hooks/useTransition.cjs');
 var easing = require('../animate/easing.cjs');
+var useTransition = require('../hooks/useTransition.cjs');
 
-function Transition(_a) {
+function TransitionBase(_a) {
     var { children } = _a, options = tslib.__rest(_a, ["children"]);
-    let { open, variant = "fade", duration = 450, delay, easing: easing$1, exitOnUnmount = false, initialTransition = false, onEnter, onEntered, onExit, onExited, onUpdate, onDone, } = options;
+    let { open, variant = "fade", duration = 450, delay, easing: easing$1, exitOnUnmount = false, initialTransition = true, onEnter, onEntered, onExit, onExited, onUpdate, onDone, } = options;
     easing$1 !== null && easing$1 !== void 0 ? easing$1 : (easing$1 = "default");
     const variantCb = variants[variant];
     const ref = React.useRef(null);
     const init = React.useRef(false);
+    const rect = React.useRef(null);
     const trans = useTransition({
         delay,
         duration,
@@ -24,20 +26,28 @@ function Transition(_a) {
         onExited,
         onDone,
         from: () => {
-            const v = variantCb(ref.current);
+            var _a;
+            if (!rect.current) {
+                rect.current = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            }
+            const v = variantCb(ref.current, rect.current);
             return v.from;
         },
         to: () => {
-            const v = variantCb(ref.current);
+            var _a;
+            if (!rect.current) {
+                rect.current = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            }
+            const v = variantCb(ref.current, rect.current);
             return v.to;
         },
         onUpdate: (val, prograss) => {
-            if (!ref.current)
-                throw new Error("Invalid Transition Element");
-            const vc = variantCb(ref.current);
+            if (!ref.current || !rect.current)
+                return;
+            const vc = variantCb(ref.current, rect.current);
             onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(val, prograss);
             return vc.onUpdate(val);
-        }
+        },
     });
     React.useLayoutEffect(() => {
         const isnot = !init.current && !initialTransition;
@@ -72,6 +82,9 @@ function Transition(_a) {
         }
     });
 }
+const Transition = (props) => {
+    return (jsxRuntime.jsx(TransitionBase, Object.assign({}, props), props.variant));
+};
 
 module.exports = Transition;
 //# sourceMappingURL=index.cjs.map

package/Transition/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useRef, isValidElement, useLayoutEffect } from 'react';\nimport * as variants from './variants'\nimport useTransition from '../hooks/useTransition';\nimport { Easing } from '../animate';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionProps = {\n    children: React.ReactElement;\n    open: boolean;\n    variant: TransitionVariantTypes\n    easing?: keyof typeof Easing\n    duration?: number;\n    delay?: number;\n    initialTransition?: boolean;\n\n    exitOnUnmount?: boolean;\n\n    onEnter?: () => void\n    onEntered?: () => void\n    onExit?: () => void\n    onExited?: () => void\n    onUpdate?: (value: Record<string, number>, progress: number) => void;\n    onDone?: () => void;\n}\n\n\nfunction Transition({ children, ...options }: TransitionProps) {\n    let {\n        open,\n        variant = \"fade\",\n        duration = 450,\n        delay,\n        easing,\n        exitOnUnmount = false,\n        initialTransition = false,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        onUpdate,\n        onDone,\n\n    } = options\n\n    easing ??= \"default\"\n\n    const variantCb = variants[variant]\n    const ref = useRef<HTMLElement>(null)\n    const init = useRef(false)\n\n    const trans = useTransition({\n        delay,\n        duration,\n        easing: Easing[easing],\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        onDone,\n        from: () => {\n            const v = variantCb(ref.current as HTMLElement)\n            return v.from\n        },\n        to: () => {\n            const v = variantCb(ref.current as HTMLElement)\n            return v.to\n        },\n        onUpdate: (val, prograss) => {\n            if (!ref.current) throw new Error(\"Invalid Transition Element\");\n            const vc = variantCb(ref.current)\n            onUpdate?.(val, prograss)\n            return vc.onUpdate(val)\n        }\n    })\n\n\n    useLayoutEffect(() => {\n        const isnot = !init.current && !initialTransition\n        init.current = true\n        if (open) {\n            trans.enter(isnot ? false : true)\n        } else {\n            trans.exit(isnot ? false : true)\n        }\n    }, [open])\n\n    if (exitOnUnmount && trans.status === \"exited\") return\n\n    const childs = Children.toArray(children)\n    if (childs.length !== 1) {\n        throw new Error(\"Transition expects exactly one child.\");\n    }\n    const child = childs[0]\n    if (!isValidElement(child)) {\n        throw new Error(\"Transition expects a valid React element.\");\n    }\n\n    return cloneElement(child, {\n        ref: (node: HTMLElement) => {\n            ref.current = node;\n\n            const childRef = (child as any).ref;\n            if (typeof childRef === \"function\") {\n                childRef(node);\n            } else if (childRef) {\n                childRef.current = node;\n            }\n        }\n    } as any);\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;;AA2BA;AAAoB;AAChB;;AAmBA;AACA;AACA;;;;AAKI;;;;;;;;;;;;;;AAcA;;AACsB;;;AAGlB;;AAEP;;;AAKG;;AAEI;;;AAEA;;AAER;AAEA;;;AAGA;AACI;;AAEJ;AACA;AACI;;;AAIA;AACI;AAEA;AACA;;;;AAGI;;;AAGJ;AACZ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useRef, isValidElement, useLayoutEffect } from 'react';\nimport * as variants from './variants'\nimport { Easing } from '../animate';\nimport useTransition from '../hooks/useTransition';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionProps = {\n    children: React.ReactElement;\n    open: boolean;\n    variant: TransitionVariantTypes\n    easing?: keyof typeof Easing\n    duration?: number;\n    delay?: number;\n    initialTransition?: boolean;\n\n    exitOnUnmount?: boolean;\n\n    onEnter?: () => void\n    onEntered?: () => void\n    onExit?: () => void\n    onExited?: () => void\n    onUpdate?: (value: Record<string, number>, progress: number) => void;\n    onDone?: () => void;\n}\n\n\nfunction TransitionBase({ children, ...options }: TransitionProps) {\n    let {\n        open,\n        variant = \"fade\",\n        duration = 450,\n        delay,\n        easing,\n        exitOnUnmount = false,\n        initialTransition = true,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        onUpdate,\n        onDone,\n\n    } = options\n\n    easing ??= \"default\"\n\n    const variantCb = variants[variant]\n    const ref = useRef<HTMLElement>(null)\n    const init = useRef(false)\n    const rect = useRef<DOMRect>(null)\n\n    const trans = useTransition({\n        delay,\n        duration,\n        easing: Easing[easing],\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        onDone,\n        from: () => {\n            if (!rect.current) {\n                rect.current = ref.current?.getBoundingClientRect() as DOMRect\n            }\n            const v = variantCb(ref.current as HTMLElement, rect.current)\n            return v.from\n        },\n        to: () => {\n            if (!rect.current) {\n                rect.current = ref.current?.getBoundingClientRect() as DOMRect\n            }\n            const v = variantCb(ref.current as HTMLElement, rect.current)\n            return v.to\n        },\n        onUpdate: (val, prograss) => {\n            if (!ref.current || !rect.current) return\n            const vc = variantCb(ref.current, rect.current)\n            onUpdate?.(val, prograss)\n            return vc.onUpdate(val)\n        },\n    })\n\n\n    useLayoutEffect(() => {\n        const isnot = !init.current && !initialTransition\n        init.current = true\n        if (open) {\n            trans.enter(isnot ? false : true)\n        } else {\n            trans.exit(isnot ? false : true)\n        }\n    }, [open])\n\n    if (exitOnUnmount && trans.status === \"exited\") return\n\n    const childs = Children.toArray(children)\n    if (childs.length !== 1) {\n        throw new Error(\"Transition expects exactly one child.\");\n    }\n    const child = childs[0]\n    if (!isValidElement(child)) {\n        throw new Error(\"Transition expects a valid React element.\");\n    }\n\n    return cloneElement(child, {\n        ref: (node: HTMLElement) => {\n            ref.current = node;\n\n            const childRef = (child as any).ref;\n            if (typeof childRef === \"function\") {\n                childRef(node);\n            } else if (childRef) {\n                childRef.current = node;\n            }\n        }\n    } as any);\n}\n\n\nconst Transition = (props: any) => {\n    return (\n        <TransitionBase\n            key={props.variant}\n            {...props}\n        />\n    )\n}\nexport default Transition"],"names":[],"mappings":";;;;;;;;;;AA2BA;AAAwB;AACpB;;AAmBA;AACA;AACA;AACA;;;;AAKI;;;;;;;;AAOI;;;AAGA;;;;;AAIA;;;AAGA;;;AAGJ;;;AAEI;;AAEA;;AAEP;;;AAKG;;AAEI;;;AAEA;;AAER;AAEA;;;AAGA;AACI;;AAEJ;AACA;AACI;;;AAIA;AACI;AAEA;AACA;;;;AAGI;;;AAGJ;AACZ;AAGA;;AAOA;;"}

package/Transition/index.d.ts

@@ -19,7 +19,7 @@ type TransitionProps = {
     onUpdate?: (value: Record<string, number>, progress: number) => void;
     onDone?: () => void;
 };
-declare function Transition({ children, ...options }: TransitionProps): React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | undefined;
+declare const Transition: (props: any) => React__default.JSX.Element;
 
 export { Transition as default };
 export type { TransitionProps, TransitionVariantTypes };

package/Transition/index.js

@@ -1,17 +1,19 @@
 "use client";
 import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
 import { useRef, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
 import * as variants from './variants.js';
-import useTransition from '../hooks/useTransition.js';
 import Easing from '../animate/easing.js';
+import useTransition from '../hooks/useTransition.js';
 
-function Transition(_a) {
+function TransitionBase(_a) {
     var { children } = _a, options = __rest(_a, ["children"]);
-    let { open, variant = "fade", duration = 450, delay, easing, exitOnUnmount = false, initialTransition = false, onEnter, onEntered, onExit, onExited, onUpdate, onDone, } = options;
+    let { open, variant = "fade", duration = 450, delay, easing, exitOnUnmount = false, initialTransition = true, onEnter, onEntered, onExit, onExited, onUpdate, onDone, } = options;
     easing !== null && easing !== void 0 ? easing : (easing = "default");
     const variantCb = variants[variant];
     const ref = useRef(null);
     const init = useRef(false);
+    const rect = useRef(null);
     const trans = useTransition({
         delay,
         duration,
@@ -22,20 +24,28 @@ function Transition(_a) {
         onExited,
         onDone,
         from: () => {
-            const v = variantCb(ref.current);
+            var _a;
+            if (!rect.current) {
+                rect.current = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            }
+            const v = variantCb(ref.current, rect.current);
             return v.from;
         },
         to: () => {
-            const v = variantCb(ref.current);
+            var _a;
+            if (!rect.current) {
+                rect.current = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            }
+            const v = variantCb(ref.current, rect.current);
             return v.to;
         },
         onUpdate: (val, prograss) => {
-            if (!ref.current)
-                throw new Error("Invalid Transition Element");
-            const vc = variantCb(ref.current);
+            if (!ref.current || !rect.current)
+                return;
+            const vc = variantCb(ref.current, rect.current);
             onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(val, prograss);
             return vc.onUpdate(val);
-        }
+        },
     });
     useLayoutEffect(() => {
         const isnot = !init.current && !initialTransition;
@@ -70,6 +80,9 @@ function Transition(_a) {
         }
     });
 }
+const Transition = (props) => {
+    return (jsx(TransitionBase, Object.assign({}, props), props.variant));
+};
 
 export { Transition as default };
 //# sourceMappingURL=index.js.map

package/Transition/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useRef, isValidElement, useLayoutEffect } from 'react';\nimport * as variants from './variants'\nimport useTransition from '../hooks/useTransition';\nimport { Easing } from '../animate';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionProps = {\n    children: React.ReactElement;\n    open: boolean;\n    variant: TransitionVariantTypes\n    easing?: keyof typeof Easing\n    duration?: number;\n    delay?: number;\n    initialTransition?: boolean;\n\n    exitOnUnmount?: boolean;\n\n    onEnter?: () => void\n    onEntered?: () => void\n    onExit?: () => void\n    onExited?: () => void\n    onUpdate?: (value: Record<string, number>, progress: number) => void;\n    onDone?: () => void;\n}\n\n\nfunction Transition({ children, ...options }: TransitionProps) {\n    let {\n        open,\n        variant = \"fade\",\n        duration = 450,\n        delay,\n        easing,\n        exitOnUnmount = false,\n        initialTransition = false,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        onUpdate,\n        onDone,\n\n    } = options\n\n    easing ??= \"default\"\n\n    const variantCb = variants[variant]\n    const ref = useRef<HTMLElement>(null)\n    const init = useRef(false)\n\n    const trans = useTransition({\n        delay,\n        duration,\n        easing: Easing[easing],\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        onDone,\n        from: () => {\n            const v = variantCb(ref.current as HTMLElement)\n            return v.from\n        },\n        to: () => {\n            const v = variantCb(ref.current as HTMLElement)\n            return v.to\n        },\n        onUpdate: (val, prograss) => {\n            if (!ref.current) throw new Error(\"Invalid Transition Element\");\n            const vc = variantCb(ref.current)\n            onUpdate?.(val, prograss)\n            return vc.onUpdate(val)\n        }\n    })\n\n\n    useLayoutEffect(() => {\n        const isnot = !init.current && !initialTransition\n        init.current = true\n        if (open) {\n            trans.enter(isnot ? false : true)\n        } else {\n            trans.exit(isnot ? false : true)\n        }\n    }, [open])\n\n    if (exitOnUnmount && trans.status === \"exited\") return\n\n    const childs = Children.toArray(children)\n    if (childs.length !== 1) {\n        throw new Error(\"Transition expects exactly one child.\");\n    }\n    const child = childs[0]\n    if (!isValidElement(child)) {\n        throw new Error(\"Transition expects a valid React element.\");\n    }\n\n    return cloneElement(child, {\n        ref: (node: HTMLElement) => {\n            ref.current = node;\n\n            const childRef = (child as any).ref;\n            if (typeof childRef === \"function\") {\n                childRef(node);\n            } else if (childRef) {\n                childRef.current = node;\n            }\n        }\n    } as any);\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;AA2BA;AAAoB;AAChB;;AAmBA;AACA;AACA;;;;AAKI;;;;;;;;;;;;;;AAcA;;AACsB;;;AAGlB;;AAEP;;;AAKG;;AAEI;;;AAEA;;AAER;AAEA;;;AAGA;AACI;;AAEJ;AACA;AACI;;;AAIA;AACI;AAEA;AACA;;;;AAGI;;;AAGJ;AACZ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useRef, isValidElement, useLayoutEffect } from 'react';\nimport * as variants from './variants'\nimport { Easing } from '../animate';\nimport useTransition from '../hooks/useTransition';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionProps = {\n    children: React.ReactElement;\n    open: boolean;\n    variant: TransitionVariantTypes\n    easing?: keyof typeof Easing\n    duration?: number;\n    delay?: number;\n    initialTransition?: boolean;\n\n    exitOnUnmount?: boolean;\n\n    onEnter?: () => void\n    onEntered?: () => void\n    onExit?: () => void\n    onExited?: () => void\n    onUpdate?: (value: Record<string, number>, progress: number) => void;\n    onDone?: () => void;\n}\n\n\nfunction TransitionBase({ children, ...options }: TransitionProps) {\n    let {\n        open,\n        variant = \"fade\",\n        duration = 450,\n        delay,\n        easing,\n        exitOnUnmount = false,\n        initialTransition = true,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        onUpdate,\n        onDone,\n\n    } = options\n\n    easing ??= \"default\"\n\n    const variantCb = variants[variant]\n    const ref = useRef<HTMLElement>(null)\n    const init = useRef(false)\n    const rect = useRef<DOMRect>(null)\n\n    const trans = useTransition({\n        delay,\n        duration,\n        easing: Easing[easing],\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        onDone,\n        from: () => {\n            if (!rect.current) {\n                rect.current = ref.current?.getBoundingClientRect() as DOMRect\n            }\n            const v = variantCb(ref.current as HTMLElement, rect.current)\n            return v.from\n        },\n        to: () => {\n            if (!rect.current) {\n                rect.current = ref.current?.getBoundingClientRect() as DOMRect\n            }\n            const v = variantCb(ref.current as HTMLElement, rect.current)\n            return v.to\n        },\n        onUpdate: (val, prograss) => {\n            if (!ref.current || !rect.current) return\n            const vc = variantCb(ref.current, rect.current)\n            onUpdate?.(val, prograss)\n            return vc.onUpdate(val)\n        },\n    })\n\n\n    useLayoutEffect(() => {\n        const isnot = !init.current && !initialTransition\n        init.current = true\n        if (open) {\n            trans.enter(isnot ? false : true)\n        } else {\n            trans.exit(isnot ? false : true)\n        }\n    }, [open])\n\n    if (exitOnUnmount && trans.status === \"exited\") return\n\n    const childs = Children.toArray(children)\n    if (childs.length !== 1) {\n        throw new Error(\"Transition expects exactly one child.\");\n    }\n    const child = childs[0]\n    if (!isValidElement(child)) {\n        throw new Error(\"Transition expects a valid React element.\");\n    }\n\n    return cloneElement(child, {\n        ref: (node: HTMLElement) => {\n            ref.current = node;\n\n            const childRef = (child as any).ref;\n            if (typeof childRef === \"function\") {\n                childRef(node);\n            } else if (childRef) {\n                childRef.current = node;\n            }\n        }\n    } as any);\n}\n\n\nconst Transition = (props: any) => {\n    return (\n        <TransitionBase\n            key={props.variant}\n            {...props}\n        />\n    )\n}\nexport default Transition"],"names":[],"mappings":";;;;;;;;AA2BA;AAAwB;AACpB;;AAmBA;AACA;AACA;AACA;;;;AAKI;;;;;;;;AAOI;;;AAGA;;;;;AAIA;;;AAGA;;;AAGJ;;;AAEI;;AAEA;;AAEP;;;AAKG;;AAEI;;;AAEA;;AAER;AAEA;;;AAGA;AACI;;AAEJ;AACA;AACI;;;AAIA;AACI;AAEA;AACA;;;;AAGI;;;AAGJ;AACZ;AAGA;;AAOA;;"}

package/Transition/variants.cjs

@@ -1,48 +1,49 @@
 "use client";
 'use strict';
 
-const getY = (el) => (el ? Math.min(el.getBoundingClientRect().height / 2, 40) : 20);
-const getX = (el) => (el ? Math.min(el.getBoundingClientRect().width / 2, 40) : 20);
+const getY = (rect) => (rect.height / 2, 40);
+const getX = (rect) => (rect.width / 2, 40);
 // ------------------ Variants ------------------
-const slideDown = (el) => {
-    const y = getY(el);
+const slideDown = (el, rect) => {
+    getY(rect);
     return {
-        from: { y: -y },
+        from: { y: -40 },
         to: { y: 0 },
         onUpdate: ({ y }) => (el.style.transform = `translateY(${y}px)`),
     };
 };
-const slideUp = (el) => {
-    const y = getY(el);
+const slideUp = (el, rect) => {
+    const y = getY(rect);
     return {
         from: { y },
         to: { y: 0 },
         onUpdate: ({ y }) => (el.style.transform = `translateY(${y}px)`),
     };
 };
-const slideRight = (el) => {
-    const x = getX(el);
+const slideRight = (el, rect) => {
+    getX(rect);
     return {
-        from: { x: -x },
+        from: { x: -40 },
         to: { x: 0 },
         onUpdate: ({ x }) => (el.style.transform = `translateX(${x}px)`),
     };
 };
-const slideLeft = (el) => {
-    const x = getX(el);
+const slideLeft = (el, rect) => {
+    const x = getX(rect);
     return {
         from: { x },
         to: { x: 0 },
         onUpdate: ({ x }) => (el.style.transform = `translateX(${x}px)`),
     };
 };
-const fade = (el) => ({
+const fade = (el, rect) => ({
     from: { opacity: 0 },
     to: { opacity: 1 },
     onUpdate: ({ opacity }) => (el.style.opacity = opacity),
 });
-const fadeDown = (el) => {
-    const y = getY(el);
+const fadeDown = (el, rect) => {
+    const y = getY(rect);
+    console.log(y);
     return {
         from: { y: -y, scale: 0.98, opacity: 0 },
         to: { y: 0, scale: 1, opacity: 1 },
@@ -52,8 +53,8 @@ const fadeDown = (el) => {
         }
     };
 };
-const fadeUp = (el) => {
-    const y = getY(el);
+const fadeUp = (el, rect) => {
+    const y = getY(rect);
     return {
         from: { y, scale: 0.98, opacity: 0 },
         to: { y: 0, scale: 1, opacity: 1 },
@@ -63,10 +64,10 @@ const fadeUp = (el) => {
         }
     };
 };
-const fadeRight = (el) => {
-    const x = getX(el);
+const fadeRight = (el, rect) => {
+    getX(rect);
     return {
-        from: { x: -x, scale: 0.98, opacity: 0 },
+        from: { x: -40, scale: 0.98, opacity: 0 },
         to: { x: 0, scale: 1, opacity: 1 },
         onUpdate: ({ x, scale, opacity }) => {
             el.style.transform = `translateX(${x}px) scale(${scale})`;
@@ -74,8 +75,8 @@ const fadeRight = (el) => {
         }
     };
 };
-const fadeLeft = (el) => {
-    const x = getX(el);
+const fadeLeft = (el, rect) => {
+    const x = getX(rect);
     return {
         from: { x, scale: 0.98, opacity: 0 },
         to: { x: 0, scale: 1, opacity: 1 },
@@ -85,7 +86,7 @@ const fadeLeft = (el) => {
         }
     };
 };
-const zoom = (el) => ({
+const zoom = (el, rect) => ({
     from: { scale: 0.8, opacity: 0 },
     to: { scale: 1, opacity: 1 },
     onUpdate: ({ scale, opacity }) => {
@@ -93,7 +94,7 @@ const zoom = (el) => ({
         el.style.opacity = String(opacity);
     },
 });
-const zoomOver = (el) => ({
+const zoomOver = (el, rect) => ({
     from: { scale: 1.2, opacity: 0 },
     to: { scale: 1, opacity: 1 },
     onUpdate: ({ scale, opacity }) => {
@@ -101,7 +102,7 @@ const zoomOver = (el) => ({
         el.style.opacity = String(opacity);
     },
 });
-const grow = (el) => ({
+const grow = (el, rect) => ({
     from: { scaleX: 0.8, scaleY: 0.6, opacity: 0 },
     to: { scaleX: 1, scaleY: 1, opacity: 1 },
     onUpdate: ({ scaleX, scaleY, opacity }) => {
@@ -109,8 +110,8 @@ const grow = (el) => ({
         el.style.opacity = String(opacity);
     }
 });
-const collapseVertical = (el) => {
-    const height = el.getBoundingClientRect().height;
+const collapseVertical = (el, rect) => {
+    const height = rect.height;
     return {
         from: { maxHeight: 0 },
         to: { maxHeight: height },
@@ -119,8 +120,8 @@ const collapseVertical = (el) => {
         },
     };
 };
-const collapseHorizontal = (el) => {
-    const width = el.getBoundingClientRect().width;
+const collapseHorizontal = (el, rect) => {
+    const width = rect.width;
     return {
         from: { width: 0 },
         to: { width },

package/Transition/variants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"variants.cjs","sources":["../../src/Transition/variants.ts"],"sourcesContent":["\"use client\"\nconst getY = (el?: HTMLElement) => (el ? Math.min(el.getBoundingClientRect().height / 2, 40) : 20)\nconst getX = (el?: HTMLElement) => (el ? Math.min(el.getBoundingClientRect().width / 2, 40) : 20)\n\n// ------------------ Variants ------------------\n\nexport const slideDown = (el: HTMLElement) => {\n    const y = getY(el)\n    return {\n        from: { y: -y },\n        to: { y: 0 },\n        onUpdate: ({ y }: any) => (el.style.transform = `translateY(${y}px)`),\n    }\n}\n\nexport const slideUp = (el: HTMLElement) => {\n    const y = getY(el)\n    return {\n        from: { y },\n        to: { y: 0 },\n        onUpdate: ({ y }: any) => (el.style.transform = `translateY(${y}px)`),\n    }\n}\n\nexport const slideRight = (el: HTMLElement) => {\n    const x = getX(el)\n    return {\n        from: { x: -x },\n        to: { x: 0 },\n        onUpdate: ({ x }: any) => (el.style.transform = `translateX(${x}px)`),\n    }\n}\n\nexport const slideLeft = (el: HTMLElement) => {\n    const x = getX(el)\n    return {\n        from: { x },\n        to: { x: 0 },\n        onUpdate: ({ x }: any) => (el.style.transform = `translateX(${x}px)`),\n    }\n}\n\nexport const fade = (el: HTMLElement) => ({\n    from: { opacity: 0 },\n    to: { opacity: 1 },\n    onUpdate: ({ opacity }: any) => (el.style.opacity = opacity),\n})\n\nexport const fadeDown = (el: HTMLElement) => {\n    const y = getY(el)\n    return {\n        from: { y: -y, scale: 0.98, opacity: 0 },\n        to: { y: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ y, scale, opacity }: any) => {\n            el.style.transform = `translateY(${y}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeUp = (el: HTMLElement) => {\n    const y = getY(el)\n    return {\n        from: { y, scale: 0.98, opacity: 0 },\n        to: { y: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ y, scale, opacity }: any) => {\n            el.style.transform = `translateY(${y}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeRight = (el: HTMLElement) => {\n    const x = getX(el)\n    return {\n        from: { x: -x, scale: 0.98, opacity: 0 },\n        to: { x: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ x, scale, opacity }: any) => {\n            el.style.transform = `translateX(${x}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeLeft = (el: HTMLElement) => {\n    const x = getX(el)\n    return {\n        from: { x, scale: 0.98, opacity: 0 },\n        to: { x: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ x, scale, opacity }: any) => {\n            el.style.transform = `translateX(${x}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const zoom = (el: HTMLElement) => ({\n    from: { scale: 0.8, opacity: 0 },\n    to: { scale: 1, opacity: 1 },\n    onUpdate: ({ scale, opacity }: any) => {\n        el.style.transform = `scale(${scale})`\n        el.style.opacity = String(opacity)\n    },\n})\n\nexport const zoomOver = (el: HTMLElement) => ({\n    from: { scale: 1.2, opacity: 0 },\n    to: { scale: 1, opacity: 1 },\n    onUpdate: ({ scale, opacity }: any) => {\n        el.style.transform = `scale(${scale})`\n        el.style.opacity = String(opacity)\n    },\n})\n\nexport const grow = (el: HTMLElement) => ({\n    from: { scaleX: 0.8, scaleY: 0.6, opacity: 0 },\n    to: { scaleX: 1, scaleY: 1, opacity: 1 },\n    onUpdate: ({ scaleX, scaleY, opacity }: any) => {\n        el.style.transform = `scale(${scaleX}, ${scaleY})`\n        el.style.opacity = String(opacity)\n    }\n})\n\nexport const collapseVertical = (el: HTMLElement) => {\n    const height = el.getBoundingClientRect().height\n    return {\n        from: { maxHeight: 0 },\n        to: { maxHeight: height },\n        onUpdate: ({ maxHeight }: any) => {\n            el.style.maxHeight = `${maxHeight}px`\n        },\n    }\n}\n\nexport const collapseHorizontal = (el: HTMLElement) => {\n    const width = el.getBoundingClientRect().width\n    return {\n        from: { width: 0 },\n        to: { width },\n        onUpdate: ({ width }: any) => {\n            el.style.width = `${width}px`\n        },\n    }\n}"],"names":[],"mappings":";;;AACA;AACA;AAEA;AAEO;AACH;;AAEI;AACA;AACA;;AAER;AAEO;AACH;;;AAGI;AACA;;AAER;AAEO;AACH;;AAEI;AACA;AACA;;AAER;AAEO;AACH;;;AAGI;AACA;;AAER;;AAGI;AACA;AACA;AACH;AAEM;AACH;;AAEI;AACA;;;;;;AAMR;AAEO;AACH;;;AAGI;;;;;;AAMR;AAEO;AACH;;AAEI;AACA;;;;;;AAMR;AAEO;AACH;;;AAGI;;;;;;AAMR;;;;;;;;AASC;;;;;;;;AASA;;AAGG;AACA;;;;;AAKH;AAEM;;;AAGC;AACA;AACA;;;;AAIR;AAEO;;;AAGC;;AAEA;;;;AAIR;;;;;;;;;;;;;;;"}
+{"version":3,"file":"variants.cjs","sources":["../../src/Transition/variants.ts"],"sourcesContent":["\"use client\"\nconst getY = (rect: DOMRect) => (rect.height / 2, 40)\nconst getX = (rect: DOMRect) => (rect.width / 2, 40)\n\n// ------------------ Variants ------------------\n\nexport const slideDown = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y: -y },\n        to: { y: 0 },\n        onUpdate: ({ y }: any) => (el.style.transform = `translateY(${y}px)`),\n    }\n}\n\nexport const slideUp = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y },\n        to: { y: 0 },\n        onUpdate: ({ y }: any) => (el.style.transform = `translateY(${y}px)`),\n    }\n}\n\nexport const slideRight = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x: -x },\n        to: { x: 0 },\n        onUpdate: ({ x }: any) => (el.style.transform = `translateX(${x}px)`),\n    }\n}\n\nexport const slideLeft = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x },\n        to: { x: 0 },\n        onUpdate: ({ x }: any) => (el.style.transform = `translateX(${x}px)`),\n    }\n}\n\nexport const fade = (el: HTMLElement, rect: DOMRect) => ({\n    from: { opacity: 0 },\n    to: { opacity: 1 },\n    onUpdate: ({ opacity }: any) => (el.style.opacity = opacity),\n})\n\nexport const fadeDown = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    console.log(y);\n\n    return {\n        from: { y: -y, scale: 0.98, opacity: 0 },\n        to: { y: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ y, scale, opacity }: any) => {\n            el.style.transform = `translateY(${y}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeUp = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y, scale: 0.98, opacity: 0 },\n        to: { y: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ y, scale, opacity }: any) => {\n            el.style.transform = `translateY(${y}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeRight = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x: -x, scale: 0.98, opacity: 0 },\n        to: { x: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ x, scale, opacity }: any) => {\n            el.style.transform = `translateX(${x}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeLeft = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x, scale: 0.98, opacity: 0 },\n        to: { x: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ x, scale, opacity }: any) => {\n            el.style.transform = `translateX(${x}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const zoom = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scale: 0.8, opacity: 0 },\n    to: { scale: 1, opacity: 1 },\n    onUpdate: ({ scale, opacity }: any) => {\n        el.style.transform = `scale(${scale})`\n        el.style.opacity = String(opacity)\n    },\n})\n\nexport const zoomOver = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scale: 1.2, opacity: 0 },\n    to: { scale: 1, opacity: 1 },\n    onUpdate: ({ scale, opacity }: any) => {\n        el.style.transform = `scale(${scale})`\n        el.style.opacity = String(opacity)\n    },\n})\n\nexport const grow = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scaleX: 0.8, scaleY: 0.6, opacity: 0 },\n    to: { scaleX: 1, scaleY: 1, opacity: 1 },\n    onUpdate: ({ scaleX, scaleY, opacity }: any) => {\n        el.style.transform = `scale(${scaleX}, ${scaleY})`\n        el.style.opacity = String(opacity)\n    }\n})\n\nexport const collapseVertical = (el: HTMLElement, rect: DOMRect) => {\n    const height = rect.height\n    return {\n        from: { maxHeight: 0 },\n        to: { maxHeight: height },\n        onUpdate: ({ maxHeight }: any) => {\n            el.style.maxHeight = `${maxHeight}px`\n        },\n    }\n}\n\nexport const collapseHorizontal = (el: HTMLElement, rect: DOMRect) => {\n    const width = rect.width\n    return {\n        from: { width: 0 },\n        to: { width },\n        onUpdate: ({ width }: any) => {\n            el.style.width = `${width}px`\n        },\n    }\n}"],"names":[],"mappings":";;;AACA;AACA;AAEA;;AAGI;;AAEI;AACA;AACA;;AAER;;AAGI;;;AAGI;AACA;;AAER;;AAGI;;AAEI;AACA;AACA;;AAER;;AAGI;;;AAGI;AACA;;AAER;AAEO;AACH;AACA;AACA;AACH;;AAGG;AACA;;AAGI;AACA;;;;;;AAMR;;AAGI;;;AAGI;;;;;;AAMR;;AAGI;;AAEI;AACA;;;;;;AAMR;;AAGI;;;AAGI;;;;;;AAMR;AAEO;;;;;;;AAON;AAEM;;;;;;;AAON;AAEM;AACH;AACA;;;;;AAKH;;AAGG;;AAEI;AACA;AACA;;;;AAIR;;AAGI;;AAEI;;AAEA;;;;AAIR;;;;;;;;;;;;;;;"}

package/Transition/variants.d.ts

@@ -1,4 +1,4 @@
-declare const slideDown: (el: HTMLElement) => {
+declare const slideDown: (el: HTMLElement, rect: DOMRect) => {
     from: {
         y: number;
     };
@@ -7,7 +7,7 @@ declare const slideDown: (el: HTMLElement) => {
     };
     onUpdate: ({ y }: any) => string;
 };
-declare const slideUp: (el: HTMLElement) => {
+declare const slideUp: (el: HTMLElement, rect: DOMRect) => {
     from: {
         y: number;
     };
@@ -16,7 +16,7 @@ declare const slideUp: (el: HTMLElement) => {
     };
     onUpdate: ({ y }: any) => string;
 };
-declare const slideRight: (el: HTMLElement) => {
+declare const slideRight: (el: HTMLElement, rect: DOMRect) => {
     from: {
         x: number;
     };
@@ -25,7 +25,7 @@ declare const slideRight: (el: HTMLElement) => {
     };
     onUpdate: ({ x }: any) => string;
 };
-declare const slideLeft: (el: HTMLElement) => {
+declare const slideLeft: (el: HTMLElement, rect: DOMRect) => {
     from: {
         x: number;
     };
@@ -34,7 +34,7 @@ declare const slideLeft: (el: HTMLElement) => {
     };
     onUpdate: ({ x }: any) => string;
 };
-declare const fade: (el: HTMLElement) => {
+declare const fade: (el: HTMLElement, rect: DOMRect) => {
     from: {
         opacity: number;
     };
@@ -43,7 +43,7 @@ declare const fade: (el: HTMLElement) => {
     };
     onUpdate: ({ opacity }: any) => any;
 };
-declare const fadeDown: (el: HTMLElement) => {
+declare const fadeDown: (el: HTMLElement, rect: DOMRect) => {
     from: {
         y: number;
         scale: number;
@@ -56,7 +56,7 @@ declare const fadeDown: (el: HTMLElement) => {
     };
     onUpdate: ({ y, scale, opacity }: any) => void;
 };
-declare const fadeUp: (el: HTMLElement) => {
+declare const fadeUp: (el: HTMLElement, rect: DOMRect) => {
     from: {
         y: number;
         scale: number;
@@ -69,7 +69,7 @@ declare const fadeUp: (el: HTMLElement) => {
     };
     onUpdate: ({ y, scale, opacity }: any) => void;
 };
-declare const fadeRight: (el: HTMLElement) => {
+declare const fadeRight: (el: HTMLElement, rect: DOMRect) => {
     from: {
         x: number;
         scale: number;
@@ -82,7 +82,7 @@ declare const fadeRight: (el: HTMLElement) => {
     };
     onUpdate: ({ x, scale, opacity }: any) => void;
 };
-declare const fadeLeft: (el: HTMLElement) => {
+declare const fadeLeft: (el: HTMLElement, rect: DOMRect) => {
     from: {
         x: number;
         scale: number;
@@ -95,7 +95,7 @@ declare const fadeLeft: (el: HTMLElement) => {
     };
     onUpdate: ({ x, scale, opacity }: any) => void;
 };
-declare const zoom: (el: HTMLElement) => {
+declare const zoom: (el: HTMLElement, rect: DOMRect) => {
     from: {
         scale: number;
         opacity: number;
@@ -106,7 +106,7 @@ declare const zoom: (el: HTMLElement) => {
     };
     onUpdate: ({ scale, opacity }: any) => void;
 };
-declare const zoomOver: (el: HTMLElement) => {
+declare const zoomOver: (el: HTMLElement, rect: DOMRect) => {
     from: {
         scale: number;
         opacity: number;
@@ -117,7 +117,7 @@ declare const zoomOver: (el: HTMLElement) => {
     };
     onUpdate: ({ scale, opacity }: any) => void;
 };
-declare const grow: (el: HTMLElement) => {
+declare const grow: (el: HTMLElement, rect: DOMRect) => {
     from: {
         scaleX: number;
         scaleY: number;
@@ -130,7 +130,7 @@ declare const grow: (el: HTMLElement) => {
     };
     onUpdate: ({ scaleX, scaleY, opacity }: any) => void;
 };
-declare const collapseVertical: (el: HTMLElement) => {
+declare const collapseVertical: (el: HTMLElement, rect: DOMRect) => {
     from: {
         maxHeight: number;
     };
@@ -139,7 +139,7 @@ declare const collapseVertical: (el: HTMLElement) => {
     };
     onUpdate: ({ maxHeight }: any) => void;
 };
-declare const collapseHorizontal: (el: HTMLElement) => {
+declare const collapseHorizontal: (el: HTMLElement, rect: DOMRect) => {
     from: {
         width: number;
     };

package/Transition/variants.js

@@ -1,46 +1,47 @@
 "use client";
-const getY = (el) => (el ? Math.min(el.getBoundingClientRect().height / 2, 40) : 20);
-const getX = (el) => (el ? Math.min(el.getBoundingClientRect().width / 2, 40) : 20);
+const getY = (rect) => (rect.height / 2, 40);
+const getX = (rect) => (rect.width / 2, 40);
 // ------------------ Variants ------------------
-const slideDown = (el) => {
-    const y = getY(el);
+const slideDown = (el, rect) => {
+    getY(rect);
     return {
-        from: { y: -y },
+        from: { y: -40 },
         to: { y: 0 },
         onUpdate: ({ y }) => (el.style.transform = `translateY(${y}px)`),
     };
 };
-const slideUp = (el) => {
-    const y = getY(el);
+const slideUp = (el, rect) => {
+    const y = getY(rect);
     return {
         from: { y },
         to: { y: 0 },
         onUpdate: ({ y }) => (el.style.transform = `translateY(${y}px)`),
     };
 };
-const slideRight = (el) => {
-    const x = getX(el);
+const slideRight = (el, rect) => {
+    getX(rect);
     return {
-        from: { x: -x },
+        from: { x: -40 },
         to: { x: 0 },
         onUpdate: ({ x }) => (el.style.transform = `translateX(${x}px)`),
     };
 };
-const slideLeft = (el) => {
-    const x = getX(el);
+const slideLeft = (el, rect) => {
+    const x = getX(rect);
     return {
         from: { x },
         to: { x: 0 },
         onUpdate: ({ x }) => (el.style.transform = `translateX(${x}px)`),
     };
 };
-const fade = (el) => ({
+const fade = (el, rect) => ({
     from: { opacity: 0 },
     to: { opacity: 1 },
     onUpdate: ({ opacity }) => (el.style.opacity = opacity),
 });
-const fadeDown = (el) => {
-    const y = getY(el);
+const fadeDown = (el, rect) => {
+    const y = getY(rect);
+    console.log(y);
     return {
         from: { y: -y, scale: 0.98, opacity: 0 },
         to: { y: 0, scale: 1, opacity: 1 },
@@ -50,8 +51,8 @@ const fadeDown = (el) => {
         }
     };
 };
-const fadeUp = (el) => {
-    const y = getY(el);
+const fadeUp = (el, rect) => {
+    const y = getY(rect);
     return {
         from: { y, scale: 0.98, opacity: 0 },
         to: { y: 0, scale: 1, opacity: 1 },
@@ -61,10 +62,10 @@ const fadeUp = (el) => {
         }
     };
 };
-const fadeRight = (el) => {
-    const x = getX(el);
+const fadeRight = (el, rect) => {
+    getX(rect);
     return {
-        from: { x: -x, scale: 0.98, opacity: 0 },
+        from: { x: -40, scale: 0.98, opacity: 0 },
         to: { x: 0, scale: 1, opacity: 1 },
         onUpdate: ({ x, scale, opacity }) => {
             el.style.transform = `translateX(${x}px) scale(${scale})`;
@@ -72,8 +73,8 @@ const fadeRight = (el) => {
         }
     };
 };
-const fadeLeft = (el) => {
-    const x = getX(el);
+const fadeLeft = (el, rect) => {
+    const x = getX(rect);
     return {
         from: { x, scale: 0.98, opacity: 0 },
         to: { x: 0, scale: 1, opacity: 1 },
@@ -83,7 +84,7 @@ const fadeLeft = (el) => {
         }
     };
 };
-const zoom = (el) => ({
+const zoom = (el, rect) => ({
     from: { scale: 0.8, opacity: 0 },
     to: { scale: 1, opacity: 1 },
     onUpdate: ({ scale, opacity }) => {
@@ -91,7 +92,7 @@ const zoom = (el) => ({
         el.style.opacity = String(opacity);
     },
 });
-const zoomOver = (el) => ({
+const zoomOver = (el, rect) => ({
     from: { scale: 1.2, opacity: 0 },
     to: { scale: 1, opacity: 1 },
     onUpdate: ({ scale, opacity }) => {
@@ -99,7 +100,7 @@ const zoomOver = (el) => ({
         el.style.opacity = String(opacity);
     },
 });
-const grow = (el) => ({
+const grow = (el, rect) => ({
     from: { scaleX: 0.8, scaleY: 0.6, opacity: 0 },
     to: { scaleX: 1, scaleY: 1, opacity: 1 },
     onUpdate: ({ scaleX, scaleY, opacity }) => {
@@ -107,8 +108,8 @@ const grow = (el) => ({
         el.style.opacity = String(opacity);
     }
 });
-const collapseVertical = (el) => {
-    const height = el.getBoundingClientRect().height;
+const collapseVertical = (el, rect) => {
+    const height = rect.height;
     return {
         from: { maxHeight: 0 },
         to: { maxHeight: height },
@@ -117,8 +118,8 @@ const collapseVertical = (el) => {
         },
     };
 };
-const collapseHorizontal = (el) => {
-    const width = el.getBoundingClientRect().width;
+const collapseHorizontal = (el, rect) => {
+    const width = rect.width;
     return {
         from: { width: 0 },
         to: { width },

package/Transition/variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"variants.js","sources":["../../src/Transition/variants.ts"],"sourcesContent":["\"use client\"\nconst getY = (el?: HTMLElement) => (el ? Math.min(el.getBoundingClientRect().height / 2, 40) : 20)\nconst getX = (el?: HTMLElement) => (el ? Math.min(el.getBoundingClientRect().width / 2, 40) : 20)\n\n// ------------------ Variants ------------------\n\nexport const slideDown = (el: HTMLElement) => {\n    const y = getY(el)\n    return {\n        from: { y: -y },\n        to: { y: 0 },\n        onUpdate: ({ y }: any) => (el.style.transform = `translateY(${y}px)`),\n    }\n}\n\nexport const slideUp = (el: HTMLElement) => {\n    const y = getY(el)\n    return {\n        from: { y },\n        to: { y: 0 },\n        onUpdate: ({ y }: any) => (el.style.transform = `translateY(${y}px)`),\n    }\n}\n\nexport const slideRight = (el: HTMLElement) => {\n    const x = getX(el)\n    return {\n        from: { x: -x },\n        to: { x: 0 },\n        onUpdate: ({ x }: any) => (el.style.transform = `translateX(${x}px)`),\n    }\n}\n\nexport const slideLeft = (el: HTMLElement) => {\n    const x = getX(el)\n    return {\n        from: { x },\n        to: { x: 0 },\n        onUpdate: ({ x }: any) => (el.style.transform = `translateX(${x}px)`),\n    }\n}\n\nexport const fade = (el: HTMLElement) => ({\n    from: { opacity: 0 },\n    to: { opacity: 1 },\n    onUpdate: ({ opacity }: any) => (el.style.opacity = opacity),\n})\n\nexport const fadeDown = (el: HTMLElement) => {\n    const y = getY(el)\n    return {\n        from: { y: -y, scale: 0.98, opacity: 0 },\n        to: { y: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ y, scale, opacity }: any) => {\n            el.style.transform = `translateY(${y}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeUp = (el: HTMLElement) => {\n    const y = getY(el)\n    return {\n        from: { y, scale: 0.98, opacity: 0 },\n        to: { y: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ y, scale, opacity }: any) => {\n            el.style.transform = `translateY(${y}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeRight = (el: HTMLElement) => {\n    const x = getX(el)\n    return {\n        from: { x: -x, scale: 0.98, opacity: 0 },\n        to: { x: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ x, scale, opacity }: any) => {\n            el.style.transform = `translateX(${x}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeLeft = (el: HTMLElement) => {\n    const x = getX(el)\n    return {\n        from: { x, scale: 0.98, opacity: 0 },\n        to: { x: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ x, scale, opacity }: any) => {\n            el.style.transform = `translateX(${x}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const zoom = (el: HTMLElement) => ({\n    from: { scale: 0.8, opacity: 0 },\n    to: { scale: 1, opacity: 1 },\n    onUpdate: ({ scale, opacity }: any) => {\n        el.style.transform = `scale(${scale})`\n        el.style.opacity = String(opacity)\n    },\n})\n\nexport const zoomOver = (el: HTMLElement) => ({\n    from: { scale: 1.2, opacity: 0 },\n    to: { scale: 1, opacity: 1 },\n    onUpdate: ({ scale, opacity }: any) => {\n        el.style.transform = `scale(${scale})`\n        el.style.opacity = String(opacity)\n    },\n})\n\nexport const grow = (el: HTMLElement) => ({\n    from: { scaleX: 0.8, scaleY: 0.6, opacity: 0 },\n    to: { scaleX: 1, scaleY: 1, opacity: 1 },\n    onUpdate: ({ scaleX, scaleY, opacity }: any) => {\n        el.style.transform = `scale(${scaleX}, ${scaleY})`\n        el.style.opacity = String(opacity)\n    }\n})\n\nexport const collapseVertical = (el: HTMLElement) => {\n    const height = el.getBoundingClientRect().height\n    return {\n        from: { maxHeight: 0 },\n        to: { maxHeight: height },\n        onUpdate: ({ maxHeight }: any) => {\n            el.style.maxHeight = `${maxHeight}px`\n        },\n    }\n}\n\nexport const collapseHorizontal = (el: HTMLElement) => {\n    const width = el.getBoundingClientRect().width\n    return {\n        from: { width: 0 },\n        to: { width },\n        onUpdate: ({ width }: any) => {\n            el.style.width = `${width}px`\n        },\n    }\n}"],"names":[],"mappings":";AACA;AACA;AAEA;AAEO;AACH;;AAEI;AACA;AACA;;AAER;AAEO;AACH;;;AAGI;AACA;;AAER;AAEO;AACH;;AAEI;AACA;AACA;;AAER;AAEO;AACH;;;AAGI;AACA;;AAER;;AAGI;AACA;AACA;AACH;AAEM;AACH;;AAEI;AACA;;;;;;AAMR;AAEO;AACH;;;AAGI;;;;;;AAMR;AAEO;AACH;;AAEI;AACA;;;;;;AAMR;AAEO;AACH;;;AAGI;;;;;;AAMR;;;;;;;;AASC;;;;;;;;AASA;;AAGG;AACA;;;;;AAKH;AAEM;;;AAGC;AACA;AACA;;;;AAIR;AAEO;;;AAGC;;AAEA;;;;AAIR;;"}
+{"version":3,"file":"variants.js","sources":["../../src/Transition/variants.ts"],"sourcesContent":["\"use client\"\nconst getY = (rect: DOMRect) => (rect.height / 2, 40)\nconst getX = (rect: DOMRect) => (rect.width / 2, 40)\n\n// ------------------ Variants ------------------\n\nexport const slideDown = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y: -y },\n        to: { y: 0 },\n        onUpdate: ({ y }: any) => (el.style.transform = `translateY(${y}px)`),\n    }\n}\n\nexport const slideUp = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y },\n        to: { y: 0 },\n        onUpdate: ({ y }: any) => (el.style.transform = `translateY(${y}px)`),\n    }\n}\n\nexport const slideRight = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x: -x },\n        to: { x: 0 },\n        onUpdate: ({ x }: any) => (el.style.transform = `translateX(${x}px)`),\n    }\n}\n\nexport const slideLeft = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x },\n        to: { x: 0 },\n        onUpdate: ({ x }: any) => (el.style.transform = `translateX(${x}px)`),\n    }\n}\n\nexport const fade = (el: HTMLElement, rect: DOMRect) => ({\n    from: { opacity: 0 },\n    to: { opacity: 1 },\n    onUpdate: ({ opacity }: any) => (el.style.opacity = opacity),\n})\n\nexport const fadeDown = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    console.log(y);\n\n    return {\n        from: { y: -y, scale: 0.98, opacity: 0 },\n        to: { y: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ y, scale, opacity }: any) => {\n            el.style.transform = `translateY(${y}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeUp = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y, scale: 0.98, opacity: 0 },\n        to: { y: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ y, scale, opacity }: any) => {\n            el.style.transform = `translateY(${y}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeRight = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x: -x, scale: 0.98, opacity: 0 },\n        to: { x: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ x, scale, opacity }: any) => {\n            el.style.transform = `translateX(${x}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeLeft = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x, scale: 0.98, opacity: 0 },\n        to: { x: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ x, scale, opacity }: any) => {\n            el.style.transform = `translateX(${x}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const zoom = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scale: 0.8, opacity: 0 },\n    to: { scale: 1, opacity: 1 },\n    onUpdate: ({ scale, opacity }: any) => {\n        el.style.transform = `scale(${scale})`\n        el.style.opacity = String(opacity)\n    },\n})\n\nexport const zoomOver = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scale: 1.2, opacity: 0 },\n    to: { scale: 1, opacity: 1 },\n    onUpdate: ({ scale, opacity }: any) => {\n        el.style.transform = `scale(${scale})`\n        el.style.opacity = String(opacity)\n    },\n})\n\nexport const grow = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scaleX: 0.8, scaleY: 0.6, opacity: 0 },\n    to: { scaleX: 1, scaleY: 1, opacity: 1 },\n    onUpdate: ({ scaleX, scaleY, opacity }: any) => {\n        el.style.transform = `scale(${scaleX}, ${scaleY})`\n        el.style.opacity = String(opacity)\n    }\n})\n\nexport const collapseVertical = (el: HTMLElement, rect: DOMRect) => {\n    const height = rect.height\n    return {\n        from: { maxHeight: 0 },\n        to: { maxHeight: height },\n        onUpdate: ({ maxHeight }: any) => {\n            el.style.maxHeight = `${maxHeight}px`\n        },\n    }\n}\n\nexport const collapseHorizontal = (el: HTMLElement, rect: DOMRect) => {\n    const width = rect.width\n    return {\n        from: { width: 0 },\n        to: { width },\n        onUpdate: ({ width }: any) => {\n            el.style.width = `${width}px`\n        },\n    }\n}"],"names":[],"mappings":";AACA;AACA;AAEA;;AAGI;;AAEI;AACA;AACA;;AAER;;AAGI;;;AAGI;AACA;;AAER;;AAGI;;AAEI;AACA;AACA;;AAER;;AAGI;;;AAGI;AACA;;AAER;AAEO;AACH;AACA;AACA;AACH;;AAGG;AACA;;AAGI;AACA;;;;;;AAMR;;AAGI;;;AAGI;;;;;;AAMR;;AAGI;;AAEI;AACA;;;;;;AAMR;;AAGI;;;AAGI;;;;;;AAMR;AAEO;;;;;;;AAON;AAEM;;;;;;;AAON;AAEM;AACH;AACA;;;;;AAKH;;AAGG;;AAEI;AACA;AACA;;;;AAIR;;AAGI;;AAEI;;AAEA;;;;AAIR;;"}

package/animate/index.cjs

@@ -80,7 +80,8 @@ const animate = ({ from, to, duration = 400, delay = 0, easing: easing$1 = easin
                     startAnimation(); // 🔁 re-run with fresh from/to if functions
                 }
                 else {
-                    onDone === null || onDone === void 0 ? void 0 : onDone();
+                    const finalState = forward ? toVal : fromVal;
+                    onDone === null || onDone === void 0 ? void 0 : onDone(finalState);
                 }
             }
         };

package/animate/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/animate/index.ts"],"sourcesContent":["\"use client\"\nimport Easing from \"./easing\";\n\nexport { Easing };\n\nexport type AnimateOptions<T extends Record<string, number>> = {\n   from: T | (() => T);\n   to: T | (() => T);\n   duration?: number;\n   delay?: number;\n   easing?: ((t: number) => number) | Partial<Record<keyof T, (t: number) => number>>;\n   onUpdate: (value: T, progress: number) => void;\n   onDone?: () => void;\n   breakpoints?: Partial<Record<keyof T, Array<{ value: number; callback: () => void }>>>;\n   repeat?: number;\n   repeatBack?: boolean;\n};\n\nconst animate = <T extends Record<string, number>>({\n   from,\n   to,\n   duration = 400,\n   delay = 0,\n   easing = Easing.default,\n   onUpdate,\n   onDone,\n   breakpoints,\n   repeat = 0,\n   repeatBack = false,\n}: AnimateOptions<T>) => {\n   let rafId: number;\n   let cycle = 0;\n   let forward = true;\n\n   // Track triggered breakpoints\n   const triggered: Partial<Record<keyof T, Set<number>>> = {};\n\n   const resolve = (val: T | (() => T)): T =>\n      typeof val === \"function\" ? (val as () => T)() : val;\n\n   const getEased = (key: keyof T, t: number) => {\n      if (typeof easing === \"function\") return easing(t);\n      if (easing[key]) return easing[key]!(t);\n      return t;\n   };\n\n   const startAnimation = () => {\n      const fromVal = resolve(from);\n      const toVal = resolve(to);\n\n      const keys = Object.keys(fromVal) as (keyof T)[];\n\n      if (breakpoints) {\n         for (const key of keys) triggered[key] = new Set();\n      }\n\n      const start = performance.now();\n\n      const frame = (now: number) => {\n         const progress =\n            duration === 0 ? 1 : Math.min((now - start) / duration, 1);\n\n         const current: any = {} as T;\n\n         for (const key of keys) {\n            const f = forward ? fromVal[key] : toVal[key];\n            const t = forward ? toVal[key] : fromVal[key];\n\n            const eased = getEased(key, progress);\n            const val = f + (t - f) * eased;\n            current[key] = val;\n\n            // breakpoints\n            const bps = breakpoints?.[key];\n            if (bps) {\n               for (let i = 0; i < bps.length; i++) {\n                  const triggeredSet = triggered[key]!;\n                  if (\n                     !triggeredSet.has(i) &&\n                     ((f < t && val >= bps[i].value) ||\n                        (f > t && val <= bps[i].value))\n                  ) {\n                     triggeredSet.add(i);\n                     bps[i].callback();\n                  }\n               }\n            }\n         }\n\n         onUpdate(current, progress);\n\n         if (progress < 1) {\n            rafId = requestAnimationFrame(frame);\n         } else {\n            const finalState = forward ? toVal : fromVal;\n            onUpdate(finalState, 1);\n\n            // fire remaining breakpoints\n            if (breakpoints) {\n               for (const key of keys) {\n                  const bps = breakpoints[key];\n                  if (!bps) continue;\n\n                  const triggeredSet = triggered[key]!;\n                  for (let i = 0; i < bps.length; i++) {\n                     if (!triggeredSet.has(i)) {\n                        triggeredSet.add(i);\n                        bps[i].callback();\n                     }\n                  }\n               }\n            }\n\n            cycle++;\n\n            if (cycle <= repeat) {\n               if (repeatBack) forward = !forward;\n               startAnimation(); // 🔁 re-run with fresh from/to if functions\n            } else {\n               onDone?.();\n            }\n         }\n      };\n\n      rafId = requestAnimationFrame(frame);\n   };\n\n   if (delay > 0) {\n      const timeout = setTimeout(startAnimation, delay);\n      return () => {\n         clearTimeout(timeout);\n         cancelAnimationFrame(rafId);\n      };\n   } else {\n      startAnimation();\n      return () => cancelAnimationFrame(rafId);\n   }\n};\n\nexport default animate;"],"names":[],"mappings":";;;;;;;AAkBA;AAYG;;;;;;AAUA;;AACqC;;AACjB;AACjB;AACH;;AAGG;AACA;;;;AAK2B;;AAG3B;AAEA;;;AAMG;AACG;AACA;;;AAIA;;;;AAKG;AACG;AACA;AAEG;AACG;AAEH;AACA;;;;;AAMZ;AAEA;AACG;;;;AAGA;;;AAIG;AACG;AACA;;AAEA;AACA;;AAEM;AACA;;;;;AAMZ;AAEA;AACG;;;;;AAGA;;;AAGT;AAEA;AACH;AAEA;;AAEG;;;AAGA;;;AAEA;AACA;;AAEN;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/animate/index.ts"],"sourcesContent":["\"use client\"\nimport Easing from \"./easing\";\n\nexport { Easing };\n\nexport type AnimateOptions<T extends Record<string, number>> = {\n   from: T | (() => T);\n   to: T | (() => T);\n   duration?: number;\n   delay?: number;\n   easing?: ((t: number) => number) | Partial<Record<keyof T, (t: number) => number>>;\n   onUpdate: (value: T, progress: number) => void;\n   onDone?: (value: T) => void;\n   breakpoints?: Partial<Record<keyof T, Array<{ value: number; callback: () => void }>>>;\n   repeat?: number;\n   repeatBack?: boolean;\n};\n\nconst animate = <T extends Record<string, number>>({\n   from,\n   to,\n   duration = 400,\n   delay = 0,\n   easing = Easing.default,\n   onUpdate,\n   onDone,\n   breakpoints,\n   repeat = 0,\n   repeatBack = false,\n}: AnimateOptions<T>) => {\n   let rafId: number;\n   let cycle = 0;\n   let forward = true;\n\n   // Track triggered breakpoints\n   const triggered: Partial<Record<keyof T, Set<number>>> = {};\n\n   const resolve = (val: T | (() => T)): T =>\n      typeof val === \"function\" ? (val as () => T)() : val;\n\n   const getEased = (key: keyof T, t: number) => {\n      if (typeof easing === \"function\") return easing(t);\n      if (easing[key]) return easing[key]!(t);\n      return t;\n   };\n\n   const startAnimation = () => {\n      const fromVal = resolve(from);\n      const toVal = resolve(to);\n\n      const keys = Object.keys(fromVal) as (keyof T)[];\n\n      if (breakpoints) {\n         for (const key of keys) triggered[key] = new Set();\n      }\n\n      const start = performance.now();\n\n      const frame = (now: number) => {\n         const progress =\n            duration === 0 ? 1 : Math.min((now - start) / duration, 1);\n\n         const current: any = {} as T;\n\n         for (const key of keys) {\n            const f = forward ? fromVal[key] : toVal[key];\n            const t = forward ? toVal[key] : fromVal[key];\n\n            const eased = getEased(key, progress);\n            const val = f + (t - f) * eased;\n            current[key] = val;\n\n            // breakpoints\n            const bps = breakpoints?.[key];\n            if (bps) {\n               for (let i = 0; i < bps.length; i++) {\n                  const triggeredSet = triggered[key]!;\n                  if (\n                     !triggeredSet.has(i) &&\n                     ((f < t && val >= bps[i].value) ||\n                        (f > t && val <= bps[i].value))\n                  ) {\n                     triggeredSet.add(i);\n                     bps[i].callback();\n                  }\n               }\n            }\n         }\n\n         onUpdate(current, progress);\n\n         if (progress < 1) {\n            rafId = requestAnimationFrame(frame);\n         } else {\n            const finalState = forward ? toVal : fromVal;\n            onUpdate(finalState, 1);\n\n            // fire remaining breakpoints\n            if (breakpoints) {\n               for (const key of keys) {\n                  const bps = breakpoints[key];\n                  if (!bps) continue;\n\n                  const triggeredSet = triggered[key]!;\n                  for (let i = 0; i < bps.length; i++) {\n                     if (!triggeredSet.has(i)) {\n                        triggeredSet.add(i);\n                        bps[i].callback();\n                     }\n                  }\n               }\n            }\n\n            cycle++;\n\n            if (cycle <= repeat) {\n               if (repeatBack) forward = !forward;\n               startAnimation(); // 🔁 re-run with fresh from/to if functions\n            } else {\n               const finalState = forward ? toVal : fromVal;\n               onDone?.(finalState);\n            }\n         }\n      };\n\n      rafId = requestAnimationFrame(frame);\n   };\n\n   if (delay > 0) {\n      const timeout = setTimeout(startAnimation, delay);\n      return () => {\n         clearTimeout(timeout);\n         cancelAnimationFrame(rafId);\n      };\n   } else {\n      startAnimation();\n      return () => cancelAnimationFrame(rafId);\n   }\n};\n\nexport default animate;"],"names":[],"mappings":";;;;;;;AAkBA;AAYG;;;;;;AAUA;;AACqC;;AACjB;AACjB;AACH;;AAGG;AACA;;;;AAK2B;;AAG3B;AAEA;;;AAMG;AACG;AACA;;;AAIA;;;;AAKG;AACG;AACA;AAEG;AACG;AAEH;AACA;;;;;AAMZ;AAEA;AACG;;;;AAGA;;;AAIG;AACG;AACA;;AAEA;AACA;;AAEM;AACA;;;;;AAMZ;AAEA;AACG;;;;;;AAIA;;;AAGT;AAEA;AACH;AAEA;;AAEG;;;AAGA;;;AAEA;AACA;;AAEN;;;"}

package/animate/index.d.ts

@@ -5,7 +5,7 @@ type AnimateOptions<T extends Record<string, number>> = {
     delay?: number;
     easing?: ((t: number) => number) | Partial<Record<keyof T, (t: number) => number>>;
     onUpdate: (value: T, progress: number) => void;
-    onDone?: () => void;
+    onDone?: (value: T) => void;
     breakpoints?: Partial<Record<keyof T, Array<{
         value: number;
         callback: () => void;

package/animate/index.js

@@ -76,7 +76,8 @@ const animate = ({ from, to, duration = 400, delay = 0, easing = Easing.default,
                     startAnimation(); // 🔁 re-run with fresh from/to if functions
                 }
                 else {
-                    onDone === null || onDone === void 0 ? void 0 : onDone();
+                    const finalState = forward ? toVal : fromVal;
+                    onDone === null || onDone === void 0 ? void 0 : onDone(finalState);
                 }
             }
         };

package/animate/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/animate/index.ts"],"sourcesContent":["\"use client\"\nimport Easing from \"./easing\";\n\nexport { Easing };\n\nexport type AnimateOptions<T extends Record<string, number>> = {\n   from: T | (() => T);\n   to: T | (() => T);\n   duration?: number;\n   delay?: number;\n   easing?: ((t: number) => number) | Partial<Record<keyof T, (t: number) => number>>;\n   onUpdate: (value: T, progress: number) => void;\n   onDone?: () => void;\n   breakpoints?: Partial<Record<keyof T, Array<{ value: number; callback: () => void }>>>;\n   repeat?: number;\n   repeatBack?: boolean;\n};\n\nconst animate = <T extends Record<string, number>>({\n   from,\n   to,\n   duration = 400,\n   delay = 0,\n   easing = Easing.default,\n   onUpdate,\n   onDone,\n   breakpoints,\n   repeat = 0,\n   repeatBack = false,\n}: AnimateOptions<T>) => {\n   let rafId: number;\n   let cycle = 0;\n   let forward = true;\n\n   // Track triggered breakpoints\n   const triggered: Partial<Record<keyof T, Set<number>>> = {};\n\n   const resolve = (val: T | (() => T)): T =>\n      typeof val === \"function\" ? (val as () => T)() : val;\n\n   const getEased = (key: keyof T, t: number) => {\n      if (typeof easing === \"function\") return easing(t);\n      if (easing[key]) return easing[key]!(t);\n      return t;\n   };\n\n   const startAnimation = () => {\n      const fromVal = resolve(from);\n      const toVal = resolve(to);\n\n      const keys = Object.keys(fromVal) as (keyof T)[];\n\n      if (breakpoints) {\n         for (const key of keys) triggered[key] = new Set();\n      }\n\n      const start = performance.now();\n\n      const frame = (now: number) => {\n         const progress =\n            duration === 0 ? 1 : Math.min((now - start) / duration, 1);\n\n         const current: any = {} as T;\n\n         for (const key of keys) {\n            const f = forward ? fromVal[key] : toVal[key];\n            const t = forward ? toVal[key] : fromVal[key];\n\n            const eased = getEased(key, progress);\n            const val = f + (t - f) * eased;\n            current[key] = val;\n\n            // breakpoints\n            const bps = breakpoints?.[key];\n            if (bps) {\n               for (let i = 0; i < bps.length; i++) {\n                  const triggeredSet = triggered[key]!;\n                  if (\n                     !triggeredSet.has(i) &&\n                     ((f < t && val >= bps[i].value) ||\n                        (f > t && val <= bps[i].value))\n                  ) {\n                     triggeredSet.add(i);\n                     bps[i].callback();\n                  }\n               }\n            }\n         }\n\n         onUpdate(current, progress);\n\n         if (progress < 1) {\n            rafId = requestAnimationFrame(frame);\n         } else {\n            const finalState = forward ? toVal : fromVal;\n            onUpdate(finalState, 1);\n\n            // fire remaining breakpoints\n            if (breakpoints) {\n               for (const key of keys) {\n                  const bps = breakpoints[key];\n                  if (!bps) continue;\n\n                  const triggeredSet = triggered[key]!;\n                  for (let i = 0; i < bps.length; i++) {\n                     if (!triggeredSet.has(i)) {\n                        triggeredSet.add(i);\n                        bps[i].callback();\n                     }\n                  }\n               }\n            }\n\n            cycle++;\n\n            if (cycle <= repeat) {\n               if (repeatBack) forward = !forward;\n               startAnimation(); // 🔁 re-run with fresh from/to if functions\n            } else {\n               onDone?.();\n            }\n         }\n      };\n\n      rafId = requestAnimationFrame(frame);\n   };\n\n   if (delay > 0) {\n      const timeout = setTimeout(startAnimation, delay);\n      return () => {\n         clearTimeout(timeout);\n         cancelAnimationFrame(rafId);\n      };\n   } else {\n      startAnimation();\n      return () => cancelAnimationFrame(rafId);\n   }\n};\n\nexport default animate;"],"names":[],"mappings":";;;AAkBA;AAYG;;;;;;AAUA;;AACqC;;AACjB;AACjB;AACH;;AAGG;AACA;;;;AAK2B;;AAG3B;AAEA;;;AAMG;AACG;AACA;;;AAIA;;;;AAKG;AACG;AACA;AAEG;AACG;AAEH;AACA;;;;;AAMZ;AAEA;AACG;;;;AAGA;;;AAIG;AACG;AACA;;AAEA;AACA;;AAEM;AACA;;;;;AAMZ;AAEA;AACG;;;;;AAGA;;;AAGT;AAEA;AACH;AAEA;;AAEG;;;AAGA;;;AAEA;AACA;;AAEN;;"}
+{"version":3,"file":"index.js","sources":["../../src/animate/index.ts"],"sourcesContent":["\"use client\"\nimport Easing from \"./easing\";\n\nexport { Easing };\n\nexport type AnimateOptions<T extends Record<string, number>> = {\n   from: T | (() => T);\n   to: T | (() => T);\n   duration?: number;\n   delay?: number;\n   easing?: ((t: number) => number) | Partial<Record<keyof T, (t: number) => number>>;\n   onUpdate: (value: T, progress: number) => void;\n   onDone?: (value: T) => void;\n   breakpoints?: Partial<Record<keyof T, Array<{ value: number; callback: () => void }>>>;\n   repeat?: number;\n   repeatBack?: boolean;\n};\n\nconst animate = <T extends Record<string, number>>({\n   from,\n   to,\n   duration = 400,\n   delay = 0,\n   easing = Easing.default,\n   onUpdate,\n   onDone,\n   breakpoints,\n   repeat = 0,\n   repeatBack = false,\n}: AnimateOptions<T>) => {\n   let rafId: number;\n   let cycle = 0;\n   let forward = true;\n\n   // Track triggered breakpoints\n   const triggered: Partial<Record<keyof T, Set<number>>> = {};\n\n   const resolve = (val: T | (() => T)): T =>\n      typeof val === \"function\" ? (val as () => T)() : val;\n\n   const getEased = (key: keyof T, t: number) => {\n      if (typeof easing === \"function\") return easing(t);\n      if (easing[key]) return easing[key]!(t);\n      return t;\n   };\n\n   const startAnimation = () => {\n      const fromVal = resolve(from);\n      const toVal = resolve(to);\n\n      const keys = Object.keys(fromVal) as (keyof T)[];\n\n      if (breakpoints) {\n         for (const key of keys) triggered[key] = new Set();\n      }\n\n      const start = performance.now();\n\n      const frame = (now: number) => {\n         const progress =\n            duration === 0 ? 1 : Math.min((now - start) / duration, 1);\n\n         const current: any = {} as T;\n\n         for (const key of keys) {\n            const f = forward ? fromVal[key] : toVal[key];\n            const t = forward ? toVal[key] : fromVal[key];\n\n            const eased = getEased(key, progress);\n            const val = f + (t - f) * eased;\n            current[key] = val;\n\n            // breakpoints\n            const bps = breakpoints?.[key];\n            if (bps) {\n               for (let i = 0; i < bps.length; i++) {\n                  const triggeredSet = triggered[key]!;\n                  if (\n                     !triggeredSet.has(i) &&\n                     ((f < t && val >= bps[i].value) ||\n                        (f > t && val <= bps[i].value))\n                  ) {\n                     triggeredSet.add(i);\n                     bps[i].callback();\n                  }\n               }\n            }\n         }\n\n         onUpdate(current, progress);\n\n         if (progress < 1) {\n            rafId = requestAnimationFrame(frame);\n         } else {\n            const finalState = forward ? toVal : fromVal;\n            onUpdate(finalState, 1);\n\n            // fire remaining breakpoints\n            if (breakpoints) {\n               for (const key of keys) {\n                  const bps = breakpoints[key];\n                  if (!bps) continue;\n\n                  const triggeredSet = triggered[key]!;\n                  for (let i = 0; i < bps.length; i++) {\n                     if (!triggeredSet.has(i)) {\n                        triggeredSet.add(i);\n                        bps[i].callback();\n                     }\n                  }\n               }\n            }\n\n            cycle++;\n\n            if (cycle <= repeat) {\n               if (repeatBack) forward = !forward;\n               startAnimation(); // 🔁 re-run with fresh from/to if functions\n            } else {\n               const finalState = forward ? toVal : fromVal;\n               onDone?.(finalState);\n            }\n         }\n      };\n\n      rafId = requestAnimationFrame(frame);\n   };\n\n   if (delay > 0) {\n      const timeout = setTimeout(startAnimation, delay);\n      return () => {\n         clearTimeout(timeout);\n         cancelAnimationFrame(rafId);\n      };\n   } else {\n      startAnimation();\n      return () => cancelAnimationFrame(rafId);\n   }\n};\n\nexport default animate;"],"names":[],"mappings":";;;AAkBA;AAYG;;;;;;AAUA;;AACqC;;AACjB;AACjB;AACH;;AAGG;AACA;;;;AAK2B;;AAG3B;AAEA;;;AAMG;AACG;AACA;;;AAIA;;;;AAKG;AACG;AACA;AAEG;AACG;AAEH;AACA;;;;;AAMZ;AAEA;AACG;;;;AAGA;;;AAIG;AACG;AACA;;AAEA;AACA;;AAEM;AACA;;;;;AAMZ;AAEA;AACG;;;;;;AAIA;;;AAGT;AAEA;AACH;AAEA;;AAEG;;;AAGA;;;AAEA;AACA;;AAEN;;"}

package/hooks/useTransition.cjs

@@ -47,7 +47,7 @@ const useTransition = (props) => {
                 setStatus("exited");
                 onExited === null || onExited === void 0 ? void 0 : onExited();
             }
-            (_c = options.onDone) === null || _c === void 0 ? void 0 : _c.call(options);
+            (_c = options.onDone) === null || _c === void 0 ? void 0 : _c.call(options, stateRef.current);
             return;
         }
         animating.current = index.default(Object.assign(Object.assign({}, options), { from,
@@ -55,7 +55,7 @@ const useTransition = (props) => {
                 var _a;
                 stateRef.current = value;
                 (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, value, progress);
-            }, onDone: () => {
+            }, onDone: (value) => {
                 var _a;
                 if (nextOpen) {
                     setStatus("entered");
@@ -65,7 +65,7 @@ const useTransition = (props) => {
                     setStatus("exited");
                     onExited === null || onExited === void 0 ? void 0 : onExited();
                 }
-                (_a = options.onDone) === null || _a === void 0 ? void 0 : _a.call(options);
+                (_a = options.onDone) === null || _a === void 0 ? void 0 : _a.call(options, value);
             } }));
     }, [options, onEnter, onEntered, onExit, onExited]);
     const enter = React.useCallback((withAnimation = true) => {

package/hooks/useTransition.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTransition.cjs","sources":["../../src/hooks/useTransition.ts"],"sourcesContent":["\"use client\"\nimport { useRef, useState, useCallback, useLayoutEffect } from \"react\"\nimport animate, { AnimateOptions } from \"../animate\"\n\nexport type UseTransitionStatus =\n   | \"entering\"\n   | \"entered\"\n   | \"exiting\"\n   | \"exited\"\n\nexport type UseTransitionProps<T extends Record<string, number>> = AnimateOptions<T> & {\n   initialStatus?: \"entered\" | \"exited\"\n   onEnter?: () => void\n   onEntered?: () => void\n   onExit?: () => void\n   onExited?: () => void\n}\n\nconst useTransition = <T extends Record<string, number>>(props: UseTransitionProps<T>) => {\n   const {\n      initialStatus = \"exited\",\n      onEnter,\n      onEntered,\n      onExit,\n      onExited,\n      ...options\n   } = props\n\n   const resolve = (val: T | (() => T)): T =>\n      typeof val === \"function\" ? (val as () => T)() : val\n\n   const [open, setOpen] = useState(initialStatus === \"entered\")\n   const [status, setStatus] = useState<UseTransitionStatus>(initialStatus)\n\n   const stateRef = useRef<T | null>(null)\n   const readyRef = useRef(false)\n\n   const animating = useRef<null | (() => void)>(null)\n\n   useLayoutEffect(() => {\n      const from = resolve(options.from)\n      const to = resolve(options.to)\n      stateRef.current = initialStatus === \"entered\" ? to : from\n      readyRef.current = true\n   }, [])\n\n   const run = useCallback(\n      (nextOpen: boolean, withAnimation = true) => {\n         if (!readyRef.current || !stateRef.current) return\n\n         animating.current?.()\n\n         const resolvedFrom = resolve(options.from)\n         const resolvedTo = resolve(options.to)\n         const from = stateRef.current\n         const to = nextOpen ? resolvedTo : resolvedFrom\n\n         if (nextOpen) {\n            setStatus(\"entering\")\n            onEnter?.()\n         } else {\n            setStatus(\"exiting\")\n            onExit?.()\n         }\n\n         if (!withAnimation) {\n            stateRef.current = to\n            options.onUpdate?.(to, 1)\n\n            if (nextOpen) {\n               setStatus(\"entered\")\n               onEntered?.()\n            } else {\n               setStatus(\"exited\")\n               onExited?.()\n            }\n\n            options.onDone?.()\n            return\n         }\n\n         animating.current = animate({\n            ...options,\n            from,\n            to,\n            duration: options.duration ?? 400,\n            onUpdate: (value: T, progress: number) => {\n               stateRef.current = value\n               options.onUpdate?.(value, progress)\n            },\n            onDone: () => {\n               if (nextOpen) {\n                  setStatus(\"entered\")\n                  onEntered?.()\n               } else {\n                  setStatus(\"exited\")\n                  onExited?.()\n               }\n               options.onDone?.()\n            },\n         })\n      },\n      [options, onEnter, onEntered, onExit, onExited]\n   )\n\n   const enter = useCallback((withAnimation = true) => {\n      setOpen(true)\n      run(true, withAnimation)\n   }, [run])\n\n   const exit = useCallback((withAnimation = true) => {\n      setOpen(false)\n      run(false, withAnimation)\n   }, [run])\n\n   const toggle = useCallback((withAnimation = true) => {\n      setOpen((prev) => {\n         const next = !prev\n         run(next, withAnimation)\n         return next\n      })\n   }, [run])\n\n   return {\n      isEntered: open,\n      status,\n      state: stateRef,\n      enter,\n      exit,\n      toggle,\n      isReady: readyRef.current\n   }\n}\n\nexport default useTransition"],"names":[],"mappings":";;;;;;;AAkBA;;;AAaG;;AAGA;AACA;AAEA;;;;AAKG;AACA;;;;;;AAOG;;;AAIA;;;;AAKG;;;;AAGA;;;AAIA;;;;AAKG;;;;AAGA;;AAGH;;;AAIH;AAGG;;AAGG;;AAEH;;;;AAIM;;;;AAGA;;AAEH;AACH;AAEN;;;AAMA;AACH;;;AAIG;AACH;;AAGG;AACG;AACA;AACA;AACH;AACH;;AAGG;;AAEA;;;;;;AAMN;;"}
+{"version":3,"file":"useTransition.cjs","sources":["../../src/hooks/useTransition.ts"],"sourcesContent":["\"use client\"\nimport { useRef, useState, useCallback, useLayoutEffect } from \"react\"\nimport animate, { AnimateOptions } from \"../animate\"\n\nexport type UseTransitionStatus =\n   | \"entering\"\n   | \"entered\"\n   | \"exiting\"\n   | \"exited\"\n\nexport type UseTransitionProps<T extends Record<string, number>> = AnimateOptions<T> & {\n   initialStatus?: \"entered\" | \"exited\"\n   onEnter?: () => void\n   onEntered?: () => void\n   onExit?: () => void\n   onExited?: () => void\n}\n\nconst useTransition = <T extends Record<string, number>>(props: UseTransitionProps<T>) => {\n   const {\n      initialStatus = \"exited\",\n      onEnter,\n      onEntered,\n      onExit,\n      onExited,\n      ...options\n   } = props\n\n   const resolve = (val: T | (() => T)): T =>\n      typeof val === \"function\" ? (val as () => T)() : val\n\n   const [open, setOpen] = useState(initialStatus === \"entered\")\n   const [status, setStatus] = useState<UseTransitionStatus>(initialStatus)\n\n   const stateRef = useRef<T | null>(null)\n   const readyRef = useRef(false)\n\n   const animating = useRef<null | (() => void)>(null)\n\n   useLayoutEffect(() => {\n      const from = resolve(options.from)\n      const to = resolve(options.to)\n      stateRef.current = initialStatus === \"entered\" ? to : from\n      readyRef.current = true\n   }, [])\n\n   const run = useCallback(\n      (nextOpen: boolean, withAnimation = true) => {\n         if (!readyRef.current || !stateRef.current) return\n\n         animating.current?.()\n\n         const resolvedFrom = resolve(options.from)\n         const resolvedTo = resolve(options.to)\n         const from = stateRef.current\n         const to = nextOpen ? resolvedTo : resolvedFrom\n\n         if (nextOpen) {\n            setStatus(\"entering\")\n            onEnter?.()\n         } else {\n            setStatus(\"exiting\")\n            onExit?.()\n         }\n\n         if (!withAnimation) {\n            stateRef.current = to\n            options.onUpdate?.(to, 1)\n\n            if (nextOpen) {\n               setStatus(\"entered\")\n               onEntered?.()\n            } else {\n               setStatus(\"exited\")\n               onExited?.()\n            }\n\n            options.onDone?.(stateRef.current)\n            return\n         }\n\n         animating.current = animate({\n            ...options,\n            from,\n            to,\n            duration: options.duration ?? 400,\n            onUpdate: (value: T, progress: number) => {\n               stateRef.current = value\n               options.onUpdate?.(value, progress)\n            },\n            onDone: (value) => {\n               if (nextOpen) {\n                  setStatus(\"entered\")\n                  onEntered?.()\n               } else {\n                  setStatus(\"exited\")\n                  onExited?.()\n               }\n               options.onDone?.(value)\n            },\n         })\n      },\n      [options, onEnter, onEntered, onExit, onExited]\n   )\n\n   const enter = useCallback((withAnimation = true) => {\n      setOpen(true)\n      run(true, withAnimation)\n   }, [run])\n\n   const exit = useCallback((withAnimation = true) => {\n      setOpen(false)\n      run(false, withAnimation)\n   }, [run])\n\n   const toggle = useCallback((withAnimation = true) => {\n      setOpen((prev) => {\n         const next = !prev\n         run(next, withAnimation)\n         return next\n      })\n   }, [run])\n\n   return {\n      isEntered: open,\n      status,\n      state: stateRef,\n      enter,\n      exit,\n      toggle,\n      isReady: readyRef.current\n   }\n}\n\nexport default useTransition"],"names":[],"mappings":";;;;;;;AAkBA;;;AAaG;;AAGA;AACA;AAEA;;;;AAKG;AACA;;;;;;AAOG;;;AAIA;;;;AAKG;;;;AAGA;;;AAIA;;;;AAKG;;;;AAGA;;;;;AAON;AAGG;;AAGG;;AAEH;;;;AAIM;;;;AAGA;;AAEH;AACH;AAEN;;;AAMA;AACH;;;AAIG;AACH;;AAGG;AACG;AACA;AACA;AACH;AACH;;AAGG;;AAEA;;;;;;AAMN;;"}

package/hooks/useTransition.js

@@ -45,7 +45,7 @@ const useTransition = (props) => {
                 setStatus("exited");
                 onExited === null || onExited === void 0 ? void 0 : onExited();
             }
-            (_c = options.onDone) === null || _c === void 0 ? void 0 : _c.call(options);
+            (_c = options.onDone) === null || _c === void 0 ? void 0 : _c.call(options, stateRef.current);
             return;
         }
         animating.current = animate(Object.assign(Object.assign({}, options), { from,
@@ -53,7 +53,7 @@ const useTransition = (props) => {
                 var _a;
                 stateRef.current = value;
                 (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, value, progress);
-            }, onDone: () => {
+            }, onDone: (value) => {
                 var _a;
                 if (nextOpen) {
                     setStatus("entered");
@@ -63,7 +63,7 @@ const useTransition = (props) => {
                     setStatus("exited");
                     onExited === null || onExited === void 0 ? void 0 : onExited();
                 }
-                (_a = options.onDone) === null || _a === void 0 ? void 0 : _a.call(options);
+                (_a = options.onDone) === null || _a === void 0 ? void 0 : _a.call(options, value);
             } }));
     }, [options, onEnter, onEntered, onExit, onExited]);
     const enter = useCallback((withAnimation = true) => {

package/hooks/useTransition.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTransition.js","sources":["../../src/hooks/useTransition.ts"],"sourcesContent":["\"use client\"\nimport { useRef, useState, useCallback, useLayoutEffect } from \"react\"\nimport animate, { AnimateOptions } from \"../animate\"\n\nexport type UseTransitionStatus =\n   | \"entering\"\n   | \"entered\"\n   | \"exiting\"\n   | \"exited\"\n\nexport type UseTransitionProps<T extends Record<string, number>> = AnimateOptions<T> & {\n   initialStatus?: \"entered\" | \"exited\"\n   onEnter?: () => void\n   onEntered?: () => void\n   onExit?: () => void\n   onExited?: () => void\n}\n\nconst useTransition = <T extends Record<string, number>>(props: UseTransitionProps<T>) => {\n   const {\n      initialStatus = \"exited\",\n      onEnter,\n      onEntered,\n      onExit,\n      onExited,\n      ...options\n   } = props\n\n   const resolve = (val: T | (() => T)): T =>\n      typeof val === \"function\" ? (val as () => T)() : val\n\n   const [open, setOpen] = useState(initialStatus === \"entered\")\n   const [status, setStatus] = useState<UseTransitionStatus>(initialStatus)\n\n   const stateRef = useRef<T | null>(null)\n   const readyRef = useRef(false)\n\n   const animating = useRef<null | (() => void)>(null)\n\n   useLayoutEffect(() => {\n      const from = resolve(options.from)\n      const to = resolve(options.to)\n      stateRef.current = initialStatus === \"entered\" ? to : from\n      readyRef.current = true\n   }, [])\n\n   const run = useCallback(\n      (nextOpen: boolean, withAnimation = true) => {\n         if (!readyRef.current || !stateRef.current) return\n\n         animating.current?.()\n\n         const resolvedFrom = resolve(options.from)\n         const resolvedTo = resolve(options.to)\n         const from = stateRef.current\n         const to = nextOpen ? resolvedTo : resolvedFrom\n\n         if (nextOpen) {\n            setStatus(\"entering\")\n            onEnter?.()\n         } else {\n            setStatus(\"exiting\")\n            onExit?.()\n         }\n\n         if (!withAnimation) {\n            stateRef.current = to\n            options.onUpdate?.(to, 1)\n\n            if (nextOpen) {\n               setStatus(\"entered\")\n               onEntered?.()\n            } else {\n               setStatus(\"exited\")\n               onExited?.()\n            }\n\n            options.onDone?.()\n            return\n         }\n\n         animating.current = animate({\n            ...options,\n            from,\n            to,\n            duration: options.duration ?? 400,\n            onUpdate: (value: T, progress: number) => {\n               stateRef.current = value\n               options.onUpdate?.(value, progress)\n            },\n            onDone: () => {\n               if (nextOpen) {\n                  setStatus(\"entered\")\n                  onEntered?.()\n               } else {\n                  setStatus(\"exited\")\n                  onExited?.()\n               }\n               options.onDone?.()\n            },\n         })\n      },\n      [options, onEnter, onEntered, onExit, onExited]\n   )\n\n   const enter = useCallback((withAnimation = true) => {\n      setOpen(true)\n      run(true, withAnimation)\n   }, [run])\n\n   const exit = useCallback((withAnimation = true) => {\n      setOpen(false)\n      run(false, withAnimation)\n   }, [run])\n\n   const toggle = useCallback((withAnimation = true) => {\n      setOpen((prev) => {\n         const next = !prev\n         run(next, withAnimation)\n         return next\n      })\n   }, [run])\n\n   return {\n      isEntered: open,\n      status,\n      state: stateRef,\n      enter,\n      exit,\n      toggle,\n      isReady: readyRef.current\n   }\n}\n\nexport default useTransition"],"names":[],"mappings":";;;;;AAkBA;;;AAaG;;AAGA;AACA;AAEA;;;;AAKG;AACA;;;;;;AAOG;;;AAIA;;;;AAKG;;;;AAGA;;;AAIA;;;;AAKG;;;;AAGA;;AAGH;;;AAIH;AAGG;;AAGG;;AAEH;;;;AAIM;;;;AAGA;;AAEH;AACH;AAEN;;;AAMA;AACH;;;AAIG;AACH;;AAGG;AACG;AACA;AACA;AACH;AACH;;AAGG;;AAEA;;;;;;AAMN;;"}
+{"version":3,"file":"useTransition.js","sources":["../../src/hooks/useTransition.ts"],"sourcesContent":["\"use client\"\nimport { useRef, useState, useCallback, useLayoutEffect } from \"react\"\nimport animate, { AnimateOptions } from \"../animate\"\n\nexport type UseTransitionStatus =\n   | \"entering\"\n   | \"entered\"\n   | \"exiting\"\n   | \"exited\"\n\nexport type UseTransitionProps<T extends Record<string, number>> = AnimateOptions<T> & {\n   initialStatus?: \"entered\" | \"exited\"\n   onEnter?: () => void\n   onEntered?: () => void\n   onExit?: () => void\n   onExited?: () => void\n}\n\nconst useTransition = <T extends Record<string, number>>(props: UseTransitionProps<T>) => {\n   const {\n      initialStatus = \"exited\",\n      onEnter,\n      onEntered,\n      onExit,\n      onExited,\n      ...options\n   } = props\n\n   const resolve = (val: T | (() => T)): T =>\n      typeof val === \"function\" ? (val as () => T)() : val\n\n   const [open, setOpen] = useState(initialStatus === \"entered\")\n   const [status, setStatus] = useState<UseTransitionStatus>(initialStatus)\n\n   const stateRef = useRef<T | null>(null)\n   const readyRef = useRef(false)\n\n   const animating = useRef<null | (() => void)>(null)\n\n   useLayoutEffect(() => {\n      const from = resolve(options.from)\n      const to = resolve(options.to)\n      stateRef.current = initialStatus === \"entered\" ? to : from\n      readyRef.current = true\n   }, [])\n\n   const run = useCallback(\n      (nextOpen: boolean, withAnimation = true) => {\n         if (!readyRef.current || !stateRef.current) return\n\n         animating.current?.()\n\n         const resolvedFrom = resolve(options.from)\n         const resolvedTo = resolve(options.to)\n         const from = stateRef.current\n         const to = nextOpen ? resolvedTo : resolvedFrom\n\n         if (nextOpen) {\n            setStatus(\"entering\")\n            onEnter?.()\n         } else {\n            setStatus(\"exiting\")\n            onExit?.()\n         }\n\n         if (!withAnimation) {\n            stateRef.current = to\n            options.onUpdate?.(to, 1)\n\n            if (nextOpen) {\n               setStatus(\"entered\")\n               onEntered?.()\n            } else {\n               setStatus(\"exited\")\n               onExited?.()\n            }\n\n            options.onDone?.(stateRef.current)\n            return\n         }\n\n         animating.current = animate({\n            ...options,\n            from,\n            to,\n            duration: options.duration ?? 400,\n            onUpdate: (value: T, progress: number) => {\n               stateRef.current = value\n               options.onUpdate?.(value, progress)\n            },\n            onDone: (value) => {\n               if (nextOpen) {\n                  setStatus(\"entered\")\n                  onEntered?.()\n               } else {\n                  setStatus(\"exited\")\n                  onExited?.()\n               }\n               options.onDone?.(value)\n            },\n         })\n      },\n      [options, onEnter, onEntered, onExit, onExited]\n   )\n\n   const enter = useCallback((withAnimation = true) => {\n      setOpen(true)\n      run(true, withAnimation)\n   }, [run])\n\n   const exit = useCallback((withAnimation = true) => {\n      setOpen(false)\n      run(false, withAnimation)\n   }, [run])\n\n   const toggle = useCallback((withAnimation = true) => {\n      setOpen((prev) => {\n         const next = !prev\n         run(next, withAnimation)\n         return next\n      })\n   }, [run])\n\n   return {\n      isEntered: open,\n      status,\n      state: stateRef,\n      enter,\n      exit,\n      toggle,\n      isReady: readyRef.current\n   }\n}\n\nexport default useTransition"],"names":[],"mappings":";;;;;AAkBA;;;AAaG;;AAGA;AACA;AAEA;;;;AAKG;AACA;;;;;;AAOG;;;AAIA;;;;AAKG;;;;AAGA;;;AAIA;;;;AAKG;;;;AAGA;;;;;AAON;AAGG;;AAGG;;AAEH;;;;AAIM;;;;AAGA;;AAEH;AACH;AAEN;;;AAMA;AACH;;;AAIG;AACH;;AAGG;AACG;AACA;AACA;AACH;AACH;;AAGG;;AAEA;;;;;;AAMN;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xanui/core",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Xanui Core Library",
   "private": false,
   "main": "./index.cjs",