@xanui/ui 1.1.38 → 1.1.40

package/Badge/index.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const Badge = React.forwardRef((_a, ref) => {
+    var { children, content, refs } = _a, rest = tslib.__rest(_a, ["children", "content", "refs"]);
+    let [_b] = core.useInterface("Badge", rest, {}), { color, placement, visible, slotProps, disableTransition, disableSpace } = _b, props = tslib.__rest(_b, ["color", "placement", "visible", "slotProps", "disableTransition", "disableSpace"]);
+    color !== null && color !== void 0 ? color : (color = "danger");
+    visible !== null && visible !== void 0 ? visible : (visible = true);
+    placement !== null && placement !== void 0 ? placement : (placement = "right-top");
+    disableTransition !== null && disableTransition !== void 0 ? disableTransition : (disableTransition = false);
+    disableSpace !== null && disableSpace !== void 0 ? disableSpace : (disableSpace = false);
+    const _p = {};
+    _p.content = content;
+    _p.color = color;
+    _p.placement = placement;
+    _p.visible = visible;
+    _p.disableTransition = disableTransition !== null && disableTransition !== void 0 ? disableTransition : false;
+    const p = core.useBreakpointProps(_p);
+    content = p.content;
+    color = p.color;
+    placement = p.placement;
+    visible = p.visible;
+    disableTransition = p.disableTransition;
+    const isReactElement = React.isValidElement(content);
+    let template = core.useColorTemplate(color, "fill");
+    let _css = {
+        position: "absolute",
+    };
+    let translate = '';
+    switch (placement) {
+        case "right-top":
+            _css.top = 0;
+            _css.right = 0;
+            if (!disableSpace) {
+                translate = "translate(50%, -50%)";
+            }
+            break;
+        case "right-bottom":
+            _css.bottom = 0;
+            _css.right = 0;
+            if (!disableSpace) {
+                translate = "translate(50%, 50%)";
+            }
+            break;
+        case "left-top":
+            _css.top = 0;
+            _css.left = 0;
+            if (!disableSpace) {
+                translate = "translate(-50%, -50%)";
+            }
+            break;
+        case "left-bottom":
+            _css.bottom = 0;
+            _css.left = 0;
+            if (!disableSpace) {
+                translate = "translate(-50%, 50%)";
+            }
+            break;
+    }
+    if (disableTransition) {
+        _css.transform = translate;
+    }
+    if (!isReactElement) {
+        _css.userSelect = "none";
+        _css.pointerEvents = "none";
+        _css.fontSize = "small";
+        _css.lineHeight = 1;
+        _css.fontWeight = 500;
+        _css.radius = 2;
+        if (typeof content === 'number') {
+            if (content > 99) {
+                content = "99+";
+            }
+        }
+        if (content !== undefined) {
+            _css.minWidth = 16;
+            _css.height = 16;
+            _css.p = .8;
+            _css.px = .4;
+        }
+        else {
+            _css.width = 8;
+            _css.height = 8;
+        }
+    }
+    else {
+        template = {};
+    }
+    const _badge = jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { ref: refs === null || refs === void 0 ? void 0 : refs.content, component: 'span', baseClass: 'badge-content', sxr: Object.assign(Object.assign({ position: "absolute", zIndex: 1, display: 'flex', justifyContent: "center", alignItems: 'center' }, template.primary), _css), children: content }));
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, props, { position: "relative", display: "inline-block", baseClass: 'badge', ref: ref, children: [!disableTransition ? (jsxRuntime.jsx(core.Transition, Object.assign({ open: content !== undefined && visible }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { variant: () => {
+                    return {
+                        from: {
+                            opacity: 0,
+                            transform: `scale(0) ${translate}`.trim(),
+                        },
+                        to: {
+                            opacity: 1,
+                            transform: `scale(1) ${translate}`.trim(),
+                        },
+                    };
+                }, ref: refs === null || refs === void 0 ? void 0 : refs.transition, children: _badge }))) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: _badge }), children] })));
+});
+
+module.exports = Badge;
+//# sourceMappingURL=index.cjs.map

package/Badge/index.cjs.map

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

package/Box/index.cjs

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

package/Box/index.cjs.map

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

package/Button/index.cjs

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

package/Button/index.cjs.map

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

package/Button/index.js.map

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

package/ButtonGroup/index.cjs

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

package/ButtonGroup/index.cjs.map

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

package/Calendar/index.cjs

@@ -0,0 +1,174 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index$1 = require('../Stack/index.cjs');
+var index$3 = require('../IconButton/index.cjs');
+var IconKeyboardArrowRight = require('@xanui/icons/KeyboardArrowRight');
+var IconKeyboardArrowLeft = require('@xanui/icons/KeyboardArrowLeft');
+var index$2 = require('../Text/index.cjs');
+var index$4 = require('../Button/index.cjs');
+var ResetIcon = require('@xanui/icons/Replay');
+var index = require('../ViewBox/index.cjs');
+var core = require('@xanui/core');
+
+const ShowYears = ({ color, year, today, 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$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));
+    }
+    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$1, { sx: {
+            flexWrap: "wrap",
+            flexDirection: "row",
+            overflow: "hidden",
+            overflowY: "auto"
+        }, className: 'calender-years', children: years }));
+};
+const Calendar = (_a) => {
+    var { value } = _a, rest = tslib.__rest(_a, ["value"]);
+    let [{ onChange, viewMode: VMode, onButtonClick, color }] = core.useInterface("Calender", rest, {});
+    const _p = {};
+    if (VMode)
+        _p.VMode = VMode;
+    if (color)
+        _p.color = color;
+    const p = core.useBreakpointProps(_p);
+    color = p.color || "brand";
+    let [viewMode, setViewMode] = React.useState(p.VMode || "day");
+    let [selectedDate, setSelectedDate] = React.useState(new Date());
+    selectedDate = value instanceof Date ? value : selectedDate;
+    const [currentDate, setCurrentDate] = React.useState(selectedDate);
+    const year = currentDate.getFullYear();
+    const month = currentDate.getMonth();
+    const daysInMonth = 32 - new Date(year, month, 32).getDate();
+    const today = new Date();
+    const btnWidth = 36;
+    const boxWidth = btnWidth * 7;
+    const showCalendar = () => {
+        let firstDay = (new Date(year, month)).getDay();
+        let rows = [];
+        let row = [];
+        const dayNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+        for (let i = 0; i < dayNames.length; i++) {
+            const k = dayNames[i];
+            row.push(jsxRuntime.jsx(index$1, { sx: {
+                    width: btnWidth,
+                    height: btnWidth,
+                    alignItems: "center",
+                    justifyContent: "center"
+                }, children: jsxRuntime.jsx(index$3, { variant: "text", color: "default", disabled: true, children: k }) }, "dayname-" + i));
+        }
+        rows.push(jsxRuntime.jsx(index$1, { flexRow: true, className: 'calender-day-row', children: row }, "header"));
+        let date = 1;
+        for (let i = 0; i < 6; i++) {
+            let row = [];
+            for (let j = 0; j < 7; j++) {
+                if (i === 0 && j < firstDay) {
+                    row.push(jsxRuntime.jsx(index$1, { alignItems: "center", justifyContent: "center", sx: {
+                            width: btnWidth,
+                            height: btnWidth,
+                            alignItems: "center",
+                            justifyContent: "center"
+                        } }, date + j + i));
+                }
+                else if (date > daysInMonth) {
+                    break;
+                }
+                else {
+                    let isToday = date === today.getDate() && year === today.getFullYear() && month === today.getMonth();
+                    let isSelected = date === selectedDate.getDate() && year === selectedDate.getFullYear() && month === selectedDate.getMonth();
+                    let css = {};
+                    if (isToday) {
+                        css = {
+                            variant: "fill",
+                            color: "default"
+                        };
+                    }
+                    if (isSelected) {
+                        css = {
+                            variant: "fill",
+                            color: color
+                        };
+                    }
+                    row.push(jsxRuntime.jsx(index$1, { sx: {
+                            width: btnWidth,
+                            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) => {
+                                let d = e.target.getAttribute("data-value");
+                                if (!d)
+                                    return;
+                                let selectedDate = new Date(year, month, parseInt(d));
+                                onChange ? onChange(selectedDate) : setSelectedDate(selectedDate);
+                                onButtonClick && onButtonClick("day", selectedDate);
+                            }, children: date })) }, date + j + i));
+                    date++;
+                }
+            }
+            rows.push(jsxRuntime.jsx(index$1, { flexRow: true, className: 'calender-day-row', children: row }, "row" + i));
+        }
+        return rows;
+    };
+    const showMonth = () => {
+        let months = [];
+        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: () => {
+                        const v = new Date(currentDate.getFullYear(), m);
+                        setCurrentDate(v);
+                        setViewMode("day");
+                        onButtonClick && onButtonClick("month", v);
+                    }, sx: {
+                        color: selected ? "brand.text" : "text.primary"
+                    }, children: monthNames[m] }) }, m));
+        }
+        return (jsxRuntime.jsx(index$1, { className: 'calender-months', sx: {
+                flexWrap: "wrap",
+                overflow: "hidden",
+                overflowY: "auto",
+                flexDirection: "row"
+            }, children: months }));
+    };
+    let view = null;
+    switch (viewMode) {
+        case "year":
+            view = jsxRuntime.jsx(ShowYears, { color: color, today: today, year: year, boxWidth: boxWidth, onClick: (y) => {
+                    currentDate.setFullYear(y);
+                    setCurrentDate(currentDate);
+                    setViewMode("month");
+                    onButtonClick && onButtonClick("year", currentDate);
+                } });
+            break;
+        case "month":
+            view = showMonth();
+            break;
+        default:
+            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: () => {
+                        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: () => {
+                        setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
+                    }, 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$1, { height: "100%", p: .5, className: 'calender-container', children: view }) }));
+};
+
+module.exports = Calendar;
+//# sourceMappingURL=index.cjs.map

package/Calendar/index.cjs.map

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