@xanui/core 1.2.64 → 1.2.66

package/{hooks/useTransition → Transition}/variants.d.ts

@@ -1,4 +1,4 @@
-declare const slideDown: (rect: DOMRect) => {
+declare const slideDown: (rect?: DOMRect) => {
     from: {
         transform: string;
     };
@@ -6,7 +6,7 @@ declare const slideDown: (rect: DOMRect) => {
         transform: string;
     };
 };
-declare const slideUp: (rect: DOMRect) => {
+declare const slideUp: (rect?: DOMRect) => {
     from: {
         transform: string;
     };
@@ -14,7 +14,7 @@ declare const slideUp: (rect: DOMRect) => {
         transform: string;
     };
 };
-declare const slideRight: (rect: DOMRect) => {
+declare const slideRight: (rect?: DOMRect) => {
     from: {
         transform: string;
     };
@@ -22,7 +22,7 @@ declare const slideRight: (rect: DOMRect) => {
         transform: string;
     };
 };
-declare const slideLeft: (rect: DOMRect) => {
+declare const slideLeft: (rect?: DOMRect) => {
     from: {
         transform: string;
     };
@@ -30,48 +30,79 @@ declare const slideLeft: (rect: DOMRect) => {
         transform: string;
     };
 };
+declare const scaleYDown: () => {
+    from: {
+        transform: string;
+        opacity: number;
+        pointerEvents: string;
+        transformOrigin: string;
+    };
+    to: {
+        transform: string;
+        opacity: number;
+        transformOrigin: string;
+    };
+};
+declare const scaleYUp: () => {
+    from: {
+        transform: string;
+        transformOrigin: string;
+        opacity: number;
+        pointerEvents: string;
+    };
+    to: {
+        transform: string;
+        transformOrigin: string;
+        opacity: number;
+    };
+};
 declare const fade: () => {
     from: {
         opacity: number;
+        pointerEvents: string;
     };
     to: {
         opacity: number;
     };
 };
-declare const fadeDown: () => {
+declare const fadeDown: (rect?: DOMRect) => {
     from: {
         transform: string;
         opacity: number;
+        pointerEvents: string;
     };
     to: {
         transform: string;
         opacity: number;
     };
 };
-declare const fadeUp: () => {
+declare const fadeUp: (rect?: DOMRect) => {
     from: {
         transform: string;
         opacity: number;
+        pointerEvents: string;
     };
     to: {
         transform: string;
         opacity: number;
     };
 };
-declare const fadeRight: () => {
+declare const fadeRight: (rect?: DOMRect) => {
     from: {
         transform: string;
         opacity: number;
+        pointerEvents: string;
     };
     to: {
         transform: string;
         opacity: number;
     };
 };
-declare const fadeLeft: () => {
+declare const fadeLeft: (rect?: DOMRect) => {
     from: {
         transform: string;
         opacity: number;
+        pointerEvents: string;
     };
     to: {
         transform: string;
@@ -82,6 +113,7 @@ declare const grow: () => {
     from: {
         transform: string;
         opacity: number;
+        pointerEvents: string;
     };
     to: {
         transform: string;
@@ -91,20 +123,26 @@ declare const grow: () => {
 declare const zoom: () => {
     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;
     };
 };
@@ -114,7 +152,7 @@ declare const collapseVertical: (rect: DOMRect) => {
         overflow: string;
     };
     to: {
-        maxHeight: number;
+        maxHeight: string;
         overflow: string;
     };
 };
@@ -129,4 +167,4 @@ declare const collapseHorizontal: (rect: DOMRect) => {
     };
 };
 
-export { collapseHorizontal, collapseVertical, fade, fadeDown, fadeLeft, fadeRight, fadeUp, grow, slideDown, slideLeft, slideRight, slideUp, zoom, zoomOver };
+export { collapseHorizontal, collapseVertical, fade, fadeDown, fadeLeft, fadeRight, fadeUp, grow, scaleYDown, scaleYUp, slideDown, slideLeft, slideRight, slideUp, zoom, zoomOver };

package/Transition/variants.js

@@ -0,0 +1,209 @@
+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);
+    return {
+        from: {
+            transform: `translateY(-${y}px)`,
+        },
+        to: {
+            transform: `translateY(0)`,
+        }
+    };
+};
+const slideUp = (rect) => {
+    const y = getY(rect);
+    return {
+        from: {
+            transform: `translateY(${y}px)`,
+        },
+        to: {
+            transform: `translateY(0)`,
+        }
+    };
+};
+const slideRight = (rect) => {
+    const x = getX(rect);
+    return {
+        from: {
+            transform: `translateX(-${x}px)`,
+        },
+        to: {
+            transform: `translateX(0)`,
+        }
+    };
+};
+const slideLeft = (rect) => {
+    const x = getX(rect);
+    return {
+        from: {
+            transform: `translateX(${x}px)`,
+        },
+        to: {
+            transform: `translateX(0)`,
+        }
+    };
+};
+const scaleYDown = () => ({
+    from: {
+        transform: "scaleY(0.8)",
+        opacity: 0,
+        pointerEvents: 'none',
+        transformOrigin: "top"
+    },
+    to: {
+        transform: "scaleY(1)",
+        opacity: 1,
+        transformOrigin: "top"
+    }
+});
+const scaleYUp = () => ({
+    from: {
+        transform: "scaleY(0.8)",
+        transformOrigin: "bottom",
+        opacity: 0,
+        pointerEvents: 'none'
+    },
+    to: {
+        transform: "scaleY(1)",
+        transformOrigin: "bottom",
+        opacity: 1
+    }
+});
+const fade = () => {
+    return {
+        from: {
+            opacity: 0,
+            pointerEvents: 'none'
+        },
+        to: {
+            opacity: 1
+        }
+    };
+};
+const fadeDown = (rect) => {
+    const y = getY(rect);
+    return {
+        from: {
+            transform: `translateY(-${y}px) scale(0.98)`,
+            opacity: 0,
+            pointerEvents: 'none'
+        },
+        to: {
+            transform: `translateY(0) scale(1)`,
+            opacity: 1
+        }
+    };
+};
+const fadeUp = (rect) => {
+    const y = getY(rect);
+    return {
+        from: {
+            transform: `translateY(${y}px) scale(0.98)`,
+            opacity: 0,
+            pointerEvents: 'none'
+        },
+        to: {
+            transform: `translateY(0) scale(1)`,
+            opacity: 1
+        }
+    };
+};
+const fadeRight = (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 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) => {
+    return {
+        from: {
+            maxHeight: "0px",
+            overflow: "hidden"
+        },
+        to: {
+            maxHeight: rect.height + "px",
+            overflow: "hidden"
+        }
+    };
+};
+const collapseHorizontal = (rect) => {
+    return {
+        from: {
+            width: "0px",
+            overflow: "hidden"
+        },
+        to: {
+            width: rect.width + "px",
+            overflow: "hidden"
+        }
+    };
+};
+
+export { collapseHorizontal, collapseVertical, fade, fadeDown, fadeLeft, fadeRight, fadeUp, grow, scaleYDown, scaleYUp, slideDown, slideLeft, slideRight, slideUp, zoom, zoomOver };
+//# sourceMappingURL=variants.js.map

package/Transition/variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.js","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":"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"}

package/index.cjs

@@ -7,7 +7,6 @@ var useColorTemplate = require('./hooks/useColorTemplate.cjs');
 var useBreakpoint = require('./breakpoint/useBreakpoint.cjs');
 var useBreakpointProps = require('./breakpoint/useBreakpointProps.cjs');
 var useInterface = require('./hooks/useInterface.cjs');
-var index$6 = require('./hooks/useTransition/index.cjs');
 var useMergeRefs = require('./hooks/useMergeRefs.cjs');
 var index$5 = require('./Transition/index.cjs');
 var index = require('./AppRoot/index.cjs');
@@ -17,8 +16,8 @@ var index$4 = require('./Document/index.cjs');
 var AppRootProvider = require('./AppRoot/AppRootProvider.cjs');
 var CSSCacheProvider = require('./css/CSSCacheProvider.cjs');
 var index$1 = require('./Iframe/index.cjs');
-var index$7 = require('./css/index.cjs');
-var index$8 = require('./theme/index.cjs');
+var index$6 = require('./css/index.cjs');
+var index$7 = require('./theme/index.cjs');
 var getValue = require('./css/getValue.cjs');
 var getProps = require('./css/getProps.cjs');
 var ThemeProvider = require('./theme/ThemeProvider.cjs');
@@ -35,7 +34,6 @@ exports.useColorTemplate = useColorTemplate;
 exports.useBreakpoint = useBreakpoint;
 exports.useBreakpointProps = useBreakpointProps;
 exports.useInterface = useInterface;
-exports.useTransition = index$6;
 exports.useMergeRefs = useMergeRefs;
 exports.Transition = index$5;
 exports.AppRoot = index;
@@ -47,12 +45,12 @@ exports.getCSSCache = CSSCacheProvider.getCSSCache;
 exports.useCSSCache = CSSCacheProvider.useCSSCache;
 exports.useCSSCacheId = CSSCacheProvider.useCSSCacheId;
 exports.Iframe = index$1;
-exports.adjustColor = index$7.adjustColor;
-exports.adjustTextContrast = index$7.adjustTextContrast;
-exports.alpha = index$7.alpha;
-exports.breakpoints = index$7.breakpoints;
-exports.css = index$7.css;
-exports.themeRootClass = index$8.themeRootClass;
+exports.adjustColor = index$6.adjustColor;
+exports.adjustTextContrast = index$6.adjustTextContrast;
+exports.alpha = index$6.alpha;
+exports.breakpoints = index$6.breakpoints;
+exports.css = index$6.css;
+exports.themeRootClass = index$7.themeRootClass;
 exports.getValue = getValue;
 exports.getProps = getProps;
 exports.ThemeProvider = ThemeProvider;

package/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/index.d.ts

@@ -5,9 +5,8 @@ export { UseColorTemplateColor, UseColorTemplateType, default as useColorTemplat
 export { default as useBreakpoint } from './breakpoint/useBreakpoint.js';
 export { default as useBreakpointProps, useBreakpointPropsType } from './breakpoint/useBreakpointProps.js';
 export { default as useInterface } from './hooks/useInterface.js';
-export { UseTransitionProps, UseTransitionState, UseTransitionVariant, UseTransitionVariantTypes, default as useTransition } from './hooks/useTransition/index.js';
 export { default as useMergeRefs } from './hooks/useMergeRefs.js';
-export { default as Transition, TransitionProps } from './Transition/index.js';
+export { default as Transition, TransitionProps, TransitionState, TransitionVariant, TransitionVariantTypes } from './Transition/index.js';
 export { default as AppRoot, AppRootProps } from './AppRoot/index.js';
 export { default as Portal, PortalProps } from './Portal/index.js';
 export { Renderar } from './AppRoot/Renderar.js';

package/index.js

@@ -5,7 +5,6 @@ export { default as useColorTemplate } from './hooks/useColorTemplate.js';
 export { default as useBreakpoint } from './breakpoint/useBreakpoint.js';
 export { default as useBreakpointProps } from './breakpoint/useBreakpointProps.js';
 export { default as useInterface } from './hooks/useInterface.js';
-export { default as useTransition } from './hooks/useTransition/index.js';
 export { default as useMergeRefs } from './hooks/useMergeRefs.js';
 export { default as Transition } from './Transition/index.js';
 export { default as AppRoot } from './AppRoot/index.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xanui/core",
-  "version": "1.2.64",
+  "version": "1.2.66",
   "description": "Xanui Core Library",
   "private": false,
   "main": "./index.cjs",
@@ -8,7 +8,7 @@
   "types": "./index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "oncss": "^1.2.11",
+    "oncss": "^1.2.12",
     "pretty-class": "^1.0.8"
   },
   "keywords": []

package/hooks/useTransition/index.cjs

@@ -1,108 +0,0 @@
-"use client";
-'use strict';
-
-var tslib = require('tslib');
-var React = require('react');
-var useAnimation = require('../useAnimation.cjs');
-var index$1 = require('../../css/index.cjs');
-var oncss = require('oncss');
-var variants = require('./variants.cjs');
-var index = require('../../Document/index.cjs');
-var CSSCacheProvider = require('../../css/CSSCacheProvider.cjs');
-
-const style = (obj = {}, cacheId, doc) => {
-    return index$1.css(obj, { selector: "#", container: doc, cacheId }).classname;
-};
-const getVariant = (rect, variant) => {
-    let fn = typeof variant === 'string' ? variants[variant] : variant;
-    if (!fn)
-        throw new Error(`Transition variant "${variant}" not found.`);
-    return fn(rect);
-};
-const useTransition = (_a) => {
-    var { open } = _a, props = tslib.__rest(_a, ["open"]);
-    let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, exitOnUnmount = false, onOpen, onOpened, onClose, onClosed, onState } = props;
-    const doc = index.useDocument();
-    const cacheId = CSSCacheProvider.useCSSCacheId();
-    let _ease = ease || useAnimation.animationEases[easing] || useAnimation.animationEases.bounce;
-    const id = "xui-transition-" + React.useId();
-    const [state, setState] = React.useState({
-        initial: false,
-        classname: style({ visibility: "hidden" }, cacheId, doc === null || doc === void 0 ? void 0 : doc.document),
-        variant: variant,
-        rect: null,
-        stage: open ? "open" : "closed",
-        unmounted: false,
-    });
-    const getEle = () => doc === null || doc === void 0 ? void 0 : doc.document.querySelector(`[data-transition="${id}"]`);
-    const getBoundary = () => { var _a; return state.rect || ((_a = getEle()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || new DOMRect(0, 0, 0, 0); };
-    React.useEffect(() => {
-        if (exitOnUnmount && state.stage === 'closed') {
-            if (!open) {
-                setState(s => (Object.assign(Object.assign({}, s), { initial: false, classname: "", unmounted: true, variant: variant })));
-            }
-            else {
-                setState(s => (Object.assign(Object.assign({}, s), { variant: variant, classname: style({ visibility: "hidden" }, cacheId, doc === null || doc === void 0 ? void 0 : doc.document), stage: "open" })));
-            }
-        }
-    }, [open, state.stage, exitOnUnmount, variant]);
-    // initial effect
-    React.useLayoutEffect(() => {
-        const ele = getEle();
-        if (!ele)
-            return;
-        if (exitOnUnmount && state.stage === 'closed')
-            return;
-        const rect = getBoundary();
-        let { from } = getVariant(rect, state.variant);
-        if (open && !state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: (!disableInitialTransition || state.unmounted) ? style(from, cacheId, doc === null || doc === void 0 ? void 0 : doc.document) : "", initial: true, rect: rect })));
-            let stimer = null;
-            let etimer = null;
-            ele.ontransitionstart = () => {
-                clearTimeout(stimer);
-                stimer = setTimeout(() => {
-                    const isOpen = ele.getAttribute('data-transition-state') === 'open';
-                    (onOpen && isOpen) && onOpen();
-                    (onClose && !isOpen) && onClose();
-                    onState && onState(isOpen ? "open" : "close");
-                    setState(s => (Object.assign(Object.assign({}, s), { stage: isOpen ? "open" : "close" })));
-                }, 1);
-            };
-            ele.ontransitionend = () => {
-                clearTimeout(etimer);
-                etimer = setTimeout(() => {
-                    const isOpen = ele.getAttribute('data-transition-state') === 'open';
-                    (onOpened && isOpen) && onOpened();
-                    (onClosed && !isOpen) && onClosed();
-                    onState && onState(isOpen ? "opened" : "closed");
-                    setState(s => (Object.assign(Object.assign({}, s), { stage: isOpen ? "opened" : "closed" })));
-                }, 1);
-            };
-        }
-        else if (!state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: style(from, cacheId, doc === null || doc === void 0 ? void 0 : doc.document), rect: rect })));
-        }
-    }, [open, state.initial, state.stage, exitOnUnmount]);
-    React.useEffect(() => {
-        if (state.initial) {
-            let _variant = state.variant !== variant ? variant : state.variant;
-            const { from, to } = getVariant(state.rect, _variant);
-            let _css = open ? to : from;
-            let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
-            let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {}).map(k => oncss.formatCSSProp(k)).join(trans + ", ") + trans });
-            setState(s => (Object.assign(Object.assign({}, s), { classname: style(_, cacheId, doc === null || doc === void 0 ? void 0 : doc.document), variant: _variant })));
-        }
-    }, [open, state.initial, variant]);
-    return {
-        exited: exitOnUnmount && state.stage === 'closed',
-        props: {
-            'id': state.classname,
-            'data-transition': id,
-            'data-transition-state': open ? 'open' : 'close',
-        }
-    };
-};
-
-module.exports = useTransition;
-//# sourceMappingURL=index.cjs.map

package/hooks/useTransition/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useTransition/index.ts"],"sourcesContent":["\"use client\";\nimport { useState, useEffect, useId, useLayoutEffect } from 'react';\nimport { animationEases } from '../useAnimation';\nimport { css } from '../../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../../css/types';\nimport * as variants from './variants'\nimport { useDocument } from '../../Document';\nimport { useCSSCacheId } from '../../css/CSSCacheProvider';\n\nexport type UseTransitionVariantTypes = keyof typeof variants\nexport type UseTransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type UseTransitionVariant = (rect: DOMRect) => ({ from: CSSProps, to: CSSProps })\n\nexport type UseTransitionProps = {\n   open: boolean;\n   variant: UseTransitionVariant | UseTransitionVariantTypes;\n   ease?: string;\n   easing?: keyof typeof animationEases;\n   duration?: number;\n   delay?: number;\n   disableInitialTransition?: boolean;\n   exitOnUnmount?: boolean;\n   onOpen?: () => void;\n   onOpened?: () => void;\n   onClose?: () => void;\n   onClosed?: () => void;\n   onState?: (state: UseTransitionState) => void;\n}\n\n\nconst style = (obj = {}, cacheId: string, doc?: Document) => {\n   return css(obj, { selector: \"#\", container: doc, cacheId }).classname;\n}\n\nconst getVariant = (rect: DOMRect | null, variant: UseTransitionProps['variant']) => {\n   let fn = typeof variant === 'string' ? variants[variant] : variant\n   if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\n   return fn(rect as DOMRect);\n}\n\nconst useTransition = ({ open, ...props }: UseTransitionProps) => {\n   let {\n      disableInitialTransition = false,\n      variant = \"fade\",\n      duration = 400,\n      delay,\n      ease,\n      easing,\n      exitOnUnmount = false,\n      onOpen,\n      onOpened,\n      onClose,\n      onClosed,\n      onState\n   } = props\n   const doc = useDocument();\n   const cacheId = useCSSCacheId()\n   let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\n   const id = \"xui-transition-\" + useId()\n   const [state, setState] = useState({\n      initial: false,\n      classname: style({ visibility: \"hidden\" }, cacheId, doc?.document),\n      variant: variant,\n      rect: null as DOMRect | null,\n      stage: open ? \"open\" : \"closed\",\n      unmounted: false,\n   })\n\n   const getEle = () => doc?.document.querySelector(`[data-transition=\"${id}\"]`) as HTMLElement;\n   const getBoundary = () => state.rect || getEle()?.getBoundingClientRect() || new DOMRect(0, 0, 0, 0);\n\n   useEffect(() => {\n      if (exitOnUnmount && state.stage === 'closed') {\n         if (!open) {\n            setState(s => ({\n               ...s,\n               initial: false,\n               classname: \"\",\n               unmounted: true,\n               variant: variant,\n            }))\n         } else {\n            setState(s => ({\n               ...s,\n               variant: variant,\n               classname: style({ visibility: \"hidden\" }, cacheId, doc?.document),\n               stage: \"open\",\n            }))\n         }\n      }\n   }, [open, state.stage, exitOnUnmount, variant])\n\n   // initial effect\n   useLayoutEffect(() => {\n      const ele = getEle()\n      if (!ele) return\n      if (exitOnUnmount && state.stage === 'closed') return\n\n      const rect = getBoundary();\n      let { from } = getVariant(rect, state.variant)\n      if (open && !state.initial) {\n         setState(s => ({\n            ...s,\n            classname: (!disableInitialTransition || state.unmounted) ? style(from, cacheId, doc?.document) : \"\",\n            initial: true,\n            rect: rect,\n         }))\n         let stimer: any = null\n         let etimer: any = null\n         ele.ontransitionstart = () => {\n            clearTimeout(stimer)\n            stimer = setTimeout(() => {\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\n               (onOpen && isOpen) && onOpen();\n               (onClose && !isOpen) && onClose()\n               onState && onState(isOpen ? \"open\" : \"close\")\n               setState(s => ({\n                  ...s,\n                  stage: isOpen ? \"open\" : \"close\"\n               }))\n            }, 1)\n         }\n\n         ele.ontransitionend = () => {\n            clearTimeout(etimer)\n            etimer = setTimeout(() => {\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\n               (onOpened && isOpen) && onOpened();\n               (onClosed && !isOpen) && onClosed();\n               onState && onState(isOpen ? \"opened\" : \"closed\")\n               setState(s => ({\n                  ...s,\n                  stage: isOpen ? \"opened\" : \"closed\"\n               }))\n            }, 1)\n         }\n      } else if (!state.initial) {\n         setState(s => ({\n            ...s,\n            classname: style(from, cacheId, doc?.document),\n            rect: rect,\n         }))\n      }\n   }, [open, state.initial, state.stage, exitOnUnmount])\n\n\n   useEffect(() => {\n      if (state.initial) {\n         let _variant = state.variant !== variant ? variant : state.variant\n         const { from, to } = getVariant(state.rect, _variant)\n         let _css: CSSProps = open ? to : from\n         let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n         let _ = {\n            ..._css,\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n         }\n         setState(s => ({\n            ...s,\n            classname: style(_, cacheId, doc?.document),\n            variant: _variant\n         }))\n      }\n   }, [open, state.initial, variant])\n\n   return {\n      exited: exitOnUnmount && state.stage === 'closed',\n      props: {\n         'id': state.classname,\n         'data-transition': id,\n         'data-transition-state': open ? 'open' : 'close',\n      }\n   }\n}\n\n\nexport default useTransition"],"names":[],"mappings":";;;;;;;;;;;;AAgCA;AACG;AACH;AAEA;AACG;AACA;AAAS;AACT;AACH;AAEA;AAAuB;AACpB;AAcA;AACA;AACA;AACA;AACA;AACG;AACA;AACA;AACA;;AAEA;AACF;AAED;AACA;;;;;;;AAaS;;;AAQT;;;AAIG;AACA;;AACA;;AAEA;AACA;AACA;;;;AASG;;AAEG;;AAEG;;AAEA;;;AAMN;AAEA;;AAEG;;AAEG;;AAEA;;;AAMN;;AACI;AACJ;;AAMN;;AAIG;AACG;AACA;;;AAGA;AAIA;;;;AASH;AACA;;AAEG;;AAEF;;AAEP;;"}

package/hooks/useTransition/index.d.ts

@@ -1,36 +0,0 @@
-import { animationEases } from '../useAnimation.js';
-import { CSSProps } from '../../css/types.js';
-import * as variants from './variants.js';
-
-type UseTransitionVariantTypes = keyof typeof variants;
-type UseTransitionState = "open" | "opened" | "close" | "closed";
-type UseTransitionVariant = (rect: DOMRect) => ({
-    from: CSSProps;
-    to: CSSProps;
-});
-type UseTransitionProps = {
-    open: boolean;
-    variant: UseTransitionVariant | UseTransitionVariantTypes;
-    ease?: string;
-    easing?: keyof typeof animationEases;
-    duration?: number;
-    delay?: number;
-    disableInitialTransition?: boolean;
-    exitOnUnmount?: boolean;
-    onOpen?: () => void;
-    onOpened?: () => void;
-    onClose?: () => void;
-    onClosed?: () => void;
-    onState?: (state: UseTransitionState) => void;
-};
-declare const useTransition: ({ open, ...props }: UseTransitionProps) => {
-    exited: boolean;
-    props: {
-        id: string;
-        'data-transition': string;
-        'data-transition-state': string;
-    };
-};
-
-export { useTransition as default };
-export type { UseTransitionProps, UseTransitionState, UseTransitionVariant, UseTransitionVariantTypes };