@xanui/ui 1.2.4 → 1.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Button/index.cjs +2 -2
- package/Button/index.cjs.map +1 -1
- package/Button/index.js +2 -2
- package/Button/index.js.map +1 -1
- package/package.json +1 -1
package/Button/index.cjs
CHANGED
|
@@ -17,7 +17,7 @@ const Button = React.forwardRef((_a, ref) => {
|
|
|
17
17
|
color: "brand",
|
|
18
18
|
corner: "rounded",
|
|
19
19
|
size: "medium"
|
|
20
|
-
}), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps } = _d, _props = tslib.__rest(_d, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps"]);
|
|
20
|
+
}), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, disabled } = _d, _props = tslib.__rest(_d, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps", "disabled"]);
|
|
21
21
|
const _p = {};
|
|
22
22
|
if (startIcon)
|
|
23
23
|
_p.startIcon = startIcon;
|
|
@@ -77,7 +77,7 @@ const Button = React.forwardRef((_a, ref) => {
|
|
|
77
77
|
if (skeleton) {
|
|
78
78
|
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) }));
|
|
79
79
|
}
|
|
80
|
-
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 =
|
|
80
|
+
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 = disabled !== null && disabled !== void 0 ? disabled : loading) !== null && _c !== void 0 ? _c : false, ref: ref, children: [loading && jsxRuntime.jsx(core.Tag, { baseClass: 'button-loading-container', sxr: {
|
|
81
81
|
position: "absolute",
|
|
82
82
|
top: 0,
|
|
83
83
|
left: 0,
|
package/Button/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Button/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<UseCornerTypes>;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\n loading?: boolean;\n skeleton?: boolean;\n slotProps?: {\n loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">;\n skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, skeleton, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, ..._props }] = useInterface<any>('Button', rest, {\n variant: \"fill\",\n color: \"brand\",\n corner: \"rounded\",\n size: \"medium\"\n })\n\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n if (size) _p.size = size\n if (direction) _p.direction = direction\n const p: any = useBreakpointProps(_p)\n\n startIcon = p.startIcon\n endIcon = p.endIcon\n color = p.color\n variant = p.variant\n corner = p.corner\n size = p.size\n direction = p.direction || \"row\"\n\n const template = useColorTemplate(color, variant)\n const cornerCss = useCorner(corner)\n\n const sizes: any = {\n small: {\n height: 38,\n px: (startIcon || endIcon) ? 1 : 1.5,\n gap: .5,\n fontSize: 'button'\n },\n medium: {\n height: 44,\n px: (startIcon || endIcon) ? 1.5 : 2,\n gap: 1,\n fontSize: 'button'\n },\n large: {\n height: 52,\n px: (startIcon || endIcon) ? 2 : 3,\n gap: 1,\n fontSize: \"text\"\n }\n }\n\n const progressSizes: any = {\n small: 20,\n medium: 25,\n large: 30\n }\n\n let _size = (sizes[size as any] || {})\n if (direction === 'column') {\n delete _size.height\n _size.gap = .5\n _size.py = 1\n }\n\n if (skeleton) {\n return <Skeleton\n {...slotProps?.skeleton}\n height={_size.height}\n animation={\"wave\"}\n sx={{\n ...slotProps?.skeleton?.sx,\n ..._size,\n ...cornerCss,\n }}\n />\n }\n\n return (\n <Tag\n component='button'\n baseClass='button'\n {..._props}\n sxr={{\n flexShrink: \"0\",\n whiteSpace: \"nowrap\",\n cursor: \"pointer\",\n display: \"flex\",\n textTransform: \"uppercase\",\n flexDirection: direction,\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"relative\",\n overflow: \"hidden\",\n userSelect: \"none\",\n fontWeight: 500,\n ..._size,\n ...cornerCss,\n ...template.primary,\n\n }}\n hover={{\n ...template.secondary,\n ...((_props as any)?.hover || {})\n }}\n disabled={
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Button/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<UseCornerTypes>;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\n loading?: boolean;\n skeleton?: boolean;\n slotProps?: {\n loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">;\n skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, skeleton, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, disabled, ..._props }] = useInterface<any>('Button', rest, {\n variant: \"fill\",\n color: \"brand\",\n corner: \"rounded\",\n size: \"medium\"\n })\n\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n if (size) _p.size = size\n if (direction) _p.direction = direction\n const p: any = useBreakpointProps(_p)\n\n startIcon = p.startIcon\n endIcon = p.endIcon\n color = p.color\n variant = p.variant\n corner = p.corner\n size = p.size\n direction = p.direction || \"row\"\n\n const template = useColorTemplate(color, variant)\n const cornerCss = useCorner(corner)\n\n const sizes: any = {\n small: {\n height: 38,\n px: (startIcon || endIcon) ? 1 : 1.5,\n gap: .5,\n fontSize: 'button'\n },\n medium: {\n height: 44,\n px: (startIcon || endIcon) ? 1.5 : 2,\n gap: 1,\n fontSize: 'button'\n },\n large: {\n height: 52,\n px: (startIcon || endIcon) ? 2 : 3,\n gap: 1,\n fontSize: \"text\"\n }\n }\n\n const progressSizes: any = {\n small: 20,\n medium: 25,\n large: 30\n }\n\n let _size = (sizes[size as any] || {})\n if (direction === 'column') {\n delete _size.height\n _size.gap = .5\n _size.py = 1\n }\n\n if (skeleton) {\n return <Skeleton\n {...slotProps?.skeleton}\n height={_size.height}\n animation={\"wave\"}\n sx={{\n ...slotProps?.skeleton?.sx,\n ..._size,\n ...cornerCss,\n }}\n />\n }\n\n return (\n <Tag\n component='button'\n baseClass='button'\n {..._props}\n sxr={{\n flexShrink: \"0\",\n whiteSpace: \"nowrap\",\n cursor: \"pointer\",\n display: \"flex\",\n textTransform: \"uppercase\",\n flexDirection: direction,\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"relative\",\n overflow: \"hidden\",\n userSelect: \"none\",\n fontWeight: 500,\n ..._size,\n ...cornerCss,\n ...template.primary,\n\n }}\n hover={{\n ...template.secondary,\n ...((_props as any)?.hover || {})\n }}\n disabled={disabled ?? loading ?? false}\n ref={ref}\n >\n {loading && <Tag\n baseClass='button-loading-container'\n sxr={{\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n >\n <CircleProgress\n {...slotProps?.loading}\n color={color === 'default' ? `brand` : \"default\"}\n size={progressSizes[size]}\n className='button-loading-progress'\n />\n </Tag>}\n {startIcon && <Tag\n baseClass='button-start-icon'\n component='span'\n display=\"inline-block\"\n flexShrink={0}\n >{startIcon}</Tag>}\n {children}\n {endIcon && <Tag\n baseClass='button-end-icon'\n component='span'\n display=\"inline-block\"\n flexShrink={0}\n >{endIcon}</Tag>}\n </Tag>\n )\n})\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;;;;;AAyBA;;;AACI;AACI;AACA;AACA;AACA;;;AAIJ;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AAEA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AACI;AACA;AACA;;;AAIJ;;AAEI;AACA;;;AAIA;;;AA6CY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}
|
package/Button/index.js
CHANGED
|
@@ -15,7 +15,7 @@ const Button = React.forwardRef((_a, ref) => {
|
|
|
15
15
|
color: "brand",
|
|
16
16
|
corner: "rounded",
|
|
17
17
|
size: "medium"
|
|
18
|
-
}), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps } = _d, _props = __rest(_d, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps"]);
|
|
18
|
+
}), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, disabled } = _d, _props = __rest(_d, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps", "disabled"]);
|
|
19
19
|
const _p = {};
|
|
20
20
|
if (startIcon)
|
|
21
21
|
_p.startIcon = startIcon;
|
|
@@ -75,7 +75,7 @@ const Button = React.forwardRef((_a, ref) => {
|
|
|
75
75
|
if (skeleton) {
|
|
76
76
|
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) }));
|
|
77
77
|
}
|
|
78
|
-
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 =
|
|
78
|
+
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 = disabled !== null && disabled !== void 0 ? disabled : loading) !== null && _c !== void 0 ? _c : false, ref: ref, children: [loading && jsx(Tag, { baseClass: 'button-loading-container', sxr: {
|
|
79
79
|
position: "absolute",
|
|
80
80
|
top: 0,
|
|
81
81
|
left: 0,
|
package/Button/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Button/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<UseCornerTypes>;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\n loading?: boolean;\n skeleton?: boolean;\n slotProps?: {\n loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">;\n skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, skeleton, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, ..._props }] = useInterface<any>('Button', rest, {\n variant: \"fill\",\n color: \"brand\",\n corner: \"rounded\",\n size: \"medium\"\n })\n\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n if (size) _p.size = size\n if (direction) _p.direction = direction\n const p: any = useBreakpointProps(_p)\n\n startIcon = p.startIcon\n endIcon = p.endIcon\n color = p.color\n variant = p.variant\n corner = p.corner\n size = p.size\n direction = p.direction || \"row\"\n\n const template = useColorTemplate(color, variant)\n const cornerCss = useCorner(corner)\n\n const sizes: any = {\n small: {\n height: 38,\n px: (startIcon || endIcon) ? 1 : 1.5,\n gap: .5,\n fontSize: 'button'\n },\n medium: {\n height: 44,\n px: (startIcon || endIcon) ? 1.5 : 2,\n gap: 1,\n fontSize: 'button'\n },\n large: {\n height: 52,\n px: (startIcon || endIcon) ? 2 : 3,\n gap: 1,\n fontSize: \"text\"\n }\n }\n\n const progressSizes: any = {\n small: 20,\n medium: 25,\n large: 30\n }\n\n let _size = (sizes[size as any] || {})\n if (direction === 'column') {\n delete _size.height\n _size.gap = .5\n _size.py = 1\n }\n\n if (skeleton) {\n return <Skeleton\n {...slotProps?.skeleton}\n height={_size.height}\n animation={\"wave\"}\n sx={{\n ...slotProps?.skeleton?.sx,\n ..._size,\n ...cornerCss,\n }}\n />\n }\n\n return (\n <Tag\n component='button'\n baseClass='button'\n {..._props}\n sxr={{\n flexShrink: \"0\",\n whiteSpace: \"nowrap\",\n cursor: \"pointer\",\n display: \"flex\",\n textTransform: \"uppercase\",\n flexDirection: direction,\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"relative\",\n overflow: \"hidden\",\n userSelect: \"none\",\n fontWeight: 500,\n ..._size,\n ...cornerCss,\n ...template.primary,\n\n }}\n hover={{\n ...template.secondary,\n ...((_props as any)?.hover || {})\n }}\n disabled={
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Button/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<UseCornerTypes>;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\n loading?: boolean;\n skeleton?: boolean;\n slotProps?: {\n loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">;\n skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, skeleton, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, disabled, ..._props }] = useInterface<any>('Button', rest, {\n variant: \"fill\",\n color: \"brand\",\n corner: \"rounded\",\n size: \"medium\"\n })\n\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n if (size) _p.size = size\n if (direction) _p.direction = direction\n const p: any = useBreakpointProps(_p)\n\n startIcon = p.startIcon\n endIcon = p.endIcon\n color = p.color\n variant = p.variant\n corner = p.corner\n size = p.size\n direction = p.direction || \"row\"\n\n const template = useColorTemplate(color, variant)\n const cornerCss = useCorner(corner)\n\n const sizes: any = {\n small: {\n height: 38,\n px: (startIcon || endIcon) ? 1 : 1.5,\n gap: .5,\n fontSize: 'button'\n },\n medium: {\n height: 44,\n px: (startIcon || endIcon) ? 1.5 : 2,\n gap: 1,\n fontSize: 'button'\n },\n large: {\n height: 52,\n px: (startIcon || endIcon) ? 2 : 3,\n gap: 1,\n fontSize: \"text\"\n }\n }\n\n const progressSizes: any = {\n small: 20,\n medium: 25,\n large: 30\n }\n\n let _size = (sizes[size as any] || {})\n if (direction === 'column') {\n delete _size.height\n _size.gap = .5\n _size.py = 1\n }\n\n if (skeleton) {\n return <Skeleton\n {...slotProps?.skeleton}\n height={_size.height}\n animation={\"wave\"}\n sx={{\n ...slotProps?.skeleton?.sx,\n ..._size,\n ...cornerCss,\n }}\n />\n }\n\n return (\n <Tag\n component='button'\n baseClass='button'\n {..._props}\n sxr={{\n flexShrink: \"0\",\n whiteSpace: \"nowrap\",\n cursor: \"pointer\",\n display: \"flex\",\n textTransform: \"uppercase\",\n flexDirection: direction,\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"relative\",\n overflow: \"hidden\",\n userSelect: \"none\",\n fontWeight: 500,\n ..._size,\n ...cornerCss,\n ...template.primary,\n\n }}\n hover={{\n ...template.secondary,\n ...((_props as any)?.hover || {})\n }}\n disabled={disabled ?? loading ?? false}\n ref={ref}\n >\n {loading && <Tag\n baseClass='button-loading-container'\n sxr={{\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n >\n <CircleProgress\n {...slotProps?.loading}\n color={color === 'default' ? `brand` : \"default\"}\n size={progressSizes[size]}\n className='button-loading-progress'\n />\n </Tag>}\n {startIcon && <Tag\n baseClass='button-start-icon'\n component='span'\n display=\"inline-block\"\n flexShrink={0}\n >{startIcon}</Tag>}\n {children}\n {endIcon && <Tag\n baseClass='button-end-icon'\n component='span'\n display=\"inline-block\"\n flexShrink={0}\n >{endIcon}</Tag>}\n </Tag>\n )\n})\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;;;AAyBA;;;AACI;AACI;AACA;AACA;AACA;;;AAIJ;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AAEA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AACI;AACA;AACA;;;AAIJ;;AAEI;AACA;;;AAIA;;;AA6CY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}
|