@xanui/ui 1.2.8 → 1.2.11

package/Accordion/index.cjs

@@ -11,8 +11,8 @@ 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);
+    var { children, title, subtitle, defaultExpand } = _a, rest = tslib.__rest(_a, ["children", "title", "subtitle", "defaultExpand"]);
+    const [_expand, setExpand] = React.useState(defaultExpand || false);
     let [_b] = core.useInterface("Accordion", rest, {
         onClick: () => setExpand(!_expand),
         color: "primary",
@@ -83,12 +83,12 @@ const Accordion = React.forwardRef((_a, ref) => {
         itemsx.cursor = "initial!important";
     }
     return (jsxRuntime.jsx(core.Tag, Object.assign({}, rootProps, { sxr: {
-            bgcolor: "surface.main"
+            bgcolor: "default.base"
         }, 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: "surface.contrast",
+                            color: "default.contrast",
                             p: 2,
                             py: 1,
-                            bgcolor: "surface.main"
+                            bgcolor: "default.base"
                         }, baseClass: 'accordion-content', children: children })) }))] })) })));
 });
 

package/Accordion/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useInterface, UseColorTemplateColor, UseColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\nimport Collaps from '../Collaps';\nimport List from '../List';\nimport ListItem from '../ListItem';\nimport type { CollapsProps } from '../Collaps';\nimport type { ListProps } from '../List';\nimport type { ListItemProps } from '../ListItem';\n\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    expand?: boolean;\n    onClick?: () => void;\n    title: useBreakpointPropsType<ReactElement | string>;\n    subtitle?: useBreakpointPropsType<ReactElement | string>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    expandIcon?: useBreakpointPropsType<ReactElement>;\n    expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\n    expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\n\n    slotProps?: {\n        header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\n        headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\n        collaps?: Omit<CollapsProps, \"children\" | \"open\">;\n        content?: Omit<TagProps, \"children\">;\n        expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\n    }\n}\n\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\n    const [_expand, setExpand] = useState(false)\n    let [{\n        expand,\n        onClick,\n        color,\n        variant,\n        hoverColor,\n        hoverVariant,\n        expandIcon,\n        expandIconPlacement,\n        startIcon,\n        endIcon,\n        expandAction,\n        classNames,\n        slotProps,\n        ...rootProps\n    }] = useInterface<any>(\"Accordion\", rest, {\n        onClick: () => setExpand(!_expand) as any,\n        color: \"primary\",\n        variant: \"ghost\"\n    })\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (expandIcon) _p.expandIcon = expandIcon\n    if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\n    if (expandAction) _p.expandAction = expandAction\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    expandIcon = p.expandIcon\n    expandIconPlacement = p.expandIconPlacement\n    expandAction = p.expandAction\n    color = p.color\n    variant = p.variant\n    hoverColor = p.hoverColor\n    hoverVariant = p.hoverVariant\n\n    expand = expand === undefined ? _expand : expand\n    expandIcon = expandIcon ? <Tag\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        {expandIcon}\n    </Tag> : <Tag\n        transform={`rotate(${expand ? 0 : -180}deg)`}\n        transition=\"transform .4s\"\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        <ExpandIcon />\n    </Tag>\n\n    let itemsx: any = {}\n\n    if (expandIconPlacement === 'start') {\n        itemsx = {\n            startIcon: <Tag\n                className='start-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {expandIcon}\n                {startIcon}\n            </Tag>,\n            endIcon\n        }\n\n    } else {\n        itemsx = {\n            endIcon: <Tag\n                className='end-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {endIcon}\n                {expandIcon}\n            </Tag>,\n            startIcon\n        }\n    }\n\n    if (expandAction === 'icon') {\n        itemsx.onClick = () => { }\n        itemsx.cursor = \"initial!important\"\n    }\n\n    return (\n        <Tag\n            {...rootProps}\n            sxr={{\n                bgcolor: \"surface.main\"\n            }}\n            baseClass='accordion'\n            classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\n            ref={ref}\n        >\n            <List\n                component='div'\n                {...slotProps?.header}\n                color={color}\n                variant={variant}\n                hoverColor={hoverColor}\n                hoverVariant={hoverVariant}\n                className='accoutdion-header'\n            >\n                <ListItem\n                    minHeight={55}\n                    radius={0}\n                    component='div'\n                    {...slotProps?.headerContent}\n                    {...itemsx}\n                    subtitle={subtitle}\n                    selected={expand}\n                    onClick={() => onClick && onClick()}\n                    className=\"accordion-header-content\"\n                >{title}</ListItem>\n                <Collaps\n                    {...slotProps?.collaps}\n                    open={expand}\n                    className=\"accordion-collaps\"\n                >\n                    <Tag\n                        {...slotProps?.content}\n                        sxr={{\n                            color: \"surface.contrast\",\n                            p: 2,\n                            py: 1,\n                            bgcolor: \"surface.main\"\n                        }}\n                        baseClass='accordion-content'\n                    >\n                        {children}\n                    </Tag>\n                </Collaps>\n            </List>\n        </Tag>\n    )\n})\nexport default Accordion\n\n\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;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useInterface, UseColorTemplateColor, UseColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\nimport Collaps from '../Collaps';\nimport List from '../List';\nimport ListItem from '../ListItem';\nimport type { CollapsProps } from '../Collaps';\nimport type { ListProps } from '../List';\nimport type { ListItemProps } from '../ListItem';\n\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    expand?: boolean;\n    defaultExpand?: boolean;\n    onClick?: () => void;\n    title: useBreakpointPropsType<ReactElement | string>;\n    subtitle?: useBreakpointPropsType<ReactElement | string>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    expandIcon?: useBreakpointPropsType<ReactElement>;\n    expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\n    expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\n\n    slotProps?: {\n        header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\n        headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\n        collaps?: Omit<CollapsProps, \"children\" | \"open\">;\n        content?: Omit<TagProps, \"children\">;\n        expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\n    }\n}\n\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, defaultExpand, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\n    const [_expand, setExpand] = useState(defaultExpand || false)\n    let [{\n        expand,\n        onClick,\n        color,\n        variant,\n        hoverColor,\n        hoverVariant,\n        expandIcon,\n        expandIconPlacement,\n        startIcon,\n        endIcon,\n        expandAction,\n        classNames,\n        slotProps,\n        ...rootProps\n    }] = useInterface<any>(\"Accordion\", rest, {\n        onClick: () => setExpand(!_expand) as any,\n        color: \"primary\",\n        variant: \"ghost\"\n    })\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (expandIcon) _p.expandIcon = expandIcon\n    if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\n    if (expandAction) _p.expandAction = expandAction\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    expandIcon = p.expandIcon\n    expandIconPlacement = p.expandIconPlacement\n    expandAction = p.expandAction\n    color = p.color\n    variant = p.variant\n    hoverColor = p.hoverColor\n    hoverVariant = p.hoverVariant\n\n    expand = expand === undefined ? _expand : expand\n    expandIcon = expandIcon ? <Tag\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        {expandIcon}\n    </Tag> : <Tag\n        transform={`rotate(${expand ? 0 : -180}deg)`}\n        transition=\"transform .4s\"\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        <ExpandIcon />\n    </Tag>\n\n    let itemsx: any = {}\n\n    if (expandIconPlacement === 'start') {\n        itemsx = {\n            startIcon: <Tag\n                className='start-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {expandIcon}\n                {startIcon}\n            </Tag>,\n            endIcon\n        }\n\n    } else {\n        itemsx = {\n            endIcon: <Tag\n                className='end-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {endIcon}\n                {expandIcon}\n            </Tag>,\n            startIcon\n        }\n    }\n\n    if (expandAction === 'icon') {\n        itemsx.onClick = () => { }\n        itemsx.cursor = \"initial!important\"\n    }\n\n    return (\n        <Tag\n            {...rootProps}\n            sxr={{\n                bgcolor: \"default.base\"\n            }}\n            baseClass='accordion'\n            classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\n            ref={ref}\n        >\n            <List\n                component='div'\n                {...slotProps?.header}\n                color={color}\n                variant={variant}\n                hoverColor={hoverColor}\n                hoverVariant={hoverVariant}\n                className='accoutdion-header'\n            >\n                <ListItem\n                    minHeight={55}\n                    radius={0}\n                    component='div'\n                    {...slotProps?.headerContent}\n                    {...itemsx}\n                    subtitle={subtitle}\n                    selected={expand}\n                    onClick={() => onClick && onClick()}\n                    className=\"accordion-header-content\"\n                >{title}</ListItem>\n                <Collaps\n                    {...slotProps?.collaps}\n                    open={expand}\n                    className=\"accordion-collaps\"\n                >\n                    <Tag\n                        {...slotProps?.content}\n                        sxr={{\n                            color: \"default.contrast\",\n                            p: 2,\n                            py: 1,\n                            bgcolor: \"default.base\"\n                        }}\n                        baseClass='accordion-content'\n                    >\n                        {children}\n                    </Tag>\n                </Collaps>\n            </List>\n        </Tag>\n    )\n})\nexport default Accordion\n\n\n"],"names":[],"mappings":";;;;;;;;;;;;AAoCA;AAAwE;AACpE;AACA;;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.d.ts

@@ -6,6 +6,7 @@ import { ListItemProps } from '../ListItem/index.js';
 
 type AccordionProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "color"> & {
     expand?: boolean;
+    defaultExpand?: boolean;
     onClick?: () => void;
     title: useBreakpointPropsType<ReactElement | string>;
     subtitle?: useBreakpointPropsType<ReactElement | string>;

package/Accordion/index.js

@@ -9,8 +9,8 @@ import List from '../List/index.js';
 import ListItem from '../ListItem/index.js';
 
 const Accordion = React.forwardRef((_a, ref) => {
-    var { children, title, subtitle } = _a, rest = __rest(_a, ["children", "title", "subtitle"]);
-    const [_expand, setExpand] = useState(false);
+    var { children, title, subtitle, defaultExpand } = _a, rest = __rest(_a, ["children", "title", "subtitle", "defaultExpand"]);
+    const [_expand, setExpand] = useState(defaultExpand || false);
     let [_b] = useInterface("Accordion", rest, {
         onClick: () => setExpand(!_expand),
         color: "primary",
@@ -81,12 +81,12 @@ const Accordion = React.forwardRef((_a, ref) => {
         itemsx.cursor = "initial!important";
     }
     return (jsx(Tag, Object.assign({}, rootProps, { sxr: {
-            bgcolor: "surface.main"
+            bgcolor: "default.base"
         }, 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: "surface.contrast",
+                            color: "default.contrast",
                             p: 2,
                             py: 1,
-                            bgcolor: "surface.main"
+                            bgcolor: "default.base"
                         }, baseClass: 'accordion-content', children: children })) }))] })) })));
 });
 

package/Accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useInterface, UseColorTemplateColor, UseColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\nimport Collaps from '../Collaps';\nimport List from '../List';\nimport ListItem from '../ListItem';\nimport type { CollapsProps } from '../Collaps';\nimport type { ListProps } from '../List';\nimport type { ListItemProps } from '../ListItem';\n\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    expand?: boolean;\n    onClick?: () => void;\n    title: useBreakpointPropsType<ReactElement | string>;\n    subtitle?: useBreakpointPropsType<ReactElement | string>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    expandIcon?: useBreakpointPropsType<ReactElement>;\n    expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\n    expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\n\n    slotProps?: {\n        header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\n        headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\n        collaps?: Omit<CollapsProps, \"children\" | \"open\">;\n        content?: Omit<TagProps, \"children\">;\n        expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\n    }\n}\n\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\n    const [_expand, setExpand] = useState(false)\n    let [{\n        expand,\n        onClick,\n        color,\n        variant,\n        hoverColor,\n        hoverVariant,\n        expandIcon,\n        expandIconPlacement,\n        startIcon,\n        endIcon,\n        expandAction,\n        classNames,\n        slotProps,\n        ...rootProps\n    }] = useInterface<any>(\"Accordion\", rest, {\n        onClick: () => setExpand(!_expand) as any,\n        color: \"primary\",\n        variant: \"ghost\"\n    })\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (expandIcon) _p.expandIcon = expandIcon\n    if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\n    if (expandAction) _p.expandAction = expandAction\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    expandIcon = p.expandIcon\n    expandIconPlacement = p.expandIconPlacement\n    expandAction = p.expandAction\n    color = p.color\n    variant = p.variant\n    hoverColor = p.hoverColor\n    hoverVariant = p.hoverVariant\n\n    expand = expand === undefined ? _expand : expand\n    expandIcon = expandIcon ? <Tag\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        {expandIcon}\n    </Tag> : <Tag\n        transform={`rotate(${expand ? 0 : -180}deg)`}\n        transition=\"transform .4s\"\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        <ExpandIcon />\n    </Tag>\n\n    let itemsx: any = {}\n\n    if (expandIconPlacement === 'start') {\n        itemsx = {\n            startIcon: <Tag\n                className='start-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {expandIcon}\n                {startIcon}\n            </Tag>,\n            endIcon\n        }\n\n    } else {\n        itemsx = {\n            endIcon: <Tag\n                className='end-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {endIcon}\n                {expandIcon}\n            </Tag>,\n            startIcon\n        }\n    }\n\n    if (expandAction === 'icon') {\n        itemsx.onClick = () => { }\n        itemsx.cursor = \"initial!important\"\n    }\n\n    return (\n        <Tag\n            {...rootProps}\n            sxr={{\n                bgcolor: \"surface.main\"\n            }}\n            baseClass='accordion'\n            classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\n            ref={ref}\n        >\n            <List\n                component='div'\n                {...slotProps?.header}\n                color={color}\n                variant={variant}\n                hoverColor={hoverColor}\n                hoverVariant={hoverVariant}\n                className='accoutdion-header'\n            >\n                <ListItem\n                    minHeight={55}\n                    radius={0}\n                    component='div'\n                    {...slotProps?.headerContent}\n                    {...itemsx}\n                    subtitle={subtitle}\n                    selected={expand}\n                    onClick={() => onClick && onClick()}\n                    className=\"accordion-header-content\"\n                >{title}</ListItem>\n                <Collaps\n                    {...slotProps?.collaps}\n                    open={expand}\n                    className=\"accordion-collaps\"\n                >\n                    <Tag\n                        {...slotProps?.content}\n                        sxr={{\n                            color: \"surface.contrast\",\n                            p: 2,\n                            py: 1,\n                            bgcolor: \"surface.main\"\n                        }}\n                        baseClass='accordion-content'\n                    >\n                        {children}\n                    </Tag>\n                </Collaps>\n            </List>\n        </Tag>\n    )\n})\nexport default Accordion\n\n\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;;"}
+{"version":3,"file":"index.js","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useInterface, UseColorTemplateColor, UseColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\nimport Collaps from '../Collaps';\nimport List from '../List';\nimport ListItem from '../ListItem';\nimport type { CollapsProps } from '../Collaps';\nimport type { ListProps } from '../List';\nimport type { ListItemProps } from '../ListItem';\n\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    expand?: boolean;\n    defaultExpand?: boolean;\n    onClick?: () => void;\n    title: useBreakpointPropsType<ReactElement | string>;\n    subtitle?: useBreakpointPropsType<ReactElement | string>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    expandIcon?: useBreakpointPropsType<ReactElement>;\n    expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\n    expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\n\n    slotProps?: {\n        header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\n        headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\n        collaps?: Omit<CollapsProps, \"children\" | \"open\">;\n        content?: Omit<TagProps, \"children\">;\n        expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\n    }\n}\n\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, defaultExpand, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\n    const [_expand, setExpand] = useState(defaultExpand || false)\n    let [{\n        expand,\n        onClick,\n        color,\n        variant,\n        hoverColor,\n        hoverVariant,\n        expandIcon,\n        expandIconPlacement,\n        startIcon,\n        endIcon,\n        expandAction,\n        classNames,\n        slotProps,\n        ...rootProps\n    }] = useInterface<any>(\"Accordion\", rest, {\n        onClick: () => setExpand(!_expand) as any,\n        color: \"primary\",\n        variant: \"ghost\"\n    })\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (expandIcon) _p.expandIcon = expandIcon\n    if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\n    if (expandAction) _p.expandAction = expandAction\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    expandIcon = p.expandIcon\n    expandIconPlacement = p.expandIconPlacement\n    expandAction = p.expandAction\n    color = p.color\n    variant = p.variant\n    hoverColor = p.hoverColor\n    hoverVariant = p.hoverVariant\n\n    expand = expand === undefined ? _expand : expand\n    expandIcon = expandIcon ? <Tag\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        {expandIcon}\n    </Tag> : <Tag\n        transform={`rotate(${expand ? 0 : -180}deg)`}\n        transition=\"transform .4s\"\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        <ExpandIcon />\n    </Tag>\n\n    let itemsx: any = {}\n\n    if (expandIconPlacement === 'start') {\n        itemsx = {\n            startIcon: <Tag\n                className='start-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {expandIcon}\n                {startIcon}\n            </Tag>,\n            endIcon\n        }\n\n    } else {\n        itemsx = {\n            endIcon: <Tag\n                className='end-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {endIcon}\n                {expandIcon}\n            </Tag>,\n            startIcon\n        }\n    }\n\n    if (expandAction === 'icon') {\n        itemsx.onClick = () => { }\n        itemsx.cursor = \"initial!important\"\n    }\n\n    return (\n        <Tag\n            {...rootProps}\n            sxr={{\n                bgcolor: \"default.base\"\n            }}\n            baseClass='accordion'\n            classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\n            ref={ref}\n        >\n            <List\n                component='div'\n                {...slotProps?.header}\n                color={color}\n                variant={variant}\n                hoverColor={hoverColor}\n                hoverVariant={hoverVariant}\n                className='accoutdion-header'\n            >\n                <ListItem\n                    minHeight={55}\n                    radius={0}\n                    component='div'\n                    {...slotProps?.headerContent}\n                    {...itemsx}\n                    subtitle={subtitle}\n                    selected={expand}\n                    onClick={() => onClick && onClick()}\n                    className=\"accordion-header-content\"\n                >{title}</ListItem>\n                <Collaps\n                    {...slotProps?.collaps}\n                    open={expand}\n                    className=\"accordion-collaps\"\n                >\n                    <Tag\n                        {...slotProps?.content}\n                        sxr={{\n                            color: \"default.contrast\",\n                            p: 2,\n                            py: 1,\n                            bgcolor: \"default.base\"\n                        }}\n                        baseClass='accordion-content'\n                    >\n                        {children}\n                    </Tag>\n                </Collaps>\n            </List>\n        </Tag>\n    )\n})\nexport default Accordion\n\n\n"],"names":[],"mappings":";;;;;;;;;;AAoCA;AAAwE;AACpE;AACA;;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

@@ -20,7 +20,7 @@ const Alert = (_a) => {
     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 = 'surface');
+    color !== null && color !== void 0 ? color : (color = 'default');
     direction !== null && direction !== void 0 ? direction : (direction = "row");
     const _p = {};
     if (title)
@@ -43,7 +43,7 @@ const Alert = (_a) => {
     const template = core.useColorTemplate(color, variant);
     let iconsx = {
         fontSize: isRow ? 22 : 40,
-        color: color === 'surface' ? "surface.contrast" : template.main.color
+        color: color === 'default' ? "default.contrast" : template.main.color
     };
     const icons = {
         "info": jsxRuntime.jsx(InfoIcon, { sx: iconsx }),
@@ -91,7 +91,7 @@ const ConfirmAlert = (props) => {
     hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
     hideCancelButton !== null && hideCancelButton !== void 0 ? hideCancelButton : (hideCancelButton = false);
     size !== null && size !== void 0 ? size : (size = "small");
-    color !== null && color !== void 0 ? color : (color = 'surface');
+    color !== null && color !== void 0 ? color : (color = 'default');
     variant !== null && variant !== void 0 ? variant : (variant = "text");
     direction !== null && direction !== void 0 ? direction : (direction = "column");
     buttonPlacement !== null && buttonPlacement !== void 0 ? buttonPlacement : (buttonPlacement = "end");
@@ -121,19 +121,19 @@ const ConfirmAlert = (props) => {
     };
     let okcolor = color;
     let closecolor = color;
-    if (color === 'surface') {
+    if (color === 'default') {
         okcolor = 'primary';
-        closecolor = 'surface';
+        closecolor = 'default';
         variant = 'text';
     }
     else {
         if (variant === 'fill') {
-            okcolor = 'surface';
-            closecolor = 'surface';
+            okcolor = 'default';
+            closecolor = 'default';
         }
         else {
             okcolor = color;
-            closecolor = 'surface';
+            closecolor = 'default';
         }
     }
     return (jsxRuntime.jsx(index$2, Object.assign({ open: open }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.modal, { size: sizes[size] || size, blur: 40, blurMode: blurMode || "transparent", transition: transition || "zoom", onClickOutside: async () => {

package/Alert/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, TransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n    let [{\n        title,\n        variant,\n        icon,\n        color,\n        direction,\n        slotProps,\n        onClose,\n        ..._props\n    }] = useInterface<any>(\"Alert\", rest, {\n        variant: \"fill\"\n    })\n    color ??= 'surface'\n    direction ??= \"row\"\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (variant) _p.variant = variant\n    if (icon) _p.icon = icon\n    if (color) _p.color = color\n    if (direction) _p.direction = direction\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    variant = p.variant\n    icon = p.icon\n    color = p.color\n    direction = p.direction\n\n    let isRow = direction === 'row'\n\n\n    const template = useColorTemplate(color, variant)\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'surface' ? \"surface.contrast\" : template.main.color\n    }\n\n    const icons: any = {\n        \"info\": <InfoIcon sx={iconsx} />,\n        \"warning\": <WarningIcon sx={iconsx} />,\n        \"success\": <SuccessIcon sx={iconsx} />,\n        \"danger\": <ErrorIcon sx={iconsx} />\n    }\n\n    let _icon = icons[icon] || icons[color]\n\n    return (\n        <Tag\n            {..._props}\n            baseClass=\"alert\"\n            sxr={{\n                justifyContent: \"flex-start\",\n                position: \"relative\",\n                radius: 1,\n                px: isRow ? (_icon ? .5 : 2) : 3,\n                py: isRow ? .5 : 3,\n                flexDirection: \"column\",\n                display: 'flex',\n                ..._props?.sx\n            }}\n            {...template.main}\n        >\n            {\n                onClose && <IconButton\n                    color={color}\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\n                    size={25}\n                    sx={{\n                        position: \"absolute\",\n                        top: 5,\n                        right: 5\n                    }}\n                    onClick={onClose}\n                    className=\"alert-close-button\"\n                >\n                    <IconClose fontSize={18} />\n                </IconButton>\n            }\n            <Tag\n                sx={{\n                    display: \"flex\",\n                    gap: 1,\n                    flexDirection: direction,\n                    alignItems: isRow ? \"flex-start\" : \"center\"\n                }}\n                baseClass=\"alert-container\"\n            >\n                {\n                    _icon && <Tag\n                        baseClass=\"alert-icon\"\n                        sxr={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            p: isRow ? .5 : 0,\n                            \"& svg\": {\n                                color: template.main.color\n                            }\n                        }}\n                    >\n                        {_icon}\n                    </Tag>\n                }\n                <Tag\n                    baseClass=\"alert-content\"\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        flex: 1,\n                        color: template.main.color,\n                        textAlign: isRow ? \"left\" : \"center\",\n                        gap: isRow ? 0 : 1,\n                        width: \"100%\"\n                    }}\n                >\n                    {title && <>\n                        {\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n                                className=\"alert-titles\"\n                                variant=\"text\"\n                                sx={{\n                                    fontWeight: 500,\n                                    color: template.main.color\n                                }}\n                            >{title}</Text>\n                        }\n                    </>}\n                    <Tag\n                        sxr={{\n                            fontSize: \"button\",\n                            fontWeight: \"button\",\n                            lineHeight: \"button\"\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Tag>\n            </Tag>\n        </Tag>\n    )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    open: boolean;\n    loading: boolean;\n    content: string | ReactElement,\n    size?: \"small\" | \"medium\" | \"large\" | number;\n    closeButton?: boolean;\n    clickOutsideToClose?: boolean;\n    okButtonText?: string;\n    cancelButtonText?: string;\n    hideOkButton?: boolean;\n    hideCancelButton?: boolean;\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n    variant?: \"text\" | \"fill\"\n    onConfirm?: () => Promise<void> | void;\n    onCancel?: () => Promise<void> | void;\n    transition?: TransitionVariantTypes;\n    blurMode?: ModalProps['blurMode'];\n    slotProps?: {\n        modal?: Omit<ModalProps, 'open' | \"children\">;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n    let {\n        open,\n        loading,\n        content,\n        size,\n        color,\n        direction,\n        variant,\n        closeButton,\n        clickOutsideToClose,\n        okButtonText,\n        cancelButtonText,\n        hideOkButton,\n        hideCancelButton,\n        buttonPlacement,\n        onConfirm,\n        onCancel,\n        transition,\n        blurMode,\n        slotProps,\n        ...rest\n    } = props\n\n    hideOkButton ??= false\n    hideCancelButton ??= false\n\n    size ??= \"small\"\n    color ??= 'surface'\n    variant ??= \"text\"\n    direction ??= \"column\"\n    buttonPlacement ??= \"end\"\n    let sx: any = {};\n\n    switch (buttonPlacement) {\n        case \"start\":\n            sx.justifyContent = 'flex-start'\n            break;\n        case \"end\":\n            sx.justifyContent = 'flex-end'\n            break;\n        case \"between\":\n            sx.justifyContent = 'space-between'\n            break;\n        case \"full\":\n            sx = {\n                \"& button\": {\n                    flex: 1\n                }\n            }\n            break;\n    }\n\n    let sizes: any = {\n        small: 320,\n        medium: 400,\n        large: 600\n    }\n\n    let okcolor = color\n    let closecolor = color\n    if (color === 'surface') {\n        okcolor = 'primary'\n        closecolor = 'surface'\n        variant = 'text'\n    } else {\n        if (variant === 'fill') {\n            okcolor = 'surface'\n            closecolor = 'surface'\n        } else {\n            okcolor = color\n            closecolor = 'surface'\n        }\n    }\n\n    return (<Modal\n        open={open}\n        {...slotProps?.modal}\n        size={sizes[size] || size}\n        blur={40}\n        blurMode={blurMode || \"transparent\"}\n        transition={transition || \"zoom\"}\n        onClickOutside={async () => {\n            if (clickOutsideToClose && !loading) {\n                onCancel && await onCancel()\n            }\n        }}\n    >\n        <Alert\n            direction={direction}\n            sx={{\n                px: 2,\n                py: 1,\n                pt: direction === 'row' ? 1 : 2\n            }}\n            color={color}\n            variant={variant}\n            onClose={closeButton ? close : undefined}\n            {...rest}\n        >\n            {content}\n            <Tag\n                sxr={{\n                    display: \"flex\",\n                    gap: 1,\n                    pt: 4,\n                    flexDirection: \"row\",\n                    ...sx,\n                }}\n            >\n                {!hideCancelButton && <Button\n                    disabled={loading}\n                    color={closecolor}\n                    variant=\"fill\"\n                    {...slotProps?.closeButton}\n                    onClick={async () => {\n                        onCancel && await onCancel()\n                    }}\n                >{cancelButtonText || \"Close\"}</Button>}\n                <Button\n                    loading={loading}\n                    color={okcolor}\n                    variant=\"fill\"\n                    {...slotProps?.okButton}\n\n                    onClick={async () => {\n                        onConfirm && await onConfirm()\n                    }}\n                >{okButtonText || \"OK\"}</Button>\n            </Tag>\n        </Alert>\n    </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n    const Inst = (_props: any) => <ConfirmAlert {..._props} />\n    const confirm = Renderar.render(Inst as any, {\n        ...props,\n        open: true,\n        loading: false,\n        onConfirm: async () => {\n            if (onConfirm) {\n                confirm.updateProps({ loading: true })\n                if (onConfirm) await onConfirm()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        onCancel: async () => {\n            if (onCancel) {\n                confirm.updateProps({ loading: true })\n                await onCancel()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                onExited: () => {\n                    confirm.unrender()\n                    if (props?.slotProps?.modal?.onExited) {\n                        props.slotProps?.modal?.onExited()\n                    }\n                },\n            }\n        },\n    })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACA;AACA;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, TransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n    let [{\n        title,\n        variant,\n        icon,\n        color,\n        direction,\n        slotProps,\n        onClose,\n        ..._props\n    }] = useInterface<any>(\"Alert\", rest, {\n        variant: \"fill\"\n    })\n    color ??= 'default'\n    direction ??= \"row\"\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (variant) _p.variant = variant\n    if (icon) _p.icon = icon\n    if (color) _p.color = color\n    if (direction) _p.direction = direction\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    variant = p.variant\n    icon = p.icon\n    color = p.color\n    direction = p.direction\n\n    let isRow = direction === 'row'\n\n    const template = useColorTemplate(color, variant)\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'default' ? \"default.contrast\" : template.main.color\n    }\n\n    const icons: any = {\n        \"info\": <InfoIcon sx={iconsx} />,\n        \"warning\": <WarningIcon sx={iconsx} />,\n        \"success\": <SuccessIcon sx={iconsx} />,\n        \"danger\": <ErrorIcon sx={iconsx} />\n    }\n\n    let _icon = icons[icon] || icons[color]\n\n    return (\n        <Tag\n            {..._props}\n            baseClass=\"alert\"\n            sxr={{\n                justifyContent: \"flex-start\",\n                position: \"relative\",\n                radius: 1,\n                px: isRow ? (_icon ? .5 : 2) : 3,\n                py: isRow ? .5 : 3,\n                flexDirection: \"column\",\n                display: 'flex',\n                ..._props?.sx\n            }}\n            {...template.main}\n        >\n            {\n                onClose && <IconButton\n                    color={color}\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\n                    size={25}\n                    sx={{\n                        position: \"absolute\",\n                        top: 5,\n                        right: 5\n                    }}\n                    onClick={onClose}\n                    className=\"alert-close-button\"\n                >\n                    <IconClose fontSize={18} />\n                </IconButton>\n            }\n            <Tag\n                sx={{\n                    display: \"flex\",\n                    gap: 1,\n                    flexDirection: direction,\n                    alignItems: isRow ? \"flex-start\" : \"center\"\n                }}\n                baseClass=\"alert-container\"\n            >\n                {\n                    _icon && <Tag\n                        baseClass=\"alert-icon\"\n                        sxr={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            p: isRow ? .5 : 0,\n                            \"& svg\": {\n                                color: template.main.color\n                            }\n                        }}\n                    >\n                        {_icon}\n                    </Tag>\n                }\n                <Tag\n                    baseClass=\"alert-content\"\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        flex: 1,\n                        color: template.main.color,\n                        textAlign: isRow ? \"left\" : \"center\",\n                        gap: isRow ? 0 : 1,\n                        width: \"100%\"\n                    }}\n                >\n                    {title && <>\n                        {\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n                                className=\"alert-titles\"\n                                variant=\"text\"\n                                sx={{\n                                    fontWeight: 500,\n                                    color: template.main.color\n                                }}\n                            >{title}</Text>\n                        }\n                    </>}\n                    <Tag\n                        sxr={{\n                            fontSize: \"button\",\n                            fontWeight: \"button\",\n                            lineHeight: \"button\"\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Tag>\n            </Tag>\n        </Tag>\n    )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    open: boolean;\n    loading: boolean;\n    content: string | ReactElement,\n    size?: \"small\" | \"medium\" | \"large\" | number;\n    closeButton?: boolean;\n    clickOutsideToClose?: boolean;\n    okButtonText?: string;\n    cancelButtonText?: string;\n    hideOkButton?: boolean;\n    hideCancelButton?: boolean;\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n    variant?: \"text\" | \"fill\"\n    onConfirm?: () => Promise<void> | void;\n    onCancel?: () => Promise<void> | void;\n    transition?: TransitionVariantTypes;\n    blurMode?: ModalProps['blurMode'];\n    slotProps?: {\n        modal?: Omit<ModalProps, 'open' | \"children\">;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n    let {\n        open,\n        loading,\n        content,\n        size,\n        color,\n        direction,\n        variant,\n        closeButton,\n        clickOutsideToClose,\n        okButtonText,\n        cancelButtonText,\n        hideOkButton,\n        hideCancelButton,\n        buttonPlacement,\n        onConfirm,\n        onCancel,\n        transition,\n        blurMode,\n        slotProps,\n        ...rest\n    } = props\n\n    hideOkButton ??= false\n    hideCancelButton ??= false\n\n    size ??= \"small\"\n    color ??= 'default'\n    variant ??= \"text\"\n    direction ??= \"column\"\n    buttonPlacement ??= \"end\"\n    let sx: any = {};\n\n    switch (buttonPlacement) {\n        case \"start\":\n            sx.justifyContent = 'flex-start'\n            break;\n        case \"end\":\n            sx.justifyContent = 'flex-end'\n            break;\n        case \"between\":\n            sx.justifyContent = 'space-between'\n            break;\n        case \"full\":\n            sx = {\n                \"& button\": {\n                    flex: 1\n                }\n            }\n            break;\n    }\n\n    let sizes: any = {\n        small: 320,\n        medium: 400,\n        large: 600\n    }\n\n    let okcolor = color\n    let closecolor = color\n    if (color === 'default') {\n        okcolor = 'primary'\n        closecolor = 'default'\n        variant = 'text'\n    } else {\n        if (variant === 'fill') {\n            okcolor = 'default'\n            closecolor = 'default'\n        } else {\n            okcolor = color\n            closecolor = 'default'\n        }\n    }\n\n    return (<Modal\n        open={open}\n        {...slotProps?.modal}\n        size={sizes[size] || size}\n        blur={40}\n        blurMode={blurMode || \"transparent\"}\n        transition={transition || \"zoom\"}\n        onClickOutside={async () => {\n            if (clickOutsideToClose && !loading) {\n                onCancel && await onCancel()\n            }\n        }}\n    >\n        <Alert\n            direction={direction}\n            sx={{\n                px: 2,\n                py: 1,\n                pt: direction === 'row' ? 1 : 2\n            }}\n            color={color}\n            variant={variant}\n            onClose={closeButton ? close : undefined}\n            {...rest}\n        >\n            {content}\n            <Tag\n                sxr={{\n                    display: \"flex\",\n                    gap: 1,\n                    pt: 4,\n                    flexDirection: \"row\",\n                    ...sx,\n                }}\n            >\n                {!hideCancelButton && <Button\n                    disabled={loading}\n                    color={closecolor}\n                    variant=\"fill\"\n                    {...slotProps?.closeButton}\n                    onClick={async () => {\n                        onCancel && await onCancel()\n                    }}\n                >{cancelButtonText || \"Close\"}</Button>}\n                <Button\n                    loading={loading}\n                    color={okcolor}\n                    variant=\"fill\"\n                    {...slotProps?.okButton}\n\n                    onClick={async () => {\n                        onConfirm && await onConfirm()\n                    }}\n                >{okButtonText || \"OK\"}</Button>\n            </Tag>\n        </Alert>\n    </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n    const Inst = (_props: any) => <ConfirmAlert {..._props} />\n    const confirm = Renderar.render(Inst as any, {\n        ...props,\n        open: true,\n        loading: false,\n        onConfirm: async () => {\n            if (onConfirm) {\n                confirm.updateProps({ loading: true })\n                if (onConfirm) await onConfirm()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        onCancel: async () => {\n            if (onCancel) {\n                confirm.updateProps({ loading: true })\n                await onCancel()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                onExited: () => {\n                    confirm.unrender()\n                    if (props?.slotProps?.modal?.onExited) {\n                        props.slotProps?.modal?.onExited()\n                    }\n                },\n            }\n        },\n    })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAIA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACA;AACA;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}

package/Alert/index.js

@@ -18,7 +18,7 @@ const Alert = (_a) => {
     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 = 'surface');
+    color !== null && color !== void 0 ? color : (color = 'default');
     direction !== null && direction !== void 0 ? direction : (direction = "row");
     const _p = {};
     if (title)
@@ -41,7 +41,7 @@ const Alert = (_a) => {
     const template = useColorTemplate(color, variant);
     let iconsx = {
         fontSize: isRow ? 22 : 40,
-        color: color === 'surface' ? "surface.contrast" : template.main.color
+        color: color === 'default' ? "default.contrast" : template.main.color
     };
     const icons = {
         "info": jsx(InfoIcon, { sx: iconsx }),
@@ -89,7 +89,7 @@ const ConfirmAlert = (props) => {
     hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
     hideCancelButton !== null && hideCancelButton !== void 0 ? hideCancelButton : (hideCancelButton = false);
     size !== null && size !== void 0 ? size : (size = "small");
-    color !== null && color !== void 0 ? color : (color = 'surface');
+    color !== null && color !== void 0 ? color : (color = 'default');
     variant !== null && variant !== void 0 ? variant : (variant = "text");
     direction !== null && direction !== void 0 ? direction : (direction = "column");
     buttonPlacement !== null && buttonPlacement !== void 0 ? buttonPlacement : (buttonPlacement = "end");
@@ -119,19 +119,19 @@ const ConfirmAlert = (props) => {
     };
     let okcolor = color;
     let closecolor = color;
-    if (color === 'surface') {
+    if (color === 'default') {
         okcolor = 'primary';
-        closecolor = 'surface';
+        closecolor = 'default';
         variant = 'text';
     }
     else {
         if (variant === 'fill') {
-            okcolor = 'surface';
-            closecolor = 'surface';
+            okcolor = 'default';
+            closecolor = 'default';
         }
         else {
             okcolor = color;
-            closecolor = 'surface';
+            closecolor = 'default';
         }
     }
     return (jsx(Modal, Object.assign({ open: open }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.modal, { size: sizes[size] || size, blur: 40, blurMode: blurMode || "transparent", transition: transition || "zoom", onClickOutside: async () => {

package/Alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, TransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n    let [{\n        title,\n        variant,\n        icon,\n        color,\n        direction,\n        slotProps,\n        onClose,\n        ..._props\n    }] = useInterface<any>(\"Alert\", rest, {\n        variant: \"fill\"\n    })\n    color ??= 'surface'\n    direction ??= \"row\"\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (variant) _p.variant = variant\n    if (icon) _p.icon = icon\n    if (color) _p.color = color\n    if (direction) _p.direction = direction\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    variant = p.variant\n    icon = p.icon\n    color = p.color\n    direction = p.direction\n\n    let isRow = direction === 'row'\n\n\n    const template = useColorTemplate(color, variant)\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'surface' ? \"surface.contrast\" : template.main.color\n    }\n\n    const icons: any = {\n        \"info\": <InfoIcon sx={iconsx} />,\n        \"warning\": <WarningIcon sx={iconsx} />,\n        \"success\": <SuccessIcon sx={iconsx} />,\n        \"danger\": <ErrorIcon sx={iconsx} />\n    }\n\n    let _icon = icons[icon] || icons[color]\n\n    return (\n        <Tag\n            {..._props}\n            baseClass=\"alert\"\n            sxr={{\n                justifyContent: \"flex-start\",\n                position: \"relative\",\n                radius: 1,\n                px: isRow ? (_icon ? .5 : 2) : 3,\n                py: isRow ? .5 : 3,\n                flexDirection: \"column\",\n                display: 'flex',\n                ..._props?.sx\n            }}\n            {...template.main}\n        >\n            {\n                onClose && <IconButton\n                    color={color}\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\n                    size={25}\n                    sx={{\n                        position: \"absolute\",\n                        top: 5,\n                        right: 5\n                    }}\n                    onClick={onClose}\n                    className=\"alert-close-button\"\n                >\n                    <IconClose fontSize={18} />\n                </IconButton>\n            }\n            <Tag\n                sx={{\n                    display: \"flex\",\n                    gap: 1,\n                    flexDirection: direction,\n                    alignItems: isRow ? \"flex-start\" : \"center\"\n                }}\n                baseClass=\"alert-container\"\n            >\n                {\n                    _icon && <Tag\n                        baseClass=\"alert-icon\"\n                        sxr={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            p: isRow ? .5 : 0,\n                            \"& svg\": {\n                                color: template.main.color\n                            }\n                        }}\n                    >\n                        {_icon}\n                    </Tag>\n                }\n                <Tag\n                    baseClass=\"alert-content\"\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        flex: 1,\n                        color: template.main.color,\n                        textAlign: isRow ? \"left\" : \"center\",\n                        gap: isRow ? 0 : 1,\n                        width: \"100%\"\n                    }}\n                >\n                    {title && <>\n                        {\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n                                className=\"alert-titles\"\n                                variant=\"text\"\n                                sx={{\n                                    fontWeight: 500,\n                                    color: template.main.color\n                                }}\n                            >{title}</Text>\n                        }\n                    </>}\n                    <Tag\n                        sxr={{\n                            fontSize: \"button\",\n                            fontWeight: \"button\",\n                            lineHeight: \"button\"\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Tag>\n            </Tag>\n        </Tag>\n    )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    open: boolean;\n    loading: boolean;\n    content: string | ReactElement,\n    size?: \"small\" | \"medium\" | \"large\" | number;\n    closeButton?: boolean;\n    clickOutsideToClose?: boolean;\n    okButtonText?: string;\n    cancelButtonText?: string;\n    hideOkButton?: boolean;\n    hideCancelButton?: boolean;\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n    variant?: \"text\" | \"fill\"\n    onConfirm?: () => Promise<void> | void;\n    onCancel?: () => Promise<void> | void;\n    transition?: TransitionVariantTypes;\n    blurMode?: ModalProps['blurMode'];\n    slotProps?: {\n        modal?: Omit<ModalProps, 'open' | \"children\">;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n    let {\n        open,\n        loading,\n        content,\n        size,\n        color,\n        direction,\n        variant,\n        closeButton,\n        clickOutsideToClose,\n        okButtonText,\n        cancelButtonText,\n        hideOkButton,\n        hideCancelButton,\n        buttonPlacement,\n        onConfirm,\n        onCancel,\n        transition,\n        blurMode,\n        slotProps,\n        ...rest\n    } = props\n\n    hideOkButton ??= false\n    hideCancelButton ??= false\n\n    size ??= \"small\"\n    color ??= 'surface'\n    variant ??= \"text\"\n    direction ??= \"column\"\n    buttonPlacement ??= \"end\"\n    let sx: any = {};\n\n    switch (buttonPlacement) {\n        case \"start\":\n            sx.justifyContent = 'flex-start'\n            break;\n        case \"end\":\n            sx.justifyContent = 'flex-end'\n            break;\n        case \"between\":\n            sx.justifyContent = 'space-between'\n            break;\n        case \"full\":\n            sx = {\n                \"& button\": {\n                    flex: 1\n                }\n            }\n            break;\n    }\n\n    let sizes: any = {\n        small: 320,\n        medium: 400,\n        large: 600\n    }\n\n    let okcolor = color\n    let closecolor = color\n    if (color === 'surface') {\n        okcolor = 'primary'\n        closecolor = 'surface'\n        variant = 'text'\n    } else {\n        if (variant === 'fill') {\n            okcolor = 'surface'\n            closecolor = 'surface'\n        } else {\n            okcolor = color\n            closecolor = 'surface'\n        }\n    }\n\n    return (<Modal\n        open={open}\n        {...slotProps?.modal}\n        size={sizes[size] || size}\n        blur={40}\n        blurMode={blurMode || \"transparent\"}\n        transition={transition || \"zoom\"}\n        onClickOutside={async () => {\n            if (clickOutsideToClose && !loading) {\n                onCancel && await onCancel()\n            }\n        }}\n    >\n        <Alert\n            direction={direction}\n            sx={{\n                px: 2,\n                py: 1,\n                pt: direction === 'row' ? 1 : 2\n            }}\n            color={color}\n            variant={variant}\n            onClose={closeButton ? close : undefined}\n            {...rest}\n        >\n            {content}\n            <Tag\n                sxr={{\n                    display: \"flex\",\n                    gap: 1,\n                    pt: 4,\n                    flexDirection: \"row\",\n                    ...sx,\n                }}\n            >\n                {!hideCancelButton && <Button\n                    disabled={loading}\n                    color={closecolor}\n                    variant=\"fill\"\n                    {...slotProps?.closeButton}\n                    onClick={async () => {\n                        onCancel && await onCancel()\n                    }}\n                >{cancelButtonText || \"Close\"}</Button>}\n                <Button\n                    loading={loading}\n                    color={okcolor}\n                    variant=\"fill\"\n                    {...slotProps?.okButton}\n\n                    onClick={async () => {\n                        onConfirm && await onConfirm()\n                    }}\n                >{okButtonText || \"OK\"}</Button>\n            </Tag>\n        </Alert>\n    </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n    const Inst = (_props: any) => <ConfirmAlert {..._props} />\n    const confirm = Renderar.render(Inst as any, {\n        ...props,\n        open: true,\n        loading: false,\n        onConfirm: async () => {\n            if (onConfirm) {\n                confirm.updateProps({ loading: true })\n                if (onConfirm) await onConfirm()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        onCancel: async () => {\n            if (onCancel) {\n                confirm.updateProps({ loading: true })\n                await onCancel()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                onExited: () => {\n                    confirm.unrender()\n                    if (props?.slotProps?.modal?.onExited) {\n                        props.slotProps?.modal?.onExited()\n                    }\n                },\n            }\n        },\n    })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACA;AACA;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, TransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n    let [{\n        title,\n        variant,\n        icon,\n        color,\n        direction,\n        slotProps,\n        onClose,\n        ..._props\n    }] = useInterface<any>(\"Alert\", rest, {\n        variant: \"fill\"\n    })\n    color ??= 'default'\n    direction ??= \"row\"\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (variant) _p.variant = variant\n    if (icon) _p.icon = icon\n    if (color) _p.color = color\n    if (direction) _p.direction = direction\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    variant = p.variant\n    icon = p.icon\n    color = p.color\n    direction = p.direction\n\n    let isRow = direction === 'row'\n\n    const template = useColorTemplate(color, variant)\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'default' ? \"default.contrast\" : template.main.color\n    }\n\n    const icons: any = {\n        \"info\": <InfoIcon sx={iconsx} />,\n        \"warning\": <WarningIcon sx={iconsx} />,\n        \"success\": <SuccessIcon sx={iconsx} />,\n        \"danger\": <ErrorIcon sx={iconsx} />\n    }\n\n    let _icon = icons[icon] || icons[color]\n\n    return (\n        <Tag\n            {..._props}\n            baseClass=\"alert\"\n            sxr={{\n                justifyContent: \"flex-start\",\n                position: \"relative\",\n                radius: 1,\n                px: isRow ? (_icon ? .5 : 2) : 3,\n                py: isRow ? .5 : 3,\n                flexDirection: \"column\",\n                display: 'flex',\n                ..._props?.sx\n            }}\n            {...template.main}\n        >\n            {\n                onClose && <IconButton\n                    color={color}\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\n                    size={25}\n                    sx={{\n                        position: \"absolute\",\n                        top: 5,\n                        right: 5\n                    }}\n                    onClick={onClose}\n                    className=\"alert-close-button\"\n                >\n                    <IconClose fontSize={18} />\n                </IconButton>\n            }\n            <Tag\n                sx={{\n                    display: \"flex\",\n                    gap: 1,\n                    flexDirection: direction,\n                    alignItems: isRow ? \"flex-start\" : \"center\"\n                }}\n                baseClass=\"alert-container\"\n            >\n                {\n                    _icon && <Tag\n                        baseClass=\"alert-icon\"\n                        sxr={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            p: isRow ? .5 : 0,\n                            \"& svg\": {\n                                color: template.main.color\n                            }\n                        }}\n                    >\n                        {_icon}\n                    </Tag>\n                }\n                <Tag\n                    baseClass=\"alert-content\"\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        flex: 1,\n                        color: template.main.color,\n                        textAlign: isRow ? \"left\" : \"center\",\n                        gap: isRow ? 0 : 1,\n                        width: \"100%\"\n                    }}\n                >\n                    {title && <>\n                        {\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n                                className=\"alert-titles\"\n                                variant=\"text\"\n                                sx={{\n                                    fontWeight: 500,\n                                    color: template.main.color\n                                }}\n                            >{title}</Text>\n                        }\n                    </>}\n                    <Tag\n                        sxr={{\n                            fontSize: \"button\",\n                            fontWeight: \"button\",\n                            lineHeight: \"button\"\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Tag>\n            </Tag>\n        </Tag>\n    )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    open: boolean;\n    loading: boolean;\n    content: string | ReactElement,\n    size?: \"small\" | \"medium\" | \"large\" | number;\n    closeButton?: boolean;\n    clickOutsideToClose?: boolean;\n    okButtonText?: string;\n    cancelButtonText?: string;\n    hideOkButton?: boolean;\n    hideCancelButton?: boolean;\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n    variant?: \"text\" | \"fill\"\n    onConfirm?: () => Promise<void> | void;\n    onCancel?: () => Promise<void> | void;\n    transition?: TransitionVariantTypes;\n    blurMode?: ModalProps['blurMode'];\n    slotProps?: {\n        modal?: Omit<ModalProps, 'open' | \"children\">;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n    let {\n        open,\n        loading,\n        content,\n        size,\n        color,\n        direction,\n        variant,\n        closeButton,\n        clickOutsideToClose,\n        okButtonText,\n        cancelButtonText,\n        hideOkButton,\n        hideCancelButton,\n        buttonPlacement,\n        onConfirm,\n        onCancel,\n        transition,\n        blurMode,\n        slotProps,\n        ...rest\n    } = props\n\n    hideOkButton ??= false\n    hideCancelButton ??= false\n\n    size ??= \"small\"\n    color ??= 'default'\n    variant ??= \"text\"\n    direction ??= \"column\"\n    buttonPlacement ??= \"end\"\n    let sx: any = {};\n\n    switch (buttonPlacement) {\n        case \"start\":\n            sx.justifyContent = 'flex-start'\n            break;\n        case \"end\":\n            sx.justifyContent = 'flex-end'\n            break;\n        case \"between\":\n            sx.justifyContent = 'space-between'\n            break;\n        case \"full\":\n            sx = {\n                \"& button\": {\n                    flex: 1\n                }\n            }\n            break;\n    }\n\n    let sizes: any = {\n        small: 320,\n        medium: 400,\n        large: 600\n    }\n\n    let okcolor = color\n    let closecolor = color\n    if (color === 'default') {\n        okcolor = 'primary'\n        closecolor = 'default'\n        variant = 'text'\n    } else {\n        if (variant === 'fill') {\n            okcolor = 'default'\n            closecolor = 'default'\n        } else {\n            okcolor = color\n            closecolor = 'default'\n        }\n    }\n\n    return (<Modal\n        open={open}\n        {...slotProps?.modal}\n        size={sizes[size] || size}\n        blur={40}\n        blurMode={blurMode || \"transparent\"}\n        transition={transition || \"zoom\"}\n        onClickOutside={async () => {\n            if (clickOutsideToClose && !loading) {\n                onCancel && await onCancel()\n            }\n        }}\n    >\n        <Alert\n            direction={direction}\n            sx={{\n                px: 2,\n                py: 1,\n                pt: direction === 'row' ? 1 : 2\n            }}\n            color={color}\n            variant={variant}\n            onClose={closeButton ? close : undefined}\n            {...rest}\n        >\n            {content}\n            <Tag\n                sxr={{\n                    display: \"flex\",\n                    gap: 1,\n                    pt: 4,\n                    flexDirection: \"row\",\n                    ...sx,\n                }}\n            >\n                {!hideCancelButton && <Button\n                    disabled={loading}\n                    color={closecolor}\n                    variant=\"fill\"\n                    {...slotProps?.closeButton}\n                    onClick={async () => {\n                        onCancel && await onCancel()\n                    }}\n                >{cancelButtonText || \"Close\"}</Button>}\n                <Button\n                    loading={loading}\n                    color={okcolor}\n                    variant=\"fill\"\n                    {...slotProps?.okButton}\n\n                    onClick={async () => {\n                        onConfirm && await onConfirm()\n                    }}\n                >{okButtonText || \"OK\"}</Button>\n            </Tag>\n        </Alert>\n    </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n    const Inst = (_props: any) => <ConfirmAlert {..._props} />\n    const confirm = Renderar.render(Inst as any, {\n        ...props,\n        open: true,\n        loading: false,\n        onConfirm: async () => {\n            if (onConfirm) {\n                confirm.updateProps({ loading: true })\n                if (onConfirm) await onConfirm()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        onCancel: async () => {\n            if (onCancel) {\n                confirm.updateProps({ loading: true })\n                await onCancel()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                onExited: () => {\n                    confirm.unrender()\n                    if (props?.slotProps?.modal?.onExited) {\n                        props.slotProps?.modal?.onExited()\n                    }\n                },\n            }\n        },\n    })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAIA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACA;AACA;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}

package/Autocomplete/index.cjs

@@ -35,7 +35,7 @@ const Autocomplete = (_a) => {
     }
     if (!!value && multiple && Array.isArray(value)) {
         value.map((v, index$2) => {
-            startIcons.push(jsxRuntime.jsx(index, { size: "small", label: getLabel(v), variant: "fill", color: "surface", endIcon: jsxRuntime.jsx(index$1, { size: 20, variant: "text", color: "surface", onClick: (e) => {
+            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));
@@ -51,7 +51,7 @@ const Autocomplete = (_a) => {
         endIcons.push(jsxRuntime.jsx(index$2, { size: "small" }, "auto-complete-loading-icon"));
     }
     else if (!!value && !multiple) {
-        endIcons.unshift(jsxRuntime.jsx(index$1, { variant: "text", color: "surface", onClick: (e) => {
+        endIcons.unshift(jsxRuntime.jsx(index$1, { variant: "text", color: "default", onClick: (e) => {
                 e.stopPropagation();
                 onChange && onChange(null);
                 setInputValue("");

package/Autocomplete/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, useEffect } from 'react'\nimport Input from '../Input'\nimport Menu from '../Menu'\nimport List from '../List';\nimport ListItem, { ListItemProps } from '../ListItem';\nimport Chip from '../Chip';\nimport IconButton from '../IconButton';\nimport Close from '@xanui/icons/Close';\nimport CircleProgress from '../CircleProgress';\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\n\nexport type AutocompleteProps = {\n\n   options: any[] | ((text: string) => Promise<any[]>)\n   getLabel: (option: any) => string;\n   onChange?: (value: any) => void;\n   value?: any;\n   multiple?: boolean;\n   renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\n\n   // input props customization\n   disabled?: boolean;\n   name?: string;\n   placeholder?: string;\n   readOnly?: boolean;\n   autoFocus?: boolean;\n   autoComplete?: string;\n   label?: useBreakpointPropsType<string>;\n\n   onFocus?: (e: React.FocusEvent<any>) => void;\n   onBlur?: (e: React.FocusEvent<any>) => void;\n   onInput?: (e: React.FormEvent<any>) => void;\n   onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n   onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n   rows?: useBreakpointPropsType<number>;\n   minRows?: useBreakpointPropsType<number>;\n   maxRows?: useBreakpointPropsType<number>;\n   fullWidth?: boolean;\n\n   startIcon?: useBreakpointPropsType<ReactElement>;\n   endIcon?: useBreakpointPropsType<ReactElement>;\n   iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n   focused?: boolean;\n   color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'surface'>>;\n   variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n   error?: boolean;\n   helperText?: useBreakpointPropsType<string>;\n\n}\n\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\n   const [_options, setOptions] = React.useState<any[]>()\n   const [inputValue, setInputValue] = React.useState(value ? getLabel(value) : \"\")\n   const [timer, setTimer] = React.useState<any>(null)\n   const [loading, setLoading] = React.useState(false)\n   const [focused, setFocused] = React.useState(false)\n   const [open, setOpen] = React.useState(false)\n   const menuRef = React.useRef<any>(null)\n\n   useEffect(() => {\n      if (!inputValue) {\n         setInputValue(value ? getLabel(value) : \"\")\n      }\n   }, [value])\n\n   getLabel ??= (option: any) => option.toString();\n   multiple ??= false;\n\n   let startIcons = []\n   if (inputProps.startIcon) {\n      startIcons.push(inputProps.startIcon)\n   }\n\n   if (!!value && multiple && Array.isArray(value)) {\n      value.map((v: any, index: number) => {\n         startIcons.push(<Chip\n            key={index}\n            size=\"small\"\n            label={getLabel!(v)}\n            variant={\"fill\"}\n            color=\"surface\"\n            endIcon={<IconButton\n               size={20}\n               variant={\"text\"}\n               color=\"surface\"\n               onClick={(e) => {\n                  e.stopPropagation();\n                  let newValue = Array.isArray(value) ? [...value] : []\n                  newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\n                  onChange && onChange(newValue)\n               }}\n            >\n               <Close />\n            </IconButton>}\n         />)\n      })\n   }\n\n   let endIcons = []\n   if (inputProps.endIcon) {\n      endIcons.push(inputProps.endIcon)\n   }\n   if (loading) {\n      endIcons.push(<CircleProgress\n         key=\"auto-complete-loading-icon\"\n         size=\"small\"\n      />)\n   } else if (!!value && !multiple) {\n      endIcons.unshift(<IconButton\n         key=\"auto-complete-clear-button\"\n         variant={\"text\"}\n         color=\"surface\"\n         onClick={(e) => {\n            e.stopPropagation();\n            onChange && onChange(null)\n            setInputValue(\"\")\n         }}\n      >\n         <Close />\n      </IconButton>)\n   }\n\n   const loadOptions = async () => {\n      setLoading(true)\n      setOpen(false)\n      let results = []\n      if (typeof options === 'function') {\n         results = await options(inputValue)\n      } else {\n         results = options.filter(option => getLabel!(option).toString().toLowerCase().includes(inputValue.toLowerCase()))\n      }\n      if (!multiple && inputValue) {\n         const find = results.find(option => getLabel!(option).toString().toLowerCase() === inputValue.toLowerCase())\n         onChange && onChange(find || null)\n      }\n      setOptions(results)\n      setOpen(true)\n      setLoading(false)\n   }\n\n   useEffect(() => {\n      if (focused) {\n         clearTimeout(timer)\n         setTimer(setTimeout(() => {\n            loadOptions()\n         }, 300))\n      } else {\n         setOpen(false)\n      }\n   }, [focused, inputValue])\n\n\n   return (\n      <>\n         <Input\n            {...inputProps as any}\n            ref={menuRef}\n            slotProps={{\n               rootContainer: {\n                  flexWrap: 'wrap',\n                  ...(multiple ? { height: \"auto\", gap: .5 } : {})\n               },\n               input: {\n                  width: multiple ? 'initial' : '100%',\n                  flex: 1,\n                  minWidth: 20,\n               }\n            }}\n            startIcon={startIcons.length ? startIcons : undefined}\n            endIcon={endIcons}\n            value={inputValue}\n            onFocus={() => setFocused(true)}\n            onKeyDown={(e) => {\n               if (inputProps?.onKeyDown) {\n                  inputProps.onKeyDown(e)\n               }\n               if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\n                  let newValue = [...value]\n                  newValue.pop()\n                  onChange && onChange(newValue)\n               }\n            }}\n            onChange={(e) => {\n               const value = e.target.value;\n               setInputValue(value)\n            }}\n         />\n         <Menu\n            target={open ? menuRef.current : null}\n            onClickOutside={() => {\n               setFocused(false)\n            }}\n            slotProps={{\n               content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }\n            }}\n         >\n            <List\n               maxHeight={400}\n               overflow={\"auto\"}\n            >\n               {_options?.map((option, index) => (\n                  renderOption ? <div key={\"auto-complete\" + index + getLabel!(option)}>{renderOption(option, {\n                     onClick: () => {\n                        if (multiple) {\n                           let newValue = Array.isArray(value) ? [...value] : []\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n                           if (!has) {\n                              newValue.push(option)\n                           } else {\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n                           }\n                           onChange && onChange(newValue)\n                        } else {\n                           setFocused(false)\n                           onChange && onChange(option)\n                           setOpen(false)\n                           setInputValue(getLabel!(option))\n                           setOptions([])\n                        }\n                     }\n                  })}</div> : <ListItem\n                     key={index}\n                     onClick={() => {\n\n                        if (multiple) {\n                           let newValue = Array.isArray(value) ? [...value] : []\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n                           if (!has) {\n                              newValue.push(option)\n                           } else {\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n                           }\n                           onChange && onChange(newValue)\n                        } else {\n                           setFocused(false)\n                           onChange && onChange(option)\n                           setOpen(false)\n                           setInputValue(getLabel!(option))\n                           setOptions([])\n                        }\n                     }}\n                  >\n                     {getLabel!(option)}\n                  </ListItem>\n               ))}\n            </List>\n         </Menu>\n      </>\n   )\n}\n\nexport default Autocomplete\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAoDA;AAAsB;;;AAGnB;AACA;AACA;AACA;;;;AAKM;;AAEN;AAEA;;;AAIA;AACG;;AAGH;;;;AAce;;AAEA;;AAMZ;;;AAIH;AACG;;;AAGA;;AAII;AACJ;;AAMM;;;;AAQT;;;;AAIG;AACG;;;AAEA;;AAEH;;AAEG;;;;;AAKN;;;;AAKM;AACG;AACH;;;;;AAIN;AAGA;;AAUY;;AAEG;AACA;AACF;AACH;;AAOK;;;AAGA;;AAEA;;AAEN;AAEG;;;;;AAUA;AACF;;;AAUc;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;;AAIR;;AAKQ;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;AAGN;AASrB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, useEffect } from 'react'\nimport Input from '../Input'\nimport Menu from '../Menu'\nimport List from '../List';\nimport ListItem, { ListItemProps } from '../ListItem';\nimport Chip from '../Chip';\nimport IconButton from '../IconButton';\nimport Close from '@xanui/icons/Close';\nimport CircleProgress from '../CircleProgress';\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\n\nexport type AutocompleteProps = {\n\n   options: any[] | ((text: string) => Promise<any[]>)\n   getLabel: (option: any) => string;\n   onChange?: (value: any) => void;\n   value?: any;\n   multiple?: boolean;\n   renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\n\n   // input props customization\n   disabled?: boolean;\n   name?: string;\n   placeholder?: string;\n   readOnly?: boolean;\n   autoFocus?: boolean;\n   autoComplete?: string;\n   label?: useBreakpointPropsType<string>;\n\n   onFocus?: (e: React.FocusEvent<any>) => void;\n   onBlur?: (e: React.FocusEvent<any>) => void;\n   onInput?: (e: React.FormEvent<any>) => void;\n   onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n   onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n   rows?: useBreakpointPropsType<number>;\n   minRows?: useBreakpointPropsType<number>;\n   maxRows?: useBreakpointPropsType<number>;\n   fullWidth?: boolean;\n\n   startIcon?: useBreakpointPropsType<ReactElement>;\n   endIcon?: useBreakpointPropsType<ReactElement>;\n   iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n   focused?: boolean;\n   color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'default'>>;\n   variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n   error?: boolean;\n   helperText?: useBreakpointPropsType<string>;\n\n}\n\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\n   const [_options, setOptions] = React.useState<any[]>()\n   const [inputValue, setInputValue] = React.useState(value ? getLabel(value) : \"\")\n   const [timer, setTimer] = React.useState<any>(null)\n   const [loading, setLoading] = React.useState(false)\n   const [focused, setFocused] = React.useState(false)\n   const [open, setOpen] = React.useState(false)\n   const menuRef = React.useRef<any>(null)\n\n   useEffect(() => {\n      if (!inputValue) {\n         setInputValue(value ? getLabel(value) : \"\")\n      }\n   }, [value])\n\n   getLabel ??= (option: any) => option.toString();\n   multiple ??= false;\n\n   let startIcons = []\n   if (inputProps.startIcon) {\n      startIcons.push(inputProps.startIcon)\n   }\n\n   if (!!value && multiple && Array.isArray(value)) {\n      value.map((v: any, index: number) => {\n         startIcons.push(<Chip\n            key={index}\n            size=\"small\"\n            label={getLabel!(v)}\n            variant={\"fill\"}\n            color=\"default\"\n            endIcon={<IconButton\n               size={20}\n               variant={\"text\"}\n               color=\"default\"\n               onClick={(e) => {\n                  e.stopPropagation();\n                  let newValue = Array.isArray(value) ? [...value] : []\n                  newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\n                  onChange && onChange(newValue)\n               }}\n            >\n               <Close />\n            </IconButton>}\n         />)\n      })\n   }\n\n   let endIcons = []\n   if (inputProps.endIcon) {\n      endIcons.push(inputProps.endIcon)\n   }\n   if (loading) {\n      endIcons.push(<CircleProgress\n         key=\"auto-complete-loading-icon\"\n         size=\"small\"\n      />)\n   } else if (!!value && !multiple) {\n      endIcons.unshift(<IconButton\n         key=\"auto-complete-clear-button\"\n         variant={\"text\"}\n         color=\"default\"\n         onClick={(e) => {\n            e.stopPropagation();\n            onChange && onChange(null)\n            setInputValue(\"\")\n         }}\n      >\n         <Close />\n      </IconButton>)\n   }\n\n   const loadOptions = async () => {\n      setLoading(true)\n      setOpen(false)\n      let results = []\n      if (typeof options === 'function') {\n         results = await options(inputValue)\n      } else {\n         results = options.filter(option => getLabel!(option).toString().toLowerCase().includes(inputValue.toLowerCase()))\n      }\n      if (!multiple && inputValue) {\n         const find = results.find(option => getLabel!(option).toString().toLowerCase() === inputValue.toLowerCase())\n         onChange && onChange(find || null)\n      }\n      setOptions(results)\n      setOpen(true)\n      setLoading(false)\n   }\n\n   useEffect(() => {\n      if (focused) {\n         clearTimeout(timer)\n         setTimer(setTimeout(() => {\n            loadOptions()\n         }, 300))\n      } else {\n         setOpen(false)\n      }\n   }, [focused, inputValue])\n\n\n   return (\n      <>\n         <Input\n            {...inputProps as any}\n            ref={menuRef}\n            slotProps={{\n               rootContainer: {\n                  flexWrap: 'wrap',\n                  ...(multiple ? { height: \"auto\", gap: .5 } : {})\n               },\n               input: {\n                  width: multiple ? 'initial' : '100%',\n                  flex: 1,\n                  minWidth: 20,\n               }\n            }}\n            startIcon={startIcons.length ? startIcons : undefined}\n            endIcon={endIcons}\n            value={inputValue}\n            onFocus={() => setFocused(true)}\n            onKeyDown={(e) => {\n               if (inputProps?.onKeyDown) {\n                  inputProps.onKeyDown(e)\n               }\n               if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\n                  let newValue = [...value]\n                  newValue.pop()\n                  onChange && onChange(newValue)\n               }\n            }}\n            onChange={(e) => {\n               const value = e.target.value;\n               setInputValue(value)\n            }}\n         />\n         <Menu\n            target={open ? menuRef.current : null}\n            onClickOutside={() => {\n               setFocused(false)\n            }}\n            slotProps={{\n               content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }\n            }}\n         >\n            <List\n               maxHeight={400}\n               overflow={\"auto\"}\n            >\n               {_options?.map((option, index) => (\n                  renderOption ? <div key={\"auto-complete\" + index + getLabel!(option)}>{renderOption(option, {\n                     onClick: () => {\n                        if (multiple) {\n                           let newValue = Array.isArray(value) ? [...value] : []\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n                           if (!has) {\n                              newValue.push(option)\n                           } else {\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n                           }\n                           onChange && onChange(newValue)\n                        } else {\n                           setFocused(false)\n                           onChange && onChange(option)\n                           setOpen(false)\n                           setInputValue(getLabel!(option))\n                           setOptions([])\n                        }\n                     }\n                  })}</div> : <ListItem\n                     key={index}\n                     onClick={() => {\n\n                        if (multiple) {\n                           let newValue = Array.isArray(value) ? [...value] : []\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n                           if (!has) {\n                              newValue.push(option)\n                           } else {\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n                           }\n                           onChange && onChange(newValue)\n                        } else {\n                           setFocused(false)\n                           onChange && onChange(option)\n                           setOpen(false)\n                           setInputValue(getLabel!(option))\n                           setOptions([])\n                        }\n                     }}\n                  >\n                     {getLabel!(option)}\n                  </ListItem>\n               ))}\n            </List>\n         </Menu>\n      </>\n   )\n}\n\nexport default Autocomplete\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAoDA;AAAsB;;;AAGnB;AACA;AACA;AACA;;;;AAKM;;AAEN;AAEA;;;AAIA;AACG;;AAGH;;;;AAce;;AAEA;;AAMZ;;;AAIH;AACG;;;AAGA;;AAII;AACJ;;AAMM;;;;AAQT;;;;AAIG;AACG;;;AAEA;;AAEH;;AAEG;;;;;AAKN;;;;AAKM;AACG;AACH;;;;;AAIN;AAGA;;AAUY;;AAEG;AACA;AACF;AACH;;AAOK;;;AAGA;;AAEA;;AAEN;AAEG;;;;;AAUA;AACF;;;AAUc;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;;AAIR;;AAKQ;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;AAGN;AASrB;;"}

package/Autocomplete/index.d.ts

@@ -30,7 +30,7 @@ type AutocompleteProps = {
     endIcon?: useBreakpointPropsType<ReactElement>;
     iconPlacement?: useBreakpointPropsType<"start" | "center" | "end">;
     focused?: boolean;
-    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'surface'>>;
+    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'default'>>;
     variant?: useBreakpointPropsType<"fill" | "outline" | "text">;
     error?: boolean;
     helperText?: useBreakpointPropsType<string>;

package/Autocomplete/index.js

@@ -33,7 +33,7 @@ const Autocomplete = (_a) => {
     }
     if (!!value && multiple && Array.isArray(value)) {
         value.map((v, index) => {
-            startIcons.push(jsx(Chip, { size: "small", label: getLabel(v), variant: "fill", color: "surface", endIcon: jsx(IconButton, { size: 20, variant: "text", color: "surface", onClick: (e) => {
+            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));
@@ -49,7 +49,7 @@ const Autocomplete = (_a) => {
         endIcons.push(jsx(CircleProgress, { size: "small" }, "auto-complete-loading-icon"));
     }
     else if (!!value && !multiple) {
-        endIcons.unshift(jsx(IconButton, { variant: "text", color: "surface", onClick: (e) => {
+        endIcons.unshift(jsx(IconButton, { variant: "text", color: "default", onClick: (e) => {
                 e.stopPropagation();
                 onChange && onChange(null);
                 setInputValue("");

package/Autocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, useEffect } from 'react'\nimport Input from '../Input'\nimport Menu from '../Menu'\nimport List from '../List';\nimport ListItem, { ListItemProps } from '../ListItem';\nimport Chip from '../Chip';\nimport IconButton from '../IconButton';\nimport Close from '@xanui/icons/Close';\nimport CircleProgress from '../CircleProgress';\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\n\nexport type AutocompleteProps = {\n\n   options: any[] | ((text: string) => Promise<any[]>)\n   getLabel: (option: any) => string;\n   onChange?: (value: any) => void;\n   value?: any;\n   multiple?: boolean;\n   renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\n\n   // input props customization\n   disabled?: boolean;\n   name?: string;\n   placeholder?: string;\n   readOnly?: boolean;\n   autoFocus?: boolean;\n   autoComplete?: string;\n   label?: useBreakpointPropsType<string>;\n\n   onFocus?: (e: React.FocusEvent<any>) => void;\n   onBlur?: (e: React.FocusEvent<any>) => void;\n   onInput?: (e: React.FormEvent<any>) => void;\n   onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n   onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n   rows?: useBreakpointPropsType<number>;\n   minRows?: useBreakpointPropsType<number>;\n   maxRows?: useBreakpointPropsType<number>;\n   fullWidth?: boolean;\n\n   startIcon?: useBreakpointPropsType<ReactElement>;\n   endIcon?: useBreakpointPropsType<ReactElement>;\n   iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n   focused?: boolean;\n   color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'surface'>>;\n   variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n   error?: boolean;\n   helperText?: useBreakpointPropsType<string>;\n\n}\n\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\n   const [_options, setOptions] = React.useState<any[]>()\n   const [inputValue, setInputValue] = React.useState(value ? getLabel(value) : \"\")\n   const [timer, setTimer] = React.useState<any>(null)\n   const [loading, setLoading] = React.useState(false)\n   const [focused, setFocused] = React.useState(false)\n   const [open, setOpen] = React.useState(false)\n   const menuRef = React.useRef<any>(null)\n\n   useEffect(() => {\n      if (!inputValue) {\n         setInputValue(value ? getLabel(value) : \"\")\n      }\n   }, [value])\n\n   getLabel ??= (option: any) => option.toString();\n   multiple ??= false;\n\n   let startIcons = []\n   if (inputProps.startIcon) {\n      startIcons.push(inputProps.startIcon)\n   }\n\n   if (!!value && multiple && Array.isArray(value)) {\n      value.map((v: any, index: number) => {\n         startIcons.push(<Chip\n            key={index}\n            size=\"small\"\n            label={getLabel!(v)}\n            variant={\"fill\"}\n            color=\"surface\"\n            endIcon={<IconButton\n               size={20}\n               variant={\"text\"}\n               color=\"surface\"\n               onClick={(e) => {\n                  e.stopPropagation();\n                  let newValue = Array.isArray(value) ? [...value] : []\n                  newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\n                  onChange && onChange(newValue)\n               }}\n            >\n               <Close />\n            </IconButton>}\n         />)\n      })\n   }\n\n   let endIcons = []\n   if (inputProps.endIcon) {\n      endIcons.push(inputProps.endIcon)\n   }\n   if (loading) {\n      endIcons.push(<CircleProgress\n         key=\"auto-complete-loading-icon\"\n         size=\"small\"\n      />)\n   } else if (!!value && !multiple) {\n      endIcons.unshift(<IconButton\n         key=\"auto-complete-clear-button\"\n         variant={\"text\"}\n         color=\"surface\"\n         onClick={(e) => {\n            e.stopPropagation();\n            onChange && onChange(null)\n            setInputValue(\"\")\n         }}\n      >\n         <Close />\n      </IconButton>)\n   }\n\n   const loadOptions = async () => {\n      setLoading(true)\n      setOpen(false)\n      let results = []\n      if (typeof options === 'function') {\n         results = await options(inputValue)\n      } else {\n         results = options.filter(option => getLabel!(option).toString().toLowerCase().includes(inputValue.toLowerCase()))\n      }\n      if (!multiple && inputValue) {\n         const find = results.find(option => getLabel!(option).toString().toLowerCase() === inputValue.toLowerCase())\n         onChange && onChange(find || null)\n      }\n      setOptions(results)\n      setOpen(true)\n      setLoading(false)\n   }\n\n   useEffect(() => {\n      if (focused) {\n         clearTimeout(timer)\n         setTimer(setTimeout(() => {\n            loadOptions()\n         }, 300))\n      } else {\n         setOpen(false)\n      }\n   }, [focused, inputValue])\n\n\n   return (\n      <>\n         <Input\n            {...inputProps as any}\n            ref={menuRef}\n            slotProps={{\n               rootContainer: {\n                  flexWrap: 'wrap',\n                  ...(multiple ? { height: \"auto\", gap: .5 } : {})\n               },\n               input: {\n                  width: multiple ? 'initial' : '100%',\n                  flex: 1,\n                  minWidth: 20,\n               }\n            }}\n            startIcon={startIcons.length ? startIcons : undefined}\n            endIcon={endIcons}\n            value={inputValue}\n            onFocus={() => setFocused(true)}\n            onKeyDown={(e) => {\n               if (inputProps?.onKeyDown) {\n                  inputProps.onKeyDown(e)\n               }\n               if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\n                  let newValue = [...value]\n                  newValue.pop()\n                  onChange && onChange(newValue)\n               }\n            }}\n            onChange={(e) => {\n               const value = e.target.value;\n               setInputValue(value)\n            }}\n         />\n         <Menu\n            target={open ? menuRef.current : null}\n            onClickOutside={() => {\n               setFocused(false)\n            }}\n            slotProps={{\n               content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }\n            }}\n         >\n            <List\n               maxHeight={400}\n               overflow={\"auto\"}\n            >\n               {_options?.map((option, index) => (\n                  renderOption ? <div key={\"auto-complete\" + index + getLabel!(option)}>{renderOption(option, {\n                     onClick: () => {\n                        if (multiple) {\n                           let newValue = Array.isArray(value) ? [...value] : []\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n                           if (!has) {\n                              newValue.push(option)\n                           } else {\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n                           }\n                           onChange && onChange(newValue)\n                        } else {\n                           setFocused(false)\n                           onChange && onChange(option)\n                           setOpen(false)\n                           setInputValue(getLabel!(option))\n                           setOptions([])\n                        }\n                     }\n                  })}</div> : <ListItem\n                     key={index}\n                     onClick={() => {\n\n                        if (multiple) {\n                           let newValue = Array.isArray(value) ? [...value] : []\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n                           if (!has) {\n                              newValue.push(option)\n                           } else {\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n                           }\n                           onChange && onChange(newValue)\n                        } else {\n                           setFocused(false)\n                           onChange && onChange(option)\n                           setOpen(false)\n                           setInputValue(getLabel!(option))\n                           setOptions([])\n                        }\n                     }}\n                  >\n                     {getLabel!(option)}\n                  </ListItem>\n               ))}\n            </List>\n         </Menu>\n      </>\n   )\n}\n\nexport default Autocomplete\n"],"names":[],"mappings":";;;;;;;;;;;;;AAoDA;AAAsB;;;AAGnB;AACA;AACA;AACA;;;;AAKM;;AAEN;AAEA;;;AAIA;AACG;;AAGH;;;;AAce;;AAEA;;AAMZ;;;AAIH;AACG;;;AAGA;;AAII;AACJ;;AAMM;;;;AAQT;;;;AAIG;AACG;;;AAEA;;AAEH;;AAEG;;;;;AAKN;;;;AAKM;AACG;AACH;;;;;AAIN;AAGA;;AAUY;;AAEG;AACA;AACF;AACH;;AAOK;;;AAGA;;AAEA;;AAEN;AAEG;;;;;AAUA;AACF;;;AAUc;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;;AAIR;;AAKQ;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;AAGN;AASrB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, useEffect } from 'react'\nimport Input from '../Input'\nimport Menu from '../Menu'\nimport List from '../List';\nimport ListItem, { ListItemProps } from '../ListItem';\nimport Chip from '../Chip';\nimport IconButton from '../IconButton';\nimport Close from '@xanui/icons/Close';\nimport CircleProgress from '../CircleProgress';\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\n\nexport type AutocompleteProps = {\n\n   options: any[] | ((text: string) => Promise<any[]>)\n   getLabel: (option: any) => string;\n   onChange?: (value: any) => void;\n   value?: any;\n   multiple?: boolean;\n   renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\n\n   // input props customization\n   disabled?: boolean;\n   name?: string;\n   placeholder?: string;\n   readOnly?: boolean;\n   autoFocus?: boolean;\n   autoComplete?: string;\n   label?: useBreakpointPropsType<string>;\n\n   onFocus?: (e: React.FocusEvent<any>) => void;\n   onBlur?: (e: React.FocusEvent<any>) => void;\n   onInput?: (e: React.FormEvent<any>) => void;\n   onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n   onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n   rows?: useBreakpointPropsType<number>;\n   minRows?: useBreakpointPropsType<number>;\n   maxRows?: useBreakpointPropsType<number>;\n   fullWidth?: boolean;\n\n   startIcon?: useBreakpointPropsType<ReactElement>;\n   endIcon?: useBreakpointPropsType<ReactElement>;\n   iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n   focused?: boolean;\n   color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'default'>>;\n   variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n   error?: boolean;\n   helperText?: useBreakpointPropsType<string>;\n\n}\n\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\n   const [_options, setOptions] = React.useState<any[]>()\n   const [inputValue, setInputValue] = React.useState(value ? getLabel(value) : \"\")\n   const [timer, setTimer] = React.useState<any>(null)\n   const [loading, setLoading] = React.useState(false)\n   const [focused, setFocused] = React.useState(false)\n   const [open, setOpen] = React.useState(false)\n   const menuRef = React.useRef<any>(null)\n\n   useEffect(() => {\n      if (!inputValue) {\n         setInputValue(value ? getLabel(value) : \"\")\n      }\n   }, [value])\n\n   getLabel ??= (option: any) => option.toString();\n   multiple ??= false;\n\n   let startIcons = []\n   if (inputProps.startIcon) {\n      startIcons.push(inputProps.startIcon)\n   }\n\n   if (!!value && multiple && Array.isArray(value)) {\n      value.map((v: any, index: number) => {\n         startIcons.push(<Chip\n            key={index}\n            size=\"small\"\n            label={getLabel!(v)}\n            variant={\"fill\"}\n            color=\"default\"\n            endIcon={<IconButton\n               size={20}\n               variant={\"text\"}\n               color=\"default\"\n               onClick={(e) => {\n                  e.stopPropagation();\n                  let newValue = Array.isArray(value) ? [...value] : []\n                  newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\n                  onChange && onChange(newValue)\n               }}\n            >\n               <Close />\n            </IconButton>}\n         />)\n      })\n   }\n\n   let endIcons = []\n   if (inputProps.endIcon) {\n      endIcons.push(inputProps.endIcon)\n   }\n   if (loading) {\n      endIcons.push(<CircleProgress\n         key=\"auto-complete-loading-icon\"\n         size=\"small\"\n      />)\n   } else if (!!value && !multiple) {\n      endIcons.unshift(<IconButton\n         key=\"auto-complete-clear-button\"\n         variant={\"text\"}\n         color=\"default\"\n         onClick={(e) => {\n            e.stopPropagation();\n            onChange && onChange(null)\n            setInputValue(\"\")\n         }}\n      >\n         <Close />\n      </IconButton>)\n   }\n\n   const loadOptions = async () => {\n      setLoading(true)\n      setOpen(false)\n      let results = []\n      if (typeof options === 'function') {\n         results = await options(inputValue)\n      } else {\n         results = options.filter(option => getLabel!(option).toString().toLowerCase().includes(inputValue.toLowerCase()))\n      }\n      if (!multiple && inputValue) {\n         const find = results.find(option => getLabel!(option).toString().toLowerCase() === inputValue.toLowerCase())\n         onChange && onChange(find || null)\n      }\n      setOptions(results)\n      setOpen(true)\n      setLoading(false)\n   }\n\n   useEffect(() => {\n      if (focused) {\n         clearTimeout(timer)\n         setTimer(setTimeout(() => {\n            loadOptions()\n         }, 300))\n      } else {\n         setOpen(false)\n      }\n   }, [focused, inputValue])\n\n\n   return (\n      <>\n         <Input\n            {...inputProps as any}\n            ref={menuRef}\n            slotProps={{\n               rootContainer: {\n                  flexWrap: 'wrap',\n                  ...(multiple ? { height: \"auto\", gap: .5 } : {})\n               },\n               input: {\n                  width: multiple ? 'initial' : '100%',\n                  flex: 1,\n                  minWidth: 20,\n               }\n            }}\n            startIcon={startIcons.length ? startIcons : undefined}\n            endIcon={endIcons}\n            value={inputValue}\n            onFocus={() => setFocused(true)}\n            onKeyDown={(e) => {\n               if (inputProps?.onKeyDown) {\n                  inputProps.onKeyDown(e)\n               }\n               if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\n                  let newValue = [...value]\n                  newValue.pop()\n                  onChange && onChange(newValue)\n               }\n            }}\n            onChange={(e) => {\n               const value = e.target.value;\n               setInputValue(value)\n            }}\n         />\n         <Menu\n            target={open ? menuRef.current : null}\n            onClickOutside={() => {\n               setFocused(false)\n            }}\n            slotProps={{\n               content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }\n            }}\n         >\n            <List\n               maxHeight={400}\n               overflow={\"auto\"}\n            >\n               {_options?.map((option, index) => (\n                  renderOption ? <div key={\"auto-complete\" + index + getLabel!(option)}>{renderOption(option, {\n                     onClick: () => {\n                        if (multiple) {\n                           let newValue = Array.isArray(value) ? [...value] : []\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n                           if (!has) {\n                              newValue.push(option)\n                           } else {\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n                           }\n                           onChange && onChange(newValue)\n                        } else {\n                           setFocused(false)\n                           onChange && onChange(option)\n                           setOpen(false)\n                           setInputValue(getLabel!(option))\n                           setOptions([])\n                        }\n                     }\n                  })}</div> : <ListItem\n                     key={index}\n                     onClick={() => {\n\n                        if (multiple) {\n                           let newValue = Array.isArray(value) ? [...value] : []\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n                           if (!has) {\n                              newValue.push(option)\n                           } else {\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n                           }\n                           onChange && onChange(newValue)\n                        } else {\n                           setFocused(false)\n                           onChange && onChange(option)\n                           setOpen(false)\n                           setInputValue(getLabel!(option))\n                           setOptions([])\n                        }\n                     }}\n                  >\n                     {getLabel!(option)}\n                  </ListItem>\n               ))}\n            </List>\n         </Menu>\n      </>\n   )\n}\n\nexport default Autocomplete\n"],"names":[],"mappings":";;;;;;;;;;;;;AAoDA;AAAsB;;;AAGnB;AACA;AACA;AACA;;;;AAKM;;AAEN;AAEA;;;AAIA;AACG;;AAGH;;;;AAce;;AAEA;;AAMZ;;;AAIH;AACG;;;AAGA;;AAII;AACJ;;AAMM;;;;AAQT;;;;AAIG;AACG;;;AAEA;;AAEH;;AAEG;;;;;AAKN;;;;AAKM;AACG;AACH;;;;;AAIN;AAGA;;AAUY;;AAEG;AACA;AACF;AACH;;AAOK;;;AAGA;;AAEA;;AAEN;AAEG;;;;;AAUA;AACF;;;AAUc;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;;AAIR;;AAKQ;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;AAGN;AASrB;;"}

package/Avatar/index.cjs

@@ -28,13 +28,13 @@ const Avatar = React.forwardRef((_a, ref) => {
                 display: "inline-flex",
                 justifyContent: "center",
                 alignItems: "center",
-                bgcolor: "surface.light",
+                bgcolor: "default.base",
                 radius: size,
                 fontSize: (size / 3) * 2,
                 width: size,
                 height: size,
                 userSelect: "none",
-                color: "surface.contrast",
+                color: "default.contrast",
                 '& svg': {
                     fontSize: (size / 3) * 2,
                     opacity: .6

package/Avatar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Avatar/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { useState } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport PersonIcon from '@xanui/icons/Person'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport type AvatarProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\n    size?: useBreakpointPropsType<number>;\n    skeleton?: boolean;\n    slotProps?: {\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n    }\n}\n\nconst Avatar = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, skeleton, ...rest }: AvatarProps<T>, ref: any) => {\n    const [faild, setFaild] = useState<boolean>()\n    let [{ size, slotProps, ...props }] = useInterface<any>(\"Avatar\", rest, {})\n    size ??= 36\n    const _p: any = {}\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    size = p.size\n\n    if (skeleton) {\n        return <Skeleton\n            {...slotProps?.skeleton}\n            height={size}\n            width={size}\n            animation={\"wave\"}\n            sx={{\n                ...slotProps?.skeleton?.sx,\n                borderRadius: size,\n            }}\n        />\n    }\n\n    if (faild === false || !src) {\n        let t = alt?.charAt(0).toUpperCase() || (children || <PersonIcon />)\n        return (\n            <Tag\n                component=\"div\"\n                src={src}\n                {...props}\n                baseClass='avatar'\n                sxr={{\n                    display: \"inline-flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                    bgcolor: \"surface.light\",\n                    radius: size,\n                    fontSize: (size / 3) * 2,\n                    width: size,\n                    height: size,\n                    userSelect: \"none\",\n                    color: \"surface.contrast\",\n                    '& svg': {\n                        fontSize: (size / 3) * 2,\n                        opacity: .6\n                    }\n                }}\n                ref={ref}\n            >{t}</Tag>\n        )\n    }\n    return (\n        <Tag\n            component=\"img\"\n            radius={size}\n            width={size}\n            height={size}\n            objectFit=\"cover\"\n            {...props}\n            alt={alt}\n            src={src}\n            baseClass='avatar'\n            onError={(e) => {\n                setFaild(false)\n                props.onError && props.onError(e as any)\n            }}\n            ref={ref}\n        />\n    )\n})\n\nexport default Avatar\n\n\n"],"names":[],"mappings":";;;;;;;;;;AAcA;;AAAqE;;;;;AAKjE;AAAU;AACV;AACA;;AAGI;;AAYJ;;AAEI;AAOY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACH;AACJ;;AAKb;;;AAcQ;AAIZ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Avatar/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { useState } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport PersonIcon from '@xanui/icons/Person'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport type AvatarProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\n    size?: useBreakpointPropsType<number>;\n    skeleton?: boolean;\n    slotProps?: {\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n    }\n}\n\nconst Avatar = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, skeleton, ...rest }: AvatarProps<T>, ref: any) => {\n    const [faild, setFaild] = useState<boolean>()\n    let [{ size, slotProps, ...props }] = useInterface<any>(\"Avatar\", rest, {})\n    size ??= 36\n    const _p: any = {}\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    size = p.size\n\n    if (skeleton) {\n        return <Skeleton\n            {...slotProps?.skeleton}\n            height={size}\n            width={size}\n            animation={\"wave\"}\n            sx={{\n                ...slotProps?.skeleton?.sx,\n                borderRadius: size,\n            }}\n        />\n    }\n\n    if (faild === false || !src) {\n        let t = alt?.charAt(0).toUpperCase() || (children || <PersonIcon />)\n        return (\n            <Tag\n                component=\"div\"\n                src={src}\n                {...props}\n                baseClass='avatar'\n                sxr={{\n                    display: \"inline-flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                    bgcolor: \"default.base\",\n                    radius: size,\n                    fontSize: (size / 3) * 2,\n                    width: size,\n                    height: size,\n                    userSelect: \"none\",\n                    color: \"default.contrast\",\n                    '& svg': {\n                        fontSize: (size / 3) * 2,\n                        opacity: .6\n                    }\n                }}\n                ref={ref}\n            >{t}</Tag>\n        )\n    }\n    return (\n        <Tag\n            component=\"img\"\n            radius={size}\n            width={size}\n            height={size}\n            objectFit=\"cover\"\n            {...props}\n            alt={alt}\n            src={src}\n            baseClass='avatar'\n            onError={(e) => {\n                setFaild(false)\n                props.onError && props.onError(e as any)\n            }}\n            ref={ref}\n        />\n    )\n})\n\nexport default Avatar\n\n\n"],"names":[],"mappings":";;;;;;;;;;AAcA;;AAAqE;;;;;AAKjE;AAAU;AACV;AACA;;AAGI;;AAYJ;;AAEI;AAOY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACH;AACJ;;AAKb;;;AAcQ;AAIZ;;"}

package/Avatar/index.js

@@ -26,13 +26,13 @@ const Avatar = React.forwardRef((_a, ref) => {
                 display: "inline-flex",
                 justifyContent: "center",
                 alignItems: "center",
-                bgcolor: "surface.light",
+                bgcolor: "default.base",
                 radius: size,
                 fontSize: (size / 3) * 2,
                 width: size,
                 height: size,
                 userSelect: "none",
-                color: "surface.contrast",
+                color: "default.contrast",
                 '& svg': {
                     fontSize: (size / 3) * 2,
                     opacity: .6