@xanui/core 1.2.65 → 1.2.67

package/AppRoot/index.cjs

@@ -14,6 +14,7 @@ var index = require('../Document/index.cjs');
 var AppRootProvider = require('./AppRootProvider.cjs');
 var useMergeRefs = require('../hooks/useMergeRefs.cjs');
 var CSSCacheProvider = require('../css/CSSCacheProvider.cjs');
+var cookie = require('../cookie.cjs');
 
 const AppRoot = React.forwardRef((_a, ref) => {
     var { children, defaultBreakpoint, noScrollbarCss, CSSCacheId, theme, onThemeChange, disableRenderar, selectionColor, document: _document } = _a, props = tslib.__rest(_a, ["children", "defaultBreakpoint", "noScrollbarCss", "CSSCacheId", "theme", "onThemeChange", "disableRenderar", "selectionColor", "document"]);
@@ -35,7 +36,9 @@ const AppRoot = React.forwardRef((_a, ref) => {
     React.useEffect(() => {
         if (typeof _document === 'undefined')
             return;
-        document.cookie = `xuitm=${theme.name};path=/`;
+        if (!cookie.exists("xuitm")) {
+            cookie.set("xuitm", theme.name);
+        }
         const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));
         styles.forEach((style) => {
             _document.head.appendChild(style);
@@ -52,7 +55,7 @@ const AppRoot = React.forwardRef((_a, ref) => {
     }
     return (jsxRuntime.jsx(index.DocumentProvider, { value: _document ? { document: _document, id: docid } : undefined, children: jsxRuntime.jsx(CSSCacheProvider.CSSCacheProvider, { cacheId: CSSCacheId, children: jsxRuntime.jsx(AppRootProvider.AppRootProvider, { element: () => rootRef.current, children: jsxRuntime.jsx(ThemeProvider, Object.assign({ theme: theme, onThemeChange: (t) => {
                         onThemeChange && onThemeChange(t);
-                        document.cookie = `xuitm=${t.name};path=/`;
+                        cookie.set("xuitm", t.name);
                     } }, props, { ref: mergeRef, isRoot: true, sx: Object.assign(Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), selection), children: jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { defaultKey: defaultBreakpoint !== null && defaultBreakpoint !== void 0 ? defaultBreakpoint : "xl", children: [children, !disableRenderar && jsxRuntime.jsx(Renderar.RenderRenderar, {})] }) })) }) }) }));
 });
 

package/AppRoot/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useId, useLayoutEffect, useRef } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport { RenderRenderar } from './Renderar';\nimport { DocumentProvider } from '../Document';\nimport { AppRootProvider } from './AppRootProvider';\nimport useMergeRefs from '../hooks/useMergeRefs';\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\nimport { BreakpointKeys } from '../css/types';\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n   document?: Document;\n   CSSCacheId?: string;\n   disableRenderar?: boolean;\n   defaultBreakpoint?: BreakpointKeys\n   selectionColor?: \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\";\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, defaultBreakpoint, noScrollbarCss, CSSCacheId, theme, onThemeChange, disableRenderar, selectionColor, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n\n   noScrollbarCss ??= false\n   selectionColor ??= \"brand\"\n   if (typeof window !== \"undefined\") {\n      _document ??= document\n   }\n   disableRenderar ??= false\n   const docid = useId()\n   const csscacheId = useId()\n   CSSCacheId ??= csscacheId\n\n   const [visibility, setVisibility] = React.useState<string>(!defaultBreakpoint ? \"hidden\" : \"\");\n   const rootRef = useRef(null)\n   const mergeRef = useMergeRefs(rootRef, ref)\n\n   useLayoutEffect(() => {\n      !defaultBreakpoint && setVisibility(\"\");\n   }, [])\n\n   useEffect(() => {\n      if (typeof _document === 'undefined') return;\n      document.cookie = `xuitm=${theme.name};path=/`\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\n      styles.forEach((style) => {\n         _document.head.appendChild(style);\n      });\n   }, [])\n\n   let selection: any = {}\n   if (selectionColor && selectionColor !== 'default') {\n      selection = {\n         \"&::selection\": {\n            bgcolor: `${selectionColor}.primary`,\n            color: `${selectionColor}.text`\n         }\n      }\n   }\n\n   return (\n      <DocumentProvider value={_document ? { document: _document, id: docid } : undefined}>\n         <CSSCacheProvider cacheId={CSSCacheId}>\n            <AppRootProvider element={() => rootRef.current}>\n               <ThemeProvider\n                  theme={theme}\n                  onThemeChange={(t) => {\n                     onThemeChange && onThemeChange(t)\n                     document.cookie = `xuitm=${t.name};path=/`\n                  }}\n                  {...props}\n                  ref={mergeRef}\n                  isRoot\n                  sx={{\n                     ...props.sx,\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {}),\n                     ...selection\n                  }}\n               >\n                  <BreakpointProvider defaultKey={defaultBreakpoint ?? \"xl\"}>\n                     {children}\n                     {!disableRenderar && <RenderRenderar />}\n                  </BreakpointProvider>\n               </ThemeProvider>\n            </AppRootProvider>\n         </CSSCacheProvider>\n      </DocumentProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAqBA;;;;AAIG;;;;AAIA;AACA;;;AAIA;;;AAIG;;;;;;AAMA;AACA;AACG;AACH;;;AAIH;AACG;AACG;;;AAGC;;;;AAWW;;AAEH;AAmBlB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useId, useLayoutEffect, useRef } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport { RenderRenderar } from './Renderar';\nimport { DocumentProvider } from '../Document';\nimport { AppRootProvider } from './AppRootProvider';\nimport useMergeRefs from '../hooks/useMergeRefs';\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\nimport { BreakpointKeys } from '../css/types';\nimport Cookie from '../cookie';\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n   document?: Document;\n   CSSCacheId?: string;\n   disableRenderar?: boolean;\n   defaultBreakpoint?: BreakpointKeys\n   selectionColor?: \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\";\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, defaultBreakpoint, noScrollbarCss, CSSCacheId, theme, onThemeChange, disableRenderar, selectionColor, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n\n   noScrollbarCss ??= false\n   selectionColor ??= \"brand\"\n   if (typeof window !== \"undefined\") {\n      _document ??= document\n   }\n   disableRenderar ??= false\n   const docid = useId()\n   const csscacheId = useId()\n   CSSCacheId ??= csscacheId\n\n   const [visibility, setVisibility] = React.useState<string>(!defaultBreakpoint ? \"hidden\" : \"\");\n   const rootRef = useRef(null)\n   const mergeRef = useMergeRefs(rootRef, ref)\n\n   useLayoutEffect(() => {\n      !defaultBreakpoint && setVisibility(\"\");\n   }, [])\n\n   useEffect(() => {\n      if (typeof _document === 'undefined') return;\n      if (!Cookie.exists(\"xuitm\")) {\n         Cookie.set(\"xuitm\", theme.name)\n      }\n\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\n      styles.forEach((style) => {\n         _document.head.appendChild(style);\n      });\n   }, [])\n\n   let selection: any = {}\n   if (selectionColor && selectionColor !== 'default') {\n      selection = {\n         \"&::selection\": {\n            bgcolor: `${selectionColor}.primary`,\n            color: `${selectionColor}.text`\n         }\n      }\n   }\n\n   return (\n      <DocumentProvider value={_document ? { document: _document, id: docid } : undefined}>\n         <CSSCacheProvider cacheId={CSSCacheId}>\n            <AppRootProvider element={() => rootRef.current}>\n               <ThemeProvider\n                  theme={theme}\n                  onThemeChange={(t) => {\n                     onThemeChange && onThemeChange(t)\n                     Cookie.set(\"xuitm\", t.name)\n                  }}\n                  {...props}\n                  ref={mergeRef}\n                  isRoot\n                  sx={{\n                     ...props.sx,\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {}),\n                     ...selection\n                  }}\n               >\n                  <BreakpointProvider defaultKey={defaultBreakpoint ?? \"xl\"}>\n                     {children}\n                     {!disableRenderar && <RenderRenderar />}\n                  </BreakpointProvider>\n               </ThemeProvider>\n            </AppRootProvider>\n         </CSSCacheProvider>\n      </DocumentProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAsBA;;;;AAIG;;;;AAIA;AACA;;;AAIA;;;AAIG;;;;;;;;AASA;AACA;AACG;AACH;;;AAIH;AACG;AACG;;;AAGC;;;;AAWW;;AAEH;AAmBlB;;"}

package/AppRoot/index.js

@@ -12,6 +12,7 @@ import { DocumentProvider } from '../Document/index.js';
 import { AppRootProvider } from './AppRootProvider.js';
 import useMergeRefs from '../hooks/useMergeRefs.js';
 import { CSSCacheProvider } from '../css/CSSCacheProvider.js';
+import Cookie from '../cookie.js';
 
 const AppRoot = React__default.forwardRef((_a, ref) => {
     var { children, defaultBreakpoint, noScrollbarCss, CSSCacheId, theme, onThemeChange, disableRenderar, selectionColor, document: _document } = _a, props = __rest(_a, ["children", "defaultBreakpoint", "noScrollbarCss", "CSSCacheId", "theme", "onThemeChange", "disableRenderar", "selectionColor", "document"]);
@@ -33,7 +34,9 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
     useEffect(() => {
         if (typeof _document === 'undefined')
             return;
-        document.cookie = `xuitm=${theme.name};path=/`;
+        if (!Cookie.exists("xuitm")) {
+            Cookie.set("xuitm", theme.name);
+        }
         const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));
         styles.forEach((style) => {
             _document.head.appendChild(style);
@@ -50,7 +53,7 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
     }
     return (jsx(DocumentProvider, { value: _document ? { document: _document, id: docid } : undefined, children: jsx(CSSCacheProvider, { cacheId: CSSCacheId, children: jsx(AppRootProvider, { element: () => rootRef.current, children: jsx(ThemeProvider, Object.assign({ theme: theme, onThemeChange: (t) => {
                         onThemeChange && onThemeChange(t);
-                        document.cookie = `xuitm=${t.name};path=/`;
+                        Cookie.set("xuitm", t.name);
                     } }, props, { ref: mergeRef, isRoot: true, sx: Object.assign(Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), selection), children: jsxs(BreakpointProvider, { defaultKey: defaultBreakpoint !== null && defaultBreakpoint !== void 0 ? defaultBreakpoint : "xl", children: [children, !disableRenderar && jsx(RenderRenderar, {})] }) })) }) }) }));
 });
 

package/AppRoot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useId, useLayoutEffect, useRef } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport { RenderRenderar } from './Renderar';\nimport { DocumentProvider } from '../Document';\nimport { AppRootProvider } from './AppRootProvider';\nimport useMergeRefs from '../hooks/useMergeRefs';\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\nimport { BreakpointKeys } from '../css/types';\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n   document?: Document;\n   CSSCacheId?: string;\n   disableRenderar?: boolean;\n   defaultBreakpoint?: BreakpointKeys\n   selectionColor?: \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\";\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, defaultBreakpoint, noScrollbarCss, CSSCacheId, theme, onThemeChange, disableRenderar, selectionColor, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n\n   noScrollbarCss ??= false\n   selectionColor ??= \"brand\"\n   if (typeof window !== \"undefined\") {\n      _document ??= document\n   }\n   disableRenderar ??= false\n   const docid = useId()\n   const csscacheId = useId()\n   CSSCacheId ??= csscacheId\n\n   const [visibility, setVisibility] = React.useState<string>(!defaultBreakpoint ? \"hidden\" : \"\");\n   const rootRef = useRef(null)\n   const mergeRef = useMergeRefs(rootRef, ref)\n\n   useLayoutEffect(() => {\n      !defaultBreakpoint && setVisibility(\"\");\n   }, [])\n\n   useEffect(() => {\n      if (typeof _document === 'undefined') return;\n      document.cookie = `xuitm=${theme.name};path=/`\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\n      styles.forEach((style) => {\n         _document.head.appendChild(style);\n      });\n   }, [])\n\n   let selection: any = {}\n   if (selectionColor && selectionColor !== 'default') {\n      selection = {\n         \"&::selection\": {\n            bgcolor: `${selectionColor}.primary`,\n            color: `${selectionColor}.text`\n         }\n      }\n   }\n\n   return (\n      <DocumentProvider value={_document ? { document: _document, id: docid } : undefined}>\n         <CSSCacheProvider cacheId={CSSCacheId}>\n            <AppRootProvider element={() => rootRef.current}>\n               <ThemeProvider\n                  theme={theme}\n                  onThemeChange={(t) => {\n                     onThemeChange && onThemeChange(t)\n                     document.cookie = `xuitm=${t.name};path=/`\n                  }}\n                  {...props}\n                  ref={mergeRef}\n                  isRoot\n                  sx={{\n                     ...props.sx,\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {}),\n                     ...selection\n                  }}\n               >\n                  <BreakpointProvider defaultKey={defaultBreakpoint ?? \"xl\"}>\n                     {children}\n                     {!disableRenderar && <RenderRenderar />}\n                  </BreakpointProvider>\n               </ThemeProvider>\n            </AppRootProvider>\n         </CSSCacheProvider>\n      </DocumentProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAqBA;;;;AAIG;;;;AAIA;AACA;;;AAIA;;;AAIG;;;;;;AAMA;AACA;AACG;AACH;;;AAIH;AACG;AACG;;;AAGC;;;;AAWW;;AAEH;AAmBlB;;"}
+{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useId, useLayoutEffect, useRef } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport { RenderRenderar } from './Renderar';\nimport { DocumentProvider } from '../Document';\nimport { AppRootProvider } from './AppRootProvider';\nimport useMergeRefs from '../hooks/useMergeRefs';\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\nimport { BreakpointKeys } from '../css/types';\nimport Cookie from '../cookie';\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n   document?: Document;\n   CSSCacheId?: string;\n   disableRenderar?: boolean;\n   defaultBreakpoint?: BreakpointKeys\n   selectionColor?: \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\";\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, defaultBreakpoint, noScrollbarCss, CSSCacheId, theme, onThemeChange, disableRenderar, selectionColor, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n\n   noScrollbarCss ??= false\n   selectionColor ??= \"brand\"\n   if (typeof window !== \"undefined\") {\n      _document ??= document\n   }\n   disableRenderar ??= false\n   const docid = useId()\n   const csscacheId = useId()\n   CSSCacheId ??= csscacheId\n\n   const [visibility, setVisibility] = React.useState<string>(!defaultBreakpoint ? \"hidden\" : \"\");\n   const rootRef = useRef(null)\n   const mergeRef = useMergeRefs(rootRef, ref)\n\n   useLayoutEffect(() => {\n      !defaultBreakpoint && setVisibility(\"\");\n   }, [])\n\n   useEffect(() => {\n      if (typeof _document === 'undefined') return;\n      if (!Cookie.exists(\"xuitm\")) {\n         Cookie.set(\"xuitm\", theme.name)\n      }\n\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\n      styles.forEach((style) => {\n         _document.head.appendChild(style);\n      });\n   }, [])\n\n   let selection: any = {}\n   if (selectionColor && selectionColor !== 'default') {\n      selection = {\n         \"&::selection\": {\n            bgcolor: `${selectionColor}.primary`,\n            color: `${selectionColor}.text`\n         }\n      }\n   }\n\n   return (\n      <DocumentProvider value={_document ? { document: _document, id: docid } : undefined}>\n         <CSSCacheProvider cacheId={CSSCacheId}>\n            <AppRootProvider element={() => rootRef.current}>\n               <ThemeProvider\n                  theme={theme}\n                  onThemeChange={(t) => {\n                     onThemeChange && onThemeChange(t)\n                     Cookie.set(\"xuitm\", t.name)\n                  }}\n                  {...props}\n                  ref={mergeRef}\n                  isRoot\n                  sx={{\n                     ...props.sx,\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {}),\n                     ...selection\n                  }}\n               >\n                  <BreakpointProvider defaultKey={defaultBreakpoint ?? \"xl\"}>\n                     {children}\n                     {!disableRenderar && <RenderRenderar />}\n                  </BreakpointProvider>\n               </ThemeProvider>\n            </AppRootProvider>\n         </CSSCacheProvider>\n      </DocumentProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAsBA;;;;AAIG;;;;AAIA;AACA;;;AAIA;;;AAIG;;;;;;;;AASA;AACA;AACG;AACH;;;AAIH;AACG;AACG;;;AAGC;;;;AAWW;;AAEH;AAmBlB;;"}

package/Transition/index.cjs

@@ -19,6 +19,8 @@ const getVariant = (rect, variant) => {
 function Transition(_a) {
     var { children } = _a, options = tslib.__rest(_a, ["children"]);
     let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, open, onOpen, onOpened, onClose, onClosed, onState } = options;
+    const endTimer = React.useRef(null);
+    const animId = React.useRef(0);
     const [rect, setRect] = React.useState();
     const [isDisableInitial, setIsDisableInitial] = React.useState(disableInitialTransition);
     const ref = React.useRef(null);
@@ -30,59 +32,92 @@ function Transition(_a) {
     };
     let [cls, setCls] = React.useState(() => {
         let props = {};
-        if (!isDisableInitial) {
-            props.visibility = 'hidden';
-        }
-        else if (isDisableInitial && !open) {
-            props.visibility = 'hidden';
+        if (!isDisableInitial || (isDisableInitial && !open)) {
+            props.opacity = 0;
+            props.pointerEvents = 'none';
+            props.transition = 'none';
         }
         return style(props);
     });
     React.useEffect(() => {
-        var _a;
-        const rect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const v = getVariant(rect, variant);
-        setCls(style(open ? v.from : v.to));
-        setRect(rect);
+        let frame;
+        const measure = () => {
+            const node = ref.current;
+            if (!node) {
+                frame = requestAnimationFrame(measure); // ⬅️ retry next frame
+                return;
+            }
+            const rect = node.getBoundingClientRect();
+            const v = getVariant(rect, variant);
+            const initial = isDisableInitial
+                ? (open ? v.to : v.from)
+                : (open ? v.from : v.to);
+            setCls(style(Object.assign(Object.assign({}, initial), { transition: 'none' })));
+            setRect(rect);
+        };
+        frame = requestAnimationFrame(measure);
+        return () => {
+            if (endTimer.current) {
+                clearTimeout(endTimer.current);
+            }
+            cancelAnimationFrame(frame);
+        };
     }, []);
-    React.useLayoutEffect(() => {
+    React.useEffect(() => {
         if (rect) {
-            const v = getVariant(rect, variant);
-            let _css = open ? v.to : v.from;
-            let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
+            let _duration = isDisableInitial ? 0 : duration;
+            let _delay = isDisableInitial ? 0 : (delay || 0);
             if (isDisableInitial) {
-                trans = '';
                 setIsDisableInitial(false);
             }
-            let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {}).map(k => oncss.formatCSSProp(k)).join(trans + ", ") + trans });
+            const v = getVariant(rect, variant);
+            let _css = open ? v.to : v.from;
+            let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {})
+                    .map(k => `${oncss.formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)
+                    .join(", "), willChange: Object.keys(_css || {})
+                    .map(oncss.formatCSSProp)
+                    .join(", ") });
+            if (open) {
+                onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+                onState === null || onState === void 0 ? void 0 : onState("open");
+            }
+            else {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+                onState === null || onState === void 0 ? void 0 : onState("close");
+            }
             setCls(style(_));
-            const ele = ref.current;
-            let stimer = null;
-            let etimer = null;
-            ele.ontransitionstart = () => {
-                clearTimeout(stimer);
-                stimer = setTimeout(() => {
-                    (onOpen && open) && onOpen();
-                    (onClose && !open) && onClose();
-                    onState && onState(open ? "open" : "close");
-                }, 1);
-            };
-            ele.ontransitionend = () => {
-                clearTimeout(etimer);
-                etimer = setTimeout(() => {
-                    if (onOpened && open)
-                        onOpened();
-                    if (onClosed && !open)
-                        onClosed();
-                    onState && onState(open ? "opened" : "closed");
-                }, 1);
-            };
+            if (endTimer.current) {
+                clearTimeout(endTimer.current);
+            }
+            animId.current++;
+            const id = animId.current;
+            endTimer.current = setTimeout(() => {
+                if (id !== animId.current)
+                    return;
+                if (open) {
+                    onOpened === null || onOpened === void 0 ? void 0 : onOpened();
+                    onState === null || onState === void 0 ? void 0 : onState("opened");
+                }
+                else {
+                    onClosed === null || onClosed === void 0 ? void 0 : onClosed();
+                    onState === null || onState === void 0 ? void 0 : onState("closed");
+                }
+            }, _duration + _delay);
         }
     }, [rect, open, variant]);
     const clone = React.Children.only(children);
     return React.cloneElement(clone, {
         className: cls,
-        ref
+        ref: (node) => {
+            ref.current = node;
+            const childRef = clone.ref;
+            if (typeof childRef === "function") {
+                childRef(node);
+            }
+            else if (childRef) {
+                childRef.current = node;
+            }
+        }
     });
 }
 

package/Transition/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState, useLayoutEffect, useEffect, useRef } from 'react';\nimport * as variants from './variants'\nimport { css } from '../css';\nimport { useDocument } from '../Document';\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\nimport { animationEases } from '../hooks/useAnimation';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionVariant = TransitionVariantTypes | ((rect: DOMRect) => ({ from: CSSProps, to: CSSProps }))\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n    children: React.ReactElement;\n    open: boolean;\n    variant: TransitionVariant\n    ease?: string;\n    easing?: keyof typeof animationEases;\n    duration?: number;\n    delay?: number;\n    disableInitialTransition?: boolean;\n    onOpen?: () => void;\n    onOpened?: () => void;\n    onClose?: () => void;\n    onClosed?: () => void;\n    onState?: (state: TransitionState) => void;\n}\n\nconst getVariant = (rect: DOMRect, variant: TransitionVariant) => {\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\nfunction Transition({ children, ...options }: TransitionProps) {\n    let {\n        disableInitialTransition = false,\n        variant = \"fade\",\n        duration = 400,\n        delay,\n        ease,\n        easing,\n        open,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        onState\n    } = options\n\n    const [rect, setRect] = useState<DOMRect>()\n    const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition)\n    const ref = useRef<HTMLElement>(null)\n    const doc = useDocument();\n    const cacheId = useCSSCacheId()\n    let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\n\n    const style = (obj = {}) => {\n        return css(obj, { container: doc?.document, cacheId }).classname;\n    }\n\n    let [cls, setCls] = useState(() => {\n        let props: any = {}\n        if (!isDisableInitial) {\n            props.visibility = 'hidden'\n        } else if (isDisableInitial && !open) {\n            props.visibility = 'hidden'\n        }\n        return style(props)\n    })\n\n\n    useEffect(() => {\n        const rect = ref.current?.getBoundingClientRect() as DOMRect\n        const v = getVariant(rect, variant)\n        setCls(style(open ? v.from : v.to))\n        setRect(rect)\n    }, [])\n\n    useLayoutEffect(() => {\n        if (rect) {\n            const v = getVariant(rect, variant)\n            let _css: any = open ? v.to : v.from\n            let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n            if (isDisableInitial) {\n                trans = ''\n                setIsDisableInitial(false)\n            }\n            let _ = {\n                ..._css,\n                transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n            }\n\n            setCls(style(_))\n\n            const ele = ref.current as HTMLElement\n            let stimer: any = null\n            let etimer: any = null\n            ele.ontransitionstart = () => {\n                clearTimeout(stimer)\n                stimer = setTimeout(() => {\n                    (onOpen && open) && onOpen();\n                    (onClose && !open) && onClose()\n                    onState && onState(open ? \"open\" : \"close\")\n                }, 1)\n            }\n            ele.ontransitionend = () => {\n                clearTimeout(etimer)\n                etimer = setTimeout(() => {\n                    if (onOpened && open) onOpened();\n                    if (onClosed && !open) onClosed();\n                    onState && onState(open ? \"opened\" : \"closed\")\n                }, 1)\n            }\n        }\n    }, [rect, open, variant])\n\n    const clone: any = Children.only(children);\n    return cloneElement(clone, {\n        className: cls,\n        ref\n    });\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;AACI;AACA;AAAS;AACT;AACJ;AAEA;AAAoB;AAChB;;;AAiBA;AACA;AACA;AACA;AAEA;;AAEA;;;;AAKQ;;AACG;AACH;;AAEJ;AACJ;;;;;AAMI;;;;;;AAOI;;;;;;AAMA;AAKA;AAEA;;;AAGA;;AAEI;AACI;;AAEA;;AAER;AACA;;AAEI;;AAC0B;;AACC;AACvB;;AAER;;;;;AAMJ;;AAEH;AACL;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState, useEffect, useRef } from 'react';\nimport * as variants from './variants'\nimport { css } from '../css';\nimport { useDocument } from '../Document';\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\nimport { animationEases } from '../hooks/useAnimation';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionVariant = TransitionVariantTypes | ((rect: DOMRect) => ({ from: CSSProps, to: CSSProps }))\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n    children: React.ReactElement;\n    open: boolean;\n    variant: TransitionVariant\n    ease?: string;\n    easing?: keyof typeof animationEases;\n    duration?: number;\n    delay?: number;\n    disableInitialTransition?: boolean;\n    onOpen?: () => void;\n    onOpened?: () => void;\n    onClose?: () => void;\n    onClosed?: () => void;\n    onState?: (state: TransitionState) => void;\n}\n\nconst getVariant = (rect: DOMRect, variant: TransitionVariant) => {\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\nfunction Transition({ children, ...options }: TransitionProps) {\n    let {\n        disableInitialTransition = false,\n        variant = \"fade\",\n        duration = 400,\n        delay,\n        ease,\n        easing,\n        open,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        onState\n    } = options\n\n    const endTimer = useRef<any>(null)\n    const animId = useRef(0)\n    const [rect, setRect] = useState<DOMRect>()\n    const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition)\n    const ref = useRef<HTMLElement>(null)\n    const doc = useDocument();\n    const cacheId = useCSSCacheId()\n    let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\n\n    const style = (obj = {}) => {\n        return css(obj, { container: doc?.document, cacheId }).classname;\n    }\n\n    let [cls, setCls] = useState(() => {\n        let props: any = {}\n        if (!isDisableInitial || (isDisableInitial && !open)) {\n            props.opacity = 0\n            props.pointerEvents = 'none'\n            props.transition = 'none'\n        }\n        return style(props)\n    })\n\n\n    useEffect(() => {\n        let frame: any\n        const measure = () => {\n            const node = ref.current\n            if (!node) {\n                frame = requestAnimationFrame(measure) // ⬅️ retry next frame\n                return\n            }\n\n            const rect = node.getBoundingClientRect()\n            const v = getVariant(rect, variant)\n            const initial = isDisableInitial\n                ? (open ? v.to : v.from)\n                : (open ? v.from : v.to)\n\n            setCls(style({\n                ...initial,\n                transition: 'none'\n            }))\n            setRect(rect)\n        }\n\n        frame = requestAnimationFrame(measure)\n\n        return () => {\n            if (endTimer.current) {\n                clearTimeout(endTimer.current)\n            }\n            cancelAnimationFrame(frame)\n        }\n\n    }, [])\n\n    useEffect(() => {\n        if (rect) {\n            let _duration = isDisableInitial ? 0 : duration\n            let _delay = isDisableInitial ? 0 : (delay || 0)\n\n            if (isDisableInitial) {\n                setIsDisableInitial(false)\n            }\n            const v = getVariant(rect, variant)\n            let _css: any = open ? v.to : v.from\n\n            let _ = {\n                ..._css,\n                transition: Object.keys(_css || {})\n                    .map(k => `${formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)\n                    .join(\", \"),\n                willChange: Object.keys(_css || {})\n                    .map(formatCSSProp)\n                    .join(\", \"),\n            }\n\n            if (open) {\n                onOpen?.();\n                onState?.(\"open\");\n            } else {\n                onClose?.();\n                onState?.(\"close\");\n            }\n\n            setCls(style(_))\n            if (endTimer.current) {\n                clearTimeout(endTimer.current)\n            }\n            animId.current++\n            const id = animId.current\n            endTimer.current = setTimeout(() => {\n                if (id !== animId.current) return\n                if (open) {\n                    onOpened?.();\n                    onState?.(\"opened\");\n                } else {\n                    onClosed?.();\n                    onState?.(\"closed\");\n                }\n            }, _duration + _delay)\n        }\n    }, [rect, open, variant])\n\n    const clone: any = Children.only(children);\n\n    return cloneElement(clone, {\n        className: cls,\n        ref: (node: HTMLElement) => {\n            ref.current = node;\n\n            const childRef = (clone as any).ref;\n            if (typeof childRef === \"function\") {\n                childRef(node);\n            } else if (childRef) {\n                childRef.current = node;\n            }\n        }\n    });\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;AACI;AACA;AAAS;AACT;AACJ;AAEA;AAAoB;AAChB;AAeA;AACA;;;AAGA;AACA;AACA;AACA;AAEA;;AAEA;;;;AAKQ;AACA;AACA;;AAEJ;AACJ;;AAII;;AAEI;;AAEI;;;AAIJ;;;AAGI;AACA;;;AAOR;AAEA;AAEA;AACI;AACI;;;AAGR;;;;;AAOI;;;;;AAMA;AAEA;AAGS;AACA;;AAGA;;AAIL;AACA;;;AAEA;AACA;;AAGJ;AACA;AACI;;;AAGJ;AACA;AACI;;;AAEI;AACA;;;AAEA;AACA;;AAER;;;;;AAOJ;AACA;AACI;AAEA;AACA;;;;AAGI;;;AAGX;AACL;;"}

package/Transition/index.d.ts

@@ -26,7 +26,7 @@ type TransitionProps = {
 };
 declare function Transition({ children, ...options }: TransitionProps): React__default.DetailedReactHTMLElement<{
     className: string;
-    ref: React__default.RefObject<HTMLElement | null>;
+    ref: (node: HTMLElement) => void;
 }, HTMLElement>;
 
 export { Transition as default };

package/Transition/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { __rest } from 'tslib';
-import { useState, useRef, useEffect, useLayoutEffect, Children, cloneElement } from 'react';
+import { useRef, useState, useEffect, Children, cloneElement } from 'react';
 import * as variants from './variants.js';
 import { css } from '../css/index.js';
 import { useDocument } from '../Document/index.js';
@@ -17,6 +17,8 @@ const getVariant = (rect, variant) => {
 function Transition(_a) {
     var { children } = _a, options = __rest(_a, ["children"]);
     let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, open, onOpen, onOpened, onClose, onClosed, onState } = options;
+    const endTimer = useRef(null);
+    const animId = useRef(0);
     const [rect, setRect] = useState();
     const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition);
     const ref = useRef(null);
@@ -28,59 +30,92 @@ function Transition(_a) {
     };
     let [cls, setCls] = useState(() => {
         let props = {};
-        if (!isDisableInitial) {
-            props.visibility = 'hidden';
-        }
-        else if (isDisableInitial && !open) {
-            props.visibility = 'hidden';
+        if (!isDisableInitial || (isDisableInitial && !open)) {
+            props.opacity = 0;
+            props.pointerEvents = 'none';
+            props.transition = 'none';
         }
         return style(props);
     });
     useEffect(() => {
-        var _a;
-        const rect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const v = getVariant(rect, variant);
-        setCls(style(open ? v.from : v.to));
-        setRect(rect);
+        let frame;
+        const measure = () => {
+            const node = ref.current;
+            if (!node) {
+                frame = requestAnimationFrame(measure); // ⬅️ retry next frame
+                return;
+            }
+            const rect = node.getBoundingClientRect();
+            const v = getVariant(rect, variant);
+            const initial = isDisableInitial
+                ? (open ? v.to : v.from)
+                : (open ? v.from : v.to);
+            setCls(style(Object.assign(Object.assign({}, initial), { transition: 'none' })));
+            setRect(rect);
+        };
+        frame = requestAnimationFrame(measure);
+        return () => {
+            if (endTimer.current) {
+                clearTimeout(endTimer.current);
+            }
+            cancelAnimationFrame(frame);
+        };
     }, []);
-    useLayoutEffect(() => {
+    useEffect(() => {
         if (rect) {
-            const v = getVariant(rect, variant);
-            let _css = open ? v.to : v.from;
-            let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
+            let _duration = isDisableInitial ? 0 : duration;
+            let _delay = isDisableInitial ? 0 : (delay || 0);
             if (isDisableInitial) {
-                trans = '';
                 setIsDisableInitial(false);
             }
-            let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + ", ") + trans });
+            const v = getVariant(rect, variant);
+            let _css = open ? v.to : v.from;
+            let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {})
+                    .map(k => `${formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)
+                    .join(", "), willChange: Object.keys(_css || {})
+                    .map(formatCSSProp)
+                    .join(", ") });
+            if (open) {
+                onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+                onState === null || onState === void 0 ? void 0 : onState("open");
+            }
+            else {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+                onState === null || onState === void 0 ? void 0 : onState("close");
+            }
             setCls(style(_));
-            const ele = ref.current;
-            let stimer = null;
-            let etimer = null;
-            ele.ontransitionstart = () => {
-                clearTimeout(stimer);
-                stimer = setTimeout(() => {
-                    (onOpen && open) && onOpen();
-                    (onClose && !open) && onClose();
-                    onState && onState(open ? "open" : "close");
-                }, 1);
-            };
-            ele.ontransitionend = () => {
-                clearTimeout(etimer);
-                etimer = setTimeout(() => {
-                    if (onOpened && open)
-                        onOpened();
-                    if (onClosed && !open)
-                        onClosed();
-                    onState && onState(open ? "opened" : "closed");
-                }, 1);
-            };
+            if (endTimer.current) {
+                clearTimeout(endTimer.current);
+            }
+            animId.current++;
+            const id = animId.current;
+            endTimer.current = setTimeout(() => {
+                if (id !== animId.current)
+                    return;
+                if (open) {
+                    onOpened === null || onOpened === void 0 ? void 0 : onOpened();
+                    onState === null || onState === void 0 ? void 0 : onState("opened");
+                }
+                else {
+                    onClosed === null || onClosed === void 0 ? void 0 : onClosed();
+                    onState === null || onState === void 0 ? void 0 : onState("closed");
+                }
+            }, _duration + _delay);
         }
     }, [rect, open, variant]);
     const clone = Children.only(children);
     return cloneElement(clone, {
         className: cls,
-        ref
+        ref: (node) => {
+            ref.current = node;
+            const childRef = clone.ref;
+            if (typeof childRef === "function") {
+                childRef(node);
+            }
+            else if (childRef) {
+                childRef.current = node;
+            }
+        }
     });
 }
 

package/Transition/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState, useLayoutEffect, useEffect, useRef } from 'react';\nimport * as variants from './variants'\nimport { css } from '../css';\nimport { useDocument } from '../Document';\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\nimport { animationEases } from '../hooks/useAnimation';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionVariant = TransitionVariantTypes | ((rect: DOMRect) => ({ from: CSSProps, to: CSSProps }))\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n    children: React.ReactElement;\n    open: boolean;\n    variant: TransitionVariant\n    ease?: string;\n    easing?: keyof typeof animationEases;\n    duration?: number;\n    delay?: number;\n    disableInitialTransition?: boolean;\n    onOpen?: () => void;\n    onOpened?: () => void;\n    onClose?: () => void;\n    onClosed?: () => void;\n    onState?: (state: TransitionState) => void;\n}\n\nconst getVariant = (rect: DOMRect, variant: TransitionVariant) => {\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\nfunction Transition({ children, ...options }: TransitionProps) {\n    let {\n        disableInitialTransition = false,\n        variant = \"fade\",\n        duration = 400,\n        delay,\n        ease,\n        easing,\n        open,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        onState\n    } = options\n\n    const [rect, setRect] = useState<DOMRect>()\n    const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition)\n    const ref = useRef<HTMLElement>(null)\n    const doc = useDocument();\n    const cacheId = useCSSCacheId()\n    let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\n\n    const style = (obj = {}) => {\n        return css(obj, { container: doc?.document, cacheId }).classname;\n    }\n\n    let [cls, setCls] = useState(() => {\n        let props: any = {}\n        if (!isDisableInitial) {\n            props.visibility = 'hidden'\n        } else if (isDisableInitial && !open) {\n            props.visibility = 'hidden'\n        }\n        return style(props)\n    })\n\n\n    useEffect(() => {\n        const rect = ref.current?.getBoundingClientRect() as DOMRect\n        const v = getVariant(rect, variant)\n        setCls(style(open ? v.from : v.to))\n        setRect(rect)\n    }, [])\n\n    useLayoutEffect(() => {\n        if (rect) {\n            const v = getVariant(rect, variant)\n            let _css: any = open ? v.to : v.from\n            let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n            if (isDisableInitial) {\n                trans = ''\n                setIsDisableInitial(false)\n            }\n            let _ = {\n                ..._css,\n                transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n            }\n\n            setCls(style(_))\n\n            const ele = ref.current as HTMLElement\n            let stimer: any = null\n            let etimer: any = null\n            ele.ontransitionstart = () => {\n                clearTimeout(stimer)\n                stimer = setTimeout(() => {\n                    (onOpen && open) && onOpen();\n                    (onClose && !open) && onClose()\n                    onState && onState(open ? \"open\" : \"close\")\n                }, 1)\n            }\n            ele.ontransitionend = () => {\n                clearTimeout(etimer)\n                etimer = setTimeout(() => {\n                    if (onOpened && open) onOpened();\n                    if (onClosed && !open) onClosed();\n                    onState && onState(open ? \"opened\" : \"closed\")\n                }, 1)\n            }\n        }\n    }, [rect, open, variant])\n\n    const clone: any = Children.only(children);\n    return cloneElement(clone, {\n        className: cls,\n        ref\n    });\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;;;AA8BA;AACI;AACA;AAAS;AACT;AACJ;AAEA;AAAoB;AAChB;;;AAiBA;AACA;AACA;AACA;AAEA;;AAEA;;;;AAKQ;;AACG;AACH;;AAEJ;AACJ;;;;;AAMI;;;;;;AAOI;;;;;;AAMA;AAKA;AAEA;;;AAGA;;AAEI;AACI;;AAEA;;AAER;AACA;;AAEI;;AAC0B;;AACC;AACvB;;AAER;;;;;AAMJ;;AAEH;AACL;;"}
+{"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState, useEffect, useRef } from 'react';\nimport * as variants from './variants'\nimport { css } from '../css';\nimport { useDocument } from '../Document';\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\nimport { animationEases } from '../hooks/useAnimation';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionVariant = TransitionVariantTypes | ((rect: DOMRect) => ({ from: CSSProps, to: CSSProps }))\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n    children: React.ReactElement;\n    open: boolean;\n    variant: TransitionVariant\n    ease?: string;\n    easing?: keyof typeof animationEases;\n    duration?: number;\n    delay?: number;\n    disableInitialTransition?: boolean;\n    onOpen?: () => void;\n    onOpened?: () => void;\n    onClose?: () => void;\n    onClosed?: () => void;\n    onState?: (state: TransitionState) => void;\n}\n\nconst getVariant = (rect: DOMRect, variant: TransitionVariant) => {\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\nfunction Transition({ children, ...options }: TransitionProps) {\n    let {\n        disableInitialTransition = false,\n        variant = \"fade\",\n        duration = 400,\n        delay,\n        ease,\n        easing,\n        open,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        onState\n    } = options\n\n    const endTimer = useRef<any>(null)\n    const animId = useRef(0)\n    const [rect, setRect] = useState<DOMRect>()\n    const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition)\n    const ref = useRef<HTMLElement>(null)\n    const doc = useDocument();\n    const cacheId = useCSSCacheId()\n    let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\n\n    const style = (obj = {}) => {\n        return css(obj, { container: doc?.document, cacheId }).classname;\n    }\n\n    let [cls, setCls] = useState(() => {\n        let props: any = {}\n        if (!isDisableInitial || (isDisableInitial && !open)) {\n            props.opacity = 0\n            props.pointerEvents = 'none'\n            props.transition = 'none'\n        }\n        return style(props)\n    })\n\n\n    useEffect(() => {\n        let frame: any\n        const measure = () => {\n            const node = ref.current\n            if (!node) {\n                frame = requestAnimationFrame(measure) // ⬅️ retry next frame\n                return\n            }\n\n            const rect = node.getBoundingClientRect()\n            const v = getVariant(rect, variant)\n            const initial = isDisableInitial\n                ? (open ? v.to : v.from)\n                : (open ? v.from : v.to)\n\n            setCls(style({\n                ...initial,\n                transition: 'none'\n            }))\n            setRect(rect)\n        }\n\n        frame = requestAnimationFrame(measure)\n\n        return () => {\n            if (endTimer.current) {\n                clearTimeout(endTimer.current)\n            }\n            cancelAnimationFrame(frame)\n        }\n\n    }, [])\n\n    useEffect(() => {\n        if (rect) {\n            let _duration = isDisableInitial ? 0 : duration\n            let _delay = isDisableInitial ? 0 : (delay || 0)\n\n            if (isDisableInitial) {\n                setIsDisableInitial(false)\n            }\n            const v = getVariant(rect, variant)\n            let _css: any = open ? v.to : v.from\n\n            let _ = {\n                ..._css,\n                transition: Object.keys(_css || {})\n                    .map(k => `${formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)\n                    .join(\", \"),\n                willChange: Object.keys(_css || {})\n                    .map(formatCSSProp)\n                    .join(\", \"),\n            }\n\n            if (open) {\n                onOpen?.();\n                onState?.(\"open\");\n            } else {\n                onClose?.();\n                onState?.(\"close\");\n            }\n\n            setCls(style(_))\n            if (endTimer.current) {\n                clearTimeout(endTimer.current)\n            }\n            animId.current++\n            const id = animId.current\n            endTimer.current = setTimeout(() => {\n                if (id !== animId.current) return\n                if (open) {\n                    onOpened?.();\n                    onState?.(\"opened\");\n                } else {\n                    onClosed?.();\n                    onState?.(\"closed\");\n                }\n            }, _duration + _delay)\n        }\n    }, [rect, open, variant])\n\n    const clone: any = Children.only(children);\n\n    return cloneElement(clone, {\n        className: cls,\n        ref: (node: HTMLElement) => {\n            ref.current = node;\n\n            const childRef = (clone as any).ref;\n            if (typeof childRef === \"function\") {\n                childRef(node);\n            } else if (childRef) {\n                childRef.current = node;\n            }\n        }\n    });\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;;;AA8BA;AACI;AACA;AAAS;AACT;AACJ;AAEA;AAAoB;AAChB;AAeA;AACA;;;AAGA;AACA;AACA;AACA;AAEA;;AAEA;;;;AAKQ;AACA;AACA;;AAEJ;AACJ;;AAII;;AAEI;;AAEI;;;AAIJ;;;AAGI;AACA;;;AAOR;AAEA;AAEA;AACI;AACI;;;AAGR;;;;;AAOI;;;;;AAMA;AAEA;AAGS;AACA;;AAGA;;AAIL;AACA;;;AAEA;AACA;;AAGJ;AACA;AACI;;;AAGJ;AACA;AACI;;;AAEI;AACA;;;AAEA;AACA;;AAER;;;;;AAOJ;AACA;AACI;AAEA;AACA;;;;AAGI;;;AAGX;AACL;;"}

package/Transition/variants.cjs

@@ -50,6 +50,7 @@ const scaleYDown = () => ({
     from: {
         transform: "scaleY(0.8)",
         opacity: 0,
+        pointerEvents: 'none',
         transformOrigin: "top"
     },
     to: {
@@ -62,7 +63,8 @@ const scaleYUp = () => ({
     from: {
         transform: "scaleY(0.8)",
         transformOrigin: "bottom",
-        opacity: 0
+        opacity: 0,
+        pointerEvents: 'none'
     },
     to: {
         transform: "scaleY(1)",
@@ -73,7 +75,8 @@ const scaleYUp = () => ({
 const fade = () => {
     return {
         from: {
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             opacity: 1
@@ -85,7 +88,8 @@ const fadeDown = (rect) => {
     return {
         from: {
             transform: `translateY(-${y}px) scale(0.98)`,
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             transform: `translateY(0) scale(1)`,
@@ -98,7 +102,8 @@ const fadeUp = (rect) => {
     return {
         from: {
             transform: `translateY(${y}px) scale(0.98)`,
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             transform: `translateY(0) scale(1)`,
@@ -111,7 +116,8 @@ const fadeRight = (rect) => {
     return {
         from: {
             transform: `translateX(-${x}px) scale(0.98)`,
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             transform: `translateX(0) scale(1)`,
@@ -124,7 +130,8 @@ const fadeLeft = (rect) => {
     return {
         from: {
             transform: `translateX(${x}px) scale(0.98)`,
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             transform: `translateX(0) scale(1)`,
@@ -136,7 +143,8 @@ const grow = () => {
     return {
         from: {
             transform: "scale(.8, .6)",
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             transform: "scale(1)",
@@ -149,7 +157,8 @@ const zoom = () => {
         from: {
             transform: "scale(.8)",
             transformOrigin: "center",
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             transform: "scale(1)",
@@ -163,7 +172,8 @@ const zoomOver = () => {
         from: {
             transform: "scale(1.2)",
             transformOrigin: "center",
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             transform: "scale(1)",

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        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    },\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        },\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        },\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        },\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        },\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        },\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        },\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        },\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        },\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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"}
+{"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;;;;;;;;;;;;;;;;;;;"}

package/Transition/variants.d.ts

@@ -34,6 +34,7 @@ declare const scaleYDown: () => {
     from: {
         transform: string;
         opacity: number;
+        pointerEvents: string;
         transformOrigin: string;
     };
     to: {
@@ -47,6 +48,7 @@ declare const scaleYUp: () => {
         transform: string;
         transformOrigin: string;
         opacity: number;
+        pointerEvents: string;
     };
     to: {
         transform: string;
@@ -57,6 +59,7 @@ declare const scaleYUp: () => {
 declare const fade: () => {
     from: {
         opacity: number;
+        pointerEvents: string;
     };
     to: {
         opacity: number;
@@ -66,6 +69,7 @@ declare const fadeDown: (rect?: DOMRect) => {
     from: {
         transform: string;
         opacity: number;
+        pointerEvents: string;
     };
     to: {
         transform: string;
@@ -76,6 +80,7 @@ declare const fadeUp: (rect?: DOMRect) => {
     from: {
         transform: string;
         opacity: number;
+        pointerEvents: string;
     };
     to: {
         transform: string;
@@ -86,6 +91,7 @@ declare const fadeRight: (rect?: DOMRect) => {
     from: {
         transform: string;
         opacity: number;
+        pointerEvents: string;
     };
     to: {
         transform: string;
@@ -96,6 +102,7 @@ declare const fadeLeft: (rect?: DOMRect) => {
     from: {
         transform: string;
         opacity: number;
+        pointerEvents: string;
     };
     to: {
         transform: string;
@@ -106,6 +113,7 @@ declare const grow: () => {
     from: {
         transform: string;
         opacity: number;
+        pointerEvents: string;
     };
     to: {
         transform: string;
@@ -117,6 +125,7 @@ declare const zoom: () => {
         transform: string;
         transformOrigin: string;
         opacity: number;
+        pointerEvents: string;
     };
     to: {
         transform: string;
@@ -129,6 +138,7 @@ declare const zoomOver: () => {
         transform: string;
         transformOrigin: string;
         opacity: number;
+        pointerEvents: string;
     };
     to: {
         transform: string;

package/Transition/variants.js

@@ -48,6 +48,7 @@ const scaleYDown = () => ({
     from: {
         transform: "scaleY(0.8)",
         opacity: 0,
+        pointerEvents: 'none',
         transformOrigin: "top"
     },
     to: {
@@ -60,7 +61,8 @@ const scaleYUp = () => ({
     from: {
         transform: "scaleY(0.8)",
         transformOrigin: "bottom",
-        opacity: 0
+        opacity: 0,
+        pointerEvents: 'none'
     },
     to: {
         transform: "scaleY(1)",
@@ -71,7 +73,8 @@ const scaleYUp = () => ({
 const fade = () => {
     return {
         from: {
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             opacity: 1
@@ -83,7 +86,8 @@ const fadeDown = (rect) => {
     return {
         from: {
             transform: `translateY(-${y}px) scale(0.98)`,
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             transform: `translateY(0) scale(1)`,
@@ -96,7 +100,8 @@ const fadeUp = (rect) => {
     return {
         from: {
             transform: `translateY(${y}px) scale(0.98)`,
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             transform: `translateY(0) scale(1)`,
@@ -109,7 +114,8 @@ const fadeRight = (rect) => {
     return {
         from: {
             transform: `translateX(-${x}px) scale(0.98)`,
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             transform: `translateX(0) scale(1)`,
@@ -122,7 +128,8 @@ const fadeLeft = (rect) => {
     return {
         from: {
             transform: `translateX(${x}px) scale(0.98)`,
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             transform: `translateX(0) scale(1)`,
@@ -134,7 +141,8 @@ const grow = () => {
     return {
         from: {
             transform: "scale(.8, .6)",
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             transform: "scale(1)",
@@ -147,7 +155,8 @@ const zoom = () => {
         from: {
             transform: "scale(.8)",
             transformOrigin: "center",
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             transform: "scale(1)",
@@ -161,7 +170,8 @@ const zoomOver = () => {
         from: {
             transform: "scale(1.2)",
             transformOrigin: "center",
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             transform: "scale(1)",

package/Transition/variants.js.map

@@ -1 +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        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    },\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        },\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        },\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        },\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        },\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        },\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        },\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        },\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        },\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,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;AACZ,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;AACZ,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;AACZ,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;AACZ,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;AACZ,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;AACZ,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;AACZ,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;AACZ,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;AACZ,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.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/breakpoint/BreakpointProvider.cjs

@@ -4,6 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('../css/index.cjs');
+var cookie = require('../cookie.cjs');
 
 const BreakpointCtx = React.createContext(null);
 const queries = {
@@ -29,13 +30,13 @@ const BreakpointProvider = ({ children, defaultKey }) => {
     React.useEffect(() => {
         const current = getCurrent(defaultKey);
         setCurrent(current);
-        document.cookie = `xuibp=${current};path=/`;
+        cookie.set("xuibp", current);
         const mqls = Object.entries(queries).map(([key, query]) => {
             const mql = window.matchMedia(query);
             const handler = () => {
                 if (mql.matches) {
                     setCurrent(key);
-                    document.cookie = `xuibp=${key};path=/`;
+                    cookie.set("xuibp", key);
                 }
             };
             mql.addEventListener("change", handler);

package/breakpoint/BreakpointProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BreakpointProvider.cjs","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode, useEffect, useState } from \"react\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nexport const BreakpointCtx = React.createContext<BreakpointKeys | null>(null);\n\nconst queries: Record<BreakpointKeys, string> = {\n    xs: `(max-width:${breakpoints.sm - 0.02}px)`,\n    sm: `(min-width:${breakpoints.sm}px) and (max-width:${breakpoints.md - 0.02}px)`,\n    md: `(min-width:${breakpoints.md}px) and (max-width:${breakpoints.lg - 0.02}px)`,\n    lg: `(min-width:${breakpoints.lg}px) and (max-width:${breakpoints.xl - 0.02}px)`,\n    xl: `(min-width:${breakpoints.xl}px)`\n};\n\nconst getCurrent = (def: BreakpointKeys): BreakpointKeys => {\n    if (typeof window === \"undefined\") return def;\n    const entries = Object.entries(queries) as [BreakpointKeys, string][];\n    for (const [key, query] of entries) {\n        if (window.matchMedia(query).matches) {\n            return key;\n        }\n    }\n    return def;\n};\n\nexport const BreakpointProvider = ({ children, defaultKey }: { children?: ReactNode, defaultKey: BreakpointKeys }) => {\n    const [current, setCurrent] = useState<BreakpointKeys>(defaultKey);\n\n    useEffect(() => {\n        const current = getCurrent(defaultKey)\n        setCurrent(current)\n        document.cookie = `xuibp=${current};path=/`\n        const mqls = Object.entries(queries).map(([key, query]) => {\n            const mql = window.matchMedia(query);\n            const handler = () => {\n                if (mql.matches) {\n                    setCurrent(key as BreakpointKeys);\n                    document.cookie = `xuibp=${key};path=/`\n                }\n            };\n\n            mql.addEventListener(\"change\", handler);\n\n            return () => mql.removeEventListener(\"change\", handler);\n        });\n\n        return () => {\n            mqls.forEach(fn => fn());\n        };\n    }, []);\n\n    return (\n        <BreakpointCtx.Provider value={current}>\n            {children}\n        </BreakpointCtx.Provider>\n    );\n};"],"names":[],"mappings":";;;;;;;AAMO;AAEP;AACI;;;;AAIA;;AAGJ;;AACuC;;;;AAI3B;;;AAGR;AACJ;AAEO;;;AAIC;;AAEA;AACA;;;AAGQ;;AAEI;;AAER;AAEA;;AAGJ;AAEA;;AAEA;;AAGJ;AAKJ;;;"}
+{"version":3,"file":"BreakpointProvider.cjs","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode, useEffect, useState } from \"react\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\nimport Cookie from \"../cookie\";\n\nexport const BreakpointCtx = React.createContext<BreakpointKeys | null>(null);\n\nconst queries: Record<BreakpointKeys, string> = {\n    xs: `(max-width:${breakpoints.sm - 0.02}px)`,\n    sm: `(min-width:${breakpoints.sm}px) and (max-width:${breakpoints.md - 0.02}px)`,\n    md: `(min-width:${breakpoints.md}px) and (max-width:${breakpoints.lg - 0.02}px)`,\n    lg: `(min-width:${breakpoints.lg}px) and (max-width:${breakpoints.xl - 0.02}px)`,\n    xl: `(min-width:${breakpoints.xl}px)`\n};\n\nconst getCurrent = (def: BreakpointKeys): BreakpointKeys => {\n    if (typeof window === \"undefined\") return def;\n    const entries = Object.entries(queries) as [BreakpointKeys, string][];\n    for (const [key, query] of entries) {\n        if (window.matchMedia(query).matches) {\n            return key;\n        }\n    }\n    return def;\n};\n\nexport const BreakpointProvider = ({ children, defaultKey }: { children?: ReactNode, defaultKey: BreakpointKeys }) => {\n    const [current, setCurrent] = useState<BreakpointKeys>(defaultKey);\n\n    useEffect(() => {\n        const current = getCurrent(defaultKey)\n        setCurrent(current)\n        Cookie.set(\"xuibp\", current)\n        const mqls = Object.entries(queries).map(([key, query]) => {\n            const mql = window.matchMedia(query);\n            const handler = () => {\n                if (mql.matches) {\n                    setCurrent(key as BreakpointKeys);\n                    Cookie.set(\"xuibp\", key)\n                }\n            };\n\n            mql.addEventListener(\"change\", handler);\n\n            return () => mql.removeEventListener(\"change\", handler);\n        });\n\n        return () => {\n            mqls.forEach(fn => fn());\n        };\n    }, []);\n\n    return (\n        <BreakpointCtx.Provider value={current}>\n            {children}\n        </BreakpointCtx.Provider>\n    );\n};"],"names":[],"mappings":";;;;;;;;AAOO;AAEP;AACI;;;;AAIA;;AAGJ;;AACuC;;;;AAI3B;;;AAGR;AACJ;AAEO;;;AAIC;;AAEA;AACA;;;AAGQ;;AAEI;;AAER;AAEA;;AAGJ;AAEA;;AAEA;;AAGJ;AAKJ;;;"}

package/breakpoint/BreakpointProvider.js

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useState, useEffect } from 'react';
 import { breakpoints } from '../css/index.js';
+import Cookie from '../cookie.js';
 
 const BreakpointCtx = React__default.createContext(null);
 const queries = {
@@ -27,13 +28,13 @@ const BreakpointProvider = ({ children, defaultKey }) => {
     useEffect(() => {
         const current = getCurrent(defaultKey);
         setCurrent(current);
-        document.cookie = `xuibp=${current};path=/`;
+        Cookie.set("xuibp", current);
         const mqls = Object.entries(queries).map(([key, query]) => {
             const mql = window.matchMedia(query);
             const handler = () => {
                 if (mql.matches) {
                     setCurrent(key);
-                    document.cookie = `xuibp=${key};path=/`;
+                    Cookie.set("xuibp", key);
                 }
             };
             mql.addEventListener("change", handler);

package/breakpoint/BreakpointProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreakpointProvider.js","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode, useEffect, useState } from \"react\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nexport const BreakpointCtx = React.createContext<BreakpointKeys | null>(null);\n\nconst queries: Record<BreakpointKeys, string> = {\n    xs: `(max-width:${breakpoints.sm - 0.02}px)`,\n    sm: `(min-width:${breakpoints.sm}px) and (max-width:${breakpoints.md - 0.02}px)`,\n    md: `(min-width:${breakpoints.md}px) and (max-width:${breakpoints.lg - 0.02}px)`,\n    lg: `(min-width:${breakpoints.lg}px) and (max-width:${breakpoints.xl - 0.02}px)`,\n    xl: `(min-width:${breakpoints.xl}px)`\n};\n\nconst getCurrent = (def: BreakpointKeys): BreakpointKeys => {\n    if (typeof window === \"undefined\") return def;\n    const entries = Object.entries(queries) as [BreakpointKeys, string][];\n    for (const [key, query] of entries) {\n        if (window.matchMedia(query).matches) {\n            return key;\n        }\n    }\n    return def;\n};\n\nexport const BreakpointProvider = ({ children, defaultKey }: { children?: ReactNode, defaultKey: BreakpointKeys }) => {\n    const [current, setCurrent] = useState<BreakpointKeys>(defaultKey);\n\n    useEffect(() => {\n        const current = getCurrent(defaultKey)\n        setCurrent(current)\n        document.cookie = `xuibp=${current};path=/`\n        const mqls = Object.entries(queries).map(([key, query]) => {\n            const mql = window.matchMedia(query);\n            const handler = () => {\n                if (mql.matches) {\n                    setCurrent(key as BreakpointKeys);\n                    document.cookie = `xuibp=${key};path=/`\n                }\n            };\n\n            mql.addEventListener(\"change\", handler);\n\n            return () => mql.removeEventListener(\"change\", handler);\n        });\n\n        return () => {\n            mqls.forEach(fn => fn());\n        };\n    }, []);\n\n    return (\n        <BreakpointCtx.Provider value={current}>\n            {children}\n        </BreakpointCtx.Provider>\n    );\n};"],"names":[],"mappings":";;;;;AAMO;AAEP;AACI;;;;AAIA;;AAGJ;;AACuC;;;;AAI3B;;;AAGR;AACJ;AAEO;;;AAIC;;AAEA;AACA;;;AAGQ;;AAEI;;AAER;AAEA;;AAGJ;AAEA;;AAEA;;AAGJ;AAKJ;;"}
+{"version":3,"file":"BreakpointProvider.js","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode, useEffect, useState } from \"react\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\nimport Cookie from \"../cookie\";\n\nexport const BreakpointCtx = React.createContext<BreakpointKeys | null>(null);\n\nconst queries: Record<BreakpointKeys, string> = {\n    xs: `(max-width:${breakpoints.sm - 0.02}px)`,\n    sm: `(min-width:${breakpoints.sm}px) and (max-width:${breakpoints.md - 0.02}px)`,\n    md: `(min-width:${breakpoints.md}px) and (max-width:${breakpoints.lg - 0.02}px)`,\n    lg: `(min-width:${breakpoints.lg}px) and (max-width:${breakpoints.xl - 0.02}px)`,\n    xl: `(min-width:${breakpoints.xl}px)`\n};\n\nconst getCurrent = (def: BreakpointKeys): BreakpointKeys => {\n    if (typeof window === \"undefined\") return def;\n    const entries = Object.entries(queries) as [BreakpointKeys, string][];\n    for (const [key, query] of entries) {\n        if (window.matchMedia(query).matches) {\n            return key;\n        }\n    }\n    return def;\n};\n\nexport const BreakpointProvider = ({ children, defaultKey }: { children?: ReactNode, defaultKey: BreakpointKeys }) => {\n    const [current, setCurrent] = useState<BreakpointKeys>(defaultKey);\n\n    useEffect(() => {\n        const current = getCurrent(defaultKey)\n        setCurrent(current)\n        Cookie.set(\"xuibp\", current)\n        const mqls = Object.entries(queries).map(([key, query]) => {\n            const mql = window.matchMedia(query);\n            const handler = () => {\n                if (mql.matches) {\n                    setCurrent(key as BreakpointKeys);\n                    Cookie.set(\"xuibp\", key)\n                }\n            };\n\n            mql.addEventListener(\"change\", handler);\n\n            return () => mql.removeEventListener(\"change\", handler);\n        });\n\n        return () => {\n            mqls.forEach(fn => fn());\n        };\n    }, []);\n\n    return (\n        <BreakpointCtx.Provider value={current}>\n            {children}\n        </BreakpointCtx.Provider>\n    );\n};"],"names":[],"mappings":";;;;;;AAOO;AAEP;AACI;;;;AAIA;;AAGJ;;AACuC;;;;AAI3B;;;AAGR;AACJ;AAEO;;;AAIC;;AAEA;AACA;;;AAGQ;;AAEI;;AAER;AAEA;;AAGJ;AAEA;;AAEA;;AAGJ;AAKJ;;"}

package/cookie.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+// cookieUtils.ts
+const Cookie = {
+    /**
+     * Set a cookie
+     * @param name - cookie name
+     * @param value - cookie value
+     * @param days - optional, number of days to expire, default 36500 (~100 years)
+     */
+    set: (name, value, days = 36500) => {
+        const expires = new Date();
+        expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
+        document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires.toUTCString()}; path=/`;
+    },
+    /**
+     * Get a cookie by name
+     * @param name - cookie name
+     * @returns value or null
+     */
+    // get: (name: string) => {
+    //    const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
+    //    return match ? decodeURIComponent(match[1]) : null;
+    // },
+    /**
+     * Delete a cookie
+     * @param name - cookie name
+     */
+    // delete: (name: string) => {
+    //    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
+    // },
+    /**
+     * Check if a cookie exists
+     * @param name - cookie name
+     * @returns boolean
+     */
+    exists: (name) => {
+        return document.cookie.split("; ").some(c => c.startsWith(`${name}=`));
+    }
+};
+
+module.exports = Cookie;
+//# sourceMappingURL=cookie.cjs.map

package/cookie.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cookie.cjs","sources":["../src/cookie.ts"],"sourcesContent":["// cookieUtils.ts\nconst Cookie = {\n   /**\n    * Set a cookie\n    * @param name - cookie name\n    * @param value - cookie value\n    * @param days - optional, number of days to expire, default 36500 (~100 years)\n    */\n   set: (name: string, value: string, days = 36500) => {\n      const expires = new Date();\n      expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);\n      document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires.toUTCString()}; path=/`;\n   },\n\n   /**\n    * Get a cookie by name\n    * @param name - cookie name\n    * @returns value or null\n    */\n   // get: (name: string) => {\n   //    const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));\n   //    return match ? decodeURIComponent(match[1]) : null;\n   // },\n\n   /**\n    * Delete a cookie\n    * @param name - cookie name\n    */\n   // delete: (name: string) => {\n   //    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;\n   // },\n\n   /**\n    * Check if a cookie exists\n    * @param name - cookie name\n    * @returns boolean\n    */\n   exists: (name: string) => {\n      return document.cookie.split(\"; \").some(c => c.startsWith(`${name}=`));\n   }\n};\n\nexport default Cookie"],"names":[],"mappings":";;AAAA;AACA,MAAM,MAAM,GAAG;AACZ;;;;;AAKG;IACH,GAAG,EAAE,CAAC,IAAY,EAAE,KAAa,EAAE,IAAI,GAAG,KAAK,KAAI;AAChD,QAAA,MAAM,OAAO,GAAG,IAAI,IAAI,EAAE;AAC1B,QAAA,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAC/D,QAAA,QAAQ,CAAC,MAAM,GAAG,CAAA,EAAG,IAAI,IAAI,kBAAkB,CAAC,KAAK,CAAC,aAAa,OAAO,CAAC,WAAW,EAAE,UAAU;IACrG,CAAC;AAED;;;;AAIG;;;;;AAMH;;;AAGG;;;;AAKH;;;;AAIG;AACH,IAAA,MAAM,EAAE,CAAC,IAAY,KAAI;QACtB,OAAO,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,IAAI,CAAA,CAAA,CAAG,CAAC,CAAC;IACzE;;;;;"}

package/cookie.js

@@ -0,0 +1,41 @@
+// cookieUtils.ts
+const Cookie = {
+    /**
+     * Set a cookie
+     * @param name - cookie name
+     * @param value - cookie value
+     * @param days - optional, number of days to expire, default 36500 (~100 years)
+     */
+    set: (name, value, days = 36500) => {
+        const expires = new Date();
+        expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
+        document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires.toUTCString()}; path=/`;
+    },
+    /**
+     * Get a cookie by name
+     * @param name - cookie name
+     * @returns value or null
+     */
+    // get: (name: string) => {
+    //    const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
+    //    return match ? decodeURIComponent(match[1]) : null;
+    // },
+    /**
+     * Delete a cookie
+     * @param name - cookie name
+     */
+    // delete: (name: string) => {
+    //    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
+    // },
+    /**
+     * Check if a cookie exists
+     * @param name - cookie name
+     * @returns boolean
+     */
+    exists: (name) => {
+        return document.cookie.split("; ").some(c => c.startsWith(`${name}=`));
+    }
+};
+
+export { Cookie as default };
+//# sourceMappingURL=cookie.js.map

package/cookie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cookie.js","sources":["../src/cookie.ts"],"sourcesContent":["// cookieUtils.ts\nconst Cookie = {\n   /**\n    * Set a cookie\n    * @param name - cookie name\n    * @param value - cookie value\n    * @param days - optional, number of days to expire, default 36500 (~100 years)\n    */\n   set: (name: string, value: string, days = 36500) => {\n      const expires = new Date();\n      expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);\n      document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires.toUTCString()}; path=/`;\n   },\n\n   /**\n    * Get a cookie by name\n    * @param name - cookie name\n    * @returns value or null\n    */\n   // get: (name: string) => {\n   //    const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));\n   //    return match ? decodeURIComponent(match[1]) : null;\n   // },\n\n   /**\n    * Delete a cookie\n    * @param name - cookie name\n    */\n   // delete: (name: string) => {\n   //    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;\n   // },\n\n   /**\n    * Check if a cookie exists\n    * @param name - cookie name\n    * @returns boolean\n    */\n   exists: (name: string) => {\n      return document.cookie.split(\"; \").some(c => c.startsWith(`${name}=`));\n   }\n};\n\nexport default Cookie"],"names":[],"mappings":"AAAA;AACA,MAAM,MAAM,GAAG;AACZ;;;;;AAKG;IACH,GAAG,EAAE,CAAC,IAAY,EAAE,KAAa,EAAE,IAAI,GAAG,KAAK,KAAI;AAChD,QAAA,MAAM,OAAO,GAAG,IAAI,IAAI,EAAE;AAC1B,QAAA,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAC/D,QAAA,QAAQ,CAAC,MAAM,GAAG,CAAA,EAAG,IAAI,IAAI,kBAAkB,CAAC,KAAK,CAAC,aAAa,OAAO,CAAC,WAAW,EAAE,UAAU;IACrG,CAAC;AAED;;;;AAIG;;;;;AAMH;;;AAGG;;;;AAKH;;;;AAIG;AACH,IAAA,MAAM,EAAE,CAAC,IAAY,KAAI;QACtB,OAAO,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,IAAI,CAAA,CAAA,CAAG,CAAC,CAAC;IACzE;;;;;"}

package/package.json

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