@xanui/ui 1.1.16 → 1.1.18

package/Accordion/index.js.map

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

package/Accordion/index.mjs.map

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

package/Alert/index.js.map

@@ -1 +1 @@
-{"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;;"}
+{"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;;"}

package/Alert/index.mjs.map

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

package/Avatar/index.js.map

@@ -1 +1 @@
-{"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\n\r\nexport type AvatarProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\r\n    size?: useBreakpointPropsType<number>;\r\n}\r\n\r\nconst Avatar = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, ...rest }: AvatarProps<T>, ref: any) => {\r\n    const [faild, setFaild] = useState<boolean>()\r\n    let [{ size, ...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 (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","Tag"],"mappings":";;;;;;;;AAQA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA+C,EAAE,GAAQ,KAAI;QAA7D,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,OAA2B,EAAtB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAA7B,CAAA,UAAA,EAAA,KAAA,EAAA,KAAA,CAA+B,CAAF;IAC9F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,EAAW;AAC7C,IAAA,IAAI,OAAuBC,iBAAY,CAAM,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC,EAA3D,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAF,YAAA,CAAA,EAAA,EAAhB,CAAA,MAAA,CAAkB,CAAyC;IAChE,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;AAEb,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,IAAIC,cAAA,CAAC,UAAU,EAAA,EAAA,CAAG,CAAC;AACpE,QAAA,QACIA,cAAA,CAACC,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,QACID,cAAA,CAACC,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.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'\n\nexport type AvatarProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\n    size?: useBreakpointPropsType<number>;\n}\n\nconst Avatar = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, ...rest }: AvatarProps<T>, ref: any) => {\n    const [faild, setFaild] = useState<boolean>()\n    let [{ size, ...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 (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","Tag"],"mappings":";;;;;;;;AAQA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA+C,EAAE,GAAQ,KAAI;QAA7D,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,OAA2B,EAAtB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAA7B,CAAA,UAAA,EAAA,KAAA,EAAA,KAAA,CAA+B,CAAF;IAC9F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,EAAW;AAC7C,IAAA,IAAI,OAAuBC,iBAAY,CAAM,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC,EAA3D,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAF,YAAA,CAAA,EAAA,EAAhB,CAAA,MAAA,CAAkB,CAAyC;IAChE,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;AAEb,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,IAAIC,cAAA,CAAC,UAAU,EAAA,EAAA,CAAG,CAAC;AACpE,QAAA,QACIA,cAAA,CAACC,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,QACID,cAAA,CAACC,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;;;;"}

package/Avatar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Avatar/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\r\nimport PersonIcon from '@xanui/icons/Person'\r\n\r\nexport type AvatarProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\r\n    size?: useBreakpointPropsType<number>;\r\n}\r\n\r\nconst Avatar = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, ...rest }: AvatarProps<T>, ref: any) => {\r\n    const [faild, setFaild] = useState<boolean>()\r\n    let [{ size, ...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 (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":";;;;;;AAQA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA+C,EAAE,GAAQ,KAAI;QAA7D,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,OAA2B,EAAtB,IAAI,GAAA,MAAA,CAAA,EAAA,EAA7B,CAAA,UAAA,EAAA,KAAA,EAAA,KAAA,CAA+B,CAAF;IAC9F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAW;AAC7C,IAAA,IAAI,OAAuB,YAAY,CAAM,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC,EAA3D,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAAhB,CAAA,MAAA,CAAkB,CAAyC;IAChE,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,EAAE,CAAA;IACX,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,IAAI,GAAG,CAAC,CAAC,IAAI;AAEb,IAAA,IAAI,KAAK,KAAK,KAAK,IAAI,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,GAAG,CAAA,GAAG,aAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,MAAM,CAAC,CAAC,CAAA,CAAE,WAAW,EAAE,MAAK,QAAQ,IAAIA,GAAA,CAAC,UAAU,EAAA,EAAA,CAAG,CAAC;AACpE,QAAA,QACIA,GAAA,CAAC,GAAG,kBACA,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,GAAG,EAAA,EACJ,KAAK,EAAA,EACT,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAE;AACD,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,OAAO,EAAE,sBAAsB;AAC/B,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC;AACxB,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,UAAU,EAAE,MAAM;AAClB,gBAAA,KAAK,EAAE,cAAc;AACrB,gBAAA,OAAO,EAAE;AACL,oBAAA,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC;AACxB,oBAAA,OAAO,EAAE;AACZ;AACJ,aAAA,EACD,GAAG,EAAE,GAAG,YACV,CAAC,EAAA,CAAA,CAAO;IAElB;AACA,IAAA,QACIA,GAAA,CAAC,GAAG,kBACA,SAAS,EAAC,KAAK,EACf,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,SAAS,EAAC,OAAO,EAAA,EACb,KAAK,EAAA,EACT,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAC,KAAI;YACX,QAAQ,CAAC,KAAK,CAAC;YACf,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,CAAQ,CAAC;AAC5C,QAAA,CAAC,EACD,GAAG,EAAE,GAAG,EAAA,CAAA,CACV;AAEV,CAAC;;;;"}
+{"version":3,"file":"index.mjs","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'\n\nexport type AvatarProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\n    size?: useBreakpointPropsType<number>;\n}\n\nconst Avatar = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, ...rest }: AvatarProps<T>, ref: any) => {\n    const [faild, setFaild] = useState<boolean>()\n    let [{ size, ...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 (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":";;;;;;AAQA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA+C,EAAE,GAAQ,KAAI;QAA7D,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,OAA2B,EAAtB,IAAI,GAAA,MAAA,CAAA,EAAA,EAA7B,CAAA,UAAA,EAAA,KAAA,EAAA,KAAA,CAA+B,CAAF;IAC9F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAW;AAC7C,IAAA,IAAI,OAAuB,YAAY,CAAM,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC,EAA3D,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAAhB,CAAA,MAAA,CAAkB,CAAyC;IAChE,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,EAAE,CAAA;IACX,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,IAAI,GAAG,CAAC,CAAC,IAAI;AAEb,IAAA,IAAI,KAAK,KAAK,KAAK,IAAI,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,GAAG,CAAA,GAAG,aAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,MAAM,CAAC,CAAC,CAAA,CAAE,WAAW,EAAE,MAAK,QAAQ,IAAIA,GAAA,CAAC,UAAU,EAAA,EAAA,CAAG,CAAC;AACpE,QAAA,QACIA,GAAA,CAAC,GAAG,kBACA,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,GAAG,EAAA,EACJ,KAAK,EAAA,EACT,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAE;AACD,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,OAAO,EAAE,sBAAsB;AAC/B,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC;AACxB,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,UAAU,EAAE,MAAM;AAClB,gBAAA,KAAK,EAAE,cAAc;AACrB,gBAAA,OAAO,EAAE;AACL,oBAAA,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC;AACxB,oBAAA,OAAO,EAAE;AACZ;AACJ,aAAA,EACD,GAAG,EAAE,GAAG,YACV,CAAC,EAAA,CAAA,CAAO;IAElB;AACA,IAAA,QACIA,GAAA,CAAC,GAAG,kBACA,SAAS,EAAC,KAAK,EACf,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,SAAS,EAAC,OAAO,EAAA,EACb,KAAK,EAAA,EACT,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAC,KAAI;YACX,QAAQ,CAAC,KAAK,CAAC;YACf,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,CAAQ,CAAC;AAC5C,QAAA,CAAC,EACD,GAAG,EAAE,GAAG,EAAA,CAAA,CACV;AAEV,CAAC;;;;"}

package/Badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\r\n\r\n\r\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\r\n    content?: useBreakpointPropsType<number | 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    slotProps?: {\r\n        transition?: Omit<TransitionProps, \"open\">\r\n    }\r\n}\r\n\r\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\r\n    let [{ color, placement, visible, slotProps, ...props }] = useInterface<any>(\"Badge\", rest, {})\r\n    color ??= \"danger\"\r\n    visible ??= true\r\n    placement ??= \"right-top\"\r\n\r\n    const _p: any = {}\r\n\r\n    if (content) _p.content = content\r\n    if (color) _p.color = color\r\n    if (placement) _p.placement = placement\r\n    if (visible) _p.visible = visible\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\r\n    const template = useColorTemplate(color, \"fill\")\r\n    let _css: any = {}\r\n    let pos = -3;\r\n    if (typeof content === \"number\") {\r\n        if (content.toString().length === 2) {\r\n            pos = -5\r\n        } else if (content.toString().length > 2) {\r\n            pos = -8\r\n        }\r\n    }\r\n\r\n    switch (placement) {\r\n        case \"left-top\":\r\n            _css = { top: content ? pos : 0, left: content ? pos : 0 }\r\n            break;\r\n        case \"left-bottom\":\r\n            _css = { bottom: content ? pos : 0, left: content ? pos : 0 }\r\n            break;\r\n        case \"right-top\":\r\n            _css = { top: content ? pos : 0, right: content ? pos : 0 }\r\n            break;\r\n        case \"right-bottom\":\r\n            _css = { bottom: content ? pos : 0, right: content ? pos : 0 }\r\n            break;\r\n    }\r\n    if (content) {\r\n        _css.minWidth = 16\r\n        _css.height = 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\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            <Tag\r\n                component='span'\r\n                baseClass='badge-content'\r\n                sxr={{\r\n                    position: \"absolute\",\r\n                    zIndex: 1,\r\n                    radius: 2,\r\n                    display: 'flex',\r\n                    justifyContent: \"center\",\r\n                    alignItems: 'center',\r\n                    fontWeight: 500,\r\n                    fontSize: 11\r\n                }}\r\n                {...template.primary}\r\n                {..._css}\r\n            >\r\n                {typeof content === 'number' ? (content >= 100 ? \"99+\" : content) : content}\r\n            </Tag>\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","_jsxs","Tag","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n    content?: useBreakpointPropsType<number | ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n    visible?: useBreakpointPropsType<boolean>;\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">\n    }\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n    let [{ color, placement, visible, slotProps, ...props }] = useInterface<any>(\"Badge\", rest, {})\n    color ??= \"danger\"\n    visible ??= true\n    placement ??= \"right-top\"\n\n    const _p: any = {}\n\n    if (content) _p.content = content\n    if (color) _p.color = color\n    if (placement) _p.placement = placement\n    if (visible) _p.visible = visible\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\n    const template = useColorTemplate(color, \"fill\")\n    let _css: any = {}\n    let pos = -3;\n    if (typeof content === \"number\") {\n        if (content.toString().length === 2) {\n            pos = -5\n        } else if (content.toString().length > 2) {\n            pos = -8\n        }\n    }\n\n    switch (placement) {\n        case \"left-top\":\n            _css = { top: content ? pos : 0, left: content ? pos : 0 }\n            break;\n        case \"left-bottom\":\n            _css = { bottom: content ? pos : 0, left: content ? pos : 0 }\n            break;\n        case \"right-top\":\n            _css = { top: content ? pos : 0, right: content ? pos : 0 }\n            break;\n        case \"right-bottom\":\n            _css = { bottom: content ? pos : 0, right: content ? pos : 0 }\n            break;\n    }\n    if (content) {\n        _css.minWidth = 16\n        _css.height = 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\n    return (\n        <Tag\n            {...props}\n            position=\"relative\"\n            display=\"inline-block\"\n            baseClass='badge'\n            ref={ref}\n        >\n            <Tag\n                component='span'\n                baseClass='badge-content'\n                sxr={{\n                    position: \"absolute\",\n                    zIndex: 1,\n                    radius: 2,\n                    display: 'flex',\n                    justifyContent: \"center\",\n                    alignItems: 'center',\n                    fontWeight: 500,\n                    fontSize: 11\n                }}\n                {...template.primary}\n                {..._css}\n            >\n                {typeof content === 'number' ? (content >= 100 ? \"99+\" : content) : content}\n            </Tag>\n            {children}\n        </Tag>\n    )\n})\n\nexport default Badge\n\n"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsxs","Tag","_jsx"],"mappings":"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"}

package/Badge/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\r\n\r\n\r\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\r\n    content?: useBreakpointPropsType<number | 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    slotProps?: {\r\n        transition?: Omit<TransitionProps, \"open\">\r\n    }\r\n}\r\n\r\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\r\n    let [{ color, placement, visible, slotProps, ...props }] = useInterface<any>(\"Badge\", rest, {})\r\n    color ??= \"danger\"\r\n    visible ??= true\r\n    placement ??= \"right-top\"\r\n\r\n    const _p: any = {}\r\n\r\n    if (content) _p.content = content\r\n    if (color) _p.color = color\r\n    if (placement) _p.placement = placement\r\n    if (visible) _p.visible = visible\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\r\n    const template = useColorTemplate(color, \"fill\")\r\n    let _css: any = {}\r\n    let pos = -3;\r\n    if (typeof content === \"number\") {\r\n        if (content.toString().length === 2) {\r\n            pos = -5\r\n        } else if (content.toString().length > 2) {\r\n            pos = -8\r\n        }\r\n    }\r\n\r\n    switch (placement) {\r\n        case \"left-top\":\r\n            _css = { top: content ? pos : 0, left: content ? pos : 0 }\r\n            break;\r\n        case \"left-bottom\":\r\n            _css = { bottom: content ? pos : 0, left: content ? pos : 0 }\r\n            break;\r\n        case \"right-top\":\r\n            _css = { top: content ? pos : 0, right: content ? pos : 0 }\r\n            break;\r\n        case \"right-bottom\":\r\n            _css = { bottom: content ? pos : 0, right: content ? pos : 0 }\r\n            break;\r\n    }\r\n    if (content) {\r\n        _css.minWidth = 16\r\n        _css.height = 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\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            <Tag\r\n                component='span'\r\n                baseClass='badge-content'\r\n                sxr={{\r\n                    position: \"absolute\",\r\n                    zIndex: 1,\r\n                    radius: 2,\r\n                    display: 'flex',\r\n                    justifyContent: \"center\",\r\n                    alignItems: 'center',\r\n                    fontWeight: 500,\r\n                    fontSize: 11\r\n                }}\r\n                {...template.primary}\r\n                {..._css}\r\n            >\r\n                {typeof content === 'number' ? (content >= 100 ? \"99+\" : content) : content}\r\n            </Tag>\r\n            {children}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Badge\r\n\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n    content?: useBreakpointPropsType<number | ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n    visible?: useBreakpointPropsType<boolean>;\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">\n    }\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n    let [{ color, placement, visible, slotProps, ...props }] = useInterface<any>(\"Badge\", rest, {})\n    color ??= \"danger\"\n    visible ??= true\n    placement ??= \"right-top\"\n\n    const _p: any = {}\n\n    if (content) _p.content = content\n    if (color) _p.color = color\n    if (placement) _p.placement = placement\n    if (visible) _p.visible = visible\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\n    const template = useColorTemplate(color, \"fill\")\n    let _css: any = {}\n    let pos = -3;\n    if (typeof content === \"number\") {\n        if (content.toString().length === 2) {\n            pos = -5\n        } else if (content.toString().length > 2) {\n            pos = -8\n        }\n    }\n\n    switch (placement) {\n        case \"left-top\":\n            _css = { top: content ? pos : 0, left: content ? pos : 0 }\n            break;\n        case \"left-bottom\":\n            _css = { bottom: content ? pos : 0, left: content ? pos : 0 }\n            break;\n        case \"right-top\":\n            _css = { top: content ? pos : 0, right: content ? pos : 0 }\n            break;\n        case \"right-bottom\":\n            _css = { bottom: content ? pos : 0, right: content ? pos : 0 }\n            break;\n    }\n    if (content) {\n        _css.minWidth = 16\n        _css.height = 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\n    return (\n        <Tag\n            {...props}\n            position=\"relative\"\n            display=\"inline-block\"\n            baseClass='badge'\n            ref={ref}\n        >\n            <Tag\n                component='span'\n                baseClass='badge-content'\n                sxr={{\n                    position: \"absolute\",\n                    zIndex: 1,\n                    radius: 2,\n                    display: 'flex',\n                    justifyContent: \"center\",\n                    alignItems: 'center',\n                    fontWeight: 500,\n                    fontSize: 11\n                }}\n                {...template.primary}\n                {..._css}\n            >\n                {typeof content === 'number' ? (content >= 100 ? \"99+\" : content) : content}\n            </Tag>\n            {children}\n        </Tag>\n    )\n})\n\nexport default Badge\n\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/Box/index.js.map

@@ -1 +1 @@
-{"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":["__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.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":["__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.mjs.map

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

package/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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\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    slotProps?: {\r\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">\r\n    }\r\n}\r\n\r\n\r\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...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: 40,\r\n            px: (startIcon || endIcon) ? 1 : 1.5,\r\n            gap: .5,\r\n            fontSize: 'button'\r\n        },\r\n        medium: {\r\n            height: 46,\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    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":";;;;;;;;;;AAsBA;;AAAwE;AACpE;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;;;AAoCY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}
+{"version":3,"file":"index.js","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'\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    slotProps?: {\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">\n    }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...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: 40,\n            px: (startIcon || endIcon) ? 1 : 1.5,\n            gap: .5,\n            fontSize: 'button'\n        },\n        medium: {\n            height: 46,\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    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":";;;;;;;;;;AAsBA;;AAAwE;AACpE;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;;;AAoCY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}

package/Button/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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\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    slotProps?: {\r\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">\r\n    }\r\n}\r\n\r\n\r\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...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: 40,\r\n            px: (startIcon || endIcon) ? 1 : 1.5,\r\n            gap: .5,\r\n            fontSize: 'button'\r\n        },\r\n        medium: {\r\n            height: 46,\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    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":";;;;;;;;AAsBA;;AAAwE;AACpE;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;;;AAoCY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}
+{"version":3,"file":"index.mjs","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'\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    slotProps?: {\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">\n    }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...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: 40,\n            px: (startIcon || endIcon) ? 1 : 1.5,\n            gap: .5,\n            fontSize: 'button'\n        },\n        medium: {\n            height: 46,\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    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":";;;;;;;;AAsBA;;AAAwE;AACpE;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;;;AAoCY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}

package/ButtonGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["import React, { ReactElement, Children, cloneElement } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\r\nimport { ButtonProps } from '../Button';\r\n\r\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\r\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n}\r\n\r\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\r\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\r\n        size: \"medium\",\r\n        variant: \"outline\",\r\n        color: \"default\"\r\n    })\r\n    const _p: any = {}\r\n    if (color) _p.color = color\r\n    const p: any = useBreakpointProps(_p)\r\n    color = p.color\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 40,\r\n        },\r\n        medium: {\r\n            height: 46,\r\n        },\r\n        large: {\r\n            height: 52,\r\n        }\r\n    }\r\n\r\n    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`\r\n\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            {...sizes[size]}\r\n            sxr={{\r\n                display: \"inline-flex\",\r\n                flexWrap: \"nowrap\",\r\n                overflow: \"hidden\",\r\n                radius: 1,\r\n                border: \"1px solid\",\r\n                borderColor: borderColor,\r\n                '& button, & button:hover': {\r\n                    borderRight: \"1px solid\",\r\n                    borderColor: borderColor\r\n                },\r\n                \"& button:last-child, & button:last-child:hover\": {\r\n                    borderRight: \"none\"\r\n                }\r\n            }}\r\n            baseClass='button-group'\r\n            ref={ref}\r\n        >\r\n            {Children.map(children, (child: any) => {\r\n                return cloneElement(child, {\r\n                    flex: \"0 0 auto\",\r\n                    color,\r\n                    variant,\r\n                    size,\r\n                    corner: \"squar\",\r\n                })\r\n            })}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default ButtonGroup\r\n\r\n\r\n"],"names":["__rest","useInterface","useBreakpointProps","_jsx","Tag","Children","cloneElement"],"mappings":";;;;;;;AAWA,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACzF,IAAA,IAAI,OAAuCC,iBAAY,CAAM,aAAa,EAAE,IAAI,EAAE;AAC9E,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE;AACV,KAAA,CAAC,EAJG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAIrC;IACF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AAEf,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb;KACJ;AAED,IAAA,IAAI,WAAW,GAAG,KAAK,KAAK,SAAS,GAAG,mBAAmB,GAAG,CAAA,EAAG,KAAK,YAAY;AAElF,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EACL,KAAK,CAAC,IAAI,CAAC,EAAA,EACf,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,WAAW,EAAE,WAAW;AACxB,YAAA,0BAA0B,EAAE;AACxB,gBAAA,WAAW,EAAE,WAAW;AACxB,gBAAA,WAAW,EAAE;AAChB,aAAA;AACD,YAAA,gDAAgD,EAAE;AAC9C,gBAAA,WAAW,EAAE;AAChB;AACJ,SAAA,EACD,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EAAA,QAAA,EAEPC,cAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YACnC,OAAOC,kBAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,IAAI,EAAE,UAAU;gBAChB,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE,OAAO;AAClB,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["import React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\",\n        variant: \"outline\",\n        color: \"default\"\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const sizes: any = {\n        small: {\n            height: 40,\n        },\n        medium: {\n            height: 46,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                flexWrap: \"nowrap\",\n                overflow: \"hidden\",\n                radius: 1,\n                border: \"1px solid\",\n                borderColor: borderColor,\n                '& button, & button:hover': {\n                    borderRight: \"1px solid\",\n                    borderColor: borderColor\n                },\n                \"& button:last-child, & button:last-child:hover\": {\n                    borderRight: \"none\"\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: \"0 0 auto\",\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\",\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":["__rest","useInterface","useBreakpointProps","_jsx","Tag","Children","cloneElement"],"mappings":";;;;;;;AAWA,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACzF,IAAA,IAAI,OAAuCC,iBAAY,CAAM,aAAa,EAAE,IAAI,EAAE;AAC9E,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE;AACV,KAAA,CAAC,EAJG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAIrC;IACF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AAEf,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb;KACJ;AAED,IAAA,IAAI,WAAW,GAAG,KAAK,KAAK,SAAS,GAAG,mBAAmB,GAAG,CAAA,EAAG,KAAK,YAAY;AAElF,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EACL,KAAK,CAAC,IAAI,CAAC,EAAA,EACf,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,WAAW,EAAE,WAAW;AACxB,YAAA,0BAA0B,EAAE;AACxB,gBAAA,WAAW,EAAE,WAAW;AACxB,gBAAA,WAAW,EAAE;AAChB,aAAA;AACD,YAAA,gDAAgD,EAAE;AAC9C,gBAAA,WAAW,EAAE;AAChB;AACJ,SAAA,EACD,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EAAA,QAAA,EAEPC,cAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YACnC,OAAOC,kBAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,IAAI,EAAE,UAAU;gBAChB,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE,OAAO;AAClB,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC;;;;"}

package/ButtonGroup/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["import React, { ReactElement, Children, cloneElement } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\r\nimport { ButtonProps } from '../Button';\r\n\r\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\r\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n}\r\n\r\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\r\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\r\n        size: \"medium\",\r\n        variant: \"outline\",\r\n        color: \"default\"\r\n    })\r\n    const _p: any = {}\r\n    if (color) _p.color = color\r\n    const p: any = useBreakpointProps(_p)\r\n    color = p.color\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 40,\r\n        },\r\n        medium: {\r\n            height: 46,\r\n        },\r\n        large: {\r\n            height: 52,\r\n        }\r\n    }\r\n\r\n    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`\r\n\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            {...sizes[size]}\r\n            sxr={{\r\n                display: \"inline-flex\",\r\n                flexWrap: \"nowrap\",\r\n                overflow: \"hidden\",\r\n                radius: 1,\r\n                border: \"1px solid\",\r\n                borderColor: borderColor,\r\n                '& button, & button:hover': {\r\n                    borderRight: \"1px solid\",\r\n                    borderColor: borderColor\r\n                },\r\n                \"& button:last-child, & button:last-child:hover\": {\r\n                    borderRight: \"none\"\r\n                }\r\n            }}\r\n            baseClass='button-group'\r\n            ref={ref}\r\n        >\r\n            {Children.map(children, (child: any) => {\r\n                return cloneElement(child, {\r\n                    flex: \"0 0 auto\",\r\n                    color,\r\n                    variant,\r\n                    size,\r\n                    corner: \"squar\",\r\n                })\r\n            })}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default ButtonGroup\r\n\r\n\r\n"],"names":["_jsx"],"mappings":";;;;;AAWA,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACzF,IAAA,IAAI,OAAuC,YAAY,CAAM,aAAa,EAAE,IAAI,EAAE;AAC9E,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE;AACV,KAAA,CAAC,EAJG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAIrC;IACF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AAEf,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb;KACJ;AAED,IAAA,IAAI,WAAW,GAAG,KAAK,KAAK,SAAS,GAAG,mBAAmB,GAAG,CAAA,EAAG,KAAK,YAAY;AAElF,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EACL,KAAK,CAAC,IAAI,CAAC,EAAA,EACf,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,WAAW,EAAE,WAAW;AACxB,YAAA,0BAA0B,EAAE;AACxB,gBAAA,WAAW,EAAE,WAAW;AACxB,gBAAA,WAAW,EAAE;AAChB,aAAA;AACD,YAAA,gDAAgD,EAAE;AAC9C,gBAAA,WAAW,EAAE;AAChB;AACJ,SAAA,EACD,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YACnC,OAAO,YAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,IAAI,EAAE,UAAU;gBAChB,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE,OAAO;AAClB,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["import React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\",\n        variant: \"outline\",\n        color: \"default\"\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const sizes: any = {\n        small: {\n            height: 40,\n        },\n        medium: {\n            height: 46,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                flexWrap: \"nowrap\",\n                overflow: \"hidden\",\n                radius: 1,\n                border: \"1px solid\",\n                borderColor: borderColor,\n                '& button, & button:hover': {\n                    borderRight: \"1px solid\",\n                    borderColor: borderColor\n                },\n                \"& button:last-child, & button:last-child:hover\": {\n                    borderRight: \"none\"\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: \"0 0 auto\",\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\",\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":["_jsx"],"mappings":";;;;;AAWA,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACzF,IAAA,IAAI,OAAuC,YAAY,CAAM,aAAa,EAAE,IAAI,EAAE;AAC9E,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE;AACV,KAAA,CAAC,EAJG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAIrC;IACF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AAEf,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb;KACJ;AAED,IAAA,IAAI,WAAW,GAAG,KAAK,KAAK,SAAS,GAAG,mBAAmB,GAAG,CAAA,EAAG,KAAK,YAAY;AAElF,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EACL,KAAK,CAAC,IAAI,CAAC,EAAA,EACf,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,WAAW,EAAE,WAAW;AACxB,YAAA,0BAA0B,EAAE;AACxB,gBAAA,WAAW,EAAE,WAAW;AACxB,gBAAA,WAAW,EAAE;AAChB,aAAA;AACD,YAAA,gDAAgD,EAAE;AAC9C,gBAAA,WAAW,EAAE;AAChB;AACJ,SAAA,EACD,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YACnC,OAAO,YAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,IAAI,EAAE,UAAU;gBAChB,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE,OAAO;AAClB,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC;;;;"}

package/Calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Calendar/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { useEffect, useRef, useState } from 'react';\r\nimport Stack from '../Stack'\r\nimport IconButton from '../IconButton';\r\nimport IconKeyboardArrowRight from '@xanui/icons/KeyboardArrowRight';\r\nimport IconKeyboardArrowLeft from '@xanui/icons/KeyboardArrowLeft';\r\nimport Text from '../Text';\r\nimport Button from '../Button';\r\nimport ResetIcon from '@xanui/icons/Replay';\r\nimport ViewBox from '../ViewBox';\r\nimport { UseColorTemplateColor, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\r\n\r\nexport type CalendarProps = {\r\n    value?: Date | null;\r\n    onChange?: (date: Date | null) => void;\r\n    viewMode?: useBreakpointPropsType<\"year\" | \"month\" | \"day\">;\r\n    onButtonClick?: (mode: CalendarProps[\"viewMode\"], value: CalendarProps[\"value\"]) => void;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n}\r\n\r\n\r\nconst ShowYears = ({ color, year, today, boxWidth, onClick }: any) => {\r\n    let years: any[] = []\r\n    const selectedRef: any = useRef(null)\r\n    for (let y = 1900; y < today.getFullYear() + 40; y++) {\r\n        const selected = year == y\r\n        years.push(<Stack\r\n            key={y}\r\n            sx={{\r\n                width: (boxWidth - 12) / 3,\r\n                alignItems: \"center\",\r\n                justifyContent: \"center\",\r\n                p: .1\r\n            }}\r\n            className='calender-year-item'\r\n        >\r\n            <Button\r\n                color={selected ? color : \"default\"}\r\n                className='calender-year-button'\r\n                size='small'\r\n                corner=\"circle\"\r\n                ref={selected ? selectedRef : null}\r\n                onClick={() => onClick(y)}\r\n                variant={selected ? \"fill\" : \"text\"}\r\n            >\r\n                {y}\r\n            </Button>\r\n        </Stack>)\r\n    }\r\n\r\n    useEffect(() => {\r\n        if (selectedRef?.current) {\r\n            selectedRef?.current.scrollIntoView({ behavior: \"smooth\", block: \"center\", inline: \"nearest\" })\r\n        }\r\n    }, [])\r\n\r\n    return (\r\n        <Stack\r\n            sx={{\r\n                flexWrap: \"wrap\",\r\n                flexDirection: \"row\",\r\n                overflow: \"hidden\",\r\n                overflowY: \"auto\"\r\n            }}\r\n            className='calender-years'\r\n        >\r\n            {years}\r\n        </Stack>\r\n    )\r\n}\r\n\r\n\r\nconst Calendar = ({ value, ...rest }: CalendarProps) => {\r\n    let [{ onChange, viewMode: VMode, onButtonClick, color }] = useInterface<any>(\"Calender\", rest, {})\r\n    const _p: any = {}\r\n    if (VMode) _p.VMode = VMode\r\n    if (color) _p.color = color\r\n    const p: any = useBreakpointProps(_p)\r\n    color = p.color || \"brand\"\r\n\r\n    let [viewMode, setViewMode] = useState<any>(p.VMode || \"day\");\r\n    let [selectedDate, setSelectedDate] = useState(new Date());\r\n    selectedDate = value instanceof Date ? value : selectedDate\r\n    const [currentDate, setCurrentDate] = useState(selectedDate);\r\n    const year = currentDate.getFullYear()\r\n    const month = currentDate.getMonth()\r\n    const daysInMonth = 32 - new Date(year, month, 32).getDate()\r\n    const today = new Date();\r\n    const btnWidth = 32\r\n    const boxWidth = btnWidth * 7\r\n\r\n    const showCalendar = () => {\r\n\r\n        let firstDay = (new Date(year, month)).getDay();\r\n        let rows = []\r\n\r\n        let date = 1;\r\n        for (let i = 0; i < 6; i++) {\r\n            let row = []\r\n            for (let j = 0; j < 7; j++) {\r\n                if (i === 0 && j < firstDay) {\r\n                    row.push(<Stack\r\n                        width={btnWidth}\r\n                        height={btnWidth}\r\n                        alignItems=\"center\"\r\n                        justifyContent=\"center\"\r\n                        key={date + j + i}\r\n                    >\r\n                    </Stack>)\r\n                } else if (date > daysInMonth) {\r\n                    break;\r\n                } else {\r\n                    let isToday = date === today.getDate() && year === today.getFullYear() && month === today.getMonth()\r\n                    let isSelected = date === selectedDate.getDate() && year === selectedDate.getFullYear() && month === selectedDate.getMonth()\r\n\r\n                    let css: any = {}\r\n                    if (isToday) {\r\n                        css = {\r\n                            variant: \"outline\",\r\n                            color: color\r\n                        }\r\n                    }\r\n\r\n                    if (isSelected) {\r\n                        css = {\r\n                            variant: \"fill\",\r\n                            color: color\r\n                        }\r\n                    }\r\n\r\n                    row.push(<Stack\r\n                        sx={{\r\n                            width: btnWidth,\r\n                            height: btnWidth,\r\n                            alignItems: \"center\",\r\n                            justifyContent: \"center\"\r\n                        }}\r\n                        key={date + j + i}\r\n                        className='calender-day-item'\r\n                    >\r\n                        <IconButton\r\n                            className='calender-day-button'\r\n                            variant={isSelected ? \"fill\" : \"text\"}\r\n                            color={isToday ? color : \"default\"}\r\n                            {...css}\r\n                            data-value={date}\r\n                            onClick={(e: any) => {\r\n                                let d = e.target.getAttribute(\"data-value\")\r\n                                if (!d) return\r\n                                let selectedDate = new Date(year, month, parseInt(d))\r\n                                onChange ? onChange(selectedDate) : setSelectedDate(selectedDate)\r\n                                onButtonClick && onButtonClick(\"day\", selectedDate)\r\n                            }}\r\n                        >\r\n                            {date}\r\n                        </IconButton>\r\n                    </Stack>)\r\n                    date++;\r\n                }\r\n            }\r\n            rows.push(<Stack flexRow key={\"row\" + i} className='calender-day-row'>\r\n                {row}\r\n            </Stack>);\r\n        }\r\n        return rows\r\n    }\r\n\r\n    const showMonth = () => {\r\n        let months: any[] = []\r\n        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n        for (let m = 0; m < monthNames.length; m++) {\r\n            const selected = currentDate.getMonth() === m\r\n\r\n            months.push(<Stack\r\n                key={m}\r\n                width={(boxWidth - 12) / 2}\r\n                alignItems=\"center\"\r\n                justifyContent=\"center\"\r\n                p={.1}\r\n                className='calender-months-item'\r\n            >\r\n                <Button\r\n                    color={selected ? color : \"default\"}\r\n                    className='calender-month-button'\r\n                    size='small'\r\n                    corner=\"circle\"\r\n                    variant={selected ? \"fill\" : 'text'}\r\n                    onClick={() => {\r\n                        const v = new Date(currentDate.getFullYear(), m)\r\n                        setCurrentDate(v)\r\n                        setViewMode(\"day\")\r\n                        onButtonClick && onButtonClick(\"month\", v)\r\n                    }}\r\n                    sx={{\r\n                        color: selected ? \"brand.text\" : \"text.primary\"\r\n                    }}\r\n                >\r\n                    {monthNames[m]}\r\n                </Button>\r\n            </Stack>)\r\n        }\r\n\r\n        return (\r\n            <Stack\r\n                className='calender-months'\r\n                sx={{\r\n                    flexWrap: \"wrap\",\r\n                    overflow: \"hidden\",\r\n                    overflowY: \"auto\",\r\n                    flexDirection: \"row\"\r\n                }}\r\n            >\r\n                {months}\r\n            </Stack>\r\n        )\r\n    }\r\n\r\n    let view: any = null\r\n    switch (viewMode) {\r\n        case \"year\":\r\n            view = <ShowYears\r\n                color={color}\r\n                today={today}\r\n                year={year}\r\n                boxWidth={boxWidth}\r\n                onClick={(y: any) => {\r\n                    currentDate.setFullYear(y)\r\n                    setCurrentDate(currentDate)\r\n                    setViewMode(\"month\")\r\n                    onButtonClick && onButtonClick(\"year\", currentDate)\r\n                }}\r\n            />\r\n            break;\r\n        case \"month\":\r\n            view = showMonth()\r\n            break;\r\n        default:\r\n            view = (<>\r\n                <Stack flexRow className='calender-week-container'>\r\n                    {\r\n                        ['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, idx) => (\r\n                            <Stack\r\n                                key={day + idx}\r\n                                width={btnWidth}\r\n                                height={btnWidth}\r\n                                alignItems=\"center\"\r\n                                justifyContent=\"center\"\r\n                            >\r\n                                <Text\r\n                                    fontWeight={500}\r\n                                    fontSize=\"button\"\r\n                                    color=\"text.secondary\"\r\n                                >\r\n                                    {day}\r\n                                </Text>\r\n                            </Stack>\r\n                        ))\r\n                    }\r\n                </Stack>\r\n                {showCalendar()}\r\n            </>\r\n            )\r\n            break;\r\n    }\r\n\r\n    return (\r\n        <ViewBox\r\n            className='calender-root'\r\n            maxHeight={308}\r\n            width={250}\r\n            radius={1}\r\n            bgcolor=\"background.primary\"\r\n            startContent={\r\n                <Stack className='calender-header' flexRow alignItems=\"center\" justifyContent=\"space-between\" p={1}>\r\n                    <Text\r\n                        fontWeight=\"bold\"\r\n                        cursor=\"pointer\"\r\n                        onClick={() => setViewMode(viewMode !== 'day' ? \"day\" : \"year\")}\r\n                        flex={1}\r\n                    >\r\n                        {currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' })}\r\n                    </Text>\r\n                    <IconButton\r\n                        color=\"default\"\r\n                        variant='text'\r\n                        size={28}\r\n                        onClick={() => {\r\n                            setCurrentDate(new Date())\r\n                            onChange ? onChange(new Date()) : setSelectedDate(new Date())\r\n                        }}\r\n                    >\r\n                        <ResetIcon fontSize={20} />\r\n                    </IconButton>\r\n                    <IconButton\r\n                        color=\"default\"\r\n                        variant='text'\r\n                        size={28}\r\n                        onClick={() => {\r\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1))\r\n                        }}\r\n                    >\r\n                        <IconKeyboardArrowLeft />\r\n                    </IconButton>\r\n                    <IconButton\r\n                        color=\"default\"\r\n                        variant='text'\r\n                        size={28}\r\n                        onClick={() => {\r\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1))\r\n                        }}\r\n                    >\r\n                        <IconKeyboardArrowRight />\r\n                    </IconButton>\r\n                </Stack>\r\n            }\r\n        >\r\n            <Stack height=\"100%\" p={.5} className='calender-container'>\r\n                {view}\r\n            </Stack>\r\n        </ViewBox>\r\n    );\r\n};\r\n\r\nexport default Calendar;"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAqBA;;AAEI;AACA;AACI;AACA;AAGQ;AACA;AACA;AACA;AACH;;;;;;;AAuBT;AAGY;AACA;AACA;AACA;AACH;AAMb;AAGA;AAAkB;;;AAGd;AAAW;AACX;AAAW;AACX;AACA;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAII;;;AAIA;;AAEI;;AAEQ;;AAQG;;;;;;;;AAQC;AACI;AACA;;;;AAKJ;AACI;AACA;;;AAIR;AAEQ;AACA;AACA;AACA;;;AAaI;;AACA;AACA;AACA;;AAMZ;;;AAGR;;AAIJ;AACJ;;;;AAKI;;AAGI;AAeY;;;AAGA;;;;;;AAeJ;AACA;AACA;AACA;;AAMhB;;;AAII;;AAOY;;;AAGA;AACJ;;AAGR;;;AAGA;AACI;;;;AAkDgB;AACA;AACJ;AASI;;AAUA;;AAa5B;;"}
+{"version":3,"file":"index.js","sources":["../../src/Calendar/index.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useRef, useState } from 'react';\nimport Stack from '../Stack'\nimport IconButton from '../IconButton';\nimport IconKeyboardArrowRight from '@xanui/icons/KeyboardArrowRight';\nimport IconKeyboardArrowLeft from '@xanui/icons/KeyboardArrowLeft';\nimport Text from '../Text';\nimport Button from '../Button';\nimport ResetIcon from '@xanui/icons/Replay';\nimport ViewBox from '../ViewBox';\nimport { UseColorTemplateColor, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\n\nexport type CalendarProps = {\n    value?: Date | null;\n    onChange?: (date: Date | null) => void;\n    viewMode?: useBreakpointPropsType<\"year\" | \"month\" | \"day\">;\n    onButtonClick?: (mode: CalendarProps[\"viewMode\"], value: CalendarProps[\"value\"]) => void;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n}\n\n\nconst ShowYears = ({ color, year, today, boxWidth, onClick }: any) => {\n    let years: any[] = []\n    const selectedRef: any = useRef(null)\n    for (let y = 1900; y < today.getFullYear() + 40; y++) {\n        const selected = year == y\n        years.push(<Stack\n            key={y}\n            sx={{\n                width: (boxWidth - 12) / 3,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                p: .1\n            }}\n            className='calender-year-item'\n        >\n            <Button\n                color={selected ? color : \"default\"}\n                className='calender-year-button'\n                size='small'\n                corner=\"circle\"\n                ref={selected ? selectedRef : null}\n                onClick={() => onClick(y)}\n                variant={selected ? \"fill\" : \"text\"}\n            >\n                {y}\n            </Button>\n        </Stack>)\n    }\n\n    useEffect(() => {\n        if (selectedRef?.current) {\n            selectedRef?.current.scrollIntoView({ behavior: \"smooth\", block: \"center\", inline: \"nearest\" })\n        }\n    }, [])\n\n    return (\n        <Stack\n            sx={{\n                flexWrap: \"wrap\",\n                flexDirection: \"row\",\n                overflow: \"hidden\",\n                overflowY: \"auto\"\n            }}\n            className='calender-years'\n        >\n            {years}\n        </Stack>\n    )\n}\n\n\nconst Calendar = ({ value, ...rest }: CalendarProps) => {\n    let [{ onChange, viewMode: VMode, onButtonClick, color }] = useInterface<any>(\"Calender\", rest, {})\n    const _p: any = {}\n    if (VMode) _p.VMode = VMode\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color || \"brand\"\n\n    let [viewMode, setViewMode] = useState<any>(p.VMode || \"day\");\n    let [selectedDate, setSelectedDate] = useState(new Date());\n    selectedDate = value instanceof Date ? value : selectedDate\n    const [currentDate, setCurrentDate] = useState(selectedDate);\n    const year = currentDate.getFullYear()\n    const month = currentDate.getMonth()\n    const daysInMonth = 32 - new Date(year, month, 32).getDate()\n    const today = new Date();\n    const btnWidth = 32\n    const boxWidth = btnWidth * 7\n\n    const showCalendar = () => {\n\n        let firstDay = (new Date(year, month)).getDay();\n        let rows = []\n\n        let date = 1;\n        for (let i = 0; i < 6; i++) {\n            let row = []\n            for (let j = 0; j < 7; j++) {\n                if (i === 0 && j < firstDay) {\n                    row.push(<Stack\n                        width={btnWidth}\n                        height={btnWidth}\n                        alignItems=\"center\"\n                        justifyContent=\"center\"\n                        key={date + j + i}\n                    >\n                    </Stack>)\n                } else if (date > daysInMonth) {\n                    break;\n                } else {\n                    let isToday = date === today.getDate() && year === today.getFullYear() && month === today.getMonth()\n                    let isSelected = date === selectedDate.getDate() && year === selectedDate.getFullYear() && month === selectedDate.getMonth()\n\n                    let css: any = {}\n                    if (isToday) {\n                        css = {\n                            variant: \"outline\",\n                            color: color\n                        }\n                    }\n\n                    if (isSelected) {\n                        css = {\n                            variant: \"fill\",\n                            color: color\n                        }\n                    }\n\n                    row.push(<Stack\n                        sx={{\n                            width: btnWidth,\n                            height: btnWidth,\n                            alignItems: \"center\",\n                            justifyContent: \"center\"\n                        }}\n                        key={date + j + i}\n                        className='calender-day-item'\n                    >\n                        <IconButton\n                            className='calender-day-button'\n                            variant={isSelected ? \"fill\" : \"text\"}\n                            color={isToday ? color : \"default\"}\n                            {...css}\n                            data-value={date}\n                            onClick={(e: any) => {\n                                let d = e.target.getAttribute(\"data-value\")\n                                if (!d) return\n                                let selectedDate = new Date(year, month, parseInt(d))\n                                onChange ? onChange(selectedDate) : setSelectedDate(selectedDate)\n                                onButtonClick && onButtonClick(\"day\", selectedDate)\n                            }}\n                        >\n                            {date}\n                        </IconButton>\n                    </Stack>)\n                    date++;\n                }\n            }\n            rows.push(<Stack flexRow key={\"row\" + i} className='calender-day-row'>\n                {row}\n            </Stack>);\n        }\n        return rows\n    }\n\n    const showMonth = () => {\n        let months: any[] = []\n        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n        for (let m = 0; m < monthNames.length; m++) {\n            const selected = currentDate.getMonth() === m\n\n            months.push(<Stack\n                key={m}\n                width={(boxWidth - 12) / 2}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                p={.1}\n                className='calender-months-item'\n            >\n                <Button\n                    color={selected ? color : \"default\"}\n                    className='calender-month-button'\n                    size='small'\n                    corner=\"circle\"\n                    variant={selected ? \"fill\" : 'text'}\n                    onClick={() => {\n                        const v = new Date(currentDate.getFullYear(), m)\n                        setCurrentDate(v)\n                        setViewMode(\"day\")\n                        onButtonClick && onButtonClick(\"month\", v)\n                    }}\n                    sx={{\n                        color: selected ? \"brand.text\" : \"text.primary\"\n                    }}\n                >\n                    {monthNames[m]}\n                </Button>\n            </Stack>)\n        }\n\n        return (\n            <Stack\n                className='calender-months'\n                sx={{\n                    flexWrap: \"wrap\",\n                    overflow: \"hidden\",\n                    overflowY: \"auto\",\n                    flexDirection: \"row\"\n                }}\n            >\n                {months}\n            </Stack>\n        )\n    }\n\n    let view: any = null\n    switch (viewMode) {\n        case \"year\":\n            view = <ShowYears\n                color={color}\n                today={today}\n                year={year}\n                boxWidth={boxWidth}\n                onClick={(y: any) => {\n                    currentDate.setFullYear(y)\n                    setCurrentDate(currentDate)\n                    setViewMode(\"month\")\n                    onButtonClick && onButtonClick(\"year\", currentDate)\n                }}\n            />\n            break;\n        case \"month\":\n            view = showMonth()\n            break;\n        default:\n            view = (<>\n                <Stack flexRow className='calender-week-container'>\n                    {\n                        ['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, idx) => (\n                            <Stack\n                                key={day + idx}\n                                width={btnWidth}\n                                height={btnWidth}\n                                alignItems=\"center\"\n                                justifyContent=\"center\"\n                            >\n                                <Text\n                                    fontWeight={500}\n                                    fontSize=\"button\"\n                                    color=\"text.secondary\"\n                                >\n                                    {day}\n                                </Text>\n                            </Stack>\n                        ))\n                    }\n                </Stack>\n                {showCalendar()}\n            </>\n            )\n            break;\n    }\n\n    return (\n        <ViewBox\n            className='calender-root'\n            maxHeight={308}\n            width={250}\n            radius={1}\n            bgcolor=\"background.primary\"\n            startContent={\n                <Stack className='calender-header' flexRow alignItems=\"center\" justifyContent=\"space-between\" p={1}>\n                    <Text\n                        fontWeight=\"bold\"\n                        cursor=\"pointer\"\n                        onClick={() => setViewMode(viewMode !== 'day' ? \"day\" : \"year\")}\n                        flex={1}\n                    >\n                        {currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' })}\n                    </Text>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date())\n                            onChange ? onChange(new Date()) : setSelectedDate(new Date())\n                        }}\n                    >\n                        <ResetIcon fontSize={20} />\n                    </IconButton>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1))\n                        }}\n                    >\n                        <IconKeyboardArrowLeft />\n                    </IconButton>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1))\n                        }}\n                    >\n                        <IconKeyboardArrowRight />\n                    </IconButton>\n                </Stack>\n            }\n        >\n            <Stack height=\"100%\" p={.5} className='calender-container'>\n                {view}\n            </Stack>\n        </ViewBox>\n    );\n};\n\nexport default Calendar;"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAqBA;;AAEI;AACA;AACI;AACA;AAGQ;AACA;AACA;AACA;AACH;;;;;;;AAuBT;AAGY;AACA;AACA;AACA;AACH;AAMb;AAGA;AAAkB;;;AAGd;AAAW;AACX;AAAW;AACX;AACA;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAII;;;AAIA;;AAEI;;AAEQ;;AAQG;;;;;;;;AAQC;AACI;AACA;;;;AAKJ;AACI;AACA;;;AAIR;AAEQ;AACA;AACA;AACA;;;AAaI;;AACA;AACA;AACA;;AAMZ;;;AAGR;;AAIJ;AACJ;;;;AAKI;;AAGI;AAeY;;;AAGA;;;;;;AAeJ;AACA;AACA;AACA;;AAMhB;;;AAII;;AAOY;;;AAGA;AACJ;;AAGR;;;AAGA;AACI;;;;AAkDgB;AACA;AACJ;AASI;;AAUA;;AAa5B;;"}