@xanui/ui 1.1.17 → 1.1.19

package/Box/index.js

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

package/Box/index.js.map

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

package/Box/index.mjs

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

package/Box/index.mjs.map

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

package/Button/index.js

@@ -1,4 +1,14 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),index$1=require('../useCorner/index.js'),index=require('../CircleProgress/index.js');const Button = React.forwardRef((_a, ref) => {
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+var index$1 = require('../useCorner/index.js');
+var index = require('../CircleProgress/index.js');
+
+const Button = React.forwardRef((_a, ref) => {
     var _b;
     var { children } = _a, rest = tslib.__rest(_a, ["children"]);
     let [_c] = core.useInterface('Button', rest, {
@@ -31,7 +41,7 @@
     size = p.size;
     direction = p.direction || "row";
     const template = core.useColorTemplate(color, variant);
-    const cornerCss = index$1.default(corner);
+    const cornerCss = index$1(corner);
     const sizes = {
         small: {
             height: 40,
@@ -73,5 +83,8 @@
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
-                }, children: jsxRuntime.jsx(index.default, 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 })] })));
-});exports.default=Button;//# sourceMappingURL=index.js.map
+                }, children: jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'default' ? `brand` : "default", size: progressSizes[size], className: 'button-loading-progress' })) }), startIcon && jsxRuntime.jsx(core.Tag, { baseClass: 'button-start-icon', component: 'span', display: "inline-block", flexShrink: 0, children: startIcon }), children, endIcon && jsxRuntime.jsx(core.Tag, { baseClass: 'button-end-icon', component: 'span', display: "inline-block", flexShrink: 0, children: endIcon })] })));
+});
+
+module.exports = Button;
+//# sourceMappingURL=index.js.map

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

package/Button/index.mjs

@@ -1,4 +1,12 @@
-import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React from'react';import {useInterface,useBreakpointProps,useColorTemplate,Tag}from'@xanui/core';import useCorner from'../useCorner/index.mjs';import CircleProgress from'../CircleProgress/index.mjs';const Button = React.forwardRef((_a, ref) => {
+"use client";
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/core';
+import useCorner from '../useCorner/index.mjs';
+import CircleProgress from '../CircleProgress/index.mjs';
+
+const Button = React.forwardRef((_a, ref) => {
     var _b;
     var { children } = _a, rest = __rest(_a, ["children"]);
     let [_c] = useInterface('Button', rest, {
@@ -74,4 +82,7 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React
                     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 })] })));
-});export{Button as default};//# sourceMappingURL=index.mjs.map
+});
+
+export { Button as default };
+//# sourceMappingURL=index.mjs.map

package/Button/index.mjs.map

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

package/ButtonGroup/index.js

@@ -1,4 +1,11 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const ButtonGroup = React.forwardRef((_a, ref) => {
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const ButtonGroup = React.forwardRef((_a, ref) => {
     var { children } = _a, rest = tslib.__rest(_a, ["children"]);
     let [_b] = core.useInterface("ButtonGroup", rest, {
         size: "medium",
@@ -45,4 +52,7 @@
                 corner: "squar",
             });
         }) })));
-});exports.default=ButtonGroup;//# sourceMappingURL=index.js.map
+});
+
+module.exports = ButtonGroup;
+//# sourceMappingURL=index.js.map

package/ButtonGroup/index.js.map

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

package/ButtonGroup/index.mjs

@@ -1,4 +1,9 @@
-import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React,{Children,cloneElement}from'react';import {useInterface,useBreakpointProps,Tag}from'@xanui/core';const ButtonGroup = React.forwardRef((_a, ref) => {
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React, { Children, cloneElement } from 'react';
+import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
+
+const ButtonGroup = React.forwardRef((_a, ref) => {
     var { children } = _a, rest = __rest(_a, ["children"]);
     let [_b] = useInterface("ButtonGroup", rest, {
         size: "medium",
@@ -45,4 +50,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React,{Chi
                 corner: "squar",
             });
         }) })));
-});export{ButtonGroup as default};//# sourceMappingURL=index.mjs.map
+});
+
+export { ButtonGroup as default };
+//# sourceMappingURL=index.mjs.map

package/ButtonGroup/index.mjs.map

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

package/Calendar/index.js

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

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

package/Calendar/index.mjs

@@ -1,4 +1,18 @@
-import {__rest}from'tslib';import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import Stack from'../Stack/index.mjs';import IconButton from'../IconButton/index.mjs';import IconKeyboardArrowRight from'@xanui/icons/KeyboardArrowRight';import IconKeyboardArrowLeft from'@xanui/icons/KeyboardArrowLeft';import Text from'../Text/index.mjs';import Button from'../Button/index.mjs';import ResetIcon from'@xanui/icons/Replay';import ViewBox from'../ViewBox/index.mjs';import {useInterface,useBreakpointProps}from'@xanui/core';const ShowYears = ({ color, year, today, boxWidth, onClick }) => {
+"use client";
+import { __rest } from 'tslib';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import Stack from '../Stack/index.mjs';
+import IconButton from '../IconButton/index.mjs';
+import IconKeyboardArrowRight from '@xanui/icons/KeyboardArrowRight';
+import IconKeyboardArrowLeft from '@xanui/icons/KeyboardArrowLeft';
+import Text from '../Text/index.mjs';
+import Button from '../Button/index.mjs';
+import ResetIcon from '@xanui/icons/Replay';
+import ViewBox from '../ViewBox/index.mjs';
+import { useInterface, useBreakpointProps } from '@xanui/core';
+
+const ShowYears = ({ color, year, today, boxWidth, onClick }) => {
     let years = [];
     const selectedRef = useRef(null);
     for (let y = 1900; y < today.getFullYear() + 40; y++) {
@@ -137,4 +151,7 @@ const Calendar = (_a) => {
                     }, children: jsx(IconKeyboardArrowLeft, {}) }), jsx(IconButton, { color: "default", 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 }) }));
-};export{Calendar as default};//# sourceMappingURL=index.mjs.map
+};
+
+export { Calendar as default };
+//# sourceMappingURL=index.mjs.map