@xanui/core 1.2.71 → 1.3.1

package/Transition/variants.cjs

@@ -1,209 +1,132 @@
+"use client";
 'use strict';
 
-const getY = (rect) => rect ? Math.min(rect.height / 2, 40) : 20;
-const getX = (rect) => rect ? Math.min(rect.width / 2, 40) : 20;
-const slideDown = (rect) => {
-    const y = getY(rect);
+const getY = (el) => (el ? Math.min(el.getBoundingClientRect().height / 2, 40) : 20);
+const getX = (el) => (el ? Math.min(el.getBoundingClientRect().width / 2, 40) : 20);
+// ------------------ Variants ------------------
+const slideDown = (el) => {
+    const y = getY(el);
     return {
-        from: {
-            transform: `translateY(-${y}px)`,
-        },
-        to: {
-            transform: `translateY(0)`,
-        }
+        from: { y: -y },
+        to: { y: 0 },
+        onUpdate: ({ y }) => (el.style.transform = `translateY(${y}px)`),
     };
 };
-const slideUp = (rect) => {
-    const y = getY(rect);
+const slideUp = (el) => {
+    const y = getY(el);
     return {
-        from: {
-            transform: `translateY(${y}px)`,
-        },
-        to: {
-            transform: `translateY(0)`,
-        }
+        from: { y },
+        to: { y: 0 },
+        onUpdate: ({ y }) => (el.style.transform = `translateY(${y}px)`),
     };
 };
-const slideRight = (rect) => {
-    const x = getX(rect);
+const slideRight = (el) => {
+    const x = getX(el);
     return {
-        from: {
-            transform: `translateX(-${x}px)`,
-        },
-        to: {
-            transform: `translateX(0)`,
-        }
+        from: { x: -x },
+        to: { x: 0 },
+        onUpdate: ({ x }) => (el.style.transform = `translateX(${x}px)`),
     };
 };
-const slideLeft = (rect) => {
-    const x = getX(rect);
+const slideLeft = (el) => {
+    const x = getX(el);
     return {
-        from: {
-            transform: `translateX(${x}px)`,
-        },
-        to: {
-            transform: `translateX(0)`,
-        }
+        from: { x },
+        to: { x: 0 },
+        onUpdate: ({ x }) => (el.style.transform = `translateX(${x}px)`),
     };
 };
-const scaleYDown = () => ({
-    from: {
-        transform: "scaleY(0.8)",
-        opacity: 0,
-        pointerEvents: 'none',
-        transformOrigin: "top"
-    },
-    to: {
-        transform: "scaleY(1)",
-        opacity: 1,
-        transformOrigin: "top"
-    }
+const fade = (el) => ({
+    from: { opacity: 0 },
+    to: { opacity: 1 },
+    onUpdate: ({ opacity }) => (el.style.opacity = opacity),
 });
-const scaleYUp = () => ({
-    from: {
-        transform: "scaleY(0.8)",
-        transformOrigin: "bottom",
-        opacity: 0,
-        pointerEvents: 'none'
-    },
-    to: {
-        transform: "scaleY(1)",
-        transformOrigin: "bottom",
-        opacity: 1
-    }
-});
-const fade = () => {
+const fadeDown = (el) => {
+    const y = getY(el);
     return {
-        from: {
-            opacity: 0,
-            pointerEvents: 'none'
-        },
-        to: {
-            opacity: 1
+        from: { y: -y, scale: 0.98, opacity: 0 },
+        to: { y: 0, scale: 1, opacity: 1 },
+        onUpdate: ({ y, scale, opacity }) => {
+            el.style.transform = `translateY(${y}px) scale(${scale})`;
+            el.style.opacity = String(opacity);
         }
     };
 };
-const fadeDown = (rect) => {
-    const y = getY(rect);
+const fadeUp = (el) => {
+    const y = getY(el);
     return {
-        from: {
-            transform: `translateY(-${y}px) scale(0.98)`,
-            opacity: 0,
-            pointerEvents: 'none'
-        },
-        to: {
-            transform: `translateY(0) scale(1)`,
-            opacity: 1
+        from: { y, scale: 0.98, opacity: 0 },
+        to: { y: 0, scale: 1, opacity: 1 },
+        onUpdate: ({ y, scale, opacity }) => {
+            el.style.transform = `translateY(${y}px) scale(${scale})`;
+            el.style.opacity = String(opacity);
         }
     };
 };
-const fadeUp = (rect) => {
-    const y = getY(rect);
+const fadeRight = (el) => {
+    const x = getX(el);
     return {
-        from: {
-            transform: `translateY(${y}px) scale(0.98)`,
-            opacity: 0,
-            pointerEvents: 'none'
-        },
-        to: {
-            transform: `translateY(0) scale(1)`,
-            opacity: 1
+        from: { x: -x, scale: 0.98, opacity: 0 },
+        to: { x: 0, scale: 1, opacity: 1 },
+        onUpdate: ({ x, scale, opacity }) => {
+            el.style.transform = `translateX(${x}px) scale(${scale})`;
+            el.style.opacity = String(opacity);
         }
     };
 };
-const fadeRight = (rect) => {
-    const x = getX(rect);
+const fadeLeft = (el) => {
+    const x = getX(el);
     return {
-        from: {
-            transform: `translateX(-${x}px) scale(0.98)`,
-            opacity: 0,
-            pointerEvents: 'none'
-        },
-        to: {
-            transform: `translateX(0) scale(1)`,
-            opacity: 1
+        from: { x, scale: 0.98, opacity: 0 },
+        to: { x: 0, scale: 1, opacity: 1 },
+        onUpdate: ({ x, scale, opacity }) => {
+            el.style.transform = `translateX(${x}px) scale(${scale})`;
+            el.style.opacity = String(opacity);
         }
     };
 };
-const fadeLeft = (rect) => {
-    const x = getX(rect);
-    return {
-        from: {
-            transform: `translateX(${x}px) scale(0.98)`,
-            opacity: 0,
-            pointerEvents: 'none'
-        },
-        to: {
-            transform: `translateX(0) scale(1)`,
-            opacity: 1
-        }
-    };
-};
-const grow = () => {
-    return {
-        from: {
-            transform: "scale(.8, .6)",
-            opacity: 0,
-            pointerEvents: 'none'
-        },
-        to: {
-            transform: "scale(1)",
-            opacity: 1
-        }
-    };
-};
-const zoom = () => {
-    return {
-        from: {
-            transform: "scale(.8)",
-            transformOrigin: "center",
-            opacity: 0,
-            pointerEvents: 'none'
-        },
-        to: {
-            transform: "scale(1)",
-            transformOrigin: "center",
-            opacity: 1
-        }
-    };
-};
-const zoomOver = () => {
-    return {
-        from: {
-            transform: "scale(1.2)",
-            transformOrigin: "center",
-            opacity: 0,
-            pointerEvents: 'none'
-        },
-        to: {
-            transform: "scale(1)",
-            transformOrigin: "center",
-            opacity: 1
-        }
-    };
-};
-const collapseVertical = (rect) => {
+const zoom = (el) => ({
+    from: { scale: 0.8, opacity: 0 },
+    to: { scale: 1, opacity: 1 },
+    onUpdate: ({ scale, opacity }) => {
+        el.style.transform = `scale(${scale})`;
+        el.style.opacity = String(opacity);
+    },
+});
+const zoomOver = (el) => ({
+    from: { scale: 1.2, opacity: 0 },
+    to: { scale: 1, opacity: 1 },
+    onUpdate: ({ scale, opacity }) => {
+        el.style.transform = `scale(${scale})`;
+        el.style.opacity = String(opacity);
+    },
+});
+const grow = (el) => ({
+    from: { scaleX: 0.8, scaleY: 0.6, opacity: 0 },
+    to: { scaleX: 1, scaleY: 1, opacity: 1 },
+    onUpdate: ({ scaleX, scaleY, opacity }) => {
+        el.style.transform = `scale(${scaleX}, ${scaleY})`;
+        el.style.opacity = String(opacity);
+    }
+});
+const collapseVertical = (el) => {
+    const height = el.getBoundingClientRect().height;
     return {
-        from: {
-            maxHeight: "0px",
-            overflow: "hidden"
+        from: { maxHeight: 0 },
+        to: { maxHeight: height },
+        onUpdate: ({ maxHeight }) => {
+            el.style.maxHeight = `${maxHeight}px`;
         },
-        to: {
-            maxHeight: rect.height + "px",
-            overflow: "hidden"
-        }
     };
 };
-const collapseHorizontal = (rect) => {
+const collapseHorizontal = (el) => {
+    const width = el.getBoundingClientRect().width;
     return {
-        from: {
-            width: "0px",
-            overflow: "hidden"
+        from: { width: 0 },
+        to: { width },
+        onUpdate: ({ width }) => {
+            el.style.width = `${width}px`;
         },
-        to: {
-            width: rect.width + "px",
-            overflow: "hidden"
-        }
     };
 };
 
@@ -215,8 +138,6 @@ exports.fadeLeft = fadeLeft;
 exports.fadeRight = fadeRight;
 exports.fadeUp = fadeUp;
 exports.grow = grow;
-exports.scaleYDown = scaleYDown;
-exports.scaleYUp = scaleYUp;
 exports.slideDown = slideDown;
 exports.slideLeft = slideLeft;
 exports.slideRight = slideRight;

package/Transition/variants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"variants.cjs","sources":["../../src/Transition/variants.ts"],"sourcesContent":["\nconst getY = (rect?: DOMRect) =>\n    rect ? Math.min(rect.height / 2, 40) : 20\n\nconst getX = (rect?: DOMRect) =>\n    rect ? Math.min(rect.width / 2, 40) : 20\n\n\n\nexport const slideDown = (rect?: DOMRect) => {\n    const y = getY(rect)\n\n    return {\n        from: {\n            transform: `translateY(-${y}px)`,\n        },\n        to: {\n            transform: `translateY(0)`,\n        }\n    }\n}\n\nexport const slideUp = (rect?: DOMRect) => {\n    const y = getY(rect)\n\n    return {\n        from: {\n            transform: `translateY(${y}px)`,\n        },\n        to: {\n            transform: `translateY(0)`,\n        }\n    }\n}\n\nexport const slideRight = (rect?: DOMRect) => {\n    const x = getX(rect)\n\n    return {\n        from: {\n            transform: `translateX(-${x}px)`,\n        },\n        to: {\n            transform: `translateX(0)`,\n        }\n    }\n}\n\nexport const slideLeft = (rect?: DOMRect) => {\n    const x = getX(rect)\n\n    return {\n        from: {\n            transform: `translateX(${x}px)`,\n        },\n        to: {\n            transform: `translateX(0)`,\n        }\n    }\n}\n\nexport const scaleYDown = () => ({\n    from: {\n        transform: \"scaleY(0.8)\",\n        opacity: 0,\n        pointerEvents: 'none',\n        transformOrigin: \"top\"\n    },\n    to: {\n        transform: \"scaleY(1)\",\n        opacity: 1,\n        transformOrigin: \"top\"\n    }\n})\n\nexport const scaleYUp = () => ({\n    from: {\n        transform: \"scaleY(0.8)\",\n        transformOrigin: \"bottom\",\n        opacity: 0,\n        pointerEvents: 'none'\n    },\n    to: {\n        transform: \"scaleY(1)\",\n        transformOrigin: \"bottom\",\n        opacity: 1\n    }\n})\n\nexport const fade = () => {\n    return {\n        from: {\n            opacity: 0,\n            pointerEvents: 'none'\n        },\n        to: {\n            opacity: 1\n        }\n    }\n}\n\n\nexport const fadeDown = (rect?: DOMRect) => {\n    const y = getY(rect)\n\n    return {\n        from: {\n            transform: `translateY(-${y}px) scale(0.98)`,\n            opacity: 0,\n            pointerEvents: 'none'\n        },\n        to: {\n            transform: `translateY(0) scale(1)`,\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeUp = (rect?: DOMRect) => {\n    const y = getY(rect)\n\n    return {\n        from: {\n            transform: `translateY(${y}px) scale(0.98)`,\n            opacity: 0,\n            pointerEvents: 'none'\n        },\n        to: {\n            transform: `translateY(0) scale(1)`,\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeRight = (rect?: DOMRect) => {\n    const x = getX(rect)\n\n    return {\n        from: {\n            transform: `translateX(-${x}px) scale(0.98)`,\n            opacity: 0,\n            pointerEvents: 'none'\n        },\n        to: {\n            transform: `translateX(0) scale(1)`,\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeLeft = (rect?: DOMRect) => {\n    const x = getX(rect)\n\n    return {\n        from: {\n            transform: `translateX(${x}px) scale(0.98)`,\n            opacity: 0,\n            pointerEvents: 'none'\n        },\n        to: {\n            transform: `translateX(0) scale(1)`,\n            opacity: 1\n        }\n    }\n}\n\nexport const grow = () => {\n    return {\n        from: {\n            transform: \"scale(.8, .6)\",\n            opacity: 0,\n            pointerEvents: 'none'\n        },\n        to: {\n            transform: \"scale(1)\",\n            opacity: 1\n        }\n    }\n}\n\nexport const zoom = () => {\n    return {\n        from: {\n            transform: \"scale(.8)\",\n            transformOrigin: \"center\",\n            opacity: 0,\n            pointerEvents: 'none'\n        },\n        to: {\n            transform: \"scale(1)\",\n            transformOrigin: \"center\",\n            opacity: 1\n        }\n    }\n}\n\nexport const zoomOver = () => {\n    return {\n        from: {\n            transform: \"scale(1.2)\",\n            transformOrigin: \"center\",\n            opacity: 0,\n            pointerEvents: 'none'\n        },\n        to: {\n            transform: \"scale(1)\",\n            transformOrigin: \"center\",\n            opacity: 1\n        }\n    }\n}\n\nexport const collapseVertical = (rect: DOMRect) => {\n    return {\n        from: {\n            maxHeight: \"0px\",\n            overflow: \"hidden\"\n        },\n        to: {\n            maxHeight: rect.height + \"px\",\n            overflow: \"hidden\"\n        }\n    }\n}\n\n\nexport const collapseHorizontal = (rect: DOMRect) => {\n    return {\n        from: {\n            width: \"0px\",\n            overflow: \"hidden\"\n        },\n        to: {\n            width: rect.width + \"px\",\n            overflow: \"hidden\"\n        }\n    }\n}\n\n\n\n\n"],"names":[],"mappings":";;AACA,MAAM,IAAI,GAAG,CAAC,IAAc,KACxB,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE;AAE7C,MAAM,IAAI,GAAG,CAAC,IAAc,KACxB,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE;AAIrC,MAAM,SAAS,GAAG,CAAC,IAAc,KAAI;AACxC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,YAAA,EAAe,CAAC,CAAA,GAAA,CAAK;AACnC,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,aAAA,CAAe;AAC7B;KACJ;AACL;AAEO,MAAM,OAAO,GAAG,CAAC,IAAc,KAAI;AACtC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,WAAA,EAAc,CAAC,CAAA,GAAA,CAAK;AAClC,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,aAAA,CAAe;AAC7B;KACJ;AACL;AAEO,MAAM,UAAU,GAAG,CAAC,IAAc,KAAI;AACzC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,YAAA,EAAe,CAAC,CAAA,GAAA,CAAK;AACnC,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,aAAA,CAAe;AAC7B;KACJ;AACL;AAEO,MAAM,SAAS,GAAG,CAAC,IAAc,KAAI;AACxC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,WAAA,EAAc,CAAC,CAAA,GAAA,CAAK;AAClC,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,aAAA,CAAe;AAC7B;KACJ;AACL;AAEO,MAAM,UAAU,GAAG,OAAO;AAC7B,IAAA,IAAI,EAAE;AACF,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,aAAa,EAAE,MAAM;AACrB,QAAA,eAAe,EAAE;AACpB,KAAA;AACD,IAAA,EAAE,EAAE;AACA,QAAA,SAAS,EAAE,WAAW;AACtB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,eAAe,EAAE;AACpB;AACJ,CAAA;AAEM,MAAM,QAAQ,GAAG,OAAO;AAC3B,IAAA,IAAI,EAAE;AACF,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,aAAa,EAAE;AAClB,KAAA;AACD,IAAA,EAAE,EAAE;AACA,QAAA,SAAS,EAAE,WAAW;AACtB,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,OAAO,EAAE;AACZ;AACJ,CAAA;AAEM,MAAM,IAAI,GAAG,MAAK;IACrB,OAAO;AACH,QAAA,IAAI,EAAE;AACF,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,aAAa,EAAE;AAClB,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,OAAO,EAAE;AACZ;KACJ;AACL;AAGO,MAAM,QAAQ,GAAG,CAAC,IAAc,KAAI;AACvC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,YAAA,EAAe,CAAC,CAAA,eAAA,CAAiB;AAC5C,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,aAAa,EAAE;AAClB,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,sBAAA,CAAwB;AACnC,YAAA,OAAO,EAAE;AACZ;KACJ;AACL;AAEO,MAAM,MAAM,GAAG,CAAC,IAAc,KAAI;AACrC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,WAAA,EAAc,CAAC,CAAA,eAAA,CAAiB;AAC3C,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,aAAa,EAAE;AAClB,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,sBAAA,CAAwB;AACnC,YAAA,OAAO,EAAE;AACZ;KACJ;AACL;AAEO,MAAM,SAAS,GAAG,CAAC,IAAc,KAAI;AACxC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,YAAA,EAAe,CAAC,CAAA,eAAA,CAAiB;AAC5C,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,aAAa,EAAE;AAClB,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,sBAAA,CAAwB;AACnC,YAAA,OAAO,EAAE;AACZ;KACJ;AACL;AAEO,MAAM,QAAQ,GAAG,CAAC,IAAc,KAAI;AACvC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,WAAA,EAAc,CAAC,CAAA,eAAA,CAAiB;AAC3C,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,aAAa,EAAE;AAClB,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,sBAAA,CAAwB;AACnC,YAAA,OAAO,EAAE;AACZ;KACJ;AACL;AAEO,MAAM,IAAI,GAAG,MAAK;IACrB,OAAO;AACH,QAAA,IAAI,EAAE;AACF,YAAA,SAAS,EAAE,eAAe;AAC1B,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,aAAa,EAAE;AAClB,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,UAAU;AACrB,YAAA,OAAO,EAAE;AACZ;KACJ;AACL;AAEO,MAAM,IAAI,GAAG,MAAK;IACrB,OAAO;AACH,QAAA,IAAI,EAAE;AACF,YAAA,SAAS,EAAE,WAAW;AACtB,YAAA,eAAe,EAAE,QAAQ;AACzB,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,aAAa,EAAE;AAClB,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,UAAU;AACrB,YAAA,eAAe,EAAE,QAAQ;AACzB,YAAA,OAAO,EAAE;AACZ;KACJ;AACL;AAEO,MAAM,QAAQ,GAAG,MAAK;IACzB,OAAO;AACH,QAAA,IAAI,EAAE;AACF,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,eAAe,EAAE,QAAQ;AACzB,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,aAAa,EAAE;AAClB,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,UAAU;AACrB,YAAA,eAAe,EAAE,QAAQ;AACzB,YAAA,OAAO,EAAE;AACZ;KACJ;AACL;AAEO,MAAM,gBAAgB,GAAG,CAAC,IAAa,KAAI;IAC9C,OAAO;AACH,QAAA,IAAI,EAAE;AACF,YAAA,SAAS,EAAE,KAAK;AAChB,YAAA,QAAQ,EAAE;AACb,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI;AAC7B,YAAA,QAAQ,EAAE;AACb;KACJ;AACL;AAGO,MAAM,kBAAkB,GAAG,CAAC,IAAa,KAAI;IAChD,OAAO;AACH,QAAA,IAAI,EAAE;AACF,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,QAAQ,EAAE;AACb,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI;AACxB,YAAA,QAAQ,EAAE;AACb;KACJ;AACL;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;;;;;;;"}

package/Transition/variants.d.ts

@@ -1,170 +1,152 @@
-declare const slideDown: (rect?: DOMRect) => {
+declare const slideDown: (el: HTMLElement) => {
     from: {
-        transform: string;
+        y: number;
     };
     to: {
-        transform: string;
+        y: number;
     };
+    onUpdate: ({ y }: any) => string;
 };
-declare const slideUp: (rect?: DOMRect) => {
+declare const slideUp: (el: HTMLElement) => {
     from: {
-        transform: string;
+        y: number;
     };
     to: {
-        transform: string;
+        y: number;
     };
+    onUpdate: ({ y }: any) => string;
 };
-declare const slideRight: (rect?: DOMRect) => {
+declare const slideRight: (el: HTMLElement) => {
     from: {
-        transform: string;
+        x: number;
     };
     to: {
-        transform: string;
+        x: number;
     };
+    onUpdate: ({ x }: any) => string;
 };
-declare const slideLeft: (rect?: DOMRect) => {
+declare const slideLeft: (el: HTMLElement) => {
     from: {
-        transform: string;
+        x: number;
     };
     to: {
-        transform: string;
+        x: number;
     };
+    onUpdate: ({ x }: any) => string;
 };
-declare const scaleYDown: () => {
+declare const fade: (el: HTMLElement) => {
     from: {
-        transform: string;
         opacity: number;
-        pointerEvents: string;
-        transformOrigin: string;
     };
     to: {
-        transform: string;
         opacity: number;
-        transformOrigin: string;
     };
+    onUpdate: ({ opacity }: any) => any;
 };
-declare const scaleYUp: () => {
+declare const fadeDown: (el: HTMLElement) => {
     from: {
-        transform: string;
-        transformOrigin: string;
+        y: number;
+        scale: number;
         opacity: number;
-        pointerEvents: string;
     };
     to: {
-        transform: string;
-        transformOrigin: string;
+        y: number;
+        scale: number;
         opacity: number;
     };
+    onUpdate: ({ y, scale, opacity }: any) => void;
 };
-declare const fade: () => {
+declare const fadeUp: (el: HTMLElement) => {
     from: {
+        y: number;
+        scale: number;
         opacity: number;
-        pointerEvents: string;
     };
     to: {
+        y: number;
+        scale: number;
         opacity: number;
     };
+    onUpdate: ({ y, scale, opacity }: any) => void;
 };
-declare const fadeDown: (rect?: DOMRect) => {
+declare const fadeRight: (el: HTMLElement) => {
     from: {
-        transform: string;
+        x: number;
+        scale: number;
         opacity: number;
-        pointerEvents: string;
     };
     to: {
-        transform: string;
+        x: number;
+        scale: number;
         opacity: number;
     };
+    onUpdate: ({ x, scale, opacity }: any) => void;
 };
-declare const fadeUp: (rect?: DOMRect) => {
+declare const fadeLeft: (el: HTMLElement) => {
     from: {
-        transform: string;
+        x: number;
+        scale: number;
         opacity: number;
-        pointerEvents: string;
     };
     to: {
-        transform: string;
+        x: number;
+        scale: number;
         opacity: number;
     };
+    onUpdate: ({ x, scale, opacity }: any) => void;
 };
-declare const fadeRight: (rect?: DOMRect) => {
+declare const zoom: (el: HTMLElement) => {
     from: {
-        transform: string;
+        scale: number;
         opacity: number;
-        pointerEvents: string;
     };
     to: {
-        transform: string;
+        scale: number;
         opacity: number;
     };
+    onUpdate: ({ scale, opacity }: any) => void;
 };
-declare const fadeLeft: (rect?: DOMRect) => {
+declare const zoomOver: (el: HTMLElement) => {
     from: {
-        transform: string;
+        scale: number;
         opacity: number;
-        pointerEvents: string;
     };
     to: {
-        transform: string;
+        scale: number;
         opacity: number;
     };
+    onUpdate: ({ scale, opacity }: any) => void;
 };
-declare const grow: () => {
+declare const grow: (el: HTMLElement) => {
     from: {
-        transform: string;
+        scaleX: number;
+        scaleY: number;
         opacity: number;
-        pointerEvents: string;
     };
     to: {
-        transform: string;
+        scaleX: number;
+        scaleY: number;
         opacity: number;
     };
+    onUpdate: ({ scaleX, scaleY, opacity }: any) => void;
 };
-declare const zoom: () => {
+declare const collapseVertical: (el: HTMLElement) => {
     from: {
-        transform: string;
-        transformOrigin: string;
-        opacity: number;
-        pointerEvents: string;
-    };
-    to: {
-        transform: string;
-        transformOrigin: string;
-        opacity: number;
-    };
-};
-declare const zoomOver: () => {
-    from: {
-        transform: string;
-        transformOrigin: string;
-        opacity: number;
-        pointerEvents: string;
-    };
-    to: {
-        transform: string;
-        transformOrigin: string;
-        opacity: number;
-    };
-};
-declare const collapseVertical: (rect: DOMRect) => {
-    from: {
-        maxHeight: string;
-        overflow: string;
+        maxHeight: number;
     };
     to: {
-        maxHeight: string;
-        overflow: string;
+        maxHeight: number;
     };
+    onUpdate: ({ maxHeight }: any) => void;
 };
-declare const collapseHorizontal: (rect: DOMRect) => {
+declare const collapseHorizontal: (el: HTMLElement) => {
     from: {
-        width: string;
-        overflow: string;
+        width: number;
     };
     to: {
-        width: string;
-        overflow: string;
+        width: number;
     };
+    onUpdate: ({ width }: any) => void;
 };
 
-export { collapseHorizontal, collapseVertical, fade, fadeDown, fadeLeft, fadeRight, fadeUp, grow, scaleYDown, scaleYUp, slideDown, slideLeft, slideRight, slideUp, zoom, zoomOver };
+export { collapseHorizontal, collapseVertical, fade, fadeDown, fadeLeft, fadeRight, fadeUp, grow, slideDown, slideLeft, slideRight, slideUp, zoom, zoomOver };