@xanui/ui 1.1.51 → 1.1.53

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

package/Accordion/index.js.map

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

package/Alert/index.cjs.map

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

package/Alert/index.js.map

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

package/Autocomplete/index.cjs.map

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

package/Autocomplete/index.js.map

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

package/Avatar/index.cjs.map

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

package/Avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Avatar/index.tsx"],"sourcesContent":["import 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: \"background.secondary\",\n                    radius: size,\n                    fontSize: (size / 3) * 2,\n                    width: size,\n                    height: size,\n                    userSelect: \"none\",\n                    color: \"text.primary\",\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":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Avatar/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\r\nimport PersonIcon from '@xanui/icons/Person'\r\nimport Skeleton, { SkeletonProps } from '../Skeleton';\r\n\r\nexport type AvatarProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\r\n    size?: useBreakpointPropsType<number>;\r\n    skeleton?: boolean;\r\n    slotProps?: {\r\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\r\n    }\r\n}\r\n\r\nconst Avatar = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, skeleton, ...rest }: AvatarProps<T>, ref: any) => {\r\n    const [faild, setFaild] = useState<boolean>()\r\n    let [{ size, slotProps, ...props }] = useInterface<any>(\"Avatar\", rest, {})\r\n    size ??= 36\r\n    const _p: any = {}\r\n    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n    size = p.size\r\n\r\n    if (skeleton) {\r\n        return <Skeleton\r\n            {...slotProps?.skeleton}\r\n            height={size}\r\n            width={size}\r\n            animation={\"wave\"}\r\n            sx={{\r\n                ...slotProps?.skeleton?.sx,\r\n                borderRadius: size,\r\n            }}\r\n        />\r\n    }\r\n\r\n    if (faild === false || !src) {\r\n        let t = alt?.charAt(0).toUpperCase() || (children || <PersonIcon />)\r\n        return (\r\n            <Tag\r\n                component=\"div\"\r\n                src={src}\r\n                {...props}\r\n                baseClass='avatar'\r\n                sxr={{\r\n                    display: \"inline-flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\",\r\n                    bgcolor: \"background.secondary\",\r\n                    radius: size,\r\n                    fontSize: (size / 3) * 2,\r\n                    width: size,\r\n                    height: size,\r\n                    userSelect: \"none\",\r\n                    color: \"text.primary\",\r\n                    '& svg': {\r\n                        fontSize: (size / 3) * 2,\r\n                        opacity: .6\r\n                    }\r\n                }}\r\n                ref={ref}\r\n            >{t}</Tag>\r\n        )\r\n    }\r\n    return (\r\n        <Tag\r\n            component=\"img\"\r\n            radius={size}\r\n            width={size}\r\n            height={size}\r\n            objectFit=\"cover\"\r\n            {...props}\r\n            alt={alt}\r\n            src={src}\r\n            baseClass='avatar'\r\n            onError={(e) => {\r\n                setFaild(false)\r\n                props.onError && props.onError(e as any)\r\n            }}\r\n            ref={ref}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Avatar\r\n\r\n\r\n"],"names":["_jsx"],"mappings":"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"}

package/Badge/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n    content?: useBreakpointPropsType<number | string | ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n    visible?: useBreakpointPropsType<boolean>;\n    disableTransition?: boolean;\n    disableSpace?: boolean;\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        content?: Omit<TagProps<\"span\">, \"children\">;\n    },\n    refs?: {\n        content?: React.Ref<any>;\n        transition?: React.Ref<any>;\n    };\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n    let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\n    color ??= \"danger\"\n    visible ??= true\n    placement ??= \"right-top\"\n    disableTransition ??= false\n    disableSpace ??= false\n\n    const _p: any = {}\n\n    _p.content = content\n    _p.color = color\n    _p.placement = placement\n    _p.visible = visible\n    _p.disableTransition = disableTransition ?? false\n\n    const p: any = useBreakpointProps(_p)\n\n    content = p.content\n    color = p.color\n    placement = p.placement\n    visible = p.visible\n    disableTransition = p.disableTransition\n\n    const isReactElement = React.isValidElement(content);\n\n    let template: any = useColorTemplate(color, \"fill\")\n    let _css: any = {\n        position: \"absolute\",\n    }\n\n    let translate = ''\n\n    switch (placement) {\n        case \"right-top\":\n            _css.top = 0;\n            _css.right = 0;\n            if (!disableSpace) {\n                translate = \"translate(50%, -50%)\";\n            }\n            break;\n        case \"right-bottom\":\n            _css.bottom = 0;\n            _css.right = 0;\n            if (!disableSpace) {\n                translate = \"translate(50%, 50%)\";\n            }\n            break;\n        case \"left-top\":\n            _css.top = 0;\n            _css.left = 0;\n            if (!disableSpace) {\n                translate = \"translate(-50%, -50%)\";\n            }\n            break;\n        case \"left-bottom\":\n            _css.bottom = 0;\n            _css.left = 0;\n            if (!disableSpace) {\n                translate = \"translate(-50%, 50%)\";\n            }\n            break;\n    }\n\n    if (disableTransition) {\n        _css.transform = translate\n    }\n\n    if (!isReactElement) {\n        _css.userSelect = \"none\"\n        _css.pointerEvents = \"none\"\n        _css.fontSize = \"small\"\n        _css.lineHeight = 1\n        _css.fontWeight = 500\n        _css.radius = 2\n\n        if (typeof content === 'number') {\n            if (content > 99) {\n                content = \"99+\"\n            }\n        }\n\n        if (content !== undefined) {\n            _css.minWidth = 16\n            _css.height = 16\n            _css.p = .8\n            _css.px = .4\n        } else {\n            _css.width = 8\n            _css.height = 8\n        }\n    } else {\n        template = {}\n    }\n\n    const _badge = <Tag\n        {...slotProps?.content}\n        ref={refs?.content}\n        component='span'\n        baseClass='badge-content'\n        sxr={{\n            position: \"absolute\",\n            zIndex: 1,\n            display: 'flex',\n            justifyContent: \"center\",\n            alignItems: 'center',\n            ...template.primary,\n            ..._css,\n        }}\n    >\n        {content}\n    </Tag>\n\n    return (\n        <Tag\n            {...props}\n            position=\"relative\"\n            display=\"inline-block\"\n            baseClass='badge'\n            ref={ref}\n        >\n            {\n                !disableTransition ? (<Transition\n                    open={content !== undefined && visible}\n                    {...slotProps?.transition}\n                    variant={() => {\n                        return {\n                            from: {\n                                opacity: 0,\n                                transform: `scale(0) ${translate}`.trim(),\n                            },\n                            to: {\n                                opacity: 1,\n                                transform: `scale(1) ${translate}`.trim(),\n                            },\n                        }\n                    }}\n                    ref={refs?.transition}\n                >\n                    {_badge}\n                </Transition>) : <>{_badge}</>\n            }\n\n            {children}\n        </Tag>\n    )\n})\n\nexport default Badge\n\n"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","Tag","_jsxs","Transition","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\r\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\r\n\r\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\r\n    content?: useBreakpointPropsType<number | string | ReactElement>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\r\n    visible?: useBreakpointPropsType<boolean>;\r\n    disableTransition?: boolean;\r\n    disableSpace?: boolean;\r\n    slotProps?: {\r\n        transition?: Omit<TransitionProps, \"open\">;\r\n        content?: Omit<TagProps<\"span\">, \"children\">;\r\n    },\r\n    refs?: {\r\n        content?: React.Ref<any>;\r\n        transition?: React.Ref<any>;\r\n    };\r\n}\r\n\r\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\r\n    let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\r\n    color ??= \"danger\"\r\n    visible ??= true\r\n    placement ??= \"right-top\"\r\n    disableTransition ??= false\r\n    disableSpace ??= false\r\n\r\n    const _p: any = {}\r\n\r\n    _p.content = content\r\n    _p.color = color\r\n    _p.placement = placement\r\n    _p.visible = visible\r\n    _p.disableTransition = disableTransition ?? false\r\n\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    content = p.content\r\n    color = p.color\r\n    placement = p.placement\r\n    visible = p.visible\r\n    disableTransition = p.disableTransition\r\n\r\n    const isReactElement = React.isValidElement(content);\r\n\r\n    let template: any = useColorTemplate(color, \"fill\")\r\n    let _css: any = {\r\n        position: \"absolute\",\r\n    }\r\n\r\n    let translate = ''\r\n\r\n    switch (placement) {\r\n        case \"right-top\":\r\n            _css.top = 0;\r\n            _css.right = 0;\r\n            if (!disableSpace) {\r\n                translate = \"translate(50%, -50%)\";\r\n            }\r\n            break;\r\n        case \"right-bottom\":\r\n            _css.bottom = 0;\r\n            _css.right = 0;\r\n            if (!disableSpace) {\r\n                translate = \"translate(50%, 50%)\";\r\n            }\r\n            break;\r\n        case \"left-top\":\r\n            _css.top = 0;\r\n            _css.left = 0;\r\n            if (!disableSpace) {\r\n                translate = \"translate(-50%, -50%)\";\r\n            }\r\n            break;\r\n        case \"left-bottom\":\r\n            _css.bottom = 0;\r\n            _css.left = 0;\r\n            if (!disableSpace) {\r\n                translate = \"translate(-50%, 50%)\";\r\n            }\r\n            break;\r\n    }\r\n\r\n    if (disableTransition) {\r\n        _css.transform = translate\r\n    }\r\n\r\n    if (!isReactElement) {\r\n        _css.userSelect = \"none\"\r\n        _css.pointerEvents = \"none\"\r\n        _css.fontSize = \"small\"\r\n        _css.lineHeight = 1\r\n        _css.fontWeight = 500\r\n        _css.radius = 2\r\n\r\n        if (typeof content === 'number') {\r\n            if (content > 99) {\r\n                content = \"99+\"\r\n            }\r\n        }\r\n\r\n        if (content !== undefined) {\r\n            _css.minWidth = 16\r\n            _css.height = 16\r\n            _css.p = .8\r\n            _css.px = .4\r\n        } else {\r\n            _css.width = 8\r\n            _css.height = 8\r\n        }\r\n    } else {\r\n        template = {}\r\n    }\r\n\r\n    const _badge = <Tag\r\n        {...slotProps?.content}\r\n        ref={refs?.content}\r\n        component='span'\r\n        baseClass='badge-content'\r\n        sxr={{\r\n            position: \"absolute\",\r\n            zIndex: 1,\r\n            display: 'flex',\r\n            justifyContent: \"center\",\r\n            alignItems: 'center',\r\n            ...template.primary,\r\n            ..._css,\r\n        }}\r\n    >\r\n        {content}\r\n    </Tag>\r\n\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            position=\"relative\"\r\n            display=\"inline-block\"\r\n            baseClass='badge'\r\n            ref={ref}\r\n        >\r\n            {\r\n                !disableTransition ? (<Transition\r\n                    open={content !== undefined && visible}\r\n                    {...slotProps?.transition}\r\n                    variant={() => {\r\n                        return {\r\n                            from: {\r\n                                opacity: 0,\r\n                                transform: `scale(0) ${translate}`.trim(),\r\n                            },\r\n                            to: {\r\n                                opacity: 1,\r\n                                transform: `scale(1) ${translate}`.trim(),\r\n                            },\r\n                        }\r\n                    }}\r\n                    ref={refs?.transition}\r\n                >\r\n                    {_badge}\r\n                </Transition>) : <>{_badge}</>\r\n            }\r\n\r\n            {children}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Badge\r\n\r\n"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","Tag","_jsxs","Transition","_Fragment"],"mappings":"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"}

package/Badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n    content?: useBreakpointPropsType<number | string | ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n    visible?: useBreakpointPropsType<boolean>;\n    disableTransition?: boolean;\n    disableSpace?: boolean;\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        content?: Omit<TagProps<\"span\">, \"children\">;\n    },\n    refs?: {\n        content?: React.Ref<any>;\n        transition?: React.Ref<any>;\n    };\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n    let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\n    color ??= \"danger\"\n    visible ??= true\n    placement ??= \"right-top\"\n    disableTransition ??= false\n    disableSpace ??= false\n\n    const _p: any = {}\n\n    _p.content = content\n    _p.color = color\n    _p.placement = placement\n    _p.visible = visible\n    _p.disableTransition = disableTransition ?? false\n\n    const p: any = useBreakpointProps(_p)\n\n    content = p.content\n    color = p.color\n    placement = p.placement\n    visible = p.visible\n    disableTransition = p.disableTransition\n\n    const isReactElement = React.isValidElement(content);\n\n    let template: any = useColorTemplate(color, \"fill\")\n    let _css: any = {\n        position: \"absolute\",\n    }\n\n    let translate = ''\n\n    switch (placement) {\n        case \"right-top\":\n            _css.top = 0;\n            _css.right = 0;\n            if (!disableSpace) {\n                translate = \"translate(50%, -50%)\";\n            }\n            break;\n        case \"right-bottom\":\n            _css.bottom = 0;\n            _css.right = 0;\n            if (!disableSpace) {\n                translate = \"translate(50%, 50%)\";\n            }\n            break;\n        case \"left-top\":\n            _css.top = 0;\n            _css.left = 0;\n            if (!disableSpace) {\n                translate = \"translate(-50%, -50%)\";\n            }\n            break;\n        case \"left-bottom\":\n            _css.bottom = 0;\n            _css.left = 0;\n            if (!disableSpace) {\n                translate = \"translate(-50%, 50%)\";\n            }\n            break;\n    }\n\n    if (disableTransition) {\n        _css.transform = translate\n    }\n\n    if (!isReactElement) {\n        _css.userSelect = \"none\"\n        _css.pointerEvents = \"none\"\n        _css.fontSize = \"small\"\n        _css.lineHeight = 1\n        _css.fontWeight = 500\n        _css.radius = 2\n\n        if (typeof content === 'number') {\n            if (content > 99) {\n                content = \"99+\"\n            }\n        }\n\n        if (content !== undefined) {\n            _css.minWidth = 16\n            _css.height = 16\n            _css.p = .8\n            _css.px = .4\n        } else {\n            _css.width = 8\n            _css.height = 8\n        }\n    } else {\n        template = {}\n    }\n\n    const _badge = <Tag\n        {...slotProps?.content}\n        ref={refs?.content}\n        component='span'\n        baseClass='badge-content'\n        sxr={{\n            position: \"absolute\",\n            zIndex: 1,\n            display: 'flex',\n            justifyContent: \"center\",\n            alignItems: 'center',\n            ...template.primary,\n            ..._css,\n        }}\n    >\n        {content}\n    </Tag>\n\n    return (\n        <Tag\n            {...props}\n            position=\"relative\"\n            display=\"inline-block\"\n            baseClass='badge'\n            ref={ref}\n        >\n            {\n                !disableTransition ? (<Transition\n                    open={content !== undefined && visible}\n                    {...slotProps?.transition}\n                    variant={() => {\n                        return {\n                            from: {\n                                opacity: 0,\n                                transform: `scale(0) ${translate}`.trim(),\n                            },\n                            to: {\n                                opacity: 1,\n                                transform: `scale(1) ${translate}`.trim(),\n                            },\n                        }\n                    }}\n                    ref={refs?.transition}\n                >\n                    {_badge}\n                </Transition>) : <>{_badge}</>\n            }\n\n            {children}\n        </Tag>\n    )\n})\n\nexport default Badge\n\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\r\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\r\n\r\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\r\n    content?: useBreakpointPropsType<number | string | ReactElement>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\r\n    visible?: useBreakpointPropsType<boolean>;\r\n    disableTransition?: boolean;\r\n    disableSpace?: boolean;\r\n    slotProps?: {\r\n        transition?: Omit<TransitionProps, \"open\">;\r\n        content?: Omit<TagProps<\"span\">, \"children\">;\r\n    },\r\n    refs?: {\r\n        content?: React.Ref<any>;\r\n        transition?: React.Ref<any>;\r\n    };\r\n}\r\n\r\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\r\n    let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\r\n    color ??= \"danger\"\r\n    visible ??= true\r\n    placement ??= \"right-top\"\r\n    disableTransition ??= false\r\n    disableSpace ??= false\r\n\r\n    const _p: any = {}\r\n\r\n    _p.content = content\r\n    _p.color = color\r\n    _p.placement = placement\r\n    _p.visible = visible\r\n    _p.disableTransition = disableTransition ?? false\r\n\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    content = p.content\r\n    color = p.color\r\n    placement = p.placement\r\n    visible = p.visible\r\n    disableTransition = p.disableTransition\r\n\r\n    const isReactElement = React.isValidElement(content);\r\n\r\n    let template: any = useColorTemplate(color, \"fill\")\r\n    let _css: any = {\r\n        position: \"absolute\",\r\n    }\r\n\r\n    let translate = ''\r\n\r\n    switch (placement) {\r\n        case \"right-top\":\r\n            _css.top = 0;\r\n            _css.right = 0;\r\n            if (!disableSpace) {\r\n                translate = \"translate(50%, -50%)\";\r\n            }\r\n            break;\r\n        case \"right-bottom\":\r\n            _css.bottom = 0;\r\n            _css.right = 0;\r\n            if (!disableSpace) {\r\n                translate = \"translate(50%, 50%)\";\r\n            }\r\n            break;\r\n        case \"left-top\":\r\n            _css.top = 0;\r\n            _css.left = 0;\r\n            if (!disableSpace) {\r\n                translate = \"translate(-50%, -50%)\";\r\n            }\r\n            break;\r\n        case \"left-bottom\":\r\n            _css.bottom = 0;\r\n            _css.left = 0;\r\n            if (!disableSpace) {\r\n                translate = \"translate(-50%, 50%)\";\r\n            }\r\n            break;\r\n    }\r\n\r\n    if (disableTransition) {\r\n        _css.transform = translate\r\n    }\r\n\r\n    if (!isReactElement) {\r\n        _css.userSelect = \"none\"\r\n        _css.pointerEvents = \"none\"\r\n        _css.fontSize = \"small\"\r\n        _css.lineHeight = 1\r\n        _css.fontWeight = 500\r\n        _css.radius = 2\r\n\r\n        if (typeof content === 'number') {\r\n            if (content > 99) {\r\n                content = \"99+\"\r\n            }\r\n        }\r\n\r\n        if (content !== undefined) {\r\n            _css.minWidth = 16\r\n            _css.height = 16\r\n            _css.p = .8\r\n            _css.px = .4\r\n        } else {\r\n            _css.width = 8\r\n            _css.height = 8\r\n        }\r\n    } else {\r\n        template = {}\r\n    }\r\n\r\n    const _badge = <Tag\r\n        {...slotProps?.content}\r\n        ref={refs?.content}\r\n        component='span'\r\n        baseClass='badge-content'\r\n        sxr={{\r\n            position: \"absolute\",\r\n            zIndex: 1,\r\n            display: 'flex',\r\n            justifyContent: \"center\",\r\n            alignItems: 'center',\r\n            ...template.primary,\r\n            ..._css,\r\n        }}\r\n    >\r\n        {content}\r\n    </Tag>\r\n\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            position=\"relative\"\r\n            display=\"inline-block\"\r\n            baseClass='badge'\r\n            ref={ref}\r\n        >\r\n            {\r\n                !disableTransition ? (<Transition\r\n                    open={content !== undefined && visible}\r\n                    {...slotProps?.transition}\r\n                    variant={() => {\r\n                        return {\r\n                            from: {\r\n                                opacity: 0,\r\n                                transform: `scale(0) ${translate}`.trim(),\r\n                            },\r\n                            to: {\r\n                                opacity: 1,\r\n                                transform: `scale(1) ${translate}`.trim(),\r\n                            },\r\n                        }\r\n                    }}\r\n                    ref={refs?.transition}\r\n                >\r\n                    {_badge}\r\n                </Transition>) : <>{_badge}</>\r\n            }\r\n\r\n            {children}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Badge\r\n\r\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/Box/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Box/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type BoxProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Box = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: BoxProps<T>, ref: React.Ref<any>) => {\n    return (\n        <Tag\n            {...props}\n            baseClass='box'\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Box\n\n"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAKA,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmC,EAAE,GAAmB,KAAI;AAA5D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AAClF,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,IACT,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,GAAG,YACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Box/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type BoxProps<T extends TagComponentType = \"div\"> = TagProps<T>\r\n\r\nconst Box = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: BoxProps<T>, ref: React.Ref<any>) => {\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            baseClass='box'\r\n            ref={ref}\r\n        >{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default Box\r\n\r\n"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAKA,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmC,EAAE,GAAmB,KAAI;AAA5D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AAClF,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,IACT,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,GAAG,YACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}

package/Box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Box/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type BoxProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Box = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: BoxProps<T>, ref: React.Ref<any>) => {\n    return (\n        <Tag\n            {...props}\n            baseClass='box'\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Box\n\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmC,EAAE,GAAmB,KAAI;AAA5D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AAClF,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,IACT,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,GAAG,YACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Box/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type BoxProps<T extends TagComponentType = \"div\"> = TagProps<T>\r\n\r\nconst Box = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: BoxProps<T>, ref: React.Ref<any>) => {\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            baseClass='box'\r\n            ref={ref}\r\n        >{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default Box\r\n\r\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmC,EAAE,GAAmB,KAAI;AAA5D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AAClF,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,IACT,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,GAAG,YACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}

package/Button/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Button/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    loading?: boolean;\n    skeleton?: boolean;\n    slotProps?: {\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">;\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n    }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, skeleton, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n    let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, ..._props }] = useInterface<any>('Button', rest, {\n        variant: \"fill\",\n        color: \"brand\",\n        corner: \"rounded\",\n        size: \"medium\"\n    })\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (direction) _p.direction = direction\n    const p: any = useBreakpointProps(_p)\n\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color\n    variant = p.variant\n    corner = p.corner\n    size = p.size\n    direction = p.direction || \"row\"\n\n    const template = useColorTemplate(color, variant)\n    const cornerCss = useCorner(corner)\n\n    const sizes: any = {\n        small: {\n            height: 38,\n            px: (startIcon || endIcon) ? 1 : 1.5,\n            gap: .5,\n            fontSize: 'button'\n        },\n        medium: {\n            height: 44,\n            px: (startIcon || endIcon) ? 1.5 : 2,\n            gap: 1,\n            fontSize: 'button'\n        },\n        large: {\n            height: 52,\n            px: (startIcon || endIcon) ? 2 : 3,\n            gap: 1,\n            fontSize: \"text\"\n        }\n    }\n\n    const progressSizes: any = {\n        small: 20,\n        medium: 25,\n        large: 30\n    }\n\n    let _size = (sizes[size as any] || {})\n    if (direction === 'column') {\n        delete _size.height\n        _size.gap = .5\n        _size.py = 1\n    }\n\n    if (skeleton) {\n        return <Skeleton\n            {...slotProps?.skeleton}\n            height={_size.height}\n            animation={\"wave\"}\n            sx={{\n                ...slotProps?.skeleton?.sx,\n                ..._size,\n                ...cornerCss,\n            }}\n        />\n    }\n\n    return (\n        <Tag\n            component='button'\n            baseClass='button'\n            {..._props}\n            sxr={{\n                flexShrink: \"0\",\n                whiteSpace: \"nowrap\",\n                cursor: \"pointer\",\n                display: \"flex\",\n                textTransform: \"uppercase\",\n                flexDirection: direction,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                position: \"relative\",\n                overflow: \"hidden\",\n                userSelect: \"none\",\n                fontWeight: 500,\n                ..._size,\n                ...cornerCss,\n                ...template.primary,\n\n            }}\n            hover={{\n                ...template.secondary,\n                ...((_props as any)?.hover || {})\n            }}\n            disabled={loading ?? _props.disabled ?? false}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass='button-loading-container'\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n            >\n                <CircleProgress\n                    {...slotProps?.loading}\n                    color={color === 'default' ? `brand` : \"default\"}\n                    size={progressSizes[size]}\n                    className='button-loading-progress'\n                />\n            </Tag>}\n            {startIcon && <Tag\n                baseClass='button-start-icon'\n                component='span'\n                display=\"inline-block\"\n                flexShrink={0}\n            >{startIcon}</Tag>}\n            {children}\n            {endIcon && <Tag\n                baseClass='button-end-icon'\n                component='span'\n                display=\"inline-block\"\n                flexShrink={0}\n            >{endIcon}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;;;;;AAyBA;;;AACI;AACI;AACA;AACA;AACA;;;AAIJ;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AAEA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AACI;AACA;AACA;;;AAIJ;;AAEI;AACA;;;AAIA;;;AA6CY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Button/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactElement } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport useCorner, { UseCornerTypes } from '../useCorner'\r\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\r\nimport Skeleton, { SkeletonProps } from '../Skeleton';\r\n\r\n\r\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    corner?: useBreakpointPropsType<UseCornerTypes>;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\r\n    loading?: boolean;\r\n    skeleton?: boolean;\r\n    slotProps?: {\r\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">;\r\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\r\n    }\r\n}\r\n\r\n\r\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, skeleton, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\r\n    let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, ..._props }] = useInterface<any>('Button', rest, {\r\n        variant: \"fill\",\r\n        color: \"brand\",\r\n        corner: \"rounded\",\r\n        size: \"medium\"\r\n    })\r\n\r\n    const _p: any = {}\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (corner) _p.corner = corner\r\n    if (size) _p.size = size\r\n    if (direction) _p.direction = direction\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    color = p.color\r\n    variant = p.variant\r\n    corner = p.corner\r\n    size = p.size\r\n    direction = p.direction || \"row\"\r\n\r\n    const template = useColorTemplate(color, variant)\r\n    const cornerCss = useCorner(corner)\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 38,\r\n            px: (startIcon || endIcon) ? 1 : 1.5,\r\n            gap: .5,\r\n            fontSize: 'button'\r\n        },\r\n        medium: {\r\n            height: 44,\r\n            px: (startIcon || endIcon) ? 1.5 : 2,\r\n            gap: 1,\r\n            fontSize: 'button'\r\n        },\r\n        large: {\r\n            height: 52,\r\n            px: (startIcon || endIcon) ? 2 : 3,\r\n            gap: 1,\r\n            fontSize: \"text\"\r\n        }\r\n    }\r\n\r\n    const progressSizes: any = {\r\n        small: 20,\r\n        medium: 25,\r\n        large: 30\r\n    }\r\n\r\n    let _size = (sizes[size as any] || {})\r\n    if (direction === 'column') {\r\n        delete _size.height\r\n        _size.gap = .5\r\n        _size.py = 1\r\n    }\r\n\r\n    if (skeleton) {\r\n        return <Skeleton\r\n            {...slotProps?.skeleton}\r\n            height={_size.height}\r\n            animation={\"wave\"}\r\n            sx={{\r\n                ...slotProps?.skeleton?.sx,\r\n                ..._size,\r\n                ...cornerCss,\r\n            }}\r\n        />\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            component='button'\r\n            baseClass='button'\r\n            {..._props}\r\n            sxr={{\r\n                flexShrink: \"0\",\r\n                whiteSpace: \"nowrap\",\r\n                cursor: \"pointer\",\r\n                display: \"flex\",\r\n                textTransform: \"uppercase\",\r\n                flexDirection: direction,\r\n                alignItems: \"center\",\r\n                justifyContent: \"center\",\r\n                position: \"relative\",\r\n                overflow: \"hidden\",\r\n                userSelect: \"none\",\r\n                fontWeight: 500,\r\n                ..._size,\r\n                ...cornerCss,\r\n                ...template.primary,\r\n\r\n            }}\r\n            hover={{\r\n                ...template.secondary,\r\n                ...((_props as any)?.hover || {})\r\n            }}\r\n            disabled={loading ?? _props.disabled ?? false}\r\n            ref={ref}\r\n        >\r\n            {loading && <Tag\r\n                baseClass='button-loading-container'\r\n                sxr={{\r\n                    position: \"absolute\",\r\n                    top: 0,\r\n                    left: 0,\r\n                    right: 0,\r\n                    bottom: 0,\r\n                    zIndex: 1,\r\n                    display: \"flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\",\r\n                }}\r\n            >\r\n                <CircleProgress\r\n                    {...slotProps?.loading}\r\n                    color={color === 'default' ? `brand` : \"default\"}\r\n                    size={progressSizes[size]}\r\n                    className='button-loading-progress'\r\n                />\r\n            </Tag>}\r\n            {startIcon && <Tag\r\n                baseClass='button-start-icon'\r\n                component='span'\r\n                display=\"inline-block\"\r\n                flexShrink={0}\r\n            >{startIcon}</Tag>}\r\n            {children}\r\n            {endIcon && <Tag\r\n                baseClass='button-end-icon'\r\n                component='span'\r\n                display=\"inline-block\"\r\n                flexShrink={0}\r\n            >{endIcon}</Tag>}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Button\r\n"],"names":[],"mappings":";;;;;;;;;;;AAyBA;;;AACI;AACI;AACA;AACA;AACA;;;AAIJ;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AAEA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AACI;AACA;AACA;;;AAIJ;;AAEI;AACA;;;AAIA;;;AA6CY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}