@xanui/ui 1.1.63 → 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/InputNumber/index.cjs

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

package/InputNumber/index.cjs.map

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

package/InputNumber/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { InputProps } from '../Input/index.js';
 
 type InputNumberProps = Omit<InputProps, "value"> & {
-    value?: number;
+    value?: number | "";
 };
 declare const InputNumber: React.ForwardRefExoticComponent<Omit<InputNumberProps, "ref"> & React.RefAttributes<HTMLInputElement>>;