@xanui/ui 1.1.13 → 1.1.15

package/useBlurCss/index.js

@@ -1,4 +1,9 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var React=require('react'),core=require('@xanui/core');let _d;
+'use strict';
+
+var React = require('react');
+var core = require('@xanui/core');
+
+let _d;
 const useBlurCss = (blur, mode) => {
     return React.useMemo(() => {
         let transparent = { bgcolor: core.alpha("#000000", blur / 100) };
@@ -8,4 +13,7 @@ const useBlurCss = (blur, mode) => {
         const d = _d || (_d = window.document.createElement("div").style);
         return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent;
     }, [blur]);
-};exports.default=useBlurCss;//# sourceMappingURL=index.js.map
+};
+
+module.exports = useBlurCss;
+//# sourceMappingURL=index.js.map

package/useBlurCss/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["import { useMemo } from \"react\"\nimport { alpha } from \"@xanui/core\";\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\n   return useMemo(() => {\n      let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\n      if (typeof window === 'undefined' || mode === 'transparent') {\n         return transparent\n      }\n      const d = _d || (_d = window.document.createElement(\"div\").style)\n      return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n   }, [blur])\n}\n\n\nexport default useBlurCss"],"names":["useMemo","alpha"],"mappings":"6HAGA,IAAI,EAAuB;AAE3B,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,IAA6B,KAAI;IAChE,OAAOA,aAAO,CAAC,MAAK;AACjB,QAAA,IAAI,WAAW,GAAG,EAAE,OAAO,EAAEC,UAAK,CAAC,SAAS,EAAE,IAAI,GAAG,GAAG,CAAC,EAAE;QAC3D,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,IAAI,KAAK,aAAa,EAAE;AAC1D,YAAA,OAAO,WAAW;QACrB;AACA,QAAA,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACjE,OAAO,CAAC,CAAC,gBAAgB,CAAC,KAAK,SAAS,GAAG,EAAE,cAAc,EAAE,CAAA,KAAA,EAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,EAAE,CAAA,GAAA,CAAK,EAAE,GAAG,WAAW;AAC9G,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACb"}
+{"version":3,"file":"index.js","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["import { useMemo } from \"react\"\r\nimport { alpha } from \"@xanui/core\";\r\n\r\nlet _d: CSSStyleDeclaration;\r\n\r\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\r\n   return useMemo(() => {\r\n      let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\r\n      if (typeof window === 'undefined' || mode === 'transparent') {\r\n         return transparent\r\n      }\r\n      const d = _d || (_d = window.document.createElement(\"div\").style)\r\n      return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\r\n   }, [blur])\r\n}\r\n\r\n\r\nexport default useBlurCss"],"names":["useMemo","alpha"],"mappings":";;;;;AAGA,IAAI,EAAuB;AAE3B,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,IAA6B,KAAI;IAChE,OAAOA,aAAO,CAAC,MAAK;AACjB,QAAA,IAAI,WAAW,GAAG,EAAE,OAAO,EAAEC,UAAK,CAAC,SAAS,EAAE,IAAI,GAAG,GAAG,CAAC,EAAE;QAC3D,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,IAAI,KAAK,aAAa,EAAE;AAC1D,YAAA,OAAO,WAAW;QACrB;AACA,QAAA,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACjE,OAAO,CAAC,CAAC,gBAAgB,CAAC,KAAK,SAAS,GAAG,EAAE,cAAc,EAAE,CAAA,KAAA,EAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,EAAE,CAAA,GAAA,CAAK,EAAE,GAAG,WAAW;AAC9G,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACb;;;;"}

package/useBlurCss/index.mjs

@@ -1,4 +1,7 @@
-import {useMemo}from'react';import {alpha}from'@xanui/core';let _d;
+import { useMemo } from 'react';
+import { alpha } from '@xanui/core';
+
+let _d;
 const useBlurCss = (blur, mode) => {
     return useMemo(() => {
         let transparent = { bgcolor: alpha("#000000", blur / 100) };
@@ -8,4 +11,7 @@ const useBlurCss = (blur, mode) => {
         const d = _d || (_d = window.document.createElement("div").style);
         return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent;
     }, [blur]);
-};export{useBlurCss as default};//# sourceMappingURL=index.mjs.map
+};
+
+export { useBlurCss as default };
+//# sourceMappingURL=index.mjs.map

package/useBlurCss/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["import { useMemo } from \"react\"\nimport { alpha } from \"@xanui/core\";\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\n   return useMemo(() => {\n      let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\n      if (typeof window === 'undefined' || mode === 'transparent') {\n         return transparent\n      }\n      const d = _d || (_d = window.document.createElement(\"div\").style)\n      return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n   }, [blur])\n}\n\n\nexport default useBlurCss"],"names":[],"mappings":"4DAGA,IAAI,EAAuB;AAE3B,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,IAA6B,KAAI;IAChE,OAAO,OAAO,CAAC,MAAK;AACjB,QAAA,IAAI,WAAW,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,GAAG,GAAG,CAAC,EAAE;QAC3D,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,IAAI,KAAK,aAAa,EAAE;AAC1D,YAAA,OAAO,WAAW;QACrB;AACA,QAAA,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACjE,OAAO,CAAC,CAAC,gBAAgB,CAAC,KAAK,SAAS,GAAG,EAAE,cAAc,EAAE,CAAA,KAAA,EAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,EAAE,CAAA,GAAA,CAAK,EAAE,GAAG,WAAW;AAC9G,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACb"}
+{"version":3,"file":"index.mjs","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["import { useMemo } from \"react\"\r\nimport { alpha } from \"@xanui/core\";\r\n\r\nlet _d: CSSStyleDeclaration;\r\n\r\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\r\n   return useMemo(() => {\r\n      let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\r\n      if (typeof window === 'undefined' || mode === 'transparent') {\r\n         return transparent\r\n      }\r\n      const d = _d || (_d = window.document.createElement(\"div\").style)\r\n      return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\r\n   }, [blur])\r\n}\r\n\r\n\r\nexport default useBlurCss"],"names":[],"mappings":";;;AAGA,IAAI,EAAuB;AAE3B,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,IAA6B,KAAI;IAChE,OAAO,OAAO,CAAC,MAAK;AACjB,QAAA,IAAI,WAAW,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,GAAG,GAAG,CAAC,EAAE;QAC3D,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,IAAI,KAAK,aAAa,EAAE;AAC1D,YAAA,OAAO,WAAW;QACrB;AACA,QAAA,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACjE,OAAO,CAAC,CAAC,gBAAgB,CAAC,KAAK,SAAS,GAAG,EAAE,cAAc,EAAE,CAAA,KAAA,EAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,EAAE,CAAA,GAAA,CAAK,EAAE,GAAG,WAAW;AAC9G,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACb;;;;"}

package/useCorner/index.js

@@ -1,4 +1,6 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});const useCorner = (type) => {
+'use strict';
+
+const useCorner = (type) => {
     switch (type) {
         case 'square':
             return {
@@ -14,4 +16,7 @@
             };
     }
     return {};
-};exports.default=useCorner;//# sourceMappingURL=index.js.map
+};
+
+module.exports = useCorner;
+//# sourceMappingURL=index.js.map

package/useCorner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/useCorner/index.ts"],"sourcesContent":["\nexport type UseCornerTypes = \"square\" | \"rounded\" | \"circle\"\nconst useCorner = (type?: UseCornerTypes): object => {\n    switch (type) {\n        case 'square':\n            return {\n                radius: 0\n            }\n        case 'rounded':\n            return {\n                radius: 1\n            }\n        case 'circle':\n            return {\n                radius: 100\n            }\n    }\n    return {}\n}\n\nexport default useCorner"],"names":[],"mappings":"sEAEA,MAAM,SAAS,GAAG,CAAC,IAAqB,KAAY;IAChD,QAAQ,IAAI;AACR,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,SAAS;YACV,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;;AAET,IAAA,OAAO,EAAE;AACb"}
+{"version":3,"file":"index.js","sources":["../../src/useCorner/index.ts"],"sourcesContent":["\r\nexport type UseCornerTypes = \"square\" | \"rounded\" | \"circle\"\r\nconst useCorner = (type?: UseCornerTypes): object => {\r\n    switch (type) {\r\n        case 'square':\r\n            return {\r\n                radius: 0\r\n            }\r\n        case 'rounded':\r\n            return {\r\n                radius: 1\r\n            }\r\n        case 'circle':\r\n            return {\r\n                radius: 100\r\n            }\r\n    }\r\n    return {}\r\n}\r\n\r\nexport default useCorner"],"names":[],"mappings":";;AAEA,MAAM,SAAS,GAAG,CAAC,IAAqB,KAAY;IAChD,QAAQ,IAAI;AACR,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,SAAS;YACV,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;;AAET,IAAA,OAAO,EAAE;AACb;;;;"}

package/useCorner/index.mjs

@@ -14,4 +14,7 @@ const useCorner = (type) => {
             };
     }
     return {};
-};export{useCorner as default};//# sourceMappingURL=index.mjs.map
+};
+
+export { useCorner as default };
+//# sourceMappingURL=index.mjs.map

package/useCorner/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/useCorner/index.ts"],"sourcesContent":["\nexport type UseCornerTypes = \"square\" | \"rounded\" | \"circle\"\nconst useCorner = (type?: UseCornerTypes): object => {\n    switch (type) {\n        case 'square':\n            return {\n                radius: 0\n            }\n        case 'rounded':\n            return {\n                radius: 1\n            }\n        case 'circle':\n            return {\n                radius: 100\n            }\n    }\n    return {}\n}\n\nexport default useCorner"],"names":[],"mappings":"AAEA,MAAM,SAAS,GAAG,CAAC,IAAqB,KAAY;IAChD,QAAQ,IAAI;AACR,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,SAAS;YACV,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;;AAET,IAAA,OAAO,EAAE;AACb"}
+{"version":3,"file":"index.mjs","sources":["../../src/useCorner/index.ts"],"sourcesContent":["\r\nexport type UseCornerTypes = \"square\" | \"rounded\" | \"circle\"\r\nconst useCorner = (type?: UseCornerTypes): object => {\r\n    switch (type) {\r\n        case 'square':\r\n            return {\r\n                radius: 0\r\n            }\r\n        case 'rounded':\r\n            return {\r\n                radius: 1\r\n            }\r\n        case 'circle':\r\n            return {\r\n                radius: 100\r\n            }\r\n    }\r\n    return {}\r\n}\r\n\r\nexport default useCorner"],"names":[],"mappings":"AAEA,MAAM,SAAS,GAAG,CAAC,IAAqB,KAAY;IAChD,QAAQ,IAAI;AACR,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,SAAS;YACV,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;;AAET,IAAA,OAAO,EAAE;AACb;;;;"}

package/useLayer/index.js

@@ -1,8 +1,16 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),React=require('react'),index=require('../Layer/index.js');const useLayer = (children, props) => {
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@xanui/core');
+var React = require('react');
+var index = require('../Layer/index.js');
+
+const useLayer = (children, props) => {
     var _a;
     const [open, setOpen] = React.useState(false);
     const portalProps = ((_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.portal) || {};
-    const portal = core.usePortal(jsxRuntime.jsx(index.default, Object.assign({ blur: 20 }, props, { open: open, onClosed: () => {
+    const portal = core.usePortal(jsxRuntime.jsx(index, Object.assign({ blur: 20 }, props, { open: open, onClosed: () => {
             portal.unmount();
             if (props === null || props === void 0 ? void 0 : props.onClosed) {
                 props.onClosed();
@@ -24,4 +32,7 @@
             setOpen(false);
         },
     };
-};exports.default=useLayer;//# sourceMappingURL=index.js.map
+};
+
+module.exports = useLayer;
+//# sourceMappingURL=index.js.map

package/useLayer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["import { usePortal } from \"@xanui/core\"\nimport { useState } from \"react\"\nimport Layer, { LayerProps } from \"../Layer\"\nimport { UsePortalOptions } from \"@xanui/core/hooks/usePortal\"\n\nexport type UseLayerProps = Omit<LayerProps, \"open\" | \"children\" | \"slotProps\"> & {\n   slotProps?: LayerProps[\"slotProps\"] & {\n      portal?: UsePortalOptions\n   }\n}\n\nexport type UseLayerReturn = {\n   open: () => void;\n   close: () => void;\n}\n\nexport type UseLayerChildren = React.ReactElement | ((props: UseLayerReturn) => React.ReactElement)\n\nconst useLayer = (children: UseLayerChildren, props?: UseLayerProps): UseLayerReturn => {\n   const [open, setOpen] = useState(false)\n   const portalProps = props?.slotProps?.portal || {}\n   const portal = usePortal(<Layer\n      blur={20}\n      {...props}\n      open={open}\n      onClosed={() => {\n         portal.unmount()\n         if (props?.onClosed) {\n            props.onClosed()\n         }\n      }}\n      onClickOutside={() => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         } else {\n            setOpen(false)\n         }\n      }}\n   >\n      {typeof children === \"function\" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children}\n   </Layer>, portalProps)\n\n   return {\n      open: () => {\n         portal.mount()\n         setOpen(true)\n      },\n      close: () => {\n         setOpen(false)\n      },\n   }\n}\n\nexport default useLayer"],"names":["useState","usePortal","_jsx","Layer"],"mappings":"wMAkBA,MAAM,QAAQ,GAAG,CAAC,QAA0B,EAAE,KAAqB,KAAoB;;IACpF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AACvC,IAAA,MAAM,WAAW,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,KAAI,EAAE;IAClD,MAAM,MAAM,GAAGC,cAAS,CAACC,eAACC,aAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAC5B,IAAI,EAAE,EAAE,IACJ,KAAK,EAAA,EACT,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,MAAK;YACZ,MAAM,CAAC,OAAO,EAAE;YAChB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,QAAQ,EAAE;gBAClB,KAAK,CAAC,QAAQ,EAAE;YACnB;AACH,QAAA,CAAC,EACD,cAAc,EAAE,MAAK;YAClB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,cAAc,EAAE;gBACxB,KAAK,CAAC,cAAc,EAAE;YACzB;iBAAO;gBACJ,OAAO,CAAC,KAAK,CAAC;YACjB;AACH,QAAA,CAAC,YAEA,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,QAAQ,IAC5G,EAAE,WAAW,CAAC;IAEtB,OAAO;QACJ,IAAI,EAAE,MAAK;YACR,MAAM,CAAC,KAAK,EAAE;YACd,OAAO,CAAC,IAAI,CAAC;QAChB,CAAC;QACD,KAAK,EAAE,MAAK;YACT,OAAO,CAAC,KAAK,CAAC;QACjB,CAAC;KACH;AACJ"}
+{"version":3,"file":"index.js","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { usePortal } from \"@xanui/core\"\r\nimport { useState } from \"react\"\r\nimport Layer, { LayerProps } from \"../Layer\"\r\nimport { UsePortalOptions } from \"@xanui/core/hooks/usePortal\"\r\n\r\nexport type UseLayerProps = Omit<LayerProps, \"open\" | \"children\" | \"slotProps\"> & {\r\n   slotProps?: LayerProps[\"slotProps\"] & {\r\n      portal?: UsePortalOptions\r\n   }\r\n}\r\n\r\nexport type UseLayerReturn = {\r\n   open: () => void;\r\n   close: () => void;\r\n}\r\n\r\nexport type UseLayerChildren = React.ReactElement | ((props: UseLayerReturn) => React.ReactElement)\r\n\r\nconst useLayer = (children: UseLayerChildren, props?: UseLayerProps): UseLayerReturn => {\r\n   const [open, setOpen] = useState(false)\r\n   const portalProps = props?.slotProps?.portal || {}\r\n   const portal = usePortal(<Layer\r\n      blur={20}\r\n      {...props}\r\n      open={open}\r\n      onClosed={() => {\r\n         portal.unmount()\r\n         if (props?.onClosed) {\r\n            props.onClosed()\r\n         }\r\n      }}\r\n      onClickOutside={() => {\r\n         if (props?.onClickOutside) {\r\n            props.onClickOutside()\r\n         } else {\r\n            setOpen(false)\r\n         }\r\n      }}\r\n   >\r\n      {typeof children === \"function\" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children}\r\n   </Layer>, portalProps)\r\n\r\n   return {\r\n      open: () => {\r\n         portal.mount()\r\n         setOpen(true)\r\n      },\r\n      close: () => {\r\n         setOpen(false)\r\n      },\r\n   }\r\n}\r\n\r\nexport default useLayer"],"names":[],"mappings":";;;;;;;;AAoBA;;;AAEG;;;;;;AAUG;;;;;;;AAOA;;;;;;;;;;AAcN;;"}

package/useLayer/index.mjs

@@ -1,4 +1,10 @@
-import {jsx}from'react/jsx-runtime';import {usePortal}from'@xanui/core';import {useState}from'react';import Layer from'../Layer/index.mjs';const useLayer = (children, props) => {
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { usePortal } from '@xanui/core';
+import { useState } from 'react';
+import Layer from '../Layer/index.mjs';
+
+const useLayer = (children, props) => {
     var _a;
     const [open, setOpen] = useState(false);
     const portalProps = ((_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.portal) || {};
@@ -24,4 +30,7 @@ import {jsx}from'react/jsx-runtime';import {usePortal}from'@xanui/core';import {
             setOpen(false);
         },
     };
-};export{useLayer as default};//# sourceMappingURL=index.mjs.map
+};
+
+export { useLayer as default };
+//# sourceMappingURL=index.mjs.map

package/useLayer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["import { usePortal } from \"@xanui/core\"\nimport { useState } from \"react\"\nimport Layer, { LayerProps } from \"../Layer\"\nimport { UsePortalOptions } from \"@xanui/core/hooks/usePortal\"\n\nexport type UseLayerProps = Omit<LayerProps, \"open\" | \"children\" | \"slotProps\"> & {\n   slotProps?: LayerProps[\"slotProps\"] & {\n      portal?: UsePortalOptions\n   }\n}\n\nexport type UseLayerReturn = {\n   open: () => void;\n   close: () => void;\n}\n\nexport type UseLayerChildren = React.ReactElement | ((props: UseLayerReturn) => React.ReactElement)\n\nconst useLayer = (children: UseLayerChildren, props?: UseLayerProps): UseLayerReturn => {\n   const [open, setOpen] = useState(false)\n   const portalProps = props?.slotProps?.portal || {}\n   const portal = usePortal(<Layer\n      blur={20}\n      {...props}\n      open={open}\n      onClosed={() => {\n         portal.unmount()\n         if (props?.onClosed) {\n            props.onClosed()\n         }\n      }}\n      onClickOutside={() => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         } else {\n            setOpen(false)\n         }\n      }}\n   >\n      {typeof children === \"function\" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children}\n   </Layer>, portalProps)\n\n   return {\n      open: () => {\n         portal.mount()\n         setOpen(true)\n      },\n      close: () => {\n         setOpen(false)\n      },\n   }\n}\n\nexport default useLayer"],"names":["_jsx"],"mappings":"2IAkBA,MAAM,QAAQ,GAAG,CAAC,QAA0B,EAAE,KAAqB,KAAoB;;IACpF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACvC,IAAA,MAAM,WAAW,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,KAAI,EAAE;IAClD,MAAM,MAAM,GAAG,SAAS,CAACA,IAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAC5B,IAAI,EAAE,EAAE,IACJ,KAAK,EAAA,EACT,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,MAAK;YACZ,MAAM,CAAC,OAAO,EAAE;YAChB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,QAAQ,EAAE;gBAClB,KAAK,CAAC,QAAQ,EAAE;YACnB;AACH,QAAA,CAAC,EACD,cAAc,EAAE,MAAK;YAClB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,cAAc,EAAE;gBACxB,KAAK,CAAC,cAAc,EAAE;YACzB;iBAAO;gBACJ,OAAO,CAAC,KAAK,CAAC;YACjB;AACH,QAAA,CAAC,YAEA,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,QAAQ,IAC5G,EAAE,WAAW,CAAC;IAEtB,OAAO;QACJ,IAAI,EAAE,MAAK;YACR,MAAM,CAAC,KAAK,EAAE;YACd,OAAO,CAAC,IAAI,CAAC;QAChB,CAAC;QACD,KAAK,EAAE,MAAK;YACT,OAAO,CAAC,KAAK,CAAC;QACjB,CAAC;KACH;AACJ"}
+{"version":3,"file":"index.mjs","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { usePortal } from \"@xanui/core\"\r\nimport { useState } from \"react\"\r\nimport Layer, { LayerProps } from \"../Layer\"\r\nimport { UsePortalOptions } from \"@xanui/core/hooks/usePortal\"\r\n\r\nexport type UseLayerProps = Omit<LayerProps, \"open\" | \"children\" | \"slotProps\"> & {\r\n   slotProps?: LayerProps[\"slotProps\"] & {\r\n      portal?: UsePortalOptions\r\n   }\r\n}\r\n\r\nexport type UseLayerReturn = {\r\n   open: () => void;\r\n   close: () => void;\r\n}\r\n\r\nexport type UseLayerChildren = React.ReactElement | ((props: UseLayerReturn) => React.ReactElement)\r\n\r\nconst useLayer = (children: UseLayerChildren, props?: UseLayerProps): UseLayerReturn => {\r\n   const [open, setOpen] = useState(false)\r\n   const portalProps = props?.slotProps?.portal || {}\r\n   const portal = usePortal(<Layer\r\n      blur={20}\r\n      {...props}\r\n      open={open}\r\n      onClosed={() => {\r\n         portal.unmount()\r\n         if (props?.onClosed) {\r\n            props.onClosed()\r\n         }\r\n      }}\r\n      onClickOutside={() => {\r\n         if (props?.onClickOutside) {\r\n            props.onClickOutside()\r\n         } else {\r\n            setOpen(false)\r\n         }\r\n      }}\r\n   >\r\n      {typeof children === \"function\" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children}\r\n   </Layer>, portalProps)\r\n\r\n   return {\r\n      open: () => {\r\n         portal.mount()\r\n         setOpen(true)\r\n      },\r\n      close: () => {\r\n         setOpen(false)\r\n      },\r\n   }\r\n}\r\n\r\nexport default useLayer"],"names":[],"mappings":";;;;;;AAoBA;;;AAEG;;;;;;AAUG;;;;;;;AAOA;;;;;;;;;;AAcN;;"}

package/useModal/index.js

@@ -1,4 +1,12 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),index=require('../useLayer/index.js'),core=require('@xanui/core');const useModal = (children, props) => {
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../useLayer/index.js');
+var core = require('@xanui/core');
+
+const useModal = (children, props) => {
     var _a;
     let sizes = {
         xs: 420,
@@ -12,7 +20,7 @@
     size = size !== null && size !== void 0 ? size : "xs";
     slotProps = slotProps || {};
     const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
-    const layer = index.default(() => {
+    const layer = index(() => {
         return (jsxRuntime.jsx(core.Tag, Object.assign({}, root, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "background.primary", shadow: 15 }, root === null || root === void 0 ? void 0 : root.sx), baseClass: 'modal', children: typeof children === "function" ? children({ open: layer.open, close: layer.close }) : children })));
     }, Object.assign(Object.assign({}, useLayerProps), { onClickOutside: () => {
             if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
@@ -23,4 +31,7 @@
             }
         }, slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.root) }) }));
     return layer;
-};exports.default=useModal;//# sourceMappingURL=index.js.map
+};
+
+module.exports = useModal;
+//# sourceMappingURL=index.js.map

package/useModal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/useModal/index.tsx"],"sourcesContent":["import useLayer, { UseLayerProps } from \"../useLayer\";\nimport { Tag, TagProps } from '@xanui/core'\n\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullWidth\" | number;\n   slotProps?: {\n      layer?: UseLayerProps['slotProps'];\n      root?: Omit<TagProps<'div'>, \"children\">\n   }\n}\n\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\n\nexport type UseModalReturn = {\n   open: () => void;\n   close: () => void;\n}\n\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\n\n   let sizes: any = {\n      xs: 420,\n      sm: 760,\n      md: 990,\n      lg: 1120,\n      xl: 1300,\n      fullWidth: \"100%\"\n   }\n   let { size, slotProps, ...useLayerProps } = props || {}\n   size = size ?? \"xs\"\n   slotProps = slotProps || {} as any\n   const root: any = slotProps?.root || {}\n\n   const layer = useLayer(() => {\n      return (\n         <Tag\n            {...root}\n            sxr={{\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               radius: 2,\n               bgcolor: \"background.primary\",\n               shadow: 15,\n               ...root?.sx\n            }}\n            baseClass='modal'\n         >\n            {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\n         </Tag>\n      )\n   }, {\n      ...useLayerProps,\n      onClickOutside: () => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         } else {\n            layer.close()\n         }\n      },\n      slotProps: {\n         ...slotProps?.layer,\n         root: {\n            display: \"flex\",\n            alignItems: 'center',\n            justifyContent: \"center\",\n            ...slotProps?.layer?.root,\n         }\n      }\n   })\n\n   return layer\n}\n\nexport default useModal;"],"names":["__rest","useLayer","_jsx","Tag"],"mappings":"2MAkBA,MAAM,QAAQ,GAAG,CAAC,QAA0B,EAAE,KAAqB,KAAI;;AAEpE,IAAA,IAAI,KAAK,GAAQ;AACd,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,EAAE,EAAE,IAAI;AACR,QAAA,EAAE,EAAE,IAAI;AACR,QAAA,SAAS,EAAE;KACb;AACD,IAAA,IAAI,EAAA,GAAwC,KAAK,IAAI,EAAE,EAAnD,EAAE,IAAI,EAAE,SAAS,OAAkC,EAA7B,aAAa,GAAAA,YAAA,CAAA,EAAA,EAAnC,CAAA,MAAA,EAAA,WAAA,CAAqC,CAAc;IACvD,IAAI,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,cAAJ,IAAI,GAAI,IAAI;AACnB,IAAA,SAAS,GAAG,SAAS,IAAI,EAAS;AAClC,IAAA,MAAM,IAAI,GAAQ,CAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,KAAI,EAAE;AAEvC,IAAA,MAAM,KAAK,GAAGC,aAAQ,CAAC,MAAK;AACzB,QAAA,QACGC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACG,IAAI,EAAA,EACR,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,QAAQ,EAAE,KAAK,CAAC,IAAW,CAAC,IAAI,IAAI,EACpC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,oBAAoB,EAC7B,MAAM,EAAE,EAAE,EAAA,EACP,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,EAAE,CAAA,EAEd,SAAS,EAAC,OAAO,EAAA,QAAA,EAEhB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,QAAQ,EAAA,CAAA,CAC5F;AAEZ,IAAA,CAAC,kCACK,aAAa,CAAA,EAAA,EAChB,cAAc,EAAE,MAAK;YAClB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,cAAc,EAAE;gBACxB,KAAK,CAAC,cAAc,EAAE;YACzB;iBAAO;gBACJ,KAAK,CAAC,KAAK,EAAE;YAChB;AACH,QAAA,CAAC,EACD,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,KACnB,IAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,QAAQ,EACpB,cAAc,EAAE,QAAQ,EAAA,EACrB,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,QAGhC;AAEF,IAAA,OAAO,KAAK;AACf"}
+{"version":3,"file":"index.js","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport useLayer, { UseLayerProps } from \"../useLayer\";\r\nimport { Tag, TagProps } from '@xanui/core'\r\n\r\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\r\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullWidth\" | number;\r\n   slotProps?: {\r\n      layer?: UseLayerProps['slotProps'];\r\n      root?: Omit<TagProps<'div'>, \"children\">\r\n   }\r\n}\r\n\r\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\r\n\r\nexport type UseModalReturn = {\r\n   open: () => void;\r\n   close: () => void;\r\n}\r\n\r\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\r\n\r\n   let sizes: any = {\r\n      xs: 420,\r\n      sm: 760,\r\n      md: 990,\r\n      lg: 1120,\r\n      xl: 1300,\r\n      fullWidth: \"100%\"\r\n   }\r\n   let { size, slotProps, ...useLayerProps } = props || {}\r\n   size = size ?? \"xs\"\r\n   slotProps = slotProps || {} as any\r\n   const root: any = slotProps?.root || {}\r\n\r\n   const layer = useLayer(() => {\r\n      return (\r\n         <Tag\r\n            {...root}\r\n            sxr={{\r\n               maxWidth: sizes[size as any] || size,\r\n               width: \"100%\",\r\n               radius: 2,\r\n               bgcolor: \"background.primary\",\r\n               shadow: 15,\r\n               ...root?.sx\r\n            }}\r\n            baseClass='modal'\r\n         >\r\n            {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\r\n         </Tag>\r\n      )\r\n   }, {\r\n      ...useLayerProps,\r\n      onClickOutside: () => {\r\n         if (props?.onClickOutside) {\r\n            props.onClickOutside()\r\n         } else {\r\n            layer.close()\r\n         }\r\n      },\r\n      slotProps: {\r\n         ...slotProps?.layer,\r\n         root: {\r\n            display: \"flex\",\r\n            alignItems: 'center',\r\n            justifyContent: \"center\",\r\n            ...slotProps?.layer?.root,\r\n         }\r\n      }\r\n   })\r\n\r\n   return layer\r\n}\r\n\r\nexport default useModal;"],"names":[],"mappings":";;;;;;;;AAoBA;;AAEG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;AAEA;AACG;AAgBH;;;;;;;AAQG;AAYH;AACH;;"}

package/useModal/index.mjs

@@ -1,4 +1,10 @@
-import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import useLayer from'../useLayer/index.mjs';import {Tag}from'@xanui/core';const useModal = (children, props) => {
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import useLayer from '../useLayer/index.mjs';
+import { Tag } from '@xanui/core';
+
+const useModal = (children, props) => {
     var _a;
     let sizes = {
         xs: 420,
@@ -23,4 +29,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import useLayer f
             }
         }, slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.root) }) }));
     return layer;
-};export{useModal as default};//# sourceMappingURL=index.mjs.map
+};
+
+export { useModal as default };
+//# sourceMappingURL=index.mjs.map

package/useModal/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/useModal/index.tsx"],"sourcesContent":["import useLayer, { UseLayerProps } from \"../useLayer\";\nimport { Tag, TagProps } from '@xanui/core'\n\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullWidth\" | number;\n   slotProps?: {\n      layer?: UseLayerProps['slotProps'];\n      root?: Omit<TagProps<'div'>, \"children\">\n   }\n}\n\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\n\nexport type UseModalReturn = {\n   open: () => void;\n   close: () => void;\n}\n\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\n\n   let sizes: any = {\n      xs: 420,\n      sm: 760,\n      md: 990,\n      lg: 1120,\n      xl: 1300,\n      fullWidth: \"100%\"\n   }\n   let { size, slotProps, ...useLayerProps } = props || {}\n   size = size ?? \"xs\"\n   slotProps = slotProps || {} as any\n   const root: any = slotProps?.root || {}\n\n   const layer = useLayer(() => {\n      return (\n         <Tag\n            {...root}\n            sxr={{\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               radius: 2,\n               bgcolor: \"background.primary\",\n               shadow: 15,\n               ...root?.sx\n            }}\n            baseClass='modal'\n         >\n            {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\n         </Tag>\n      )\n   }, {\n      ...useLayerProps,\n      onClickOutside: () => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         } else {\n            layer.close()\n         }\n      },\n      slotProps: {\n         ...slotProps?.layer,\n         root: {\n            display: \"flex\",\n            alignItems: 'center',\n            justifyContent: \"center\",\n            ...slotProps?.layer?.root,\n         }\n      }\n   })\n\n   return layer\n}\n\nexport default useModal;"],"names":["_jsx"],"mappings":"yIAkBA,MAAM,QAAQ,GAAG,CAAC,QAA0B,EAAE,KAAqB,KAAI;;AAEpE,IAAA,IAAI,KAAK,GAAQ;AACd,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,EAAE,EAAE,IAAI;AACR,QAAA,EAAE,EAAE,IAAI;AACR,QAAA,SAAS,EAAE;KACb;AACD,IAAA,IAAI,EAAA,GAAwC,KAAK,IAAI,EAAE,EAAnD,EAAE,IAAI,EAAE,SAAS,OAAkC,EAA7B,aAAa,GAAA,MAAA,CAAA,EAAA,EAAnC,CAAA,MAAA,EAAA,WAAA,CAAqC,CAAc;IACvD,IAAI,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,cAAJ,IAAI,GAAI,IAAI;AACnB,IAAA,SAAS,GAAG,SAAS,IAAI,EAAS;AAClC,IAAA,MAAM,IAAI,GAAQ,CAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,KAAI,EAAE;AAEvC,IAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAK;AACzB,QAAA,QACGA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACG,IAAI,EAAA,EACR,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,QAAQ,EAAE,KAAK,CAAC,IAAW,CAAC,IAAI,IAAI,EACpC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,oBAAoB,EAC7B,MAAM,EAAE,EAAE,EAAA,EACP,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,EAAE,CAAA,EAEd,SAAS,EAAC,OAAO,EAAA,QAAA,EAEhB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,QAAQ,EAAA,CAAA,CAC5F;AAEZ,IAAA,CAAC,kCACK,aAAa,CAAA,EAAA,EAChB,cAAc,EAAE,MAAK;YAClB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,cAAc,EAAE;gBACxB,KAAK,CAAC,cAAc,EAAE;YACzB;iBAAO;gBACJ,KAAK,CAAC,KAAK,EAAE;YAChB;AACH,QAAA,CAAC,EACD,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,KACnB,IAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,QAAQ,EACpB,cAAc,EAAE,QAAQ,EAAA,EACrB,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,QAGhC;AAEF,IAAA,OAAO,KAAK;AACf"}
+{"version":3,"file":"index.mjs","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport useLayer, { UseLayerProps } from \"../useLayer\";\r\nimport { Tag, TagProps } from '@xanui/core'\r\n\r\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\r\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullWidth\" | number;\r\n   slotProps?: {\r\n      layer?: UseLayerProps['slotProps'];\r\n      root?: Omit<TagProps<'div'>, \"children\">\r\n   }\r\n}\r\n\r\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\r\n\r\nexport type UseModalReturn = {\r\n   open: () => void;\r\n   close: () => void;\r\n}\r\n\r\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\r\n\r\n   let sizes: any = {\r\n      xs: 420,\r\n      sm: 760,\r\n      md: 990,\r\n      lg: 1120,\r\n      xl: 1300,\r\n      fullWidth: \"100%\"\r\n   }\r\n   let { size, slotProps, ...useLayerProps } = props || {}\r\n   size = size ?? \"xs\"\r\n   slotProps = slotProps || {} as any\r\n   const root: any = slotProps?.root || {}\r\n\r\n   const layer = useLayer(() => {\r\n      return (\r\n         <Tag\r\n            {...root}\r\n            sxr={{\r\n               maxWidth: sizes[size as any] || size,\r\n               width: \"100%\",\r\n               radius: 2,\r\n               bgcolor: \"background.primary\",\r\n               shadow: 15,\r\n               ...root?.sx\r\n            }}\r\n            baseClass='modal'\r\n         >\r\n            {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\r\n         </Tag>\r\n      )\r\n   }, {\r\n      ...useLayerProps,\r\n      onClickOutside: () => {\r\n         if (props?.onClickOutside) {\r\n            props.onClickOutside()\r\n         } else {\r\n            layer.close()\r\n         }\r\n      },\r\n      slotProps: {\r\n         ...slotProps?.layer,\r\n         root: {\r\n            display: \"flex\",\r\n            alignItems: 'center',\r\n            justifyContent: \"center\",\r\n            ...slotProps?.layer?.root,\r\n         }\r\n      }\r\n   })\r\n\r\n   return layer\r\n}\r\n\r\nexport default useModal;"],"names":[],"mappings":";;;;;;AAoBA;;AAEG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;AAEA;AACG;AAgBH;;;;;;;AAQG;AAYH;AACH;;"}