@xanui/ui 1.1.37 → 1.1.40

package/Badge/index.cjs.map

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

package/Badge/index.js

@@ -1,13 +1,11 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
+import { __rest } from 'tslib';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+import { useInterface, useBreakpointProps, useColorTemplate, Tag, Transition } from '@xanui/core';
 
 const Badge = React.forwardRef((_a, ref) => {
-    var { children, content, refs } = _a, rest = tslib.__rest(_a, ["children", "content", "refs"]);
-    let [_b] = core.useInterface("Badge", rest, {}), { color, placement, visible, slotProps, disableTransition, disableSpace } = _b, props = tslib.__rest(_b, ["color", "placement", "visible", "slotProps", "disableTransition", "disableSpace"]);
+    var { children, content, refs } = _a, rest = __rest(_a, ["children", "content", "refs"]);
+    let [_b] = useInterface("Badge", rest, {}), { color, placement, visible, slotProps, disableTransition, disableSpace } = _b, props = __rest(_b, ["color", "placement", "visible", "slotProps", "disableTransition", "disableSpace"]);
     color !== null && color !== void 0 ? color : (color = "danger");
     visible !== null && visible !== void 0 ? visible : (visible = true);
     placement !== null && placement !== void 0 ? placement : (placement = "right-top");
@@ -19,14 +17,14 @@ const Badge = React.forwardRef((_a, ref) => {
     _p.placement = placement;
     _p.visible = visible;
     _p.disableTransition = disableTransition !== null && disableTransition !== void 0 ? disableTransition : false;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     content = p.content;
     color = p.color;
     placement = p.placement;
     visible = p.visible;
     disableTransition = p.disableTransition;
     const isReactElement = React.isValidElement(content);
-    let template = core.useColorTemplate(color, "fill");
+    let template = useColorTemplate(color, "fill");
     let _css = {
         position: "absolute",
     };
@@ -90,8 +88,8 @@ const Badge = React.forwardRef((_a, ref) => {
     else {
         template = {};
     }
-    const _badge = jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { ref: refs === null || refs === void 0 ? void 0 : refs.content, component: 'span', baseClass: 'badge-content', sxr: Object.assign(Object.assign({ position: "absolute", zIndex: 1, display: 'flex', justifyContent: "center", alignItems: 'center' }, template.primary), _css), children: content }));
-    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, props, { position: "relative", display: "inline-block", baseClass: 'badge', ref: ref, children: [!disableTransition ? (jsxRuntime.jsx(core.Transition, Object.assign({ open: content !== undefined && visible }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { variant: () => {
+    const _badge = jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { ref: refs === null || refs === void 0 ? void 0 : refs.content, component: 'span', baseClass: 'badge-content', sxr: Object.assign(Object.assign({ position: "absolute", zIndex: 1, display: 'flex', justifyContent: "center", alignItems: 'center' }, template.primary), _css), children: content }));
+    return (jsxs(Tag, Object.assign({}, props, { position: "relative", display: "inline-block", baseClass: 'badge', ref: ref, children: [!disableTransition ? (jsx(Transition, Object.assign({ open: content !== undefined && visible }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { variant: () => {
                     return {
                         from: {
                             opacity: 0,
@@ -102,8 +100,8 @@ const Badge = React.forwardRef((_a, ref) => {
                             transform: `scale(1) ${translate}`.trim(),
                         },
                     };
-                }, ref: refs === null || refs === void 0 ? void 0 : refs.transition, children: _badge }))) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: _badge }), children] })));
+                }, ref: refs === null || refs === void 0 ? void 0 : refs.transition, children: _badge }))) : jsx(Fragment, { children: _badge }), children] })));
 });
 
-module.exports = Badge;
+export { Badge as default };
 //# sourceMappingURL=index.js.map

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

package/Box/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var 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 })));
+});
+
+module.exports = Box;
+//# sourceMappingURL=index.cjs.map

package/Box/index.cjs.map

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

package/Box/index.js

@@ -1,14 +1,12 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
+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 = tslib.__rest(_a, ["children"]);
-    return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { baseClass: 'box', ref: ref, children: children })));
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (jsx(Tag, Object.assign({}, props, { baseClass: 'box', ref: ref, children: children })));
 });
 
-module.exports = Box;
+export { Box as default };
 //# sourceMappingURL=index.js.map

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

package/Button/index.cjs

@@ -0,0 +1,94 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+var index$1 = require('../useCorner/index.cjs');
+var index$2 = require('../CircleProgress/index.cjs');
+var index = require('../Skeleton/index.cjs');
+
+const Button = React.forwardRef((_a, ref) => {
+    var _b, _c;
+    var { children, skeleton } = _a, rest = tslib.__rest(_a, ["children", "skeleton"]);
+    let [_d] = core.useInterface('Button', rest, {
+        variant: "fill",
+        color: "brand",
+        corner: "rounded",
+        size: "medium"
+    }), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps } = _d, _props = tslib.__rest(_d, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps"]);
+    const _p = {};
+    if (startIcon)
+        _p.startIcon = startIcon;
+    if (endIcon)
+        _p.endIcon = endIcon;
+    if (color)
+        _p.color = color;
+    if (variant)
+        _p.variant = variant;
+    if (corner)
+        _p.corner = corner;
+    if (size)
+        _p.size = size;
+    if (direction)
+        _p.direction = direction;
+    const p = core.useBreakpointProps(_p);
+    startIcon = p.startIcon;
+    endIcon = p.endIcon;
+    color = p.color;
+    variant = p.variant;
+    corner = p.corner;
+    size = p.size;
+    direction = p.direction || "row";
+    const template = core.useColorTemplate(color, variant);
+    const cornerCss = index$1(corner);
+    const sizes = {
+        small: {
+            height: 38,
+            px: (startIcon || endIcon) ? 1 : 1.5,
+            gap: .5,
+            fontSize: 'button'
+        },
+        medium: {
+            height: 44,
+            px: (startIcon || endIcon) ? 1.5 : 2,
+            gap: 1,
+            fontSize: 'button'
+        },
+        large: {
+            height: 52,
+            px: (startIcon || endIcon) ? 2 : 3,
+            gap: 1,
+            fontSize: "text"
+        }
+    };
+    const progressSizes = {
+        small: 20,
+        medium: 25,
+        large: 30
+    };
+    let _size = (sizes[size] || {});
+    if (direction === 'column') {
+        delete _size.height;
+        _size.gap = .5;
+        _size.py = 1;
+    }
+    if (skeleton) {
+        return jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton, { height: _size.height, animation: "wave", sx: Object.assign(Object.assign(Object.assign({}, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton) === null || _b === void 0 ? void 0 : _b.sx), _size), cornerCss) }));
+    }
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", cursor: "pointer", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none", fontWeight: 500 }, _size), cornerCss), template.primary), hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_c = loading !== null && loading !== void 0 ? loading : _props.disabled) !== null && _c !== void 0 ? _c : false, ref: ref, children: [loading && jsxRuntime.jsx(core.Tag, { baseClass: 'button-loading-container', sxr: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    zIndex: 1,
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                }, children: jsxRuntime.jsx(index$2, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'default' ? `brand` : "default", size: progressSizes[size], className: 'button-loading-progress' })) }), startIcon && jsxRuntime.jsx(core.Tag, { baseClass: 'button-start-icon', component: 'span', display: "inline-block", flexShrink: 0, children: startIcon }), children, endIcon && jsxRuntime.jsx(core.Tag, { baseClass: 'button-end-icon', component: 'span', display: "inline-block", flexShrink: 0, children: endIcon })] })));
+});
+
+module.exports = Button;
+//# sourceMappingURL=index.cjs.map

package/Button/index.cjs.map

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

package/Button/index.js

@@ -1,23 +1,21 @@
 "use client";
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
-var index$1 = require('../useCorner/index.js');
-var index$2 = require('../CircleProgress/index.js');
-var index = require('../Skeleton/index.js');
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/core';
+import useCorner from '../useCorner/index.js';
+import CircleProgress from '../CircleProgress/index.js';
+import Skeleton from '../Skeleton/index.js';
 
 const Button = React.forwardRef((_a, ref) => {
     var _b, _c;
-    var { children, skeleton } = _a, rest = tslib.__rest(_a, ["children", "skeleton"]);
-    let [_d] = core.useInterface('Button', rest, {
+    var { children, skeleton } = _a, rest = __rest(_a, ["children", "skeleton"]);
+    let [_d] = useInterface('Button', rest, {
         variant: "fill",
         color: "brand",
         corner: "rounded",
         size: "medium"
-    }), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps } = _d, _props = tslib.__rest(_d, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps"]);
+    }), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps } = _d, _props = __rest(_d, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps"]);
     const _p = {};
     if (startIcon)
         _p.startIcon = startIcon;
@@ -33,7 +31,7 @@ const Button = React.forwardRef((_a, ref) => {
         _p.size = size;
     if (direction)
         _p.direction = direction;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     startIcon = p.startIcon;
     endIcon = p.endIcon;
     color = p.color;
@@ -41,8 +39,8 @@ const Button = React.forwardRef((_a, ref) => {
     corner = p.corner;
     size = p.size;
     direction = p.direction || "row";
-    const template = core.useColorTemplate(color, variant);
-    const cornerCss = index$1(corner);
+    const template = useColorTemplate(color, variant);
+    const cornerCss = useCorner(corner);
     const sizes = {
         small: {
             height: 38,
@@ -75,9 +73,9 @@ const Button = React.forwardRef((_a, ref) => {
         _size.py = 1;
     }
     if (skeleton) {
-        return jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton, { height: _size.height, animation: "wave", sx: Object.assign(Object.assign(Object.assign({}, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton) === null || _b === void 0 ? void 0 : _b.sx), _size), cornerCss) }));
+        return jsx(Skeleton, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton, { height: _size.height, animation: "wave", sx: Object.assign(Object.assign(Object.assign({}, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton) === null || _b === void 0 ? void 0 : _b.sx), _size), cornerCss) }));
     }
-    return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", cursor: "pointer", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none", fontWeight: 500 }, _size), cornerCss), template.primary), hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_c = loading !== null && loading !== void 0 ? loading : _props.disabled) !== null && _c !== void 0 ? _c : false, ref: ref, children: [loading && jsxRuntime.jsx(core.Tag, { 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", cursor: "pointer", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none", fontWeight: 500 }, _size), cornerCss), template.primary), hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_c = loading !== null && loading !== void 0 ? loading : _props.disabled) !== null && _c !== void 0 ? _c : false, ref: ref, children: [loading && jsx(Tag, { baseClass: 'button-loading-container', sxr: {
                     position: "absolute",
                     top: 0,
                     left: 0,
@@ -87,8 +85,8 @@ const Button = React.forwardRef((_a, ref) => {
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
-                }, children: jsxRuntime.jsx(index$2, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'default' ? `brand` : "default", size: progressSizes[size], className: 'button-loading-progress' })) }), startIcon && jsxRuntime.jsx(core.Tag, { baseClass: 'button-start-icon', component: 'span', display: "inline-block", flexShrink: 0, children: startIcon }), children, endIcon && jsxRuntime.jsx(core.Tag, { baseClass: 'button-end-icon', component: 'span', display: "inline-block", flexShrink: 0, children: endIcon })] })));
+                }, children: jsx(CircleProgress, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'default' ? `brand` : "default", size: progressSizes[size], className: 'button-loading-progress' })) }), startIcon && jsx(Tag, { baseClass: 'button-start-icon', component: 'span', display: "inline-block", flexShrink: 0, children: startIcon }), children, endIcon && jsx(Tag, { baseClass: 'button-end-icon', component: 'span', display: "inline-block", flexShrink: 0, children: endIcon })] })));
 });
 
-module.exports = Button;
+export { Button as default };
 //# sourceMappingURL=index.js.map

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

package/ButtonGroup/index.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const ButtonGroup = React.forwardRef((_a, ref) => {
+    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    let [_b] = core.useInterface("ButtonGroup", rest, {
+        size: "medium",
+        variant: "outline",
+        color: "default"
+    }), { color, variant, size } = _b, props = tslib.__rest(_b, ["color", "variant", "size"]);
+    const _p = {};
+    if (color)
+        _p.color = color;
+    const p = core.useBreakpointProps(_p);
+    color = p.color;
+    const sizes = {
+        small: {
+            height: 40,
+        },
+        medium: {
+            height: 46,
+        },
+        large: {
+            height: 52,
+        }
+    };
+    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`;
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, sizes[size], { sxr: {
+            display: "inline-flex",
+            flexWrap: "nowrap",
+            overflow: "hidden",
+            radius: 1,
+            border: "1px solid",
+            borderColor: borderColor,
+            '& button, & button:hover': {
+                borderRight: "1px solid",
+                borderColor: borderColor
+            },
+            "& button:last-child, & button:last-child:hover": {
+                borderRight: "none"
+            }
+        }, baseClass: 'button-group', ref: ref, children: React.Children.map(children, (child) => {
+            return React.cloneElement(child, {
+                flex: "0 0 auto",
+                color,
+                variant,
+                size,
+                corner: "squar",
+            });
+        }) })));
+});
+
+module.exports = ButtonGroup;
+//# sourceMappingURL=index.cjs.map

package/ButtonGroup/index.cjs.map

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

package/ButtonGroup/index.js

@@ -1,21 +1,19 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React, { Children, cloneElement } from 'react';
+import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
 
 const ButtonGroup = React.forwardRef((_a, ref) => {
-    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
-    let [_b] = core.useInterface("ButtonGroup", rest, {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    let [_b] = useInterface("ButtonGroup", rest, {
         size: "medium",
         variant: "outline",
         color: "default"
-    }), { color, variant, size } = _b, props = tslib.__rest(_b, ["color", "variant", "size"]);
+    }), { color, variant, size } = _b, props = __rest(_b, ["color", "variant", "size"]);
     const _p = {};
     if (color)
         _p.color = color;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     color = p.color;
     const sizes = {
         small: {
@@ -29,7 +27,7 @@ const ButtonGroup = React.forwardRef((_a, ref) => {
         }
     };
     let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`;
-    return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, sizes[size], { sxr: {
+    return (jsx(Tag, Object.assign({}, props, sizes[size], { sxr: {
             display: "inline-flex",
             flexWrap: "nowrap",
             overflow: "hidden",
@@ -43,8 +41,8 @@ const ButtonGroup = React.forwardRef((_a, ref) => {
             "& button:last-child, & button:last-child:hover": {
                 borderRight: "none"
             }
-        }, baseClass: 'button-group', ref: ref, children: React.Children.map(children, (child) => {
-            return React.cloneElement(child, {
+        }, baseClass: 'button-group', ref: ref, children: Children.map(children, (child) => {
+            return cloneElement(child, {
                 flex: "0 0 auto",
                 color,
                 variant,
@@ -54,5 +52,5 @@ const ButtonGroup = React.forwardRef((_a, ref) => {
         }) })));
 });
 
-module.exports = ButtonGroup;
+export { ButtonGroup as default };
 //# sourceMappingURL=index.js.map

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';\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;;;;"}