@xanui/ui 1.0.1 → 1.1.0

package/Avatar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Avatar/index.tsx"],"sourcesContent":["\nimport 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":"4MASA,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,gBACV,CAAC,EAAA,CAAA,CAAO;AAEjB,IAAA;AACD,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":["\nimport 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":"4MASA,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

@@ -55,7 +55,7 @@
         _css.width = 8;
         _css.height = 8;
     }
-    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, props, { position: "relative", display: "inline-block", baseClass: 'badge', ref: ref }, { children: [jsxRuntime.jsx(core.Tag, Object.assign({ component: 'span', baseClass: 'badge-content', sxr: {
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, props, { position: "relative", display: "inline-block", baseClass: 'badge', ref: ref, children: [jsxRuntime.jsx(core.Tag, Object.assign({ component: 'span', baseClass: 'badge-content', sxr: {
                     position: "absolute",
                     zIndex: 1,
                     radius: 2,

package/Badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Badge/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, 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<ColorTemplateColors>;\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    delete template.hover\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}\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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"}
+{"version":3,"file":"index.js","sources":["../../src/Badge/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, 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<ColorTemplateColors>;\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    delete template.hover\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}\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

@@ -55,7 +55,7 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React
         _css.width = 8;
         _css.height = 8;
     }
-    return (jsxs(Tag, Object.assign({}, props, { position: "relative", display: "inline-block", baseClass: 'badge', ref: ref }, { children: [jsx(Tag, Object.assign({ component: 'span', baseClass: 'badge-content', sxr: {
+    return (jsxs(Tag, Object.assign({}, props, { position: "relative", display: "inline-block", baseClass: 'badge', ref: ref, children: [jsx(Tag, Object.assign({ component: 'span', baseClass: 'badge-content', sxr: {
                     position: "absolute",
                     zIndex: 1,
                     radius: 2,

package/Badge/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Badge/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, 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<ColorTemplateColors>;\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    delete template.hover\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}\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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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Badge/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, 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<ColorTemplateColors>;\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    delete template.hover\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}\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

@@ -1,4 +1,4 @@
 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const Box = React.forwardRef((_a, ref) => {
     var { children } = _a, props = tslib.__rest(_a, ["children"]);
-    return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { baseClass: 'box', ref: ref }, { children: children })));
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { baseClass: 'box', ref: ref, children: children })));
 });exports.default=Box;//# sourceMappingURL=index.js.map

package/Box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Box/index.tsx"],"sourcesContent":["\nimport 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":"4LAMA,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,gBACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC"}
+{"version":3,"file":"index.js","sources":["../../src/Box/index.tsx"],"sourcesContent":["\nimport 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":"4LAMA,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

@@ -1,4 +1,4 @@
 import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from'react';import {Tag}from'@xanui/core';const Box = React.forwardRef((_a, ref) => {
     var { children } = _a, props = __rest(_a, ["children"]);
-    return (jsx(Tag, Object.assign({}, props, { baseClass: 'box', ref: ref }, { children: children })));
+    return (jsx(Tag, Object.assign({}, props, { baseClass: 'box', ref: ref, children: children })));
 });export{Box as default};//# sourceMappingURL=index.mjs.map

package/Box/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Box/index.tsx"],"sourcesContent":["\nimport 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":"sHAMA,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,gBACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC"}
+{"version":3,"file":"index.mjs","sources":["../../src/Box/index.tsx"],"sourcesContent":["\nimport 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":"sHAMA,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

@@ -1,4 +1,4 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),index=require('../useCorner/index.js'),index$1=require('../CircleProgress/index.js');const Button = React.forwardRef((_a, ref) => {
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),index$1=require('../useCorner/index.js'),index=require('../CircleProgress/index.js');const Button = React.forwardRef((_a, ref) => {
     var _b;
     var { children } = _a, rest = tslib.__rest(_a, ["children"]);
     let [_c] = core.useInterface('Button', rest, {
@@ -31,7 +31,7 @@
     size = p.size;
     direction = p.direction || "row";
     const _d = core.useColorTemplate(color, variant), { hover: templateHover } = _d, templatecss = tslib.__rest(_d, ["hover"]);
-    const cornerCss = index.default(corner);
+    const cornerCss = index$1.default(corner);
     const sizes = {
         small: {
             height: 32,
@@ -63,7 +63,7 @@
         _size.gap = .5;
         _size.py = 1;
     }
-    return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", border: 0, cursor: "pointer", font: "button", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none" }, _size), cornerCss), templatecss), hover: Object.assign(Object.assign({}, templateHover), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_b = loading !== null && loading !== void 0 ? loading : _props.disabled) !== null && _b !== void 0 ? _b : false, ref: ref }, { children: [loading && jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: 'button-loading-container', sxr: {
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", border: 0, cursor: "pointer", font: "button", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none" }, _size), cornerCss), templatecss), hover: Object.assign(Object.assign({}, templateHover), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_b = loading !== null && loading !== void 0 ? loading : _props.disabled) !== null && _b !== void 0 ? _b : false, ref: ref, children: [loading && jsxRuntime.jsx(core.Tag, { baseClass: 'button-loading-container', sxr: {
                     position: "absolute",
                     top: 0,
                     left: 0,
@@ -73,5 +73,6 @@
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
-                } }, { children: jsxRuntime.jsx(index$1.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'default' ? `brand` : "default", hideTrack: true, size: progressSizes[size], className: 'button-loading-progress' })) })), startIcon && jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: 'button-start-icon', component: 'span', display: "inline-block" }, { children: startIcon })), children, endIcon && jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: 'button-end-icon', component: 'span', display: "inline-block" }, { children: endIcon }))] })));
+                    bgcolor: core.alpha(templatecss.color, 0.4)
+                }, children: jsxRuntime.jsx(index.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'default' ? `brand` : "default", hideTrack: true, size: progressSizes[size], className: 'button-loading-progress' })) }), startIcon && jsxRuntime.jsx(core.Tag, { baseClass: 'button-start-icon', component: 'span', display: "inline-block", children: startIcon }), children, endIcon && jsxRuntime.jsx(core.Tag, { baseClass: 'button-end-icon', component: 'span', display: "inline-block", children: endIcon })] })));
 });exports.default=Button;//# sourceMappingURL=index.js.map

package/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Button/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, ColorTemplateColors, ColorTemplateType, 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<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\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 { hover: templateHover, ...templatecss } = useColorTemplate(color, variant)\n    const cornerCss = useCorner(corner)\n\n    const sizes: any = {\n        small: {\n            height: 32,\n            px: 2,\n            gap: .5,\n            fontSize: 12\n        },\n        medium: {\n            height: 40,\n            px: 2,\n            gap: 1,\n            fontSize: 14\n        },\n        large: {\n            height: 52,\n            px: 3,\n            gap: 1,\n            fontSize: 16\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                border: 0,\n                cursor: \"pointer\",\n                font: \"button\",\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                ..._size,\n                ...cornerCss,\n                ...templatecss,\n            }}\n            hover={{\n                ...templateHover,\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                    hideTrack\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            >{startIcon}</Tag>}\n            {children}\n            {endIcon && <Tag\n                baseClass='button-end-icon'\n                component='span'\n                display=\"inline-block\"\n            >{endIcon}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Button\n"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","useCorner","_jsxs","Tag","_jsx","CircleProgress"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Button/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, ColorTemplateColors, ColorTemplateType, useBreakpointProps, useBreakpointPropsType, alpha } 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<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\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 { hover: templateHover, ...templatecss } = useColorTemplate(color, variant)\n    const cornerCss = useCorner(corner)\n\n    const sizes: any = {\n        small: {\n            height: 32,\n            px: 2,\n            gap: .5,\n            fontSize: 12\n        },\n        medium: {\n            height: 40,\n            px: 2,\n            gap: 1,\n            fontSize: 14\n        },\n        large: {\n            height: 52,\n            px: 3,\n            gap: 1,\n            fontSize: 16\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                border: 0,\n                cursor: \"pointer\",\n                font: \"button\",\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                ..._size,\n                ...cornerCss,\n                ...templatecss,\n            }}\n            hover={{\n                ...templateHover,\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                    bgcolor: alpha(templatecss.color as string, 0.4)\n                }}\n            >\n                <CircleProgress\n                    {...slotProps?.loading}\n                    color={color === 'default' ? `brand` : \"default\"}\n                    hideTrack\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            >{startIcon}</Tag>}\n            {children}\n            {endIcon && <Tag\n                baseClass='button-end-icon'\n                component='span'\n                display=\"inline-block\"\n            >{endIcon}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Button\n"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","useCorner","_jsxs","Tag","_jsx","alpha","CircleProgress"],"mappings":"iRAsBA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAwC,EAAqC,EAAE,GAAmB,KAAI;;AAA9D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA2B,EAAtB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACvF,IAAA,IAAI,OAAmGC,iBAAY,CAAM,QAAQ,EAAE,IAAI,EAAE;AACrI,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,IAAI,EAAE;KACT,CAAC,EALG,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAA,GAAA,EAAa,EAAR,MAAM,GAAAD,YAAA,CAAA,EAAA,EAA5F,CAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,OAAA,EAAA,QAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,WAAA,CAA8F,CAKjG;IAEF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,MAAM;AAAE,QAAA,EAAE,CAAC,MAAM,GAAG,MAAM;AAC9B,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,SAAS,GAAG,CAAC,CAAC,SAAS;AACvB,IAAA,OAAO,GAAG,CAAC,CAAC,OAAO;AACnB,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AACf,IAAA,OAAO,GAAG,CAAC,CAAC,OAAO;AACnB,IAAA,MAAM,GAAG,CAAC,CAAC,MAAM;AACjB,IAAA,IAAI,GAAG,CAAC,CAAC,IAAI;AACb,IAAA,SAAS,GAAG,CAAC,CAAC,SAAS,IAAI,KAAK;AAEhC,IAAA,MAAM,KAA2CC,qBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,EAA3E,EAAE,KAAK,EAAE,aAAa,EAAA,GAAA,EAAqD,EAAhD,WAAW,GAAAH,YAAA,CAAA,EAAA,EAAtC,CAAA,OAAA,CAAwC,CAAmC;AACjF,IAAA,MAAM,SAAS,GAAGI,eAAS,CAAC,MAAM,CAAC;AAEnC,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,EAAE,EAAE,CAAC;AACL,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,QAAQ,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,EAAE,EAAE,CAAC;AACL,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,QAAQ,EAAE;AACb,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,EAAE,EAAE,CAAC;AACL,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,QAAQ,EAAE;AACb;KACJ;AAED,IAAA,MAAM,aAAa,GAAQ;AACvB,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,KAAK,EAAE;KACV;IAED,IAAI,KAAK,IAAI,KAAK,CAAC,IAAW,CAAC,IAAI,EAAE,CAAC;AACtC,IAAA,IAAI,SAAS,KAAK,QAAQ,EAAE;QACxB,OAAO,KAAK,CAAC,MAAM;AACnB,QAAA,KAAK,CAAC,GAAG,GAAG,EAAE;AACd,QAAA,KAAK,CAAC,EAAE,GAAG,CAAC;IAChB;IAEA,QACIC,eAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAC,QAAQ,EAAA,EACd,MAAM,EAAA,EACV,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EACC,UAAU,EAAE,GAAG,EACf,UAAU,EAAE,QAAQ,EACpB,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,WAAW,EAC1B,aAAa,EAAE,SAAS,EACxB,UAAU,EAAE,QAAQ,EACpB,cAAc,EAAE,QAAQ,EACxB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,MAAM,EAAA,EACf,KAAK,CAAA,EACL,SAAS,CAAA,EACT,WAAW,CAAA,EAElB,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACE,aAAa,CAAA,GACZ,CAAC,MAAc,KAAA,IAAA,IAAd,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAU,KAAK,KAAI,EAAE,EAAC,EAErC,QAAQ,EAAE,CAAA,EAAA,GAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAP,OAAO,GAAI,MAAM,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK,EAC7C,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAEP,OAAO,IAAIC,cAAA,CAACD,QAAG,EAAA,EACZ,SAAS,EAAC,0BAA0B,EACpC,GAAG,EAAE;AACD,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,KAAK,EAAE,CAAC;AACR,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,cAAc,EAAE,QAAQ;AACxB,oBAAA,UAAU,EAAE,QAAQ;oBACpB,OAAO,EAAEE,UAAK,CAAC,WAAW,CAAC,KAAe,EAAE,GAAG;AAClD,iBAAA,EAAA,QAAA,EAEDD,eAACE,aAAc,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACP,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,OAAO,IACtB,KAAK,EAAE,KAAK,KAAK,SAAS,GAAG,CAAA,KAAA,CAAO,GAAG,SAAS,EAChD,SAAS,EAAA,IAAA,EACT,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,EACzB,SAAS,EAAC,yBAAyB,EAAA,CAAA,CACrC,GACA,EACL,SAAS,IAAIF,cAAA,CAACD,QAAG,EAAA,EACd,SAAS,EAAC,mBAAmB,EAC7B,SAAS,EAAC,MAAM,EAChB,OAAO,EAAC,cAAc,EAAA,QAAA,EACxB,SAAS,EAAA,CAAO,EACjB,QAAQ,EACR,OAAO,IAAIC,cAAA,CAACD,QAAG,EAAA,EACZ,SAAS,EAAC,iBAAiB,EAC3B,SAAS,EAAC,MAAM,EAChB,OAAO,EAAC,cAAc,EAAA,QAAA,EACxB,OAAO,EAAA,CAAO,CAAA,EAAA,CAAA,CACd;AAEd,CAAC"}

package/Button/index.mjs

@@ -1,4 +1,4 @@
-import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React from'react';import {useInterface,useBreakpointProps,useColorTemplate,Tag}from'@xanui/core';import useCorner from'../useCorner/index.mjs';import CircleProgress from'../CircleProgress/index.mjs';const Button = React.forwardRef((_a, ref) => {
+import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React from'react';import {useInterface,useBreakpointProps,useColorTemplate,Tag,alpha}from'@xanui/core';import useCorner from'../useCorner/index.mjs';import CircleProgress from'../CircleProgress/index.mjs';const Button = React.forwardRef((_a, ref) => {
     var _b;
     var { children } = _a, rest = __rest(_a, ["children"]);
     let [_c] = useInterface('Button', rest, {
@@ -63,7 +63,7 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React
         _size.gap = .5;
         _size.py = 1;
     }
-    return (jsxs(Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", border: 0, cursor: "pointer", font: "button", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none" }, _size), cornerCss), templatecss), hover: Object.assign(Object.assign({}, templateHover), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_b = loading !== null && loading !== void 0 ? loading : _props.disabled) !== null && _b !== void 0 ? _b : false, ref: ref }, { children: [loading && jsx(Tag, Object.assign({ baseClass: 'button-loading-container', sxr: {
+    return (jsxs(Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", border: 0, cursor: "pointer", font: "button", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none" }, _size), cornerCss), templatecss), hover: Object.assign(Object.assign({}, templateHover), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_b = loading !== null && loading !== void 0 ? loading : _props.disabled) !== null && _b !== void 0 ? _b : false, ref: ref, children: [loading && jsx(Tag, { baseClass: 'button-loading-container', sxr: {
                     position: "absolute",
                     top: 0,
                     left: 0,
@@ -73,5 +73,6 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
-                } }, { children: jsx(CircleProgress, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'default' ? `brand` : "default", hideTrack: true, size: progressSizes[size], className: 'button-loading-progress' })) })), startIcon && jsx(Tag, Object.assign({ baseClass: 'button-start-icon', component: 'span', display: "inline-block" }, { children: startIcon })), children, endIcon && jsx(Tag, Object.assign({ baseClass: 'button-end-icon', component: 'span', display: "inline-block" }, { children: endIcon }))] })));
+                    bgcolor: alpha(templatecss.color, 0.4)
+                }, children: jsx(CircleProgress, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'default' ? `brand` : "default", hideTrack: true, size: progressSizes[size], className: 'button-loading-progress' })) }), startIcon && jsx(Tag, { baseClass: 'button-start-icon', component: 'span', display: "inline-block", children: startIcon }), children, endIcon && jsx(Tag, { baseClass: 'button-end-icon', component: 'span', display: "inline-block", children: endIcon })] })));
 });export{Button as default};//# sourceMappingURL=index.mjs.map

package/Button/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Button/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, ColorTemplateColors, ColorTemplateType, 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<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\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 { hover: templateHover, ...templatecss } = useColorTemplate(color, variant)\n    const cornerCss = useCorner(corner)\n\n    const sizes: any = {\n        small: {\n            height: 32,\n            px: 2,\n            gap: .5,\n            fontSize: 12\n        },\n        medium: {\n            height: 40,\n            px: 2,\n            gap: 1,\n            fontSize: 14\n        },\n        large: {\n            height: 52,\n            px: 3,\n            gap: 1,\n            fontSize: 16\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                border: 0,\n                cursor: \"pointer\",\n                font: \"button\",\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                ..._size,\n                ...cornerCss,\n                ...templatecss,\n            }}\n            hover={{\n                ...templateHover,\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                    hideTrack\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            >{startIcon}</Tag>}\n            {children}\n            {endIcon && <Tag\n                baseClass='button-end-icon'\n                component='span'\n                display=\"inline-block\"\n            >{endIcon}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Button\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Button/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, ColorTemplateColors, ColorTemplateType, useBreakpointProps, useBreakpointPropsType, alpha } 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<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\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 { hover: templateHover, ...templatecss } = useColorTemplate(color, variant)\n    const cornerCss = useCorner(corner)\n\n    const sizes: any = {\n        small: {\n            height: 32,\n            px: 2,\n            gap: .5,\n            fontSize: 12\n        },\n        medium: {\n            height: 40,\n            px: 2,\n            gap: 1,\n            fontSize: 14\n        },\n        large: {\n            height: 52,\n            px: 3,\n            gap: 1,\n            fontSize: 16\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                border: 0,\n                cursor: \"pointer\",\n                font: \"button\",\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                ..._size,\n                ...cornerCss,\n                ...templatecss,\n            }}\n            hover={{\n                ...templateHover,\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                    bgcolor: alpha(templatecss.color as string, 0.4)\n                }}\n            >\n                <CircleProgress\n                    {...slotProps?.loading}\n                    color={color === 'default' ? `brand` : \"default\"}\n                    hideTrack\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            >{startIcon}</Tag>}\n            {children}\n            {endIcon && <Tag\n                baseClass='button-end-icon'\n                component='span'\n                display=\"inline-block\"\n            >{endIcon}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Button\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/ButtonGroup/index.js

@@ -35,7 +35,7 @@
                 borderBottomLeftRadius: 0,
                 borderLeft: 0
             }
-        }, baseClass: 'button-group', ref: ref }, { children: React.Children.map(children, (child) => {
+        }, baseClass: 'button-group', ref: ref, children: React.Children.map(children, (child) => {
             return React.cloneElement(child, {
                 flex: 1,
                 color,

package/ButtonGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, ColorTemplateType, useColorTemplate, 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<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\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    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const template = useColorTemplate(color, \"outline\")\n\n    const sizes: any = {\n        small: {\n            height: 32,\n        },\n        medium: {\n            height: 40,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                overflow: \"hidden\",\n                radius: 1,\n                '& button:not(:last-of-type)': {\n                    borderTopRightRadius: 0,\n                    borderBottomRightRadius: 0,\n                    borderRight: 1,\n                    borderColor: template.borderColor\n                },\n                '& button:not(:first-of-type)': {\n                    borderTopLeftRadius: 0,\n                    borderBottomLeftRadius: 0,\n                    borderLeft: 0\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: 1,\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","useColorTemplate","_jsx","Tag","Children","cloneElement"],"mappings":"4LAYA,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;AACT,KAAA,CAAC,EAFG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAErC;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;IAEf,MAAM,QAAQ,GAAGC,qBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC;AAEnD,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,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,MAAM,EAAE,CAAC;AACT,YAAA,6BAA6B,EAAE;AAC3B,gBAAA,oBAAoB,EAAE,CAAC;AACvB,gBAAA,uBAAuB,EAAE,CAAC;AAC1B,gBAAA,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,QAAQ,CAAC;AACzB,aAAA;AACD,YAAA,8BAA8B,EAAE;AAC5B,gBAAA,mBAAmB,EAAE,CAAC;AACtB,gBAAA,sBAAsB,EAAE,CAAC;AACzB,gBAAA,UAAU,EAAE;AACf;AACJ,SAAA,EACD,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EAEPC,cAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YACnC,OAAOC,kBAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,IAAI,EAAE,CAAC;gBACP,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE;AACX,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC"}
+{"version":3,"file":"index.js","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, ColorTemplateType, useColorTemplate, 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<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\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    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const template = useColorTemplate(color, \"outline\")\n\n    const sizes: any = {\n        small: {\n            height: 32,\n        },\n        medium: {\n            height: 40,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                overflow: \"hidden\",\n                radius: 1,\n                '& button:not(:last-of-type)': {\n                    borderTopRightRadius: 0,\n                    borderBottomRightRadius: 0,\n                    borderRight: 1,\n                    borderColor: template.borderColor\n                },\n                '& button:not(:first-of-type)': {\n                    borderTopLeftRadius: 0,\n                    borderBottomLeftRadius: 0,\n                    borderLeft: 0\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: 1,\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","useColorTemplate","_jsx","Tag","Children","cloneElement"],"mappings":"4LAYA,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;AACT,KAAA,CAAC,EAFG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAErC;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;IAEf,MAAM,QAAQ,GAAGC,qBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC;AAEnD,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,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,MAAM,EAAE,CAAC;AACT,YAAA,6BAA6B,EAAE;AAC3B,gBAAA,oBAAoB,EAAE,CAAC;AACvB,gBAAA,uBAAuB,EAAE,CAAC;AAC1B,gBAAA,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,QAAQ,CAAC;AACzB,aAAA;AACD,YAAA,8BAA8B,EAAE;AAC5B,gBAAA,mBAAmB,EAAE,CAAC;AACtB,gBAAA,sBAAsB,EAAE,CAAC;AACzB,gBAAA,UAAU,EAAE;AACf;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,CAAC;gBACP,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE;AACX,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC"}

package/ButtonGroup/index.mjs

@@ -35,7 +35,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React,{Chi
                 borderBottomLeftRadius: 0,
                 borderLeft: 0
             }
-        }, baseClass: 'button-group', ref: ref }, { children: Children.map(children, (child) => {
+        }, baseClass: 'button-group', ref: ref, children: Children.map(children, (child) => {
             return cloneElement(child, {
                 flex: 1,
                 color,

package/ButtonGroup/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, ColorTemplateType, useColorTemplate, 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<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\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    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const template = useColorTemplate(color, \"outline\")\n\n    const sizes: any = {\n        small: {\n            height: 32,\n        },\n        medium: {\n            height: 40,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                overflow: \"hidden\",\n                radius: 1,\n                '& button:not(:last-of-type)': {\n                    borderTopRightRadius: 0,\n                    borderBottomRightRadius: 0,\n                    borderRight: 1,\n                    borderColor: template.borderColor\n                },\n                '& button:not(:first-of-type)': {\n                    borderTopLeftRadius: 0,\n                    borderBottomLeftRadius: 0,\n                    borderLeft: 0\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: 1,\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":"8LAYA,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;AACT,KAAA,CAAC,EAFG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAErC;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;IAEf,MAAM,QAAQ,GAAG,gBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC;AAEnD,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,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,MAAM,EAAE,CAAC;AACT,YAAA,6BAA6B,EAAE;AAC3B,gBAAA,oBAAoB,EAAE,CAAC;AACvB,gBAAA,uBAAuB,EAAE,CAAC;AAC1B,gBAAA,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,QAAQ,CAAC;AACzB,aAAA;AACD,YAAA,8BAA8B,EAAE;AAC5B,gBAAA,mBAAmB,EAAE,CAAC;AACtB,gBAAA,sBAAsB,EAAE,CAAC;AACzB,gBAAA,UAAU,EAAE;AACf;AACJ,SAAA,EACD,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EAEP,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YACnC,OAAO,YAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,IAAI,EAAE,CAAC;gBACP,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE;AACX,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC"}
+{"version":3,"file":"index.mjs","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, ColorTemplateType, useColorTemplate, 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<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\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    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const template = useColorTemplate(color, \"outline\")\n\n    const sizes: any = {\n        small: {\n            height: 32,\n        },\n        medium: {\n            height: 40,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                overflow: \"hidden\",\n                radius: 1,\n                '& button:not(:last-of-type)': {\n                    borderTopRightRadius: 0,\n                    borderBottomRightRadius: 0,\n                    borderRight: 1,\n                    borderColor: template.borderColor\n                },\n                '& button:not(:first-of-type)': {\n                    borderTopLeftRadius: 0,\n                    borderBottomLeftRadius: 0,\n                    borderLeft: 0\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: 1,\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":"8LAYA,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;AACT,KAAA,CAAC,EAFG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAErC;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;IAEf,MAAM,QAAQ,GAAG,gBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC;AAEnD,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,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,MAAM,EAAE,CAAC;AACT,YAAA,6BAA6B,EAAE;AAC3B,gBAAA,oBAAoB,EAAE,CAAC;AACvB,gBAAA,uBAAuB,EAAE,CAAC;AAC1B,gBAAA,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,QAAQ,CAAC;AACzB,aAAA;AACD,YAAA,8BAA8B,EAAE;AAC5B,gBAAA,mBAAmB,EAAE,CAAC;AACtB,gBAAA,sBAAsB,EAAE,CAAC;AACzB,gBAAA,UAAU,EAAE;AACf;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,CAAC;gBACP,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE;AACX,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC"}

package/Calendar/index.js

@@ -3,24 +3,24 @@
     const selectedRef = React.useRef(null);
     for (let y = 1900; y < today.getFullYear() + 40; y++) {
         const selected = year == y;
-        years.push(jsxRuntime.jsx(index.default, Object.assign({ sx: {
+        years.push(jsxRuntime.jsx(index.default, { sx: {
                 width: (boxWidth - 12) / 3,
                 alignItems: "center",
                 justifyContent: "center",
                 p: .1
-            }, className: 'calender-year-item' }, { children: jsxRuntime.jsx(index$4.default, Object.assign({ color: selected ? color : "default", className: 'calender-year-button', size: 'small', corner: "circle", ref: selected ? selectedRef : null, onClick: () => onClick(y), variant: selected ? "fill" : "text" }, { children: y })) }), y));
+            }, className: 'calender-year-item', children: jsxRuntime.jsx(index$4.default, { color: selected ? color : "default", className: 'calender-year-button', size: 'small', corner: "circle", ref: selected ? selectedRef : null, onClick: () => onClick(y), variant: selected ? "fill" : "text", children: y }) }, y));
     }
     React.useEffect(() => {
         if (selectedRef === null || selectedRef === void 0 ? void 0 : selectedRef.current) {
             selectedRef === null || selectedRef === void 0 ? void 0 : selectedRef.current.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
         }
     }, []);
-    return (jsxRuntime.jsx(index.default, Object.assign({ sx: {
+    return (jsxRuntime.jsx(index.default, { sx: {
             flexWrap: "wrap",
             flexDirection: "row",
             overflow: "hidden",
             overflowY: "auto"
-        }, className: 'calender-years' }, { children: years })));
+        }, className: 'calender-years', children: years }));
 };
 const Calendar = (_a) => {
     var { value } = _a, rest = tslib.__rest(_a, ["value"]);
@@ -71,23 +71,23 @@ const Calendar = (_a) => {
                             color: color
                         };
                     }
-                    row.push(jsxRuntime.jsx(index.default, Object.assign({ sx: {
+                    row.push(jsxRuntime.jsx(index.default, { sx: {
                             width: btnWidth,
                             height: btnWidth,
                             alignItems: "center",
                             justifyContent: "center"
-                        }, className: 'calender-day-item' }, { children: jsxRuntime.jsx(index$3.default, Object.assign({ className: 'calender-day-button', variant: isSelected ? "fill" : "text", color: isToday ? color : "default" }, css, { "data-value": date, onClick: (e) => {
+                        }, className: 'calender-day-item', children: jsxRuntime.jsx(index$3.default, Object.assign({ className: 'calender-day-button', variant: isSelected ? "fill" : "text", color: isToday ? color : "default" }, css, { "data-value": date, onClick: (e) => {
                                 let d = e.target.getAttribute("data-value");
                                 if (!d)
                                     return;
                                 let selectedDate = new Date(year, month, parseInt(d));
                                 onChange ? onChange(selectedDate) : setSelectedDate(selectedDate);
                                 onButtonClick && onButtonClick("day", selectedDate);
-                            } }, { children: date })) }), date + j + i));
+                            }, children: date })) }, date + j + i));
                     date++;
                 }
             }
-            rows.push(jsxRuntime.jsx(index.default, Object.assign({ flexRow: true, className: 'calender-day-row' }, { children: row }), "row" + i));
+            rows.push(jsxRuntime.jsx(index.default, { flexRow: true, className: 'calender-day-row', children: row }, "row" + i));
         }
         return rows;
     };
@@ -96,21 +96,21 @@ const Calendar = (_a) => {
         const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
         for (let m = 0; m < monthNames.length; m++) {
             const selected = currentDate.getMonth() === m;
-            months.push(jsxRuntime.jsx(index.default, Object.assign({ width: (boxWidth - 12) / 2, alignItems: "center", justifyContent: "center", p: .1, className: 'calender-months-item' }, { children: jsxRuntime.jsx(index$4.default, Object.assign({ color: selected ? color : "default", className: 'calender-month-button', size: 'small', corner: "circle", variant: selected ? "fill" : 'text', onClick: () => {
+            months.push(jsxRuntime.jsx(index.default, { width: (boxWidth - 12) / 2, alignItems: "center", justifyContent: "center", p: .1, className: 'calender-months-item', children: jsxRuntime.jsx(index$4.default, { color: selected ? color : "default", className: 'calender-month-button', size: 'small', corner: "circle", variant: selected ? "fill" : 'text', onClick: () => {
                         const v = new Date(currentDate.getFullYear(), m);
                         setCurrentDate(v);
                         setViewMode("day");
                         onButtonClick && onButtonClick("month", v);
                     }, sx: {
                         color: selected ? "brand.text" : "text.primary"
-                    } }, { children: monthNames[m] })) }), m));
+                    }, children: monthNames[m] }) }, m));
         }
-        return (jsxRuntime.jsx(index.default, Object.assign({ className: 'calender-months', sx: {
+        return (jsxRuntime.jsx(index.default, { className: 'calender-months', sx: {
                 flexWrap: "wrap",
                 overflow: "hidden",
                 overflowY: "auto",
                 flexDirection: "row"
-            } }, { children: months })));
+            }, children: months }));
     };
     let view = null;
     switch (viewMode) {
@@ -126,15 +126,15 @@ const Calendar = (_a) => {
             view = showMonth();
             break;
         default:
-            view = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index.default, Object.assign({ flexRow: true, className: 'calender-week-container' }, { children: ['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, idx) => (jsxRuntime.jsx(index.default, Object.assign({ width: btnWidth, height: btnWidth, alignItems: "center", justifyContent: "center" }, { children: jsxRuntime.jsx(index$1.default, Object.assign({ fontWeight: 500, fontSize: "button", color: "text.secondary" }, { children: day })) }), day + idx))) })), showCalendar()] }));
+            view = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index.default, { flexRow: true, className: 'calender-week-container', children: ['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, idx) => (jsxRuntime.jsx(index.default, { width: btnWidth, height: btnWidth, alignItems: "center", justifyContent: "center", children: jsxRuntime.jsx(index$1.default, { fontWeight: 500, fontSize: "button", color: "text.secondary", children: day }) }, day + idx))) }), showCalendar()] }));
             break;
     }
-    return (jsxRuntime.jsx(index$2.default, Object.assign({ className: 'calender-root', maxHeight: 308, width: 250, radius: 1, bgcolor: "background.primary", startContent: jsxRuntime.jsxs(index.default, Object.assign({ className: 'calender-header', flexRow: true, alignItems: "center", justifyContent: "space-between", p: 1 }, { children: [jsxRuntime.jsx(index$1.default, Object.assign({ fontWeight: "bold", cursor: "pointer", onClick: () => setViewMode(viewMode !== 'day' ? "day" : "year"), flex: 1 }, { children: currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' }) })), jsxRuntime.jsx(index$3.default, Object.assign({ color: "default", variant: 'text', size: 28, onClick: () => {
+    return (jsxRuntime.jsx(index$2.default, { className: 'calender-root', maxHeight: 308, width: 250, radius: 1, bgcolor: "background.primary", startContent: jsxRuntime.jsxs(index.default, { className: 'calender-header', flexRow: true, alignItems: "center", justifyContent: "space-between", p: 1, children: [jsxRuntime.jsx(index$1.default, { fontWeight: "bold", cursor: "pointer", onClick: () => setViewMode(viewMode !== 'day' ? "day" : "year"), flex: 1, children: currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' }) }), jsxRuntime.jsx(index$3.default, { color: "default", variant: 'text', size: 28, onClick: () => {
                         setCurrentDate(new Date());
                         onChange ? onChange(new Date()) : setSelectedDate(new Date());
-                    } }, { children: jsxRuntime.jsx(ResetIcon, { fontSize: 20 }) })), jsxRuntime.jsx(index$3.default, Object.assign({ color: "default", variant: 'text', size: 28, onClick: () => {
+                    }, children: jsxRuntime.jsx(ResetIcon, { fontSize: 20 }) }), jsxRuntime.jsx(index$3.default, { color: "default", variant: 'text', size: 28, onClick: () => {
                         setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
-                    } }, { children: jsxRuntime.jsx(IconKeyboardArrowLeft, {}) })), jsxRuntime.jsx(index$3.default, Object.assign({ color: "default", variant: 'text', size: 28, onClick: () => {
+                    }, children: jsxRuntime.jsx(IconKeyboardArrowLeft, {}) }), jsxRuntime.jsx(index$3.default, { color: "default", variant: 'text', size: 28, onClick: () => {
                         setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
-                    } }, { children: jsxRuntime.jsx(IconKeyboardArrowRight, {}) }))] })) }, { children: jsxRuntime.jsx(index.default, Object.assign({ height: "100%", p: .5, className: 'calender-container' }, { children: view })) })));
+                    }, children: jsxRuntime.jsx(IconKeyboardArrowRight, {}) })] }), children: jsxRuntime.jsx(index.default, { height: "100%", p: .5, className: 'calender-container', children: view }) }));
 };exports.default=Calendar;//# sourceMappingURL=index.js.map