@xanui/ui 1.2.6 → 1.2.8

package/Box/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { TagComponentType, TagProps } from '@xanui/core';
 
 type BoxProps<T extends TagComponentType = "div"> = TagProps<T>;
-declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const Box: React__default.ForwardRefExoticComponent<Omit<BoxProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { Box as default };
 export type { BoxProps };

package/Button/index.cjs

@@ -14,7 +14,7 @@ const Button = React.forwardRef((_a, ref) => {
     var { children, skeleton } = _a, rest = tslib.__rest(_a, ["children", "skeleton"]);
     let [_d] = core.useInterface('Button', rest, {
         variant: "fill",
-        color: "brand",
+        color: "primary",
         corner: "rounded",
         size: "medium"
     }), { 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"]);
@@ -77,7 +77,9 @@ const Button = React.forwardRef((_a, ref) => {
     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 = 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: {
+    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, "&:active": {
+                transform: variant !== "text" ? "scale(0.99)" : undefined
+            } }, _size), cornerCss), template.main), hover: Object.assign(Object.assign({}, template.hover), ((_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: {
                     position: "absolute",
                     top: 0,
                     left: 0,
@@ -87,7 +89,7 @@ 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: jsxRuntime.jsx(index$2, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'surface' ? `primary` : 'surface', 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;

package/Button/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Button/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    loading?: boolean;\n    skeleton?: boolean;\n    slotProps?: {\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">;\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n    }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, skeleton, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n    let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, 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;;"}
+{"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: \"primary\",\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                \"&:active\": {\n                    transform: variant !== \"text\" ? \"scale(0.99)\" : undefined\n                },\n                ..._size,\n                ...cornerCss,\n                ...template.main,\n\n            }}\n            hover={{\n                ...template.hover,\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 === 'surface' ? `primary` : 'surface'}\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;;AAYJ;;;AAoCgB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}

package/Button/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React__default, { ReactElement } from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor, UseColorTemplateType } from '@xanui/core';
 import { UseCornerTypes } from '../useCorner/index.js';
 import { CircleProgressProps } from '../CircleProgress/index.js';
@@ -19,7 +19,7 @@ type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, "col
         skeleton?: Omit<SkeletonProps, "height" | "width" | "loading" | "children">;
     };
 };
-declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const Button: React__default.ForwardRefExoticComponent<Omit<ButtonProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { Button as default };
 export type { ButtonProps };

package/Button/index.js

@@ -12,7 +12,7 @@ const Button = React.forwardRef((_a, ref) => {
     var { children, skeleton } = _a, rest = __rest(_a, ["children", "skeleton"]);
     let [_d] = useInterface('Button', rest, {
         variant: "fill",
-        color: "brand",
+        color: "primary",
         corner: "rounded",
         size: "medium"
     }), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, disabled } = _d, _props = __rest(_d, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps", "disabled"]);
@@ -75,7 +75,9 @@ const Button = React.forwardRef((_a, ref) => {
     if (skeleton) {
         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 (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: {
+    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, "&:active": {
+                transform: variant !== "text" ? "scale(0.99)" : undefined
+            } }, _size), cornerCss), template.main), hover: Object.assign(Object.assign({}, template.hover), ((_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: {
                     position: "absolute",
                     top: 0,
                     left: 0,
@@ -85,7 +87,7 @@ const Button = React.forwardRef((_a, ref) => {
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
-                }, children: jsx(CircleProgress, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'default' ? `brand` : "default", 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 })] })));
+                }, children: jsx(CircleProgress, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'surface' ? `primary` : 'surface', 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 })] })));
 });
 
 export { Button as default };

package/Button/index.js.map

@@ -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, 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;;"}
+{"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: \"primary\",\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                \"&:active\": {\n                    transform: variant !== \"text\" ? \"scale(0.99)\" : undefined\n                },\n                ..._size,\n                ...cornerCss,\n                ...template.main,\n\n            }}\n            hover={{\n                ...template.hover,\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 === 'surface' ? `primary` : 'surface'}\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;;AAYJ;;;AAoCgB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}

package/ButtonGroup/index.cjs

@@ -11,7 +11,7 @@ const ButtonGroup = React.forwardRef((_a, ref) => {
     let [_b] = core.useInterface("ButtonGroup", rest, {
         size: "medium",
         variant: "outline",
-        color: "default"
+        color: 'surface'
     }), { color, variant, size } = _b, props = tslib.__rest(_b, ["color", "variant", "size"]);
     const _p = {};
     if (color)
@@ -29,7 +29,7 @@ const ButtonGroup = React.forwardRef((_a, ref) => {
             height: 52,
         }
     };
-    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`;
+    let borderColor = `${color}.divider`;
     return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, sizes[size], { sxr: {
             display: "inline-flex",
             flexWrap: "nowrap",
@@ -38,6 +38,7 @@ const ButtonGroup = React.forwardRef((_a, ref) => {
             border: "1px solid",
             borderColor: borderColor,
             '& button, & button:hover': {
+                border: 0,
                 borderRight: "1px solid",
                 borderColor: borderColor
             },

package/ButtonGroup/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\",\n        variant: \"outline\",\n        color: \"default\"\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const sizes: any = {\n        small: {\n            height: 40,\n        },\n        medium: {\n            height: 46,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                flexWrap: \"nowrap\",\n                overflow: \"hidden\",\n                radius: 1,\n                border: \"1px solid\",\n                borderColor: borderColor,\n                '& button, & button:hover': {\n                    borderRight: \"1px solid\",\n                    borderColor: borderColor\n                },\n                \"& button:last-child, & button:last-child:hover\": {\n                    borderRight: \"none\"\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: \"0 0 auto\",\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\",\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":[],"mappings":";;;;;;;;AAYA;AAA0E;AACtE;AACI;AACA;AACA;AACH;;AAED;AAAW;AACX;AACA;AAEA;AACI;AACI;AACH;AACD;AACI;AACH;AACD;AACI;AACH;;AAGL;AAEA;AAKY;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACH;AACD;AACI;AACH;AACJ;;AAMO;;;;AAIA;AACH;;AAIjB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\",\n        variant: \"outline\",\n        color: 'surface'\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const sizes: any = {\n        small: {\n            height: 40,\n        },\n        medium: {\n            height: 46,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    let borderColor = `${color}.divider`\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                flexWrap: \"nowrap\",\n                overflow: \"hidden\",\n                radius: 1,\n                border: \"1px solid\",\n                borderColor: borderColor,\n                '& button, & button:hover': {\n                    border: 0,\n                    borderRight: \"1px solid\",\n                    borderColor: borderColor\n                },\n                \"& button:last-child, & button:last-child:hover\": {\n                    borderRight: \"none\"\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: \"0 0 auto\",\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\",\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":[],"mappings":";;;;;;;;AAYA;AAA0E;AACtE;AACI;AACA;AACA;AACH;;AAED;AAAW;AACX;AACA;AAEA;AACI;AACI;AACH;AACD;AACI;AACH;AACD;AACI;AACH;;AAGL;AAEA;AAKY;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACA;AACH;AACD;AACI;AACH;AACJ;;AAMO;;;;AAIA;AACH;;AAIjB;;"}

package/ButtonGroup/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React__default, { ReactElement } from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor, UseColorTemplateType } from '@xanui/core';
 import { ButtonProps } from '../Button/index.js';
 
@@ -8,7 +8,7 @@ type ButtonGroupProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, 'c
     variant?: useBreakpointPropsType<UseColorTemplateType>;
     size?: useBreakpointPropsType<"small" | "medium" | "large">;
 };
-declare const ButtonGroup: React.ForwardRefExoticComponent<Omit<ButtonGroupProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const ButtonGroup: React__default.ForwardRefExoticComponent<Omit<ButtonGroupProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { ButtonGroup as default };
 export type { ButtonGroupProps };

package/ButtonGroup/index.js

@@ -9,7 +9,7 @@ const ButtonGroup = React.forwardRef((_a, ref) => {
     let [_b] = useInterface("ButtonGroup", rest, {
         size: "medium",
         variant: "outline",
-        color: "default"
+        color: 'surface'
     }), { color, variant, size } = _b, props = __rest(_b, ["color", "variant", "size"]);
     const _p = {};
     if (color)
@@ -27,7 +27,7 @@ const ButtonGroup = React.forwardRef((_a, ref) => {
             height: 52,
         }
     };
-    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`;
+    let borderColor = `${color}.divider`;
     return (jsx(Tag, Object.assign({}, props, sizes[size], { sxr: {
             display: "inline-flex",
             flexWrap: "nowrap",
@@ -36,6 +36,7 @@ const ButtonGroup = React.forwardRef((_a, ref) => {
             border: "1px solid",
             borderColor: borderColor,
             '& button, & button:hover': {
+                border: 0,
                 borderRight: "1px solid",
                 borderColor: borderColor
             },

package/ButtonGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\",\n        variant: \"outline\",\n        color: \"default\"\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const sizes: any = {\n        small: {\n            height: 40,\n        },\n        medium: {\n            height: 46,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                flexWrap: \"nowrap\",\n                overflow: \"hidden\",\n                radius: 1,\n                border: \"1px solid\",\n                borderColor: borderColor,\n                '& button, & button:hover': {\n                    borderRight: \"1px solid\",\n                    borderColor: borderColor\n                },\n                \"& button:last-child, & button:last-child:hover\": {\n                    borderRight: \"none\"\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: \"0 0 auto\",\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\",\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":[],"mappings":";;;;;;AAYA;AAA0E;AACtE;AACI;AACA;AACA;AACH;;AAED;AAAW;AACX;AACA;AAEA;AACI;AACI;AACH;AACD;AACI;AACH;AACD;AACI;AACH;;AAGL;AAEA;AAKY;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACH;AACD;AACI;AACH;AACJ;;AAMO;;;;AAIA;AACH;;AAIjB;;"}
+{"version":3,"file":"index.js","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\",\n        variant: \"outline\",\n        color: 'surface'\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const sizes: any = {\n        small: {\n            height: 40,\n        },\n        medium: {\n            height: 46,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    let borderColor = `${color}.divider`\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                flexWrap: \"nowrap\",\n                overflow: \"hidden\",\n                radius: 1,\n                border: \"1px solid\",\n                borderColor: borderColor,\n                '& button, & button:hover': {\n                    border: 0,\n                    borderRight: \"1px solid\",\n                    borderColor: borderColor\n                },\n                \"& button:last-child, & button:last-child:hover\": {\n                    borderRight: \"none\"\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: \"0 0 auto\",\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\",\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":[],"mappings":";;;;;;AAYA;AAA0E;AACtE;AACI;AACA;AACA;AACH;;AAED;AAAW;AACX;AACA;AAEA;AACI;AACI;AACH;AACD;AACI;AACH;AACD;AACI;AACH;;AAGL;AAEA;AAKY;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACA;AACH;AACD;AACI;AACH;AACJ;;AAMO;;;;AAIA;AACH;;AAIjB;;"}

package/Calendar/index.cjs

@@ -22,7 +22,7 @@ const ShowYears = ({ color, year, today, onClick }) => {
         years.push(jsxRuntime.jsx(index$1, { sx: {
                 width: 50,
                 p: .1
-            }, className: 'calender-year-item', children: jsxRuntime.jsx(index$4, { color: selected ? color : "default", className: 'calender-year-button', size: 'small', corner: "circle", ref: selected ? selectedRef : null, onClick: () => onClick(y), variant: selected ? "fill" : "text", children: y }) }, y));
+            }, className: 'calender-year-item', children: jsxRuntime.jsx(index$4, { color: selected ? color : 'surface', className: 'calender-year-button', size: 'small', corner: "circle", ref: selected ? selectedRef : null, onClick: () => onClick(y), variant: selected ? "fill" : "text", children: y }) }, y));
     }
     React.useEffect(() => {
         if (selectedRef === null || selectedRef === void 0 ? void 0 : selectedRef.current) {
@@ -45,7 +45,7 @@ const Calendar = (_a) => {
     if (color)
         _p.color = color;
     const p = core.useBreakpointProps(_p);
-    color = p.color || "brand";
+    color = p.color || "primary";
     let [viewMode, setViewMode] = React.useState(p.VMode || "day");
     let [selectedDate, setSelectedDate] = React.useState(new Date());
     selectedDate = value instanceof Date ? value : selectedDate;
@@ -68,7 +68,7 @@ const Calendar = (_a) => {
                     height: btnWidth,
                     alignItems: "center",
                     justifyContent: "center"
-                }, children: jsxRuntime.jsx(index$3, { variant: "text", color: "default", disabled: true, children: k }) }, "dayname-" + i));
+                }, children: jsxRuntime.jsx(index$3, { variant: "text", color: "surface", disabled: true, children: k }) }, "dayname-" + i));
         }
         rows.push(jsxRuntime.jsx(index$1, { flexRow: true, className: 'calender-day-row', children: row }, "header"));
         let date = 1;
@@ -93,7 +93,7 @@ const Calendar = (_a) => {
                     if (isToday) {
                         css = {
                             variant: "fill",
-                            color: "default"
+                            color: "surface"
                         };
                     }
                     if (isSelected) {
@@ -107,7 +107,7 @@ const Calendar = (_a) => {
                             height: btnWidth,
                             alignItems: "center",
                             justifyContent: "center"
-                        }, className: 'calender-day-item', children: jsxRuntime.jsx(index$3, Object.assign({ className: 'calender-day-button', variant: isSelected ? "fill" : "text", color: isToday ? color : "default" }, css, { "data-value": date, onClick: (e) => {
+                        }, className: 'calender-day-item', children: jsxRuntime.jsx(index$3, Object.assign({ className: 'calender-day-button', variant: isSelected ? "fill" : "text", color: isToday ? color : "surface" }, css, { "data-value": date, onClick: (e) => {
                                 let d = e.target.getAttribute("data-value");
                                 if (!d)
                                     return;
@@ -127,13 +127,13 @@ const Calendar = (_a) => {
         const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
         for (let m = 0; m < monthNames.length; m++) {
             const selected = currentDate.getMonth() === m;
-            months.push(jsxRuntime.jsx(index$1, { width: "50%", alignItems: "center", justifyContent: "center", p: .1, className: 'calender-months-item', children: jsxRuntime.jsx(index$4, { color: selected ? color : "default", className: 'calender-month-button', size: 'small', corner: "circle", variant: selected ? "fill" : 'text', onClick: () => {
+            months.push(jsxRuntime.jsx(index$1, { width: "50%", alignItems: "center", justifyContent: "center", p: .1, className: 'calender-months-item', children: jsxRuntime.jsx(index$4, { color: selected ? color : 'surface', className: 'calender-month-button', size: 'small', corner: "circle", variant: selected ? "fill" : 'text', onClick: () => {
                         const v = new Date(currentDate.getFullYear(), m);
                         setCurrentDate(v);
                         setViewMode("day");
                         onButtonClick && onButtonClick("month", v);
                     }, sx: {
-                        color: selected ? "brand.text" : "text.primary"
+                        color: selected ? "primary.contrast" : "surface.contrast"
                     }, children: monthNames[m] }) }, m));
         }
         return (jsxRuntime.jsx(index$1, { className: 'calender-months', sx: {
@@ -160,12 +160,12 @@ const Calendar = (_a) => {
             view = (jsxRuntime.jsx(jsxRuntime.Fragment, { children: showCalendar() }));
             break;
     }
-    return (jsxRuntime.jsx(index, { className: 'calender-root', maxHeight: 308, width: 250, radius: 1, bgcolor: "background.secondary", startContent: jsxRuntime.jsxs(index$1, { className: 'calender-header', flexRow: true, alignItems: "center", justifyContent: "space-between", p: 1, children: [jsxRuntime.jsx(index$2, { fontWeight: "bold", cursor: "pointer", onClick: () => setViewMode(viewMode !== 'day' ? "day" : "year"), flex: 1, children: currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' }) }), jsxRuntime.jsx(index$3, { color: "default", variant: 'text', size: 28, onClick: () => {
+    return (jsxRuntime.jsx(index, { className: 'calender-root', maxHeight: 308, width: 250, radius: 1, bgcolor: "surface.lighter", startContent: jsxRuntime.jsxs(index$1, { className: 'calender-header', flexRow: true, alignItems: "center", justifyContent: "space-between", p: 1, children: [jsxRuntime.jsx(index$2, { fontWeight: "bold", cursor: "pointer", onClick: () => setViewMode(viewMode !== 'day' ? "day" : "year"), flex: 1, children: currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' }) }), jsxRuntime.jsx(index$3, { color: "surface", variant: 'text', size: 28, onClick: () => {
                         setCurrentDate(new Date());
                         onChange ? onChange(new Date()) : setSelectedDate(new Date());
-                    }, children: jsxRuntime.jsx(ResetIcon, { fontSize: 20 }) }), jsxRuntime.jsx(index$3, { color: "default", variant: 'text', size: 28, onClick: () => {
+                    }, children: jsxRuntime.jsx(ResetIcon, { fontSize: 20 }) }), jsxRuntime.jsx(index$3, { color: "surface", variant: 'text', size: 28, onClick: () => {
                         setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
-                    }, children: jsxRuntime.jsx(IconKeyboardArrowLeft, {}) }), jsxRuntime.jsx(index$3, { color: "default", variant: 'text', size: 28, onClick: () => {
+                    }, children: jsxRuntime.jsx(IconKeyboardArrowLeft, {}) }), jsxRuntime.jsx(index$3, { color: "surface", variant: 'text', size: 28, onClick: () => {
                         setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
                     }, children: jsxRuntime.jsx(IconKeyboardArrowRight, {}) })] }), children: jsxRuntime.jsx(index$1, { height: "100%", p: .5, className: 'calender-container', children: view }) }));
 };

package/Calendar/index.cjs.map

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

package/Calendar/index.js

@@ -20,7 +20,7 @@ const ShowYears = ({ color, year, today, onClick }) => {
         years.push(jsx(Stack, { sx: {
                 width: 50,
                 p: .1
-            }, className: 'calender-year-item', children: jsx(Button, { color: selected ? color : "default", className: 'calender-year-button', size: 'small', corner: "circle", ref: selected ? selectedRef : null, onClick: () => onClick(y), variant: selected ? "fill" : "text", children: y }) }, y));
+            }, className: 'calender-year-item', children: jsx(Button, { color: selected ? color : 'surface', className: 'calender-year-button', size: 'small', corner: "circle", ref: selected ? selectedRef : null, onClick: () => onClick(y), variant: selected ? "fill" : "text", children: y }) }, y));
     }
     useEffect(() => {
         if (selectedRef === null || selectedRef === void 0 ? void 0 : selectedRef.current) {
@@ -43,7 +43,7 @@ const Calendar = (_a) => {
     if (color)
         _p.color = color;
     const p = useBreakpointProps(_p);
-    color = p.color || "brand";
+    color = p.color || "primary";
     let [viewMode, setViewMode] = useState(p.VMode || "day");
     let [selectedDate, setSelectedDate] = useState(new Date());
     selectedDate = value instanceof Date ? value : selectedDate;
@@ -66,7 +66,7 @@ const Calendar = (_a) => {
                     height: btnWidth,
                     alignItems: "center",
                     justifyContent: "center"
-                }, children: jsx(IconButton, { variant: "text", color: "default", disabled: true, children: k }) }, "dayname-" + i));
+                }, children: jsx(IconButton, { variant: "text", color: "surface", disabled: true, children: k }) }, "dayname-" + i));
         }
         rows.push(jsx(Stack, { flexRow: true, className: 'calender-day-row', children: row }, "header"));
         let date = 1;
@@ -91,7 +91,7 @@ const Calendar = (_a) => {
                     if (isToday) {
                         css = {
                             variant: "fill",
-                            color: "default"
+                            color: "surface"
                         };
                     }
                     if (isSelected) {
@@ -105,7 +105,7 @@ const Calendar = (_a) => {
                             height: btnWidth,
                             alignItems: "center",
                             justifyContent: "center"
-                        }, className: 'calender-day-item', children: jsx(IconButton, Object.assign({ className: 'calender-day-button', variant: isSelected ? "fill" : "text", color: isToday ? color : "default" }, css, { "data-value": date, onClick: (e) => {
+                        }, className: 'calender-day-item', children: jsx(IconButton, Object.assign({ className: 'calender-day-button', variant: isSelected ? "fill" : "text", color: isToday ? color : "surface" }, css, { "data-value": date, onClick: (e) => {
                                 let d = e.target.getAttribute("data-value");
                                 if (!d)
                                     return;
@@ -125,13 +125,13 @@ const Calendar = (_a) => {
         const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
         for (let m = 0; m < monthNames.length; m++) {
             const selected = currentDate.getMonth() === m;
-            months.push(jsx(Stack, { width: "50%", alignItems: "center", justifyContent: "center", p: .1, className: 'calender-months-item', children: jsx(Button, { color: selected ? color : "default", className: 'calender-month-button', size: 'small', corner: "circle", variant: selected ? "fill" : 'text', onClick: () => {
+            months.push(jsx(Stack, { width: "50%", alignItems: "center", justifyContent: "center", p: .1, className: 'calender-months-item', children: jsx(Button, { color: selected ? color : 'surface', className: 'calender-month-button', size: 'small', corner: "circle", variant: selected ? "fill" : 'text', onClick: () => {
                         const v = new Date(currentDate.getFullYear(), m);
                         setCurrentDate(v);
                         setViewMode("day");
                         onButtonClick && onButtonClick("month", v);
                     }, sx: {
-                        color: selected ? "brand.text" : "text.primary"
+                        color: selected ? "primary.contrast" : "surface.contrast"
                     }, children: monthNames[m] }) }, m));
         }
         return (jsx(Stack, { className: 'calender-months', sx: {
@@ -158,12 +158,12 @@ const Calendar = (_a) => {
             view = (jsx(Fragment, { children: showCalendar() }));
             break;
     }
-    return (jsx(ViewBox, { className: 'calender-root', maxHeight: 308, width: 250, radius: 1, bgcolor: "background.secondary", startContent: jsxs(Stack, { className: 'calender-header', flexRow: true, alignItems: "center", justifyContent: "space-between", p: 1, children: [jsx(Text, { fontWeight: "bold", cursor: "pointer", onClick: () => setViewMode(viewMode !== 'day' ? "day" : "year"), flex: 1, children: currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' }) }), jsx(IconButton, { color: "default", variant: 'text', size: 28, onClick: () => {
+    return (jsx(ViewBox, { className: 'calender-root', maxHeight: 308, width: 250, radius: 1, bgcolor: "surface.lighter", startContent: jsxs(Stack, { className: 'calender-header', flexRow: true, alignItems: "center", justifyContent: "space-between", p: 1, children: [jsx(Text, { fontWeight: "bold", cursor: "pointer", onClick: () => setViewMode(viewMode !== 'day' ? "day" : "year"), flex: 1, children: currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' }) }), jsx(IconButton, { color: "surface", variant: 'text', size: 28, onClick: () => {
                         setCurrentDate(new Date());
                         onChange ? onChange(new Date()) : setSelectedDate(new Date());
-                    }, children: jsx(ResetIcon, { fontSize: 20 }) }), jsx(IconButton, { color: "default", variant: 'text', size: 28, onClick: () => {
+                    }, children: jsx(ResetIcon, { fontSize: 20 }) }), jsx(IconButton, { color: "surface", variant: 'text', size: 28, onClick: () => {
                         setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
-                    }, children: jsx(IconKeyboardArrowLeft, {}) }), jsx(IconButton, { color: "default", variant: 'text', size: 28, onClick: () => {
+                    }, children: jsx(IconKeyboardArrowLeft, {}) }), jsx(IconButton, { color: "surface", variant: 'text', size: 28, onClick: () => {
                         setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
                     }, children: jsx(IconKeyboardArrowRight, {}) })] }), children: jsx(Stack, { height: "100%", p: .5, className: 'calender-container', children: view }) }));
 };

package/Calendar/index.js.map

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

package/CalendarInput/index.cjs

@@ -18,7 +18,7 @@ const CalenderInput = (props) => {
     let [_a] = core.useInterface("CanlendarInput", props, {}), { value, onChange, getInputValue, slotProps, placeholder } = _a, inputProps = tslib.__rest(_a, ["value", "onChange", "getInputValue", "slotProps", "placeholder"]);
     const [target, setTarget] = React.useState();
     const inputRef = React.useRef(null);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index, Object.assign({ readOnly: true, startIcon: jsxRuntime.jsx(CalendarIcon, {}), placeholder: placeholder }, inputProps, { endIcon: jsxRuntime.jsx(jsxRuntime.Fragment, { children: value && jsxRuntime.jsx(index$1, { children: jsxRuntime.jsx(index$2, { color: "default", size: 28, variant: "text", onClick: () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index, Object.assign({ readOnly: true, startIcon: jsxRuntime.jsx(CalendarIcon, {}), placeholder: placeholder }, inputProps, { endIcon: jsxRuntime.jsx(jsxRuntime.Fragment, { children: value && jsxRuntime.jsx(index$1, { children: jsxRuntime.jsx(index$2, { color: "surface", size: 28, variant: "text", onClick: () => {
                                 onChange && onChange(null);
                             }, children: jsxRuntime.jsx(ClearIcon, { fontSize: 20 }) }) }) }), cursor: "pointer", ref: inputRef, onFocus: () => setTarget(target ? null : inputRef === null || inputRef === void 0 ? void 0 : inputRef.current), value: getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString("en-US") : "") })), jsxRuntime.jsx(index$3, Object.assign({ target: target, placement: "bottom-left", bgcolor: "transparent" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { children: jsxRuntime.jsx(index$4, { onClickOutside: () => setTarget(null), children: jsxRuntime.jsx(index$5, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.calender, { value: value, onChange: (e) => {
                             setTarget(null);