@xanui/ui 1.1.38 → 1.1.41

package/Accordion/index.cjs

@@ -0,0 +1,96 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+var ExpandIcon = require('@xanui/icons/ExpandMore');
+var index$2 = require('../Collaps/index.cjs');
+var index = require('../List/index.cjs');
+var index$1 = require('../ListItem/index.cjs');
+
+const Accordion = React.forwardRef((_a, ref) => {
+    var { children, title, subtitle } = _a, rest = tslib.__rest(_a, ["children", "title", "subtitle"]);
+    const [_expand, setExpand] = React.useState(false);
+    let [_b] = core.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 = tslib.__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 = core.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 ? jsxRuntime.jsx(core.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 })) : jsxRuntime.jsx(core.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: jsxRuntime.jsx(ExpandIcon, {}) }));
+    let itemsx = {};
+    if (expandIconPlacement === 'start') {
+        itemsx = {
+            startIcon: jsxRuntime.jsxs(core.Tag, { className: 'start-icon-container', sxr: {
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 1
+                }, children: [expandIcon, startIcon] }),
+            endIcon
+        };
+    }
+    else {
+        itemsx = {
+            endIcon: jsxRuntime.jsxs(core.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 (jsxRuntime.jsx(core.Tag, Object.assign({}, rootProps, { sxr: {
+            bgcolor: "background.primary"
+        }, baseClass: 'accordion', classNames: [{ "accordion-expanded": expand }, ...(classNames || [])], ref: ref, children: jsxRuntime.jsxs(index, 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: [jsxRuntime.jsx(index$1, 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 })), jsxRuntime.jsx(index$2, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.collaps, { open: expand, className: "accordion-collaps", children: jsxRuntime.jsx(core.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 })) }))] })) })));
+});
+
+module.exports = Accordion;
+//# sourceMappingURL=index.cjs.map

package/Accordion/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","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 from '../Collaps';\r\nimport List from '../List';\r\nimport ListItem from '../ListItem';\r\nimport type { CollapsProps } from '../Collaps';\r\nimport type { ListProps } from '../List';\r\nimport type { 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":";;;;;;;;;;;;AAmCA;;;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/Accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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;;"}
+{"version":3,"file":"index.js","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 from '../Collaps';\r\nimport List from '../List';\r\nimport ListItem from '../ListItem';\r\nimport type { CollapsProps } from '../Collaps';\r\nimport type { ListProps } from '../List';\r\nimport type { 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":";;;;;;;;;;AAmCA;;;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.cjs

@@ -0,0 +1,121 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@xanui/core');
+var React = require('react');
+var index$1 = require('../Text/index.cjs');
+var InfoIcon = require('@xanui/icons/Info');
+var WarningIcon = require('@xanui/icons/Warning');
+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');
+
+const Alert = (_a) => {
+    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    let [_b] = core.useInterface("Alert", rest, {
+        variant: "fill"
+    }), { title, variant, icon, color, direction, slotProps, onClose } = _b, _props = tslib.__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 = core.useBreakpointProps(_p);
+    title = p.title;
+    variant = p.variant;
+    icon = p.icon;
+    color = p.color;
+    direction = p.direction;
+    let isRow = direction === 'row';
+    const template = core.useColorTemplate(color, variant);
+    let iconsx = {
+        fontSize: isRow ? 22 : 40,
+        color: color === 'default' ? "text.primary" : template.primary.color
+    };
+    const icons = {
+        "info": jsxRuntime.jsx(InfoIcon, { sx: iconsx }),
+        "warning": jsxRuntime.jsx(WarningIcon, { sx: iconsx }),
+        "success": jsxRuntime.jsx(SuccessIcon, { sx: iconsx }),
+        "danger": jsxRuntime.jsx(ErrorIcon, { sx: iconsx })
+    };
+    let _icon = icons[icon] || icons[color];
+    return (jsxRuntime.jsxs(core.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 && jsxRuntime.jsx(index, { color: color, variant: variant === 'fill' ? "fill" : "text", size: 25, sx: {
+                    position: "absolute",
+                    top: 5,
+                    right: 5
+                }, onClick: onClose, className: "alert-close-button", children: jsxRuntime.jsx(Close, { fontSize: 18 }) }), jsxRuntime.jsxs(core.Tag, { sx: {
+                    display: "flex",
+                    gap: 1,
+                    flexDirection: direction,
+                    alignItems: isRow ? "flex-start" : "center"
+                }, baseClass: "alert-container", children: [_icon && jsxRuntime.jsx(core.Tag, { baseClass: "alert-icon", sxr: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            p: isRow ? 1 : 0,
+                            "& svg": {
+                                color: template.primary.color
+                            }
+                        }, children: _icon }), jsxRuntime.jsxs(core.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 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: React.isValidElement(title) ? jsxRuntime.jsx(core.Tag, { className: "alert-title", children: title }) : jsxRuntime.jsx(index$1, { className: "alert-title", variant: "text", sx: {
+                                        font: "text",
+                                        fontWeight: "bold!important",
+                                        color: template.primary.color
+                                    }, children: title }) }), jsxRuntime.jsx(core.Tag, { sxr: {
+                                    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();
+        }
+        else {
+            alert.close();
+        }
+    }, [props.open]);
+    return jsxRuntime.jsx(core.Tag, { ref: ref });
+};
+Alert.confirm = (props) => {
+    var _a;
+    const a = core.Renderar.render(ActionAlert, Object.assign(Object.assign({ open: true }, props), { slotProps: Object.assign(Object.assign({}, props.slotProps), { modal: Object.assign(Object.assign({}, (_a = props.slotProps) === null || _a === void 0 ? void 0 : _a.modal), { onClosed: () => {
+                    var _a, _b, _c, _d;
+                    a.unrender();
+                    if ((_b = (_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.modal) === null || _b === void 0 ? void 0 : _b.onClosed) {
+                        (_d = (_c = props.slotProps) === null || _c === void 0 ? void 0 : _c.modal) === null || _d === void 0 ? void 0 : _d.onClosed();
+                    }
+                } }) }) }));
+    return {
+        open: () => {
+            a.updateProps({ open: true });
+        },
+        close: () => {
+            a.updateProps({ open: false });
+        },
+    };
+};
+
+module.exports = Alert;
+//# sourceMappingURL=index.cjs.map

package/Alert/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","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.cjs

@@ -0,0 +1,136 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index$3 = require('../Input/index.cjs');
+var index$4 = require('../Menu/index.cjs');
+var index$5 = require('../List/index.cjs');
+var index$6 = require('../ListItem/index.cjs');
+var index = require('../Chip/index.cjs');
+var index$1 = require('../IconButton/index.cjs');
+var Close = require('@xanui/icons/Close');
+var index$2 = require('../CircleProgress/index.cjs');
+
+const Autocomplete = (_a) => {
+    var { value, onChange, renderOption, options, getLabel, multiple } = _a, inputProps = tslib.__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$2) => {
+            startIcons.push(jsxRuntime.jsx(index, { size: "small", label: getLabel(v), variant: "fill", color: "default", endIcon: jsxRuntime.jsx(index$1, { 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: jsxRuntime.jsx(Close, {}) }) }, index$2));
+        });
+    }
+    let endIcons = [
+        inputProps.endIcon
+    ];
+    if (loading) {
+        endIcons.push(jsxRuntime.jsx(index$2, { size: "small" }, "auto-complete-loading-icon"));
+    }
+    else if (!!value && !multiple) {
+        endIcons.push(jsxRuntime.jsx(index$1, { variant: "text", color: "default", onClick: (e) => {
+                e.stopPropagation();
+                onChange && onChange(undefined);
+                setInputValue("");
+            }, children: jsxRuntime.jsx(Close, {}) }, "auto-complete-clear-button"));
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index$3, 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));
+                } })), jsxRuntime.jsx(index$4, { target: open ? menuRef.current : null, onClickOutside: () => {
+                    setOptions([]);
+                    setInputValue("");
+                }, slotProps: {
+                    content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }
+                }, children: jsxRuntime.jsx(index$5, { maxHeight: 400, overflow: "auto", children: _options === null || _options === void 0 ? void 0 : _options.map((option, index) => (renderOption ? jsxRuntime.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)) : jsxRuntime.jsx(index$6, { 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))) }) })] }));
+};
+
+module.exports = Autocomplete;
+//# sourceMappingURL=index.cjs.map

package/Autocomplete/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","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":["__rest","index","_jsx","Chip","IconButton","CircleProgress","_jsxs","_Fragment","Input","Menu","List","ListItem"],"mappings":"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"}

package/Avatar/index.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+var PersonIcon = require('@xanui/icons/Person');
+var index = require('../Skeleton/index.cjs');
+
+const Avatar = React.forwardRef((_a, ref) => {
+    var _b;
+    var { children, src, alt, skeleton } = _a, rest = tslib.__rest(_a, ["children", "src", "alt", "skeleton"]);
+    const [faild, setFaild] = React.useState();
+    let [_c] = core.useInterface("Avatar", rest, {}), { size, slotProps } = _c, props = tslib.__rest(_c, ["size", "slotProps"]);
+    size !== null && size !== void 0 ? size : (size = 36);
+    const _p = {};
+    if (size)
+        _p.size = size;
+    const p = core.useBreakpointProps(_p);
+    size = p.size;
+    if (skeleton) {
+        return jsxRuntime.jsx(index, 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 || jsxRuntime.jsx(PersonIcon, {}));
+        return (jsxRuntime.jsx(core.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 (jsxRuntime.jsx(core.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 })));
+});
+
+module.exports = Avatar;
+//# sourceMappingURL=index.cjs.map

package/Avatar/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","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":["__rest","useState","useInterface","useBreakpointProps","_jsx","Skeleton","Tag"],"mappings":"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"}