@xanui/ui 1.0.0

package/ButtonGroup/index.js

@@ -0,0 +1,47 @@
+'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) => {
+    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    let [_b] = core.useInterface("ButtonGroup", rest, {
+        size: "medium"
+    }), { 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 template = core.useColorTemplate(color, "outline");
+    const sizes = {
+        small: {
+            height: 32,
+        },
+        medium: {
+            height: 40,
+        },
+        large: {
+            height: 52,
+        }
+    };
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, sizes[size], { sxr: {
+            display: "inline-flex",
+            overflow: "hidden",
+            radius: 1,
+            '& button:not(:last-of-type)': {
+                borderTopRightRadius: 0,
+                borderBottomRightRadius: 0,
+                borderRight: 1,
+                borderColor: template.borderColor
+            },
+            '& button:not(:first-of-type)': {
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderLeft: 0
+            }
+        }, baseClass: 'button-group', ref: ref }, { children: React.Children.map(children, (child) => {
+            return React.cloneElement(child, {
+                flex: 1,
+                color,
+                variant,
+                size,
+                corner: "squar"
+            });
+        }) })));
+});exports.default=ButtonGroup;//# sourceMappingURL=index.js.map

package/ButtonGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, ColorTemplateType, useColorTemplate, 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<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\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    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const template = useColorTemplate(color, \"outline\")\n\n    const sizes: any = {\n        small: {\n            height: 32,\n        },\n        medium: {\n            height: 40,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                overflow: \"hidden\",\n                radius: 1,\n                '& button:not(:last-of-type)': {\n                    borderTopRightRadius: 0,\n                    borderBottomRightRadius: 0,\n                    borderRight: 1,\n                    borderColor: template.borderColor\n                },\n                '& button:not(:first-of-type)': {\n                    borderTopLeftRadius: 0,\n                    borderBottomLeftRadius: 0,\n                    borderLeft: 0\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: 1,\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","useColorTemplate","_jsx","Tag","Children","cloneElement"],"mappings":"4LAYA,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;AACT,KAAA,CAAC,EAFG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAErC;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;IAEf,MAAM,QAAQ,GAAGC,qBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC;AAEnD,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,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,MAAM,EAAE,CAAC;AACT,YAAA,6BAA6B,EAAE;AAC3B,gBAAA,oBAAoB,EAAE,CAAC;AACvB,gBAAA,uBAAuB,EAAE,CAAC;AAC1B,gBAAA,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,QAAQ,CAAC;AACzB,aAAA;AACD,YAAA,8BAA8B,EAAE;AAC5B,gBAAA,mBAAmB,EAAE,CAAC;AACtB,gBAAA,sBAAsB,EAAE,CAAC;AACzB,gBAAA,UAAU,EAAE;AACf;AACJ,SAAA,EACD,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EAEPC,cAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YACnC,OAAOC,kBAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,IAAI,EAAE,CAAC;gBACP,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE;AACX,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC"}

package/ButtonGroup/index.mjs

@@ -0,0 +1,47 @@
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React,{Children,cloneElement}from'react';import {useInterface,useBreakpointProps,useColorTemplate,Tag}from'@xanui/core';const ButtonGroup = React.forwardRef((_a, ref) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    let [_b] = useInterface("ButtonGroup", rest, {
+        size: "medium"
+    }), { color, variant, size } = _b, props = __rest(_b, ["color", "variant", "size"]);
+    const _p = {};
+    if (color)
+        _p.color = color;
+    const p = useBreakpointProps(_p);
+    color = p.color;
+    const template = useColorTemplate(color, "outline");
+    const sizes = {
+        small: {
+            height: 32,
+        },
+        medium: {
+            height: 40,
+        },
+        large: {
+            height: 52,
+        }
+    };
+    return (jsx(Tag, Object.assign({}, props, sizes[size], { sxr: {
+            display: "inline-flex",
+            overflow: "hidden",
+            radius: 1,
+            '& button:not(:last-of-type)': {
+                borderTopRightRadius: 0,
+                borderBottomRightRadius: 0,
+                borderRight: 1,
+                borderColor: template.borderColor
+            },
+            '& button:not(:first-of-type)': {
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderLeft: 0
+            }
+        }, baseClass: 'button-group', ref: ref }, { children: Children.map(children, (child) => {
+            return cloneElement(child, {
+                flex: 1,
+                color,
+                variant,
+                size,
+                corner: "squar"
+            });
+        }) })));
+});export{ButtonGroup as default};//# sourceMappingURL=index.mjs.map

package/ButtonGroup/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, ColorTemplateType, useColorTemplate, 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<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\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    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const template = useColorTemplate(color, \"outline\")\n\n    const sizes: any = {\n        small: {\n            height: 32,\n        },\n        medium: {\n            height: 40,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                overflow: \"hidden\",\n                radius: 1,\n                '& button:not(:last-of-type)': {\n                    borderTopRightRadius: 0,\n                    borderBottomRightRadius: 0,\n                    borderRight: 1,\n                    borderColor: template.borderColor\n                },\n                '& button:not(:first-of-type)': {\n                    borderTopLeftRadius: 0,\n                    borderBottomLeftRadius: 0,\n                    borderLeft: 0\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: 1,\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":"8LAYA,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;AACT,KAAA,CAAC,EAFG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAErC;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;IAEf,MAAM,QAAQ,GAAG,gBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC;AAEnD,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,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,MAAM,EAAE,CAAC;AACT,YAAA,6BAA6B,EAAE;AAC3B,gBAAA,oBAAoB,EAAE,CAAC;AACvB,gBAAA,uBAAuB,EAAE,CAAC;AAC1B,gBAAA,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,QAAQ,CAAC;AACzB,aAAA;AACD,YAAA,8BAA8B,EAAE;AAC5B,gBAAA,mBAAmB,EAAE,CAAC;AACtB,gBAAA,sBAAsB,EAAE,CAAC;AACzB,gBAAA,UAAU,EAAE;AACf;AACJ,SAAA,EACD,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EAEP,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YACnC,OAAO,YAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,IAAI,EAAE,CAAC;gBACP,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE;AACX,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC"}

package/Calendar/index.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { useBreakpointPropsType, ColorTemplateColors } from '@xanui/core';
+
+type CalendarProps = {
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
+    viewMode?: useBreakpointPropsType<"year" | "month" | "day">;
+    onButtonClick?: (mode: CalendarProps["viewMode"], value: CalendarProps["value"]) => void;
+    color?: useBreakpointPropsType<ColorTemplateColors>;
+};
+declare const Calendar: ({ value, ...rest }: CalendarProps) => react_jsx_runtime.JSX.Element;
+
+export { Calendar as default };
+export type { CalendarProps };

package/Calendar/index.js

@@ -0,0 +1,140 @@
+'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 }) => {
+    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, Object.assign({ sx: {
+                width: (boxWidth - 12) / 3,
+                alignItems: "center",
+                justifyContent: "center",
+                p: .1
+            }, className: 'calender-year-item' }, { children: jsxRuntime.jsx(index$4.default, Object.assign({ 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, Object.assign({ 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 = 32;
+    const boxWidth = btnWidth * 7;
+    const showCalendar = () => {
+        let firstDay = (new Date(year, month)).getDay();
+        let rows = [];
+        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.default, { 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: "outline",
+                            color: color
+                        };
+                    }
+                    if (isSelected) {
+                        css = {
+                            variant: "fill",
+                            color: color
+                        };
+                    }
+                    row.push(jsxRuntime.jsx(index.default, Object.assign({ 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) => {
+                                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.default, Object.assign({ 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.default, Object.assign({ width: (boxWidth - 12) / 2, alignItems: "center", justifyContent: "center", p: .1, className: 'calender-months-item' }, { children: jsxRuntime.jsx(index$4.default, Object.assign({ 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.default, Object.assign({ 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.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index.default, Object.assign({ flexRow: true, className: 'calender-week-container' }, { children: ['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, idx) => (jsxRuntime.jsx(index.default, Object.assign({ width: btnWidth, height: btnWidth, alignItems: "center", justifyContent: "center" }, { children: jsxRuntime.jsx(index$1.default, Object.assign({ fontWeight: 500, fontSize: "button", color: "text.secondary" }, { children: day })) }), day + idx))) })), showCalendar()] }));
+            break;
+    }
+    return (jsxRuntime.jsx(index$2.default, Object.assign({ className: 'calender-root', maxHeight: 308, width: 250, radius: 1, bgcolor: "background.primary", startContent: jsxRuntime.jsxs(index.default, Object.assign({ className: 'calender-header', flexRow: true, alignItems: "center", justifyContent: "space-between", p: 1 }, { children: [jsxRuntime.jsx(index$1.default, Object.assign({ 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, Object.assign({ 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, Object.assign({ 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, Object.assign({ 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, Object.assign({ height: "100%", p: .5, className: 'calender-container' }, { children: view })) })));
+};exports.default=Calendar;//# sourceMappingURL=index.js.map

package/Calendar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Calendar/index.tsx"],"sourcesContent":["import { 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 { ColorTemplateColors, 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<ColorTemplateColors>;\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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"}

package/Calendar/index.mjs

@@ -0,0 +1,140 @@
+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++) {
+        const selected = year == y;
+        years.push(jsx(Stack, Object.assign({ sx: {
+                width: (boxWidth - 12) / 3,
+                alignItems: "center",
+                justifyContent: "center",
+                p: .1
+            }, className: 'calender-year-item' }, { children: jsx(Button, Object.assign({ 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));
+    }
+    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 (jsx(Stack, Object.assign({ sx: {
+            flexWrap: "wrap",
+            flexDirection: "row",
+            overflow: "hidden",
+            overflowY: "auto"
+        }, className: 'calender-years' }, { children: years })));
+};
+const Calendar = (_a) => {
+    var { value } = _a, rest = __rest(_a, ["value"]);
+    let [{ onChange, viewMode: VMode, onButtonClick, color }] = useInterface("Calender", rest, {});
+    const _p = {};
+    if (VMode)
+        _p.VMode = VMode;
+    if (color)
+        _p.color = color;
+    const p = useBreakpointProps(_p);
+    color = p.color || "brand";
+    let [viewMode, setViewMode] = useState(p.VMode || "day");
+    let [selectedDate, setSelectedDate] = useState(new Date());
+    selectedDate = value instanceof Date ? value : selectedDate;
+    const [currentDate, setCurrentDate] = 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 = 32;
+    const boxWidth = btnWidth * 7;
+    const showCalendar = () => {
+        let firstDay = (new Date(year, month)).getDay();
+        let rows = [];
+        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(jsx(Stack, { 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: "outline",
+                            color: color
+                        };
+                    }
+                    if (isSelected) {
+                        css = {
+                            variant: "fill",
+                            color: color
+                        };
+                    }
+                    row.push(jsx(Stack, Object.assign({ sx: {
+                            width: btnWidth,
+                            height: btnWidth,
+                            alignItems: "center",
+                            justifyContent: "center"
+                        }, className: 'calender-day-item' }, { children: jsx(IconButton, Object.assign({ className: 'calender-day-button', variant: isSelected ? "fill" : "text", color: isToday ? color : "default" }, css, { "data-value": date, onClick: (e) => {
+                                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(jsx(Stack, Object.assign({ 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(jsx(Stack, Object.assign({ width: (boxWidth - 12) / 2, alignItems: "center", justifyContent: "center", p: .1, className: 'calender-months-item' }, { children: jsx(Button, Object.assign({ 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 (jsx(Stack, Object.assign({ className: 'calender-months', sx: {
+                flexWrap: "wrap",
+                overflow: "hidden",
+                overflowY: "auto",
+                flexDirection: "row"
+            } }, { children: months })));
+    };
+    let view = null;
+    switch (viewMode) {
+        case "year":
+            view = 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 = (jsxs(Fragment, { children: [jsx(Stack, Object.assign({ flexRow: true, className: 'calender-week-container' }, { children: ['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, idx) => (jsx(Stack, Object.assign({ width: btnWidth, height: btnWidth, alignItems: "center", justifyContent: "center" }, { children: jsx(Text, Object.assign({ fontWeight: 500, fontSize: "button", color: "text.secondary" }, { children: day })) }), day + idx))) })), showCalendar()] }));
+            break;
+    }
+    return (jsx(ViewBox, Object.assign({ className: 'calender-root', maxHeight: 308, width: 250, radius: 1, bgcolor: "background.primary", startContent: jsxs(Stack, Object.assign({ className: 'calender-header', flexRow: true, alignItems: "center", justifyContent: "space-between", p: 1 }, { children: [jsx(Text, Object.assign({ fontWeight: "bold", cursor: "pointer", onClick: () => setViewMode(viewMode !== 'day' ? "day" : "year"), flex: 1 }, { children: currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' }) })), jsx(IconButton, Object.assign({ color: "default", variant: 'text', size: 28, onClick: () => {
+                        setCurrentDate(new Date());
+                        onChange ? onChange(new Date()) : setSelectedDate(new Date());
+                    } }, { children: jsx(ResetIcon, { fontSize: 20 }) })), jsx(IconButton, Object.assign({ color: "default", variant: 'text', size: 28, onClick: () => {
+                        setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
+                    } }, { children: jsx(IconKeyboardArrowLeft, {}) })), jsx(IconButton, Object.assign({ color: "default", variant: 'text', size: 28, onClick: () => {
+                        setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
+                    } }, { children: jsx(IconKeyboardArrowRight, {}) }))] })) }, { children: jsx(Stack, Object.assign({ height: "100%", p: .5, className: 'calender-container' }, { children: view })) })));
+};export{Calendar as default};//# sourceMappingURL=index.mjs.map

package/Calendar/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Calendar/index.tsx"],"sourcesContent":["import { 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 { ColorTemplateColors, 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<ColorTemplateColors>;\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":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/CalendarInput/index.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { InputProps } from '../Input/index.js';
+import { MenuProps } from '../Menu/index.js';
+import { CalendarProps } from '../Calendar/index.js';
+
+type CalenderInpurProps = Omit<InputProps, "value" | "onChange"> & {
+    value?: CalendarProps["value"];
+    onChange?: CalendarProps["onChange"];
+    getInputValue?: (value?: Date | null) => string;
+    slotProps?: {
+        calender?: CalendarProps;
+        menu?: MenuProps;
+    };
+};
+declare const CalenderInput: (props: CalenderInpurProps) => react_jsx_runtime.JSX.Element;
+
+export { CalenderInput as default };
+export type { CalenderInpurProps };

package/CalendarInput/index.js

@@ -0,0 +1,11 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),index=require('../Input/index.js'),index$3=require('../Menu/index.js'),React=require('react'),index$5=require('../Calendar/index.js'),index$1=require('../Stack/index.js'),index$4=require('../ClickOutside/index.js'),CalendarIcon=require('@xanui/icons/CalendarMonth'),index$2=require('../IconButton/index.js'),ClearIcon=require('@xanui/icons/Clear'),core=require('@xanui/core');const CalenderInput = (props) => {
+    let [_a] = core.useInterface("CanlendarInput", props, {}), { value, onChange, getInputValue, slotProps, placeholder } = _a, inputProps = tslib.__rest(_a, ["value", "onChange", "getInputValue", "slotProps", "placeholder"]);
+    const [target, setTarget] = React.useState();
+    const inputRef = React.useRef(null);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index.default, Object.assign({ readOnly: true, onClick: () => setTarget(target ? null : inputRef === null || inputRef === void 0 ? void 0 : inputRef.current), startIcon: jsxRuntime.jsx(CalendarIcon, {}) }, inputProps, { endIcon: jsxRuntime.jsx(jsxRuntime.Fragment, { children: value && jsxRuntime.jsx(index$1.default, { children: jsxRuntime.jsx(index$2.default, Object.assign({ color: "default", size: 28, variant: "text", onClick: () => {
+                                onChange && onChange(null);
+                            } }, { children: jsxRuntime.jsx(ClearIcon, { fontSize: 20 }) })) }) }), cursor: "pointer", containerRef: inputRef, value: getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString("en-US") : "") })), jsxRuntime.jsx(index$3.default, Object.assign({ target: target, placement: "bottom-left", bgcolor: "transparent" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { children: jsxRuntime.jsx(index$4.default, Object.assign({ onClickOutside: () => setTarget(null) }, { children: jsxRuntime.jsx(index$5.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.calender, { value: value, onChange: (e) => {
+                            setTarget(null);
+                            onChange && onChange(e);
+                        } })) })) }))] }));
+};exports.default=CalenderInput;//# sourceMappingURL=index.js.map

package/CalendarInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/CalendarInput/index.tsx"],"sourcesContent":["\nimport Input, { InputProps } from '../Input'\nimport Menu, { MenuProps } from '../Menu'\nimport { useRef, useState } from 'react'\nimport Calendar, { CalendarProps } from '../Calendar'\nimport Stack from '../Stack'\nimport ClickOutside from '../ClickOutside'\nimport CalendarIcon from '@xanui/icons/CalendarMonth';\nimport IconButton from '../IconButton'\nimport ClearIcon from '@xanui/icons/Clear';\nimport { useInterface } from '@xanui/core'\n\nexport type CalenderInpurProps = Omit<InputProps, \"value\" | \"onChange\"> & {\n    value?: CalendarProps[\"value\"];\n    onChange?: CalendarProps[\"onChange\"];\n    getInputValue?: (value?: Date | null) => string;\n    slotProps?: {\n        calender?: CalendarProps;\n        menu?: MenuProps;\n    }\n}\n\nconst CalenderInput = (props: CalenderInpurProps) => {\n    let [{ value, onChange, getInputValue, slotProps, placeholder, ...inputProps }] = useInterface<any>(\"CanlendarInput\", props, {})\n    const [target, setTarget] = useState<any>()\n    const inputRef: any = useRef(null)\n\n    return (\n        <>\n            <Input\n                readOnly\n                onClick={() => setTarget(target ? null : inputRef?.current)}\n                startIcon={<CalendarIcon />}\n                {...inputProps}\n                endIcon={<>\n                    {value && <Stack>\n                        <IconButton\n                            color=\"default\"\n                            size={28}\n                            variant=\"text\"\n                            onClick={() => {\n                                onChange && onChange(null)\n                            }}\n                        >\n                            <ClearIcon fontSize={20} />\n                        </IconButton>\n                    </Stack>}\n                </>}\n                cursor=\"pointer\"\n                containerRef={inputRef}\n                value={getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString(\"en-US\") : \"\")}\n            />\n            <Menu\n                target={target}\n                placement=\"bottom-left\"\n                bgcolor=\"transparent\"\n                {...slotProps?.menu}\n            >\n                <ClickOutside onClickOutside={() => setTarget(null)}>\n                    <Calendar\n                        {...slotProps?.calender}\n                        value={value}\n                        onChange={(e) => {\n                            setTarget(null)\n                            onChange && onChange(e)\n                        }}\n                    />\n                </ClickOutside>\n            </Menu>\n        </>\n    )\n}\n\nexport default CalenderInput"],"names":["useInterface","__rest","useState","useRef","_jsxs","_Fragment","_jsx","Input","Stack","IconButton","Menu","ClickOutside","Calendar"],"mappings":"igBAsBA,MAAM,aAAa,GAAG,CAAC,KAAyB,KAAI;IAChD,IAAI,CAAA,EAAA,CAAA,GAA8EA,iBAAY,CAAM,gBAAgB,EAAE,KAAK,EAAE,EAAE,CAAC,EAA3H,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW,EAAA,GAAA,EAAiB,EAAZ,UAAU,GAAAC,YAAA,CAAA,EAAA,EAAvE,CAAA,OAAA,EAAA,UAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,CAAyE,CAAkD;IAChI,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGC,cAAQ,EAAO;AAC3C,IAAA,MAAM,QAAQ,GAAQC,YAAM,CAAC,IAAI,CAAC;AAElC,IAAA,QACIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACIC,cAAA,CAACC,aAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACF,QAAQ,EAAA,IAAA,EACR,OAAO,EAAE,MAAM,SAAS,CAAC,MAAM,GAAG,IAAI,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAE,OAAO,CAAC,EAC3D,SAAS,EAAED,cAAA,CAAC,YAAY,EAAA,EAAA,CAAG,EAAA,EACvB,UAAU,EAAA,EACd,OAAO,EAAEA,cAAA,CAAAD,mBAAA,EAAA,EAAA,QAAA,EACJ,KAAK,IAAIC,cAAA,CAACE,eAAK,cACZF,cAAA,CAACG,eAAU,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,EAAE,EACR,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,MAAK;AACV,gCAAA,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC;4BAC9B,CAAC,EAAA,EAAA,EAAA,QAAA,EAEDH,eAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,EAAE,EAAA,CAAI,EAAA,CAAA,CAClB,EAAA,CACT,EAAA,CACT,EACH,MAAM,EAAC,SAAS,EAChB,YAAY,EAAE,QAAQ,EACtB,KAAK,EAAE,aAAa,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAA,CAAA,CAChG,EACFA,cAAA,CAACI,eAAI,kBACD,MAAM,EAAE,MAAM,EACd,SAAS,EAAC,aAAa,EACvB,OAAO,EAAC,aAAa,EAAA,EACjB,SAAS,aAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,EAAA,EAAA,QAAA,EAEnBJ,eAACK,eAAY,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,cAAc,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,EAAA,EAAA,EAAA,QAAA,EAC/CL,cAAA,CAACM,eAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACD,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,QAAQ,EAAA,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,KAAI;4BACZ,SAAS,CAAC,IAAI,CAAC;AACf,4BAAA,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC;AAC3B,wBAAA,CAAC,EAAA,CAAA,CACH,EAAA,CAAA,CACS,EAAA,CAAA,CACZ,CAAA,EAAA,CACR;AAEX"}

package/CalendarInput/index.mjs

@@ -0,0 +1,11 @@
+import {__rest}from'tslib';import {jsxs,Fragment,jsx}from'react/jsx-runtime';import Input from'../Input/index.mjs';import Menu from'../Menu/index.mjs';import {useState,useRef}from'react';import Calendar from'../Calendar/index.mjs';import Stack from'../Stack/index.mjs';import ClickOutside from'../ClickOutside/index.mjs';import CalendarIcon from'@xanui/icons/CalendarMonth';import IconButton from'../IconButton/index.mjs';import ClearIcon from'@xanui/icons/Clear';import {useInterface}from'@xanui/core';const CalenderInput = (props) => {
+    let [_a] = useInterface("CanlendarInput", props, {}), { value, onChange, getInputValue, slotProps, placeholder } = _a, inputProps = __rest(_a, ["value", "onChange", "getInputValue", "slotProps", "placeholder"]);
+    const [target, setTarget] = useState();
+    const inputRef = useRef(null);
+    return (jsxs(Fragment, { children: [jsx(Input, Object.assign({ readOnly: true, onClick: () => setTarget(target ? null : inputRef === null || inputRef === void 0 ? void 0 : inputRef.current), startIcon: jsx(CalendarIcon, {}) }, inputProps, { endIcon: jsx(Fragment, { children: value && jsx(Stack, { children: jsx(IconButton, Object.assign({ color: "default", size: 28, variant: "text", onClick: () => {
+                                onChange && onChange(null);
+                            } }, { children: jsx(ClearIcon, { fontSize: 20 }) })) }) }), cursor: "pointer", containerRef: inputRef, value: getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString("en-US") : "") })), jsx(Menu, Object.assign({ target: target, placement: "bottom-left", bgcolor: "transparent" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { children: jsx(ClickOutside, Object.assign({ onClickOutside: () => setTarget(null) }, { children: jsx(Calendar, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.calender, { value: value, onChange: (e) => {
+                            setTarget(null);
+                            onChange && onChange(e);
+                        } })) })) }))] }));
+};export{CalenderInput as default};//# sourceMappingURL=index.mjs.map

package/CalendarInput/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/CalendarInput/index.tsx"],"sourcesContent":["\nimport Input, { InputProps } from '../Input'\nimport Menu, { MenuProps } from '../Menu'\nimport { useRef, useState } from 'react'\nimport Calendar, { CalendarProps } from '../Calendar'\nimport Stack from '../Stack'\nimport ClickOutside from '../ClickOutside'\nimport CalendarIcon from '@xanui/icons/CalendarMonth';\nimport IconButton from '../IconButton'\nimport ClearIcon from '@xanui/icons/Clear';\nimport { useInterface } from '@xanui/core'\n\nexport type CalenderInpurProps = Omit<InputProps, \"value\" | \"onChange\"> & {\n    value?: CalendarProps[\"value\"];\n    onChange?: CalendarProps[\"onChange\"];\n    getInputValue?: (value?: Date | null) => string;\n    slotProps?: {\n        calender?: CalendarProps;\n        menu?: MenuProps;\n    }\n}\n\nconst CalenderInput = (props: CalenderInpurProps) => {\n    let [{ value, onChange, getInputValue, slotProps, placeholder, ...inputProps }] = useInterface<any>(\"CanlendarInput\", props, {})\n    const [target, setTarget] = useState<any>()\n    const inputRef: any = useRef(null)\n\n    return (\n        <>\n            <Input\n                readOnly\n                onClick={() => setTarget(target ? null : inputRef?.current)}\n                startIcon={<CalendarIcon />}\n                {...inputProps}\n                endIcon={<>\n                    {value && <Stack>\n                        <IconButton\n                            color=\"default\"\n                            size={28}\n                            variant=\"text\"\n                            onClick={() => {\n                                onChange && onChange(null)\n                            }}\n                        >\n                            <ClearIcon fontSize={20} />\n                        </IconButton>\n                    </Stack>}\n                </>}\n                cursor=\"pointer\"\n                containerRef={inputRef}\n                value={getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString(\"en-US\") : \"\")}\n            />\n            <Menu\n                target={target}\n                placement=\"bottom-left\"\n                bgcolor=\"transparent\"\n                {...slotProps?.menu}\n            >\n                <ClickOutside onClickOutside={() => setTarget(null)}>\n                    <Calendar\n                        {...slotProps?.calender}\n                        value={value}\n                        onChange={(e) => {\n                            setTarget(null)\n                            onChange && onChange(e)\n                        }}\n                    />\n                </ClickOutside>\n            </Menu>\n        </>\n    )\n}\n\nexport default CalenderInput"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"ufAsBA,MAAM,aAAa,GAAG,CAAC,KAAyB,KAAI;IAChD,IAAI,CAAA,EAAA,CAAA,GAA8E,YAAY,CAAM,gBAAgB,EAAE,KAAK,EAAE,EAAE,CAAC,EAA3H,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW,EAAA,GAAA,EAAiB,EAAZ,UAAU,GAAA,MAAA,CAAA,EAAA,EAAvE,CAAA,OAAA,EAAA,UAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,CAAyE,CAAkD;IAChI,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAO;AAC3C,IAAA,MAAM,QAAQ,GAAQ,MAAM,CAAC,IAAI,CAAC;AAElC,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAA,CAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACF,QAAQ,EAAA,IAAA,EACR,OAAO,EAAE,MAAM,SAAS,CAAC,MAAM,GAAG,IAAI,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAE,OAAO,CAAC,EAC3D,SAAS,EAAEA,GAAA,CAAC,YAAY,EAAA,EAAA,CAAG,EAAA,EACvB,UAAU,EAAA,EACd,OAAO,EAAEA,GAAA,CAAAD,QAAA,EAAA,EAAA,QAAA,EACJ,KAAK,IAAIC,GAAA,CAAC,KAAK,cACZA,GAAA,CAAC,UAAU,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,EAAE,EACR,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,MAAK;AACV,gCAAA,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC;4BAC9B,CAAC,EAAA,EAAA,EAAA,QAAA,EAEDA,IAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,EAAE,EAAA,CAAI,EAAA,CAAA,CAClB,EAAA,CACT,EAAA,CACT,EACH,MAAM,EAAC,SAAS,EAChB,YAAY,EAAE,QAAQ,EACtB,KAAK,EAAE,aAAa,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAA,CAAA,CAChG,EACFA,GAAA,CAAC,IAAI,kBACD,MAAM,EAAE,MAAM,EACd,SAAS,EAAC,aAAa,EACvB,OAAO,EAAC,aAAa,EAAA,EACjB,SAAS,aAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,EAAA,EAAA,QAAA,EAEnBA,IAAC,YAAY,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,cAAc,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,EAAA,EAAA,EAAA,QAAA,EAC/CA,GAAA,CAAC,QAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACD,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,QAAQ,EAAA,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,KAAI;4BACZ,SAAS,CAAC,IAAI,CAAC;AACf,4BAAA,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC;AAC3B,wBAAA,CAAC,EAAA,CAAA,CACH,EAAA,CAAA,CACS,EAAA,CAAA,CACZ,CAAA,EAAA,CACR;AAEX"}