@xanui/ui 1.1.8 → 1.1.9

package/ClickOutside/index.d.ts

@@ -1,10 +1,11 @@
+import { TagComponentType, TagProps } from '@xanui/core';
 import React from 'react';
 
-type ClickOutsideProps = {
-    onClickOutside: () => void;
+type ClickOutsideProps<T extends TagComponentType = "div"> = TagProps<T> & {
+    onClickOutside: (e: MouseEvent) => void;
     children: React.ReactElement;
 };
-declare const ClickOutside: React.ForwardRefExoticComponent<ClickOutsideProps & React.RefAttributes<unknown>>;
+declare const ClickOutside: React.ForwardRefExoticComponent<Omit<ClickOutsideProps<TagComponentType>, "ref"> & React.RefAttributes<unknown>>;
 
 export { ClickOutside as default };
 export type { ClickOutsideProps };

package/ClickOutside/index.js

@@ -1,4 +1,5 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var React=require('react');const ClickOutside = React.forwardRef(({ children, onClickOutside }, forwardedRef) => {
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),React=require('react');const ClickOutside = React.forwardRef((_a, forwardedRef) => {
+    var { children, onClickOutside } = _a, props = tslib.__rest(_a, ["children", "onClickOutside"]);
     const innerRef = React.useRef(null);
     // merge refs
     const setRefs = (el) => {
@@ -15,13 +16,11 @@
             if (!innerRef.current)
                 return;
             if (!innerRef.current.contains(e.target)) {
-                onClickOutside();
+                onClickOutside(e);
             }
         };
         document.addEventListener("mousedown", handler);
         return () => document.removeEventListener("mousedown", handler);
     }, [onClickOutside]);
-    return React.cloneElement(children, {
-        ref: setRefs
-    });
+    return (jsxRuntime.jsx(core.Tag, Object.assign({ component: "div", display: "inline-block" }, props, { baseClass: 'click-outside', ref: setRefs, children: children })));
 });exports.default=ClickOutside;//# sourceMappingURL=index.js.map

package/ClickOutside/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\nexport type ClickOutsideProps = {\n    onClickOutside: () => void;\n    children: React.ReactElement\n};\n\nconst ClickOutside = React.forwardRef(({ children, onClickOutside }: ClickOutsideProps, forwardedRef: any) => {\n\n    const innerRef = useRef<HTMLElement | null>(null);\n\n    // merge refs\n    const setRefs = (el: HTMLElement) => {\n        innerRef.current = el;\n\n        if (typeof forwardedRef === \"function\") {\n            forwardedRef(el);\n        } else if (forwardedRef) {\n            forwardedRef.current = el;\n        }\n    };\n\n    useEffect(() => {\n        const handler = (e: MouseEvent) => {\n            if (!innerRef.current) return;\n            if (!innerRef.current.contains(e.target as Node)) {\n                onClickOutside();\n            }\n        };\n\n        document.addEventListener(\"mousedown\", handler);\n        return () => document.removeEventListener(\"mousedown\", handler);\n    }, [onClickOutside]);\n\n    return React.cloneElement(children, {\n        ref: setRefs as any\n    } as any);\n}\n);\n\nexport default ClickOutside;\n"],"names":["useRef","useEffect"],"mappings":"iGAOA,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAqB,EAAE,YAAiB,KAAI;AAEzG,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAAqB,IAAI,CAAC;;AAGjD,IAAA,MAAM,OAAO,GAAG,CAAC,EAAe,KAAI;AAChC,QAAA,QAAQ,CAAC,OAAO,GAAG,EAAE;AAErB,QAAA,IAAI,OAAO,YAAY,KAAK,UAAU,EAAE;YACpC,YAAY,CAAC,EAAE,CAAC;QACpB;aAAO,IAAI,YAAY,EAAE;AACrB,YAAA,YAAY,CAAC,OAAO,GAAG,EAAE;QAC7B;AACJ,IAAA,CAAC;IAEDC,eAAS,CAAC,MAAK;AACX,QAAA,MAAM,OAAO,GAAG,CAAC,CAAa,KAAI;YAC9B,IAAI,CAAC,QAAQ,CAAC,OAAO;gBAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE;AAC9C,gBAAA,cAAc,EAAE;YACpB;AACJ,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,OAAO,CAAC;QAC/C,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,OAAO,CAAC;AACnE,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAEpB,IAAA,OAAO,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE;AAChC,QAAA,GAAG,EAAE;AACD,KAAA,CAAC;AACb,CAAC"}
+{"version":3,"file":"index.js","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["import { Tag, TagComponentType, TagProps } from '@xanui/core';\nimport React, { useEffect, useRef } from 'react';\n\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    onClickOutside: (e: MouseEvent) => void;\n    children: React.ReactElement\n};\n\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, forwardedRef: any) => {\n\n    const innerRef = useRef<HTMLElement | null>(null);\n\n    // merge refs\n    const setRefs = (el: HTMLElement) => {\n        innerRef.current = el;\n        if (typeof forwardedRef === \"function\") {\n            forwardedRef(el);\n        } else if (forwardedRef) {\n            forwardedRef.current = el;\n        }\n    };\n\n    useEffect(() => {\n        const handler = (e: MouseEvent) => {\n            if (!innerRef.current) return;\n            if (!innerRef.current.contains(e.target as Node)) {\n                onClickOutside(e);\n            }\n        };\n\n        document.addEventListener(\"mousedown\", handler);\n        return () => document.removeEventListener(\"mousedown\", handler);\n    }, [onClickOutside]);\n\n    return (\n        <Tag\n            component=\"div\"\n            display=\"inline-block\"\n            {...props}\n            baseClass='click-outside'\n            ref={setRefs}\n        >\n            {children}\n        </Tag>\n    )\n});\n\nexport default ClickOutside;\n"],"names":["__rest","useRef","useEffect","_jsx","Tag"],"mappings":"4LAQA,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA4D,EAAE,YAAiB,KAAI;QAAnF,EAAE,QAAQ,EAAE,cAAc,EAAA,GAAA,EAAkC,EAA7B,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApC,8BAAsC,CAAF;AAE3G,IAAA,MAAM,QAAQ,GAAGC,YAAM,CAAqB,IAAI,CAAC;;AAGjD,IAAA,MAAM,OAAO,GAAG,CAAC,EAAe,KAAI;AAChC,QAAA,QAAQ,CAAC,OAAO,GAAG,EAAE;AACrB,QAAA,IAAI,OAAO,YAAY,KAAK,UAAU,EAAE;YACpC,YAAY,CAAC,EAAE,CAAC;QACpB;aAAO,IAAI,YAAY,EAAE;AACrB,YAAA,YAAY,CAAC,OAAO,GAAG,EAAE;QAC7B;AACJ,IAAA,CAAC;IAEDC,eAAS,CAAC,MAAK;AACX,QAAA,MAAM,OAAO,GAAG,CAAC,CAAa,KAAI;YAC9B,IAAI,CAAC,QAAQ,CAAC,OAAO;gBAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE;gBAC9C,cAAc,CAAC,CAAC,CAAC;YACrB;AACJ,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,OAAO,CAAC;QAC/C,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,OAAO,CAAC;AACnE,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;IAEpB,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,KAAK,EACf,OAAO,EAAC,cAAc,EAAA,EAClB,KAAK,EAAA,EACT,SAAS,EAAC,eAAe,EACzB,GAAG,EAAE,OAAO,EAAA,QAAA,EAEX,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC"}

package/ClickOutside/index.mjs

@@ -1,4 +1,5 @@
-import React,{useRef,useEffect}from'react';const ClickOutside = React.forwardRef(({ children, onClickOutside }, forwardedRef) => {
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {Tag}from'@xanui/core';import React,{useRef,useEffect}from'react';const ClickOutside = React.forwardRef((_a, forwardedRef) => {
+    var { children, onClickOutside } = _a, props = __rest(_a, ["children", "onClickOutside"]);
     const innerRef = useRef(null);
     // merge refs
     const setRefs = (el) => {
@@ -15,13 +16,11 @@ import React,{useRef,useEffect}from'react';const ClickOutside = React.forwardRef
             if (!innerRef.current)
                 return;
             if (!innerRef.current.contains(e.target)) {
-                onClickOutside();
+                onClickOutside(e);
             }
         };
         document.addEventListener("mousedown", handler);
         return () => document.removeEventListener("mousedown", handler);
     }, [onClickOutside]);
-    return React.cloneElement(children, {
-        ref: setRefs
-    });
+    return (jsx(Tag, Object.assign({ component: "div", display: "inline-block" }, props, { baseClass: 'click-outside', ref: setRefs, children: children })));
 });export{ClickOutside as default};//# sourceMappingURL=index.mjs.map

package/ClickOutside/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\nexport type ClickOutsideProps = {\n    onClickOutside: () => void;\n    children: React.ReactElement\n};\n\nconst ClickOutside = React.forwardRef(({ children, onClickOutside }: ClickOutsideProps, forwardedRef: any) => {\n\n    const innerRef = useRef<HTMLElement | null>(null);\n\n    // merge refs\n    const setRefs = (el: HTMLElement) => {\n        innerRef.current = el;\n\n        if (typeof forwardedRef === \"function\") {\n            forwardedRef(el);\n        } else if (forwardedRef) {\n            forwardedRef.current = el;\n        }\n    };\n\n    useEffect(() => {\n        const handler = (e: MouseEvent) => {\n            if (!innerRef.current) return;\n            if (!innerRef.current.contains(e.target as Node)) {\n                onClickOutside();\n            }\n        };\n\n        document.addEventListener(\"mousedown\", handler);\n        return () => document.removeEventListener(\"mousedown\", handler);\n    }, [onClickOutside]);\n\n    return React.cloneElement(children, {\n        ref: setRefs as any\n    } as any);\n}\n);\n\nexport default ClickOutside;\n"],"names":[],"mappings":"2CAOA,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAqB,EAAE,YAAiB,KAAI;AAEzG,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAqB,IAAI,CAAC;;AAGjD,IAAA,MAAM,OAAO,GAAG,CAAC,EAAe,KAAI;AAChC,QAAA,QAAQ,CAAC,OAAO,GAAG,EAAE;AAErB,QAAA,IAAI,OAAO,YAAY,KAAK,UAAU,EAAE;YACpC,YAAY,CAAC,EAAE,CAAC;QACpB;aAAO,IAAI,YAAY,EAAE;AACrB,YAAA,YAAY,CAAC,OAAO,GAAG,EAAE;QAC7B;AACJ,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,OAAO,GAAG,CAAC,CAAa,KAAI;YAC9B,IAAI,CAAC,QAAQ,CAAC,OAAO;gBAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE;AAC9C,gBAAA,cAAc,EAAE;YACpB;AACJ,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,OAAO,CAAC;QAC/C,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,OAAO,CAAC;AACnE,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAEpB,IAAA,OAAO,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE;AAChC,QAAA,GAAG,EAAE;AACD,KAAA,CAAC;AACb,CAAC"}
+{"version":3,"file":"index.mjs","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["import { Tag, TagComponentType, TagProps } from '@xanui/core';\nimport React, { useEffect, useRef } from 'react';\n\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    onClickOutside: (e: MouseEvent) => void;\n    children: React.ReactElement\n};\n\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, forwardedRef: any) => {\n\n    const innerRef = useRef<HTMLElement | null>(null);\n\n    // merge refs\n    const setRefs = (el: HTMLElement) => {\n        innerRef.current = el;\n        if (typeof forwardedRef === \"function\") {\n            forwardedRef(el);\n        } else if (forwardedRef) {\n            forwardedRef.current = el;\n        }\n    };\n\n    useEffect(() => {\n        const handler = (e: MouseEvent) => {\n            if (!innerRef.current) return;\n            if (!innerRef.current.contains(e.target as Node)) {\n                onClickOutside(e);\n            }\n        };\n\n        document.addEventListener(\"mousedown\", handler);\n        return () => document.removeEventListener(\"mousedown\", handler);\n    }, [onClickOutside]);\n\n    return (\n        <Tag\n            component=\"div\"\n            display=\"inline-block\"\n            {...props}\n            baseClass='click-outside'\n            ref={setRefs}\n        >\n            {children}\n        </Tag>\n    )\n});\n\nexport default ClickOutside;\n"],"names":["_jsx"],"mappings":"wIAQA,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA4D,EAAE,YAAiB,KAAI;QAAnF,EAAE,QAAQ,EAAE,cAAc,EAAA,GAAA,EAAkC,EAA7B,KAAK,GAAA,MAAA,CAAA,EAAA,EAApC,8BAAsC,CAAF;AAE3G,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAqB,IAAI,CAAC;;AAGjD,IAAA,MAAM,OAAO,GAAG,CAAC,EAAe,KAAI;AAChC,QAAA,QAAQ,CAAC,OAAO,GAAG,EAAE;AACrB,QAAA,IAAI,OAAO,YAAY,KAAK,UAAU,EAAE;YACpC,YAAY,CAAC,EAAE,CAAC;QACpB;aAAO,IAAI,YAAY,EAAE;AACrB,YAAA,YAAY,CAAC,OAAO,GAAG,EAAE;QAC7B;AACJ,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,OAAO,GAAG,CAAC,CAAa,KAAI;YAC9B,IAAI,CAAC,QAAQ,CAAC,OAAO;gBAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE;gBAC9C,cAAc,CAAC,CAAC,CAAC;YACrB;AACJ,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,OAAO,CAAC;QAC/C,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,OAAO,CAAC;AACnE,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;IAEpB,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,KAAK,EACf,OAAO,EAAC,cAAc,EAAA,EAClB,KAAK,EAAA,EACT,SAAS,EAAC,eAAe,EACzB,GAAG,EAAE,OAAO,EAAA,QAAA,EAEX,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC"}

package/Collaps/index.js

@@ -2,7 +2,7 @@
     var { children, open } = _a, props = tslib.__rest(_a, ["children", "open"]);
     let [_b] = core.useInterface("Collaps", props, {}), { ease, easing, duration, delay, onStart, onFinish, onOpen, onOpened, onClose, onClosed } = _b, rest = tslib.__rest(_b, ["ease", "easing", "duration", "delay", "onStart", "onFinish", "onOpen", "onOpened", "onClose", "onClosed"]);
     open !== null && open !== void 0 ? open : (open = false);
-    easing !== null && easing !== void 0 ? easing : (easing = "easeOut");
+    easing !== null && easing !== void 0 ? easing : (easing = "standard");
     return (jsxRuntime.jsx(core.Transition, { ease,
         easing,
         duration,
@@ -12,5 +12,5 @@
         onOpen,
         onOpened,
         onClose,
-        onClosed, disableInitialTransition: true, variant: "collapsVerticle", open: open, children: jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { baseClass: 'collaps', ref: ref, children: children })) }));
+        onClosed, disableInitialTransition: true, variant: "collapseVertical", open: open, children: jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { baseClass: 'collaps', ref: ref, children: children })) }));
 });exports.default=Collaps;//# sourceMappingURL=index.js.map

package/Collaps/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n    let [{\n        ease,\n        easing,\n        duration,\n        delay,\n        onStart,\n        onFinish,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        ...rest\n    }] = useInterface<any>(\"Collaps\", props, {})\n\n    open ??= false\n    easing ??= \"easeOut\"\n\n    return (\n        <Transition\n            {...{\n                ease,\n                easing,\n                duration,\n                delay,\n                onStart,\n                onFinish,\n                onOpen,\n                onOpened,\n                onClose,\n                onClosed\n            }}\n            disableInitialTransition\n            variant=\"collapsVerticle\"\n            open={open}\n        >\n            <Tag\n                {...rest}\n                baseClass='collaps'\n                ref={ref}\n            >{children}</Tag>\n        </Transition>\n    )\n})\n\nexport default Collaps\n\n\n"],"names":["__rest","useInterface","_jsx","Transition","Tag"],"mappings":"4LAQA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA6C,EAAE,GAAQ,KAAI;QAA3D,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AAC5F,IAAA,IAAI,OAYCC,iBAAY,CAAM,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,EAZvC,EACD,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,OAEX,EADM,IAAI,GAAAD,YAAA,CAAA,EAAA,EAXN,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAYJ,CAA2C;IAE5C,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,KAAK,CAAA;IACd,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAN,MAAM,IAAN,MAAM,GAAK,SAAS,CAAA;AAEpB,IAAA,QACIE,cAAA,CAACC,eAAU,EAAA,EAEH,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,KAAK;QACL,OAAO;QACP,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,OAAO;AACP,QAAA,QAAQ,EAEZ,wBAAwB,EAAA,IAAA,EACxB,OAAO,EAAC,iBAAiB,EACzB,IAAI,EAAE,IAAI,EAAA,QAAA,EAEVD,cAAA,CAACE,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO,EAAA,CACR;AAErB,CAAC"}
+{"version":3,"file":"index.js","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n    let [{\n        ease,\n        easing,\n        duration,\n        delay,\n        onStart,\n        onFinish,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        ...rest\n    }] = useInterface<any>(\"Collaps\", props, {})\n\n    open ??= false\n    easing ??= \"standard\"\n\n    return (\n        <Transition\n            {...{\n                ease,\n                easing,\n                duration,\n                delay,\n                onStart,\n                onFinish,\n                onOpen,\n                onOpened,\n                onClose,\n                onClosed\n            }}\n            disableInitialTransition\n            variant=\"collapseVertical\"\n            open={open}\n        >\n            <Tag\n                {...rest}\n                baseClass='collaps'\n                ref={ref}\n            >{children}</Tag>\n        </Transition>\n    )\n})\n\nexport default Collaps\n\n\n"],"names":["__rest","useInterface","_jsx","Transition","Tag"],"mappings":"4LAQA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA6C,EAAE,GAAQ,KAAI;QAA3D,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AAC5F,IAAA,IAAI,OAYCC,iBAAY,CAAM,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,EAZvC,EACD,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,OAEX,EADM,IAAI,GAAAD,YAAA,CAAA,EAAA,EAXN,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAYJ,CAA2C;IAE5C,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,KAAK,CAAA;IACd,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAN,MAAM,IAAN,MAAM,GAAK,UAAU,CAAA;AAErB,IAAA,QACIE,cAAA,CAACC,eAAU,EAAA,EAEH,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,KAAK;QACL,OAAO;QACP,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,OAAO;AACP,QAAA,QAAQ,EAEZ,wBAAwB,EAAA,IAAA,EACxB,OAAO,EAAC,kBAAkB,EAC1B,IAAI,EAAE,IAAI,EAAA,QAAA,EAEVD,cAAA,CAACE,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO,EAAA,CACR;AAErB,CAAC"}

package/Collaps/index.mjs

@@ -2,7 +2,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from
     var { children, open } = _a, props = __rest(_a, ["children", "open"]);
     let [_b] = useInterface("Collaps", props, {}), { ease, easing, duration, delay, onStart, onFinish, onOpen, onOpened, onClose, onClosed } = _b, rest = __rest(_b, ["ease", "easing", "duration", "delay", "onStart", "onFinish", "onOpen", "onOpened", "onClose", "onClosed"]);
     open !== null && open !== void 0 ? open : (open = false);
-    easing !== null && easing !== void 0 ? easing : (easing = "easeOut");
+    easing !== null && easing !== void 0 ? easing : (easing = "standard");
     return (jsx(Transition, { ease,
         easing,
         duration,
@@ -12,5 +12,5 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from
         onOpen,
         onOpened,
         onClose,
-        onClosed, disableInitialTransition: true, variant: "collapsVerticle", open: open, children: jsx(Tag, Object.assign({}, rest, { baseClass: 'collaps', ref: ref, children: children })) }));
+        onClosed, disableInitialTransition: true, variant: "collapseVertical", open: open, children: jsx(Tag, Object.assign({}, rest, { baseClass: 'collaps', ref: ref, children: children })) }));
 });export{Collaps as default};//# sourceMappingURL=index.mjs.map

package/Collaps/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n    let [{\n        ease,\n        easing,\n        duration,\n        delay,\n        onStart,\n        onFinish,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        ...rest\n    }] = useInterface<any>(\"Collaps\", props, {})\n\n    open ??= false\n    easing ??= \"easeOut\"\n\n    return (\n        <Transition\n            {...{\n                ease,\n                easing,\n                duration,\n                delay,\n                onStart,\n                onFinish,\n                onOpen,\n                onOpened,\n                onClose,\n                onClosed\n            }}\n            disableInitialTransition\n            variant=\"collapsVerticle\"\n            open={open}\n        >\n            <Tag\n                {...rest}\n                baseClass='collaps'\n                ref={ref}\n            >{children}</Tag>\n        </Transition>\n    )\n})\n\nexport default Collaps\n\n\n"],"names":["_jsx"],"mappings":"8IAQA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA6C,EAAE,GAAQ,KAAI;QAA3D,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AAC5F,IAAA,IAAI,OAYC,YAAY,CAAM,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,EAZvC,EACD,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,OAEX,EADM,IAAI,GAAA,MAAA,CAAA,EAAA,EAXN,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAYJ,CAA2C;IAE5C,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,KAAK,CAAA;IACd,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAN,MAAM,IAAN,MAAM,GAAK,SAAS,CAAA;AAEpB,IAAA,QACIA,GAAA,CAAC,UAAU,EAAA,EAEH,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,KAAK;QACL,OAAO;QACP,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,OAAO;AACP,QAAA,QAAQ,EAEZ,wBAAwB,EAAA,IAAA,EACxB,OAAO,EAAC,iBAAiB,EACzB,IAAI,EAAE,IAAI,EAAA,QAAA,EAEVA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO,EAAA,CACR;AAErB,CAAC"}
+{"version":3,"file":"index.mjs","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n    let [{\n        ease,\n        easing,\n        duration,\n        delay,\n        onStart,\n        onFinish,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        ...rest\n    }] = useInterface<any>(\"Collaps\", props, {})\n\n    open ??= false\n    easing ??= \"standard\"\n\n    return (\n        <Transition\n            {...{\n                ease,\n                easing,\n                duration,\n                delay,\n                onStart,\n                onFinish,\n                onOpen,\n                onOpened,\n                onClose,\n                onClosed\n            }}\n            disableInitialTransition\n            variant=\"collapseVertical\"\n            open={open}\n        >\n            <Tag\n                {...rest}\n                baseClass='collaps'\n                ref={ref}\n            >{children}</Tag>\n        </Transition>\n    )\n})\n\nexport default Collaps\n\n\n"],"names":["_jsx"],"mappings":"8IAQA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA6C,EAAE,GAAQ,KAAI;QAA3D,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AAC5F,IAAA,IAAI,OAYC,YAAY,CAAM,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,EAZvC,EACD,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,OAEX,EADM,IAAI,GAAA,MAAA,CAAA,EAAA,EAXN,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAYJ,CAA2C;IAE5C,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,KAAK,CAAA;IACd,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAN,MAAM,IAAN,MAAM,GAAK,UAAU,CAAA;AAErB,IAAA,QACIA,GAAA,CAAC,UAAU,EAAA,EAEH,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,KAAK;QACL,OAAO;QACP,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,OAAO;AACP,QAAA,QAAQ,EAEZ,wBAAwB,EAAA,IAAA,EACxB,OAAO,EAAC,kBAAkB,EAC1B,IAAI,EAAE,IAAI,EAAA,QAAA,EAEVA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO,EAAA,CACR;AAErB,CAAC"}

package/Drawer/index.js

@@ -29,8 +29,8 @@ const Drawer = (_a) => {
     };
     let _size = sizes[size] || size;
     return (jsxRuntime.jsx(index.default, Object.assign({}, layerProps, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer, { transition: getVariant(placement), children: jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { baseClass: 'drawer', sxr: {
-                width: "100%",
-                height: "100%",
+                width: "100vw",
+                height: "100vh",
                 display: "flex",
                 direction: isSide ? "row" : "column",
                 justifyContent: placement === 'left' || placement === 'top' ? "flex-start" : "flex-end"

package/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\n\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        layer?: Partial<Omit<LayerProps, \"children\">>\n        root?: TagProps<\"div\">;\n        content?: TagProps<\"div\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n    }\n}\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 200,\n        medium: 300,\n        large: 400\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Layer\n            {...layerProps}\n            {...slotProps?.layer}\n            transition={getVariant(placement)}\n        >\n            <Tag\n                {...slotProps?.root}\n                baseClass='drawer'\n                sxr={{\n                    width: \"100%\",\n                    height: \"100%\",\n                    display: \"flex\",\n                    direction: isSide ? \"row\" : \"column\" as any,\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n                }}\n            >\n                <ClickOutside {...slotProps?.clickOutside} onClickOutside={onClickOutside || (() => { })}>\n                    <Tag\n                        sxr={{\n                            width: isSide ? _size : \"100%\",\n                            height: isSide ? \"100%\" : _size,\n                            bgcolor: \"background.primary\",\n                            shadow: 20\n                        }}\n                        baseClass='drawer-content'\n                    >\n                        {children}\n                    </Tag>\n                </ClickOutside>\n            </Tag>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    const d = Renderar.render(Drawer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            d.unrender()\n        },\n        onClickOutside: () => {\n            if (props?.onClickOutside) {\n                props.onClickOutside()\n            } else {\n                d.updateProps({ open: false })\n            }\n        }\n    })\n\n    return {\n        open: () => {\n            d.updateProps({ open: true })\n        },\n        close: () => {\n            d.updateProps({ open: false })\n        },\n    }\n}\n\nDrawer.close = () => {\n    Renderar.unrender(Drawer as any)\n}\n\nexport default Drawer"],"names":["__rest","useBreakpointProps","_jsx","Layer","Tag","ClickOutside","Renderar"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\n\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        layer?: Partial<Omit<LayerProps, \"children\">>\n        root?: TagProps<\"div\">;\n        content?: TagProps<\"div\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n    }\n}\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 200,\n        medium: 300,\n        large: 400\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Layer\n            {...layerProps}\n            {...slotProps?.layer}\n            transition={getVariant(placement)}\n        >\n            <Tag\n                {...slotProps?.root}\n                baseClass='drawer'\n                sxr={{\n                    width: \"100vw\",\n                    height: \"100vh\",\n                    display: \"flex\",\n                    direction: isSide ? \"row\" : \"column\" as any,\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n                }}\n            >\n                <ClickOutside\n                    {...slotProps?.clickOutside}\n                    onClickOutside={onClickOutside || (() => { })}\n                >\n                    <Tag\n                        sxr={{\n                            width: isSide ? _size : \"100%\",\n                            height: isSide ? \"100%\" : _size,\n                            bgcolor: \"background.primary\",\n                            shadow: 20\n                        }}\n                        baseClass='drawer-content'\n                    >\n                        {children}\n                    </Tag>\n                </ClickOutside>\n            </Tag>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    const d = Renderar.render(Drawer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            d.unrender()\n        },\n        onClickOutside: () => {\n            if (props?.onClickOutside) {\n                props.onClickOutside()\n            } else {\n                d.updateProps({ open: false })\n            }\n        }\n    })\n\n    return {\n        open: () => {\n            d.updateProps({ open: true })\n        },\n        close: () => {\n            d.updateProps({ open: false })\n        },\n    }\n}\n\nDrawer.close = () => {\n    Renderar.unrender(Drawer as any)\n}\n\nexport default Drawer"],"names":["__rest","useBreakpointProps","_jsx","Layer","Tag","ClickOutside","Renderar"],"mappings":"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"}

package/Drawer/index.mjs

@@ -29,8 +29,8 @@ const Drawer = (_a) => {
     };
     let _size = sizes[size] || size;
     return (jsx(Layer, Object.assign({}, layerProps, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer, { transition: getVariant(placement), children: jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { baseClass: 'drawer', sxr: {
-                width: "100%",
-                height: "100%",
+                width: "100vw",
+                height: "100vh",
                 display: "flex",
                 direction: isSide ? "row" : "column",
                 justifyContent: placement === 'left' || placement === 'top' ? "flex-start" : "flex-end"

package/Drawer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\n\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        layer?: Partial<Omit<LayerProps, \"children\">>\n        root?: TagProps<\"div\">;\n        content?: TagProps<\"div\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n    }\n}\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 200,\n        medium: 300,\n        large: 400\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Layer\n            {...layerProps}\n            {...slotProps?.layer}\n            transition={getVariant(placement)}\n        >\n            <Tag\n                {...slotProps?.root}\n                baseClass='drawer'\n                sxr={{\n                    width: \"100%\",\n                    height: \"100%\",\n                    display: \"flex\",\n                    direction: isSide ? \"row\" : \"column\" as any,\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n                }}\n            >\n                <ClickOutside {...slotProps?.clickOutside} onClickOutside={onClickOutside || (() => { })}>\n                    <Tag\n                        sxr={{\n                            width: isSide ? _size : \"100%\",\n                            height: isSide ? \"100%\" : _size,\n                            bgcolor: \"background.primary\",\n                            shadow: 20\n                        }}\n                        baseClass='drawer-content'\n                    >\n                        {children}\n                    </Tag>\n                </ClickOutside>\n            </Tag>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    const d = Renderar.render(Drawer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            d.unrender()\n        },\n        onClickOutside: () => {\n            if (props?.onClickOutside) {\n                props.onClickOutside()\n            } else {\n                d.updateProps({ open: false })\n            }\n        }\n    })\n\n    return {\n        open: () => {\n            d.updateProps({ open: true })\n        },\n        close: () => {\n            d.updateProps({ open: false })\n        },\n    }\n}\n\nDrawer.close = () => {\n    Renderar.unrender(Drawer as any)\n}\n\nexport default Drawer"],"names":["_jsx"],"mappings":"mNAkBA,MAAM,UAAU,GAAG,CAAC,SAAe,KAAI;IACnC,QAAQ,SAAS;AACb,QAAA,KAAK,OAAO;AACR,YAAA,OAAO,UAAU;AACrB,QAAA,KAAK,KAAK;AACN,YAAA,OAAO,UAAU;AACrB,QAAA,KAAK,QAAQ;AACT,YAAA,OAAO,QAAQ;AACnB,QAAA;AACI,YAAA,OAAO,WAAW;;AAE9B,CAAC;AAED,MAAM,MAAM,GAAG,CAAC,EAAoF,KAAI;;AAAxF,IAAA,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAA,GAAA,EAA8B,EAAzB,UAAU,GAAA,MAAA,CAAA,EAAA,EAArE,gEAAuE,CAAF;IACjF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,SAAS,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;AACjC,IAAA,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,QAAQ;IAEzB,IAAI,MAAM,GAAG,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,OAAO;AAC1D,IAAA,IAAI,KAAK,GAAQ;AACb,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,MAAM,EAAE,GAAG;AACX,QAAA,KAAK,EAAE;KACV;IAED,IAAI,KAAK,GAAG,KAAK,CAAC,IAAW,CAAC,IAAI,IAAI;AAEtC,IAAA,QACIA,GAAA,CAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACE,UAAU,EACV,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,EAAA,EACpB,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,YAEjCA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,SAAS,aAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,EAAA,EACnB,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAE;AACD,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,OAAO,EAAE,MAAM;gBACf,SAAS,EAAE,MAAM,GAAG,KAAK,GAAG,QAAe;AAC3C,gBAAA,cAAc,EAAE,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,KAAK,GAAG,YAAY,GAAG;aAChF,EAAA,QAAA,EAEDA,GAAA,CAAC,YAAY,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,YAAY,EAAA,EAAE,cAAc,EAAE,cAAc,KAAK,MAAK,EAAG,CAAC,CAAC,EAAA,QAAA,EACpFA,GAAA,CAAC,GAAG,EAAA,EACA,GAAG,EAAE;wBACD,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM;wBAC9B,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK;AAC/B,wBAAA,OAAO,EAAE,oBAAoB;AAC7B,wBAAA,MAAM,EAAE;qBACX,EACD,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAEzB,QAAQ,GACP,EAAA,CAAA,CACK,EAAA,CAAA,CACb,EAAA,CAAA,CACF;AAEhB;AAGA,MAAM,CAAC,IAAI,GAAG,CAAC,QAAiC,EAAE,KAA8C,KAAI;AAChG,IAAA,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAa,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EACnC,IAAI,EAAE,IAAI,EAAA,EACP,KAAK,CAAA,EAAA,EACR,QAAQ,EACR,QAAQ,EAAE,MAAK;YACX,CAAC,CAAC,QAAQ,EAAE;AAChB,QAAA,CAAC,EACD,cAAc,EAAE,MAAK;YACjB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,cAAc,EAAE;gBACvB,KAAK,CAAC,cAAc,EAAE;YAC1B;iBAAO;gBACH,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;YAClC;AACJ,QAAA,CAAC,IACH;IAEF,OAAO;QACH,IAAI,EAAE,MAAK;YACP,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QACjC,CAAC;QACD,KAAK,EAAE,MAAK;YACR,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;QAClC,CAAC;KACJ;AACL,CAAC;AAED,MAAM,CAAC,KAAK,GAAG,MAAK;AAChB,IAAA,QAAQ,CAAC,QAAQ,CAAC,MAAa,CAAC;AACpC,CAAC"}
+{"version":3,"file":"index.mjs","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\n\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        layer?: Partial<Omit<LayerProps, \"children\">>\n        root?: TagProps<\"div\">;\n        content?: TagProps<\"div\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n    }\n}\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 200,\n        medium: 300,\n        large: 400\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Layer\n            {...layerProps}\n            {...slotProps?.layer}\n            transition={getVariant(placement)}\n        >\n            <Tag\n                {...slotProps?.root}\n                baseClass='drawer'\n                sxr={{\n                    width: \"100vw\",\n                    height: \"100vh\",\n                    display: \"flex\",\n                    direction: isSide ? \"row\" : \"column\" as any,\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n                }}\n            >\n                <ClickOutside\n                    {...slotProps?.clickOutside}\n                    onClickOutside={onClickOutside || (() => { })}\n                >\n                    <Tag\n                        sxr={{\n                            width: isSide ? _size : \"100%\",\n                            height: isSide ? \"100%\" : _size,\n                            bgcolor: \"background.primary\",\n                            shadow: 20\n                        }}\n                        baseClass='drawer-content'\n                    >\n                        {children}\n                    </Tag>\n                </ClickOutside>\n            </Tag>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    const d = Renderar.render(Drawer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            d.unrender()\n        },\n        onClickOutside: () => {\n            if (props?.onClickOutside) {\n                props.onClickOutside()\n            } else {\n                d.updateProps({ open: false })\n            }\n        }\n    })\n\n    return {\n        open: () => {\n            d.updateProps({ open: true })\n        },\n        close: () => {\n            d.updateProps({ open: false })\n        },\n    }\n}\n\nDrawer.close = () => {\n    Renderar.unrender(Drawer as any)\n}\n\nexport default Drawer"],"names":["_jsx"],"mappings":"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"}

package/Layer/index.js

@@ -22,10 +22,11 @@
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     let duration = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _b === void 0 ? void 0 : _b.duration) || 300;
     let delay = ((_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _c === void 0 ? void 0 : _c.delay) || 0;
-    return (jsxRuntime.jsx(core.Transition, { duration: duration, delay: delay, easing: "easeOut", variant: "fade", open: open, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { sxr: Object.assign(Object.assign(Object.assign({}, (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0 }), blurCss), children: jsxRuntime.jsx(index$1.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: jsxRuntime.jsx(core.Transition, Object.assign({ duration: duration, delay: delay, easing: "easeOut", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
-                        setClosed(true);
-                        onClosed && onClosed();
-                    }, children: children })) })) })) }));
+    let content = jsxRuntime.jsx(core.Transition, Object.assign({ duration: duration, delay: delay, easing: "standard", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
+            setClosed(true);
+            onClosed && onClosed();
+        }, children: children }));
+    return (jsxRuntime.jsx(core.Transition, { duration: duration, delay: delay, easing: "smooth", variant: "fade", open: open, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { sxr: Object.assign(Object.assign(Object.assign({}, (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0, width: "100%", height: "100%" }), blurCss), children: onClickOutside ? jsxRuntime.jsx(index$1.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: content })) : content })) }));
 };
 Layer.open = (children, props) => {
     const l = core.Renderar.render(Layer, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {

package/Layer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n    open: boolean;\n    children: ReactNode;\n    transition?: TransitionProps['variant'];\n    zIndex?: number;\n    blur?: useBreakpointPropsType<number>\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n    onClickOutside?: () => void;\n    onOpen?: Function;\n    onOpened?: Function;\n    onClose?: Function;\n    onClosed?: Function;\n    slotProps?: {\n        root?: Omit<TagProps<\"div\">, \"children\">;\n        transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\">;\n    }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n    let [{\n        onClickOutside,\n        placement,\n        transition,\n        zIndex,\n        blur,\n        blurMode,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        slotProps\n    }] = useInterface<any>(\"Layer\", props, {})\n\n    const _p: any = {}\n    if (blur) _p.blur = blur\n    if (blurMode) _p.blurMode = blurMode\n    const p: any = useBreakpointProps(_p)\n\n    blur = p.blur\n    blurMode = p.blurMode\n\n    const [closed, setClosed] = useState(!open)\n    placement = placement || \"bottom-left\"\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n    useEffect(() => {\n        if (closed && open) {\n            setClosed(false)\n        }\n    }, [open])\n\n    if (closed) return <></>\n    let duration = slotProps?.transition?.duration || 300\n    let delay = slotProps?.transition?.delay || 0\n\n    return (\n        <Transition\n            duration={duration}\n            delay={delay}\n            easing=\"easeOut\"\n            variant={\"fade\"}\n            open={open}\n        >\n            <Tag\n                baseClass=\"layer\"\n                {...slotProps?.root}\n                sxr={{\n                    ...slotProps?.root?.sx,\n                    position: \"fixed\",\n                    zIndex: 1500 + (zIndex || 0),\n                    top: 0,\n                    left: 0,\n                    bottom: 0,\n                    right: 0,\n                    ...blurCss\n                }}\n            >\n                <ClickOutside\n                    {...slotProps?.clickOutside}\n                    onClickOutside={onClickOutside || (() => { })}\n                >\n                    <Transition\n                        duration={duration}\n                        delay={delay}\n                        easing=\"easeOut\"\n                        variant={transition || \"zoomOver\"}\n                        {...slotProps?.transition}\n                        open={open}\n                        onOpen={onOpen}\n                        onOpened={onOpened}\n                        onClose={onClose}\n                        onClosed={() => {\n                            setClosed(true)\n                            onClosed && onClosed()\n                        }}\n                    >\n                        {children}\n                    </Transition>\n                </ClickOutside>\n            </Tag>\n        </Transition>\n    )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n    const l = Renderar.render(Layer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            Renderar.unrender(Layer as any)\n            if (props?.onClosed) {\n                props.onClosed()\n            }\n        }\n    })\n    return {\n        open: () => {\n            l.updateProps({ open: true })\n        },\n        close: () => {\n            l.updateProps({ open: false })\n        },\n    }\n}\nLayer.close = () => {\n    Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":["__rest","useInterface","useBreakpointProps","useState","useBlurCss","useEffect","_jsx","Transition","Tag","ClickOutside","Renderar"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n    open: boolean;\n    children: ReactNode;\n    transition?: TransitionProps['variant'];\n    zIndex?: number;\n    blur?: useBreakpointPropsType<number>\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n    onClickOutside?: () => void;\n    onOpen?: Function;\n    onOpened?: Function;\n    onClose?: Function;\n    onClosed?: Function;\n    slotProps?: {\n        root?: Omit<TagProps<\"div\">, \"children\">;\n        transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\">;\n    }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n    let [{\n        onClickOutside,\n        placement,\n        transition,\n        zIndex,\n        blur,\n        blurMode,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        slotProps\n    }] = useInterface<any>(\"Layer\", props, {})\n\n    const _p: any = {}\n    if (blur) _p.blur = blur\n    if (blurMode) _p.blurMode = blurMode\n    const p: any = useBreakpointProps(_p)\n\n    blur = p.blur\n    blurMode = p.blurMode\n\n    const [closed, setClosed] = useState(!open)\n    placement = placement || \"bottom-left\"\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n    useEffect(() => {\n        if (closed && open) {\n            setClosed(false)\n        }\n    }, [open])\n\n    if (closed) return <></>\n    let duration = slotProps?.transition?.duration || 300\n    let delay = slotProps?.transition?.delay || 0\n\n    let content = <Transition\n        duration={duration}\n        delay={delay}\n        easing=\"standard\"\n        variant={transition || \"zoomOver\"}\n        {...slotProps?.transition}\n        open={open}\n        onOpen={onOpen}\n        onOpened={onOpened}\n        onClose={onClose}\n        onClosed={() => {\n            setClosed(true)\n            onClosed && onClosed()\n        }}\n    >\n        {children}\n    </Transition>\n\n    return (\n        <Transition\n            duration={duration}\n            delay={delay}\n            easing=\"smooth\"\n            variant={\"fade\"}\n            open={open}\n        >\n            <Tag\n                baseClass=\"layer\"\n                {...slotProps?.root}\n                sxr={{\n                    ...slotProps?.root?.sx,\n                    position: \"fixed\",\n                    zIndex: 1500 + (zIndex || 0),\n                    top: 0,\n                    left: 0,\n                    bottom: 0,\n                    right: 0,\n                    width: \"100%\",\n                    height: \"100%\",\n                    ...blurCss\n                }}\n            >\n                {\n                    onClickOutside ? <ClickOutside\n                        {...slotProps?.clickOutside}\n                        onClickOutside={onClickOutside || (() => { })}\n                    >\n                        {content}\n                    </ClickOutside> : content\n                }\n            </Tag>\n        </Transition>\n    )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n    const l = Renderar.render(Layer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            Renderar.unrender(Layer as any)\n            if (props?.onClosed) {\n                props.onClosed()\n            }\n        }\n    })\n    return {\n        open: () => {\n            l.updateProps({ open: true })\n        },\n        close: () => {\n            l.updateProps({ open: false })\n        },\n    }\n}\nLayer.close = () => {\n    Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":["__rest","useInterface","useBreakpointProps","useState","useBlurCss","useEffect","_jsx","Transition","Tag","ClickOutside","Renderar"],"mappings":"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"}

package/Layer/index.mjs

@@ -22,10 +22,11 @@ import {__rest}from'tslib';import {jsx,Fragment}from'react/jsx-runtime';import {
         return jsx(Fragment, {});
     let duration = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _b === void 0 ? void 0 : _b.duration) || 300;
     let delay = ((_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _c === void 0 ? void 0 : _c.delay) || 0;
-    return (jsx(Transition, { duration: duration, delay: delay, easing: "easeOut", variant: "fade", open: open, children: jsx(Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { sxr: Object.assign(Object.assign(Object.assign({}, (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0 }), blurCss), children: jsx(ClickOutside, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: jsx(Transition, Object.assign({ duration: duration, delay: delay, easing: "easeOut", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
-                        setClosed(true);
-                        onClosed && onClosed();
-                    }, children: children })) })) })) }));
+    let content = jsx(Transition, Object.assign({ duration: duration, delay: delay, easing: "standard", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
+            setClosed(true);
+            onClosed && onClosed();
+        }, children: children }));
+    return (jsx(Transition, { duration: duration, delay: delay, easing: "smooth", variant: "fade", open: open, children: jsx(Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { sxr: Object.assign(Object.assign(Object.assign({}, (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0, width: "100%", height: "100%" }), blurCss), children: onClickOutside ? jsx(ClickOutside, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: content })) : content })) }));
 };
 Layer.open = (children, props) => {
     const l = Renderar.render(Layer, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {

package/Layer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n    open: boolean;\n    children: ReactNode;\n    transition?: TransitionProps['variant'];\n    zIndex?: number;\n    blur?: useBreakpointPropsType<number>\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n    onClickOutside?: () => void;\n    onOpen?: Function;\n    onOpened?: Function;\n    onClose?: Function;\n    onClosed?: Function;\n    slotProps?: {\n        root?: Omit<TagProps<\"div\">, \"children\">;\n        transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\">;\n    }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n    let [{\n        onClickOutside,\n        placement,\n        transition,\n        zIndex,\n        blur,\n        blurMode,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        slotProps\n    }] = useInterface<any>(\"Layer\", props, {})\n\n    const _p: any = {}\n    if (blur) _p.blur = blur\n    if (blurMode) _p.blurMode = blurMode\n    const p: any = useBreakpointProps(_p)\n\n    blur = p.blur\n    blurMode = p.blurMode\n\n    const [closed, setClosed] = useState(!open)\n    placement = placement || \"bottom-left\"\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n    useEffect(() => {\n        if (closed && open) {\n            setClosed(false)\n        }\n    }, [open])\n\n    if (closed) return <></>\n    let duration = slotProps?.transition?.duration || 300\n    let delay = slotProps?.transition?.delay || 0\n\n    return (\n        <Transition\n            duration={duration}\n            delay={delay}\n            easing=\"easeOut\"\n            variant={\"fade\"}\n            open={open}\n        >\n            <Tag\n                baseClass=\"layer\"\n                {...slotProps?.root}\n                sxr={{\n                    ...slotProps?.root?.sx,\n                    position: \"fixed\",\n                    zIndex: 1500 + (zIndex || 0),\n                    top: 0,\n                    left: 0,\n                    bottom: 0,\n                    right: 0,\n                    ...blurCss\n                }}\n            >\n                <ClickOutside\n                    {...slotProps?.clickOutside}\n                    onClickOutside={onClickOutside || (() => { })}\n                >\n                    <Transition\n                        duration={duration}\n                        delay={delay}\n                        easing=\"easeOut\"\n                        variant={transition || \"zoomOver\"}\n                        {...slotProps?.transition}\n                        open={open}\n                        onOpen={onOpen}\n                        onOpened={onOpened}\n                        onClose={onClose}\n                        onClosed={() => {\n                            setClosed(true)\n                            onClosed && onClosed()\n                        }}\n                    >\n                        {children}\n                    </Transition>\n                </ClickOutside>\n            </Tag>\n        </Transition>\n    )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n    const l = Renderar.render(Layer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            Renderar.unrender(Layer as any)\n            if (props?.onClosed) {\n                props.onClosed()\n            }\n        }\n    })\n    return {\n        open: () => {\n            l.updateProps({ open: true })\n        },\n        close: () => {\n            l.updateProps({ open: false })\n        },\n    }\n}\nLayer.close = () => {\n    Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n    open: boolean;\n    children: ReactNode;\n    transition?: TransitionProps['variant'];\n    zIndex?: number;\n    blur?: useBreakpointPropsType<number>\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n    onClickOutside?: () => void;\n    onOpen?: Function;\n    onOpened?: Function;\n    onClose?: Function;\n    onClosed?: Function;\n    slotProps?: {\n        root?: Omit<TagProps<\"div\">, \"children\">;\n        transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\">;\n    }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n    let [{\n        onClickOutside,\n        placement,\n        transition,\n        zIndex,\n        blur,\n        blurMode,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        slotProps\n    }] = useInterface<any>(\"Layer\", props, {})\n\n    const _p: any = {}\n    if (blur) _p.blur = blur\n    if (blurMode) _p.blurMode = blurMode\n    const p: any = useBreakpointProps(_p)\n\n    blur = p.blur\n    blurMode = p.blurMode\n\n    const [closed, setClosed] = useState(!open)\n    placement = placement || \"bottom-left\"\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n    useEffect(() => {\n        if (closed && open) {\n            setClosed(false)\n        }\n    }, [open])\n\n    if (closed) return <></>\n    let duration = slotProps?.transition?.duration || 300\n    let delay = slotProps?.transition?.delay || 0\n\n    let content = <Transition\n        duration={duration}\n        delay={delay}\n        easing=\"standard\"\n        variant={transition || \"zoomOver\"}\n        {...slotProps?.transition}\n        open={open}\n        onOpen={onOpen}\n        onOpened={onOpened}\n        onClose={onClose}\n        onClosed={() => {\n            setClosed(true)\n            onClosed && onClosed()\n        }}\n    >\n        {children}\n    </Transition>\n\n    return (\n        <Transition\n            duration={duration}\n            delay={delay}\n            easing=\"smooth\"\n            variant={\"fade\"}\n            open={open}\n        >\n            <Tag\n                baseClass=\"layer\"\n                {...slotProps?.root}\n                sxr={{\n                    ...slotProps?.root?.sx,\n                    position: \"fixed\",\n                    zIndex: 1500 + (zIndex || 0),\n                    top: 0,\n                    left: 0,\n                    bottom: 0,\n                    right: 0,\n                    width: \"100%\",\n                    height: \"100%\",\n                    ...blurCss\n                }}\n            >\n                {\n                    onClickOutside ? <ClickOutside\n                        {...slotProps?.clickOutside}\n                        onClickOutside={onClickOutside || (() => { })}\n                    >\n                        {content}\n                    </ClickOutside> : content\n                }\n            </Tag>\n        </Transition>\n    )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n    const l = Renderar.render(Layer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            Renderar.unrender(Layer as any)\n            if (props?.onClosed) {\n                props.onClosed()\n            }\n        }\n    })\n    return {\n        open: () => {\n            l.updateProps({ open: true })\n        },\n        close: () => {\n            l.updateProps({ open: false })\n        },\n    }\n}\nLayer.close = () => {\n    Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":["_jsx"],"mappings":"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"}

package/Menu/index.d.ts

@@ -1,22 +1,22 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { useBreakpointPropsType, TransitionProps, TagProps } from '@xanui/core';
-import { PlacementTypes } from './placedMenu.js';
 import { PortalProps } from '../Portal/index.js';
 
+type PlacementTypes = "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "right" | "right-top" | "right-bottom" | "left" | "left-top" | "left-bottom";
 type MenuProps = {
     children?: ReactNode;
     target?: HTMLElement;
     placement?: useBreakpointPropsType<PlacementTypes>;
     zIndex?: number;
-    onClickOutside?: () => void;
+    onClickOutside?: (e: MouseEvent) => void;
     slotProps?: {
         transition?: Omit<TransitionProps, "open">;
         portal?: Omit<PortalProps, "children">;
         content?: Omit<TagProps<"div">, "children">;
     };
 };
-declare const Menu: ({ children, target, ...props }: MenuProps) => react_jsx_runtime.JSX.Element;
+declare const Menu: ({ children, target, ...props }: MenuProps) => react_jsx_runtime.JSX.Element | null;
 
 export { Menu as default };
-export type { MenuProps };
+export type { MenuProps, PlacementTypes };

package/Menu/index.js

@@ -1,4 +1,89 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),placedMenu=require('./placedMenu.js'),index=require('../Portal/index.js'),getOrigin=require('./getOrigin.js'),index$1=require('../ClickOutside/index.js');const Menu = (_a) => {
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),index=require('../Portal/index.js'),index$1=require('../ClickOutside/index.js');const placements = [
+    "top",
+    "top-left",
+    "top-right",
+    "bottom",
+    "bottom-left",
+    "bottom-right",
+    "right",
+    "right-top",
+    "right-bottom",
+    "left",
+    "left-top",
+    "left-bottom",
+];
+const getTransformOrigin = (placement) => {
+    switch (placement) {
+        case "top":
+            return "bottom";
+        case "top-left":
+            return "bottom left";
+        case "top-right":
+            return "bottom right";
+        case "bottom":
+            return "top";
+        case "bottom-left":
+            return "top left";
+        case "bottom-right":
+            return "top right";
+        case "left":
+            return "right";
+        case "left-top":
+            return "top right";
+        case "left-bottom":
+            return "bottom right";
+        case "right":
+            return "left";
+        case "right-top":
+            return "top left";
+        case "right-bottom":
+            return "bottom left";
+        default:
+            return "top";
+    }
+};
+// Compute coordinates for each placement
+const computePosition = (placement, menu, target) => {
+    const { width: mw, height: mh } = menu.getBoundingClientRect();
+    const { top: tt, left: tl, bottom: tb, right: tr, width: tw, height: th, } = target.getBoundingClientRect();
+    const positions = {
+        "bottom-left": { top: tb, left: tl },
+        "bottom-right": { top: tb, left: tr - mw },
+        bottom: { top: tb, left: tl + (tw - mw) / 2 },
+        "top-left": { top: tt - mh, left: tl },
+        "top-right": { top: tt - mh, left: tr - mw },
+        top: { top: tt - mh, left: tl + (tw - mw) / 2 },
+        left: { top: tt + (th - mh) / 2, left: tl - mw },
+        "left-top": { top: tt, left: tl - mw },
+        "left-bottom": { top: tb - mh, left: tl - mw },
+        right: { top: tt + (th - mh) / 2, left: tr },
+        "right-top": { top: tt, left: tr },
+        "right-bottom": { top: tb - mh, left: tr },
+    };
+    return positions[placement];
+};
+// Check if menu is off-screen
+const isOffScreen = (menu) => {
+    const { x, y, width, height } = menu.getBoundingClientRect();
+    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;
+};
+// Try to place menu and fallback if off-screen
+const placeMenu = (placement, menu, target) => {
+    let pos = computePosition(placement, menu, target);
+    menu.style.top = pos.top + "px";
+    menu.style.left = pos.left + "px";
+    if (isOffScreen(menu)) {
+        for (const p of placements) {
+            const fallbackPos = computePosition(p, menu, target);
+            menu.style.top = fallbackPos.top + "px";
+            menu.style.left = fallbackPos.left + "px";
+            if (!isOffScreen(menu))
+                return p;
+        }
+    }
+    return placement;
+};
+const Menu = (_a) => {
     var _b;
     var { children, target } = _a, props = tslib.__rest(_a, ["children", "target"]);
     let [{ onClickOutside, placement, zIndex, slotProps }] = core.useInterface("Menu", props, {});
@@ -6,42 +91,43 @@
     if (placement)
         _p.placement = placement;
     const p = core.useBreakpointProps(_p);
-    placement = p.placement;
+    placement = p.placement || "bottom-left";
     const isOpen = Boolean(target);
     const [closed, setClosed] = React.useState(!isOpen);
-    let id = "menu-" + React.useId().replace(":", "");
     const [placed, setPlaced] = React.useState(placement);
-    placement = placement || "bottom-left";
+    const menuRef = React.useRef(null);
+    // Open/close effect
     React.useEffect(() => {
-        if (closed && isOpen) {
+        if (closed && isOpen)
             setClosed(false);
-        }
     }, [isOpen]);
     React.useEffect(() => {
-        if (!closed) {
-            setTimeout(() => {
-                const ele = document.getElementById(id);
-                if (target && ele) {
-                    let p = placedMenu.placedMenu({
-                        place: placement,
-                        menu: ele,
-                        target
-                    });
+        if (!closed && target && menuRef.current) {
+            const updatePosition = () => {
+                if (menuRef.current && target) {
+                    const p = placeMenu(placement, menuRef.current, target);
                     setPlaced(p);
                 }
-            }, 1);
+            };
+            updatePosition();
+            window.addEventListener("resize", updatePosition);
+            window.addEventListener("scroll", updatePosition, true);
+            return () => {
+                window.removeEventListener("resize", updatePosition);
+                window.removeEventListener("scroll", updatePosition, true);
+            };
         }
-    }, [closed]);
+        return undefined;
+    }, [closed, target, placement]);
     if (closed)
-        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    return (jsxRuntime.jsx(index.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsxRuntime.jsx(index$1.default, { onClickOutside: () => {
-                onClickOutside && onClickOutside();
-            }, children: jsxRuntime.jsx(core.Tag, { baseClass: "menu", id: id, sx: {
-                    position: "fixed",
-                    zIndex: 1500 + (zIndex || 0)
-                }, children: jsxRuntime.jsx(core.Transition, Object.assign({ duration: 200, easing: "easeInOut", variant: "grow" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: isOpen, onClosed: () => {
-                        var _a, _b;
-                        setClosed(true);
-                        ((_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _a === void 0 ? void 0 : _a.onClosed) && ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _b === void 0 ? void 0 : _b.onClosed());
-                    }, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: 'menu-content' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: Object.assign({ overflow: "hidden", bgcolor: "background.primary", shadow: 10, radius: 1, transformOrigin: getOrigin.getOrigin(placed) || "top" }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.content) === null || _b === void 0 ? void 0 : _b.sx), children: children })) })) }) }) })));
+        return null;
+    return (jsxRuntime.jsx(index.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsxRuntime.jsx(index$1.default, { onClickOutside: (e) => {
+                if (e.target !== target) {
+                    onClickOutside && onClickOutside(e);
+                }
+            }, ref: menuRef, sx: { position: "fixed", zIndex: 1500 + (zIndex || 0) }, children: jsxRuntime.jsx(core.Transition, Object.assign({ duration: 200, easing: "fast", variant: "grow" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: isOpen, onClosed: () => {
+                    var _a, _b;
+                    setClosed(true);
+                    (_b = (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _a === void 0 ? void 0 : _a.onClosed) === null || _b === void 0 ? void 0 : _b.call(_a);
+                }, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "menu-content" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: Object.assign({ overflow: "hidden", bgcolor: "background.primary", shadow: 2, radius: 1, transformOrigin: getTransformOrigin(placed) }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.content) === null || _b === void 0 ? void 0 : _b.sx), children: children })) })) }) })));
 };exports.default=Menu;//# sourceMappingURL=index.js.map