@xanui/ui 1.1.35 → 1.1.37

package/DataFilter/index.js

@@ -16,7 +16,7 @@ var DateRangeFilter = require('./options/DateRangeFilter.js');
 var React = require('react');
 var core = require('@xanui/core');
 
-const DataFilter$1 = (_a, ref) => {
+const DataFilter = (_a, ref) => {
     var { inline, options, onChange, value } = _a, props = tslib.__rest(_a, ["inline", "options", "onChange", "value"]);
     inline !== null && inline !== void 0 ? inline : (inline = false);
     value !== null && value !== void 0 ? value : (value = {});
@@ -65,7 +65,7 @@ const DataFilter$1 = (_a, ref) => {
             }
         }) })));
 };
-var DataFilter = React.forwardRef(DataFilter$1);
+var DataFilter$1 = React.forwardRef(DataFilter);
 
 exports.SelectFilter = SelectFilter;
 exports.MultiSelectFilter = MultiSelectFilter;
@@ -74,5 +74,5 @@ exports.TextFilter = TextFilter;
 exports.NumberRangeFilter = NumberRangeFilter;
 exports.DateFilter = DateFilter;
 exports.DateRangeFilter = DateRangeFilter;
-exports.default = DataFilter;
+exports.default = DataFilter$1;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@xanui/ui",
-  "version": "1.1.35",
+  "version": "1.1.37",
   "description": "",
   "private": false,
   "dependencies": {
-    "@xanui/core": "^1.2.40",
-    "@xanui/icons": "^1.1.12",
+    "@xanui/core": "^1.2.39",
+    "@xanui/icons": "^1.1.10",
     "pretty-class": "^1.0.8",
     "react-state-bucket": "^1.2.6"
   },
@@ -13,7 +13,7 @@
   "sideEffects": false,
   "exports": {
     "./*": {
-      "import": "./*/index.mjs",
+      "import": "./*/index.js",
       "require": "./*/index.js",
       "types": "./*/index.d.ts"
     }

package/Accordion/index.mjs

@@ -1,94 +0,0 @@
-"use client";
-import { __rest } from 'tslib';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { useState } from 'react';
-import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
-import ExpandIcon from '@xanui/icons/ExpandMore';
-import Collaps from '../Collaps/index.mjs';
-import List from '../List/index.mjs';
-import ListItem from '../ListItem/index.mjs';
-
-const Accordion = React.forwardRef((_a, ref) => {
-    var { children, title, subtitle } = _a, rest = __rest(_a, ["children", "title", "subtitle"]);
-    const [_expand, setExpand] = useState(false);
-    let [_b] = useInterface("Accordion", rest, {
-        onClick: () => setExpand(!_expand),
-        color: "brand",
-        variant: "soft"
-    }), { expand, onClick, color, variant, hoverColor, hoverVariant, expandIcon, expandIconPlacement, startIcon, endIcon, expandAction, classNames, slotProps } = _b, rootProps = __rest(_b, ["expand", "onClick", "color", "variant", "hoverColor", "hoverVariant", "expandIcon", "expandIconPlacement", "startIcon", "endIcon", "expandAction", "classNames", "slotProps"]);
-    const _p = {};
-    if (title)
-        _p.title = title;
-    if (subtitle)
-        _p.subtitle = subtitle;
-    if (startIcon)
-        _p.startIcon = startIcon;
-    if (endIcon)
-        _p.endIcon = endIcon;
-    if (expandIcon)
-        _p.expandIcon = expandIcon;
-    if (expandIconPlacement)
-        _p.expandIconPlacement = expandIconPlacement;
-    if (expandAction)
-        _p.expandAction = expandAction;
-    if (color)
-        _p.color = color;
-    if (variant)
-        _p.variant = variant;
-    if (hoverColor)
-        _p.hoverColor = hoverColor;
-    if (hoverVariant)
-        _p.hoverVariant = hoverVariant;
-    const p = useBreakpointProps(_p);
-    title = p.title;
-    subtitle = p.subtitle;
-    startIcon = p.startIcon;
-    endIcon = p.endIcon;
-    expandIcon = p.expandIcon;
-    expandIconPlacement = p.expandIconPlacement;
-    expandAction = p.expandAction;
-    color = p.color;
-    variant = p.variant;
-    hoverColor = p.hoverColor;
-    hoverVariant = p.hoverVariant;
-    expand = expand === undefined ? _expand : expand;
-    expandIcon = expandIcon ? jsx(Tag, Object.assign({ cursor: "pointer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandIconContainer, { onClick: expandAction === 'icon' && onClick ? () => onClick() : () => { }, className: 'expand-icon-container', children: expandIcon })) : jsx(Tag, Object.assign({ transform: `rotate(${expand ? 0 : -180}deg)`, transition: "transform .4s", cursor: "pointer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandIconContainer, { onClick: expandAction === 'icon' && onClick ? () => onClick() : () => { }, className: 'expand-icon-container', children: jsx(ExpandIcon, {}) }));
-    let itemsx = {};
-    if (expandIconPlacement === 'start') {
-        itemsx = {
-            startIcon: jsxs(Tag, { className: 'start-icon-container', sxr: {
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center",
-                    gap: 1
-                }, children: [expandIcon, startIcon] }),
-            endIcon
-        };
-    }
-    else {
-        itemsx = {
-            endIcon: jsxs(Tag, { className: 'end-icon-container', sxr: {
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center",
-                    gap: 1
-                }, children: [endIcon, expandIcon] }),
-            startIcon
-        };
-    }
-    if (expandAction === 'icon') {
-        itemsx.onClick = () => { };
-        itemsx.cursor = "initial!important";
-    }
-    return (jsx(Tag, Object.assign({}, rootProps, { sxr: {
-            bgcolor: "background.primary"
-        }, baseClass: 'accordion', classNames: [{ "accordion-expanded": expand }, ...(classNames || [])], ref: ref, children: jsxs(List, Object.assign({ component: 'div' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.header, { color: color, variant: variant, hoverColor: hoverColor, hoverVariant: hoverVariant, className: 'accoutdion-header', children: [jsx(ListItem, Object.assign({ minHeight: 55, radius: 0, component: 'div' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerContent, itemsx, { subtitle: subtitle, selected: expand, onClick: () => onClick && onClick(), className: "accordion-header-content", children: title })), jsx(Collaps, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.collaps, { open: expand, className: "accordion-collaps", children: jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: {
-                            color: "text.primary",
-                            p: 2,
-                            py: 1,
-                            bgcolor: "background.primary"
-                        }, baseClass: 'accordion-content', children: children })) }))] })) })));
-});
-
-export { Accordion as default };
-//# sourceMappingURL=index.mjs.map

package/Accordion/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, useInterface, UseColorTemplateColor, UseColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\r\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\r\nimport Collaps, { CollapsProps } from '../Collaps';\r\nimport List, { ListProps } from '../List';\r\nimport ListItem, { ListItemProps } from '../ListItem';\r\n\r\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\r\n    expand?: boolean;\r\n    onClick?: () => void;\r\n    title: useBreakpointPropsType<ReactElement | string>;\r\n    subtitle?: useBreakpointPropsType<ReactElement | string>;\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    expandIcon?: useBreakpointPropsType<ReactElement>;\r\n    expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\r\n    expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\r\n\r\n    slotProps?: {\r\n        header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\r\n        headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\r\n        collaps?: Omit<CollapsProps, \"children\" | \"in\">;\r\n        content?: Omit<TagProps, \"children\">;\r\n        expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\r\n    }\r\n}\r\n\r\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\r\n    const [_expand, setExpand] = useState(false)\r\n    let [{\r\n        expand,\r\n        onClick,\r\n        color,\r\n        variant,\r\n        hoverColor,\r\n        hoverVariant,\r\n        expandIcon,\r\n        expandIconPlacement,\r\n        startIcon,\r\n        endIcon,\r\n        expandAction,\r\n        classNames,\r\n        slotProps,\r\n        ...rootProps\r\n    }] = useInterface<any>(\"Accordion\", rest, {\r\n        onClick: () => setExpand(!_expand) as any,\r\n        color: \"brand\",\r\n        variant: \"soft\"\r\n    })\r\n\r\n    const _p: any = {}\r\n    if (title) _p.title = title\r\n    if (subtitle) _p.subtitle = subtitle\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (expandIcon) _p.expandIcon = expandIcon\r\n    if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\r\n    if (expandAction) _p.expandAction = expandAction\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (hoverColor) _p.hoverColor = hoverColor\r\n    if (hoverVariant) _p.hoverVariant = hoverVariant\r\n\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    title = p.title\r\n    subtitle = p.subtitle\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    expandIcon = p.expandIcon\r\n    expandIconPlacement = p.expandIconPlacement\r\n    expandAction = p.expandAction\r\n    color = p.color\r\n    variant = p.variant\r\n    hoverColor = p.hoverColor\r\n    hoverVariant = p.hoverVariant\r\n\r\n    expand = expand === undefined ? _expand : expand\r\n    expandIcon = expandIcon ? <Tag\r\n        cursor=\"pointer\"\r\n        {...slotProps?.expandIconContainer}\r\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\r\n        className='expand-icon-container'\r\n    >\r\n        {expandIcon}\r\n    </Tag> : <Tag\r\n        transform={`rotate(${expand ? 0 : -180}deg)`}\r\n        transition=\"transform .4s\"\r\n        cursor=\"pointer\"\r\n        {...slotProps?.expandIconContainer}\r\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\r\n        className='expand-icon-container'\r\n    >\r\n        <ExpandIcon />\r\n    </Tag>\r\n\r\n    let itemsx: any = {}\r\n\r\n    if (expandIconPlacement === 'start') {\r\n        itemsx = {\r\n            startIcon: <Tag\r\n                className='start-icon-container'\r\n                sxr={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"row\",\r\n                    alignItems: \"center\",\r\n                    gap: 1\r\n                }}\r\n            >\r\n                {expandIcon}\r\n                {startIcon}\r\n            </Tag>,\r\n            endIcon\r\n        }\r\n\r\n    } else {\r\n        itemsx = {\r\n            endIcon: <Tag\r\n                className='end-icon-container'\r\n                sxr={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"row\",\r\n                    alignItems: \"center\",\r\n                    gap: 1\r\n                }}\r\n            >\r\n                {endIcon}\r\n                {expandIcon}\r\n            </Tag>,\r\n            startIcon\r\n        }\r\n    }\r\n\r\n    if (expandAction === 'icon') {\r\n        itemsx.onClick = () => { }\r\n        itemsx.cursor = \"initial!important\"\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            {...rootProps}\r\n            sxr={{\r\n                bgcolor: \"background.primary\"\r\n            }}\r\n            baseClass='accordion'\r\n            classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\r\n            ref={ref}\r\n        >\r\n            <List\r\n                component='div'\r\n                {...slotProps?.header}\r\n                color={color}\r\n                variant={variant}\r\n                hoverColor={hoverColor}\r\n                hoverVariant={hoverVariant}\r\n                className='accoutdion-header'\r\n            >\r\n                <ListItem\r\n                    minHeight={55}\r\n                    radius={0}\r\n                    component='div'\r\n                    {...slotProps?.headerContent}\r\n                    {...itemsx}\r\n                    subtitle={subtitle}\r\n                    selected={expand}\r\n                    onClick={() => onClick && onClick()}\r\n                    className=\"accordion-header-content\"\r\n                >{title}</ListItem>\r\n                <Collaps\r\n                    {...slotProps?.collaps}\r\n                    open={expand}\r\n                    className=\"accordion-collaps\"\r\n                >\r\n                    <Tag\r\n                        {...slotProps?.content}\r\n                        sxr={{\r\n                            color: \"text.primary\",\r\n                            p: 2,\r\n                            py: 1,\r\n                            bgcolor: \"background.primary\"\r\n                        }}\r\n                        baseClass='accordion-content'\r\n                    >\r\n                        {children}\r\n                    </Tag>\r\n                </Collaps>\r\n            </List>\r\n        </Tag>\r\n    )\r\n})\r\nexport default Accordion\r\n\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;AAgCA;;;AAEI;;AAiBI;AACA;AACH;;AAGD;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAa;AACb;AAAgB;AAChB;AAAyB;AACzB;AAAkB;AAClB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAElB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAqBA;AACI;;AAIY;AACA;AACA;AACA;;;;;;AAUZ;;AAIY;AACA;AACA;AACA;;;;;AAUhB;AACI;AACA;;AAGJ;AAIY;AACH;AAiCe;AACA;AACA;AACA;;AAU5B;;"}

package/Alert/index.mjs

@@ -1,119 +0,0 @@
-"use client";
-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 Close 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"
-    }), { title, variant, icon, color, direction, slotProps, onClose } = _b, _props = __rest(_b, ["title", "variant", "icon", "color", "direction", "slotProps", "onClose"]);
-    color !== null && color !== void 0 ? color : (color = "default");
-    direction !== null && direction !== void 0 ? direction : (direction = "row");
-    const _p = {};
-    if (title)
-        _p.title = title;
-    if (variant)
-        _p.variant = variant;
-    if (icon)
-        _p.icon = icon;
-    if (color)
-        _p.color = color;
-    if (direction)
-        _p.direction = direction;
-    const p = useBreakpointProps(_p);
-    title = p.title;
-    variant = p.variant;
-    icon = p.icon;
-    color = p.color;
-    direction = p.direction;
-    let isRow = direction === 'row';
-    const template = useColorTemplate(color, variant);
-    let iconsx = {
-        fontSize: isRow ? 22 : 40,
-        color: color === 'default' ? "text.primary" : template.primary.color
-    };
-    const icons = {
-        "info": jsx(InfoIcon, { sx: iconsx }),
-        "warning": jsx(WarningIcon, { sx: iconsx }),
-        "success": jsx(SuccessIcon, { sx: iconsx }),
-        "danger": jsx(ErrorIcon, { sx: iconsx })
-    };
-    let _icon = icons[icon] || icons[color];
-    return (jsxs(Tag, Object.assign({}, _props, { baseClass: "alert", sxr: Object.assign({ justifyContent: "flex-start", position: "relative", radius: 1, px: isRow ? (_icon ? .5 : 2) : 3, py: isRow ? .5 : 3, flexDirection: "column", display: 'flex' }, _props === null || _props === void 0 ? void 0 : _props.sx) }, template.primary, { children: [onClose && jsx(IconButton, { color: color, variant: variant === 'fill' ? "fill" : "text", size: 25, sx: {
-                    position: "absolute",
-                    top: 5,
-                    right: 5
-                }, onClick: onClose, className: "alert-close-button", children: jsx(Close, { fontSize: 18 }) }), jsxs(Tag, { sx: {
-                    display: "flex",
-                    gap: 1,
-                    flexDirection: direction,
-                    alignItems: isRow ? "flex-start" : "center"
-                }, baseClass: "alert-container", children: [_icon && jsx(Tag, { baseClass: "alert-icon", sxr: {
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            p: isRow ? 1 : 0,
-                            "& svg": {
-                                color: template.primary.color
-                            }
-                        }, children: _icon }), jsxs(Tag, { baseClass: "alert-content", sxr: {
-                            display: "flex",
-                            flexDirection: "column",
-                            flex: 1,
-                            color: template.primary.color,
-                            py: 1,
-                            textAlign: isRow ? "left" : "center",
-                            gap: isRow ? 0 : 1
-                        }, children: [title && jsx(Fragment, { children: isValidElement(title) ? jsx(Tag, { className: "alert-title", children: title }) : jsx(Text, { className: "alert-title", variant: "text", sx: {
-                                        font: "text",
-                                        fontWeight: "bold!important",
-                                        color: template.primary.color
-                                    }, children: title }) }), jsx(Tag, { sxr: {
-                                    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();
-        }
-        else {
-            alert.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 +0,0 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor } from \"@xanui/core\"\r\nimport React, { isValidElement, ReactElement, useEffect, useRef } from \"react\"\r\nimport Text from \"../Text\"\r\nimport InfoIcon from '@xanui/icons/Info';\r\nimport WarningIcon from '@xanui/icons/Warning';\r\nimport SuccessIcon from '@xanui/icons/CheckCircle';\r\nimport ErrorIcon from '@xanui/icons/Cancel';\r\nimport IconClose from '@xanui/icons/Close';\r\nimport IconButton from \"../IconButton\";\r\nimport useAlert, { UseAlerProps } from \"../useAlert\";\r\n\r\n\r\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\r\n    title?: useBreakpointPropsType<string | ReactElement>;\r\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\r\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\r\n}\r\n\r\nexport type AlertMesssageType = string | ReactElement | AlertProps\r\n\r\nconst Alert = ({ children, ...rest }: AlertProps) => {\r\n    let [{\r\n        title,\r\n        variant,\r\n        icon,\r\n        color,\r\n        direction,\r\n        slotProps,\r\n        onClose,\r\n        ..._props\r\n    }] = useInterface<any>(\"Alert\", rest, {\r\n        variant: \"fill\"\r\n    })\r\n    color ??= \"default\"\r\n    direction ??= \"row\"\r\n\r\n    const _p: any = {}\r\n    if (title) _p.title = title\r\n    if (variant) _p.variant = variant\r\n    if (icon) _p.icon = icon\r\n    if (color) _p.color = color\r\n    if (direction) _p.direction = direction\r\n\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    title = p.title\r\n    variant = p.variant\r\n    icon = p.icon\r\n    color = p.color\r\n    direction = p.direction\r\n\r\n    let isRow = direction === 'row'\r\n\r\n\r\n    const template = useColorTemplate(color, variant)\r\n\r\n    let iconsx = {\r\n        fontSize: isRow ? 22 : 40,\r\n        color: color === 'default' ? \"text.primary\" : template.primary.color\r\n    }\r\n\r\n    const icons: any = {\r\n        \"info\": <InfoIcon sx={iconsx} />,\r\n        \"warning\": <WarningIcon sx={iconsx} />,\r\n        \"success\": <SuccessIcon sx={iconsx} />,\r\n        \"danger\": <ErrorIcon sx={iconsx} />\r\n    }\r\n\r\n    let _icon = icons[icon] || icons[color]\r\n\r\n    return (\r\n        <Tag\r\n            {..._props}\r\n            baseClass=\"alert\"\r\n            sxr={{\r\n                justifyContent: \"flex-start\",\r\n                position: \"relative\",\r\n                radius: 1,\r\n                px: isRow ? (_icon ? .5 : 2) : 3,\r\n                py: isRow ? .5 : 3,\r\n                flexDirection: \"column\",\r\n                display: 'flex',\r\n                ..._props?.sx\r\n            }}\r\n            {...template.primary}\r\n        >\r\n            {\r\n                onClose && <IconButton\r\n                    color={color}\r\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\r\n                    size={25}\r\n                    sx={{\r\n                        position: \"absolute\",\r\n                        top: 5,\r\n                        right: 5\r\n                    }}\r\n                    onClick={onClose}\r\n                    className=\"alert-close-button\"\r\n                >\r\n                    <IconClose fontSize={18} />\r\n                </IconButton>\r\n            }\r\n            <Tag\r\n                sx={{\r\n                    display: \"flex\",\r\n                    gap: 1,\r\n                    flexDirection: direction,\r\n                    alignItems: isRow ? \"flex-start\" : \"center\"\r\n                }}\r\n                baseClass=\"alert-container\"\r\n            >\r\n                {\r\n                    _icon && <Tag\r\n                        baseClass=\"alert-icon\"\r\n                        sxr={{\r\n                            display: \"flex\",\r\n                            alignItems: \"center\",\r\n                            justifyContent: \"center\",\r\n                            p: isRow ? 1 : 0,\r\n                            \"& svg\": {\r\n                                color: template.primary.color\r\n                            }\r\n                        }}\r\n                    >\r\n                        {_icon}\r\n                    </Tag>\r\n                }\r\n                <Tag\r\n                    baseClass=\"alert-content\"\r\n                    sxr={{\r\n                        display: \"flex\",\r\n                        flexDirection: \"column\",\r\n                        flex: 1,\r\n                        color: template.primary.color,\r\n                        py: 1,\r\n                        textAlign: isRow ? \"left\" : \"center\",\r\n                        gap: isRow ? 0 : 1\r\n                    }}\r\n                >\r\n                    {title && <>\r\n                        {\r\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\r\n                                className=\"alert-title\"\r\n                                variant=\"text\"\r\n                                sx={{\r\n                                    font: \"text\",\r\n                                    fontWeight: \"bold!important\",\r\n                                    color: template.primary.color\r\n                                }}\r\n                            >{title}</Text>\r\n                        }\r\n                    </>}\r\n                    <Tag\r\n                        sxr={{\r\n                            font: \"button\",\r\n                        }}\r\n                    >\r\n                        {children}\r\n                    </Tag>\r\n                </Tag>\r\n            </Tag>\r\n        </Tag>\r\n    )\r\n}\r\n\r\nconst ActionAlert = (props: UseAlerProps) => {\r\n    const ref = useRef<HTMLDivElement>(null);\r\n    const alert = useAlert({\r\n        ...props,\r\n        slotProps: {\r\n            ...props.slotProps,\r\n            modal: {\r\n                ...props.slotProps?.modal,\r\n                slotProps: {\r\n                    ...props.slotProps?.modal?.slotProps,\r\n                    layer: {\r\n                        ...props.slotProps?.modal?.slotProps?.layer,\r\n                        portal: {\r\n                            ...props.slotProps?.modal?.slotProps?.layer?.portal,\r\n                            container: ref.current || undefined\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    })\r\n\r\n    useEffect(() => {\r\n        if (props.open) {\r\n            alert.open()\r\n        } else {\r\n            alert.close()\r\n        }\r\n    }, [props.open])\r\n    return <Tag ref={ref}></Tag>\r\n}\r\n\r\nAlert.confirm = (props: UseAlerProps) => {\r\n    const a = Renderar.render(ActionAlert as any, {\r\n        open: true,\r\n        ...props,\r\n        slotProps: {\r\n            ...props.slotProps,\r\n            modal: {\r\n                ...props.slotProps?.modal,\r\n                onClosed: () => {\r\n                    a.unrender()\r\n                    if (props?.slotProps?.modal?.onClosed) {\r\n                        props.slotProps?.modal?.onClosed()\r\n                    }\r\n                },\r\n            }\r\n        },\r\n    })\r\n\r\n    return {\r\n        open: () => {\r\n            a.updateProps({ open: true })\r\n        },\r\n        close: () => {\r\n            a.updateProps({ open: false })\r\n        },\r\n    }\r\n}\r\n\r\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;AACA;;;AAGH;AAQe;AACA;AACA;;AAOR;AACH;AAQzB;AAEA;;AACI;AACA;;AAqBI;;;;;;AAKJ;AACA;AACJ;AAEA;;AACI;;;AASgB;;;AAGJ;;;;;;;;;AAahB;;"}

package/Autocomplete/index.mjs

@@ -1,134 +0,0 @@
-import { __rest } from 'tslib';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React from 'react';
-import Input from '../Input/index.mjs';
-import Menu from '../Menu/index.mjs';
-import List from '../List/index.mjs';
-import ListItem from '../ListItem/index.mjs';
-import Chip from '../Chip/index.mjs';
-import IconButton from '../IconButton/index.mjs';
-import Close from '@xanui/icons/Close';
-import CircleProgress from '../CircleProgress/index.mjs';
-
-const Autocomplete = (_a) => {
-    var { value, onChange, renderOption, options, getLabel, multiple } = _a, inputProps = __rest(_a, ["value", "onChange", "renderOption", "options", "getLabel", "multiple"]);
-    const [_options, setOptions] = React.useState();
-    const [inputValue, setInputValue] = React.useState("");
-    const [timer, setTimer] = React.useState(null);
-    const [loading, setLoading] = React.useState(false);
-    const [open, setOpen] = React.useState(false);
-    const menuRef = React.useRef(null);
-    getLabel !== null && getLabel !== void 0 ? getLabel : (getLabel = (option) => option.toString());
-    multiple !== null && multiple !== void 0 ? multiple : (multiple = false);
-    let startIcons = [
-        inputProps.startIcon
-    ];
-    if (!!value && multiple && Array.isArray(value)) {
-        value.map((v, index) => {
-            startIcons.push(jsx(Chip, { size: "small", label: getLabel(v), variant: "fill", color: "default", endIcon: jsx(IconButton, { size: 20, variant: "text", color: "default", onClick: (e) => {
-                        e.stopPropagation();
-                        let newValue = Array.isArray(value) ? [...value] : [];
-                        newValue = newValue.filter((val) => getLabel(val) !== getLabel(v));
-                        onChange && onChange(newValue);
-                    }, children: jsx(Close, {}) }) }, index));
-        });
-    }
-    let endIcons = [
-        inputProps.endIcon
-    ];
-    if (loading) {
-        endIcons.push(jsx(CircleProgress, { size: "small" }, "auto-complete-loading-icon"));
-    }
-    else if (!!value && !multiple) {
-        endIcons.push(jsx(IconButton, { variant: "text", color: "default", onClick: (e) => {
-                e.stopPropagation();
-                onChange && onChange(undefined);
-                setInputValue("");
-            }, children: jsx(Close, {}) }, "auto-complete-clear-button"));
-    }
-    return (jsxs(Fragment, { children: [jsx(Input, Object.assign({}, inputProps, { ref: menuRef, slotProps: {
-                    rootContainer: Object.assign({ flexWrap: 'wrap' }, (multiple ? { height: "auto", gap: .5 } : {})),
-                    input: {
-                        width: multiple ? 'auto' : '100%',
-                        flex: 1,
-                        minWidth: 20,
-                    }
-                }, startIcon: startIcons, endIcon: endIcons, value: inputValue, onKeyDown: (e) => {
-                    if (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown) {
-                        inputProps.onKeyDown(e);
-                    }
-                    if (multiple && e.key === 'Backspace' && inputValue === "" && Array.isArray(value) && value.length > 0) {
-                        let newValue = [...value];
-                        newValue.pop();
-                        onChange && onChange(newValue);
-                    }
-                }, onChange: (e) => {
-                    const value = e.target.value;
-                    setInputValue(value);
-                    if (!value) {
-                        setOptions([]);
-                        setOpen(false);
-                        return;
-                    }
-                    setOpen(true);
-                    clearTimeout(timer);
-                    setTimer(setTimeout(async () => {
-                        if (typeof options === 'function') {
-                            setLoading(true);
-                            const result = await options(value);
-                            setOptions(result);
-                            setLoading(false);
-                        }
-                        else {
-                            const filtered = options.filter(option => getLabel(option).toLowerCase().includes(value.toLowerCase()));
-                            setOptions(filtered);
-                        }
-                    }, 300));
-                } })), jsx(Menu, { target: open ? menuRef.current : null, onClickOutside: () => {
-                    setOptions([]);
-                    setInputValue("");
-                }, slotProps: {
-                    content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }
-                }, children: jsx(List, { maxHeight: 400, overflow: "auto", children: _options === null || _options === void 0 ? void 0 : _options.map((option, index) => (renderOption ? jsx("div", { children: renderOption(option, {
-                            onClick: () => {
-                                if (multiple) {
-                                    let newValue = Array.isArray(value) ? [...value] : [];
-                                    const has = newValue.find((v) => getLabel(v) === getLabel(option));
-                                    if (!has) {
-                                        newValue.push(option);
-                                    }
-                                    else {
-                                        newValue = newValue.filter((v) => getLabel(v) !== getLabel(option));
-                                    }
-                                    onChange && onChange(newValue);
-                                }
-                                else {
-                                    onChange && onChange(option);
-                                    setOpen(false);
-                                    setInputValue(getLabel(option));
-                                    setOptions([]);
-                                }
-                            }
-                        }) }, "auto-complete" + index + getLabel(option)) : jsx(ListItem, { onClick: () => {
-                            if (multiple) {
-                                let newValue = Array.isArray(value) ? [...value] : [];
-                                const has = newValue.find((v) => getLabel(v) === getLabel(option));
-                                if (!has) {
-                                    newValue.push(option);
-                                }
-                                else {
-                                    newValue = newValue.filter((v) => getLabel(v) !== getLabel(option));
-                                }
-                                onChange && onChange(newValue);
-                            }
-                            else {
-                                onChange && onChange(option);
-                                setOpen(false);
-                                setInputValue(getLabel(option));
-                                setOptions([]);
-                            }
-                        }, children: getLabel(option) }, index))) }) })] }));
-};
-
-export { Autocomplete as default };
-//# sourceMappingURL=index.mjs.map

package/Autocomplete/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react'\r\nimport Input from '../Input'\r\nimport Menu from '../Menu'\r\nimport List from '../List';\r\nimport ListItem, { ListItemProps } from '../ListItem';\r\nimport Chip from '../Chip';\r\nimport IconButton from '../IconButton';\r\nimport Close from '@xanui/icons/Close';\r\nimport CircleProgress from '../CircleProgress';\r\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\r\n\r\nexport type AutocompleteProps = {\r\n\r\n   options: any[] | ((text: string) => Promise<any[]>)\r\n   getLabel: (option: any) => string;\r\n   onChange?: (value: any) => void;\r\n   value?: any;\r\n   multiple?: boolean;\r\n   renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\r\n\r\n   // input props customization\r\n   name?: string;\r\n   placeholder?: string;\r\n   readOnly?: boolean;\r\n   autoFocus?: boolean;\r\n   autoComplete?: string;\r\n   label?: useBreakpointPropsType<string>;\r\n\r\n   onFocus?: (e: React.FocusEvent<any>) => void;\r\n   onBlur?: (e: React.FocusEvent<any>) => void;\r\n   onInput?: (e: React.FormEvent<any>) => void;\r\n   onKeyDown?: (e: React.KeyboardEvent<any>) => void;\r\n   onKeyUp?: (e: React.KeyboardEvent<any>) => void;\r\n\r\n   rows?: useBreakpointPropsType<number>;\r\n   minRows?: useBreakpointPropsType<number>;\r\n   maxRows?: useBreakpointPropsType<number>;\r\n   fullWidth?: boolean;\r\n\r\n   startIcon?: useBreakpointPropsType<ReactElement>;\r\n   endIcon?: useBreakpointPropsType<ReactElement>;\r\n   iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\r\n   focused?: boolean;\r\n   color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n   variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\r\n   error?: boolean;\r\n   helperText?: useBreakpointPropsType<string>;\r\n\r\n}\r\n\r\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\r\n   const [_options, setOptions] = React.useState<any[]>()\r\n   const [inputValue, setInputValue] = React.useState(\"\")\r\n   const [timer, setTimer] = React.useState<any>(null)\r\n   const [loading, setLoading] = React.useState(false)\r\n   const [open, setOpen] = React.useState(false)\r\n   const menuRef = React.useRef<any>(null)\r\n\r\n   getLabel ??= (option: any) => option.toString();\r\n   multiple ??= false;\r\n\r\n   let startIcons = [\r\n      inputProps.startIcon\r\n   ]\r\n\r\n   if (!!value && multiple && Array.isArray(value)) {\r\n      value.map((v: any, index: number) => {\r\n         startIcons.push(<Chip\r\n            key={index}\r\n            size=\"small\"\r\n            label={getLabel!(v)}\r\n            variant={\"fill\"}\r\n            color=\"default\"\r\n            endIcon={<IconButton\r\n               size={20}\r\n               variant={\"text\"}\r\n               color=\"default\"\r\n               onClick={(e) => {\r\n                  e.stopPropagation();\r\n                  let newValue = Array.isArray(value) ? [...value] : []\r\n                  newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\r\n                  onChange && onChange(newValue)\r\n               }}\r\n            >\r\n               <Close />\r\n            </IconButton>}\r\n         />)\r\n      })\r\n   }\r\n\r\n   let endIcons = [\r\n      inputProps.endIcon\r\n   ]\r\n\r\n   if (loading) {\r\n      endIcons.push(<CircleProgress\r\n         key=\"auto-complete-loading-icon\"\r\n         size=\"small\"\r\n      />)\r\n   } else if (!!value && !multiple) {\r\n      endIcons.push(<IconButton\r\n         key=\"auto-complete-clear-button\"\r\n         variant={\"text\"}\r\n         color=\"default\"\r\n         onClick={(e) => {\r\n            e.stopPropagation();\r\n            onChange && onChange(undefined)\r\n            setInputValue(\"\")\r\n         }}\r\n      >\r\n         <Close />\r\n      </IconButton>)\r\n   }\r\n\r\n\r\n   return (\r\n      <>\r\n         <Input\r\n            {...inputProps as any}\r\n            ref={menuRef}\r\n            slotProps={{\r\n               rootContainer: {\r\n                  flexWrap: 'wrap',\r\n                  ...(multiple ? { height: \"auto\", gap: .5 } : {})\r\n               },\r\n               input: {\r\n                  width: multiple ? 'auto' : '100%',\r\n                  flex: 1,\r\n                  minWidth: 20,\r\n               }\r\n            }}\r\n            startIcon={startIcons}\r\n            endIcon={endIcons}\r\n            value={inputValue}\r\n            onKeyDown={(e) => {\r\n               if (inputProps?.onKeyDown) {\r\n                  inputProps.onKeyDown(e)\r\n               }\r\n               if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\r\n                  let newValue = [...value]\r\n                  newValue.pop()\r\n                  onChange && onChange(newValue)\r\n               }\r\n            }}\r\n            onChange={(e) => {\r\n               const value = e.target.value;\r\n               setInputValue(value)\r\n               if (!value) {\r\n                  setOptions([])\r\n                  setOpen(false)\r\n                  return;\r\n               }\r\n               setOpen(true)\r\n\r\n               clearTimeout(timer)\r\n               setTimer(setTimeout(async () => {\r\n                  if (typeof options === 'function') {\r\n                     setLoading(true)\r\n                     const result = await options(value)\r\n                     setOptions(result)\r\n                     setLoading(false)\r\n                  } else {\r\n                     const filtered = options.filter(option => getLabel!(option).toLowerCase().includes(value.toLowerCase()))\r\n                     setOptions(filtered)\r\n                  }\r\n               }, 300))\r\n            }}\r\n         />\r\n         <Menu\r\n            target={open ? menuRef.current : null}\r\n            onClickOutside={() => {\r\n               setOptions([])\r\n               setInputValue(\"\")\r\n            }}\r\n            slotProps={{\r\n               content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }\r\n            }}\r\n         >\r\n            <List\r\n               maxHeight={400}\r\n               overflow={\"auto\"}\r\n            >\r\n               {_options?.map((option, index) => (\r\n                  renderOption ? <div key={\"auto-complete\" + index + getLabel!(option)}>{renderOption(option, {\r\n                     onClick: () => {\r\n                        if (multiple) {\r\n                           let newValue = Array.isArray(value) ? [...value] : []\r\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\r\n                           if (!has) {\r\n                              newValue.push(option)\r\n                           } else {\r\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\r\n                           }\r\n                           onChange && onChange(newValue)\r\n                        } else {\r\n                           onChange && onChange(option)\r\n                           setOpen(false)\r\n                           setInputValue(getLabel!(option))\r\n                           setOptions([])\r\n                        }\r\n                     }\r\n                  })}</div> : <ListItem\r\n                     key={index}\r\n                     onClick={() => {\r\n                        if (multiple) {\r\n                           let newValue = Array.isArray(value) ? [...value] : []\r\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\r\n                           if (!has) {\r\n                              newValue.push(option)\r\n                           } else {\r\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\r\n                           }\r\n                           onChange && onChange(newValue)\r\n                        } else {\r\n                           onChange && onChange(option)\r\n                           setOpen(false)\r\n                           setInputValue(getLabel!(option))\r\n                           setOptions([])\r\n                        }\r\n                     }}\r\n                  >\r\n                     {getLabel!(option)}\r\n                  </ListItem>\r\n               ))}\r\n            </List>\r\n         </Menu>\r\n      </>\r\n   )\r\n}\r\n\r\nexport default Autocomplete\r\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/Avatar/index.mjs

@@ -1,48 +0,0 @@
-import { __rest } from 'tslib';
-import { jsx } from 'react/jsx-runtime';
-import React, { useState } from 'react';
-import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
-import PersonIcon from '@xanui/icons/Person';
-import Skeleton from '../Skeleton/index.mjs';
-
-const Avatar = React.forwardRef((_a, ref) => {
-    var _b;
-    var { children, src, alt, skeleton } = _a, rest = __rest(_a, ["children", "src", "alt", "skeleton"]);
-    const [faild, setFaild] = useState();
-    let [_c] = useInterface("Avatar", rest, {}), { size, slotProps } = _c, props = __rest(_c, ["size", "slotProps"]);
-    size !== null && size !== void 0 ? size : (size = 36);
-    const _p = {};
-    if (size)
-        _p.size = size;
-    const p = useBreakpointProps(_p);
-    size = p.size;
-    if (skeleton) {
-        return jsx(Skeleton, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton, { height: size, width: size, animation: "wave", sx: Object.assign(Object.assign({}, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton) === null || _b === void 0 ? void 0 : _b.sx), { borderRadius: size }) }));
-    }
-    if (faild === false || !src) {
-        let t = (alt === null || alt === void 0 ? void 0 : alt.charAt(0).toUpperCase()) || (children || jsx(PersonIcon, {}));
-        return (jsx(Tag, Object.assign({ component: "div", src: src }, props, { baseClass: 'avatar', sxr: {
-                display: "inline-flex",
-                justifyContent: "center",
-                alignItems: "center",
-                bgcolor: "background.secondary",
-                radius: size,
-                fontSize: (size / 3) * 2,
-                width: size,
-                height: size,
-                userSelect: "none",
-                color: "text.primary",
-                '& svg': {
-                    fontSize: (size / 3) * 2,
-                    opacity: .6
-                }
-            }, ref: ref, children: t })));
-    }
-    return (jsx(Tag, Object.assign({ component: "img", radius: size, width: size, height: size, objectFit: "cover" }, props, { alt: alt, src: src, baseClass: 'avatar', onError: (e) => {
-            setFaild(false);
-            props.onError && props.onError(e);
-        }, ref: ref })));
-});
-
-export { Avatar as default };
-//# sourceMappingURL=index.mjs.map

package/Avatar/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Avatar/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\r\nimport PersonIcon from '@xanui/icons/Person'\r\nimport Skeleton, { SkeletonProps } from '../Skeleton';\r\n\r\nexport type AvatarProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\r\n    size?: useBreakpointPropsType<number>;\r\n    skeleton?: boolean;\r\n    slotProps?: {\r\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\r\n    }\r\n}\r\n\r\nconst Avatar = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, skeleton, ...rest }: AvatarProps<T>, ref: any) => {\r\n    const [faild, setFaild] = useState<boolean>()\r\n    let [{ size, slotProps, ...props }] = useInterface<any>(\"Avatar\", rest, {})\r\n    size ??= 36\r\n    const _p: any = {}\r\n    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n    size = p.size\r\n\r\n    if (skeleton) {\r\n        return <Skeleton\r\n            {...slotProps?.skeleton}\r\n            height={size}\r\n            width={size}\r\n            animation={\"wave\"}\r\n            sx={{\r\n                ...slotProps?.skeleton?.sx,\r\n                borderRadius: size,\r\n            }}\r\n        />\r\n    }\r\n\r\n    if (faild === false || !src) {\r\n        let t = alt?.charAt(0).toUpperCase() || (children || <PersonIcon />)\r\n        return (\r\n            <Tag\r\n                component=\"div\"\r\n                src={src}\r\n                {...props}\r\n                baseClass='avatar'\r\n                sxr={{\r\n                    display: \"inline-flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\",\r\n                    bgcolor: \"background.secondary\",\r\n                    radius: size,\r\n                    fontSize: (size / 3) * 2,\r\n                    width: size,\r\n                    height: size,\r\n                    userSelect: \"none\",\r\n                    color: \"text.primary\",\r\n                    '& svg': {\r\n                        fontSize: (size / 3) * 2,\r\n                        opacity: .6\r\n                    }\r\n                }}\r\n                ref={ref}\r\n            >{t}</Tag>\r\n        )\r\n    }\r\n    return (\r\n        <Tag\r\n            component=\"img\"\r\n            radius={size}\r\n            width={size}\r\n            height={size}\r\n            objectFit=\"cover\"\r\n            {...props}\r\n            alt={alt}\r\n            src={src}\r\n            baseClass='avatar'\r\n            onError={(e) => {\r\n                setFaild(false)\r\n                props.onError && props.onError(e as any)\r\n            }}\r\n            ref={ref}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Avatar\r\n\r\n\r\n"],"names":["_jsx"],"mappings":";;;;;;;AAaA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAyD,EAAE,GAAQ,KAAI;;AAAvE,IAAA,IAAA,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAA,GAAA,EAA2B,EAAtB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAvC,CAAA,UAAA,EAAA,KAAA,EAAA,KAAA,EAAA,UAAA,CAAyC,CAAF;IACxG,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAW;IAC7C,IAAI,CAAA,EAAA,CAAA,GAAkC,YAAY,CAAM,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC,EAAtE,EAAE,IAAI,EAAE,SAAS,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3B,CAAA,MAAA,EAAA,WAAA,CAA6B,CAAyC;IAC3E,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,EAAE,CAAA;IACX,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,IAAI,GAAG,CAAC,CAAC,IAAI;IAEb,IAAI,QAAQ,EAAE;AACV,QAAA,OAAOA,IAAC,QAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACR,SAAS,KAAA,IAAA,IAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAAA,EACvB,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,MAAM,EACjB,EAAE,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACK,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,QAAQ,0CAAE,EAAE,CAAA,EAAA,EAC1B,YAAY,EAAE,IAAI,OAExB;IACN;AAEA,IAAA,IAAI,KAAK,KAAK,KAAK,IAAI,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,GAAG,CAAA,GAAG,aAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,MAAM,CAAC,CAAC,CAAA,CAAE,WAAW,EAAE,MAAK,QAAQ,IAAIA,GAAA,CAAC,UAAU,EAAA,EAAA,CAAG,CAAC;AACpE,QAAA,QACIA,GAAA,CAAC,GAAG,kBACA,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,GAAG,EAAA,EACJ,KAAK,EAAA,EACT,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAE;AACD,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,OAAO,EAAE,sBAAsB;AAC/B,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC;AACxB,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,UAAU,EAAE,MAAM;AAClB,gBAAA,KAAK,EAAE,cAAc;AACrB,gBAAA,OAAO,EAAE;AACL,oBAAA,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC;AACxB,oBAAA,OAAO,EAAE;AACZ;AACJ,aAAA,EACD,GAAG,EAAE,GAAG,YACV,CAAC,EAAA,CAAA,CAAO;IAElB;AACA,IAAA,QACIA,GAAA,CAAC,GAAG,kBACA,SAAS,EAAC,KAAK,EACf,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,SAAS,EAAC,OAAO,EAAA,EACb,KAAK,EAAA,EACT,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAC,KAAI;YACX,QAAQ,CAAC,KAAK,CAAC;YACf,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,CAAQ,CAAC;AAC5C,QAAA,CAAC,EACD,GAAG,EAAE,GAAG,EAAA,CAAA,CACV;AAEV,CAAC;;;;"}