@xanui/core 1.2.23 → 1.2.26

package/Tag/useTagProps.js

@@ -1,4 +1,4 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var cssPropList=require('./cssPropList.js'),index=require('../css/index.js'),classNames=require('pretty-class'),React=require('react');const useTagProps = (props) => {
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var cssPropList=require('./cssPropList.js'),index=require('../css/index.js'),prettyClass=require('pretty-class'),React=require('react');const useTagProps = (props) => {
     const parsed = React.useMemo(() => {
         let _props = {};
         let clss = [];
@@ -38,7 +38,7 @@
         return {
             props: _props,
             styles,
-            className: classNames.classNames(clss)
+            className: prettyClass.classNames(clss)
         };
     }, [JSON.stringify(props)]);
     const _props = {};

package/Tag/useTagProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTagProps.js","sources":["../../src/Tag/useTagProps.ts"],"sourcesContent":["import { TagComponentType, TagProps, TagPropsRoot } from './types';\nimport cssPropList from './cssPropList';\nimport { css } from '../css';\nimport { classNames } from 'pretty-class';\nimport { CSSFactoryType } from 'oncss';\nimport { useMemo } from 'react';\n\nexport type useTagPropsReturn<T extends TagComponentType = \"div\"> = {\n   props: TagProps<T>,\n   style: CSSFactoryType\n}\n\nconst useTagProps = <T extends TagComponentType = \"div\">(props: TagPropsRoot<T>): useTagPropsReturn<T> => {\n\n   const parsed = useMemo(() => {\n      let _props: any = {}\n      let clss = []\n      let _css: any = {}\n\n      let sx = props.sx || {}\n      let sxr = props.sxr || {}\n      let hover = props.hover || {}\n      let style = props.style || {}\n\n      for (let key in props) {\n         if (key === \"sx\" || key === \"sxr\" || key === \"style\") {\n            continue;\n         }\n\n         let val = (props as any)[key];\n         if (key === \"className\") {\n            clss.push(val)\n         } else if (key === 'baseClass') {\n            clss.push(\"xui-\" + val)\n         } else if (key === 'classNames') {\n            clss.push(...val)\n         } else if (key === \"hover\") {\n            _css['&:hover'] = { ...(_css['&:hover'] || {}), ...val }\n         } else if (!cssPropList[key]) {\n            _props[key] = val\n         } else {\n            _css[key] = val\n         }\n      }\n\n      const styles = css({ ...sxr, ..._css, ...sx, ...style }, {\n         injectStyle: typeof window !== 'undefined',\n      })\n\n      clss.push(styles.classname)\n      return {\n         props: _props,\n         styles,\n         className: classNames(clss)\n      }\n   }, [JSON.stringify(props)])\n\n   const _props: any = {};\n   for (let prop in parsed.props) {\n      _props[prop] = (props as any)[prop]\n   }\n   _props.className = parsed.className;\n\n   return { props: _props, style: parsed.styles };\n}\n\n\nexport default useTagProps"],"names":["useMemo","cssPropList","css","classNames"],"mappings":"6MAYA,MAAM,WAAW,GAAG,CAAqC,KAAsB,KAA0B;AAEtG,IAAA,MAAM,MAAM,GAAGA,aAAO,CAAC,MAAK;QACzB,IAAI,MAAM,GAAQ,EAAE;QACpB,IAAI,IAAI,GAAG,EAAE;QACb,IAAI,IAAI,GAAQ,EAAE;AAElB,QAAA,IAAI,EAAE,GAAG,KAAK,CAAC,EAAE,IAAI,EAAE;AACvB,QAAA,IAAI,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,EAAE;AACzB,QAAY,KAAK,CAAC,KAAK,IAAI;AAC3B,QAAA,IAAI,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE;AAE7B,QAAA,KAAK,IAAI,GAAG,IAAI,KAAK,EAAE;AACpB,YAAA,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,KAAK,IAAI,GAAG,KAAK,OAAO,EAAE;gBACnD;YACH;AAEA,YAAA,IAAI,GAAG,GAAI,KAAa,CAAC,GAAG,CAAC;AAC7B,YAAA,IAAI,GAAG,KAAK,WAAW,EAAE;AACtB,gBAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;YACjB;AAAO,iBAAA,IAAI,GAAG,KAAK,WAAW,EAAE;AAC7B,gBAAA,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;YAC1B;AAAO,iBAAA,IAAI,GAAG,KAAK,YAAY,EAAE;AAC9B,gBAAA,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC;YACpB;AAAO,iBAAA,IAAI,GAAG,KAAK,OAAO,EAAE;AACzB,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAS,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,EAAC,EAAK,GAAG,CAAE;YAC3D;AAAO,iBAAA,IAAI,CAACC,mBAAW,CAAC,GAAG,CAAC,EAAE;AAC3B,gBAAA,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG;YACpB;iBAAO;AACJ,gBAAA,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG;YAClB;QACH;QAEA,MAAM,MAAM,GAAGC,SAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,GAAG,CAAA,EAAK,IAAI,CAAA,EAAK,EAAE,CAAA,EAAK,KAAK,CAAA,EAAI;AACtD,YAAA,WAAW,EAAE,OAAO,MAAM,KAAK,WAAW;AAC5C,SAAA,CAAC;AAEF,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC;QAC3B,OAAO;AACJ,YAAA,KAAK,EAAE,MAAM;YACb,MAAM;AACN,YAAA,SAAS,EAAEC,qBAAU,CAAC,IAAI;SAC5B;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAE3B,MAAM,MAAM,GAAQ,EAAE;AACtB,IAAA,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,KAAK,EAAE;QAC5B,MAAM,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;IACtC;AACA,IAAA,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS;IAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;AACjD"}
+{"version":3,"file":"useTagProps.js","sources":["../../src/Tag/useTagProps.ts"],"sourcesContent":["import { TagComponentType, TagProps, TagPropsRoot } from './types';\nimport cssPropList from './cssPropList';\nimport { css } from '../css';\nimport { classNames } from 'pretty-class';\nimport { CSSFactoryType } from 'oncss';\nimport { useMemo } from 'react';\n\nexport type useTagPropsReturn<T extends TagComponentType = \"div\"> = {\n   props: TagProps<T>,\n   style: CSSFactoryType\n}\n\nconst useTagProps = <T extends TagComponentType = \"div\">(props: TagPropsRoot<T>): useTagPropsReturn<T> => {\n\n   const parsed = useMemo(() => {\n      let _props: any = {}\n      let clss = []\n      let _css: any = {}\n\n      let sx = props.sx || {}\n      let sxr = props.sxr || {}\n      let hover = props.hover || {}\n      let style = props.style || {}\n\n      for (let key in props) {\n         if (key === \"sx\" || key === \"sxr\" || key === \"style\") {\n            continue;\n         }\n\n         let val = (props as any)[key];\n         if (key === \"className\") {\n            clss.push(val)\n         } else if (key === 'baseClass') {\n            clss.push(\"xui-\" + val)\n         } else if (key === 'classNames') {\n            clss.push(...val)\n         } else if (key === \"hover\") {\n            _css['&:hover'] = { ...(_css['&:hover'] || {}), ...val }\n         } else if (!cssPropList[key]) {\n            _props[key] = val\n         } else {\n            _css[key] = val\n         }\n      }\n\n      const styles = css({ ...sxr, ..._css, ...sx, ...style }, {\n         injectStyle: typeof window !== 'undefined',\n      })\n\n      clss.push(styles.classname)\n      return {\n         props: _props,\n         styles,\n         className: classNames(clss)\n      }\n   }, [JSON.stringify(props)])\n\n   const _props: any = {};\n   for (let prop in parsed.props) {\n      _props[prop] = (props as any)[prop]\n   }\n   _props.className = parsed.className;\n\n   return { props: _props, style: parsed.styles };\n}\n\n\nexport default useTagProps"],"names":["useMemo","cssPropList","css","classNames"],"mappings":"8MAYA,MAAM,WAAW,GAAG,CAAqC,KAAsB,KAA0B;AAEtG,IAAA,MAAM,MAAM,GAAGA,aAAO,CAAC,MAAK;QACzB,IAAI,MAAM,GAAQ,EAAE;QACpB,IAAI,IAAI,GAAG,EAAE;QACb,IAAI,IAAI,GAAQ,EAAE;AAElB,QAAA,IAAI,EAAE,GAAG,KAAK,CAAC,EAAE,IAAI,EAAE;AACvB,QAAA,IAAI,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,EAAE;AACzB,QAAY,KAAK,CAAC,KAAK,IAAI;AAC3B,QAAA,IAAI,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE;AAE7B,QAAA,KAAK,IAAI,GAAG,IAAI,KAAK,EAAE;AACpB,YAAA,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,KAAK,IAAI,GAAG,KAAK,OAAO,EAAE;gBACnD;YACH;AAEA,YAAA,IAAI,GAAG,GAAI,KAAa,CAAC,GAAG,CAAC;AAC7B,YAAA,IAAI,GAAG,KAAK,WAAW,EAAE;AACtB,gBAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;YACjB;AAAO,iBAAA,IAAI,GAAG,KAAK,WAAW,EAAE;AAC7B,gBAAA,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;YAC1B;AAAO,iBAAA,IAAI,GAAG,KAAK,YAAY,EAAE;AAC9B,gBAAA,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC;YACpB;AAAO,iBAAA,IAAI,GAAG,KAAK,OAAO,EAAE;AACzB,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAS,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,EAAC,EAAK,GAAG,CAAE;YAC3D;AAAO,iBAAA,IAAI,CAACC,mBAAW,CAAC,GAAG,CAAC,EAAE;AAC3B,gBAAA,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG;YACpB;iBAAO;AACJ,gBAAA,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG;YAClB;QACH;QAEA,MAAM,MAAM,GAAGC,SAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,GAAG,CAAA,EAAK,IAAI,CAAA,EAAK,EAAE,CAAA,EAAK,KAAK,CAAA,EAAI;AACtD,YAAA,WAAW,EAAE,OAAO,MAAM,KAAK,WAAW;AAC5C,SAAA,CAAC;AAEF,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC;QAC3B,OAAO;AACJ,YAAA,KAAK,EAAE,MAAM;YACb,MAAM;AACN,YAAA,SAAS,EAAEC,sBAAU,CAAC,IAAI;SAC5B;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAE3B,MAAM,MAAM,GAAQ,EAAE;AACtB,IAAA,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,KAAK,EAAE;QAC5B,MAAM,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;IACtC;AACA,IAAA,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS;IAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;AACjD"}

package/Transition/index.d.ts

@@ -4,8 +4,10 @@ import { UseTransitionProps } from '../hooks/useTransition/index.js';
 type TransitionProps = UseTransitionProps & {
     children: React.ReactElement;
 };
-declare const Transition: ({ children, ...props }: TransitionProps) => React$1.DetailedReactHTMLElement<{
-    className: string;
+declare const Transition: ({ children, ...options }: TransitionProps) => React$1.DetailedReactHTMLElement<{
+    id: string;
+    'data-transition': string;
+    'data-transition-state': string;
 }, HTMLElement> | null;
 
 export { Transition as default };

package/Transition/index.js

@@ -1,11 +1,8 @@
 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),React=require('react'),index=require('../hooks/useTransition/index.js');const Transition = (_a) => {
-    var _b;
-    var { children } = _a, props = tslib.__rest(_a, ["children"]);
-    const { exited, classname } = index.default(props);
+    var { children } = _a, options = tslib.__rest(_a, ["children"]);
+    const { props, exited } = index.default(options);
     if (exited)
         return null;
     const clone = React.Children.only(children);
-    return React.cloneElement(clone, {
-        className: `${((_b = clone === null || clone === void 0 ? void 0 : clone.props) === null || _b === void 0 ? void 0 : _b.className) || ''} ${classname || ''}`.trim()
-    });
+    return React.cloneElement(clone, props);
 };exports.default=Transition;//# sourceMappingURL=index.js.map

package/Transition/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["import { cloneElement, Children } from 'react';\nimport useTransition, { UseTransitionProps } from '../hooks/useTransition';\n\nexport type TransitionProps = UseTransitionProps & {\n    children: React.ReactElement;\n}\n\nconst Transition = ({ children, ...props }: TransitionProps) => {\n    const { exited, classname } = useTransition(props);\n    if (exited) return null;\n    const clone: any = Children.only(children);\n    return cloneElement(clone, {\n        className: `${clone?.props?.className || ''} ${classname || ''}`.trim()\n    });\n}\n\n\nexport default Transition"],"names":["__rest","useTransition","Children","cloneElement"],"mappings":"yKAOA,MAAM,UAAU,GAAG,CAAC,EAAuC,KAAI;;AAA3C,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;IACpC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAGC,aAAa,CAAC,KAAK,CAAC;AAClD,IAAA,IAAI,MAAM;AAAE,QAAA,OAAO,IAAI;IACvB,MAAM,KAAK,GAAQC,cAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC1C,OAAOC,kBAAY,CAAC,KAAK,EAAE;QACvB,SAAS,EAAE,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,KAAK,0CAAE,SAAS,KAAI,EAAE,CAAA,CAAA,EAAI,SAAS,IAAI,EAAE,CAAA,CAAE,CAAC,IAAI;AACxE,KAAA,CAAC;AACN"}
+{"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["import { cloneElement, Children } from 'react';\nimport useTransition, { UseTransitionProps } from '../hooks/useTransition';\n\nexport type TransitionProps = UseTransitionProps & {\n    children: React.ReactElement;\n}\n\nconst Transition = ({ children, ...options }: TransitionProps) => {\n    const { props, exited } = useTransition(options);\n    if (exited) return null;\n    const clone: any = Children.only(children);\n    return cloneElement(clone, props);\n}\n\n\nexport default Transition"],"names":["__rest","useTransition","Children","cloneElement"],"mappings":"yKAOA,MAAM,UAAU,GAAG,CAAC,EAAyC,KAAI;AAA7C,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA+B,EAA1B,OAAO,GAAAA,YAAA,CAAA,EAAA,EAAtB,YAAwB,CAAF;IACtC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAGC,aAAa,CAAC,OAAO,CAAC;AAChD,IAAA,IAAI,MAAM;AAAE,QAAA,OAAO,IAAI;IACvB,MAAM,KAAK,GAAQC,cAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC1C,IAAA,OAAOC,kBAAY,CAAC,KAAK,EAAE,KAAK,CAAC;AACrC"}

package/Transition/index.mjs

@@ -1,11 +1,8 @@
 import {__rest}from'tslib';import {Children,cloneElement}from'react';import useTransition from'../hooks/useTransition/index.mjs';const Transition = (_a) => {
-    var _b;
-    var { children } = _a, props = __rest(_a, ["children"]);
-    const { exited, classname } = useTransition(props);
+    var { children } = _a, options = __rest(_a, ["children"]);
+    const { props, exited } = useTransition(options);
     if (exited)
         return null;
     const clone = Children.only(children);
-    return cloneElement(clone, {
-        className: `${((_b = clone === null || clone === void 0 ? void 0 : clone.props) === null || _b === void 0 ? void 0 : _b.className) || ''} ${classname || ''}`.trim()
-    });
+    return cloneElement(clone, props);
 };export{Transition as default};//# sourceMappingURL=index.mjs.map

package/Transition/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["import { cloneElement, Children } from 'react';\nimport useTransition, { UseTransitionProps } from '../hooks/useTransition';\n\nexport type TransitionProps = UseTransitionProps & {\n    children: React.ReactElement;\n}\n\nconst Transition = ({ children, ...props }: TransitionProps) => {\n    const { exited, classname } = useTransition(props);\n    if (exited) return null;\n    const clone: any = Children.only(children);\n    return cloneElement(clone, {\n        className: `${clone?.props?.className || ''} ${classname || ''}`.trim()\n    });\n}\n\n\nexport default Transition"],"names":[],"mappings":"iIAOA,MAAM,UAAU,GAAG,CAAC,EAAuC,KAAI;;AAA3C,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;IACpC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC;AAClD,IAAA,IAAI,MAAM;AAAE,QAAA,OAAO,IAAI;IACvB,MAAM,KAAK,GAAQ,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC1C,OAAO,YAAY,CAAC,KAAK,EAAE;QACvB,SAAS,EAAE,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,KAAK,0CAAE,SAAS,KAAI,EAAE,CAAA,CAAA,EAAI,SAAS,IAAI,EAAE,CAAA,CAAE,CAAC,IAAI;AACxE,KAAA,CAAC;AACN"}
+{"version":3,"file":"index.mjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["import { cloneElement, Children } from 'react';\nimport useTransition, { UseTransitionProps } from '../hooks/useTransition';\n\nexport type TransitionProps = UseTransitionProps & {\n    children: React.ReactElement;\n}\n\nconst Transition = ({ children, ...options }: TransitionProps) => {\n    const { props, exited } = useTransition(options);\n    if (exited) return null;\n    const clone: any = Children.only(children);\n    return cloneElement(clone, props);\n}\n\n\nexport default Transition"],"names":[],"mappings":"iIAOA,MAAM,UAAU,GAAG,CAAC,EAAyC,KAAI;AAA7C,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA+B,EAA1B,OAAO,GAAA,MAAA,CAAA,EAAA,EAAtB,YAAwB,CAAF;IACtC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,aAAa,CAAC,OAAO,CAAC;AAChD,IAAA,IAAI,MAAM;AAAE,QAAA,OAAO,IAAI;IACvB,MAAM,KAAK,GAAQ,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC1C,IAAA,OAAO,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC;AACrC"}

package/css/getProps.js

@@ -23,10 +23,12 @@
     }
     if (prop === "spacing" && typeof value === "number") {
         const val = value * 8;
+        const hasWidth = "width" in _css;
+        const width = `calc(${hasWidth ? _css.width : "100%"} + ${val}px)`;
         return {
             marginLeft: `-${val}px`,
             marginTop: `-${val}px`,
-            width: `calc(100% + ${val}px)`,
+            width: width,
             "& > *": {
                 paddingLeft: `${val}px`,
                 paddingTop: `${val}px`,

package/css/getProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"getProps.js","sources":["../../src/css/getProps.ts"],"sourcesContent":["import { CSSProps } from \"./types\";\n\nconst getProps = (prop: string, value: string, _css: CSSProps) => {\n    let important;\n    if (typeof value === 'string') {\n        const split = value.split(\"!\")\n        important = split[1] ? \"!important\" : \"\"\n        value = split[0]\n    }\n\n    if (prop === 'disabled') {\n        if ((value as any) === true) {\n            let c: any = {\n                pointerEvents: \"none!important\",\n                cursor: \"default!important\",\n                userSelect: \"none!important\",\n                opacity: \"0.5!important\",\n                color: `text.primary!important`,\n                borderColor: `divider.secondary!important`,\n            }\n\n            if ((_css as any).bgcolor && (_css as any).bgcolor !== 'transparent') {\n                c.bgcolor = `divider.primary!important`\n            }\n            return c\n        }\n        return {}\n    }\n\n\n    if (prop === \"spacing\" && typeof value === \"number\") {\n        const val = value * 8;\n\n        return {\n            marginLeft: `-${val}px`,\n            marginTop: `-${val}px`,\n            width: `calc(100% + ${val}px)`,\n\n            \"& > *\": {\n                paddingLeft: `${val}px`,\n                paddingTop: `${val}px`,\n            },\n        } as any;\n    }\n\n\n\n    // if (value && typeof value === \"number\" && [\"border\", \"borderRight\", \"borderLeft\", \"borderTop\", \"borderBottom\"].includes(prop as any)) {\n    //     const keys: any = Object.keys(_css)\n    //     let p: any = {\n    //         [`${prop}Width`]: value + 'px' + (important || \"\"),\n    //     }\n    //     // if (!keys.includes(`${prop}Color`)) {\n    //     //     p[`${prop}Color`] = \"divider.primary\"\n    //     // }\n    //     if (!keys.includes(`${prop}Style`)) {\n    //         p[`${prop}Style`] = \"solid\"\n    //     }\n    //     return p\n    // }\n}\n\nexport default getProps"],"names":[],"mappings":"sEAEA,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,IAAc,KAAI;AAE7D,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;AAC9B,QAAY,KAAK,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,EAAE;AACxC,QAAA,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC;IACpB;AAEA,IAAA,IAAI,IAAI,KAAK,UAAU,EAAE;AACrB,QAAA,IAAK,KAAa,KAAK,IAAI,EAAE;AACzB,YAAA,IAAI,CAAC,GAAQ;AACT,gBAAA,aAAa,EAAE,gBAAgB;AAC/B,gBAAA,MAAM,EAAE,mBAAmB;AAC3B,gBAAA,UAAU,EAAE,gBAAgB;AAC5B,gBAAA,OAAO,EAAE,eAAe;AACxB,gBAAA,KAAK,EAAE,CAAA,sBAAA,CAAwB;AAC/B,gBAAA,WAAW,EAAE,CAAA,2BAAA,CAA6B;aAC7C;YAED,IAAK,IAAY,CAAC,OAAO,IAAK,IAAY,CAAC,OAAO,KAAK,aAAa,EAAE;AAClE,gBAAA,CAAC,CAAC,OAAO,GAAG,CAAA,yBAAA,CAA2B;YAC3C;AACA,YAAA,OAAO,CAAC;QACZ;AACA,QAAA,OAAO,EAAE;IACb;IAGA,IAAI,IAAI,KAAK,SAAS,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AACjD,QAAA,MAAM,GAAG,GAAG,KAAK,GAAG,CAAC;QAErB,OAAO;YACH,UAAU,EAAE,CAAA,CAAA,EAAI,GAAG,CAAA,EAAA,CAAI;YACvB,SAAS,EAAE,CAAA,CAAA,EAAI,GAAG,CAAA,EAAA,CAAI;YACtB,KAAK,EAAE,CAAA,YAAA,EAAe,GAAG,CAAA,GAAA,CAAK;AAE9B,YAAA,OAAO,EAAE;gBACL,WAAW,EAAE,CAAA,EAAG,GAAG,CAAA,EAAA,CAAI;gBACvB,UAAU,EAAE,CAAA,EAAG,GAAG,CAAA,EAAA,CAAI;AACzB,aAAA;SACG;IACZ;;;;;;;;;;;;;;AAiBJ"}
+{"version":3,"file":"getProps.js","sources":["../../src/css/getProps.ts"],"sourcesContent":["import { CSSProps } from \"./types\";\n\nconst getProps = (prop: string, value: string, _css: CSSProps) => {\n    let important;\n    if (typeof value === 'string') {\n        const split = value.split(\"!\")\n        important = split[1] ? \"!important\" : \"\"\n        value = split[0]\n    }\n\n    if (prop === 'disabled') {\n        if ((value as any) === true) {\n            let c: any = {\n                pointerEvents: \"none!important\",\n                cursor: \"default!important\",\n                userSelect: \"none!important\",\n                opacity: \"0.5!important\",\n                color: `text.primary!important`,\n                borderColor: `divider.secondary!important`,\n            }\n\n            if ((_css as any).bgcolor && (_css as any).bgcolor !== 'transparent') {\n                c.bgcolor = `divider.primary!important`\n            }\n            return c\n        }\n        return {}\n    }\n\n\n    if (prop === \"spacing\" && typeof value === \"number\") {\n        const val = value * 8;\n        const hasWidth = \"width\" in _css;\n        const width = `calc(${hasWidth ? _css.width : \"100%\"} + ${val}px)`;\n        return {\n            marginLeft: `-${val}px`,\n            marginTop: `-${val}px`,\n            width: width,\n\n            \"& > *\": {\n                paddingLeft: `${val}px`,\n                paddingTop: `${val}px`,\n            },\n        } as any;\n    }\n\n\n\n    // if (value && typeof value === \"number\" && [\"border\", \"borderRight\", \"borderLeft\", \"borderTop\", \"borderBottom\"].includes(prop as any)) {\n    //     const keys: any = Object.keys(_css)\n    //     let p: any = {\n    //         [`${prop}Width`]: value + 'px' + (important || \"\"),\n    //     }\n    //     // if (!keys.includes(`${prop}Color`)) {\n    //     //     p[`${prop}Color`] = \"divider.primary\"\n    //     // }\n    //     if (!keys.includes(`${prop}Style`)) {\n    //         p[`${prop}Style`] = \"solid\"\n    //     }\n    //     return p\n    // }\n}\n\nexport default getProps"],"names":[],"mappings":"sEAEA,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,IAAc,KAAI;AAE7D,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;AAC9B,QAAY,KAAK,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,EAAE;AACxC,QAAA,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC;IACpB;AAEA,IAAA,IAAI,IAAI,KAAK,UAAU,EAAE;AACrB,QAAA,IAAK,KAAa,KAAK,IAAI,EAAE;AACzB,YAAA,IAAI,CAAC,GAAQ;AACT,gBAAA,aAAa,EAAE,gBAAgB;AAC/B,gBAAA,MAAM,EAAE,mBAAmB;AAC3B,gBAAA,UAAU,EAAE,gBAAgB;AAC5B,gBAAA,OAAO,EAAE,eAAe;AACxB,gBAAA,KAAK,EAAE,CAAA,sBAAA,CAAwB;AAC/B,gBAAA,WAAW,EAAE,CAAA,2BAAA,CAA6B;aAC7C;YAED,IAAK,IAAY,CAAC,OAAO,IAAK,IAAY,CAAC,OAAO,KAAK,aAAa,EAAE;AAClE,gBAAA,CAAC,CAAC,OAAO,GAAG,CAAA,yBAAA,CAA2B;YAC3C;AACA,YAAA,OAAO,CAAC;QACZ;AACA,QAAA,OAAO,EAAE;IACb;IAGA,IAAI,IAAI,KAAK,SAAS,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AACjD,QAAA,MAAM,GAAG,GAAG,KAAK,GAAG,CAAC;AACrB,QAAA,MAAM,QAAQ,GAAG,OAAO,IAAI,IAAI;AAChC,QAAA,MAAM,KAAK,GAAG,CAAA,KAAA,EAAQ,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA,GAAA,EAAM,GAAG,KAAK;QAClE,OAAO;YACH,UAAU,EAAE,CAAA,CAAA,EAAI,GAAG,CAAA,EAAA,CAAI;YACvB,SAAS,EAAE,CAAA,CAAA,EAAI,GAAG,CAAA,EAAA,CAAI;AACtB,YAAA,KAAK,EAAE,KAAK;AAEZ,YAAA,OAAO,EAAE;gBACL,WAAW,EAAE,CAAA,EAAG,GAAG,CAAA,EAAA,CAAI;gBACvB,UAAU,EAAE,CAAA,EAAG,GAAG,CAAA,EAAA,CAAI;AACzB,aAAA;SACG;IACZ;;;;;;;;;;;;;;AAiBJ"}

package/css/getProps.mjs

@@ -23,10 +23,12 @@ const getProps = (prop, value, _css) => {
     }
     if (prop === "spacing" && typeof value === "number") {
         const val = value * 8;
+        const hasWidth = "width" in _css;
+        const width = `calc(${hasWidth ? _css.width : "100%"} + ${val}px)`;
         return {
             marginLeft: `-${val}px`,
             marginTop: `-${val}px`,
-            width: `calc(100% + ${val}px)`,
+            width: width,
             "& > *": {
                 paddingLeft: `${val}px`,
                 paddingTop: `${val}px`,

package/css/getProps.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"getProps.mjs","sources":["../../src/css/getProps.ts"],"sourcesContent":["import { CSSProps } from \"./types\";\n\nconst getProps = (prop: string, value: string, _css: CSSProps) => {\n    let important;\n    if (typeof value === 'string') {\n        const split = value.split(\"!\")\n        important = split[1] ? \"!important\" : \"\"\n        value = split[0]\n    }\n\n    if (prop === 'disabled') {\n        if ((value as any) === true) {\n            let c: any = {\n                pointerEvents: \"none!important\",\n                cursor: \"default!important\",\n                userSelect: \"none!important\",\n                opacity: \"0.5!important\",\n                color: `text.primary!important`,\n                borderColor: `divider.secondary!important`,\n            }\n\n            if ((_css as any).bgcolor && (_css as any).bgcolor !== 'transparent') {\n                c.bgcolor = `divider.primary!important`\n            }\n            return c\n        }\n        return {}\n    }\n\n\n    if (prop === \"spacing\" && typeof value === \"number\") {\n        const val = value * 8;\n\n        return {\n            marginLeft: `-${val}px`,\n            marginTop: `-${val}px`,\n            width: `calc(100% + ${val}px)`,\n\n            \"& > *\": {\n                paddingLeft: `${val}px`,\n                paddingTop: `${val}px`,\n            },\n        } as any;\n    }\n\n\n\n    // if (value && typeof value === \"number\" && [\"border\", \"borderRight\", \"borderLeft\", \"borderTop\", \"borderBottom\"].includes(prop as any)) {\n    //     const keys: any = Object.keys(_css)\n    //     let p: any = {\n    //         [`${prop}Width`]: value + 'px' + (important || \"\"),\n    //     }\n    //     // if (!keys.includes(`${prop}Color`)) {\n    //     //     p[`${prop}Color`] = \"divider.primary\"\n    //     // }\n    //     if (!keys.includes(`${prop}Style`)) {\n    //         p[`${prop}Style`] = \"solid\"\n    //     }\n    //     return p\n    // }\n}\n\nexport default getProps"],"names":[],"mappings":"AAEA,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,IAAc,KAAI;AAE7D,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;AAC9B,QAAY,KAAK,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,EAAE;AACxC,QAAA,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC;IACpB;AAEA,IAAA,IAAI,IAAI,KAAK,UAAU,EAAE;AACrB,QAAA,IAAK,KAAa,KAAK,IAAI,EAAE;AACzB,YAAA,IAAI,CAAC,GAAQ;AACT,gBAAA,aAAa,EAAE,gBAAgB;AAC/B,gBAAA,MAAM,EAAE,mBAAmB;AAC3B,gBAAA,UAAU,EAAE,gBAAgB;AAC5B,gBAAA,OAAO,EAAE,eAAe;AACxB,gBAAA,KAAK,EAAE,CAAA,sBAAA,CAAwB;AAC/B,gBAAA,WAAW,EAAE,CAAA,2BAAA,CAA6B;aAC7C;YAED,IAAK,IAAY,CAAC,OAAO,IAAK,IAAY,CAAC,OAAO,KAAK,aAAa,EAAE;AAClE,gBAAA,CAAC,CAAC,OAAO,GAAG,CAAA,yBAAA,CAA2B;YAC3C;AACA,YAAA,OAAO,CAAC;QACZ;AACA,QAAA,OAAO,EAAE;IACb;IAGA,IAAI,IAAI,KAAK,SAAS,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AACjD,QAAA,MAAM,GAAG,GAAG,KAAK,GAAG,CAAC;QAErB,OAAO;YACH,UAAU,EAAE,CAAA,CAAA,EAAI,GAAG,CAAA,EAAA,CAAI;YACvB,SAAS,EAAE,CAAA,CAAA,EAAI,GAAG,CAAA,EAAA,CAAI;YACtB,KAAK,EAAE,CAAA,YAAA,EAAe,GAAG,CAAA,GAAA,CAAK;AAE9B,YAAA,OAAO,EAAE;gBACL,WAAW,EAAE,CAAA,EAAG,GAAG,CAAA,EAAA,CAAI;gBACvB,UAAU,EAAE,CAAA,EAAG,GAAG,CAAA,EAAA,CAAI;AACzB,aAAA;SACG;IACZ;;;;;;;;;;;;;;AAiBJ"}
+{"version":3,"file":"getProps.mjs","sources":["../../src/css/getProps.ts"],"sourcesContent":["import { CSSProps } from \"./types\";\n\nconst getProps = (prop: string, value: string, _css: CSSProps) => {\n    let important;\n    if (typeof value === 'string') {\n        const split = value.split(\"!\")\n        important = split[1] ? \"!important\" : \"\"\n        value = split[0]\n    }\n\n    if (prop === 'disabled') {\n        if ((value as any) === true) {\n            let c: any = {\n                pointerEvents: \"none!important\",\n                cursor: \"default!important\",\n                userSelect: \"none!important\",\n                opacity: \"0.5!important\",\n                color: `text.primary!important`,\n                borderColor: `divider.secondary!important`,\n            }\n\n            if ((_css as any).bgcolor && (_css as any).bgcolor !== 'transparent') {\n                c.bgcolor = `divider.primary!important`\n            }\n            return c\n        }\n        return {}\n    }\n\n\n    if (prop === \"spacing\" && typeof value === \"number\") {\n        const val = value * 8;\n        const hasWidth = \"width\" in _css;\n        const width = `calc(${hasWidth ? _css.width : \"100%\"} + ${val}px)`;\n        return {\n            marginLeft: `-${val}px`,\n            marginTop: `-${val}px`,\n            width: width,\n\n            \"& > *\": {\n                paddingLeft: `${val}px`,\n                paddingTop: `${val}px`,\n            },\n        } as any;\n    }\n\n\n\n    // if (value && typeof value === \"number\" && [\"border\", \"borderRight\", \"borderLeft\", \"borderTop\", \"borderBottom\"].includes(prop as any)) {\n    //     const keys: any = Object.keys(_css)\n    //     let p: any = {\n    //         [`${prop}Width`]: value + 'px' + (important || \"\"),\n    //     }\n    //     // if (!keys.includes(`${prop}Color`)) {\n    //     //     p[`${prop}Color`] = \"divider.primary\"\n    //     // }\n    //     if (!keys.includes(`${prop}Style`)) {\n    //         p[`${prop}Style`] = \"solid\"\n    //     }\n    //     return p\n    // }\n}\n\nexport default getProps"],"names":[],"mappings":"AAEA,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,IAAc,KAAI;AAE7D,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;AAC9B,QAAY,KAAK,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,EAAE;AACxC,QAAA,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC;IACpB;AAEA,IAAA,IAAI,IAAI,KAAK,UAAU,EAAE;AACrB,QAAA,IAAK,KAAa,KAAK,IAAI,EAAE;AACzB,YAAA,IAAI,CAAC,GAAQ;AACT,gBAAA,aAAa,EAAE,gBAAgB;AAC/B,gBAAA,MAAM,EAAE,mBAAmB;AAC3B,gBAAA,UAAU,EAAE,gBAAgB;AAC5B,gBAAA,OAAO,EAAE,eAAe;AACxB,gBAAA,KAAK,EAAE,CAAA,sBAAA,CAAwB;AAC/B,gBAAA,WAAW,EAAE,CAAA,2BAAA,CAA6B;aAC7C;YAED,IAAK,IAAY,CAAC,OAAO,IAAK,IAAY,CAAC,OAAO,KAAK,aAAa,EAAE;AAClE,gBAAA,CAAC,CAAC,OAAO,GAAG,CAAA,yBAAA,CAA2B;YAC3C;AACA,YAAA,OAAO,CAAC;QACZ;AACA,QAAA,OAAO,EAAE;IACb;IAGA,IAAI,IAAI,KAAK,SAAS,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AACjD,QAAA,MAAM,GAAG,GAAG,KAAK,GAAG,CAAC;AACrB,QAAA,MAAM,QAAQ,GAAG,OAAO,IAAI,IAAI;AAChC,QAAA,MAAM,KAAK,GAAG,CAAA,KAAA,EAAQ,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA,GAAA,EAAM,GAAG,KAAK;QAClE,OAAO;YACH,UAAU,EAAE,CAAA,CAAA,EAAI,GAAG,CAAA,EAAA,CAAI;YACvB,SAAS,EAAE,CAAA,CAAA,EAAI,GAAG,CAAA,EAAA,CAAI;AACtB,YAAA,KAAK,EAAE,KAAK;AAEZ,YAAA,OAAO,EAAE;gBACL,WAAW,EAAE,CAAA,EAAG,GAAG,CAAA,EAAA,CAAI;gBACvB,UAAU,EAAE,CAAA,EAAG,GAAG,CAAA,EAAA,CAAI;AACzB,aAAA;SACG;IACZ;;;;;;;;;;;;;;AAiBJ"}

package/hooks/useAnimation.d.ts

@@ -1,12 +1,11 @@
 import { CSSProps } from '../css/types.js';
 
 declare const animationEases: {
-    easeInOut: string;
-    easeOut: string;
-    easeIn: string;
-    sharp: string;
+    standard: string;
+    fast: string;
+    smooth: string;
     linear: string;
-    easeBounceOut: string;
+    bounce: string;
 };
 interface UseAnimationProps {
     delay?: number;

package/hooks/useAnimation.js

@@ -1,21 +1,28 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var index=require('../css/index.js'),React=require('react');const animationEases = {
-    easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
-    easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
-    easeIn: "cubic-bezier(0.4, 0, 1, 1)",
-    sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var index=require('../css/index.js'),React=require('react');// export const animationEases = {
+//     easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+//     easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
+//     easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+//     sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
+//     linear: "cubic-bezier(0, 0, 1, 1)",
+//     easeBounceOut: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
+// }
+const animationEases = {
+    standard: "cubic-bezier(0.4, 0, 0.2, 1)",
+    fast: "cubic-bezier(0.2, 0, 0, 1)",
+    smooth: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
     linear: "cubic-bezier(0, 0, 1, 1)",
-    easeBounceOut: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
+    bounce: "cubic-bezier(0.34, 1.50, 0.64, 1)",
 };
 const useAnimation = ({ from, to, delay, ease, duration }) => {
     let _delay = delay || 0;
     let _duration = duration || 600;
-    let _ease = ease || "easeBounceOut";
+    let _ease = ease || "standard";
     const id = "anim" + React.useId().replace(/:/g, "");
     const anim = index.css({
         animationName: id,
         animationDelay: _delay + "ms",
         animationDuration: _duration + "ms",
-        animationTimingFunction: animationEases[_ease] || animationEases.easeBounceOut,
+        animationTimingFunction: animationEases[_ease] || animationEases.standard,
         [`@keyframes ${id}`]: {
             from: from,
             to: to

package/hooks/useAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimation.js","sources":["../../src/hooks/useAnimation.ts"],"sourcesContent":["import { css } from '../css'\nimport { useId } from 'react'\nimport { CSSProps } from '../css/types'\n\nexport const animationEases = {\n    easeInOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    easeOut: \"cubic-bezier(0.0, 0, 0.2, 1)\",\n    easeIn: \"cubic-bezier(0.4, 0, 1, 1)\",\n    sharp: \"cubic-bezier(0.4, 0, 0.6, 1)\",\n    linear: \"cubic-bezier(0, 0, 1, 1)\",\n    easeBounceOut: \"cubic-bezier(0.68, -0.55, 0.265, 1.55)\"\n}\n\nexport interface UseAnimationProps {\n    delay?: number;\n    duration?: number;\n    from: CSSProps;\n    to: CSSProps;\n    ease?: keyof typeof animationEases;\n}\n\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\n    let _delay = delay || 0;\n    let _duration = duration || 600;\n    let _ease = ease || \"easeBounceOut\"\n    const id = \"anim\" + useId().replace(/:/g, \"\")\n    const anim = css({\n        animationName: id,\n        animationDelay: _delay + \"ms\",\n        animationDuration: _duration + \"ms\",\n        animationTimingFunction: animationEases[_ease] || animationEases.easeBounceOut,\n        [`@keyframes ${id}`]: {\n            from: from as any,\n            to: to as any\n        }\n    })\n    return anim.classname\n}\n\nexport default useAnimation"],"names":["useId","css"],"mappings":"kIAIO,MAAM,cAAc,GAAG;AAC1B,IAAA,SAAS,EAAE,8BAA8B;AACzC,IAAA,OAAO,EAAE,8BAA8B;AACvC,IAAA,MAAM,EAAE,4BAA4B;AACpC,IAAA,KAAK,EAAE,8BAA8B;AACrC,IAAA,MAAM,EAAE,0BAA0B;AAClC,IAAA,aAAa,EAAE;;AAWnB,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAqB,KAAI;AAC5E,IAAA,IAAI,MAAM,GAAG,KAAK,IAAI,CAAC;AACvB,IAAA,IAAI,SAAS,GAAG,QAAQ,IAAI,GAAG;AAC/B,IAAA,IAAI,KAAK,GAAG,IAAI,IAAI,eAAe;AACnC,IAAA,MAAM,EAAE,GAAG,MAAM,GAAGA,WAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;IAC7C,MAAM,IAAI,GAAGC,SAAG,CAAC;AACb,QAAA,aAAa,EAAE,EAAE;QACjB,cAAc,EAAE,MAAM,GAAG,IAAI;QAC7B,iBAAiB,EAAE,SAAS,GAAG,IAAI;QACnC,uBAAuB,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,cAAc,CAAC,aAAa;AAC9E,QAAA,CAAC,CAAA,WAAA,EAAc,EAAE,CAAA,CAAE,GAAG;AAClB,YAAA,IAAI,EAAE,IAAW;AACjB,YAAA,EAAE,EAAE;AACP;AACJ,KAAA,CAAC;IACF,OAAO,IAAI,CAAC,SAAS;AACzB"}
+{"version":3,"file":"useAnimation.js","sources":["../../src/hooks/useAnimation.ts"],"sourcesContent":["import { css } from '../css'\nimport { useId } from 'react'\nimport { CSSProps } from '../css/types'\n\n// export const animationEases = {\n//     easeInOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n//     easeOut: \"cubic-bezier(0.0, 0, 0.2, 1)\",\n//     easeIn: \"cubic-bezier(0.4, 0, 1, 1)\",\n//     sharp: \"cubic-bezier(0.4, 0, 0.6, 1)\",\n//     linear: \"cubic-bezier(0, 0, 1, 1)\",\n//     easeBounceOut: \"cubic-bezier(0.68, -0.55, 0.265, 1.55)\"\n// }\n\nexport const animationEases = {\n    standard: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    fast: \"cubic-bezier(0.2, 0, 0, 1)\",\n    smooth: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\n    linear: \"cubic-bezier(0, 0, 1, 1)\",\n    bounce: \"cubic-bezier(0.34, 1.50, 0.64, 1)\",\n};\n\n\n\nexport interface UseAnimationProps {\n    delay?: number;\n    duration?: number;\n    from: CSSProps;\n    to: CSSProps;\n    ease?: keyof typeof animationEases;\n}\n\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\n    let _delay = delay || 0;\n    let _duration = duration || 600;\n    let _ease = ease || \"standard\"\n    const id = \"anim\" + useId().replace(/:/g, \"\")\n    const anim = css({\n        animationName: id,\n        animationDelay: _delay + \"ms\",\n        animationDuration: _duration + \"ms\",\n        animationTimingFunction: animationEases[_ease] || animationEases.standard,\n        [`@keyframes ${id}`]: {\n            from: from as any,\n            to: to as any\n        }\n    })\n    return anim.classname\n}\n\nexport default useAnimation"],"names":["useId","css"],"mappings":"kIAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,cAAc,GAAG;AAC1B,IAAA,QAAQ,EAAE,8BAA8B;AACxC,IAAA,IAAI,EAAE,4BAA4B;AAClC,IAAA,MAAM,EAAE,sCAAsC;AAC9C,IAAA,MAAM,EAAE,0BAA0B;AAClC,IAAA,MAAM,EAAE,mCAAmC;;AAa/C,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAqB,KAAI;AAC5E,IAAA,IAAI,MAAM,GAAG,KAAK,IAAI,CAAC;AACvB,IAAA,IAAI,SAAS,GAAG,QAAQ,IAAI,GAAG;AAC/B,IAAA,IAAI,KAAK,GAAG,IAAI,IAAI,UAAU;AAC9B,IAAA,MAAM,EAAE,GAAG,MAAM,GAAGA,WAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;IAC7C,MAAM,IAAI,GAAGC,SAAG,CAAC;AACb,QAAA,aAAa,EAAE,EAAE;QACjB,cAAc,EAAE,MAAM,GAAG,IAAI;QAC7B,iBAAiB,EAAE,SAAS,GAAG,IAAI;QACnC,uBAAuB,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,cAAc,CAAC,QAAQ;AACzE,QAAA,CAAC,CAAA,WAAA,EAAc,EAAE,CAAA,CAAE,GAAG;AAClB,YAAA,IAAI,EAAE,IAAW;AACjB,YAAA,EAAE,EAAE;AACP;AACJ,KAAA,CAAC;IACF,OAAO,IAAI,CAAC,SAAS;AACzB"}

package/hooks/useAnimation.mjs

@@ -1,21 +1,28 @@
-import {css}from'../css/index.mjs';import {useId}from'react';const animationEases = {
-    easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
-    easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
-    easeIn: "cubic-bezier(0.4, 0, 1, 1)",
-    sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
+import {css}from'../css/index.mjs';import {useId}from'react';// export const animationEases = {
+//     easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+//     easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
+//     easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+//     sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
+//     linear: "cubic-bezier(0, 0, 1, 1)",
+//     easeBounceOut: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
+// }
+const animationEases = {
+    standard: "cubic-bezier(0.4, 0, 0.2, 1)",
+    fast: "cubic-bezier(0.2, 0, 0, 1)",
+    smooth: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
     linear: "cubic-bezier(0, 0, 1, 1)",
-    easeBounceOut: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
+    bounce: "cubic-bezier(0.34, 1.50, 0.64, 1)",
 };
 const useAnimation = ({ from, to, delay, ease, duration }) => {
     let _delay = delay || 0;
     let _duration = duration || 600;
-    let _ease = ease || "easeBounceOut";
+    let _ease = ease || "standard";
     const id = "anim" + useId().replace(/:/g, "");
     const anim = css({
         animationName: id,
         animationDelay: _delay + "ms",
         animationDuration: _duration + "ms",
-        animationTimingFunction: animationEases[_ease] || animationEases.easeBounceOut,
+        animationTimingFunction: animationEases[_ease] || animationEases.standard,
         [`@keyframes ${id}`]: {
             from: from,
             to: to

package/hooks/useAnimation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimation.mjs","sources":["../../src/hooks/useAnimation.ts"],"sourcesContent":["import { css } from '../css'\nimport { useId } from 'react'\nimport { CSSProps } from '../css/types'\n\nexport const animationEases = {\n    easeInOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    easeOut: \"cubic-bezier(0.0, 0, 0.2, 1)\",\n    easeIn: \"cubic-bezier(0.4, 0, 1, 1)\",\n    sharp: \"cubic-bezier(0.4, 0, 0.6, 1)\",\n    linear: \"cubic-bezier(0, 0, 1, 1)\",\n    easeBounceOut: \"cubic-bezier(0.68, -0.55, 0.265, 1.55)\"\n}\n\nexport interface UseAnimationProps {\n    delay?: number;\n    duration?: number;\n    from: CSSProps;\n    to: CSSProps;\n    ease?: keyof typeof animationEases;\n}\n\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\n    let _delay = delay || 0;\n    let _duration = duration || 600;\n    let _ease = ease || \"easeBounceOut\"\n    const id = \"anim\" + useId().replace(/:/g, \"\")\n    const anim = css({\n        animationName: id,\n        animationDelay: _delay + \"ms\",\n        animationDuration: _duration + \"ms\",\n        animationTimingFunction: animationEases[_ease] || animationEases.easeBounceOut,\n        [`@keyframes ${id}`]: {\n            from: from as any,\n            to: to as any\n        }\n    })\n    return anim.classname\n}\n\nexport default useAnimation"],"names":[],"mappings":"6DAIO,MAAM,cAAc,GAAG;AAC1B,IAAA,SAAS,EAAE,8BAA8B;AACzC,IAAA,OAAO,EAAE,8BAA8B;AACvC,IAAA,MAAM,EAAE,4BAA4B;AACpC,IAAA,KAAK,EAAE,8BAA8B;AACrC,IAAA,MAAM,EAAE,0BAA0B;AAClC,IAAA,aAAa,EAAE;;AAWnB,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAqB,KAAI;AAC5E,IAAA,IAAI,MAAM,GAAG,KAAK,IAAI,CAAC;AACvB,IAAA,IAAI,SAAS,GAAG,QAAQ,IAAI,GAAG;AAC/B,IAAA,IAAI,KAAK,GAAG,IAAI,IAAI,eAAe;AACnC,IAAA,MAAM,EAAE,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;IAC7C,MAAM,IAAI,GAAG,GAAG,CAAC;AACb,QAAA,aAAa,EAAE,EAAE;QACjB,cAAc,EAAE,MAAM,GAAG,IAAI;QAC7B,iBAAiB,EAAE,SAAS,GAAG,IAAI;QACnC,uBAAuB,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,cAAc,CAAC,aAAa;AAC9E,QAAA,CAAC,CAAA,WAAA,EAAc,EAAE,CAAA,CAAE,GAAG;AAClB,YAAA,IAAI,EAAE,IAAW;AACjB,YAAA,EAAE,EAAE;AACP;AACJ,KAAA,CAAC;IACF,OAAO,IAAI,CAAC,SAAS;AACzB"}
+{"version":3,"file":"useAnimation.mjs","sources":["../../src/hooks/useAnimation.ts"],"sourcesContent":["import { css } from '../css'\nimport { useId } from 'react'\nimport { CSSProps } from '../css/types'\n\n// export const animationEases = {\n//     easeInOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n//     easeOut: \"cubic-bezier(0.0, 0, 0.2, 1)\",\n//     easeIn: \"cubic-bezier(0.4, 0, 1, 1)\",\n//     sharp: \"cubic-bezier(0.4, 0, 0.6, 1)\",\n//     linear: \"cubic-bezier(0, 0, 1, 1)\",\n//     easeBounceOut: \"cubic-bezier(0.68, -0.55, 0.265, 1.55)\"\n// }\n\nexport const animationEases = {\n    standard: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    fast: \"cubic-bezier(0.2, 0, 0, 1)\",\n    smooth: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\n    linear: \"cubic-bezier(0, 0, 1, 1)\",\n    bounce: \"cubic-bezier(0.34, 1.50, 0.64, 1)\",\n};\n\n\n\nexport interface UseAnimationProps {\n    delay?: number;\n    duration?: number;\n    from: CSSProps;\n    to: CSSProps;\n    ease?: keyof typeof animationEases;\n}\n\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\n    let _delay = delay || 0;\n    let _duration = duration || 600;\n    let _ease = ease || \"standard\"\n    const id = \"anim\" + useId().replace(/:/g, \"\")\n    const anim = css({\n        animationName: id,\n        animationDelay: _delay + \"ms\",\n        animationDuration: _duration + \"ms\",\n        animationTimingFunction: animationEases[_ease] || animationEases.standard,\n        [`@keyframes ${id}`]: {\n            from: from as any,\n            to: to as any\n        }\n    })\n    return anim.classname\n}\n\nexport default useAnimation"],"names":[],"mappings":"6DAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,cAAc,GAAG;AAC1B,IAAA,QAAQ,EAAE,8BAA8B;AACxC,IAAA,IAAI,EAAE,4BAA4B;AAClC,IAAA,MAAM,EAAE,sCAAsC;AAC9C,IAAA,MAAM,EAAE,0BAA0B;AAClC,IAAA,MAAM,EAAE,mCAAmC;;AAa/C,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAqB,KAAI;AAC5E,IAAA,IAAI,MAAM,GAAG,KAAK,IAAI,CAAC;AACvB,IAAA,IAAI,SAAS,GAAG,QAAQ,IAAI,GAAG;AAC/B,IAAA,IAAI,KAAK,GAAG,IAAI,IAAI,UAAU;AAC9B,IAAA,MAAM,EAAE,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;IAC7C,MAAM,IAAI,GAAG,GAAG,CAAC;AACb,QAAA,aAAa,EAAE,EAAE;QACjB,cAAc,EAAE,MAAM,GAAG,IAAI;QAC7B,iBAAiB,EAAE,SAAS,GAAG,IAAI;QACnC,uBAAuB,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,cAAc,CAAC,QAAQ;AACzE,QAAA,CAAC,CAAA,WAAA,EAAc,EAAE,CAAA,CAAE,GAAG;AAClB,YAAA,IAAI,EAAE,IAAW;AACjB,YAAA,EAAE,EAAE;AACP;AACJ,KAAA,CAAC;IACF,OAAO,IAAI,CAAC,SAAS;AACzB"}

package/hooks/useTransition/index.d.ts

@@ -25,7 +25,11 @@ type UseTransitionProps = {
 };
 declare const useTransition: ({ open, ...props }: UseTransitionProps) => {
     exited: boolean;
-    classname: string;
+    props: {
+        id: string;
+        'data-transition': string;
+        'data-transition-state': string;
+    };
 };
 
 export { useTransition as default };

package/hooks/useTransition/index.js

@@ -1,4 +1,7 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),React=require('react'),useAnimation=require('../useAnimation.js'),index=require('../../css/index.js'),oncss=require('oncss'),variants=require('./variants.js'),classNames=require('pretty-class');const getVariant = (rect, variant) => {
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),React=require('react'),useAnimation=require('../useAnimation.js'),index=require('../../css/index.js'),oncss=require('oncss'),variants=require('./variants.js');const style = (obj) => {
+    return index.css(obj || {}, { selector: "#" }).classname;
+};
+const getVariant = (rect, variant) => {
     let fn = typeof variant === 'string' ? variants[variant] : variant;
     if (!fn)
         throw new Error(`Transition variant "${variant}" not found.`);
@@ -6,18 +9,18 @@
 };
 const useTransition = (_a) => {
     var { open } = _a, props = tslib.__rest(_a, ["open"]);
-    let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, exitOnUnmount = true, onOpen, onOpened, onClose, onClosed, onState } = props;
-    let _ease = ease || useAnimation.animationEases[easing] || useAnimation.animationEases.easeBounceOut;
-    const id = React.useId().replace(/:/g, "");
+    let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, exitOnUnmount = false, onOpen, onOpened, onClose, onClosed, onState } = props;
+    let _ease = ease || useAnimation.animationEases[easing] || useAnimation.animationEases.bounce;
+    const id = "xui-transition-" + React.useId();
     const [state, setState] = React.useState({
         initial: false,
-        classname: "",
+        classname: style({ visibility: "hidden" }),
         variant: variant,
         rect: null,
         stage: open ? "open" : "closed",
         unmounted: false,
     });
-    const getEle = () => document.querySelector(`.${id}`);
+    const getEle = () => document.querySelector(`[data-transition="${id}"]`);
     const getBoundary = () => { var _a; return state.rect || ((_a = getEle()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || new DOMRect(0, 0, 0, 0); };
     React.useEffect(() => {
         if (exitOnUnmount && state.stage === 'closed') {
@@ -25,7 +28,7 @@ const useTransition = (_a) => {
                 setState(s => (Object.assign(Object.assign({}, s), { initial: false, classname: "", unmounted: true, variant: variant })));
             }
             else {
-                setState(s => (Object.assign(Object.assign({}, s), { variant: variant, classname: index.css({ visibility: "hidden" }).classname, stage: "open" })));
+                setState(s => (Object.assign(Object.assign({}, s), { variant: variant, classname: style({ visibility: "hidden" }), stage: "open" })));
             }
         }
     }, [open, state.stage, exitOnUnmount, variant]);
@@ -39,24 +42,32 @@ const useTransition = (_a) => {
         const rect = getBoundary();
         let { from } = getVariant(rect, state.variant);
         if (open && !state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: (!disableInitialTransition || state.unmounted) ? index.css(from).classname : "", initial: true, rect: rect })));
+            setState(s => (Object.assign(Object.assign({}, s), { classname: (!disableInitialTransition || state.unmounted) ? style(from) : "", initial: true, rect: rect })));
+            let stimer = null;
+            let etimer = null;
             ele.ontransitionstart = () => {
-                const isOpen = Array.from(ele.classList).includes("xui-transition-open");
-                (onOpen && isOpen) && onOpen();
-                (onClose && !isOpen) && onClose();
-                onState && onState(isOpen ? "open" : "close");
-                setState(s => (Object.assign(Object.assign({}, s), { stage: isOpen ? "open" : "close" })));
+                clearTimeout(stimer);
+                stimer = setTimeout(() => {
+                    const isOpen = ele.getAttribute('data-transition-state') === 'open';
+                    (onOpen && isOpen) && onOpen();
+                    (onClose && !isOpen) && onClose();
+                    onState && onState(isOpen ? "open" : "close");
+                    setState(s => (Object.assign(Object.assign({}, s), { stage: isOpen ? "open" : "close" })));
+                }, 1);
             };
             ele.ontransitionend = () => {
-                const isOpen = Array.from(ele.classList).includes("xui-transition-open");
-                (onOpened && isOpen) && onOpened();
-                (onClosed && !isOpen) && onClosed();
-                onState && onState(isOpen ? "opened" : "closed");
-                setState(s => (Object.assign(Object.assign({}, s), { stage: isOpen ? "opened" : "closed" })));
+                clearTimeout(etimer);
+                etimer = setTimeout(() => {
+                    const isOpen = ele.getAttribute('data-transition-state') === 'open';
+                    (onOpened && isOpen) && onOpened();
+                    (onClosed && !isOpen) && onClosed();
+                    onState && onState(isOpen ? "opened" : "closed");
+                    setState(s => (Object.assign(Object.assign({}, s), { stage: isOpen ? "opened" : "closed" })));
+                }, 1);
             };
         }
         else if (!state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: index.css(from).classname, rect: rect })));
+            setState(s => (Object.assign(Object.assign({}, s), { classname: style(from), rect: rect })));
         }
     }, [open, state.initial, state.stage, exitOnUnmount]);
     React.useEffect(() => {
@@ -66,11 +77,15 @@ const useTransition = (_a) => {
             let _css = open ? to : from;
             let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
             let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {}).map(k => oncss.formatCSSProp(k)).join(trans + ", ") + trans });
-            setState(s => (Object.assign(Object.assign({}, s), { classname: index.css(_).classname, variant: _variant })));
+            setState(s => (Object.assign(Object.assign({}, s), { classname: style(_), variant: _variant })));
         }
     }, [open, state.initial, variant]);
     return {
         exited: exitOnUnmount && state.stage === 'closed',
-        classname: classNames(id, state.classname, `xui-transition-${open ? "open" : "close"}`, `xui-transition-${state.stage}`)
+        props: {
+            'id': state.classname,
+            'data-transition': id,
+            'data-transition-state': open ? 'open' : 'close',
+        }
     };
 };exports.default=useTransition;//# sourceMappingURL=index.js.map

package/hooks/useTransition/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/hooks/useTransition/index.ts"],"sourcesContent":["import { ReactElement, cloneElement, Children, useState, useEffect, useId } from 'react';\nimport { animationEases } from '../useAnimation';\nimport { css } from '../../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../../css/types';\nimport * as variants from './variants'\nimport classNames from 'pretty-class';\n\n\nexport type UseTransitionVariantTypes = keyof typeof variants\nexport type UseTransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type UseTransitionVariant = (rect: DOMRect) => ({ from: CSSProps, to: CSSProps })\n\nexport type UseTransitionProps = {\n   open: boolean;\n   variant: UseTransitionVariant | UseTransitionVariantTypes;\n   ease?: string;\n   easing?: keyof typeof animationEases;\n   duration?: number;\n   delay?: number;\n   disableInitialTransition?: boolean;\n   exitOnUnmount?: boolean;\n   onOpen?: () => void;\n   onOpened?: () => void;\n   onClose?: () => void;\n   onClosed?: () => void;\n   onState?: (state: UseTransitionState) => void;\n}\n\n\nconst getVariant = (rect: any, variant: UseTransitionProps['variant']) => {\n   let fn = typeof variant === 'string' ? variants[variant] : variant\n   if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\n   return fn(rect)\n}\n\nconst useTransition = ({ open, ...props }: UseTransitionProps) => {\n   let {\n      disableInitialTransition = false,\n      variant = \"fade\",\n      duration = 400,\n      delay,\n      ease,\n      easing,\n      exitOnUnmount = true,\n      onOpen,\n      onOpened,\n      onClose,\n      onClosed,\n      onState\n   } = props\n   let _ease = ease || (animationEases as any)[easing as any] || animationEases.easeBounceOut\n   const id = useId().replace(/:/g, \"\")\n\n   const [state, setState] = useState({\n      initial: false,\n      classname: \"\",\n      variant: variant,\n      rect: null as DOMRect | null,\n      stage: open ? \"open\" : \"closed\",\n      unmounted: false,\n   })\n\n   const getEle = () => document.querySelector(`.${id}`) as HTMLElement;\n   const getBoundary = () => state.rect || getEle()?.getBoundingClientRect() || new DOMRect(0, 0, 0, 0);\n\n   useEffect(() => {\n      if (exitOnUnmount && state.stage === 'closed') {\n         if (!open) {\n            setState(s => ({\n               ...s,\n               initial: false,\n               classname: \"\",\n               unmounted: true,\n               variant: variant,\n            }))\n         } else {\n            setState(s => ({\n               ...s,\n               variant: variant,\n               classname: css({ visibility: \"hidden\" }).classname,\n               stage: \"open\",\n            }))\n         }\n      }\n   }, [open, state.stage, exitOnUnmount, variant])\n\n   // initial effect\n   useEffect(() => {\n      const ele = getEle()\n      if (!ele) return\n      if (exitOnUnmount && state.stage === 'closed') return\n\n      const rect = getBoundary();\n      let { from } = getVariant(rect, state.variant)\n      if (open && !state.initial) {\n         setState(s => ({\n            ...s,\n            classname: (!disableInitialTransition || state.unmounted) ? css(from).classname : \"\",\n            initial: true,\n            rect: rect,\n         }))\n\n         ele.ontransitionstart = () => {\n            const isOpen = Array.from(ele.classList).includes(\"xui-transition-open\");\n            (onOpen && isOpen) && onOpen();\n            (onClose && !isOpen) && onClose()\n            onState && onState(isOpen ? \"open\" : \"close\")\n            setState(s => ({\n               ...s,\n               stage: isOpen ? \"open\" : \"close\"\n            }))\n         }\n\n         ele.ontransitionend = () => {\n            const isOpen = Array.from(ele.classList).includes(\"xui-transition-open\");\n            (onOpened && isOpen) && onOpened();\n            (onClosed && !isOpen) && onClosed();\n            onState && onState(isOpen ? \"opened\" : \"closed\")\n            setState(s => ({\n               ...s,\n               stage: isOpen ? \"opened\" : \"closed\"\n            }))\n         }\n      } else if (!state.initial) {\n         setState(s => ({\n            ...s,\n            classname: css(from).classname,\n            rect: rect,\n         }))\n      }\n   }, [open, state.initial, state.stage, exitOnUnmount])\n\n\n   useEffect(() => {\n      if (state.initial) {\n         let _variant = state.variant !== variant ? variant : state.variant\n         const { from, to } = getVariant(state.rect, _variant)\n         let _css: CSSProps = open ? to : from\n         let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n         let _ = {\n            ..._css,\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n         }\n         setState(s => ({\n            ...s,\n            classname: css(_).classname,\n            variant: _variant\n         }))\n      }\n   }, [open, state.initial, variant])\n\n   return {\n      exited: exitOnUnmount && state.stage === 'closed',\n      classname: classNames(\n         id,\n         state.classname,\n         `xui-transition-${open ? \"open\" : \"close\"}`,\n         `xui-transition-${state.stage}`,\n      )\n   }\n}\n\n\nexport default useTransition"],"names":["__rest","animationEases","useId","useState","useEffect","css","formatCSSProp"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/hooks/useTransition/index.ts"],"sourcesContent":["import { useState, useEffect, useId } from 'react';\nimport { animationEases } from '../useAnimation';\nimport { css } from '../../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../../css/types';\nimport * as variants from './variants'\n\nexport type UseTransitionVariantTypes = keyof typeof variants\nexport type UseTransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type UseTransitionVariant = (rect: DOMRect) => ({ from: CSSProps, to: CSSProps })\n\nexport type UseTransitionProps = {\n   open: boolean;\n   variant: UseTransitionVariant | UseTransitionVariantTypes;\n   ease?: string;\n   easing?: keyof typeof animationEases;\n   duration?: number;\n   delay?: number;\n   disableInitialTransition?: boolean;\n   exitOnUnmount?: boolean;\n   onOpen?: () => void;\n   onOpened?: () => void;\n   onClose?: () => void;\n   onClosed?: () => void;\n   onState?: (state: UseTransitionState) => void;\n}\n\n\nconst style = (obj?: any) => {\n   return css(obj || {}, { selector: \"#\" }).classname;\n}\n\nconst getVariant = (rect: DOMRect | null, variant: UseTransitionProps['variant']) => {\n   let fn = typeof variant === 'string' ? variants[variant] : variant\n   if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\n   return fn(rect as DOMRect);\n}\n\nconst useTransition = ({ open, ...props }: UseTransitionProps) => {\n   let {\n      disableInitialTransition = false,\n      variant = \"fade\",\n      duration = 400,\n      delay,\n      ease,\n      easing,\n      exitOnUnmount = false,\n      onOpen,\n      onOpened,\n      onClose,\n      onClosed,\n      onState\n   } = props\n   let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\n   const id = \"xui-transition-\" + useId()\n   const [state, setState] = useState({\n      initial: false,\n      classname: style({ visibility: \"hidden\" }),\n      variant: variant,\n      rect: null as DOMRect | null,\n      stage: open ? \"open\" : \"closed\",\n      unmounted: false,\n   })\n\n   const getEle = () => document.querySelector(`[data-transition=\"${id}\"]`) as HTMLElement;\n   const getBoundary = () => state.rect || getEle()?.getBoundingClientRect() || new DOMRect(0, 0, 0, 0);\n\n   useEffect(() => {\n      if (exitOnUnmount && state.stage === 'closed') {\n         if (!open) {\n            setState(s => ({\n               ...s,\n               initial: false,\n               classname: \"\",\n               unmounted: true,\n               variant: variant,\n            }))\n         } else {\n            setState(s => ({\n               ...s,\n               variant: variant,\n               classname: style({ visibility: \"hidden\" }),\n               stage: \"open\",\n            }))\n         }\n      }\n   }, [open, state.stage, exitOnUnmount, variant])\n\n   // initial effect\n   useEffect(() => {\n      const ele = getEle()\n      if (!ele) return\n      if (exitOnUnmount && state.stage === 'closed') return\n\n      const rect = getBoundary();\n      let { from } = getVariant(rect, state.variant)\n      if (open && !state.initial) {\n         setState(s => ({\n            ...s,\n            classname: (!disableInitialTransition || state.unmounted) ? style(from) : \"\",\n            initial: true,\n            rect: rect,\n         }))\n         let stimer: any = null\n         let etimer: any = null\n         ele.ontransitionstart = () => {\n            clearTimeout(stimer)\n            stimer = setTimeout(() => {\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\n               (onOpen && isOpen) && onOpen();\n               (onClose && !isOpen) && onClose()\n               onState && onState(isOpen ? \"open\" : \"close\")\n               setState(s => ({\n                  ...s,\n                  stage: isOpen ? \"open\" : \"close\"\n               }))\n            }, 1)\n         }\n\n         ele.ontransitionend = () => {\n            clearTimeout(etimer)\n            etimer = setTimeout(() => {\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\n               (onOpened && isOpen) && onOpened();\n               (onClosed && !isOpen) && onClosed();\n               onState && onState(isOpen ? \"opened\" : \"closed\")\n               setState(s => ({\n                  ...s,\n                  stage: isOpen ? \"opened\" : \"closed\"\n               }))\n            }, 1)\n         }\n      } else if (!state.initial) {\n         setState(s => ({\n            ...s,\n            classname: style(from),\n            rect: rect,\n         }))\n      }\n   }, [open, state.initial, state.stage, exitOnUnmount])\n\n\n   useEffect(() => {\n      if (state.initial) {\n         let _variant = state.variant !== variant ? variant : state.variant\n         const { from, to } = getVariant(state.rect, _variant)\n         let _css: CSSProps = open ? to : from\n         let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n         let _ = {\n            ..._css,\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n         }\n         setState(s => ({\n            ...s,\n            classname: style(_),\n            variant: _variant\n         }))\n      }\n   }, [open, state.initial, variant])\n\n   return {\n      exited: exitOnUnmount && state.stage === 'closed',\n      props: {\n         'id': state.classname,\n         'data-transition': id,\n         'data-transition-state': open ? 'open' : 'close',\n      }\n   }\n}\n\n\nexport default useTransition"],"names":["css","__rest","animationEases","useId","useState","useEffect","formatCSSProp"],"mappings":"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"}

package/hooks/useTransition/index.mjs

@@ -1,4 +1,7 @@
-import {__rest}from'tslib';import {useId,useState,useEffect}from'react';import {animationEases}from'../useAnimation.mjs';import {css}from'../../css/index.mjs';import {formatCSSProp}from'oncss';import*as variants from'./variants.mjs';import classNames from'pretty-class';const getVariant = (rect, variant) => {
+import {__rest}from'tslib';import {useId,useState,useEffect}from'react';import {animationEases}from'../useAnimation.mjs';import {css}from'../../css/index.mjs';import {formatCSSProp}from'oncss';import*as variants from'./variants.mjs';const style = (obj) => {
+    return css(obj || {}, { selector: "#" }).classname;
+};
+const getVariant = (rect, variant) => {
     let fn = typeof variant === 'string' ? variants[variant] : variant;
     if (!fn)
         throw new Error(`Transition variant "${variant}" not found.`);
@@ -6,18 +9,18 @@ import {__rest}from'tslib';import {useId,useState,useEffect}from'react';import {
 };
 const useTransition = (_a) => {
     var { open } = _a, props = __rest(_a, ["open"]);
-    let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, exitOnUnmount = true, onOpen, onOpened, onClose, onClosed, onState } = props;
-    let _ease = ease || animationEases[easing] || animationEases.easeBounceOut;
-    const id = useId().replace(/:/g, "");
+    let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, exitOnUnmount = false, onOpen, onOpened, onClose, onClosed, onState } = props;
+    let _ease = ease || animationEases[easing] || animationEases.bounce;
+    const id = "xui-transition-" + useId();
     const [state, setState] = useState({
         initial: false,
-        classname: "",
+        classname: style({ visibility: "hidden" }),
         variant: variant,
         rect: null,
         stage: open ? "open" : "closed",
         unmounted: false,
     });
-    const getEle = () => document.querySelector(`.${id}`);
+    const getEle = () => document.querySelector(`[data-transition="${id}"]`);
     const getBoundary = () => { var _a; return state.rect || ((_a = getEle()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || new DOMRect(0, 0, 0, 0); };
     useEffect(() => {
         if (exitOnUnmount && state.stage === 'closed') {
@@ -25,7 +28,7 @@ const useTransition = (_a) => {
                 setState(s => (Object.assign(Object.assign({}, s), { initial: false, classname: "", unmounted: true, variant: variant })));
             }
             else {
-                setState(s => (Object.assign(Object.assign({}, s), { variant: variant, classname: css({ visibility: "hidden" }).classname, stage: "open" })));
+                setState(s => (Object.assign(Object.assign({}, s), { variant: variant, classname: style({ visibility: "hidden" }), stage: "open" })));
             }
         }
     }, [open, state.stage, exitOnUnmount, variant]);
@@ -39,24 +42,32 @@ const useTransition = (_a) => {
         const rect = getBoundary();
         let { from } = getVariant(rect, state.variant);
         if (open && !state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: (!disableInitialTransition || state.unmounted) ? css(from).classname : "", initial: true, rect: rect })));
+            setState(s => (Object.assign(Object.assign({}, s), { classname: (!disableInitialTransition || state.unmounted) ? style(from) : "", initial: true, rect: rect })));
+            let stimer = null;
+            let etimer = null;
             ele.ontransitionstart = () => {
-                const isOpen = Array.from(ele.classList).includes("xui-transition-open");
-                (onOpen && isOpen) && onOpen();
-                (onClose && !isOpen) && onClose();
-                onState && onState(isOpen ? "open" : "close");
-                setState(s => (Object.assign(Object.assign({}, s), { stage: isOpen ? "open" : "close" })));
+                clearTimeout(stimer);
+                stimer = setTimeout(() => {
+                    const isOpen = ele.getAttribute('data-transition-state') === 'open';
+                    (onOpen && isOpen) && onOpen();
+                    (onClose && !isOpen) && onClose();
+                    onState && onState(isOpen ? "open" : "close");
+                    setState(s => (Object.assign(Object.assign({}, s), { stage: isOpen ? "open" : "close" })));
+                }, 1);
             };
             ele.ontransitionend = () => {
-                const isOpen = Array.from(ele.classList).includes("xui-transition-open");
-                (onOpened && isOpen) && onOpened();
-                (onClosed && !isOpen) && onClosed();
-                onState && onState(isOpen ? "opened" : "closed");
-                setState(s => (Object.assign(Object.assign({}, s), { stage: isOpen ? "opened" : "closed" })));
+                clearTimeout(etimer);
+                etimer = setTimeout(() => {
+                    const isOpen = ele.getAttribute('data-transition-state') === 'open';
+                    (onOpened && isOpen) && onOpened();
+                    (onClosed && !isOpen) && onClosed();
+                    onState && onState(isOpen ? "opened" : "closed");
+                    setState(s => (Object.assign(Object.assign({}, s), { stage: isOpen ? "opened" : "closed" })));
+                }, 1);
             };
         }
         else if (!state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: css(from).classname, rect: rect })));
+            setState(s => (Object.assign(Object.assign({}, s), { classname: style(from), rect: rect })));
         }
     }, [open, state.initial, state.stage, exitOnUnmount]);
     useEffect(() => {
@@ -66,11 +77,15 @@ const useTransition = (_a) => {
             let _css = open ? to : from;
             let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
             let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + ", ") + trans });
-            setState(s => (Object.assign(Object.assign({}, s), { classname: css(_).classname, variant: _variant })));
+            setState(s => (Object.assign(Object.assign({}, s), { classname: style(_), variant: _variant })));
         }
     }, [open, state.initial, variant]);
     return {
         exited: exitOnUnmount && state.stage === 'closed',
-        classname: classNames(id, state.classname, `xui-transition-${open ? "open" : "close"}`, `xui-transition-${state.stage}`)
+        props: {
+            'id': state.classname,
+            'data-transition': id,
+            'data-transition-state': open ? 'open' : 'close',
+        }
     };
 };export{useTransition as default};//# sourceMappingURL=index.mjs.map