@xanui/ui 1.1.64 → 1.1.65

package/Alert/index.cjs

@@ -12,7 +12,8 @@ var SuccessIcon = require('@xanui/icons/CheckCircle');
 var ErrorIcon = require('@xanui/icons/Cancel');
 var Close = require('@xanui/icons/Close');
 var index = require('../IconButton/index.cjs');
-var index$2 = require('../useAlert/index.cjs');
+var index$2 = require('../Modal/index.cjs');
+var index$3 = require('../Button/index.cjs');
 
 const Alert = (_a) => {
     var { children } = _a, rest = tslib.__rest(_a, ["children"]);
@@ -82,37 +83,99 @@ const Alert = (_a) => {
                                     font: "button",
                                 }, children: children })] })] })] })));
 };
-const ActionAlert = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const ref = React.useRef(null);
-    const alert = index$2(Object.assign(Object.assign({}, props), { slotProps: Object.assign(Object.assign({}, props.slotProps), { modal: Object.assign(Object.assign({}, (_a = props.slotProps) === null || _a === void 0 ? void 0 : _a.modal), { slotProps: Object.assign(Object.assign({}, (_c = (_b = props.slotProps) === null || _b === void 0 ? void 0 : _b.modal) === null || _c === void 0 ? void 0 : _c.slotProps), { layer: Object.assign(Object.assign({}, (_f = (_e = (_d = props.slotProps) === null || _d === void 0 ? void 0 : _d.modal) === null || _e === void 0 ? void 0 : _e.slotProps) === null || _f === void 0 ? void 0 : _f.layer), { portal: Object.assign(Object.assign({}, (_k = (_j = (_h = (_g = props.slotProps) === null || _g === void 0 ? void 0 : _g.modal) === null || _h === void 0 ? void 0 : _h.slotProps) === null || _j === void 0 ? void 0 : _j.layer) === null || _k === void 0 ? void 0 : _k.portal), { container: ref.current || undefined }) }) }) }) }) }));
-    React.useEffect(() => {
-        if (props.open) {
-            alert.open();
+const ConfirmAlert = (props) => {
+    let { open, loading, content, size, color, direction, variant, closeButton, clickOutsideToClose, okButtonText, cancelButtonText, hideOkButton, hideCancelButton, buttonPlacement, onConfirm, onCancel, transition, blurMode, slotProps } = props, rest = tslib.__rest(props, ["open", "loading", "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 {
-            alert.close();
+            okcolor = color;
+            closecolor = 'default';
         }
-    }, [props.open]);
-    return jsxRuntime.jsx(core.Tag, { ref: ref });
+    }
+    return (jsxRuntime.jsx(index$2, Object.assign({ open: open }, 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) {
+                onCancel && await onCancel();
+            }
+        }, children: jsxRuntime.jsxs(Alert, Object.assign({ direction: direction, sx: {
+                px: 2,
+                py: 1,
+                pt: direction === 'row' ? 1 : 2
+            }, color: color, variant: variant, onClose: closeButton ? close : undefined }, rest, { children: [content, jsxRuntime.jsxs(core.Tag, { sxr: Object.assign({ display: "flex", gap: 1, pt: 4, flexDirection: "row" }, sx), children: [!hideCancelButton && jsxRuntime.jsx(index$3, Object.assign({ disabled: loading, color: closecolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.closeButton, { onClick: async () => {
+                                onCancel && await onCancel();
+                            }, children: cancelButtonText || "Close" })), jsxRuntime.jsx(index$3, Object.assign({ loading: loading, color: okcolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.okButton, { onClick: async () => {
+                                onConfirm && await onConfirm();
+                            }, children: okButtonText || "OK" }))] })] })) })));
 };
-Alert.confirm = (props) => {
-    var _a;
-    const a = core.Renderar.render(ActionAlert, Object.assign(Object.assign({ open: true }, props), { slotProps: Object.assign(Object.assign({}, props.slotProps), { modal: Object.assign(Object.assign({}, (_a = props.slotProps) === null || _a === void 0 ? void 0 : _a.modal), { onClosed: () => {
+Alert.confirm = (_a) => {
+    var _b;
+    var { onConfirm, onCancel } = _a, props = tslib.__rest(_a, ["onConfirm", "onCancel"]);
+    const confirm = core.Renderar.render(ConfirmAlert, Object.assign(Object.assign({}, props), { open: true, loading: false, onConfirm: async () => {
+            if (onConfirm) {
+                confirm.updateProps({ loading: true });
+                if (onConfirm)
+                    await onConfirm();
+                confirm.updateProps({ open: false, loading: false });
+            }
+            else {
+                confirm.updateProps({ open: false });
+            }
+        }, onCancel: async () => {
+            if (onCancel) {
+                confirm.updateProps({ loading: true });
+                await onCancel();
+                confirm.updateProps({ open: false, loading: false });
+            }
+            else {
+                confirm.updateProps({ open: false });
+            }
+        }, slotProps: Object.assign(Object.assign({}, props.slotProps), { modal: Object.assign(Object.assign({}, (_b = props.slotProps) === null || _b === void 0 ? void 0 : _b.modal), { onClosed: () => {
                     var _a, _b, _c, _d;
-                    a.unrender();
+                    confirm.unrender();
                     if ((_b = (_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.modal) === null || _b === void 0 ? void 0 : _b.onClosed) {
                         (_d = (_c = props.slotProps) === null || _c === void 0 ? void 0 : _c.modal) === null || _d === void 0 ? void 0 : _d.onClosed();
                     }
                 } }) }) }));
-    return {
-        open: () => {
-            a.updateProps({ open: true });
-        },
-        close: () => {
-            a.updateProps({ open: false });
-        },
-    };
 };
 
 module.exports = Alert;

package/Alert/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement, useEffect, useRef } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport useAlert, { UseAlerProps } from \"../useAlert\";\n\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n    let [{\n        title,\n        variant,\n        icon,\n        color,\n        direction,\n        slotProps,\n        onClose,\n        ..._props\n    }] = useInterface<any>(\"Alert\", rest, {\n        variant: \"fill\"\n    })\n    color ??= \"default\"\n    direction ??= \"row\"\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (variant) _p.variant = variant\n    if (icon) _p.icon = icon\n    if (color) _p.color = color\n    if (direction) _p.direction = direction\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    variant = p.variant\n    icon = p.icon\n    color = p.color\n    direction = p.direction\n\n    let isRow = direction === 'row'\n\n\n    const template = useColorTemplate(color, variant)\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'default' ? \"text.primary\" : template.primary.color\n    }\n\n    const icons: any = {\n        \"info\": <InfoIcon sx={iconsx} />,\n        \"warning\": <WarningIcon sx={iconsx} />,\n        \"success\": <SuccessIcon sx={iconsx} />,\n        \"danger\": <ErrorIcon sx={iconsx} />\n    }\n\n    let _icon = icons[icon] || icons[color]\n\n    return (\n        <Tag\n            {..._props}\n            baseClass=\"alert\"\n            sxr={{\n                justifyContent: \"flex-start\",\n                position: \"relative\",\n                radius: 1,\n                px: isRow ? (_icon ? .5 : 2) : 3,\n                py: isRow ? .5 : 3,\n                flexDirection: \"column\",\n                display: 'flex',\n                ..._props?.sx\n            }}\n            {...template.primary}\n        >\n            {\n                onClose && <IconButton\n                    color={color}\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\n                    size={25}\n                    sx={{\n                        position: \"absolute\",\n                        top: 5,\n                        right: 5\n                    }}\n                    onClick={onClose}\n                    className=\"alert-close-button\"\n                >\n                    <IconClose fontSize={18} />\n                </IconButton>\n            }\n            <Tag\n                sx={{\n                    display: \"flex\",\n                    gap: 1,\n                    flexDirection: direction,\n                    alignItems: isRow ? \"flex-start\" : \"center\"\n                }}\n                baseClass=\"alert-container\"\n            >\n                {\n                    _icon && <Tag\n                        baseClass=\"alert-icon\"\n                        sxr={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            p: isRow ? .5 : 0,\n                            \"& svg\": {\n                                color: template.primary.color\n                            }\n                        }}\n                    >\n                        {_icon}\n                    </Tag>\n                }\n                <Tag\n                    baseClass=\"alert-content\"\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        flex: 1,\n                        color: template.primary.color,\n                        textAlign: isRow ? \"left\" : \"center\",\n                        gap: isRow ? 0 : 1\n                    }}\n                >\n                    {title && <>\n                        {\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n                                className=\"alert-titles\"\n                                variant=\"text\"\n                                sx={{\n                                    fontWeight: 500,\n                                    color: template.primary.color\n                                }}\n                            >{title}</Text>\n                        }\n                    </>}\n                    <Tag\n                        sxr={{\n                            font: \"button\",\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Tag>\n            </Tag>\n        </Tag>\n    )\n}\n\nconst ActionAlert = (props: UseAlerProps) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const alert = useAlert({\n        ...props,\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                slotProps: {\n                    ...props.slotProps?.modal?.slotProps,\n                    layer: {\n                        ...props.slotProps?.modal?.slotProps?.layer,\n                        portal: {\n                            ...props.slotProps?.modal?.slotProps?.layer?.portal,\n                            container: ref.current || undefined\n                        }\n                    }\n                }\n            }\n        }\n    })\n\n    useEffect(() => {\n        if (props.open) {\n            alert.open()\n        } else {\n            alert.close()\n        }\n    }, [props.open])\n    return <Tag ref={ref}></Tag>\n}\n\nAlert.confirm = (props: UseAlerProps) => {\n    const a = Renderar.render(ActionAlert as any, {\n        open: true,\n        ...props,\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                onClosed: () => {\n                    a.unrender()\n                    if (props?.slotProps?.modal?.onClosed) {\n                        props.slotProps?.modal?.onClosed()\n                    }\n                },\n            }\n        },\n    })\n\n    return {\n        open: () => {\n            a.updateProps({ open: true })\n        },\n        close: () => {\n            a.updateProps({ open: false })\n        },\n    }\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGH;AAQe;AACA;;AAOR;AACH;AAQzB;AAEA;;AACI;AACA;;AAqBI;;;;;;AAKJ;AACA;AACJ;AAEA;;AACI;;;AASgB;;;AAGJ;;;;;;;;;AAahB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n    let [{\n        title,\n        variant,\n        icon,\n        color,\n        direction,\n        slotProps,\n        onClose,\n        ..._props\n    }] = useInterface<any>(\"Alert\", rest, {\n        variant: \"fill\"\n    })\n    color ??= \"default\"\n    direction ??= \"row\"\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (variant) _p.variant = variant\n    if (icon) _p.icon = icon\n    if (color) _p.color = color\n    if (direction) _p.direction = direction\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    variant = p.variant\n    icon = p.icon\n    color = p.color\n    direction = p.direction\n\n    let isRow = direction === 'row'\n\n\n    const template = useColorTemplate(color, variant)\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'default' ? \"text.primary\" : template.primary.color\n    }\n\n    const icons: any = {\n        \"info\": <InfoIcon sx={iconsx} />,\n        \"warning\": <WarningIcon sx={iconsx} />,\n        \"success\": <SuccessIcon sx={iconsx} />,\n        \"danger\": <ErrorIcon sx={iconsx} />\n    }\n\n    let _icon = icons[icon] || icons[color]\n\n    return (\n        <Tag\n            {..._props}\n            baseClass=\"alert\"\n            sxr={{\n                justifyContent: \"flex-start\",\n                position: \"relative\",\n                radius: 1,\n                px: isRow ? (_icon ? .5 : 2) : 3,\n                py: isRow ? .5 : 3,\n                flexDirection: \"column\",\n                display: 'flex',\n                ..._props?.sx\n            }}\n            {...template.primary}\n        >\n            {\n                onClose && <IconButton\n                    color={color}\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\n                    size={25}\n                    sx={{\n                        position: \"absolute\",\n                        top: 5,\n                        right: 5\n                    }}\n                    onClick={onClose}\n                    className=\"alert-close-button\"\n                >\n                    <IconClose fontSize={18} />\n                </IconButton>\n            }\n            <Tag\n                sx={{\n                    display: \"flex\",\n                    gap: 1,\n                    flexDirection: direction,\n                    alignItems: isRow ? \"flex-start\" : \"center\"\n                }}\n                baseClass=\"alert-container\"\n            >\n                {\n                    _icon && <Tag\n                        baseClass=\"alert-icon\"\n                        sxr={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            p: isRow ? .5 : 0,\n                            \"& svg\": {\n                                color: template.primary.color\n                            }\n                        }}\n                    >\n                        {_icon}\n                    </Tag>\n                }\n                <Tag\n                    baseClass=\"alert-content\"\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        flex: 1,\n                        color: template.primary.color,\n                        textAlign: isRow ? \"left\" : \"center\",\n                        gap: isRow ? 0 : 1\n                    }}\n                >\n                    {title && <>\n                        {\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n                                className=\"alert-titles\"\n                                variant=\"text\"\n                                sx={{\n                                    fontWeight: 500,\n                                    color: template.primary.color\n                                }}\n                            >{title}</Text>\n                        }\n                    </>}\n                    <Tag\n                        sxr={{\n                            font: \"button\",\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Tag>\n            </Tag>\n        </Tag>\n    )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    open: boolean;\n    loading: boolean;\n    content: string | ReactElement,\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?: ModalProps['blurMode'];\n    slotProps?: {\n        modal?: Omit<ModalProps, 'open' | \"children\">;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n    let {\n        open,\n        loading,\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    return (<Modal\n        open={open}\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                onCancel && await onCancel()\n            }\n        }}\n    >\n        <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            {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                        onCancel && await onCancel()\n                    }}\n                >{cancelButtonText || \"Close\"}</Button>}\n                <Button\n                    loading={loading}\n                    color={okcolor}\n                    variant=\"fill\"\n                    {...slotProps?.okButton}\n\n                    onClick={async () => {\n                        onConfirm && await onConfirm()\n                    }}\n                >{okButtonText || \"OK\"}</Button>\n            </Tag>\n        </Alert>\n    </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n    const confirm = Renderar.render(ConfirmAlert as any, {\n        ...props,\n        open: true,\n        loading: false,\n        onConfirm: async () => {\n            if (onConfirm) {\n                confirm.updateProps({ loading: true })\n                if (onConfirm) await onConfirm()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        onCancel: async () => {\n            if (onCancel) {\n                confirm.updateProps({ loading: true })\n                await onCancel()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                onClosed: () => {\n                    confirm.unrender()\n                    if (props?.slotProps?.modal?.onClosed) {\n                        props.slotProps?.modal?.onClosed()\n                    }\n                },\n            }\n        },\n    })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;;;;AAQgB;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}

package/Alert/index.d.ts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { TagProps, useBreakpointPropsType, UseColorTemplateType, UseColorTemplateColor } from '@xanui/core';
+import { TagProps, useBreakpointPropsType, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from '@xanui/core';
 import React, { ReactElement } from 'react';
-import { UseAlerProps } from '../useAlert/index.js';
+import { ModalProps } from '../Modal/index.js';
+import { ButtonProps } from '../Button/index.js';
 
 type AlertProps = Omit<TagProps<"div">, "content" | "title" | "direction"> & {
     title?: useBreakpointPropsType<string | ReactElement>;
@@ -13,11 +14,31 @@ type AlertProps = Omit<TagProps<"div">, "content" | "title" | "direction"> & {
 };
 declare const Alert: {
     ({ children, ...rest }: AlertProps): react_jsx_runtime.JSX.Element;
-    confirm(props: UseAlerProps): {
-        open: () => void;
-        close: () => void;
+    confirm({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, "open" | "loading">): void;
+};
+type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | "size"> & {
+    open: boolean;
+    loading: boolean;
+    content: string | ReactElement;
+    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?: ModalProps['blurMode'];
+    slotProps?: {
+        modal?: Omit<ModalProps, 'open' | "children">;
+        okButton?: Omit<ButtonProps, "children">;
+        closeButton?: Omit<ButtonProps, "children">;
     };
 };
 
 export { Alert as default };
-export type { AlertProps };
+export type { AlertProps, ConfirmAlertProps };

package/Alert/index.js

@@ -2,7 +2,7 @@
 import { __rest } from 'tslib';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useInterface, useBreakpointProps, useColorTemplate, Tag, Renderar } from '@xanui/core';
-import { isValidElement, useRef, useEffect } from 'react';
+import { isValidElement } from 'react';
 import Text from '../Text/index.js';
 import InfoIcon from '@xanui/icons/Info';
 import WarningIcon from '@xanui/icons/Warning';
@@ -10,7 +10,8 @@ import SuccessIcon from '@xanui/icons/CheckCircle';
 import ErrorIcon from '@xanui/icons/Cancel';
 import Close from '@xanui/icons/Close';
 import IconButton from '../IconButton/index.js';
-import useAlert from '../useAlert/index.js';
+import Modal from '../Modal/index.js';
+import Button from '../Button/index.js';
 
 const Alert = (_a) => {
     var { children } = _a, rest = __rest(_a, ["children"]);
@@ -80,37 +81,99 @@ const Alert = (_a) => {
                                     font: "button",
                                 }, children: children })] })] })] })));
 };
-const ActionAlert = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const ref = useRef(null);
-    const alert = useAlert(Object.assign(Object.assign({}, props), { slotProps: Object.assign(Object.assign({}, props.slotProps), { modal: Object.assign(Object.assign({}, (_a = props.slotProps) === null || _a === void 0 ? void 0 : _a.modal), { slotProps: Object.assign(Object.assign({}, (_c = (_b = props.slotProps) === null || _b === void 0 ? void 0 : _b.modal) === null || _c === void 0 ? void 0 : _c.slotProps), { layer: Object.assign(Object.assign({}, (_f = (_e = (_d = props.slotProps) === null || _d === void 0 ? void 0 : _d.modal) === null || _e === void 0 ? void 0 : _e.slotProps) === null || _f === void 0 ? void 0 : _f.layer), { portal: Object.assign(Object.assign({}, (_k = (_j = (_h = (_g = props.slotProps) === null || _g === void 0 ? void 0 : _g.modal) === null || _h === void 0 ? void 0 : _h.slotProps) === null || _j === void 0 ? void 0 : _j.layer) === null || _k === void 0 ? void 0 : _k.portal), { container: ref.current || undefined }) }) }) }) }) }));
-    useEffect(() => {
-        if (props.open) {
-            alert.open();
+const ConfirmAlert = (props) => {
+    let { open, loading, content, size, color, direction, variant, closeButton, clickOutsideToClose, okButtonText, cancelButtonText, hideOkButton, hideCancelButton, buttonPlacement, onConfirm, onCancel, transition, blurMode, slotProps } = props, rest = __rest(props, ["open", "loading", "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 {
-            alert.close();
+            okcolor = color;
+            closecolor = 'default';
         }
-    }, [props.open]);
-    return jsx(Tag, { ref: ref });
+    }
+    return (jsx(Modal, Object.assign({ open: open }, 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) {
+                onCancel && await onCancel();
+            }
+        }, children: jsxs(Alert, Object.assign({ direction: direction, sx: {
+                px: 2,
+                py: 1,
+                pt: direction === 'row' ? 1 : 2
+            }, color: color, variant: variant, onClose: closeButton ? close : undefined }, rest, { children: [content, jsxs(Tag, { sxr: Object.assign({ display: "flex", gap: 1, pt: 4, flexDirection: "row" }, sx), children: [!hideCancelButton && jsx(Button, Object.assign({ disabled: loading, color: closecolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.closeButton, { onClick: async () => {
+                                onCancel && await onCancel();
+                            }, children: cancelButtonText || "Close" })), jsx(Button, Object.assign({ loading: loading, color: okcolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.okButton, { onClick: async () => {
+                                onConfirm && await onConfirm();
+                            }, children: okButtonText || "OK" }))] })] })) })));
 };
-Alert.confirm = (props) => {
-    var _a;
-    const a = Renderar.render(ActionAlert, Object.assign(Object.assign({ open: true }, props), { slotProps: Object.assign(Object.assign({}, props.slotProps), { modal: Object.assign(Object.assign({}, (_a = props.slotProps) === null || _a === void 0 ? void 0 : _a.modal), { onClosed: () => {
+Alert.confirm = (_a) => {
+    var _b;
+    var { onConfirm, onCancel } = _a, props = __rest(_a, ["onConfirm", "onCancel"]);
+    const confirm = Renderar.render(ConfirmAlert, Object.assign(Object.assign({}, props), { open: true, loading: false, onConfirm: async () => {
+            if (onConfirm) {
+                confirm.updateProps({ loading: true });
+                if (onConfirm)
+                    await onConfirm();
+                confirm.updateProps({ open: false, loading: false });
+            }
+            else {
+                confirm.updateProps({ open: false });
+            }
+        }, onCancel: async () => {
+            if (onCancel) {
+                confirm.updateProps({ loading: true });
+                await onCancel();
+                confirm.updateProps({ open: false, loading: false });
+            }
+            else {
+                confirm.updateProps({ open: false });
+            }
+        }, slotProps: Object.assign(Object.assign({}, props.slotProps), { modal: Object.assign(Object.assign({}, (_b = props.slotProps) === null || _b === void 0 ? void 0 : _b.modal), { onClosed: () => {
                     var _a, _b, _c, _d;
-                    a.unrender();
+                    confirm.unrender();
                     if ((_b = (_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.modal) === null || _b === void 0 ? void 0 : _b.onClosed) {
                         (_d = (_c = props.slotProps) === null || _c === void 0 ? void 0 : _c.modal) === null || _d === void 0 ? void 0 : _d.onClosed();
                     }
                 } }) }) }));
-    return {
-        open: () => {
-            a.updateProps({ open: true });
-        },
-        close: () => {
-            a.updateProps({ open: false });
-        },
-    };
 };
 
 export { Alert as default };

package/Alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement, useEffect, useRef } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport useAlert, { UseAlerProps } from \"../useAlert\";\n\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n    let [{\n        title,\n        variant,\n        icon,\n        color,\n        direction,\n        slotProps,\n        onClose,\n        ..._props\n    }] = useInterface<any>(\"Alert\", rest, {\n        variant: \"fill\"\n    })\n    color ??= \"default\"\n    direction ??= \"row\"\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (variant) _p.variant = variant\n    if (icon) _p.icon = icon\n    if (color) _p.color = color\n    if (direction) _p.direction = direction\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    variant = p.variant\n    icon = p.icon\n    color = p.color\n    direction = p.direction\n\n    let isRow = direction === 'row'\n\n\n    const template = useColorTemplate(color, variant)\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'default' ? \"text.primary\" : template.primary.color\n    }\n\n    const icons: any = {\n        \"info\": <InfoIcon sx={iconsx} />,\n        \"warning\": <WarningIcon sx={iconsx} />,\n        \"success\": <SuccessIcon sx={iconsx} />,\n        \"danger\": <ErrorIcon sx={iconsx} />\n    }\n\n    let _icon = icons[icon] || icons[color]\n\n    return (\n        <Tag\n            {..._props}\n            baseClass=\"alert\"\n            sxr={{\n                justifyContent: \"flex-start\",\n                position: \"relative\",\n                radius: 1,\n                px: isRow ? (_icon ? .5 : 2) : 3,\n                py: isRow ? .5 : 3,\n                flexDirection: \"column\",\n                display: 'flex',\n                ..._props?.sx\n            }}\n            {...template.primary}\n        >\n            {\n                onClose && <IconButton\n                    color={color}\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\n                    size={25}\n                    sx={{\n                        position: \"absolute\",\n                        top: 5,\n                        right: 5\n                    }}\n                    onClick={onClose}\n                    className=\"alert-close-button\"\n                >\n                    <IconClose fontSize={18} />\n                </IconButton>\n            }\n            <Tag\n                sx={{\n                    display: \"flex\",\n                    gap: 1,\n                    flexDirection: direction,\n                    alignItems: isRow ? \"flex-start\" : \"center\"\n                }}\n                baseClass=\"alert-container\"\n            >\n                {\n                    _icon && <Tag\n                        baseClass=\"alert-icon\"\n                        sxr={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            p: isRow ? .5 : 0,\n                            \"& svg\": {\n                                color: template.primary.color\n                            }\n                        }}\n                    >\n                        {_icon}\n                    </Tag>\n                }\n                <Tag\n                    baseClass=\"alert-content\"\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        flex: 1,\n                        color: template.primary.color,\n                        textAlign: isRow ? \"left\" : \"center\",\n                        gap: isRow ? 0 : 1\n                    }}\n                >\n                    {title && <>\n                        {\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n                                className=\"alert-titles\"\n                                variant=\"text\"\n                                sx={{\n                                    fontWeight: 500,\n                                    color: template.primary.color\n                                }}\n                            >{title}</Text>\n                        }\n                    </>}\n                    <Tag\n                        sxr={{\n                            font: \"button\",\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Tag>\n            </Tag>\n        </Tag>\n    )\n}\n\nconst ActionAlert = (props: UseAlerProps) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const alert = useAlert({\n        ...props,\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                slotProps: {\n                    ...props.slotProps?.modal?.slotProps,\n                    layer: {\n                        ...props.slotProps?.modal?.slotProps?.layer,\n                        portal: {\n                            ...props.slotProps?.modal?.slotProps?.layer?.portal,\n                            container: ref.current || undefined\n                        }\n                    }\n                }\n            }\n        }\n    })\n\n    useEffect(() => {\n        if (props.open) {\n            alert.open()\n        } else {\n            alert.close()\n        }\n    }, [props.open])\n    return <Tag ref={ref}></Tag>\n}\n\nAlert.confirm = (props: UseAlerProps) => {\n    const a = Renderar.render(ActionAlert as any, {\n        open: true,\n        ...props,\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                onClosed: () => {\n                    a.unrender()\n                    if (props?.slotProps?.modal?.onClosed) {\n                        props.slotProps?.modal?.onClosed()\n                    }\n                },\n            }\n        },\n    })\n\n    return {\n        open: () => {\n            a.updateProps({ open: true })\n        },\n        close: () => {\n            a.updateProps({ open: false })\n        },\n    }\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGH;AAQe;AACA;;AAOR;AACH;AAQzB;AAEA;;AACI;AACA;;AAqBI;;;;;;AAKJ;AACA;AACJ;AAEA;;AACI;;;AASgB;;;AAGJ;;;;;;;;;AAahB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n    let [{\n        title,\n        variant,\n        icon,\n        color,\n        direction,\n        slotProps,\n        onClose,\n        ..._props\n    }] = useInterface<any>(\"Alert\", rest, {\n        variant: \"fill\"\n    })\n    color ??= \"default\"\n    direction ??= \"row\"\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (variant) _p.variant = variant\n    if (icon) _p.icon = icon\n    if (color) _p.color = color\n    if (direction) _p.direction = direction\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    variant = p.variant\n    icon = p.icon\n    color = p.color\n    direction = p.direction\n\n    let isRow = direction === 'row'\n\n\n    const template = useColorTemplate(color, variant)\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'default' ? \"text.primary\" : template.primary.color\n    }\n\n    const icons: any = {\n        \"info\": <InfoIcon sx={iconsx} />,\n        \"warning\": <WarningIcon sx={iconsx} />,\n        \"success\": <SuccessIcon sx={iconsx} />,\n        \"danger\": <ErrorIcon sx={iconsx} />\n    }\n\n    let _icon = icons[icon] || icons[color]\n\n    return (\n        <Tag\n            {..._props}\n            baseClass=\"alert\"\n            sxr={{\n                justifyContent: \"flex-start\",\n                position: \"relative\",\n                radius: 1,\n                px: isRow ? (_icon ? .5 : 2) : 3,\n                py: isRow ? .5 : 3,\n                flexDirection: \"column\",\n                display: 'flex',\n                ..._props?.sx\n            }}\n            {...template.primary}\n        >\n            {\n                onClose && <IconButton\n                    color={color}\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\n                    size={25}\n                    sx={{\n                        position: \"absolute\",\n                        top: 5,\n                        right: 5\n                    }}\n                    onClick={onClose}\n                    className=\"alert-close-button\"\n                >\n                    <IconClose fontSize={18} />\n                </IconButton>\n            }\n            <Tag\n                sx={{\n                    display: \"flex\",\n                    gap: 1,\n                    flexDirection: direction,\n                    alignItems: isRow ? \"flex-start\" : \"center\"\n                }}\n                baseClass=\"alert-container\"\n            >\n                {\n                    _icon && <Tag\n                        baseClass=\"alert-icon\"\n                        sxr={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            p: isRow ? .5 : 0,\n                            \"& svg\": {\n                                color: template.primary.color\n                            }\n                        }}\n                    >\n                        {_icon}\n                    </Tag>\n                }\n                <Tag\n                    baseClass=\"alert-content\"\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        flex: 1,\n                        color: template.primary.color,\n                        textAlign: isRow ? \"left\" : \"center\",\n                        gap: isRow ? 0 : 1\n                    }}\n                >\n                    {title && <>\n                        {\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n                                className=\"alert-titles\"\n                                variant=\"text\"\n                                sx={{\n                                    fontWeight: 500,\n                                    color: template.primary.color\n                                }}\n                            >{title}</Text>\n                        }\n                    </>}\n                    <Tag\n                        sxr={{\n                            font: \"button\",\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Tag>\n            </Tag>\n        </Tag>\n    )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    open: boolean;\n    loading: boolean;\n    content: string | ReactElement,\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?: ModalProps['blurMode'];\n    slotProps?: {\n        modal?: Omit<ModalProps, 'open' | \"children\">;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n    let {\n        open,\n        loading,\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    return (<Modal\n        open={open}\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                onCancel && await onCancel()\n            }\n        }}\n    >\n        <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            {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                        onCancel && await onCancel()\n                    }}\n                >{cancelButtonText || \"Close\"}</Button>}\n                <Button\n                    loading={loading}\n                    color={okcolor}\n                    variant=\"fill\"\n                    {...slotProps?.okButton}\n\n                    onClick={async () => {\n                        onConfirm && await onConfirm()\n                    }}\n                >{okButtonText || \"OK\"}</Button>\n            </Tag>\n        </Alert>\n    </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n    const confirm = Renderar.render(ConfirmAlert as any, {\n        ...props,\n        open: true,\n        loading: false,\n        onConfirm: async () => {\n            if (onConfirm) {\n                confirm.updateProps({ loading: true })\n                if (onConfirm) await onConfirm()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        onCancel: async () => {\n            if (onCancel) {\n                confirm.updateProps({ loading: true })\n                await onCancel()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                onClosed: () => {\n                    confirm.unrender()\n                    if (props?.slotProps?.modal?.onClosed) {\n                        props.slotProps?.modal?.onClosed()\n                    }\n                },\n            }\n        },\n    })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;;;;AAQgB;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}

package/DataFilter/options/NumberFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFilter.cjs","sources":["../../../src/DataFilter/options/NumberFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: number | null;\n   onChange: (value: number | null) => void;\n}\n\nconst NumberFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={() => {\n                     onChange(0);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <InputNumber\n                  variant={\"outline\"}\n                  value={value.toString()}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberFilter"],"names":[],"mappings":";;;;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}
+{"version":3,"file":"NumberFilter.cjs","sources":["../../../src/DataFilter/options/NumberFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: number | null;\n   onChange: (value: number | null) => void;\n}\n\nconst NumberFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={() => {\n                     onChange(0);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <InputNumber\n                  variant={\"outline\"}\n                  value={value.toString() as any}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberFilter"],"names":[],"mappings":";;;;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}

package/DataFilter/options/NumberFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFilter.js","sources":["../../../src/DataFilter/options/NumberFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: number | null;\n   onChange: (value: number | null) => void;\n}\n\nconst NumberFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={() => {\n                     onChange(0);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <InputNumber\n                  variant={\"outline\"}\n                  value={value.toString()}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberFilter"],"names":[],"mappings":";;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}
+{"version":3,"file":"NumberFilter.js","sources":["../../../src/DataFilter/options/NumberFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: number | null;\n   onChange: (value: number | null) => void;\n}\n\nconst NumberFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={() => {\n                     onChange(0);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <InputNumber\n                  variant={\"outline\"}\n                  value={value.toString() as any}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberFilter"],"names":[],"mappings":";;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}

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;;"}