@xanui/ui 1.1.63 → 1.1.65

package/InputNumber/index.js

@@ -1,47 +1,51 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useRef } from 'react';
 import Input from '../Input/index.js';
 import UnfoldMore from '@xanui/icons/UnfoldMore';
 import { useMergeRefs } from '@xanui/core';
 
 const InputNumber = React.forwardRef((props, ref) => {
     var _a;
-    const [_val, setVal] = useState((_a = props.value) !== null && _a !== void 0 ? _a : "");
     const inputRef = useRef(null);
     const mergeRef = useMergeRefs(inputRef, ref);
-    useEffect(() => {
-        if (inputRef.current && (props === null || props === void 0 ? void 0 : props.onChange)) {
-            let valstr = String(_val);
-            inputRef.current.value = valstr.includes(".") ? parseFloat(_val) : parseInt(_val);
-            const syntheticEvent = {
-                target: inputRef.current,
-                currentTarget: inputRef.current,
-            };
-            props === null || props === void 0 ? void 0 : props.onChange(syntheticEvent);
-        }
-    }, [_val]);
-    const isNumeric = _val === undefined || _val === '' || !isNaN(Number(_val));
+    const isNumeric = props.value === undefined || props.value === '' || !isNaN(Number(props.value));
     const errorProps = {};
     if (!isNumeric) {
         errorProps.error = true;
         errorProps.helperText = "Value must be numeric";
     }
-    return (jsx(Input, Object.assign({}, props, errorProps, { ref: mergeRef, endIcon: jsx(UnfoldMore, {}), value: _val !== null && _val !== void 0 ? _val : "", onKeyDown: (e) => {
+    return (jsx(Input, Object.assign({}, props, errorProps, { ref: mergeRef, endIcon: jsx(UnfoldMore, {}), value: (_a = props.value) !== null && _a !== void 0 ? _a : "", onKeyDown: (e) => {
             var _a;
             (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
             if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
                 return;
             e.preventDefault();
-            const current = parseFloat(_val) || 0;
-            setVal(e.key === 'ArrowUp' ? current + 1 : current - 1);
+            const current = parseFloat(props.value) || 0;
+            e.target.value = e.key === 'ArrowUp' ? current + 1 : current - 1;
+            (props === null || props === void 0 ? void 0 : props.onChange) && (props === null || props === void 0 ? void 0 : props.onChange(e));
+        }, onBlur: (e) => {
+            var _a;
+            const raw = e.target.value;
+            if (raw === "" || raw === ".")
+                return;
+            const num = parseFloat(raw);
+            if (!Number.isNaN(num)) {
+                (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, Object.assign(Object.assign({}, e), { target: Object.assign(Object.assign({}, e.target), { value: num }) }));
+            }
         }, onChange: (e) => {
-            let val = e.target.value.replace(/[^0-9.]/g, '');
-            const parts = val.split('.');
-            if (parts.length > 2) {
-                val = parts[0] + '.' + parts.slice(1).join('');
+            var _a, _b;
+            let value = e.target.value;
+            if (value === "") {
+                (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                return;
             }
-            setVal(val === "." ? `0.` : val);
+            if (!/^\d*\.?\d*$/.test(value))
+                return;
+            if (value === ".")
+                value = "0.";
+            const nextEvent = Object.assign(Object.assign({}, e), { target: Object.assign(Object.assign({}, e.target), { value }) });
+            (_b = props === null || props === void 0 ? void 0 : props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, nextEvent);
         } })));
 });
 

package/InputNumber/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { useEffect, useRef, useState } from 'react'\nimport Input, { InputProps } from '../Input'\nimport UnfoldMore from '@xanui/icons/UnfoldMore'\nimport { useMergeRefs } from '@xanui/core'\n\nexport type InputNumberProps = Omit<InputProps, \"value\"> & {\n   value?: number; // allow string so typing \".\" works\n}\n\nconst InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {\n   const [_val, setVal] = useState<string>(props.value as any ?? \"\")\n   const inputRef = useRef<any>(null)\n   const mergeRef = useMergeRefs(inputRef, ref)\n   useEffect(() => {\n      if (inputRef.current && props?.onChange) {\n         let valstr = String(_val)\n         inputRef.current.value = valstr.includes(\".\") ? parseFloat(_val) : parseInt(_val)\n         const syntheticEvent = {\n            target: inputRef.current,\n            currentTarget: inputRef.current,\n         } as unknown as React.ChangeEvent<HTMLInputElement>;\n         props?.onChange(syntheticEvent)\n      }\n   }, [_val])\n\n   const isNumeric = _val === undefined || _val === '' || !isNaN(Number(_val));\n   const errorProps: Partial<InputProps> = {};\n   if (!isNumeric) {\n      errorProps.error = true;\n      errorProps.helperText = \"Value must be numeric\";\n   }\n\n   return (\n      <Input\n         {...props}\n         {...errorProps}\n         ref={mergeRef}\n         endIcon={<UnfoldMore />}\n         value={_val ?? \"\" as any}\n         onKeyDown={(e: any) => {\n            props.onKeyDown?.(e);\n\n            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n\n            e.preventDefault();\n            const current = parseFloat(_val as any) || 0;\n            setVal(e.key === 'ArrowUp' ? current + 1 : current - 1 as any);\n         }}\n         onChange={(e) => {\n            let val: any = e.target.value.replace(/[^0-9.]/g, '')\n            const parts = val.split('.');\n            if (parts.length > 2) {\n               val = parts[0] + '.' + parts.slice(1).join('')\n            }\n            setVal(val === \".\" ? `0.` : val);\n         }}\n      />\n   );\n});\n\nexport default InputNumber;\n"],"names":[],"mappings":";;;;;;;AAUA;;AACG;AACA;;;AAGG;AACG;;AAEA;;;;;;AAMN;AAEA;;;AAGG;AACA;;AAGH;;AAQS;;;;;AAMA;AACH;AAEG;;AAEA;AACG;;AAEH;;AAIZ;;"}
+{"version":3,"file":"index.js","sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport UnfoldMore from '@xanui/icons/UnfoldMore'\nimport { useMergeRefs } from '@xanui/core'\n\nexport type InputNumberProps = Omit<InputProps, \"value\"> & {\n   value?: number | \"\";\n}\n\nconst InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {\n   const inputRef = useRef<any>(null)\n   const mergeRef = useMergeRefs(inputRef, ref)\n   const isNumeric = props.value === undefined || props.value === '' || !isNaN(Number(props.value));\n   const errorProps: Partial<InputProps> = {};\n   if (!isNumeric) {\n      errorProps.error = true;\n      errorProps.helperText = \"Value must be numeric\";\n   }\n\n   return (\n      <Input\n         {...props}\n         {...errorProps}\n         ref={mergeRef}\n         endIcon={<UnfoldMore />}\n         value={props.value ?? \"\" as any}\n         onKeyDown={(e: any) => {\n            props.onKeyDown?.(e);\n            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n            e.preventDefault();\n            const current = parseFloat(props.value as any) || 0;\n            e.target.value = e.key === 'ArrowUp' ? current + 1 : current - 1 as any\n            props?.onChange && props?.onChange(e)\n\n         }}\n         onBlur={(e) => {\n            const raw = e.target.value\n            if (raw === \"\" || raw === \".\") return\n            const num = parseFloat(raw)\n            if (!Number.isNaN(num)) {\n               props?.onChange?.({\n                  ...e,\n                  target: { ...e.target, value: num },\n               } as any)\n            }\n         }}\n\n         onChange={(e) => {\n            let value = e.target.value\n            if (value === \"\") {\n               props?.onChange?.(e)\n               return\n            }\n\n            if (!/^\\d*\\.?\\d*$/.test(value)) return\n\n            if (value === \".\") value = \"0.\"\n            const nextEvent = {\n               ...e,\n               target: {\n                  ...e.target,\n                  value,\n               },\n            }\n\n            props?.onChange?.(nextEvent as any)\n         }}\n\n      />\n   );\n});\n\nexport default InputNumber;\n"],"names":[],"mappings":";;;;;;;AAUA;;AACG;;;;;AAKG;AACA;;AAGH;;AAQS;;;;;;AAKA;AAEH;;AAEG;AACA;;AACA;;;;AAOH;;AAGG;AACA;;;;AAKA;;;;AAGA;;;AAaZ;;"}

package/Layer/index.cjs

@@ -38,9 +38,13 @@ const Layer = (_a) => {
         }, 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, 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: () => {
-            core.Renderar.unrender(Layer);
+Layer.open = (Children, props) => {
+    const InstanceLayer = (_a) => {
+        var { children } = _a, props = tslib.__rest(_a, ["children"]);
+        return jsxRuntime.jsx(Layer, Object.assign({}, props, { children: children }));
+    };
+    const l = core.Renderar.render(InstanceLayer, Object.assign(Object.assign({}, props), { open: true, children: typeof Children === "function" ? jsxRuntime.jsx(Children, { open: () => l.updateProps({ open: true }), close: () => l.updateProps({ open: false }) }) : Children, onClosed: () => {
+            core.Renderar.unrender(InstanceLayer);
             if (props === null || props === void 0 ? void 0 : props.onClosed) {
                 props.onClosed();
             }
@@ -54,9 +58,6 @@ Layer.open = (children, props) => {
         },
     };
 };
-Layer.close = () => {
-    core.Renderar.unrender(Layer);
-};
 
 module.exports = Layer;
 //# sourceMappingURL=index.cjs.map

package/Layer/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { 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\" | \"onClickOutside\">;\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":[],"mappings":";;;;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { 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\" | \"onClickOutside\">;\n    }\n}\n\nexport type ActionLayerFunctionChildreProps = {\n    open: Function,\n    close: Function\n}\nexport type ActionLayerChildren = ReactNode | ((props: ActionLayerFunctionChildreProps) => ReactNode)\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\nLayer.open = (Children: ActionLayerChildren, props?: Partial<Omit<LayerProps, 'children'>>) => {\n    const InstanceLayer = ({ children, ...props }: LayerProps) => <Layer {...props} >{children}</Layer>;\n    const l = Renderar.render(InstanceLayer as any, {\n        ...props,\n        open: true,\n        children: typeof Children === \"function\" ? <Children\n            open={() => l.updateProps({ open: true })}\n            close={() => l.updateProps({ open: false })}\n        /> : Children,\n        onClosed: () => {\n            Renderar.unrender(InstanceLayer 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}\n\nexport default Layer"],"names":[],"mappings":";;;;;;;;;;AAiCA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAEA;AACI;AAAuB;AAAuC;;AAC9D;AAQQ;;;;AAIJ;;;;;;;;;AAUR;;"}

package/Layer/index.d.ts

@@ -22,14 +22,18 @@ type LayerProps = {
         clickOutside?: Omit<ClickOutsideProps, "children" | "onClickOutside">;
     };
 };
+type ActionLayerFunctionChildreProps = {
+    open: Function;
+    close: Function;
+};
+type ActionLayerChildren = ReactNode | ((props: ActionLayerFunctionChildreProps) => ReactNode);
 declare const Layer: {
     ({ children, open, ...props }: LayerProps): react_jsx_runtime.JSX.Element;
-    open(children: LayerProps["children"], props?: Partial<Omit<LayerProps, "children">>): {
+    open(Children: ActionLayerChildren, props?: Partial<Omit<LayerProps, "children">>): {
         open: () => void;
         close: () => void;
     };
-    close(): void;
 };
 
 export { Layer as default };
-export type { LayerProps };
+export type { ActionLayerChildren, ActionLayerFunctionChildreProps, LayerProps };

package/Layer/index.js

@@ -36,9 +36,13 @@ const Layer = (_a) => {
         }, 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: () => {
-            Renderar.unrender(Layer);
+Layer.open = (Children, props) => {
+    const InstanceLayer = (_a) => {
+        var { children } = _a, props = __rest(_a, ["children"]);
+        return jsx(Layer, Object.assign({}, props, { children: children }));
+    };
+    const l = Renderar.render(InstanceLayer, Object.assign(Object.assign({}, props), { open: true, children: typeof Children === "function" ? jsx(Children, { open: () => l.updateProps({ open: true }), close: () => l.updateProps({ open: false }) }) : Children, onClosed: () => {
+            Renderar.unrender(InstanceLayer);
             if (props === null || props === void 0 ? void 0 : props.onClosed) {
                 props.onClosed();
             }
@@ -52,9 +56,6 @@ Layer.open = (children, props) => {
         },
     };
 };
-Layer.close = () => {
-    Renderar.unrender(Layer);
-};
 
 export { Layer as default };
 //# sourceMappingURL=index.js.map

package/Layer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { 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\" | \"onClickOutside\">;\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":[],"mappings":";;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { 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\" | \"onClickOutside\">;\n    }\n}\n\nexport type ActionLayerFunctionChildreProps = {\n    open: Function,\n    close: Function\n}\nexport type ActionLayerChildren = ReactNode | ((props: ActionLayerFunctionChildreProps) => ReactNode)\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\nLayer.open = (Children: ActionLayerChildren, props?: Partial<Omit<LayerProps, 'children'>>) => {\n    const InstanceLayer = ({ children, ...props }: LayerProps) => <Layer {...props} >{children}</Layer>;\n    const l = Renderar.render(InstanceLayer as any, {\n        ...props,\n        open: true,\n        children: typeof Children === \"function\" ? <Children\n            open={() => l.updateProps({ open: true })}\n            close={() => l.updateProps({ open: false })}\n        /> : Children,\n        onClosed: () => {\n            Renderar.unrender(InstanceLayer 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}\n\nexport default Layer"],"names":[],"mappings":";;;;;;;;AAiCA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAEA;AACI;AAAuB;AAAuC;;AAC9D;AAQQ;;;;AAIJ;;;;;;;;;AAUR;;"}

package/Modal/index.cjs

@@ -3,40 +3,38 @@
 
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var index = require('../useModal/index.cjs');
 var core = require('@xanui/core');
+var index = require('../Layer/index.cjs');
 
-const Modal = (_a) => {
-    var { children, open } = _a, props = tslib.__rest(_a, ["children", "open"]);
-    const ref = React.useRef(null);
-    const modal = index(jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }), Object.assign(Object.assign({}, props), { onClickOutside: () => {
+const Modal = (props) => {
+    var _a, _b;
+    let sizes = {
+        xs: 420,
+        sm: 760,
+        md: 990,
+        lg: 1120,
+        xl: 1300,
+        full: "100%"
+    };
+    let _c = props || {}, { children, onOpen, size, slotProps } = _c, layerProps = tslib.__rest(_c, ["children", "onOpen", "size", "slotProps"]);
+    size = size !== null && size !== void 0 ? size : "xs";
+    slotProps = slotProps || {};
+    const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
+    return (jsxRuntime.jsx(index, Object.assign({}, layerProps, { slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { clickOutside: Object.assign({ maxWidth: sizes[size] || size, width: "100%" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.clickOutside), root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _b === void 0 ? void 0 : _b.root) }), children: 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: children })) })));
+};
+Modal.open = (Children, props) => {
+    const InstanceModal = (_a) => {
+        var { children } = _a, props = tslib.__rest(_a, ["children"]);
+        return jsxRuntime.jsx(Modal, Object.assign({}, props, { children: children }));
+    };
+    const m = core.Renderar.render(InstanceModal, Object.assign(Object.assign({ open: true, children: typeof Children === "function" ? jsxRuntime.jsx(Children, { open: () => m.updateProps({ open: true }), close: () => m.updateProps({ open: false }) }) : Children }, props), { onClickOutside: () => {
             if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
                 props.onClickOutside();
             }
-        }, slotProps: {
-            layer: {
-                portal: {
-                    container: (ref === null || ref === void 0 ? void 0 : ref.current) || undefined
-                }
+            else {
+                m.updateProps({ open: false });
             }
-        } }));
-    React.useEffect(() => {
-        if (open) {
-            modal.open();
-        }
-        else {
-            modal.close();
-        }
-    }, [open]);
-    return jsxRuntime.jsx(core.Tag, { ref: ref });
-};
-const ActionModal = (_a) => {
-    var { children } = _a, props = tslib.__rest(_a, ["children"]);
-    return (jsxRuntime.jsx(Modal, Object.assign({}, props, { children: children })));
-};
-Modal.open = (children, props) => {
-    const m = core.Renderar.render(ActionModal, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
+        }, onClosed: () => {
             m.unrender();
             if (props === null || props === void 0 ? void 0 : props.onClosed) {
                 props.onClosed();
@@ -51,9 +49,6 @@ Modal.open = (children, props) => {
         },
     };
 };
-Modal.close = () => {
-    core.Renderar.unrender(ActionModal);
-};
 
 module.exports = Modal;
 //# sourceMappingURL=index.cjs.map

package/Modal/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useRef } from \"react\";\nimport useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag } from \"@xanui/core\";\n\nexport type ModalProps = UseModalProps & {\n   children: ReactNode;\n   open: boolean;\n}\n\nconst Modal = ({ children, open, ...props }: ModalProps) => {\n   const ref = useRef<HTMLDivElement>(null);\n\n   const modal = useModal(<>{children}</>, {\n      ...props,\n      onClickOutside: () => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         }\n      },\n      slotProps: {\n         layer: {\n            portal: {\n               container: ref?.current || undefined\n            }\n         }\n      }\n   })\n\n   useEffect(() => {\n      if (open) {\n         modal.open()\n      } else {\n         modal.close()\n      }\n   }, [open])\n   return <Tag ref={ref}></Tag>\n}\n\nconst ActionModal = ({ children, ...props }: ModalProps) => {\n   return (\n      <Modal {...props}>\n         {children}\n      </Modal>\n   )\n}\n\nModal.open = (children: ModalProps['children'], props?: Omit<ModalProps, 'children' | \"open\">) => {\n   const m = Renderar.render(ActionModal as any, {\n      open: true,\n      ...props,\n      children,\n      onClosed: () => {\n         m.unrender()\n         if (props?.onClosed) {\n            props.onClosed()\n         }\n      }\n   })\n\n   return {\n      open: () => {\n         m.updateProps({ open: true })\n      },\n      close: () => {\n         m.updateProps({ open: false })\n      },\n   }\n};\n\nModal.close = () => {\n   Renderar.unrender(ActionModal as any)\n}\n\nexport default Modal;"],"names":[],"mappings":";;;;;;;;;AAUA;;AACG;AAEA;;;;;AAQM;AACG;;AAEC;AACH;AACH;;;;;;;;AASJ;AACA;AACH;AAEA;AAAqB;;AAMrB;AAEA;AACG;;;;;AASG;;;;;;;;;AAWN;AAEA;AACG;AACH;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode } from \"react\";\n// import useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag, TagProps } from \"@xanui/core\";\nimport Layer, { ActionLayerChildren, LayerProps } from \"../Layer\";\n\nexport type ModalProps = Omit<LayerProps, \"slotProps\"> & {\n   children: ReactNode;\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\n   slotProps?: {\n      layer?: LayerProps['slotProps'];\n      root?: Omit<TagProps<'div'>, \"children\">\n   }\n}\n\n\nconst Modal = (props: ModalProps) => {\n   let sizes: any = {\n      xs: 420,\n      sm: 760,\n      md: 990,\n      lg: 1120,\n      xl: 1300,\n      full: \"100%\"\n   }\n   let { children, onOpen, size, slotProps, ...layerProps } = props || {}\n   size = size ?? \"xs\"\n   slotProps = slotProps || {} as any\n   const root: any = slotProps?.root || {}\n\n   return (\n      <Layer\n         {...layerProps}\n         slotProps={{\n            ...slotProps?.layer,\n            clickOutside: {\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               ...slotProps?.layer?.clickOutside,\n            },\n            root: {\n               display: \"flex\",\n               alignItems: 'center',\n               justifyContent: \"center\",\n               ...slotProps?.layer?.root,\n            }\n         }}\n      >\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            {children}\n         </Tag>\n      </Layer>\n   )\n}\n\nModal.open = (Children: ActionLayerChildren, props?: Omit<ModalProps, 'children' | \"open\">) => {\n   const InstanceModal = ({ children, ...props }: ModalProps) => <Modal {...props} >{children}</Modal>;\n   const m = Renderar.render(InstanceModal as any, {\n      open: true,\n      children: typeof Children === \"function\" ? <Children\n         open={() => m.updateProps({ open: true })}\n         close={() => m.updateProps({ open: false })}\n      /> : Children,\n      ...props,\n      onClickOutside: () => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         } else {\n            m.updateProps({ open: false })\n         }\n      },\n      onClosed: () => {\n         m.unrender()\n         if (props?.onClosed) {\n            props.onClosed()\n         }\n      }\n   })\n\n   return {\n      open: () => {\n         m.updateProps({ open: true })\n      },\n      close: () => {\n         m.updateProps({ open: false })\n      },\n   }\n};\n\n\nexport default Modal;"],"names":[],"mappings":";;;;;;;;AAgBA;;AACG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;;AAoCH;AAEA;AACG;AAAuB;AAAuC;;AAC9D;;;;;;;AAaG;;;;;AAMA;;;;;;;;;AAWN;;"}

package/Modal/index.d.ts

@@ -1,18 +1,22 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { UseModalProps } from '../useModal/index.js';
+import { TagProps } from '@xanui/core';
+import { LayerProps, ActionLayerChildren } from '../Layer/index.js';
 
-type ModalProps = UseModalProps & {
+type ModalProps = Omit<LayerProps, "slotProps"> & {
     children: ReactNode;
-    open: boolean;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | number;
+    slotProps?: {
+        layer?: LayerProps['slotProps'];
+        root?: Omit<TagProps<'div'>, "children">;
+    };
 };
 declare const Modal: {
-    ({ children, open, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
-    open(children: ModalProps["children"], props?: Omit<ModalProps, "children" | "open">): {
+    (props: ModalProps): react_jsx_runtime.JSX.Element;
+    open(Children: ActionLayerChildren, props?: Omit<ModalProps, "children" | "open">): {
         open: () => void;
         close: () => void;
     };
-    close(): void;
 };
 
 export { Modal as default };

package/Modal/index.js

@@ -1,40 +1,38 @@
 "use client";
 import { __rest } from 'tslib';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
-import useModal from '../useModal/index.js';
+import { jsx } from 'react/jsx-runtime';
 import { Tag, Renderar } from '@xanui/core';
+import Layer from '../Layer/index.js';
 
-const Modal = (_a) => {
-    var { children, open } = _a, props = __rest(_a, ["children", "open"]);
-    const ref = useRef(null);
-    const modal = useModal(jsx(Fragment, { children: children }), Object.assign(Object.assign({}, props), { onClickOutside: () => {
+const Modal = (props) => {
+    var _a, _b;
+    let sizes = {
+        xs: 420,
+        sm: 760,
+        md: 990,
+        lg: 1120,
+        xl: 1300,
+        full: "100%"
+    };
+    let _c = props || {}, { children, onOpen, size, slotProps } = _c, layerProps = __rest(_c, ["children", "onOpen", "size", "slotProps"]);
+    size = size !== null && size !== void 0 ? size : "xs";
+    slotProps = slotProps || {};
+    const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
+    return (jsx(Layer, Object.assign({}, layerProps, { slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { clickOutside: Object.assign({ maxWidth: sizes[size] || size, width: "100%" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.clickOutside), root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _b === void 0 ? void 0 : _b.root) }), children: jsx(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: children })) })));
+};
+Modal.open = (Children, props) => {
+    const InstanceModal = (_a) => {
+        var { children } = _a, props = __rest(_a, ["children"]);
+        return jsx(Modal, Object.assign({}, props, { children: children }));
+    };
+    const m = Renderar.render(InstanceModal, Object.assign(Object.assign({ open: true, children: typeof Children === "function" ? jsx(Children, { open: () => m.updateProps({ open: true }), close: () => m.updateProps({ open: false }) }) : Children }, props), { onClickOutside: () => {
             if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
                 props.onClickOutside();
             }
-        }, slotProps: {
-            layer: {
-                portal: {
-                    container: (ref === null || ref === void 0 ? void 0 : ref.current) || undefined
-                }
+            else {
+                m.updateProps({ open: false });
             }
-        } }));
-    useEffect(() => {
-        if (open) {
-            modal.open();
-        }
-        else {
-            modal.close();
-        }
-    }, [open]);
-    return jsx(Tag, { ref: ref });
-};
-const ActionModal = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return (jsx(Modal, Object.assign({}, props, { children: children })));
-};
-Modal.open = (children, props) => {
-    const m = Renderar.render(ActionModal, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
+        }, onClosed: () => {
             m.unrender();
             if (props === null || props === void 0 ? void 0 : props.onClosed) {
                 props.onClosed();
@@ -49,9 +47,6 @@ Modal.open = (children, props) => {
         },
     };
 };
-Modal.close = () => {
-    Renderar.unrender(ActionModal);
-};
 
 export { Modal as default };
 //# sourceMappingURL=index.js.map

package/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useRef } from \"react\";\nimport useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag } from \"@xanui/core\";\n\nexport type ModalProps = UseModalProps & {\n   children: ReactNode;\n   open: boolean;\n}\n\nconst Modal = ({ children, open, ...props }: ModalProps) => {\n   const ref = useRef<HTMLDivElement>(null);\n\n   const modal = useModal(<>{children}</>, {\n      ...props,\n      onClickOutside: () => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         }\n      },\n      slotProps: {\n         layer: {\n            portal: {\n               container: ref?.current || undefined\n            }\n         }\n      }\n   })\n\n   useEffect(() => {\n      if (open) {\n         modal.open()\n      } else {\n         modal.close()\n      }\n   }, [open])\n   return <Tag ref={ref}></Tag>\n}\n\nconst ActionModal = ({ children, ...props }: ModalProps) => {\n   return (\n      <Modal {...props}>\n         {children}\n      </Modal>\n   )\n}\n\nModal.open = (children: ModalProps['children'], props?: Omit<ModalProps, 'children' | \"open\">) => {\n   const m = Renderar.render(ActionModal as any, {\n      open: true,\n      ...props,\n      children,\n      onClosed: () => {\n         m.unrender()\n         if (props?.onClosed) {\n            props.onClosed()\n         }\n      }\n   })\n\n   return {\n      open: () => {\n         m.updateProps({ open: true })\n      },\n      close: () => {\n         m.updateProps({ open: false })\n      },\n   }\n};\n\nModal.close = () => {\n   Renderar.unrender(ActionModal as any)\n}\n\nexport default Modal;"],"names":[],"mappings":";;;;;;;AAUA;;AACG;AAEA;;;;;AAQM;AACG;;AAEC;AACH;AACH;;;;;;;;AASJ;AACA;AACH;AAEA;AAAqB;;AAMrB;AAEA;AACG;;;;;AASG;;;;;;;;;AAWN;AAEA;AACG;AACH;;"}
+{"version":3,"file":"index.js","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode } from \"react\";\n// import useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag, TagProps } from \"@xanui/core\";\nimport Layer, { ActionLayerChildren, LayerProps } from \"../Layer\";\n\nexport type ModalProps = Omit<LayerProps, \"slotProps\"> & {\n   children: ReactNode;\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\n   slotProps?: {\n      layer?: LayerProps['slotProps'];\n      root?: Omit<TagProps<'div'>, \"children\">\n   }\n}\n\n\nconst Modal = (props: ModalProps) => {\n   let sizes: any = {\n      xs: 420,\n      sm: 760,\n      md: 990,\n      lg: 1120,\n      xl: 1300,\n      full: \"100%\"\n   }\n   let { children, onOpen, size, slotProps, ...layerProps } = props || {}\n   size = size ?? \"xs\"\n   slotProps = slotProps || {} as any\n   const root: any = slotProps?.root || {}\n\n   return (\n      <Layer\n         {...layerProps}\n         slotProps={{\n            ...slotProps?.layer,\n            clickOutside: {\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               ...slotProps?.layer?.clickOutside,\n            },\n            root: {\n               display: \"flex\",\n               alignItems: 'center',\n               justifyContent: \"center\",\n               ...slotProps?.layer?.root,\n            }\n         }}\n      >\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            {children}\n         </Tag>\n      </Layer>\n   )\n}\n\nModal.open = (Children: ActionLayerChildren, props?: Omit<ModalProps, 'children' | \"open\">) => {\n   const InstanceModal = ({ children, ...props }: ModalProps) => <Modal {...props} >{children}</Modal>;\n   const m = Renderar.render(InstanceModal as any, {\n      open: true,\n      children: typeof Children === \"function\" ? <Children\n         open={() => m.updateProps({ open: true })}\n         close={() => m.updateProps({ open: false })}\n      /> : Children,\n      ...props,\n      onClickOutside: () => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         } else {\n            m.updateProps({ open: false })\n         }\n      },\n      onClosed: () => {\n         m.unrender()\n         if (props?.onClosed) {\n            props.onClosed()\n         }\n      }\n   })\n\n   return {\n      open: () => {\n         m.updateProps({ open: true })\n      },\n      close: () => {\n         m.updateProps({ open: false })\n      },\n   }\n};\n\n\nexport default Modal;"],"names":[],"mappings":";;;;;;AAgBA;;AACG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;;AAoCH;AAEA;AACG;AAAuB;AAAuC;;AAC9D;;;;;;;AAaG;;;;;AAMA;;;;;;;;;AAWN;;"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@xanui/ui",
-  "version": "1.1.63",
+  "version": "1.1.65",
   "description": "Xanui - A React Component Library",
   "private": false,
   "dependencies": {
-    "@xanui/core": "^1.2.52",
+    "@xanui/core": "^1.2.54",
     "@xanui/icons": "^1.1.12",
     "pretty-class": "^1.0.8",
     "react-state-bucket": "^1.2.17"

package/useAlert/index.cjs

@@ -1,94 +0,0 @@
-"use client";
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@xanui/core');
-var index$2 = require('../Button/index.cjs');
-var index = require('../useModal/index.cjs');
-var index$1 = require('../Alert/index.cjs');
-var React = require('react');
-
-const useAlert = (props) => {
-    const [loading, setLoading] = React.useState(false);
-    let { content, size, color, direction, variant, closeButton, clickOutsideToClose, okButtonText, cancelButtonText, hideOkButton, hideCancelButton, buttonPlacement, onConfirm, onCancel, transition, blurMode, slotProps } = props, rest = tslib.__rest(props, ["content", "size", "color", "direction", "variant", "closeButton", "clickOutsideToClose", "okButtonText", "cancelButtonText", "hideOkButton", "hideCancelButton", "buttonPlacement", "onConfirm", "onCancel", "transition", "blurMode", "slotProps"]);
-    hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
-    hideCancelButton !== null && hideCancelButton !== void 0 ? hideCancelButton : (hideCancelButton = false);
-    size !== null && size !== void 0 ? size : (size = "small");
-    color !== null && color !== void 0 ? color : (color = 'default');
-    variant !== null && variant !== void 0 ? variant : (variant = "text");
-    direction !== null && direction !== void 0 ? direction : (direction = "column");
-    buttonPlacement !== null && buttonPlacement !== void 0 ? buttonPlacement : (buttonPlacement = "end");
-    let sx = {};
-    switch (buttonPlacement) {
-        case "start":
-            sx.justifyContent = 'flex-start';
-            break;
-        case "end":
-            sx.justifyContent = 'flex-end';
-            break;
-        case "between":
-            sx.justifyContent = 'space-between';
-            break;
-        case "full":
-            sx = {
-                "& button": {
-                    flex: 1
-                }
-            };
-            break;
-    }
-    let sizes = {
-        small: 320,
-        medium: 400,
-        large: 600
-    };
-    let okcolor = color;
-    let closecolor = color;
-    if (color === 'default') {
-        okcolor = 'brand';
-        closecolor = 'default';
-        variant = 'text';
-    }
-    else {
-        if (variant === 'fill') {
-            okcolor = 'default';
-            closecolor = 'default';
-        }
-        else {
-            okcolor = color;
-            closecolor = 'default';
-        }
-    }
-    const modal = index(jsxRuntime.jsxs(index$1, Object.assign({ direction: direction, sx: {
-            px: 2,
-            py: 1,
-            pt: direction === 'row' ? 1 : 2
-        }, color: color, variant: variant, onClose: closeButton ? close : undefined }, rest, { children: [typeof content === "function" ? content({
-                open: () => modal.open(),
-                close: () => modal.close(),
-                loading: (is) => setLoading(is),
-                isLoading: () => loading
-            }) : content, jsxRuntime.jsxs(core.Tag, { sxr: Object.assign({ display: "flex", gap: 1, pt: 4, flexDirection: "row" }, sx), children: [!hideCancelButton && jsxRuntime.jsx(index$2, Object.assign({ disabled: loading, color: closecolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.closeButton, { onClick: async () => {
-                            setLoading(true);
-                            onCancel && await onCancel();
-                            setLoading(false);
-                            modal.close();
-                        }, children: cancelButtonText || "Close" })), jsxRuntime.jsx(index$2, Object.assign({ loading: loading, color: okcolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.okButton, { onClick: async () => {
-                            setLoading(true);
-                            onConfirm && await onConfirm();
-                            setLoading(false);
-                            modal.close();
-                        }, children: okButtonText || "OK" }))] })] })), Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.modal), { size: sizes[size] || size, blur: 40, blurMode: blurMode || "transparent", transition: transition || "zoom", onClickOutside: async () => {
-            if (clickOutsideToClose && !loading) {
-                setLoading(true);
-                onCancel && await onCancel();
-                setLoading(false);
-                modal.close();
-            }
-        } }));
-    return Object.assign(Object.assign({}, modal), { loading: (is) => setLoading(is), isLoading: () => loading });
-};
-
-module.exports = useAlert;
-//# sourceMappingURL=index.cjs.map

package/useAlert/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tag, UseTransitionVariantTypes } from \"@xanui/core\"\nimport Button, { ButtonProps } from \"../Button\";\nimport useModal, { UseModalProps } from \"../useModal\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport React from \"react\";\nexport type UseAlertContentProps = {\n    open: () => void;\n    close: () => void;\n    loading: (is: boolean) => void;\n    isLoading: () => boolean;\n}\n\nexport type UseAlertContent = React.ReactElement | ((props: UseAlertContentProps) => React.ReactElement)\n\nexport type UseAlerProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    content: string | UseAlertContent,\n    size?: \"small\" | \"medium\" | \"large\" | number;\n    closeButton?: boolean;\n    clickOutsideToClose?: boolean;\n    okButtonText?: string;\n    cancelButtonText?: string;\n    hideOkButton?: boolean;\n    hideCancelButton?: boolean;\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n    variant?: \"text\" | \"fill\"\n    onConfirm?: () => Promise<void> | void;\n    onCancel?: () => Promise<void> | void;\n    transition?: UseTransitionVariantTypes;\n    blurMode?: UseModalProps['blurMode'];\n    slotProps?: {\n        modal?: UseModalProps;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\n\nconst useAlert = (props: UseAlerProps) => {\n    const [loading, setLoading] = React.useState(false)\n    let {\n        content,\n        size,\n        color,\n        direction,\n        variant,\n        closeButton,\n        clickOutsideToClose,\n        okButtonText,\n        cancelButtonText,\n        hideOkButton,\n        hideCancelButton,\n        buttonPlacement,\n        onConfirm,\n        onCancel,\n        transition,\n        blurMode,\n        slotProps,\n        ...rest\n    } = props\n\n    hideOkButton ??= false\n    hideCancelButton ??= false\n\n    size ??= \"small\"\n    color ??= 'default'\n    variant ??= \"text\"\n    direction ??= \"column\"\n    buttonPlacement ??= \"end\"\n    let sx: any = {};\n\n    switch (buttonPlacement) {\n        case \"start\":\n            sx.justifyContent = 'flex-start'\n            break;\n        case \"end\":\n            sx.justifyContent = 'flex-end'\n            break;\n        case \"between\":\n            sx.justifyContent = 'space-between'\n            break;\n        case \"full\":\n            sx = {\n                \"& button\": {\n                    flex: 1\n                }\n            }\n            break;\n    }\n\n    let sizes: any = {\n        small: 320,\n        medium: 400,\n        large: 600\n    }\n\n    let okcolor = color\n    let closecolor = color\n    if (color === 'default') {\n        okcolor = 'brand'\n        closecolor = 'default'\n        variant = 'text'\n    } else {\n        if (variant === 'fill') {\n            okcolor = 'default'\n            closecolor = 'default'\n        } else {\n            okcolor = color\n            closecolor = 'default'\n        }\n    }\n\n    const modal = useModal(<Alert\n        direction={direction}\n        sx={{\n            px: 2,\n            py: 1,\n            pt: direction === 'row' ? 1 : 2\n        }}\n        color={color}\n        variant={variant}\n        onClose={closeButton ? close : undefined}\n        {...rest}\n    >\n        {typeof content === \"function\" ? content({\n            open: () => modal.open(),\n            close: () => modal.close(),\n            loading: (is: boolean) => setLoading(is),\n            isLoading: () => loading\n        }) : content}\n        <Tag\n            sxr={{\n                display: \"flex\",\n                gap: 1,\n                pt: 4,\n                flexDirection: \"row\",\n                ...sx,\n            }}\n        >\n            {!hideCancelButton && <Button\n                disabled={loading}\n                color={closecolor}\n                variant=\"fill\"\n                {...slotProps?.closeButton}\n                onClick={async () => {\n                    setLoading(true)\n                    onCancel && await onCancel()\n                    setLoading(false)\n                    modal.close()\n                }}\n            >{cancelButtonText || \"Close\"}</Button>}\n            <Button\n                loading={loading}\n                color={okcolor}\n                variant=\"fill\"\n                {...slotProps?.okButton}\n\n                onClick={async () => {\n                    setLoading(true)\n                    onConfirm && await onConfirm()\n                    setLoading(false)\n                    modal.close()\n                }}\n            >{okButtonText || \"OK\"}</Button>\n        </Tag>\n    </Alert>, {\n        ...slotProps?.modal,\n        size: sizes[size] || size,\n        blur: 40,\n        blurMode: blurMode || \"transparent\",\n        transition: transition || \"zoom\",\n        onClickOutside: async () => {\n            if (clickOutsideToClose && !loading) {\n                setLoading(true)\n                onCancel && await onCancel()\n                setLoading(false)\n                modal.close()\n            }\n        }\n    })\n\n    return {\n        ...modal,\n        loading: (is: boolean) => setLoading(is),\n        isLoading: () => loading\n    }\n}\n\nexport default useAlert"],"names":[],"mappings":";;;;;;;;;;;AAuCA;AACI;AACA;;;;;;;;;;AAgCI;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;AASJ;AAGQ;AACA;;AAEH;AAOG;AACA;;AAEA;;;AAkBQ;;;AAGJ;;AAUI;;;;AAaR;;AAEI;;;;AAIR;;AAQR;;"}

package/useAlert/index.d.ts

@@ -1,36 +0,0 @@
-import { UseTransitionVariantTypes } from '@xanui/core';
-import { ButtonProps } from '../Button/index.js';
-import { UseModalProps } from '../useModal/index.js';
-import { AlertProps } from '../Alert/index.js';
-import React from 'react';
-
-type UseAlertContentProps = {
-    open: () => void;
-    close: () => void;
-    loading: (is: boolean) => void;
-    isLoading: () => boolean;
-};
-type UseAlertContent = React.ReactElement | ((props: UseAlertContentProps) => React.ReactElement);
-type UseAlerProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | "size"> & {
-    content: string | UseAlertContent;
-    size?: "small" | "medium" | "large" | number;
-    closeButton?: boolean;
-    clickOutsideToClose?: boolean;
-    okButtonText?: string;
-    cancelButtonText?: string;
-    hideOkButton?: boolean;
-    hideCancelButton?: boolean;
-    buttonPlacement?: "start" | "end" | "between" | "full";
-    variant?: "text" | "fill";
-    onConfirm?: () => Promise<void> | void;
-    onCancel?: () => Promise<void> | void;
-    transition?: UseTransitionVariantTypes;
-    blurMode?: UseModalProps['blurMode'];
-    slotProps?: {
-        modal?: UseModalProps;
-        okButton?: Omit<ButtonProps, "children">;
-        closeButton?: Omit<ButtonProps, "children">;
-    };
-};
-
-export type { UseAlerProps, UseAlertContent, UseAlertContentProps };