@xanui/core 1.2.22 → 1.2.25

package/Transition/index.d.ts

@@ -1,34 +1,14 @@
-import React__default, { ReactElement } from 'react';
-import { animationEases } from '../hooks/useAnimation.js';
-import { CSSProps } from '../css/types.js';
-import * as variants from './variants.js';
+import * as React$1 from 'react';
+import { UseTransitionProps } from '../hooks/useTransition/index.js';
 
-type TransitionVariantTypes = keyof typeof variants;
-type TransitionElementProps = {
-    height: number;
-    width: number;
-    rect: DOMRect | null;
+type TransitionProps = UseTransitionProps & {
+    children: React.ReactElement;
 };
-type TransitionState = "open" | "opened" | "close" | "closed";
-type TransitionProps = {
-    children: ReactElement;
-    open: boolean;
-    variant: {
-        from: CSSProps;
-        to: CSSProps;
-    } | TransitionVariantTypes;
-    ease?: string;
-    easing?: keyof typeof animationEases;
-    duration?: number;
-    delay?: number;
-    disableInitialTransition?: boolean;
-    onOpen?: () => void;
-    onOpened?: () => void;
-    onClose?: () => void;
-    onClosed?: () => void;
-    onState?: (state: TransitionState) => void;
-};
-declare const Transition: ({ children, open, ...props }: TransitionProps) => React__default.JSX.Element;
+declare const Transition: ({ children, ...options }: TransitionProps) => React$1.DetailedReactHTMLElement<{
+    id: string;
+    'data-transition': string;
+    'data-transition-state': string;
+}, HTMLElement> | null;
 
 export { Transition as default };
-export type { TransitionElementProps, TransitionProps, TransitionState, TransitionVariantTypes };
+export type { TransitionProps };

package/Transition/index.js

@@ -1,93 +1,8 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index$1=require('../Tag/index.js'),useAnimation=require('../hooks/useAnimation.js'),index=require('../css/index.js'),oncss=require('oncss'),variants=require('./variants.js');const Transition = (_a) => {
-    var { children, open } = _a, props = tslib.__rest(_a, ["children", "open"]);
-    let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props;
-    let _ease = ease || useAnimation.animationEases[easing] || useAnimation.animationEases.easeBounceOut;
-    disableInitialTransition !== null && disableInitialTransition !== void 0 ? disableInitialTransition : (disableInitialTransition = false);
-    duration !== null && duration !== void 0 ? duration : (duration = 400);
-    variant !== null && variant !== void 0 ? variant : (variant = "fade");
-    const id = React.useId().replace(/:/g, "");
-    const [rendered, setRendered] = React.useState(false);
-    const [initial, setInitial] = React.useState(false);
-    const [transitionState, setTransitionState] = React.useState(open ? (disableInitialTransition ? "opened" : "open") : "closed");
-    const [element, setElement] = React.useState({
-        height: 0,
-        width: 0,
-        rect: null
-    });
-    if (typeof variant === 'string') {
-        variant = variants[variant](element);
-    }
-    let from = variant.from;
-    let to = variant.to;
-    const [_css, setCss] = React.useState(open ? to : from);
-    React.useEffect(() => {
-        const ele = document.querySelector(`.trans-${id}`);
-        if (ele) {
-            setRendered(true);
-            setElement({
-                height: ele.clientHeight,
-                width: ele.clientWidth,
-                rect: ele.getBoundingClientRect()
-            });
-            if (!disableInitialTransition && open) {
-                setCss(from);
-            }
-        }
-    }, []);
-    React.useEffect(() => {
-        const ele = document.querySelector(`.trans-${id}`);
-        if (rendered && ele) {
-            let stimer = null;
-            let etimer = null;
-            ele.ontransitionstart = () => {
-                clearTimeout(stimer);
-                stimer = setTimeout(() => {
-                    const isOpen = Array.from(ele.classList).includes("trans-open");
-                    (onOpen && isOpen) && onOpen();
-                    (onClose && !isOpen) && onClose();
-                    onState && onState(isOpen ? "open" : "close");
-                    setTransitionState(isOpen ? "open" : "close");
-                }, 1);
-            };
-            ele.ontransitionend = () => {
-                clearTimeout(etimer);
-                etimer = setTimeout(() => {
-                    const isOpen = Array.from(ele.classList).includes("trans-open");
-                    (onOpened && isOpen) && onOpened();
-                    (onClosed && !isOpen) && onClosed();
-                    onState && onState(isOpen ? "opened" : "closed");
-                    setTransitionState(isOpen ? "opened" : "closed");
-                }, 1);
-            };
-        }
-    }, [rendered]);
-    React.useEffect(() => {
-        if (rendered) {
-            if (!initial) {
-                setInitial(true);
-                setTimeout(() => {
-                    setCss(open ? to : from);
-                }, 50);
-            }
-            else {
-                setCss(open ? to : from);
-            }
-        }
-    }, [rendered, open, JSON.stringify(from), JSON.stringify(to)]);
-    let _ = {};
-    if (rendered) {
-        let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
-        _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {}).map(k => oncss.formatCSSProp(k)).join(trans + ", ") + trans });
-    }
-    const cls = index.css(_);
-    if (!children || Array.isArray(children))
-        throw new Error("Invalid children in Transition");
-    const first = React.Children.toArray(children).shift();
-    let classname = `${cls.classname} trans-${id} trans-${(open ? "open" : "close")} trans-state-${transitionState}`;
-    const child = React.cloneElement(first, { classNames: [classname] });
-    if (rendered)
-        return child;
-    if (!rendered && disableInitialTransition && open)
-        return child;
-    return (jsxRuntime.jsx(index$1.default, { height: 0, overflow: 'hidden', position: "fixed", visibility: "hidden", children: child }));
+'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 { 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, 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 React, { ReactElement, cloneElement, Children, useState, useEffect, useId } from 'react';\nimport Tag from '../Tag';\nimport { animationEases } from '../hooks/useAnimation';\nimport { css } from '../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\nimport * as variants from './variants'\nexport type TransitionVariantTypes = keyof typeof variants\n\nexport type TransitionElementProps = {\n    height: number;\n    width: number;\n    rect: DOMRect | null\n}\n\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n    children: ReactElement;\n    open: boolean;\n    variant: {\n        from: CSSProps;\n        to: CSSProps;\n    } | TransitionVariantTypes;\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 Transition = ({ children, open, ...props }: TransitionProps) => {\n    let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props as TransitionProps\n    let _ease = ease || (animationEases as any)[easing as any] || animationEases.easeBounceOut\n    disableInitialTransition ??= false\n    duration ??= 400\n    variant ??= \"fade\"\n\n    const id = useId().replace(/:/g, \"\")\n    const [rendered, setRendered] = useState(false)\n    const [initial, setInitial] = useState(false)\n    const [transitionState, setTransitionState] = useState<TransitionState>(open ? (disableInitialTransition ? \"opened\" : \"open\") : \"closed\")\n    const [element, setElement] = useState<TransitionElementProps>({\n        height: 0,\n        width: 0,\n        rect: null\n    });\n\n    if (typeof variant === 'string') {\n        variant = (variants as any)[variant](element)\n    }\n\n    let from = (variant as any).from\n    let to = (variant as any).to\n\n    const [_css, setCss] = useState(open ? to : from)\n\n    useEffect(() => {\n        const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n        if (ele) {\n            setRendered(true)\n            setElement({\n                height: ele.clientHeight,\n                width: ele.clientWidth,\n                rect: ele.getBoundingClientRect()\n            })\n            if (!disableInitialTransition && open) {\n                setCss(from)\n            }\n        }\n    }, [])\n\n    useEffect(() => {\n        const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n        if (rendered && ele) {\n            let stimer: any = null\n            let etimer: any = null\n            ele.ontransitionstart = () => {\n                clearTimeout(stimer)\n                stimer = setTimeout(() => {\n                    const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n                    (onOpen && isOpen) && onOpen();\n                    (onClose && !isOpen) && onClose()\n                    onState && onState(isOpen ? \"open\" : \"close\")\n                    setTransitionState(isOpen ? \"open\" : \"close\")\n                }, 1)\n            }\n            ele.ontransitionend = () => {\n                clearTimeout(etimer)\n                etimer = setTimeout(() => {\n                    const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n                    (onOpened && isOpen) && onOpened();\n                    (onClosed && !isOpen) && onClosed();\n                    onState && onState(isOpen ? \"opened\" : \"closed\")\n                    setTransitionState(isOpen ? \"opened\" : \"closed\")\n                }, 1)\n            }\n        }\n    }, [rendered])\n\n    useEffect(() => {\n        if (rendered) {\n            if (!initial) {\n                setInitial(true)\n                setTimeout(() => {\n                    setCss(open ? to : from)\n                }, 50);\n            } else {\n                setCss(open ? to : from)\n            }\n        }\n    }, [rendered, open, JSON.stringify(from), JSON.stringify(to)])\n\n    let _: any = {}\n    if (rendered) {\n        let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n        _ = {\n            ..._css,\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n        }\n    }\n\n    const cls = css(_)\n    if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Transition\")\n    const first: any = Children.toArray(children).shift();\n    let classname = `${cls.classname} trans-${id} trans-${(open ? \"open\" : \"close\")} trans-state-${transitionState}`\n    const child = cloneElement(first, { classNames: [classname] })\n    if (rendered) return child\n    if (!rendered && disableInitialTransition && open) return child\n\n    return (\n        <Tag\n            height={0}\n            overflow={'hidden'}\n            position=\"fixed\"\n            visibility=\"hidden\"\n        >\n            {child}\n        </Tag>\n    )\n}\n\n\nexport default Transition"],"names":["__rest","animationEases","useId","useState","useEffect","formatCSSProp","css","Children","cloneElement","_jsx","Tag"],"mappings":"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"}
+{"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,93 +1,8 @@
-import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {useId,useState,useEffect,Children,cloneElement}from'react';import Tag from'../Tag/index.mjs';import {animationEases}from'../hooks/useAnimation.mjs';import {css}from'../css/index.mjs';import {formatCSSProp}from'oncss';import*as variants from'./variants.mjs';const Transition = (_a) => {
-    var { children, open } = _a, props = __rest(_a, ["children", "open"]);
-    let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props;
-    let _ease = ease || animationEases[easing] || animationEases.easeBounceOut;
-    disableInitialTransition !== null && disableInitialTransition !== void 0 ? disableInitialTransition : (disableInitialTransition = false);
-    duration !== null && duration !== void 0 ? duration : (duration = 400);
-    variant !== null && variant !== void 0 ? variant : (variant = "fade");
-    const id = useId().replace(/:/g, "");
-    const [rendered, setRendered] = useState(false);
-    const [initial, setInitial] = useState(false);
-    const [transitionState, setTransitionState] = useState(open ? (disableInitialTransition ? "opened" : "open") : "closed");
-    const [element, setElement] = useState({
-        height: 0,
-        width: 0,
-        rect: null
-    });
-    if (typeof variant === 'string') {
-        variant = variants[variant](element);
-    }
-    let from = variant.from;
-    let to = variant.to;
-    const [_css, setCss] = useState(open ? to : from);
-    useEffect(() => {
-        const ele = document.querySelector(`.trans-${id}`);
-        if (ele) {
-            setRendered(true);
-            setElement({
-                height: ele.clientHeight,
-                width: ele.clientWidth,
-                rect: ele.getBoundingClientRect()
-            });
-            if (!disableInitialTransition && open) {
-                setCss(from);
-            }
-        }
-    }, []);
-    useEffect(() => {
-        const ele = document.querySelector(`.trans-${id}`);
-        if (rendered && ele) {
-            let stimer = null;
-            let etimer = null;
-            ele.ontransitionstart = () => {
-                clearTimeout(stimer);
-                stimer = setTimeout(() => {
-                    const isOpen = Array.from(ele.classList).includes("trans-open");
-                    (onOpen && isOpen) && onOpen();
-                    (onClose && !isOpen) && onClose();
-                    onState && onState(isOpen ? "open" : "close");
-                    setTransitionState(isOpen ? "open" : "close");
-                }, 1);
-            };
-            ele.ontransitionend = () => {
-                clearTimeout(etimer);
-                etimer = setTimeout(() => {
-                    const isOpen = Array.from(ele.classList).includes("trans-open");
-                    (onOpened && isOpen) && onOpened();
-                    (onClosed && !isOpen) && onClosed();
-                    onState && onState(isOpen ? "opened" : "closed");
-                    setTransitionState(isOpen ? "opened" : "closed");
-                }, 1);
-            };
-        }
-    }, [rendered]);
-    useEffect(() => {
-        if (rendered) {
-            if (!initial) {
-                setInitial(true);
-                setTimeout(() => {
-                    setCss(open ? to : from);
-                }, 50);
-            }
-            else {
-                setCss(open ? to : from);
-            }
-        }
-    }, [rendered, open, JSON.stringify(from), JSON.stringify(to)]);
-    let _ = {};
-    if (rendered) {
-        let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
-        _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + ", ") + trans });
-    }
-    const cls = css(_);
-    if (!children || Array.isArray(children))
-        throw new Error("Invalid children in Transition");
-    const first = Children.toArray(children).shift();
-    let classname = `${cls.classname} trans-${id} trans-${(open ? "open" : "close")} trans-state-${transitionState}`;
-    const child = cloneElement(first, { classNames: [classname] });
-    if (rendered)
-        return child;
-    if (!rendered && disableInitialTransition && open)
-        return child;
-    return (jsx(Tag, { height: 0, overflow: 'hidden', position: "fixed", visibility: "hidden", children: child }));
+import {__rest}from'tslib';import {Children,cloneElement}from'react';import useTransition from'../hooks/useTransition/index.mjs';const Transition = (_a) => {
+    var { children } = _a, options = __rest(_a, ["children"]);
+    const { props, exited } = useTransition(options);
+    if (exited)
+        return null;
+    const clone = Children.only(children);
+    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 React, { ReactElement, cloneElement, Children, useState, useEffect, useId } from 'react';\nimport Tag from '../Tag';\nimport { animationEases } from '../hooks/useAnimation';\nimport { css } from '../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\nimport * as variants from './variants'\nexport type TransitionVariantTypes = keyof typeof variants\n\nexport type TransitionElementProps = {\n    height: number;\n    width: number;\n    rect: DOMRect | null\n}\n\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n    children: ReactElement;\n    open: boolean;\n    variant: {\n        from: CSSProps;\n        to: CSSProps;\n    } | TransitionVariantTypes;\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 Transition = ({ children, open, ...props }: TransitionProps) => {\n    let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props as TransitionProps\n    let _ease = ease || (animationEases as any)[easing as any] || animationEases.easeBounceOut\n    disableInitialTransition ??= false\n    duration ??= 400\n    variant ??= \"fade\"\n\n    const id = useId().replace(/:/g, \"\")\n    const [rendered, setRendered] = useState(false)\n    const [initial, setInitial] = useState(false)\n    const [transitionState, setTransitionState] = useState<TransitionState>(open ? (disableInitialTransition ? \"opened\" : \"open\") : \"closed\")\n    const [element, setElement] = useState<TransitionElementProps>({\n        height: 0,\n        width: 0,\n        rect: null\n    });\n\n    if (typeof variant === 'string') {\n        variant = (variants as any)[variant](element)\n    }\n\n    let from = (variant as any).from\n    let to = (variant as any).to\n\n    const [_css, setCss] = useState(open ? to : from)\n\n    useEffect(() => {\n        const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n        if (ele) {\n            setRendered(true)\n            setElement({\n                height: ele.clientHeight,\n                width: ele.clientWidth,\n                rect: ele.getBoundingClientRect()\n            })\n            if (!disableInitialTransition && open) {\n                setCss(from)\n            }\n        }\n    }, [])\n\n    useEffect(() => {\n        const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n        if (rendered && ele) {\n            let stimer: any = null\n            let etimer: any = null\n            ele.ontransitionstart = () => {\n                clearTimeout(stimer)\n                stimer = setTimeout(() => {\n                    const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n                    (onOpen && isOpen) && onOpen();\n                    (onClose && !isOpen) && onClose()\n                    onState && onState(isOpen ? \"open\" : \"close\")\n                    setTransitionState(isOpen ? \"open\" : \"close\")\n                }, 1)\n            }\n            ele.ontransitionend = () => {\n                clearTimeout(etimer)\n                etimer = setTimeout(() => {\n                    const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n                    (onOpened && isOpen) && onOpened();\n                    (onClosed && !isOpen) && onClosed();\n                    onState && onState(isOpen ? \"opened\" : \"closed\")\n                    setTransitionState(isOpen ? \"opened\" : \"closed\")\n                }, 1)\n            }\n        }\n    }, [rendered])\n\n    useEffect(() => {\n        if (rendered) {\n            if (!initial) {\n                setInitial(true)\n                setTimeout(() => {\n                    setCss(open ? to : from)\n                }, 50);\n            } else {\n                setCss(open ? to : from)\n            }\n        }\n    }, [rendered, open, JSON.stringify(from), JSON.stringify(to)])\n\n    let _: any = {}\n    if (rendered) {\n        let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n        _ = {\n            ..._css,\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n        }\n    }\n\n    const cls = css(_)\n    if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Transition\")\n    const first: any = Children.toArray(children).shift();\n    let classname = `${cls.classname} trans-${id} trans-${(open ? \"open\" : \"close\")} trans-state-${transitionState}`\n    const child = cloneElement(first, { classNames: [classname] })\n    if (rendered) return child\n    if (!rendered && disableInitialTransition && open) return child\n\n    return (\n        <Tag\n            height={0}\n            overflow={'hidden'}\n            position=\"fixed\"\n            visibility=\"hidden\"\n        >\n            {child}\n        </Tag>\n    )\n}\n\n\nexport default Transition"],"names":["_jsx"],"mappings":"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"}
+{"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

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