@xanui/ui 1.1.2 → 1.1.4

package/Alert/index.d.ts

@@ -1,8 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { TagProps, useBreakpointPropsType, ColorTemplateType, ColorTemplateColors, TransitionVariantTypes } from '@xanui/core';
-import React, { ReactElement, ReactNode } from 'react';
-import { ModalProps } from '../Modal/index.js';
-import { ButtonProps } from '../Button/index.js';
+import { TagProps, useBreakpointPropsType, ColorTemplateType, ColorTemplateColors } from '@xanui/core';
+import React, { ReactElement } from 'react';
+import { UseAlerProps } from '../useAlert/index.js';
 
 type AlertProps = Omit<TagProps<"div">, "content" | "title" | "direction"> & {
     title?: useBreakpointPropsType<string | ReactElement>;
@@ -14,28 +13,11 @@ type AlertProps = Omit<TagProps<"div">, "content" | "title" | "direction"> & {
 };
 declare const Alert: {
     ({ children, ...rest }: AlertProps): react_jsx_runtime.JSX.Element;
-    confirm(props: AlertConfirmProps): void;
-};
-type AlertConfirmProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | "size"> & {
-    content?: ReactNode;
-    size?: "small" | "medium" | "large" | number;
-    closeButton?: boolean;
-    clickOutsideToClose?: boolean;
-    okButtonText?: string;
-    closeButtonText?: string;
-    hideOkButton?: boolean;
-    hideCloseButton?: boolean;
-    buttonPlacement?: "start" | "end" | "between" | "full";
-    variant?: "text" | "fill";
-    onConfirm?: (ok: boolean) => void;
-    transition?: TransitionVariantTypes;
-    blurMode?: ModalProps['blurMode'];
-    slotProps?: {
-        modal?: Omit<ModalProps, "childred" | "transition" | "blurMode">;
-        okButton?: Omit<ButtonProps, "children">;
-        closeButton?: Omit<ButtonProps, "children">;
+    confirm(props: UseAlerProps): {
+        open: () => void;
+        close: () => void;
     };
 };
 
 export { Alert as default };
-export type { AlertConfirmProps, AlertProps };
+export type { AlertProps };

package/Alert/index.js

@@ -1,4 +1,4 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),React=require('react'),index$1=require('../Text/index.js'),InfoIcon=require('@xanui/icons/Info'),WarningIcon=require('@xanui/icons/Warning'),SuccessIcon=require('@xanui/icons/CheckCircle'),ErrorIcon=require('@xanui/icons/Cancel'),IconClose=require('@xanui/icons/Close'),index=require('../IconButton/index.js'),index$2=require('../Modal/index.js'),index$3=require('../Button/index.js');const Alert = (_a) => {
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),React=require('react'),index$1=require('../Text/index.js'),InfoIcon=require('@xanui/icons/Info'),WarningIcon=require('@xanui/icons/Warning'),SuccessIcon=require('@xanui/icons/CheckCircle'),ErrorIcon=require('@xanui/icons/Cancel'),IconClose=require('@xanui/icons/Close'),index=require('../IconButton/index.js'),index$2=require('../useAlert/index.js');const Alert = (_a) => {
     var { children } = _a, rest = tslib.__rest(_a, ["children"]);
     let [_b] = core.useInterface("Alert", rest, {
         variant: "fill"
@@ -69,69 +69,35 @@
                                     font: "button",
                                 }, children: children })] })] })] })));
 };
-Alert.confirm = (props) => {
-    const id = "_" + Math.random().toString(16);
-    let { content, size, color, direction, variant, closeButton, clickOutsideToClose, okButtonText, closeButtonText, hideOkButton, hideCloseButton, buttonPlacement, onConfirm, transition, blurMode, slotProps } = props, rest = tslib.__rest(props, ["content", "size", "color", "direction", "variant", "closeButton", "clickOutsideToClose", "okButtonText", "closeButtonText", "hideOkButton", "hideCloseButton", "buttonPlacement", "onConfirm", "transition", "blurMode", "slotProps"]);
-    hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
-    hideCloseButton !== null && hideCloseButton !== void 0 ? hideCloseButton : (hideCloseButton = 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 = "row");
-    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
-    };
-    const close = () => index$2.default.close(id);
-    let okcolor = color;
-    let closecolor = color;
-    if (color === 'default') {
-        okcolor = 'brand';
-        closecolor = 'default';
-        variant = 'text';
-    }
-    else {
-        if (variant === 'fill') {
-            okcolor = 'default';
-            closecolor = 'default';
+const ActionAlert = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const ref = React.useRef(null);
+    const alert = index$2.default(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();
         }
         else {
-            okcolor = color;
-            closecolor = 'default';
+            alert.close();
         }
-    }
-    return index$2.default.open(id, 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: [!hideCloseButton && jsxRuntime.jsx(index$3.default, Object.assign({ color: closecolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.closeButton, { onClick: () => {
-                            close();
-                            onConfirm && onConfirm(false);
-                        }, children: closeButtonText || "Close" })), !hideOkButton && jsxRuntime.jsx(index$3.default, Object.assign({ color: okcolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.okButton, { onClick: () => {
-                            index$2.default.close(id);
-                            onConfirm && onConfirm(true);
-                        }, children: okButtonText || "OK" }))] })] })), Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.modal), { size: sizes[size] || size, blur: 40, blurMode: blurMode || "transparent", transition: transition || "zoom", onClickOutside: () => {
-            clickOutsideToClose && close();
-        } }));
+    }, [props.open]);
+    return jsxRuntime.jsx(core.Tag, { ref: ref });
+};
+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: () => {
+                    var _a, _b, _c, _d;
+                    a.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 });
+        },
+    };
 };exports.default=Alert;//# sourceMappingURL=index.js.map

package/Alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\nimport { Tag, TagProps, useBreakpointProps, TransitionVariantTypes, useColorTemplate, ColorTemplateColors, ColorTemplateType, useInterface, useBreakpointPropsType } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement, ReactNode } 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\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\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    delete template.hover\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'default' ? \"text.primary\" : template.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                fontFamily: \"default\",\n                ..._props?.sx\n            }}\n            {...template}\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 ? 1 : 0,\n                            \"& svg\": {\n                                color: template.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.color,\n                        py: 1,\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-title\"\n                                variant=\"text\"\n                                sx={{\n                                    font: \"text\",\n                                    fontWeight: \"bold!important\",\n                                    color: template.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 AlertConfirmProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    content?: ReactNode;\n    size?: \"small\" | \"medium\" | \"large\" | number;\n    closeButton?: boolean;\n    clickOutsideToClose?: boolean;\n    okButtonText?: string;\n    closeButtonText?: string;\n    hideOkButton?: boolean;\n    hideCloseButton?: boolean;\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n    variant?: \"text\" | \"fill\"\n    onConfirm?: (ok: boolean) => void;\n    transition?: TransitionVariantTypes;\n    blurMode?: ModalProps['blurMode'];\n    slotProps?: {\n        modal?: Omit<ModalProps, \"childred\" | \"transition\" | \"blurMode\">;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\nAlert.confirm = (props: AlertConfirmProps) => {\n    const id = \"_\" + Math.random().toString(16)\n    let {\n        content,\n        size,\n        color,\n        direction,\n        variant,\n        closeButton,\n        clickOutsideToClose,\n        okButtonText,\n        closeButtonText,\n        hideOkButton,\n        hideCloseButton,\n        buttonPlacement,\n        onConfirm,\n        transition,\n        blurMode,\n        slotProps,\n        ...rest\n    } = props\n\n    hideOkButton ??= false\n    hideCloseButton ??= false\n\n    size ??= \"small\"\n    color ??= 'default'\n    variant ??= \"text\"\n    direction ??= \"row\"\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    const close = () => Modal.close(id)\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.open(id, <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            {!hideCloseButton && <Button\n                color={closecolor}\n                variant=\"fill\"\n                {...slotProps?.closeButton}\n                onClick={() => {\n                    close()\n                    onConfirm && onConfirm(false)\n                }}\n            >{closeButtonText || \"Close\"}</Button>}\n            {!hideOkButton && <Button\n                color={okcolor}\n                variant=\"fill\"\n                {...slotProps?.okButton}\n\n                onClick={() => {\n                    Modal.close(id)\n                    onConfirm && onConfirm(true)\n                }}\n            >{okButtonText || \"OK\"}</Button>}\n        </Tag>\n    </Alert>, {\n        ...slotProps?.modal,\n        size: sizes[size] || size,\n        blur: 40,\n        blurMode: blurMode || \"transparent\",\n        transition: transition || \"zoom\",\n        onClickOutside: () => {\n            clickOutsideToClose && close()\n        }\n    })\n}\n\nexport default Alert"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","_jsxs","Tag","IconButton","_Fragment","isValidElement","Text","Modal","Button"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, ColorTemplateColors, ColorTemplateType, useInterface, useBreakpointPropsType, Renderar } 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<ColorTemplateType>;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\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    delete template.hover\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'default' ? \"text.primary\" : template.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                fontFamily: \"default\",\n                ..._props?.sx\n            }}\n            {...template}\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 ? 1 : 0,\n                            \"& svg\": {\n                                color: template.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.color,\n                        py: 1,\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-title\"\n                                variant=\"text\"\n                                sx={{\n                                    font: \"text\",\n                                    fontWeight: \"bold!important\",\n                                    color: template.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":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","_jsxs","Tag","IconButton","_Fragment","isValidElement","Text","useRef","useAlert","useEffect","Renderar"],"mappings":"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"}

package/Alert/index.mjs

@@ -1,4 +1,4 @@
-import {__rest}from'tslib';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useInterface,useBreakpointProps,useColorTemplate,Tag}from'@xanui/core';import {isValidElement}from'react';import Text from'../Text/index.mjs';import InfoIcon from'@xanui/icons/Info';import WarningIcon from'@xanui/icons/Warning';import SuccessIcon from'@xanui/icons/CheckCircle';import ErrorIcon from'@xanui/icons/Cancel';import IconClose from'@xanui/icons/Close';import IconButton from'../IconButton/index.mjs';import Modal from'../Modal/index.mjs';import Button from'../Button/index.mjs';const Alert = (_a) => {
+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 Text from'../Text/index.mjs';import InfoIcon from'@xanui/icons/Info';import WarningIcon from'@xanui/icons/Warning';import SuccessIcon from'@xanui/icons/CheckCircle';import ErrorIcon from'@xanui/icons/Cancel';import IconClose from'@xanui/icons/Close';import IconButton from'../IconButton/index.mjs';import useAlert from'../useAlert/index.mjs';const Alert = (_a) => {
     var { children } = _a, rest = __rest(_a, ["children"]);
     let [_b] = useInterface("Alert", rest, {
         variant: "fill"
@@ -69,69 +69,35 @@ import {__rest}from'tslib';import {jsx,jsxs,Fragment}from'react/jsx-runtime';imp
                                     font: "button",
                                 }, children: children })] })] })] })));
 };
-Alert.confirm = (props) => {
-    const id = "_" + Math.random().toString(16);
-    let { content, size, color, direction, variant, closeButton, clickOutsideToClose, okButtonText, closeButtonText, hideOkButton, hideCloseButton, buttonPlacement, onConfirm, transition, blurMode, slotProps } = props, rest = __rest(props, ["content", "size", "color", "direction", "variant", "closeButton", "clickOutsideToClose", "okButtonText", "closeButtonText", "hideOkButton", "hideCloseButton", "buttonPlacement", "onConfirm", "transition", "blurMode", "slotProps"]);
-    hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
-    hideCloseButton !== null && hideCloseButton !== void 0 ? hideCloseButton : (hideCloseButton = 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 = "row");
-    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
-    };
-    const close = () => Modal.close(id);
-    let okcolor = color;
-    let closecolor = color;
-    if (color === 'default') {
-        okcolor = 'brand';
-        closecolor = 'default';
-        variant = 'text';
-    }
-    else {
-        if (variant === 'fill') {
-            okcolor = 'default';
-            closecolor = 'default';
+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();
         }
         else {
-            okcolor = color;
-            closecolor = 'default';
+            alert.close();
         }
-    }
-    return Modal.open(id, 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: [!hideCloseButton && jsx(Button, Object.assign({ color: closecolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.closeButton, { onClick: () => {
-                            close();
-                            onConfirm && onConfirm(false);
-                        }, children: closeButtonText || "Close" })), !hideOkButton && jsx(Button, Object.assign({ color: okcolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.okButton, { onClick: () => {
-                            Modal.close(id);
-                            onConfirm && onConfirm(true);
-                        }, children: okButtonText || "OK" }))] })] })), Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.modal), { size: sizes[size] || size, blur: 40, blurMode: blurMode || "transparent", transition: transition || "zoom", onClickOutside: () => {
-            clickOutsideToClose && close();
-        } }));
+    }, [props.open]);
+    return jsx(Tag, { ref: ref });
+};
+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: () => {
+                    var _a, _b, _c, _d;
+                    a.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};//# sourceMappingURL=index.mjs.map

package/Alert/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\nimport { Tag, TagProps, useBreakpointProps, TransitionVariantTypes, useColorTemplate, ColorTemplateColors, ColorTemplateType, useInterface, useBreakpointPropsType } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement, ReactNode } 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\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\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    delete template.hover\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'default' ? \"text.primary\" : template.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                fontFamily: \"default\",\n                ..._props?.sx\n            }}\n            {...template}\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 ? 1 : 0,\n                            \"& svg\": {\n                                color: template.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.color,\n                        py: 1,\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-title\"\n                                variant=\"text\"\n                                sx={{\n                                    font: \"text\",\n                                    fontWeight: \"bold!important\",\n                                    color: template.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 AlertConfirmProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    content?: ReactNode;\n    size?: \"small\" | \"medium\" | \"large\" | number;\n    closeButton?: boolean;\n    clickOutsideToClose?: boolean;\n    okButtonText?: string;\n    closeButtonText?: string;\n    hideOkButton?: boolean;\n    hideCloseButton?: boolean;\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n    variant?: \"text\" | \"fill\"\n    onConfirm?: (ok: boolean) => void;\n    transition?: TransitionVariantTypes;\n    blurMode?: ModalProps['blurMode'];\n    slotProps?: {\n        modal?: Omit<ModalProps, \"childred\" | \"transition\" | \"blurMode\">;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\nAlert.confirm = (props: AlertConfirmProps) => {\n    const id = \"_\" + Math.random().toString(16)\n    let {\n        content,\n        size,\n        color,\n        direction,\n        variant,\n        closeButton,\n        clickOutsideToClose,\n        okButtonText,\n        closeButtonText,\n        hideOkButton,\n        hideCloseButton,\n        buttonPlacement,\n        onConfirm,\n        transition,\n        blurMode,\n        slotProps,\n        ...rest\n    } = props\n\n    hideOkButton ??= false\n    hideCloseButton ??= false\n\n    size ??= \"small\"\n    color ??= 'default'\n    variant ??= \"text\"\n    direction ??= \"row\"\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    const close = () => Modal.close(id)\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.open(id, <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            {!hideCloseButton && <Button\n                color={closecolor}\n                variant=\"fill\"\n                {...slotProps?.closeButton}\n                onClick={() => {\n                    close()\n                    onConfirm && onConfirm(false)\n                }}\n            >{closeButtonText || \"Close\"}</Button>}\n            {!hideOkButton && <Button\n                color={okcolor}\n                variant=\"fill\"\n                {...slotProps?.okButton}\n\n                onClick={() => {\n                    Modal.close(id)\n                    onConfirm && onConfirm(true)\n                }}\n            >{okButtonText || \"OK\"}</Button>}\n        </Tag>\n    </Alert>, {\n        ...slotProps?.modal,\n        size: sizes[size] || size,\n        blur: 40,\n        blurMode: blurMode || \"transparent\",\n        transition: transition || \"zoom\",\n        onClickOutside: () => {\n            clickOutsideToClose && close()\n        }\n    })\n}\n\nexport default Alert"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, ColorTemplateColors, ColorTemplateType, useInterface, useBreakpointPropsType, Renderar } 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<ColorTemplateType>;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\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    delete template.hover\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'default' ? \"text.primary\" : template.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                fontFamily: \"default\",\n                ..._props?.sx\n            }}\n            {...template}\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 ? 1 : 0,\n                            \"& svg\": {\n                                color: template.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.color,\n                        py: 1,\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-title\"\n                                variant=\"text\"\n                                sx={{\n                                    font: \"text\",\n                                    fontWeight: \"bold!important\",\n                                    color: template.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":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/CalendarInput/index.d.ts

@@ -3,11 +3,12 @@ import { InputProps } from '../Input/index.js';
 import { MenuProps } from '../Menu/index.js';
 import { CalendarProps } from '../Calendar/index.js';
 
-type CalenderInpurProps = Omit<InputProps, "value" | "onChange"> & {
+type CalenderInpurProps = Omit<InputProps, "value" | "onChange" | "slotProps"> & {
     value?: CalendarProps["value"];
     onChange?: CalendarProps["onChange"];
     getInputValue?: (value?: Date | null) => string;
     slotProps?: {
+        input?: InputProps['slotProps'];
         calender?: CalendarProps;
         menu?: MenuProps;
     };

package/CalendarInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/CalendarInput/index.tsx"],"sourcesContent":["\nimport Input, { InputProps } from '../Input'\nimport Menu, { MenuProps } from '../Menu'\nimport { useRef, useState } from 'react'\nimport Calendar, { CalendarProps } from '../Calendar'\nimport Stack from '../Stack'\nimport ClickOutside from '../ClickOutside'\nimport CalendarIcon from '@xanui/icons/CalendarMonth';\nimport IconButton from '../IconButton'\nimport ClearIcon from '@xanui/icons/Clear';\nimport { useInterface } from '@xanui/core'\n\nexport type CalenderInpurProps = Omit<InputProps, \"value\" | \"onChange\"> & {\n    value?: CalendarProps[\"value\"];\n    onChange?: CalendarProps[\"onChange\"];\n    getInputValue?: (value?: Date | null) => string;\n    slotProps?: {\n        calender?: CalendarProps;\n        menu?: MenuProps;\n    }\n}\n\nconst CalenderInput = (props: CalenderInpurProps) => {\n    let [{ value, onChange, getInputValue, slotProps, placeholder, ...inputProps }] = useInterface<any>(\"CanlendarInput\", props, {})\n    const [target, setTarget] = useState<any>()\n    const inputRef: any = useRef(null)\n\n    return (\n        <>\n            <Input\n                readOnly\n                onClick={() => setTarget(target ? null : inputRef?.current)}\n                startIcon={<CalendarIcon />}\n                {...inputProps}\n                endIcon={<>\n                    {value && <Stack>\n                        <IconButton\n                            color=\"default\"\n                            size={28}\n                            variant=\"text\"\n                            onClick={() => {\n                                onChange && onChange(null)\n                            }}\n                        >\n                            <ClearIcon fontSize={20} />\n                        </IconButton>\n                    </Stack>}\n                </>}\n                cursor=\"pointer\"\n                containerRef={inputRef}\n                value={getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString(\"en-US\") : \"\")}\n            />\n            <Menu\n                target={target}\n                placement=\"bottom-left\"\n                bgcolor=\"transparent\"\n                {...slotProps?.menu}\n            >\n                <ClickOutside onClickOutside={() => setTarget(null)}>\n                    <Calendar\n                        {...slotProps?.calender}\n                        value={value}\n                        onChange={(e) => {\n                            setTarget(null)\n                            onChange && onChange(e)\n                        }}\n                    />\n                </ClickOutside>\n            </Menu>\n        </>\n    )\n}\n\nexport default CalenderInput"],"names":["useInterface","__rest","useState","useRef","_jsxs","_Fragment","_jsx","Input","Stack","IconButton","Menu","ClickOutside","Calendar"],"mappings":"igBAsBA,MAAM,aAAa,GAAG,CAAC,KAAyB,KAAI;IAChD,IAAI,CAAA,EAAA,CAAA,GAA8EA,iBAAY,CAAM,gBAAgB,EAAE,KAAK,EAAE,EAAE,CAAC,EAA3H,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW,EAAA,GAAA,EAAiB,EAAZ,UAAU,GAAAC,YAAA,CAAA,EAAA,EAAvE,CAAA,OAAA,EAAA,UAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,CAAyE,CAAkD;IAChI,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGC,cAAQ,EAAO;AAC3C,IAAA,MAAM,QAAQ,GAAQC,YAAM,CAAC,IAAI,CAAC;AAElC,IAAA,QACIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACIC,cAAA,CAACC,aAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACF,QAAQ,EAAA,IAAA,EACR,OAAO,EAAE,MAAM,SAAS,CAAC,MAAM,GAAG,IAAI,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAE,OAAO,CAAC,EAC3D,SAAS,EAAED,cAAA,CAAC,YAAY,EAAA,EAAA,CAAG,EAAA,EACvB,UAAU,EAAA,EACd,OAAO,EAAEA,cAAA,CAAAD,mBAAA,EAAA,EAAA,QAAA,EACJ,KAAK,IAAIC,cAAA,CAACE,eAAK,cACZF,cAAA,CAACG,eAAU,EAAA,EACP,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,EAAE,EACR,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,MAAK;AACV,gCAAA,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC;4BAC9B,CAAC,EAAA,QAAA,EAEDH,eAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,EAAE,EAAA,CAAI,EAAA,CAClB,EAAA,CACT,EAAA,CACT,EACH,MAAM,EAAC,SAAS,EAChB,YAAY,EAAE,QAAQ,EACtB,KAAK,EAAE,aAAa,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAA,CAAA,CAChG,EACFA,cAAA,CAACI,eAAI,kBACD,MAAM,EAAE,MAAM,EACd,SAAS,EAAC,aAAa,EACvB,OAAO,EAAC,aAAa,EAAA,EACjB,SAAS,aAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,EAAA,EAAA,QAAA,EAEnBJ,eAACK,eAAY,EAAA,EAAC,cAAc,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,EAAA,QAAA,EAC/CL,cAAA,CAACM,eAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACD,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,QAAQ,EAAA,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,KAAI;4BACZ,SAAS,CAAC,IAAI,CAAC;AACf,4BAAA,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC;AAC3B,wBAAA,CAAC,EAAA,CAAA,CACH,EAAA,CACS,EAAA,CAAA,CACZ,CAAA,EAAA,CACR;AAEX"}
+{"version":3,"file":"index.js","sources":["../../src/CalendarInput/index.tsx"],"sourcesContent":["\nimport Input, { InputProps } from '../Input'\nimport Menu, { MenuProps } from '../Menu'\nimport { useRef, useState } from 'react'\nimport Calendar, { CalendarProps } from '../Calendar'\nimport Stack from '../Stack'\nimport ClickOutside from '../ClickOutside'\nimport CalendarIcon from '@xanui/icons/CalendarMonth';\nimport IconButton from '../IconButton'\nimport ClearIcon from '@xanui/icons/Clear';\nimport { useInterface } from '@xanui/core'\n\nexport type CalenderInpurProps = Omit<InputProps, \"value\" | \"onChange\" | \"slotProps\"> & {\n    value?: CalendarProps[\"value\"];\n    onChange?: CalendarProps[\"onChange\"];\n    getInputValue?: (value?: Date | null) => string;\n    slotProps?: {\n        input?: InputProps['slotProps'];\n        calender?: CalendarProps;\n        menu?: MenuProps;\n    }\n}\n\nconst CalenderInput = (props: CalenderInpurProps) => {\n    let [{ value, onChange, getInputValue, slotProps, placeholder, ...inputProps }] = useInterface<any>(\"CanlendarInput\", props, {})\n    const [target, setTarget] = useState<any>()\n    const inputRef: any = useRef(null)\n\n    return (\n        <>\n            <Input\n                readOnly\n                onClick={() => setTarget(target ? null : inputRef?.current)}\n                startIcon={<CalendarIcon />}\n                {...inputProps}\n                endIcon={<>\n                    {value && <Stack>\n                        <IconButton\n                            color=\"default\"\n                            size={28}\n                            variant=\"text\"\n                            onClick={() => {\n                                onChange && onChange(null)\n                            }}\n                        >\n                            <ClearIcon fontSize={20} />\n                        </IconButton>\n                    </Stack>}\n                </>}\n                cursor=\"pointer\"\n                containerRef={inputRef}\n                value={getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString(\"en-US\") : \"\")}\n            />\n            <Menu\n                target={target}\n                placement=\"bottom-left\"\n                bgcolor=\"transparent\"\n                {...slotProps?.menu}\n            >\n                <ClickOutside onClickOutside={() => setTarget(null)}>\n                    <Calendar\n                        {...slotProps?.calender}\n                        value={value}\n                        onChange={(e) => {\n                            setTarget(null)\n                            onChange && onChange(e)\n                        }}\n                    />\n                </ClickOutside>\n            </Menu>\n        </>\n    )\n}\n\nexport default CalenderInput"],"names":["useInterface","__rest","useState","useRef","_jsxs","_Fragment","_jsx","Input","Stack","IconButton","Menu","ClickOutside","Calendar"],"mappings":"igBAuBA,MAAM,aAAa,GAAG,CAAC,KAAyB,KAAI;IAChD,IAAI,CAAA,EAAA,CAAA,GAA8EA,iBAAY,CAAM,gBAAgB,EAAE,KAAK,EAAE,EAAE,CAAC,EAA3H,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW,EAAA,GAAA,EAAiB,EAAZ,UAAU,GAAAC,YAAA,CAAA,EAAA,EAAvE,CAAA,OAAA,EAAA,UAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,CAAyE,CAAkD;IAChI,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGC,cAAQ,EAAO;AAC3C,IAAA,MAAM,QAAQ,GAAQC,YAAM,CAAC,IAAI,CAAC;AAElC,IAAA,QACIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACIC,cAAA,CAACC,aAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACF,QAAQ,EAAA,IAAA,EACR,OAAO,EAAE,MAAM,SAAS,CAAC,MAAM,GAAG,IAAI,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAE,OAAO,CAAC,EAC3D,SAAS,EAAED,cAAA,CAAC,YAAY,EAAA,EAAA,CAAG,EAAA,EACvB,UAAU,EAAA,EACd,OAAO,EAAEA,cAAA,CAAAD,mBAAA,EAAA,EAAA,QAAA,EACJ,KAAK,IAAIC,cAAA,CAACE,eAAK,cACZF,cAAA,CAACG,eAAU,EAAA,EACP,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,EAAE,EACR,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,MAAK;AACV,gCAAA,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC;4BAC9B,CAAC,EAAA,QAAA,EAEDH,eAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,EAAE,EAAA,CAAI,EAAA,CAClB,EAAA,CACT,EAAA,CACT,EACH,MAAM,EAAC,SAAS,EAChB,YAAY,EAAE,QAAQ,EACtB,KAAK,EAAE,aAAa,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAA,CAAA,CAChG,EACFA,cAAA,CAACI,eAAI,kBACD,MAAM,EAAE,MAAM,EACd,SAAS,EAAC,aAAa,EACvB,OAAO,EAAC,aAAa,EAAA,EACjB,SAAS,aAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,EAAA,EAAA,QAAA,EAEnBJ,eAACK,eAAY,EAAA,EAAC,cAAc,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,EAAA,QAAA,EAC/CL,cAAA,CAACM,eAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACD,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,QAAQ,EAAA,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,KAAI;4BACZ,SAAS,CAAC,IAAI,CAAC;AACf,4BAAA,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC;AAC3B,wBAAA,CAAC,EAAA,CAAA,CACH,EAAA,CACS,EAAA,CAAA,CACZ,CAAA,EAAA,CACR;AAEX"}

package/CalendarInput/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/CalendarInput/index.tsx"],"sourcesContent":["\nimport Input, { InputProps } from '../Input'\nimport Menu, { MenuProps } from '../Menu'\nimport { useRef, useState } from 'react'\nimport Calendar, { CalendarProps } from '../Calendar'\nimport Stack from '../Stack'\nimport ClickOutside from '../ClickOutside'\nimport CalendarIcon from '@xanui/icons/CalendarMonth';\nimport IconButton from '../IconButton'\nimport ClearIcon from '@xanui/icons/Clear';\nimport { useInterface } from '@xanui/core'\n\nexport type CalenderInpurProps = Omit<InputProps, \"value\" | \"onChange\"> & {\n    value?: CalendarProps[\"value\"];\n    onChange?: CalendarProps[\"onChange\"];\n    getInputValue?: (value?: Date | null) => string;\n    slotProps?: {\n        calender?: CalendarProps;\n        menu?: MenuProps;\n    }\n}\n\nconst CalenderInput = (props: CalenderInpurProps) => {\n    let [{ value, onChange, getInputValue, slotProps, placeholder, ...inputProps }] = useInterface<any>(\"CanlendarInput\", props, {})\n    const [target, setTarget] = useState<any>()\n    const inputRef: any = useRef(null)\n\n    return (\n        <>\n            <Input\n                readOnly\n                onClick={() => setTarget(target ? null : inputRef?.current)}\n                startIcon={<CalendarIcon />}\n                {...inputProps}\n                endIcon={<>\n                    {value && <Stack>\n                        <IconButton\n                            color=\"default\"\n                            size={28}\n                            variant=\"text\"\n                            onClick={() => {\n                                onChange && onChange(null)\n                            }}\n                        >\n                            <ClearIcon fontSize={20} />\n                        </IconButton>\n                    </Stack>}\n                </>}\n                cursor=\"pointer\"\n                containerRef={inputRef}\n                value={getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString(\"en-US\") : \"\")}\n            />\n            <Menu\n                target={target}\n                placement=\"bottom-left\"\n                bgcolor=\"transparent\"\n                {...slotProps?.menu}\n            >\n                <ClickOutside onClickOutside={() => setTarget(null)}>\n                    <Calendar\n                        {...slotProps?.calender}\n                        value={value}\n                        onChange={(e) => {\n                            setTarget(null)\n                            onChange && onChange(e)\n                        }}\n                    />\n                </ClickOutside>\n            </Menu>\n        </>\n    )\n}\n\nexport default CalenderInput"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"ufAsBA,MAAM,aAAa,GAAG,CAAC,KAAyB,KAAI;IAChD,IAAI,CAAA,EAAA,CAAA,GAA8E,YAAY,CAAM,gBAAgB,EAAE,KAAK,EAAE,EAAE,CAAC,EAA3H,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW,EAAA,GAAA,EAAiB,EAAZ,UAAU,GAAA,MAAA,CAAA,EAAA,EAAvE,CAAA,OAAA,EAAA,UAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,CAAyE,CAAkD;IAChI,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAO;AAC3C,IAAA,MAAM,QAAQ,GAAQ,MAAM,CAAC,IAAI,CAAC;AAElC,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAA,CAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACF,QAAQ,EAAA,IAAA,EACR,OAAO,EAAE,MAAM,SAAS,CAAC,MAAM,GAAG,IAAI,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAE,OAAO,CAAC,EAC3D,SAAS,EAAEA,GAAA,CAAC,YAAY,EAAA,EAAA,CAAG,EAAA,EACvB,UAAU,EAAA,EACd,OAAO,EAAEA,GAAA,CAAAD,QAAA,EAAA,EAAA,QAAA,EACJ,KAAK,IAAIC,GAAA,CAAC,KAAK,cACZA,GAAA,CAAC,UAAU,EAAA,EACP,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,EAAE,EACR,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,MAAK;AACV,gCAAA,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC;4BAC9B,CAAC,EAAA,QAAA,EAEDA,IAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,EAAE,EAAA,CAAI,EAAA,CAClB,EAAA,CACT,EAAA,CACT,EACH,MAAM,EAAC,SAAS,EAChB,YAAY,EAAE,QAAQ,EACtB,KAAK,EAAE,aAAa,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAA,CAAA,CAChG,EACFA,GAAA,CAAC,IAAI,kBACD,MAAM,EAAE,MAAM,EACd,SAAS,EAAC,aAAa,EACvB,OAAO,EAAC,aAAa,EAAA,EACjB,SAAS,aAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,EAAA,EAAA,QAAA,EAEnBA,IAAC,YAAY,EAAA,EAAC,cAAc,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,EAAA,QAAA,EAC/CA,GAAA,CAAC,QAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACD,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,QAAQ,EAAA,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,KAAI;4BACZ,SAAS,CAAC,IAAI,CAAC;AACf,4BAAA,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC;AAC3B,wBAAA,CAAC,EAAA,CAAA,CACH,EAAA,CACS,EAAA,CAAA,CACZ,CAAA,EAAA,CACR;AAEX"}
+{"version":3,"file":"index.mjs","sources":["../../src/CalendarInput/index.tsx"],"sourcesContent":["\nimport Input, { InputProps } from '../Input'\nimport Menu, { MenuProps } from '../Menu'\nimport { useRef, useState } from 'react'\nimport Calendar, { CalendarProps } from '../Calendar'\nimport Stack from '../Stack'\nimport ClickOutside from '../ClickOutside'\nimport CalendarIcon from '@xanui/icons/CalendarMonth';\nimport IconButton from '../IconButton'\nimport ClearIcon from '@xanui/icons/Clear';\nimport { useInterface } from '@xanui/core'\n\nexport type CalenderInpurProps = Omit<InputProps, \"value\" | \"onChange\" | \"slotProps\"> & {\n    value?: CalendarProps[\"value\"];\n    onChange?: CalendarProps[\"onChange\"];\n    getInputValue?: (value?: Date | null) => string;\n    slotProps?: {\n        input?: InputProps['slotProps'];\n        calender?: CalendarProps;\n        menu?: MenuProps;\n    }\n}\n\nconst CalenderInput = (props: CalenderInpurProps) => {\n    let [{ value, onChange, getInputValue, slotProps, placeholder, ...inputProps }] = useInterface<any>(\"CanlendarInput\", props, {})\n    const [target, setTarget] = useState<any>()\n    const inputRef: any = useRef(null)\n\n    return (\n        <>\n            <Input\n                readOnly\n                onClick={() => setTarget(target ? null : inputRef?.current)}\n                startIcon={<CalendarIcon />}\n                {...inputProps}\n                endIcon={<>\n                    {value && <Stack>\n                        <IconButton\n                            color=\"default\"\n                            size={28}\n                            variant=\"text\"\n                            onClick={() => {\n                                onChange && onChange(null)\n                            }}\n                        >\n                            <ClearIcon fontSize={20} />\n                        </IconButton>\n                    </Stack>}\n                </>}\n                cursor=\"pointer\"\n                containerRef={inputRef}\n                value={getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString(\"en-US\") : \"\")}\n            />\n            <Menu\n                target={target}\n                placement=\"bottom-left\"\n                bgcolor=\"transparent\"\n                {...slotProps?.menu}\n            >\n                <ClickOutside onClickOutside={() => setTarget(null)}>\n                    <Calendar\n                        {...slotProps?.calender}\n                        value={value}\n                        onChange={(e) => {\n                            setTarget(null)\n                            onChange && onChange(e)\n                        }}\n                    />\n                </ClickOutside>\n            </Menu>\n        </>\n    )\n}\n\nexport default CalenderInput"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"ufAuBA,MAAM,aAAa,GAAG,CAAC,KAAyB,KAAI;IAChD,IAAI,CAAA,EAAA,CAAA,GAA8E,YAAY,CAAM,gBAAgB,EAAE,KAAK,EAAE,EAAE,CAAC,EAA3H,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW,EAAA,GAAA,EAAiB,EAAZ,UAAU,GAAA,MAAA,CAAA,EAAA,EAAvE,CAAA,OAAA,EAAA,UAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,CAAyE,CAAkD;IAChI,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAO;AAC3C,IAAA,MAAM,QAAQ,GAAQ,MAAM,CAAC,IAAI,CAAC;AAElC,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAA,CAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACF,QAAQ,EAAA,IAAA,EACR,OAAO,EAAE,MAAM,SAAS,CAAC,MAAM,GAAG,IAAI,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAE,OAAO,CAAC,EAC3D,SAAS,EAAEA,GAAA,CAAC,YAAY,EAAA,EAAA,CAAG,EAAA,EACvB,UAAU,EAAA,EACd,OAAO,EAAEA,GAAA,CAAAD,QAAA,EAAA,EAAA,QAAA,EACJ,KAAK,IAAIC,GAAA,CAAC,KAAK,cACZA,GAAA,CAAC,UAAU,EAAA,EACP,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,EAAE,EACR,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,MAAK;AACV,gCAAA,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC;4BAC9B,CAAC,EAAA,QAAA,EAEDA,IAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,EAAE,EAAA,CAAI,EAAA,CAClB,EAAA,CACT,EAAA,CACT,EACH,MAAM,EAAC,SAAS,EAChB,YAAY,EAAE,QAAQ,EACtB,KAAK,EAAE,aAAa,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAA,CAAA,CAChG,EACFA,GAAA,CAAC,IAAI,kBACD,MAAM,EAAE,MAAM,EACd,SAAS,EAAC,aAAa,EACvB,OAAO,EAAC,aAAa,EAAA,EACjB,SAAS,aAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,EAAA,EAAA,QAAA,EAEnBA,IAAC,YAAY,EAAA,EAAC,cAAc,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,EAAA,QAAA,EAC/CA,GAAA,CAAC,QAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACD,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,QAAQ,EAAA,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,KAAI;4BACZ,SAAS,CAAC,IAAI,CAAC;AACf,4BAAA,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC;AAC3B,wBAAA,CAAC,EAAA,CAAA,CACH,EAAA,CACS,EAAA,CAAA,CACZ,CAAA,EAAA,CACR;AAEX"}

package/ClickOutside/index.d.ts

@@ -4,7 +4,7 @@ import React from 'react';
 type ClickOutsideProps<T extends TagComponentType = "div"> = TagProps<T> & {
     onClickOutside: () => void;
 };
-declare const ClickOutside: React.ForwardRefExoticComponent<Omit<ClickOutsideProps<"div">, "ref"> & React.RefAttributes<any>>;
+declare const ClickOutside: React.ForwardRefExoticComponent<Omit<ClickOutsideProps<"div">, "ref"> & React.RefAttributes<unknown>>;
 
 export { ClickOutside as default };
 export type { ClickOutsideProps };

package/ClickOutside/index.js

@@ -1,16 +1,26 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),React=require('react');const ClickOutside = React.forwardRef((_a, ref) => {
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),React=require('react');const ClickOutside = React.forwardRef((_a, forwardedRef) => {
     var { children, onClickOutside } = _a, props = tslib.__rest(_a, ["children", "onClickOutside"]);
-    const _ref = ref || React.useRef(null);
-    const handler = (e) => {
-        if (!_ref.current.contains(e.target)) {
-            onClickOutside();
+    const innerRef = React.useRef(null);
+    // merge refs
+    const setRefs = (el) => {
+        innerRef.current = el;
+        if (typeof forwardedRef === "function") {
+            forwardedRef(el);
+        }
+        else if (forwardedRef) {
+            forwardedRef.current = el;
         }
     };
     React.useEffect(() => {
-        document.addEventListener("click", handler);
-        return () => {
-            document.removeEventListener("click", handler);
+        const handler = (e) => {
+            if (!innerRef.current)
+                return;
+            if (!innerRef.current.contains(e.target)) {
+                onClickOutside();
+            }
         };
-    }, []);
-    return jsxRuntime.jsx(core.Tag, Object.assign({}, props, { ref: _ref, children: children }));
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [onClickOutside]);
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { ref: setRefs, children: children })));
 });exports.default=ClickOutside;//# sourceMappingURL=index.js.map

package/ClickOutside/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\nimport React, { useEffect, useRef } from 'react';\n\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    onClickOutside: () => void\n}\n\nconst ClickOutside = React.forwardRef(({ children, onClickOutside, ...props }: ClickOutsideProps, ref: React.Ref<any>) => {\n    const _ref: any = ref || useRef(null)\n    const handler = (e: any) => {\n        if (!_ref.current.contains(e.target)) {\n            onClickOutside()\n        }\n    }\n    useEffect(() => {\n        document.addEventListener(\"click\", handler)\n        return () => {\n            document.removeEventListener(\"click\", handler)\n        }\n    }, [])\n\n\n    return <Tag\n        {...props}\n        ref={_ref}\n    >\n        {children}\n    </Tag>\n\n})\n\nexport default ClickOutside"],"names":["__rest","useRef","useEffect","_jsx","Tag"],"mappings":"4LAQA,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAyD,EAAE,GAAmB,KAAI;QAAlF,EAAE,QAAQ,EAAE,cAAc,EAAA,GAAA,EAA+B,EAA1B,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApC,8BAAsC,CAAF;IACvE,MAAM,IAAI,GAAQ,GAAG,IAAIC,YAAM,CAAC,IAAI,CAAC;AACrC,IAAA,MAAM,OAAO,GAAG,CAAC,CAAM,KAAI;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE;AAClC,YAAA,cAAc,EAAE;QACpB;AACJ,IAAA,CAAC;IACDC,eAAS,CAAC,MAAK;AACX,QAAA,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC3C,QAAA,OAAO,MAAK;AACR,YAAA,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC;AAClD,QAAA,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;IAGN,OAAOC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,KAAK,EAAA,EACT,GAAG,EAAE,IAAI,EAAA,QAAA,EAER,QAAQ,EAAA,CAAA,CACP;AAEV,CAAC"}
+{"version":3,"file":"index.js","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["import { Tag, TagComponentType, TagProps } from '@xanui/core';\nimport React, { useEffect, useRef } from 'react';\n\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    onClickOutside: () => void;\n};\n\nconst ClickOutside = React.forwardRef(({ children, onClickOutside, ...props }: ClickOutsideProps, forwardedRef: any) => {\n\n    const innerRef = useRef<HTMLElement | null>(null);\n\n    // merge refs\n    const setRefs = (el: HTMLElement) => {\n        innerRef.current = el;\n\n        if (typeof forwardedRef === \"function\") {\n            forwardedRef(el);\n        } else if (forwardedRef) {\n            forwardedRef.current = el;\n        }\n    };\n\n    useEffect(() => {\n        const handler = (e: MouseEvent) => {\n            if (!innerRef.current) return;\n            if (!innerRef.current.contains(e.target as Node)) {\n                onClickOutside();\n            }\n        };\n\n        document.addEventListener(\"mousedown\", handler);\n        return () => document.removeEventListener(\"mousedown\", handler);\n    }, [onClickOutside]);\n\n    return (\n        <Tag {...props} ref={setRefs}>\n            {children}\n        </Tag>\n    );\n}\n);\n\nexport default ClickOutside;\n"],"names":["__rest","useRef","useEffect","_jsx","Tag"],"mappings":"4LAOA,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAyD,EAAE,YAAiB,KAAI;QAAhF,EAAE,QAAQ,EAAE,cAAc,EAAA,GAAA,EAA+B,EAA1B,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApC,8BAAsC,CAAF;AAEvE,IAAA,MAAM,QAAQ,GAAGC,YAAM,CAAqB,IAAI,CAAC;;AAGjD,IAAA,MAAM,OAAO,GAAG,CAAC,EAAe,KAAI;AAChC,QAAA,QAAQ,CAAC,OAAO,GAAG,EAAE;AAErB,QAAA,IAAI,OAAO,YAAY,KAAK,UAAU,EAAE;YACpC,YAAY,CAAC,EAAE,CAAC;QACpB;aAAO,IAAI,YAAY,EAAE;AACrB,YAAA,YAAY,CAAC,OAAO,GAAG,EAAE;QAC7B;AACJ,IAAA,CAAC;IAEDC,eAAS,CAAC,MAAK;AACX,QAAA,MAAM,OAAO,GAAG,CAAC,CAAa,KAAI;YAC9B,IAAI,CAAC,QAAQ,CAAC,OAAO;gBAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE;AAC9C,gBAAA,cAAc,EAAE;YACpB;AACJ,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,OAAO,CAAC;QAC/C,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,OAAO,CAAC;AACnE,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAEpB,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,GAAG,EAAE,OAAO,EAAA,QAAA,EACvB,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC"}

package/ClickOutside/index.mjs

@@ -1,16 +1,26 @@
-import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {Tag}from'@xanui/core';import React,{useRef,useEffect}from'react';const ClickOutside = React.forwardRef((_a, ref) => {
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {Tag}from'@xanui/core';import React,{useRef,useEffect}from'react';const ClickOutside = React.forwardRef((_a, forwardedRef) => {
     var { children, onClickOutside } = _a, props = __rest(_a, ["children", "onClickOutside"]);
-    const _ref = ref || useRef(null);
-    const handler = (e) => {
-        if (!_ref.current.contains(e.target)) {
-            onClickOutside();
+    const innerRef = useRef(null);
+    // merge refs
+    const setRefs = (el) => {
+        innerRef.current = el;
+        if (typeof forwardedRef === "function") {
+            forwardedRef(el);
+        }
+        else if (forwardedRef) {
+            forwardedRef.current = el;
         }
     };
     useEffect(() => {
-        document.addEventListener("click", handler);
-        return () => {
-            document.removeEventListener("click", handler);
+        const handler = (e) => {
+            if (!innerRef.current)
+                return;
+            if (!innerRef.current.contains(e.target)) {
+                onClickOutside();
+            }
         };
-    }, []);
-    return jsx(Tag, Object.assign({}, props, { ref: _ref, children: children }));
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [onClickOutside]);
+    return (jsx(Tag, Object.assign({}, props, { ref: setRefs, children: children })));
 });export{ClickOutside as default};//# sourceMappingURL=index.mjs.map