@xanui/ui 1.1.38 → 1.1.40

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

package/Checkbox/index.cjs

@@ -0,0 +1,58 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+var CheckIcon = require('@xanui/icons/CheckBox');
+var UnCheckIcon = require('@xanui/icons/CheckBoxOutlineBlank');
+var IndeterminateCheckBoxIcon = require('@xanui/icons/IndeterminateCheckBox');
+
+const Checkbox = React.forwardRef((props, ref) => {
+    let [_a] = core.useInterface("Checkbox", props, {}), { color, size, checkIcon, uncheckIcon, checked, indeterminate, disabled, onChange } = _a, rest = tslib.__rest(_a, ["color", "size", "checkIcon", "uncheckIcon", "checked", "indeterminate", "disabled", "onChange"]);
+    const _p = {};
+    if (checkIcon)
+        _p.checkIcon = checkIcon;
+    if (uncheckIcon)
+        _p.uncheckIcon = uncheckIcon;
+    if (indeterminate)
+        _p.indeterminate = indeterminate;
+    if (size)
+        _p.size = size;
+    if (color)
+        _p.color = color;
+    const p = core.useBreakpointProps(_p);
+    checkIcon = p.checkIcon;
+    uncheckIcon = p.uncheckIcon;
+    indeterminate = p.indeterminate;
+    size = p.size;
+    color = p.color;
+    const [c, set] = React.useState(false);
+    checked !== null && checked !== void 0 ? checked : (checked = c);
+    size !== null && size !== void 0 ? size : (size = "medium");
+    color !== null && color !== void 0 ? color : (color = "brand");
+    onChange = onChange || (() => set(!c));
+    if (indeterminate) {
+        checked = true;
+        checkIcon = jsxRuntime.jsx(IndeterminateCheckBoxIcon, {});
+    }
+    let sizes = {
+        small: 22,
+        medium: 24,
+        large: 32
+    };
+    if (typeof size === 'string' && sizes[size]) {
+        size = sizes[size];
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(core.Tag, { baseClass: 'checkbox', onClick: () => {
+                    onChange && onChange();
+                }, sxr: Object.assign({ height: size, width: size, display: "flex", alignItems: "center", justifyContent: "center", color: checked ? color : "text.secondary", cursor: "pointer", disabled: disabled, "& svg": {
+                        fontSize: size
+                    } }, rest === null || rest === void 0 ? void 0 : rest.sx), children: checked ? (checkIcon || jsxRuntime.jsx(CheckIcon, {})) : (uncheckIcon || jsxRuntime.jsx(UnCheckIcon, {})) }), jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { component: 'input', ref: ref, readOnly: true, type: "checkbox", checked: checked, sxr: {
+                    display: "none!important"
+                } }))] }));
+});
+
+module.exports = Checkbox;
+//# sourceMappingURL=index.cjs.map

package/Checkbox/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { useState, ReactElement } from 'react';\r\nimport { Tag, useInterface, UseColorTemplateColor, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport CheckIcon from '@xanui/icons/CheckBox'\r\nimport UnCheckIcon from '@xanui/icons/CheckBoxOutlineBlank'\r\nimport IndeterminateCheckBoxIcon from '@xanui/icons/IndeterminateCheckBox';\r\n\r\n\r\nexport type CheckboxProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\r\n    checkIcon?: useBreakpointPropsType<ReactElement>;\r\n    uncheckIcon?: useBreakpointPropsType<ReactElement>;\r\n    indeterminate?: useBreakpointPropsType<boolean>;\r\n    checked?: boolean;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n}\r\n\r\nconst Checkbox = React.forwardRef((props: CheckboxProps, ref?: React.Ref<any>) => {\r\n    let [{ color, size, checkIcon, uncheckIcon, checked, indeterminate, disabled, onChange, ...rest }] = useInterface<any>(\"Checkbox\", props, {})\r\n    const _p: any = {}\r\n    if (checkIcon) _p.checkIcon = checkIcon\r\n    if (uncheckIcon) _p.uncheckIcon = uncheckIcon\r\n    if (indeterminate) _p.indeterminate = indeterminate\r\n    if (size) _p.size = size\r\n    if (color) _p.color = color\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    checkIcon = p.checkIcon\r\n    uncheckIcon = p.uncheckIcon\r\n    indeterminate = p.indeterminate\r\n    size = p.size\r\n    color = p.color\r\n\r\n    const [c, set] = useState(false)\r\n    checked ??= c\r\n    size ??= \"medium\"\r\n    color ??= \"brand\"\r\n\r\n    onChange = onChange || (() => set(!c));\r\n    if (indeterminate) {\r\n        checked = true\r\n        checkIcon = <IndeterminateCheckBoxIcon />\r\n    }\r\n\r\n    let sizes: any = {\r\n        small: 22,\r\n        medium: 24,\r\n        large: 32\r\n    }\r\n\r\n    if (typeof size === 'string' && sizes[size]) {\r\n        size = sizes[size]\r\n    }\r\n\r\n    return (\r\n        <>\r\n            <Tag\r\n                baseClass='checkbox'\r\n                onClick={() => {\r\n                    onChange && onChange()\r\n                }}\r\n                sxr={{\r\n                    height: size,\r\n                    width: size,\r\n                    display: \"flex\",\r\n                    alignItems: \"center\",\r\n                    justifyContent: \"center\",\r\n                    color: checked ? color : \"text.secondary\",\r\n                    cursor: \"pointer\",\r\n                    disabled: disabled,\r\n                    \"& svg\": {\r\n                        fontSize: size\r\n                    },\r\n                    ...rest?.sx\r\n                }}\r\n            >\r\n                {checked ? (checkIcon || <CheckIcon />) : (uncheckIcon || <UnCheckIcon />)}\r\n            </Tag>\r\n            <Tag\r\n                {...rest}\r\n                component='input'\r\n                ref={ref}\r\n                readOnly\r\n                type=\"checkbox\"\r\n                checked={checked}\r\n                sxr={{\r\n                    display: \"none!important\"\r\n                }}\r\n            />\r\n        </>\r\n    )\r\n})\r\n\r\nexport default Checkbox\r\n"],"names":[],"mappings":";;;;;;;;;;;AAiBA;AACI;;AAEA;AAAe;AACf;AAAiB;AACjB;AAAmB;AACnB;AAAU;AACV;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;;;;;AAOA;;;AAGI;;AAGJ;AACI;AACA;AACA;;;AAIA;;AAGJ;;;AAiBoB;;AAeJ;;AAKpB;;"}

package/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useState, ReactElement } from 'react';\r\nimport { Tag, useInterface, UseColorTemplateColor, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport CheckIcon from '@xanui/icons/CheckBox'\r\nimport UnCheckIcon from '@xanui/icons/CheckBoxOutlineBlank'\r\nimport IndeterminateCheckBoxIcon from '@xanui/icons/IndeterminateCheckBox';\r\n\r\n\r\nexport type CheckboxProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\r\n    checkIcon?: useBreakpointPropsType<ReactElement>;\r\n    uncheckIcon?: useBreakpointPropsType<ReactElement>;\r\n    indeterminate?: useBreakpointPropsType<boolean>;\r\n    checked?: boolean;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n}\r\n\r\nconst Checkbox = React.forwardRef((props: CheckboxProps, ref?: React.Ref<any>) => {\r\n    let [{ color, size, checkIcon, uncheckIcon, checked, indeterminate, disabled, onChange, ...rest }] = useInterface<any>(\"Checkbox\", props, {})\r\n    const _p: any = {}\r\n    if (checkIcon) _p.checkIcon = checkIcon\r\n    if (uncheckIcon) _p.uncheckIcon = uncheckIcon\r\n    if (indeterminate) _p.indeterminate = indeterminate\r\n    if (size) _p.size = size\r\n    if (color) _p.color = color\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    checkIcon = p.checkIcon\r\n    uncheckIcon = p.uncheckIcon\r\n    indeterminate = p.indeterminate\r\n    size = p.size\r\n    color = p.color\r\n\r\n    const [c, set] = useState(false)\r\n    checked ??= c\r\n    size ??= \"medium\"\r\n    color ??= \"brand\"\r\n\r\n    onChange = onChange || (() => set(!c));\r\n    if (indeterminate) {\r\n        checked = true\r\n        checkIcon = <IndeterminateCheckBoxIcon />\r\n    }\r\n\r\n    let sizes: any = {\r\n        small: 22,\r\n        medium: 24,\r\n        large: 32\r\n    }\r\n\r\n    if (typeof size === 'string' && sizes[size]) {\r\n        size = sizes[size]\r\n    }\r\n\r\n    return (\r\n        <>\r\n            <Tag\r\n                baseClass='checkbox'\r\n                onClick={() => {\r\n                    onChange && onChange()\r\n                }}\r\n                sxr={{\r\n                    height: size,\r\n                    width: size,\r\n                    display: \"flex\",\r\n                    alignItems: \"center\",\r\n                    justifyContent: \"center\",\r\n                    color: checked ? color : \"text.secondary\",\r\n                    cursor: \"pointer\",\r\n                    disabled: disabled,\r\n                    \"& svg\": {\r\n                        fontSize: size\r\n                    },\r\n                    ...rest?.sx\r\n                }}\r\n            >\r\n                {checked ? (checkIcon || <CheckIcon />) : (uncheckIcon || <UnCheckIcon />)}\r\n            </Tag>\r\n            <Tag\r\n                {...rest}\r\n                component='input'\r\n                ref={ref}\r\n                readOnly\r\n                type=\"checkbox\"\r\n                checked={checked}\r\n                sxr={{\r\n                    display: \"none!important\"\r\n                }}\r\n            />\r\n        </>\r\n    )\r\n})\r\n\r\nexport default Checkbox\r\n"],"names":[],"mappings":";;;;;;;;;AAiBA;AACI;;AAEA;AAAe;AACf;AAAiB;AACjB;AAAmB;AACnB;AAAU;AACV;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;;;;;AAOA;;;AAGI;;AAGJ;AACI;AACA;AACA;;;AAIA;;AAGJ;;;AAiBoB;;AAeJ;;AAKpB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { useState, ReactElement } from 'react';\r\nimport { Tag, useInterface, UseColorTemplateColor, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport CheckIcon from '@xanui/icons/CheckBox'\r\nimport UnCheckIcon from '@xanui/icons/CheckBoxOutlineBlank'\r\nimport IndeterminateCheckBoxIcon from '@xanui/icons/IndeterminateCheckBox';\r\n\r\n\r\nexport type CheckboxProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\r\n    checkIcon?: useBreakpointPropsType<ReactElement>;\r\n    uncheckIcon?: useBreakpointPropsType<ReactElement>;\r\n    indeterminate?: useBreakpointPropsType<boolean>;\r\n    checked?: boolean;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n}\r\n\r\nconst Checkbox = React.forwardRef((props: CheckboxProps, ref?: React.Ref<any>) => {\r\n    let [{ color, size, checkIcon, uncheckIcon, checked, indeterminate, disabled, onChange, ...rest }] = useInterface<any>(\"Checkbox\", props, {})\r\n    const _p: any = {}\r\n    if (checkIcon) _p.checkIcon = checkIcon\r\n    if (uncheckIcon) _p.uncheckIcon = uncheckIcon\r\n    if (indeterminate) _p.indeterminate = indeterminate\r\n    if (size) _p.size = size\r\n    if (color) _p.color = color\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    checkIcon = p.checkIcon\r\n    uncheckIcon = p.uncheckIcon\r\n    indeterminate = p.indeterminate\r\n    size = p.size\r\n    color = p.color\r\n\r\n    const [c, set] = useState(false)\r\n    checked ??= c\r\n    size ??= \"medium\"\r\n    color ??= \"brand\"\r\n\r\n    onChange = onChange || (() => set(!c));\r\n    if (indeterminate) {\r\n        checked = true\r\n        checkIcon = <IndeterminateCheckBoxIcon />\r\n    }\r\n\r\n    let sizes: any = {\r\n        small: 22,\r\n        medium: 24,\r\n        large: 32\r\n    }\r\n\r\n    if (typeof size === 'string' && sizes[size]) {\r\n        size = sizes[size]\r\n    }\r\n\r\n    return (\r\n        <>\r\n            <Tag\r\n                baseClass='checkbox'\r\n                onClick={() => {\r\n                    onChange && onChange()\r\n                }}\r\n                sxr={{\r\n                    height: size,\r\n                    width: size,\r\n                    display: \"flex\",\r\n                    alignItems: \"center\",\r\n                    justifyContent: \"center\",\r\n                    color: checked ? color : \"text.secondary\",\r\n                    cursor: \"pointer\",\r\n                    disabled: disabled,\r\n                    \"& svg\": {\r\n                        fontSize: size\r\n                    },\r\n                    ...rest?.sx\r\n                }}\r\n            >\r\n                {checked ? (checkIcon || <CheckIcon />) : (uncheckIcon || <UnCheckIcon />)}\r\n            </Tag>\r\n            <Tag\r\n                {...rest}\r\n                component='input'\r\n                ref={ref}\r\n                readOnly\r\n                type=\"checkbox\"\r\n                checked={checked}\r\n                sxr={{\r\n                    display: \"none!important\"\r\n                }}\r\n            />\r\n        </>\r\n    )\r\n})\r\n\r\nexport default Checkbox\r\n"],"names":[],"mappings":";;;;;;;;;AAiBA;AACI;;AAEA;AAAe;AACf;AAAiB;AACjB;AAAmB;AACnB;AAAU;AACV;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;;;;;AAOA;;;AAGI;;AAGJ;AACI;AACA;AACA;;;AAIA;;AAGJ;;;AAiBoB;;AAeJ;;AAKpB;;"}

package/Chip/index.cjs

@@ -0,0 +1,76 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+var index = require('../useCorner/index.cjs');
+
+const Chip = React.forwardRef((props, ref) => {
+    let [_a] = core.useInterface("Chip", props, {}), { label, variant, startIcon, endIcon, color, corner, size } = _a, rest = tslib.__rest(_a, ["label", "variant", "startIcon", "endIcon", "color", "corner", "size"]);
+    const _p = {};
+    if (label)
+        _p.label = label;
+    if (startIcon)
+        _p.startIcon = startIcon;
+    if (endIcon)
+        _p.endIcon = endIcon;
+    if (color)
+        _p.color = color;
+    if (variant)
+        _p.variant = variant;
+    if (corner)
+        _p.corner = corner;
+    if (size)
+        _p.size = size;
+    const p = core.useBreakpointProps(_p);
+    label = p.label;
+    startIcon = p.startIcon;
+    endIcon = p.endIcon;
+    color = p.color || "brand";
+    variant = p.variant || "fill";
+    corner = p.corner || "circle";
+    size = p.size || "medium";
+    rest.sx = rest.sx || {};
+    const cornerCss = index(corner);
+    const template = core.useColorTemplate(color, variant);
+    const sizes = {
+        small: {
+            height: 24,
+            gap: .5,
+            px: startIcon || endIcon ? .8 : 1,
+            fontSize: "small"
+        },
+        medium: {
+            height: 32,
+            gap: 1,
+            px: startIcon || endIcon ? .8 : 1.5,
+            fontSize: 'button',
+        },
+        large: {
+            height: 40,
+            fontSize: 'text',
+            gap: 1,
+            px: startIcon || endIcon ? .8 : 1.5,
+        }
+    };
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, cornerCss, template.primary, (sizes[size] || {}), rest, { sxr: {
+            display: "inline-flex",
+            flexDirection: "row",
+            alignItems: "center",
+            transition: "background .3s",
+            overflow: "hidden",
+            "&  > *": {
+                flex: "0 0 auto",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+            },
+        }, baseClass: 'chip', ref: ref, children: [startIcon, jsxRuntime.jsx(core.Tag, { sxr: {
+                    alignItems: "center",
+                    flexBox: true
+                }, children: label }), endIcon] })));
+});
+
+module.exports = Chip;
+//# sourceMappingURL=index.cjs.map

package/Chip/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport useCorner, { UseCornerTypes } from '../useCorner'\r\n\r\n\r\n\r\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\r\n    label: useBreakpointPropsType<string | ReactElement>;\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    corner?: useBreakpointPropsType<UseCornerTypes>;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n}\r\n\r\n\r\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\r\n    let [{ label, variant, startIcon, endIcon, color, corner, size, ...rest }] = useInterface<any>(\"Chip\", props, {})\r\n    const _p: any = {}\r\n    if (label) _p.label = label\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (corner) _p.corner = corner\r\n    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    label = p.label\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    color = p.color || \"brand\"\r\n    variant = p.variant || \"fill\"\r\n    corner = p.corner || \"circle\"\r\n    size = p.size || \"medium\"\r\n    rest.sx = (rest as any).sx || {};\r\n\r\n    const cornerCss = useCorner(corner)\r\n    const template = useColorTemplate(color, variant)\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 24,\r\n            gap: .5,\r\n            px: startIcon || endIcon ? .8 : 1,\r\n            fontSize: \"small\"\r\n        },\r\n        medium: {\r\n            height: 32,\r\n            gap: 1,\r\n            px: startIcon || endIcon ? .8 : 1.5,\r\n            fontSize: 'button',\r\n        },\r\n        large: {\r\n            height: 40,\r\n            fontSize: 'text',\r\n            gap: 1,\r\n            px: startIcon || endIcon ? .8 : 1.5,\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            {...cornerCss}\r\n            {...template.primary}\r\n            {...(sizes[size as any] || {})}\r\n            {...rest}\r\n            sxr={{\r\n                display: \"inline-flex\",\r\n                flexDirection: \"row\",\r\n                alignItems: \"center\",\r\n                transition: \"background .3s\",\r\n                overflow: \"hidden\",\r\n\r\n                \"&  > *\": {\r\n                    flex: \"0 0 auto\",\r\n                    textOverflow: \"ellipsis\",\r\n                    whiteSpace: \"nowrap\",\r\n                    overflow: \"hidden\",\r\n                },\r\n            }}\r\n            baseClass='chip'\r\n            ref={ref}\r\n        >\r\n            {startIcon}\r\n            <Tag\r\n                sxr={{\r\n                    alignItems: \"center\",\r\n                    flexBox: true\r\n                }}\r\n            >{label}</Tag>\r\n            {endIcon}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Chip\r\n"],"names":["useInterface","__rest","useBreakpointProps","useCorner","useColorTemplate","_jsxs","Tag","_jsx"],"mappings":";;;;;;;;AAiBA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,KAAmB,EAAE,GAAmB,KAAI;AAC3G,IAAA,IAAI,CAAA,EAAA,CAAA,GAAyEA,iBAAY,CAAM,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,EAA5G,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAA,GAAA,EAAW,EAAN,IAAI,GAAAC,YAAA,CAAA,EAAA,EAAlE,CAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,OAAA,EAAA,QAAA,EAAA,MAAA,CAAoE,CAAwC;IACjH,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,MAAM;AAAE,QAAA,EAAE,CAAC,MAAM,GAAG,MAAM;AAC9B,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AACf,IAAA,SAAS,GAAG,CAAC,CAAC,SAAS;AACvB,IAAA,OAAO,GAAG,CAAC,CAAC,OAAO;AACnB,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK,IAAI,OAAO;AAC1B,IAAA,OAAO,GAAG,CAAC,CAAC,OAAO,IAAI,MAAM;AAC7B,IAAA,MAAM,GAAG,CAAC,CAAC,MAAM,IAAI,QAAQ;AAC7B,IAAA,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,QAAQ;IACzB,IAAI,CAAC,EAAE,GAAI,IAAY,CAAC,EAAE,IAAI,EAAE;AAEhC,IAAA,MAAM,SAAS,GAAGC,KAAS,CAAC,MAAM,CAAC;IACnC,MAAM,QAAQ,GAAGC,qBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC;AAEjD,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,GAAG,EAAE,EAAE;YACP,EAAE,EAAE,SAAS,IAAI,OAAO,GAAG,EAAE,GAAG,CAAC;AACjC,YAAA,QAAQ,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,GAAG,EAAE,CAAC;YACN,EAAE,EAAE,SAAS,IAAI,OAAO,GAAG,EAAE,GAAG,GAAG;AACnC,YAAA,QAAQ,EAAE,QAAQ;AACrB,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,GAAG,EAAE,CAAC;YACN,EAAE,EAAE,SAAS,IAAI,OAAO,GAAG,EAAE,GAAG,GAAG;AACtC;KACJ;IAED,QACIC,gBAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,SAAS,EACT,QAAQ,CAAC,OAAO,GACf,KAAK,CAAC,IAAW,CAAC,IAAI,EAAE,GACzB,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,UAAU,EAAE,gBAAgB;AAC5B,YAAA,QAAQ,EAAE,QAAQ;AAElB,YAAA,QAAQ,EAAE;AACN,gBAAA,IAAI,EAAE,UAAU;AAChB,gBAAA,YAAY,EAAE,UAAU;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,QAAQ,EAAE,QAAQ;AACrB,aAAA;AACJ,SAAA,EACD,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAEP,SAAS,EACVC,cAAA,CAACD,QAAG,EAAA,EACA,GAAG,EAAE;AACD,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,OAAO,EAAE;AACZ,iBAAA,EAAA,QAAA,EACH,KAAK,EAAA,CAAO,EACb,OAAO,CAAA,EAAA,CAAA,CACN;AAEd,CAAC;;;;"}

package/CircleProgress/index.cjs

@@ -0,0 +1,129 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const CircleProgress = React.forwardRef((_a, ref) => {
+    var _b, _c, _d, _e;
+    var { children } = _a, props = tslib.__rest(_a, ["children"]);
+    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = core.useInterface("CircleProgress", props, {});
+    const _p = {};
+    if (color)
+        _p.color = color;
+    if (trackColor)
+        _p.trackColor = trackColor;
+    if (thumbColor)
+        _p.thumbColor = thumbColor;
+    if (size)
+        _p.size = size;
+    if (thumbSize)
+        _p.thumbSize = thumbSize;
+    if (trackSize)
+        _p.trackSize = trackSize;
+    if (value)
+        _p.value = value;
+    if (hideTrack)
+        _p.hideTrack = hideTrack;
+    if (showPercentage)
+        _p.showPercentage = showPercentage;
+    if (speed)
+        _p.speed = speed;
+    const p = core.useBreakpointProps(_p);
+    color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
+    trackColor = p.trackColor;
+    thumbColor = p.thumbColor;
+    size = (_c = p.size) !== null && _c !== void 0 ? _c : "medium";
+    thumbSize = (_d = p.thumbSize) !== null && _d !== void 0 ? _d : 4;
+    trackSize = p.trackSize;
+    value = p.value;
+    hideTrack = p.hideTrack;
+    showPercentage = p.showPercentage;
+    speed = (_e = p.speed) !== null && _e !== void 0 ? _e : 1.3;
+    if (trackColor === 'default') {
+        trackColor = "divider";
+    }
+    if (thumbColor === 'default') {
+        thumbColor = "divider.secondary";
+    }
+    let sizes = {
+        small: 24,
+        medium: 32,
+        large: 44
+    };
+    if (typeof size === 'string' && sizes[size]) {
+        size = sizes[size];
+    }
+    let isVal = typeof value === 'number';
+    const animrotate = "anim" + React.useId().replace(":", "");
+    const animdash = "anim" + React.useId().replace(":", "");
+    if (isVal && value > 100)
+        value = 100;
+    const circumference = 125.66370614359172; //radius * 2 * Math.PI
+    const percent = circumference - ((value || 0) / 100) * circumference;
+    if (showPercentage && !children) {
+        children = jsxRuntime.jsxs(core.Tag, { sxr: {
+                color: color === 'default' ? "text.primary" : `${color}.primary`,
+                fontSize: size / 4
+            }, children: [value, "%"] });
+    }
+    return (jsxRuntime.jsxs(core.Tag, { baseClass: 'circle-progress', sxr: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            "& svg[class='circle-progress-svg']": {
+                zIndex: 1,
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                transform: isVal ? "rotate(-90deg)" : "none",
+                transformOrigin: isVal ? "center" : "initial",
+                animation: isVal ? "none" : `${animrotate} ${speed}s linear infinite`,
+                [`@keyframes ${animrotate}`]: {
+                    "100%": {
+                        transform: "rotate(360deg)"
+                    }
+                },
+                "& circle.circle-progress-thumb": {
+                    strokeDasharray: circumference,
+                    strokeDashoffset: percent,
+                    stroke: thumbColor || (color === 'default' ? `divider` : `${color}.primary`),
+                    fill: "none",
+                    strokeWidth: thumbSize,
+                    strokeLinecap: "round",
+                    animation: isVal ? "none" : `${animdash} ${speed}s ease-in-out infinite`,
+                    [`@keyframes ${animdash}`]: {
+                        "0%": { strokeDasharray: "1, 150", strokeDashoffset: 0 },
+                        "50%": { strokeDasharray: "90, 150", strokeDashoffset: -35 },
+                        "100%": { strokeDasharray: "90, 150", strokeDashoffset: -124 }
+                    }
+                },
+                "& circle.circle-progress-track": {
+                    fill: "none",
+                    stroke: trackColor || (color === 'default' ? `text.primary` : `${color}.soft.secondary`),
+                    strokeWidth: trackSize !== null && trackSize !== void 0 ? trackSize : thumbSize,
+                }
+            },
+            width: size,
+            height: size,
+            position: "relative"
+        }, ref: ref, children: [jsxRuntime.jsxs("svg", { viewBox: "0 0 50 50", className: "circle-progress-svg", children: [!hideTrack && jsxRuntime.jsx("circle", { className: "circle-progress-track", cx: "25", cy: "25", r: 20 }), jsxRuntime.jsx("circle", { className: "circle-progress-thumb", cx: "25", cy: "25", r: 20 })] }), !!children && jsxRuntime.jsx(core.Tag, { baseClass: "circle-progress-content", sxr: {
+                    zIndex: 2,
+                    width: size - thumbSize,
+                    height: size - thumbSize,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    '& *': {
+                        maxWidth: size - (thumbSize + 8),
+                        maxHeight: size - (thumbSize + 8),
+                    }
+                }, children: children })] }));
+});
+
+module.exports = CircleProgress;
+//# sourceMappingURL=index.cjs.map

package/CircleProgress/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/CircleProgress/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { ReactElement, useId } from \"react\"\r\nimport { Tag, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\nexport type CircleProgressProps = {\r\n    children?: ReactElement;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    trackColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    thumbColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    thumbSize?: useBreakpointPropsType<number>;\r\n    trackSize?: useBreakpointPropsType<number>;\r\n    value?: useBreakpointPropsType<number>;\r\n    hideTrack?: useBreakpointPropsType<boolean>;\r\n    showPercentage?: useBreakpointPropsType<boolean>;\r\n    speed?: useBreakpointPropsType<number>;\r\n}\r\n\r\nconst CircleProgress = React.forwardRef(({ children, ...props }: CircleProgressProps, ref: React.Ref<any>) => {\r\n    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = useInterface<any>(\"CircleProgress\", props, {})\r\n    const _p: any = {}\r\n    if (color) _p.color = color\r\n    if (trackColor) _p.trackColor = trackColor\r\n    if (thumbColor) _p.thumbColor = thumbColor\r\n    if (size) _p.size = size\r\n    if (thumbSize) _p.thumbSize = thumbSize\r\n    if (trackSize) _p.trackSize = trackSize\r\n    if (value) _p.value = value\r\n    if (hideTrack) _p.hideTrack = hideTrack\r\n    if (showPercentage) _p.showPercentage = showPercentage\r\n    if (speed) _p.speed = speed\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    color = p.color ?? \"brand\"\r\n    trackColor = p.trackColor\r\n    thumbColor = p.thumbColor\r\n    size = p.size ?? \"medium\"\r\n    thumbSize = p.thumbSize ?? 4\r\n    trackSize = p.trackSize\r\n    value = p.value\r\n    hideTrack = p.hideTrack\r\n    showPercentage = p.showPercentage\r\n    speed = p.speed ?? 1.3\r\n\r\n    if (trackColor === 'default') {\r\n        trackColor = \"divider\"\r\n    }\r\n\r\n    if (thumbColor === 'default') {\r\n        thumbColor = \"divider.secondary\"\r\n    }\r\n\r\n\r\n    let sizes: any = {\r\n        small: 24,\r\n        medium: 32,\r\n        large: 44\r\n    }\r\n    if (typeof size === 'string' && sizes[size]) {\r\n        size = sizes[size]\r\n    }\r\n\r\n    let isVal = typeof value === 'number'\r\n    const animrotate = \"anim\" + useId().replace(\":\", \"\")\r\n    const animdash = \"anim\" + useId().replace(\":\", \"\")\r\n    if (isVal && (value as number) > 100) value = 100\r\n    const circumference = 125.66370614359172 //radius * 2 * Math.PI\r\n    const percent = circumference - ((value || 0) / 100) * circumference\r\n\r\n    if (showPercentage && !children) {\r\n        children = <Tag\r\n            sxr={{\r\n                color: color === 'default' ? \"text.primary\" : `${color}.primary`,\r\n                fontSize: size / 4\r\n            }}\r\n        >{value}%</Tag>\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            baseClass='circle-progress'\r\n            sxr={{\r\n                display: \"inline-flex\",\r\n                alignItems: \"center\",\r\n                justifyContent: \"center\",\r\n                \"& svg[class='circle-progress-svg']\": {\r\n                    zIndex: 1,\r\n                    position: \"absolute\",\r\n                    top: 0,\r\n                    left: 0,\r\n                    width: \"100%\",\r\n                    height: \"100%\",\r\n                    transform: isVal ? \"rotate(-90deg)\" : \"none\",\r\n                    transformOrigin: isVal ? \"center\" : \"initial\",\r\n                    animation: isVal ? \"none\" : `${animrotate} ${speed}s linear infinite`,\r\n                    [`@keyframes ${animrotate}`]: {\r\n                        \"100%\": {\r\n                            transform: \"rotate(360deg)\"\r\n                        }\r\n                    },\r\n                    \"& circle.circle-progress-thumb\": {\r\n\r\n                        strokeDasharray: circumference,\r\n                        strokeDashoffset: percent,\r\n                        stroke: thumbColor || (color === 'default' ? `divider` : `${color}.primary`),\r\n                        fill: \"none\",\r\n                        strokeWidth: thumbSize,\r\n                        strokeLinecap: \"round\",\r\n                        animation: isVal ? \"none\" : `${animdash} ${speed}s ease-in-out infinite`,\r\n                        [`@keyframes ${animdash}`]: {\r\n                            \"0%\": { strokeDasharray: \"1, 150\", strokeDashoffset: 0 },\r\n                            \"50%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -35 },\r\n                            \"100%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -124 }\r\n                        }\r\n                    },\r\n                    \"& circle.circle-progress-track\": {\r\n                        fill: \"none\",\r\n                        stroke: trackColor || (color === 'default' ? `text.primary` : `${color}.soft.secondary`),\r\n                        strokeWidth: trackSize ?? thumbSize,\r\n                    }\r\n                },\r\n                width: size,\r\n                height: size,\r\n                position: \"relative\"\r\n            }}\r\n            ref={ref}\r\n        >\r\n            <svg viewBox=\"0 0 50 50\" className=\"circle-progress-svg\">\r\n                {!hideTrack && <circle className=\"circle-progress-track\" cx=\"25\" cy=\"25\" r={20} />}\r\n                <circle className=\"circle-progress-thumb\" cx=\"25\" cy=\"25\" r={20} />\r\n            </svg>\r\n            {!!children && <Tag\r\n                baseClass=\"circle-progress-content\"\r\n                sxr={{\r\n                    zIndex: 2,\r\n                    width: size - thumbSize,\r\n                    height: size - thumbSize,\r\n                    display: \"flex\",\r\n                    alignItems: \"center\",\r\n                    justifyContent: \"center\",\r\n                    '& *': {\r\n                        maxWidth: size - (thumbSize + 8),\r\n                        maxHeight: size - (thumbSize + 8),\r\n                    }\r\n                }}\r\n            >\r\n                {children}\r\n            </Tag>}\r\n        </Tag >\r\n    )\r\n})\r\n\r\nexport default CircleProgress\r\n\r\n"],"names":[],"mappings":";;;;;;;;AAkBA;;AAAyC;AACrC;;AAEA;AAAW;AACX;AAAgB;AAChB;AAAgB;AAChB;AAAU;AACV;AAAe;AACf;AAAe;AACf;AAAW;AACX;AAAe;AACf;AAAoB;AACpB;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAIA;;;AAKA;AACI;AACA;AACA;;;AAGA;;AAGJ;AACA;AACA;AACA;;AACA;AACA;AAEA;AACI;AAEQ;;;;;AAUA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACI;AACI;AACH;AACJ;AACD;AAEI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIC;AACJ;AACD;AACI;AACA;AACA;AACH;AACJ;AACD;AACA;AACA;AACH;AAUO;;;AAGA;AACA;AACA;AACA;AACI;AACA;AACH;AACJ;AAMjB;;"}

package/CircleProgress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/CircleProgress/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactElement, useId } from \"react\"\r\nimport { Tag, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\nexport type CircleProgressProps = {\r\n    children?: ReactElement;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    trackColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    thumbColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    thumbSize?: useBreakpointPropsType<number>;\r\n    trackSize?: useBreakpointPropsType<number>;\r\n    value?: useBreakpointPropsType<number>;\r\n    hideTrack?: useBreakpointPropsType<boolean>;\r\n    showPercentage?: useBreakpointPropsType<boolean>;\r\n    speed?: useBreakpointPropsType<number>;\r\n}\r\n\r\nconst CircleProgress = React.forwardRef(({ children, ...props }: CircleProgressProps, ref: React.Ref<any>) => {\r\n    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = useInterface<any>(\"CircleProgress\", props, {})\r\n    const _p: any = {}\r\n    if (color) _p.color = color\r\n    if (trackColor) _p.trackColor = trackColor\r\n    if (thumbColor) _p.thumbColor = thumbColor\r\n    if (size) _p.size = size\r\n    if (thumbSize) _p.thumbSize = thumbSize\r\n    if (trackSize) _p.trackSize = trackSize\r\n    if (value) _p.value = value\r\n    if (hideTrack) _p.hideTrack = hideTrack\r\n    if (showPercentage) _p.showPercentage = showPercentage\r\n    if (speed) _p.speed = speed\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    color = p.color ?? \"brand\"\r\n    trackColor = p.trackColor\r\n    thumbColor = p.thumbColor\r\n    size = p.size ?? \"medium\"\r\n    thumbSize = p.thumbSize ?? 4\r\n    trackSize = p.trackSize\r\n    value = p.value\r\n    hideTrack = p.hideTrack\r\n    showPercentage = p.showPercentage\r\n    speed = p.speed ?? 1.3\r\n\r\n    if (trackColor === 'default') {\r\n        trackColor = \"divider\"\r\n    }\r\n\r\n    if (thumbColor === 'default') {\r\n        thumbColor = \"divider.secondary\"\r\n    }\r\n\r\n\r\n    let sizes: any = {\r\n        small: 24,\r\n        medium: 32,\r\n        large: 44\r\n    }\r\n    if (typeof size === 'string' && sizes[size]) {\r\n        size = sizes[size]\r\n    }\r\n\r\n    let isVal = typeof value === 'number'\r\n    const animrotate = \"anim\" + useId().replace(\":\", \"\")\r\n    const animdash = \"anim\" + useId().replace(\":\", \"\")\r\n    if (isVal && (value as number) > 100) value = 100\r\n    const circumference = 125.66370614359172 //radius * 2 * Math.PI\r\n    const percent = circumference - ((value || 0) / 100) * circumference\r\n\r\n    if (showPercentage && !children) {\r\n        children = <Tag\r\n            sxr={{\r\n                color: color === 'default' ? \"text.primary\" : `${color}.primary`,\r\n                fontSize: size / 4\r\n            }}\r\n        >{value}%</Tag>\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            baseClass='circle-progress'\r\n            sxr={{\r\n                display: \"inline-flex\",\r\n                alignItems: \"center\",\r\n                justifyContent: \"center\",\r\n                \"& svg[class='circle-progress-svg']\": {\r\n                    zIndex: 1,\r\n                    position: \"absolute\",\r\n                    top: 0,\r\n                    left: 0,\r\n                    width: \"100%\",\r\n                    height: \"100%\",\r\n                    transform: isVal ? \"rotate(-90deg)\" : \"none\",\r\n                    transformOrigin: isVal ? \"center\" : \"initial\",\r\n                    animation: isVal ? \"none\" : `${animrotate} ${speed}s linear infinite`,\r\n                    [`@keyframes ${animrotate}`]: {\r\n                        \"100%\": {\r\n                            transform: \"rotate(360deg)\"\r\n                        }\r\n                    },\r\n                    \"& circle.circle-progress-thumb\": {\r\n\r\n                        strokeDasharray: circumference,\r\n                        strokeDashoffset: percent,\r\n                        stroke: thumbColor || (color === 'default' ? `divider` : `${color}.primary`),\r\n                        fill: \"none\",\r\n                        strokeWidth: thumbSize,\r\n                        strokeLinecap: \"round\",\r\n                        animation: isVal ? \"none\" : `${animdash} ${speed}s ease-in-out infinite`,\r\n                        [`@keyframes ${animdash}`]: {\r\n                            \"0%\": { strokeDasharray: \"1, 150\", strokeDashoffset: 0 },\r\n                            \"50%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -35 },\r\n                            \"100%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -124 }\r\n                        }\r\n                    },\r\n                    \"& circle.circle-progress-track\": {\r\n                        fill: \"none\",\r\n                        stroke: trackColor || (color === 'default' ? `text.primary` : `${color}.soft.secondary`),\r\n                        strokeWidth: trackSize ?? thumbSize,\r\n                    }\r\n                },\r\n                width: size,\r\n                height: size,\r\n                position: \"relative\"\r\n            }}\r\n            ref={ref}\r\n        >\r\n            <svg viewBox=\"0 0 50 50\" className=\"circle-progress-svg\">\r\n                {!hideTrack && <circle className=\"circle-progress-track\" cx=\"25\" cy=\"25\" r={20} />}\r\n                <circle className=\"circle-progress-thumb\" cx=\"25\" cy=\"25\" r={20} />\r\n            </svg>\r\n            {!!children && <Tag\r\n                baseClass=\"circle-progress-content\"\r\n                sxr={{\r\n                    zIndex: 2,\r\n                    width: size - thumbSize,\r\n                    height: size - thumbSize,\r\n                    display: \"flex\",\r\n                    alignItems: \"center\",\r\n                    justifyContent: \"center\",\r\n                    '& *': {\r\n                        maxWidth: size - (thumbSize + 8),\r\n                        maxHeight: size - (thumbSize + 8),\r\n                    }\r\n                }}\r\n            >\r\n                {children}\r\n            </Tag>}\r\n        </Tag >\r\n    )\r\n})\r\n\r\nexport default CircleProgress\r\n\r\n"],"names":[],"mappings":";;;;;;AAkBA;;AAAyC;AACrC;;AAEA;AAAW;AACX;AAAgB;AAChB;AAAgB;AAChB;AAAU;AACV;AAAe;AACf;AAAe;AACf;AAAW;AACX;AAAe;AACf;AAAoB;AACpB;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAIA;;;AAKA;AACI;AACA;AACA;;;AAGA;;AAGJ;AACA;AACA;AACA;;AACA;AACA;AAEA;AACI;AAEQ;;;;;AAUA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACI;AACI;AACH;AACJ;AACD;AAEI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIC;AACJ;AACD;AACI;AACA;AACA;AACH;AACJ;AACD;AACA;AACA;AACH;AAUO;;;AAGA;AACA;AACA;AACA;AACI;AACA;AACH;AACJ;AAMjB;;"}
+{"version":3,"file":"index.js","sources":["../../src/CircleProgress/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { ReactElement, useId } from \"react\"\r\nimport { Tag, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\nexport type CircleProgressProps = {\r\n    children?: ReactElement;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    trackColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    thumbColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    thumbSize?: useBreakpointPropsType<number>;\r\n    trackSize?: useBreakpointPropsType<number>;\r\n    value?: useBreakpointPropsType<number>;\r\n    hideTrack?: useBreakpointPropsType<boolean>;\r\n    showPercentage?: useBreakpointPropsType<boolean>;\r\n    speed?: useBreakpointPropsType<number>;\r\n}\r\n\r\nconst CircleProgress = React.forwardRef(({ children, ...props }: CircleProgressProps, ref: React.Ref<any>) => {\r\n    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = useInterface<any>(\"CircleProgress\", props, {})\r\n    const _p: any = {}\r\n    if (color) _p.color = color\r\n    if (trackColor) _p.trackColor = trackColor\r\n    if (thumbColor) _p.thumbColor = thumbColor\r\n    if (size) _p.size = size\r\n    if (thumbSize) _p.thumbSize = thumbSize\r\n    if (trackSize) _p.trackSize = trackSize\r\n    if (value) _p.value = value\r\n    if (hideTrack) _p.hideTrack = hideTrack\r\n    if (showPercentage) _p.showPercentage = showPercentage\r\n    if (speed) _p.speed = speed\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    color = p.color ?? \"brand\"\r\n    trackColor = p.trackColor\r\n    thumbColor = p.thumbColor\r\n    size = p.size ?? \"medium\"\r\n    thumbSize = p.thumbSize ?? 4\r\n    trackSize = p.trackSize\r\n    value = p.value\r\n    hideTrack = p.hideTrack\r\n    showPercentage = p.showPercentage\r\n    speed = p.speed ?? 1.3\r\n\r\n    if (trackColor === 'default') {\r\n        trackColor = \"divider\"\r\n    }\r\n\r\n    if (thumbColor === 'default') {\r\n        thumbColor = \"divider.secondary\"\r\n    }\r\n\r\n\r\n    let sizes: any = {\r\n        small: 24,\r\n        medium: 32,\r\n        large: 44\r\n    }\r\n    if (typeof size === 'string' && sizes[size]) {\r\n        size = sizes[size]\r\n    }\r\n\r\n    let isVal = typeof value === 'number'\r\n    const animrotate = \"anim\" + useId().replace(\":\", \"\")\r\n    const animdash = \"anim\" + useId().replace(\":\", \"\")\r\n    if (isVal && (value as number) > 100) value = 100\r\n    const circumference = 125.66370614359172 //radius * 2 * Math.PI\r\n    const percent = circumference - ((value || 0) / 100) * circumference\r\n\r\n    if (showPercentage && !children) {\r\n        children = <Tag\r\n            sxr={{\r\n                color: color === 'default' ? \"text.primary\" : `${color}.primary`,\r\n                fontSize: size / 4\r\n            }}\r\n        >{value}%</Tag>\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            baseClass='circle-progress'\r\n            sxr={{\r\n                display: \"inline-flex\",\r\n                alignItems: \"center\",\r\n                justifyContent: \"center\",\r\n                \"& svg[class='circle-progress-svg']\": {\r\n                    zIndex: 1,\r\n                    position: \"absolute\",\r\n                    top: 0,\r\n                    left: 0,\r\n                    width: \"100%\",\r\n                    height: \"100%\",\r\n                    transform: isVal ? \"rotate(-90deg)\" : \"none\",\r\n                    transformOrigin: isVal ? \"center\" : \"initial\",\r\n                    animation: isVal ? \"none\" : `${animrotate} ${speed}s linear infinite`,\r\n                    [`@keyframes ${animrotate}`]: {\r\n                        \"100%\": {\r\n                            transform: \"rotate(360deg)\"\r\n                        }\r\n                    },\r\n                    \"& circle.circle-progress-thumb\": {\r\n\r\n                        strokeDasharray: circumference,\r\n                        strokeDashoffset: percent,\r\n                        stroke: thumbColor || (color === 'default' ? `divider` : `${color}.primary`),\r\n                        fill: \"none\",\r\n                        strokeWidth: thumbSize,\r\n                        strokeLinecap: \"round\",\r\n                        animation: isVal ? \"none\" : `${animdash} ${speed}s ease-in-out infinite`,\r\n                        [`@keyframes ${animdash}`]: {\r\n                            \"0%\": { strokeDasharray: \"1, 150\", strokeDashoffset: 0 },\r\n                            \"50%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -35 },\r\n                            \"100%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -124 }\r\n                        }\r\n                    },\r\n                    \"& circle.circle-progress-track\": {\r\n                        fill: \"none\",\r\n                        stroke: trackColor || (color === 'default' ? `text.primary` : `${color}.soft.secondary`),\r\n                        strokeWidth: trackSize ?? thumbSize,\r\n                    }\r\n                },\r\n                width: size,\r\n                height: size,\r\n                position: \"relative\"\r\n            }}\r\n            ref={ref}\r\n        >\r\n            <svg viewBox=\"0 0 50 50\" className=\"circle-progress-svg\">\r\n                {!hideTrack && <circle className=\"circle-progress-track\" cx=\"25\" cy=\"25\" r={20} />}\r\n                <circle className=\"circle-progress-thumb\" cx=\"25\" cy=\"25\" r={20} />\r\n            </svg>\r\n            {!!children && <Tag\r\n                baseClass=\"circle-progress-content\"\r\n                sxr={{\r\n                    zIndex: 2,\r\n                    width: size - thumbSize,\r\n                    height: size - thumbSize,\r\n                    display: \"flex\",\r\n                    alignItems: \"center\",\r\n                    justifyContent: \"center\",\r\n                    '& *': {\r\n                        maxWidth: size - (thumbSize + 8),\r\n                        maxHeight: size - (thumbSize + 8),\r\n                    }\r\n                }}\r\n            >\r\n                {children}\r\n            </Tag>}\r\n        </Tag >\r\n    )\r\n})\r\n\r\nexport default CircleProgress\r\n\r\n"],"names":[],"mappings":";;;;;;AAkBA;;AAAyC;AACrC;;AAEA;AAAW;AACX;AAAgB;AAChB;AAAgB;AAChB;AAAU;AACV;AAAe;AACf;AAAe;AACf;AAAW;AACX;AAAe;AACf;AAAoB;AACpB;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAIA;;;AAKA;AACI;AACA;AACA;;;AAGA;;AAGJ;AACA;AACA;AACA;;AACA;AACA;AAEA;AACI;AAEQ;;;;;AAUA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACI;AACI;AACH;AACJ;AACD;AAEI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIC;AACJ;AACD;AACI;AACA;AACA;AACH;AACJ;AACD;AACA;AACA;AACH;AAUO;;;AAGA;AACA;AACA;AACA;AACI;AACA;AACH;AACJ;AAMjB;;"}

package/ClickOutside/index.cjs

@@ -0,0 +1,37 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@xanui/core');
+var React = require('react');
+
+const ClickOutside = React.forwardRef((_a, forwardedRef) => {
+    var { children, onClickOutside } = _a, props = tslib.__rest(_a, ["children", "onClickOutside"]);
+    const innerRef = React.useRef(null);
+    // merge refs
+    const setRefs = (el) => {
+        innerRef.current = el;
+        if (typeof forwardedRef === "function") {
+            forwardedRef(el);
+        }
+        else if (forwardedRef) {
+            forwardedRef.current = el;
+        }
+    };
+    React.useEffect(() => {
+        const handler = (e) => {
+            if (!innerRef.current)
+                return;
+            if (!innerRef.current.contains(e.target)) {
+                onClickOutside(e);
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [onClickOutside]);
+    return (jsxRuntime.jsx(core.Tag, Object.assign({ component: "div", display: "inline-block" }, props, { baseClass: 'click-outside', ref: setRefs, children: children })));
+});
+
+module.exports = ClickOutside;
+//# sourceMappingURL=index.cjs.map

package/ClickOutside/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["'use client'\r\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\r\nimport React, { useEffect, useRef } from 'react';\r\n\r\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n    onClickOutside: (e: MouseEvent) => void;\r\n    children: React.ReactElement\r\n};\r\n\r\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, forwardedRef: any) => {\r\n\r\n    const innerRef = useRef<HTMLElement | null>(null);\r\n\r\n    // merge refs\r\n    const setRefs = (el: HTMLElement) => {\r\n        innerRef.current = el;\r\n        if (typeof forwardedRef === \"function\") {\r\n            forwardedRef(el);\r\n        } else if (forwardedRef) {\r\n            forwardedRef.current = el;\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        const handler = (e: MouseEvent) => {\r\n            if (!innerRef.current) return;\r\n            if (!innerRef.current.contains(e.target as Node)) {\r\n                onClickOutside(e);\r\n            }\r\n        };\r\n\r\n        document.addEventListener(\"mousedown\", handler);\r\n        return () => document.removeEventListener(\"mousedown\", handler);\r\n    }, [onClickOutside]);\r\n\r\n    return (\r\n        <Tag\r\n            component=\"div\"\r\n            display=\"inline-block\"\r\n            {...props}\r\n            baseClass='click-outside'\r\n            ref={setRefs}\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n});\r\n\r\nexport default ClickOutside;\r\n"],"names":[],"mappings":";;;;;;;;AASA;;AAEI;;AAGA;AACI;AACA;;;;AAGI;;AAER;;AAGI;;;AAEI;;;AAGJ;AAEA;;AAEJ;;AAaJ;;"}

package/ClickOutside/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\r\nimport React, { useEffect, useRef } from 'react';\r\n\r\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n    onClickOutside: (e: MouseEvent) => void;\r\n    children: React.ReactElement\r\n};\r\n\r\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, forwardedRef: any) => {\r\n\r\n    const innerRef = useRef<HTMLElement | null>(null);\r\n\r\n    // merge refs\r\n    const setRefs = (el: HTMLElement) => {\r\n        innerRef.current = el;\r\n        if (typeof forwardedRef === \"function\") {\r\n            forwardedRef(el);\r\n        } else if (forwardedRef) {\r\n            forwardedRef.current = el;\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        const handler = (e: MouseEvent) => {\r\n            if (!innerRef.current) return;\r\n            if (!innerRef.current.contains(e.target as Node)) {\r\n                onClickOutside(e);\r\n            }\r\n        };\r\n\r\n        document.addEventListener(\"mousedown\", handler);\r\n        return () => document.removeEventListener(\"mousedown\", handler);\r\n    }, [onClickOutside]);\r\n\r\n    return (\r\n        <Tag\r\n            component=\"div\"\r\n            display=\"inline-block\"\r\n            {...props}\r\n            baseClass='click-outside'\r\n            ref={setRefs}\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n});\r\n\r\nexport default ClickOutside;\r\n"],"names":[],"mappings":";;;;;;AASA;;AAEI;;AAGA;AACI;AACA;;;;AAGI;;AAER;;AAGI;;;AAEI;;;AAGJ;AAEA;;AAEJ;;AAaJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["'use client'\r\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\r\nimport React, { useEffect, useRef } from 'react';\r\n\r\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n    onClickOutside: (e: MouseEvent) => void;\r\n    children: React.ReactElement\r\n};\r\n\r\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, forwardedRef: any) => {\r\n\r\n    const innerRef = useRef<HTMLElement | null>(null);\r\n\r\n    // merge refs\r\n    const setRefs = (el: HTMLElement) => {\r\n        innerRef.current = el;\r\n        if (typeof forwardedRef === \"function\") {\r\n            forwardedRef(el);\r\n        } else if (forwardedRef) {\r\n            forwardedRef.current = el;\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        const handler = (e: MouseEvent) => {\r\n            if (!innerRef.current) return;\r\n            if (!innerRef.current.contains(e.target as Node)) {\r\n                onClickOutside(e);\r\n            }\r\n        };\r\n\r\n        document.addEventListener(\"mousedown\", handler);\r\n        return () => document.removeEventListener(\"mousedown\", handler);\r\n    }, [onClickOutside]);\r\n\r\n    return (\r\n        <Tag\r\n            component=\"div\"\r\n            display=\"inline-block\"\r\n            {...props}\r\n            baseClass='click-outside'\r\n            ref={setRefs}\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n});\r\n\r\nexport default ClickOutside;\r\n"],"names":[],"mappings":";;;;;;AASA;;AAEI;;AAGA;AACI;AACA;;;;AAGI;;AAER;;AAGI;;;AAEI;;;AAGJ;AAEA;;AAEJ;;AAaJ;;"}

package/Collaps/index.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const Collaps = React.forwardRef((_a, ref) => {
+    var { children, open } = _a, props = tslib.__rest(_a, ["children", "open"]);
+    let [_b] = core.useInterface("Collaps", props, {}), { ease, easing, duration, delay, onStart, onFinish, onOpen, onOpened, onClose, onClosed } = _b, rest = tslib.__rest(_b, ["ease", "easing", "duration", "delay", "onStart", "onFinish", "onOpen", "onOpened", "onClose", "onClosed"]);
+    open !== null && open !== void 0 ? open : (open = false);
+    easing !== null && easing !== void 0 ? easing : (easing = "standard");
+    return (jsxRuntime.jsx(core.Transition, { ease,
+        easing,
+        duration,
+        delay,
+        onStart,
+        onFinish,
+        onOpen,
+        onOpened,
+        onClose,
+        onClosed, disableInitialTransition: true, variant: "collapseVertical", open: open, children: jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { baseClass: 'collaps', ref: ref, children: children })) }));
+});
+
+module.exports = Collaps;
+//# sourceMappingURL=index.cjs.map

package/Collaps/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\r\n\r\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\r\n\r\n}\r\n\r\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\r\n    let [{\r\n        ease,\r\n        easing,\r\n        duration,\r\n        delay,\r\n        onStart,\r\n        onFinish,\r\n        onOpen,\r\n        onOpened,\r\n        onClose,\r\n        onClosed,\r\n        ...rest\r\n    }] = useInterface<any>(\"Collaps\", props, {})\r\n\r\n    open ??= false\r\n    easing ??= \"standard\"\r\n\r\n    return (\r\n        <Transition\r\n            {...{\r\n                ease,\r\n                easing,\r\n                duration,\r\n                delay,\r\n                onStart,\r\n                onFinish,\r\n                onOpen,\r\n                onOpened,\r\n                onClose,\r\n                onClosed\r\n            }}\r\n            disableInitialTransition\r\n            variant=\"collapseVertical\"\r\n            open={open}\r\n        >\r\n            <Tag\r\n                {...rest}\r\n                baseClass='collaps'\r\n                ref={ref}\r\n            >{children}</Tag>\r\n        </Transition>\r\n    )\r\n})\r\n\r\nexport default Collaps\r\n\r\n\r\n"],"names":["__rest","useInterface","_jsx","Transition","Tag"],"mappings":";;;;;;;AAOA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA6C,EAAE,GAAQ,KAAI;QAA3D,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AAC5F,IAAA,IAAI,OAYCC,iBAAY,CAAM,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,EAZvC,EACD,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,OAEX,EADM,IAAI,GAAAD,YAAA,CAAA,EAAA,EAXN,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAYJ,CAA2C;IAE5C,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,KAAK,CAAA;IACd,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAN,MAAM,IAAN,MAAM,GAAK,UAAU,CAAA;AAErB,IAAA,QACIE,cAAA,CAACC,eAAU,EAAA,EAEH,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,KAAK;QACL,OAAO;QACP,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,OAAO;AACP,QAAA,QAAQ,EAEZ,wBAAwB,EAAA,IAAA,EACxB,OAAO,EAAC,kBAAkB,EAC1B,IAAI,EAAE,IAAI,EAAA,QAAA,EAEVD,cAAA,CAACE,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO,EAAA,CACR;AAErB,CAAC;;;;"}