@xanui/ui 1.1.37 → 1.1.40

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;;"}

package/Calendar/index.js

@@ -1,35 +1,33 @@
 "use client";
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var index$1 = require('../Stack/index.js');
-var index$3 = require('../IconButton/index.js');
-var IconKeyboardArrowRight = require('@xanui/icons/KeyboardArrowRight');
-var IconKeyboardArrowLeft = require('@xanui/icons/KeyboardArrowLeft');
-var index$2 = require('../Text/index.js');
-var index$4 = require('../Button/index.js');
-var ResetIcon = require('@xanui/icons/Replay');
-var index = require('../ViewBox/index.js');
-var core = require('@xanui/core');
+import { __rest } from 'tslib';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import Stack from '../Stack/index.js';
+import IconButton from '../IconButton/index.js';
+import IconKeyboardArrowRight from '@xanui/icons/KeyboardArrowRight';
+import IconKeyboardArrowLeft from '@xanui/icons/KeyboardArrowLeft';
+import Text from '../Text/index.js';
+import Button from '../Button/index.js';
+import ResetIcon from '@xanui/icons/Replay';
+import ViewBox from '../ViewBox/index.js';
+import { useInterface, useBreakpointProps } from '@xanui/core';
 
 const ShowYears = ({ color, year, today, onClick }) => {
     let years = [];
-    const selectedRef = React.useRef(null);
+    const selectedRef = useRef(null);
     for (let y = 1900; y < today.getFullYear() + 40; y++) {
         const selected = year == y;
-        years.push(jsxRuntime.jsx(index$1, { sx: {
+        years.push(jsx(Stack, { sx: {
                 width: 50,
                 p: .1
-            }, className: 'calender-year-item', children: jsxRuntime.jsx(index$4, { color: selected ? color : "default", className: 'calender-year-button', size: 'small', corner: "circle", ref: selected ? selectedRef : null, onClick: () => onClick(y), variant: selected ? "fill" : "text", children: y }) }, y));
+            }, className: 'calender-year-item', children: jsx(Button, { color: selected ? color : "default", className: 'calender-year-button', size: 'small', corner: "circle", ref: selected ? selectedRef : null, onClick: () => onClick(y), variant: selected ? "fill" : "text", children: y }) }, y));
     }
-    React.useEffect(() => {
+    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: {
+    return (jsx(Stack, { sx: {
             flexWrap: "wrap",
             flexDirection: "row",
             overflow: "hidden",
@@ -37,19 +35,19 @@ const ShowYears = ({ color, year, today, onClick }) => {
         }, 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, {});
+    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 = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     color = p.color || "brand";
-    let [viewMode, setViewMode] = React.useState(p.VMode || "day");
-    let [selectedDate, setSelectedDate] = React.useState(new Date());
+    let [viewMode, setViewMode] = useState(p.VMode || "day");
+    let [selectedDate, setSelectedDate] = useState(new Date());
     selectedDate = value instanceof Date ? value : selectedDate;
-    const [currentDate, setCurrentDate] = React.useState(selectedDate);
+    const [currentDate, setCurrentDate] = useState(selectedDate);
     const year = currentDate.getFullYear();
     const month = currentDate.getMonth();
     const daysInMonth = 32 - new Date(year, month, 32).getDate();
@@ -63,20 +61,20 @@ const Calendar = (_a) => {
         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: {
+            row.push(jsx(Stack, { sx: {
                     width: btnWidth,
                     height: btnWidth,
                     alignItems: "center",
                     justifyContent: "center"
-                }, children: jsxRuntime.jsx(index$3, { variant: "text", color: "default", disabled: true, children: k }) }, "dayname-" + i));
+                }, children: jsx(IconButton, { 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"));
+        rows.push(jsx(Stack, { 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: {
+                    row.push(jsx(Stack, { alignItems: "center", justifyContent: "center", sx: {
                             width: btnWidth,
                             height: btnWidth,
                             alignItems: "center",
@@ -102,12 +100,12 @@ const Calendar = (_a) => {
                             color: color
                         };
                     }
-                    row.push(jsxRuntime.jsx(index$1, { sx: {
+                    row.push(jsx(Stack, { 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) => {
+                        }, 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;
@@ -118,7 +116,7 @@ const Calendar = (_a) => {
                     date++;
                 }
             }
-            rows.push(jsxRuntime.jsx(index$1, { flexRow: true, className: 'calender-day-row', children: row }, "row" + i));
+            rows.push(jsx(Stack, { flexRow: true, className: 'calender-day-row', children: row }, "row" + i));
         }
         return rows;
     };
@@ -127,7 +125,7 @@ const Calendar = (_a) => {
         const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
         for (let m = 0; m < monthNames.length; m++) {
             const selected = currentDate.getMonth() === m;
-            months.push(jsxRuntime.jsx(index$1, { width: "50%", alignItems: "center", justifyContent: "center", p: .1, className: 'calender-months-item', children: jsxRuntime.jsx(index$4, { color: selected ? color : "default", className: 'calender-month-button', size: 'small', corner: "circle", variant: selected ? "fill" : 'text', onClick: () => {
+            months.push(jsx(Stack, { width: "50%", alignItems: "center", justifyContent: "center", p: .1, className: 'calender-months-item', children: jsx(Button, { color: selected ? color : "default", className: 'calender-month-button', size: 'small', corner: "circle", variant: selected ? "fill" : 'text', onClick: () => {
                         const v = new Date(currentDate.getFullYear(), m);
                         setCurrentDate(v);
                         setViewMode("day");
@@ -136,7 +134,7 @@ const Calendar = (_a) => {
                         color: selected ? "brand.text" : "text.primary"
                     }, children: monthNames[m] }) }, m));
         }
-        return (jsxRuntime.jsx(index$1, { className: 'calender-months', sx: {
+        return (jsx(Stack, { className: 'calender-months', sx: {
                 flexWrap: "wrap",
                 overflow: "hidden",
                 overflowY: "auto",
@@ -146,7 +144,7 @@ const Calendar = (_a) => {
     let view = null;
     switch (viewMode) {
         case "year":
-            view = jsxRuntime.jsx(ShowYears, { color: color, today: today, year: year, boxWidth: boxWidth, onClick: (y) => {
+            view = jsx(ShowYears, { color: color, today: today, year: year, boxWidth: boxWidth, onClick: (y) => {
                     currentDate.setFullYear(y);
                     setCurrentDate(currentDate);
                     setViewMode("month");
@@ -157,18 +155,18 @@ const Calendar = (_a) => {
             view = showMonth();
             break;
         default:
-            view = (jsxRuntime.jsx(jsxRuntime.Fragment, { children: showCalendar() }));
+            view = (jsx(Fragment, { children: showCalendar() }));
             break;
     }
-    return (jsxRuntime.jsx(index, { className: 'calender-root', maxHeight: 308, width: 250, radius: 1, bgcolor: "background.secondary", startContent: jsxRuntime.jsxs(index$1, { className: 'calender-header', flexRow: true, alignItems: "center", justifyContent: "space-between", p: 1, children: [jsxRuntime.jsx(index$2, { fontWeight: "bold", cursor: "pointer", onClick: () => setViewMode(viewMode !== 'day' ? "day" : "year"), flex: 1, children: currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' }) }), jsxRuntime.jsx(index$3, { color: "default", variant: 'text', size: 28, onClick: () => {
+    return (jsx(ViewBox, { className: 'calender-root', maxHeight: 308, width: 250, radius: 1, bgcolor: "background.secondary", startContent: jsxs(Stack, { className: 'calender-header', flexRow: true, alignItems: "center", justifyContent: "space-between", p: 1, children: [jsx(Text, { fontWeight: "bold", cursor: "pointer", onClick: () => setViewMode(viewMode !== 'day' ? "day" : "year"), flex: 1, children: currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' }) }), jsx(IconButton, { color: "default", variant: 'text', size: 28, onClick: () => {
                         setCurrentDate(new Date());
                         onChange ? onChange(new Date()) : setSelectedDate(new Date());
-                    }, children: jsxRuntime.jsx(ResetIcon, { fontSize: 20 }) }), jsxRuntime.jsx(index$3, { color: "default", variant: 'text', size: 28, onClick: () => {
+                    }, children: jsx(ResetIcon, { fontSize: 20 }) }), jsx(IconButton, { 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: () => {
+                    }, children: jsx(IconKeyboardArrowLeft, {}) }), jsx(IconButton, { 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 }) }));
+                    }, children: jsx(IconKeyboardArrowRight, {}) })] }), children: jsx(Stack, { height: "100%", p: .5, className: 'calender-container', children: view }) }));
 };
 
-module.exports = Calendar;
+export { Calendar as default };
 //# sourceMappingURL=index.js.map

package/Calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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;;"}
+{"version":3,"file":"index.js","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;;"}

package/CalendarInput/index.cjs

@@ -0,0 +1,34 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../Input/index.cjs');
+var index$3 = require('../Menu/index.cjs');
+var React = require('react');
+var index$5 = require('../Calendar/index.cjs');
+var index$1 = require('../Stack/index.cjs');
+var index$4 = require('../ClickOutside/index.cjs');
+var CalendarIcon = require('@xanui/icons/CalendarMonth');
+var index$2 = require('../IconButton/index.cjs');
+var ClearIcon = require('@xanui/icons/Clear');
+var 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, Object.assign({ readOnly: true, startIcon: jsxRuntime.jsx(CalendarIcon, {}), placeholder: placeholder }, inputProps, { endIcon: jsxRuntime.jsx(jsxRuntime.Fragment, { children: value && jsxRuntime.jsx(index$1, { children: jsxRuntime.jsx(index$2, { color: "default", size: 28, variant: "text", onClick: () => {
+                                onChange && onChange(null);
+                            }, children: jsxRuntime.jsx(ClearIcon, { fontSize: 20 }) }) }) }), cursor: "pointer", ref: inputRef, slotProps: {
+                    inputContainer: {
+                        onClick: () => setTarget(target ? null : inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)
+                    }
+                }, value: getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString("en-US") : "") })), jsxRuntime.jsx(index$3, Object.assign({ target: target, placement: "bottom-left", bgcolor: "transparent" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { children: jsxRuntime.jsx(index$4, { onClickOutside: () => setTarget(null), children: jsxRuntime.jsx(index$5, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.calender, { value: value, onChange: (e) => {
+                            setTarget(null);
+                            onChange && onChange(e);
+                        } })) }) }))] }));
+};
+
+module.exports = CalenderInput;
+//# sourceMappingURL=index.cjs.map

package/CalendarInput/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/CalendarInput/index.tsx"],"sourcesContent":["'use client'\r\nimport Input, { InputProps } from '../Input'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport { useRef, useState } from 'react'\r\nimport Calendar, { CalendarProps } from '../Calendar'\r\nimport Stack from '../Stack'\r\nimport ClickOutside from '../ClickOutside'\r\nimport CalendarIcon from '@xanui/icons/CalendarMonth';\r\nimport IconButton from '../IconButton'\r\nimport ClearIcon from '@xanui/icons/Clear';\r\nimport { useInterface } from '@xanui/core'\r\n\r\nexport type CalenderInpurProps = Omit<InputProps, \"value\" | \"onChange\" | \"slotProps\"> & {\r\n    value?: CalendarProps[\"value\"];\r\n    onChange?: CalendarProps[\"onChange\"];\r\n    getInputValue?: (value?: Date | null) => string;\r\n    slotProps?: {\r\n        input?: InputProps['slotProps'];\r\n        calender?: CalendarProps;\r\n        menu?: MenuProps;\r\n    }\r\n}\r\n\r\nconst CalenderInput = (props: CalenderInpurProps) => {\r\n    let [{ value, onChange, getInputValue, slotProps, placeholder, ...inputProps }] = useInterface<any>(\"CanlendarInput\", props, {})\r\n    const [target, setTarget] = useState<any>()\r\n    const inputRef: any = useRef(null)\r\n\r\n    return (\r\n        <>\r\n            <Input\r\n                readOnly\r\n                startIcon={<CalendarIcon />}\r\n                placeholder={placeholder}\r\n                {...inputProps}\r\n                endIcon={<>\r\n                    {value && <Stack>\r\n                        <IconButton\r\n                            color=\"default\"\r\n                            size={28}\r\n                            variant=\"text\"\r\n                            onClick={() => {\r\n                                onChange && onChange(null)\r\n                            }}\r\n                        >\r\n                            <ClearIcon fontSize={20} />\r\n                        </IconButton>\r\n                    </Stack>}\r\n                </>}\r\n                cursor=\"pointer\"\r\n                ref={inputRef}\r\n                slotProps={{\r\n                    inputContainer: {\r\n                        onClick: () => setTarget(target ? null : inputRef?.current)\r\n                    }\r\n                }}\r\n                value={getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString(\"en-US\") : \"\")}\r\n            />\r\n            <Menu\r\n                target={target}\r\n                placement=\"bottom-left\"\r\n                bgcolor=\"transparent\"\r\n                {...slotProps?.menu}\r\n            >\r\n                <ClickOutside onClickOutside={() => setTarget(null)}>\r\n                    <Calendar\r\n                        {...slotProps?.calender}\r\n                        value={value}\r\n                        onChange={(e) => {\r\n                            setTarget(null)\r\n                            onChange && onChange(e)\r\n                        }}\r\n                    />\r\n                </ClickOutside>\r\n            </Menu>\r\n        </>\r\n    )\r\n}\r\n\r\nexport default CalenderInput"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuBA;;;AAGI;;AAgB4B;;AAUZ;;AAEC;AACJ;;AAeW;AACJ;AAMxB;;"}

package/CalendarInput/index.js

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

package/CalendarInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/CalendarInput/index.tsx"],"sourcesContent":["\"use client\";\r\nimport Input, { InputProps } from '../Input'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport { useRef, useState } from 'react'\r\nimport Calendar, { CalendarProps } from '../Calendar'\r\nimport Stack from '../Stack'\r\nimport ClickOutside from '../ClickOutside'\r\nimport CalendarIcon from '@xanui/icons/CalendarMonth';\r\nimport IconButton from '../IconButton'\r\nimport ClearIcon from '@xanui/icons/Clear';\r\nimport { useInterface } from '@xanui/core'\r\n\r\nexport type CalenderInpurProps = Omit<InputProps, \"value\" | \"onChange\" | \"slotProps\"> & {\r\n    value?: CalendarProps[\"value\"];\r\n    onChange?: CalendarProps[\"onChange\"];\r\n    getInputValue?: (value?: Date | null) => string;\r\n    slotProps?: {\r\n        input?: InputProps['slotProps'];\r\n        calender?: CalendarProps;\r\n        menu?: MenuProps;\r\n    }\r\n}\r\n\r\nconst CalenderInput = (props: CalenderInpurProps) => {\r\n    let [{ value, onChange, getInputValue, slotProps, placeholder, ...inputProps }] = useInterface<any>(\"CanlendarInput\", props, {})\r\n    const [target, setTarget] = useState<any>()\r\n    const inputRef: any = useRef(null)\r\n\r\n    return (\r\n        <>\r\n            <Input\r\n                readOnly\r\n                startIcon={<CalendarIcon />}\r\n                placeholder={placeholder}\r\n                {...inputProps}\r\n                endIcon={<>\r\n                    {value && <Stack>\r\n                        <IconButton\r\n                            color=\"default\"\r\n                            size={28}\r\n                            variant=\"text\"\r\n                            onClick={() => {\r\n                                onChange && onChange(null)\r\n                            }}\r\n                        >\r\n                            <ClearIcon fontSize={20} />\r\n                        </IconButton>\r\n                    </Stack>}\r\n                </>}\r\n                cursor=\"pointer\"\r\n                ref={inputRef}\r\n                slotProps={{\r\n                    inputContainer: {\r\n                        onClick: () => setTarget(target ? null : inputRef?.current)\r\n                    }\r\n                }}\r\n                value={getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString(\"en-US\") : \"\")}\r\n            />\r\n            <Menu\r\n                target={target}\r\n                placement=\"bottom-left\"\r\n                bgcolor=\"transparent\"\r\n                {...slotProps?.menu}\r\n            >\r\n                <ClickOutside onClickOutside={() => setTarget(null)}>\r\n                    <Calendar\r\n                        {...slotProps?.calender}\r\n                        value={value}\r\n                        onChange={(e) => {\r\n                            setTarget(null)\r\n                            onChange && onChange(e)\r\n                        }}\r\n                    />\r\n                </ClickOutside>\r\n            </Menu>\r\n        </>\r\n    )\r\n}\r\n\r\nexport default CalenderInput"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuBA;;;AAGI;;AAgB4B;;AAUZ;;AAEC;AACJ;;AAeW;AACJ;AAMxB;;"}
+{"version":3,"file":"index.js","sources":["../../src/CalendarInput/index.tsx"],"sourcesContent":["'use client'\r\nimport Input, { InputProps } from '../Input'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport { useRef, useState } from 'react'\r\nimport Calendar, { CalendarProps } from '../Calendar'\r\nimport Stack from '../Stack'\r\nimport ClickOutside from '../ClickOutside'\r\nimport CalendarIcon from '@xanui/icons/CalendarMonth';\r\nimport IconButton from '../IconButton'\r\nimport ClearIcon from '@xanui/icons/Clear';\r\nimport { useInterface } from '@xanui/core'\r\n\r\nexport type CalenderInpurProps = Omit<InputProps, \"value\" | \"onChange\" | \"slotProps\"> & {\r\n    value?: CalendarProps[\"value\"];\r\n    onChange?: CalendarProps[\"onChange\"];\r\n    getInputValue?: (value?: Date | null) => string;\r\n    slotProps?: {\r\n        input?: InputProps['slotProps'];\r\n        calender?: CalendarProps;\r\n        menu?: MenuProps;\r\n    }\r\n}\r\n\r\nconst CalenderInput = (props: CalenderInpurProps) => {\r\n    let [{ value, onChange, getInputValue, slotProps, placeholder, ...inputProps }] = useInterface<any>(\"CanlendarInput\", props, {})\r\n    const [target, setTarget] = useState<any>()\r\n    const inputRef: any = useRef(null)\r\n\r\n    return (\r\n        <>\r\n            <Input\r\n                readOnly\r\n                startIcon={<CalendarIcon />}\r\n                placeholder={placeholder}\r\n                {...inputProps}\r\n                endIcon={<>\r\n                    {value && <Stack>\r\n                        <IconButton\r\n                            color=\"default\"\r\n                            size={28}\r\n                            variant=\"text\"\r\n                            onClick={() => {\r\n                                onChange && onChange(null)\r\n                            }}\r\n                        >\r\n                            <ClearIcon fontSize={20} />\r\n                        </IconButton>\r\n                    </Stack>}\r\n                </>}\r\n                cursor=\"pointer\"\r\n                ref={inputRef}\r\n                slotProps={{\r\n                    inputContainer: {\r\n                        onClick: () => setTarget(target ? null : inputRef?.current)\r\n                    }\r\n                }}\r\n                value={getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString(\"en-US\") : \"\")}\r\n            />\r\n            <Menu\r\n                target={target}\r\n                placement=\"bottom-left\"\r\n                bgcolor=\"transparent\"\r\n                {...slotProps?.menu}\r\n            >\r\n                <ClickOutside onClickOutside={() => setTarget(null)}>\r\n                    <Calendar\r\n                        {...slotProps?.calender}\r\n                        value={value}\r\n                        onChange={(e) => {\r\n                            setTarget(null)\r\n                            onChange && onChange(e)\r\n                        }}\r\n                    />\r\n                </ClickOutside>\r\n            </Menu>\r\n        </>\r\n    )\r\n}\r\n\r\nexport default CalenderInput"],"names":[],"mappings":";;;;;;;;;;;;;;AAuBA;;;AAGI;;AAgB4B;;AAUZ;;AAEC;AACJ;;AAeW;AACJ;AAMxB;;"}