@xanui/ui 1.1.16 → 1.1.18

package/Calendar/index.mjs.map

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

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

package/CalendarInput/index.mjs.map

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

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\";\nimport React, { useState, ReactElement } from 'react';\nimport { Tag, useInterface, UseColorTemplateColor, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CheckIcon from '@xanui/icons/CheckBox'\nimport UnCheckIcon from '@xanui/icons/CheckBoxOutlineBlank'\nimport IndeterminateCheckBoxIcon from '@xanui/icons/IndeterminateCheckBox';\n\n\nexport type CheckboxProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\n    checkIcon?: useBreakpointPropsType<ReactElement>;\n    uncheckIcon?: useBreakpointPropsType<ReactElement>;\n    indeterminate?: useBreakpointPropsType<boolean>;\n    checked?: boolean;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n}\n\nconst Checkbox = React.forwardRef((props: CheckboxProps, ref?: React.Ref<any>) => {\n    let [{ color, size, checkIcon, uncheckIcon, checked, indeterminate, disabled, onChange, ...rest }] = useInterface<any>(\"Checkbox\", props, {})\n    const _p: any = {}\n    if (checkIcon) _p.checkIcon = checkIcon\n    if (uncheckIcon) _p.uncheckIcon = uncheckIcon\n    if (indeterminate) _p.indeterminate = indeterminate\n    if (size) _p.size = size\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n\n    checkIcon = p.checkIcon\n    uncheckIcon = p.uncheckIcon\n    indeterminate = p.indeterminate\n    size = p.size\n    color = p.color\n\n    const [c, set] = useState(false)\n    checked ??= c\n    size ??= \"medium\"\n    color ??= \"brand\"\n\n    onChange = onChange || (() => set(!c));\n    if (indeterminate) {\n        checked = true\n        checkIcon = <IndeterminateCheckBoxIcon />\n    }\n\n    let sizes: any = {\n        small: 22,\n        medium: 24,\n        large: 32\n    }\n\n    if (typeof size === 'string' && sizes[size]) {\n        size = sizes[size]\n    }\n\n    return (\n        <>\n            <Tag\n                baseClass='checkbox'\n                onClick={() => {\n                    onChange && onChange()\n                }}\n                sxr={{\n                    height: size,\n                    width: size,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    color: checked ? color : \"text.secondary\",\n                    cursor: \"pointer\",\n                    disabled: disabled,\n                    \"& svg\": {\n                        fontSize: size\n                    },\n                    ...rest?.sx\n                }}\n            >\n                {checked ? (checkIcon || <CheckIcon />) : (uncheckIcon || <UnCheckIcon />)}\n            </Tag>\n            <Tag\n                {...rest}\n                component='input'\n                ref={ref}\n                readOnly\n                type=\"checkbox\"\n                checked={checked}\n                sxr={{\n                    display: \"none!important\"\n                }}\n            />\n        </>\n    )\n})\n\nexport default Checkbox\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.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","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":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\n\n\n\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\n    label: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\n\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\n    let [{ label, variant, startIcon, endIcon, color, corner, size, ...rest }] = useInterface<any>(\"Chip\", props, {})\n    const _p: any = {}\n    if (label) _p.label = label\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    label = p.label\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color || \"brand\"\n    variant = p.variant || \"fill\"\n    corner = p.corner || \"circle\"\n    size = p.size || \"medium\"\n    rest.sx = (rest as any).sx || {};\n\n    const cornerCss = useCorner(corner)\n    const template = useColorTemplate(color, variant)\n\n    const sizes: any = {\n        small: {\n            height: 24,\n            gap: .5,\n            px: startIcon || endIcon ? .8 : 1,\n            fontSize: \"small\"\n        },\n        medium: {\n            height: 32,\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n            fontSize: 'button',\n        },\n        large: {\n            height: 40,\n            fontSize: 'text',\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n        }\n    }\n\n    return (\n        <Tag\n            {...cornerCss}\n            {...template.primary}\n            {...(sizes[size as any] || {})}\n            {...rest}\n            sxr={{\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                transition: \"background .3s\",\n                overflow: \"hidden\",\n\n                \"&  > *\": {\n                    flex: \"0 0 auto\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    overflow: \"hidden\",\n                },\n            }}\n            baseClass='chip'\n            ref={ref}\n        >\n            {startIcon}\n            <Tag\n                sxr={{\n                    alignItems: \"center\",\n                    flexBox: true\n                }}\n            >{label}</Tag>\n            {endIcon}\n        </Tag>\n    )\n})\n\nexport default Chip\n"],"names":["useInterface","__rest","useBreakpointProps","useCorner","useColorTemplate","_jsxs","Tag","_jsx"],"mappings":"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"}

package/Chip/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\n\n\n\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\n    label: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\n\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\n    let [{ label, variant, startIcon, endIcon, color, corner, size, ...rest }] = useInterface<any>(\"Chip\", props, {})\n    const _p: any = {}\n    if (label) _p.label = label\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    label = p.label\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color || \"brand\"\n    variant = p.variant || \"fill\"\n    corner = p.corner || \"circle\"\n    size = p.size || \"medium\"\n    rest.sx = (rest as any).sx || {};\n\n    const cornerCss = useCorner(corner)\n    const template = useColorTemplate(color, variant)\n\n    const sizes: any = {\n        small: {\n            height: 24,\n            gap: .5,\n            px: startIcon || endIcon ? .8 : 1,\n            fontSize: \"small\"\n        },\n        medium: {\n            height: 32,\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n            fontSize: 'button',\n        },\n        large: {\n            height: 40,\n            fontSize: 'text',\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n        }\n    }\n\n    return (\n        <Tag\n            {...cornerCss}\n            {...template.primary}\n            {...(sizes[size as any] || {})}\n            {...rest}\n            sxr={{\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                transition: \"background .3s\",\n                overflow: \"hidden\",\n\n                \"&  > *\": {\n                    flex: \"0 0 auto\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    overflow: \"hidden\",\n                },\n            }}\n            baseClass='chip'\n            ref={ref}\n        >\n            {startIcon}\n            <Tag\n                sxr={{\n                    alignItems: \"center\",\n                    flexBox: true\n                }}\n            >{label}</Tag>\n            {endIcon}\n        </Tag>\n    )\n})\n\nexport default Chip\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\nexport type CircleProgressProps = {\n    children?: ReactElement;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    trackColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    thumbColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    thumbSize?: useBreakpointPropsType<number>;\n    trackSize?: useBreakpointPropsType<number>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    showPercentage?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\nconst CircleProgress = React.forwardRef(({ children, ...props }: CircleProgressProps, ref: React.Ref<any>) => {\n    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = useInterface<any>(\"CircleProgress\", props, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    if (trackColor) _p.trackColor = trackColor\n    if (thumbColor) _p.thumbColor = thumbColor\n    if (size) _p.size = size\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (trackSize) _p.trackSize = trackSize\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (showPercentage) _p.showPercentage = showPercentage\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    trackColor = p.trackColor\n    thumbColor = p.thumbColor\n    size = p.size ?? \"medium\"\n    thumbSize = p.thumbSize ?? 4\n    trackSize = p.trackSize\n    value = p.value\n    hideTrack = p.hideTrack\n    showPercentage = p.showPercentage\n    speed = p.speed ?? 1.3\n\n    if (trackColor === 'default') {\n        trackColor = \"divider\"\n    }\n\n    if (thumbColor === 'default') {\n        thumbColor = \"divider.secondary\"\n    }\n\n\n    let sizes: any = {\n        small: 24,\n        medium: 32,\n        large: 44\n    }\n    if (typeof size === 'string' && sizes[size]) {\n        size = sizes[size]\n    }\n\n    let isVal = typeof value === 'number'\n    const animrotate = \"anim\" + useId().replace(\":\", \"\")\n    const animdash = \"anim\" + useId().replace(\":\", \"\")\n    if (isVal && (value as number) > 100) value = 100\n    const circumference = 125.66370614359172 //radius * 2 * Math.PI\n    const percent = circumference - ((value || 0) / 100) * circumference\n\n    if (showPercentage && !children) {\n        children = <Tag\n            sxr={{\n                color: color === 'default' ? \"text.primary\" : `${color}.primary`,\n                fontSize: size / 4\n            }}\n        >{value}%</Tag>\n    }\n\n    return (\n        <Tag\n            baseClass='circle-progress'\n            sxr={{\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                \"& svg[class='circle-progress-svg']\": {\n                    zIndex: 1,\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    width: \"100%\",\n                    height: \"100%\",\n                    transform: isVal ? \"rotate(-90deg)\" : \"none\",\n                    transformOrigin: isVal ? \"center\" : \"initial\",\n                    animation: isVal ? \"none\" : `${animrotate} ${speed}s linear infinite`,\n                    [`@keyframes ${animrotate}`]: {\n                        \"100%\": {\n                            transform: \"rotate(360deg)\"\n                        }\n                    },\n                    \"& circle.circle-progress-thumb\": {\n\n                        strokeDasharray: circumference,\n                        strokeDashoffset: percent,\n                        stroke: thumbColor || (color === 'default' ? `divider` : `${color}.primary`),\n                        fill: \"none\",\n                        strokeWidth: thumbSize,\n                        strokeLinecap: \"round\",\n                        animation: isVal ? \"none\" : `${animdash} ${speed}s ease-in-out infinite`,\n                        [`@keyframes ${animdash}`]: {\n                            \"0%\": { strokeDasharray: \"1, 150\", strokeDashoffset: 0 },\n                            \"50%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -35 },\n                            \"100%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -124 }\n                        }\n                    },\n                    \"& circle.circle-progress-track\": {\n                        fill: \"none\",\n                        stroke: trackColor || (color === 'default' ? `text.primary` : `${color}.soft.secondary`),\n                        strokeWidth: trackSize ?? thumbSize,\n                    }\n                },\n                width: size,\n                height: size,\n                position: \"relative\"\n            }}\n            ref={ref}\n        >\n            <svg viewBox=\"0 0 50 50\" className=\"circle-progress-svg\">\n                {!hideTrack && <circle className=\"circle-progress-track\" cx=\"25\" cy=\"25\" r={20} />}\n                <circle className=\"circle-progress-thumb\" cx=\"25\" cy=\"25\" r={20} />\n            </svg>\n            {!!children && <Tag\n                baseClass=\"circle-progress-content\"\n                sxr={{\n                    zIndex: 2,\n                    width: size - thumbSize,\n                    height: size - thumbSize,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    '& *': {\n                        maxWidth: size - (thumbSize + 8),\n                        maxHeight: size - (thumbSize + 8),\n                    }\n                }}\n            >\n                {children}\n            </Tag>}\n        </Tag >\n    )\n})\n\nexport default CircleProgress\n\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.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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.mjs","sources":["../../src/CircleProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\nexport type CircleProgressProps = {\n    children?: ReactElement;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    trackColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    thumbColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    thumbSize?: useBreakpointPropsType<number>;\n    trackSize?: useBreakpointPropsType<number>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    showPercentage?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\nconst CircleProgress = React.forwardRef(({ children, ...props }: CircleProgressProps, ref: React.Ref<any>) => {\n    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = useInterface<any>(\"CircleProgress\", props, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    if (trackColor) _p.trackColor = trackColor\n    if (thumbColor) _p.thumbColor = thumbColor\n    if (size) _p.size = size\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (trackSize) _p.trackSize = trackSize\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (showPercentage) _p.showPercentage = showPercentage\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    trackColor = p.trackColor\n    thumbColor = p.thumbColor\n    size = p.size ?? \"medium\"\n    thumbSize = p.thumbSize ?? 4\n    trackSize = p.trackSize\n    value = p.value\n    hideTrack = p.hideTrack\n    showPercentage = p.showPercentage\n    speed = p.speed ?? 1.3\n\n    if (trackColor === 'default') {\n        trackColor = \"divider\"\n    }\n\n    if (thumbColor === 'default') {\n        thumbColor = \"divider.secondary\"\n    }\n\n\n    let sizes: any = {\n        small: 24,\n        medium: 32,\n        large: 44\n    }\n    if (typeof size === 'string' && sizes[size]) {\n        size = sizes[size]\n    }\n\n    let isVal = typeof value === 'number'\n    const animrotate = \"anim\" + useId().replace(\":\", \"\")\n    const animdash = \"anim\" + useId().replace(\":\", \"\")\n    if (isVal && (value as number) > 100) value = 100\n    const circumference = 125.66370614359172 //radius * 2 * Math.PI\n    const percent = circumference - ((value || 0) / 100) * circumference\n\n    if (showPercentage && !children) {\n        children = <Tag\n            sxr={{\n                color: color === 'default' ? \"text.primary\" : `${color}.primary`,\n                fontSize: size / 4\n            }}\n        >{value}%</Tag>\n    }\n\n    return (\n        <Tag\n            baseClass='circle-progress'\n            sxr={{\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                \"& svg[class='circle-progress-svg']\": {\n                    zIndex: 1,\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    width: \"100%\",\n                    height: \"100%\",\n                    transform: isVal ? \"rotate(-90deg)\" : \"none\",\n                    transformOrigin: isVal ? \"center\" : \"initial\",\n                    animation: isVal ? \"none\" : `${animrotate} ${speed}s linear infinite`,\n                    [`@keyframes ${animrotate}`]: {\n                        \"100%\": {\n                            transform: \"rotate(360deg)\"\n                        }\n                    },\n                    \"& circle.circle-progress-thumb\": {\n\n                        strokeDasharray: circumference,\n                        strokeDashoffset: percent,\n                        stroke: thumbColor || (color === 'default' ? `divider` : `${color}.primary`),\n                        fill: \"none\",\n                        strokeWidth: thumbSize,\n                        strokeLinecap: \"round\",\n                        animation: isVal ? \"none\" : `${animdash} ${speed}s ease-in-out infinite`,\n                        [`@keyframes ${animdash}`]: {\n                            \"0%\": { strokeDasharray: \"1, 150\", strokeDashoffset: 0 },\n                            \"50%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -35 },\n                            \"100%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -124 }\n                        }\n                    },\n                    \"& circle.circle-progress-track\": {\n                        fill: \"none\",\n                        stroke: trackColor || (color === 'default' ? `text.primary` : `${color}.soft.secondary`),\n                        strokeWidth: trackSize ?? thumbSize,\n                    }\n                },\n                width: size,\n                height: size,\n                position: \"relative\"\n            }}\n            ref={ref}\n        >\n            <svg viewBox=\"0 0 50 50\" className=\"circle-progress-svg\">\n                {!hideTrack && <circle className=\"circle-progress-track\" cx=\"25\" cy=\"25\" r={20} />}\n                <circle className=\"circle-progress-thumb\" cx=\"25\" cy=\"25\" r={20} />\n            </svg>\n            {!!children && <Tag\n                baseClass=\"circle-progress-content\"\n                sxr={{\n                    zIndex: 2,\n                    width: size - thumbSize,\n                    height: size - thumbSize,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    '& *': {\n                        maxWidth: size - (thumbSize + 8),\n                        maxHeight: size - (thumbSize + 8),\n                    }\n                }}\n            >\n                {children}\n            </Tag>}\n        </Tag >\n    )\n})\n\nexport default CircleProgress\n\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.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\";\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\nimport React, { useEffect, useRef } from 'react';\n\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    onClickOutside: (e: MouseEvent) => void;\n    children: React.ReactElement\n};\n\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, forwardedRef: any) => {\n\n    const innerRef = useRef<HTMLElement | null>(null);\n\n    // merge refs\n    const setRefs = (el: HTMLElement) => {\n        innerRef.current = el;\n        if (typeof forwardedRef === \"function\") {\n            forwardedRef(el);\n        } else if (forwardedRef) {\n            forwardedRef.current = el;\n        }\n    };\n\n    useEffect(() => {\n        const handler = (e: MouseEvent) => {\n            if (!innerRef.current) return;\n            if (!innerRef.current.contains(e.target as Node)) {\n                onClickOutside(e);\n            }\n        };\n\n        document.addEventListener(\"mousedown\", handler);\n        return () => document.removeEventListener(\"mousedown\", handler);\n    }, [onClickOutside]);\n\n    return (\n        <Tag\n            component=\"div\"\n            display=\"inline-block\"\n            {...props}\n            baseClass='click-outside'\n            ref={setRefs}\n        >\n            {children}\n        </Tag>\n    )\n});\n\nexport default ClickOutside;\n"],"names":[],"mappings":";;;;;;;;AASA;;AAEI;;AAGA;AACI;AACA;;;;AAGI;;AAER;;AAGI;;;AAEI;;;AAGJ;AAEA;;AAEJ;;AAaJ;;"}

package/ClickOutside/index.mjs.map

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

package/Collaps/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n    let [{\n        ease,\n        easing,\n        duration,\n        delay,\n        onStart,\n        onFinish,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        ...rest\n    }] = useInterface<any>(\"Collaps\", props, {})\n\n    open ??= false\n    easing ??= \"standard\"\n\n    return (\n        <Transition\n            {...{\n                ease,\n                easing,\n                duration,\n                delay,\n                onStart,\n                onFinish,\n                onOpen,\n                onOpened,\n                onClose,\n                onClosed\n            }}\n            disableInitialTransition\n            variant=\"collapseVertical\"\n            open={open}\n        >\n            <Tag\n                {...rest}\n                baseClass='collaps'\n                ref={ref}\n            >{children}</Tag>\n        </Transition>\n    )\n})\n\nexport default Collaps\n\n\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;;;;"}

package/Collaps/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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":["_jsx"],"mappings":";;;;;AAOA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA6C,EAAE,GAAQ,KAAI;QAA3D,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AAC5F,IAAA,IAAI,OAYC,YAAY,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,GAAA,MAAA,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,QACIA,GAAA,CAAC,UAAU,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,EAEVA,GAAA,CAAC,GAAG,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;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n    let [{\n        ease,\n        easing,\n        duration,\n        delay,\n        onStart,\n        onFinish,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        ...rest\n    }] = useInterface<any>(\"Collaps\", props, {})\n\n    open ??= false\n    easing ??= \"standard\"\n\n    return (\n        <Transition\n            {...{\n                ease,\n                easing,\n                duration,\n                delay,\n                onStart,\n                onFinish,\n                onOpen,\n                onOpened,\n                onClose,\n                onClosed\n            }}\n            disableInitialTransition\n            variant=\"collapseVertical\"\n            open={open}\n        >\n            <Tag\n                {...rest}\n                baseClass='collaps'\n                ref={ref}\n            >{children}</Tag>\n        </Transition>\n    )\n})\n\nexport default Collaps\n\n\n"],"names":["_jsx"],"mappings":";;;;;AAOA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA6C,EAAE,GAAQ,KAAI;QAA3D,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AAC5F,IAAA,IAAI,OAYC,YAAY,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,GAAA,MAAA,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,QACIA,GAAA,CAAC,UAAU,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,EAEVA,GAAA,CAAC,GAAG,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;;;;"}

package/Container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Container/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useTheme, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type ContainerProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n    maxWidth?: useBreakpointPropsType<'lg' | 'md' | \"sm\" | 'xs'>\r\n}\r\n\r\nconst Container = React.forwardRef(<T extends TagComponentType = \"div\">({ children, maxWidth, ...rest }: ContainerProps<T>, ref?: React.Ref<any>) => {\r\n    const _p: any = {}\r\n    if (maxWidth) _p.maxWidth = maxWidth\r\n    const p: any = useBreakpointProps(_p)\r\n    maxWidth = p.maxWidth\r\n\r\n    const { breakpoints } = useTheme()\r\n    maxWidth = maxWidth || \"lg\"\r\n    return (\r\n        <Tag\r\n            {...rest}\r\n            sxr={{\r\n                width: \"100%\",\r\n                maxWidth: {\r\n                    xs: \"100%\",\r\n                    [maxWidth as any]: (breakpoints as any)[maxWidth as any]\r\n                },\r\n                mx: \"auto\",\r\n                px: 2,\r\n            }}\r\n            baseClass=\"container\"\r\n            ref={ref}\r\n        >{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default Container\r\n\r\n\r\n"],"names":["__rest","useBreakpointProps","useTheme","_jsx","Tag"],"mappings":";;;;;;;AAQA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAkD,EAAE,GAAoB,KAAI;QAA5E,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAA,EAA8B,EAAzB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAA7B,wBAA+B,CAAF;IACjG,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,QAAQ;AAAE,QAAA,EAAE,CAAC,QAAQ,GAAG,QAAQ;AACpC,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,QAAQ,GAAG,CAAC,CAAC,QAAQ;AAErB,IAAA,MAAM,EAAE,WAAW,EAAE,GAAGC,aAAQ,EAAE;AAClC,IAAA,QAAQ,GAAG,QAAQ,IAAI,IAAI;AAC3B,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,QAAQ,EAAE;AACN,gBAAA,EAAE,EAAE,MAAM;AACV,gBAAA,CAAC,QAAe,GAAI,WAAmB,CAAC,QAAe;AAC1D,aAAA;AACD,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,CAAC;SACR,EACD,SAAS,EAAC,WAAW,EACrB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Container/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType, useTheme, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ContainerProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    maxWidth?: useBreakpointPropsType<'lg' | 'md' | \"sm\" | 'xs'>\n}\n\nconst Container = React.forwardRef(<T extends TagComponentType = \"div\">({ children, maxWidth, ...rest }: ContainerProps<T>, ref?: React.Ref<any>) => {\n    const _p: any = {}\n    if (maxWidth) _p.maxWidth = maxWidth\n    const p: any = useBreakpointProps(_p)\n    maxWidth = p.maxWidth\n\n    const { breakpoints } = useTheme()\n    maxWidth = maxWidth || \"lg\"\n    return (\n        <Tag\n            {...rest}\n            sxr={{\n                width: \"100%\",\n                maxWidth: {\n                    xs: \"100%\",\n                    [maxWidth as any]: (breakpoints as any)[maxWidth as any]\n                },\n                mx: \"auto\",\n                px: 2,\n            }}\n            baseClass=\"container\"\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Container\n\n\n"],"names":["__rest","useBreakpointProps","useTheme","_jsx","Tag"],"mappings":";;;;;;;AAQA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAkD,EAAE,GAAoB,KAAI;QAA5E,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAA,EAA8B,EAAzB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAA7B,wBAA+B,CAAF;IACjG,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,QAAQ;AAAE,QAAA,EAAE,CAAC,QAAQ,GAAG,QAAQ;AACpC,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,QAAQ,GAAG,CAAC,CAAC,QAAQ;AAErB,IAAA,MAAM,EAAE,WAAW,EAAE,GAAGC,aAAQ,EAAE;AAClC,IAAA,QAAQ,GAAG,QAAQ,IAAI,IAAI;AAC3B,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,QAAQ,EAAE;AACN,gBAAA,EAAE,EAAE,MAAM;AACV,gBAAA,CAAC,QAAe,GAAI,WAAmB,CAAC,QAAe;AAC1D,aAAA;AACD,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,CAAC;SACR,EACD,SAAS,EAAC,WAAW,EACrB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}

package/Container/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Container/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useTheme, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type ContainerProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n    maxWidth?: useBreakpointPropsType<'lg' | 'md' | \"sm\" | 'xs'>\r\n}\r\n\r\nconst Container = React.forwardRef(<T extends TagComponentType = \"div\">({ children, maxWidth, ...rest }: ContainerProps<T>, ref?: React.Ref<any>) => {\r\n    const _p: any = {}\r\n    if (maxWidth) _p.maxWidth = maxWidth\r\n    const p: any = useBreakpointProps(_p)\r\n    maxWidth = p.maxWidth\r\n\r\n    const { breakpoints } = useTheme()\r\n    maxWidth = maxWidth || \"lg\"\r\n    return (\r\n        <Tag\r\n            {...rest}\r\n            sxr={{\r\n                width: \"100%\",\r\n                maxWidth: {\r\n                    xs: \"100%\",\r\n                    [maxWidth as any]: (breakpoints as any)[maxWidth as any]\r\n                },\r\n                mx: \"auto\",\r\n                px: 2,\r\n            }}\r\n            baseClass=\"container\"\r\n            ref={ref}\r\n        >{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default Container\r\n\r\n\r\n"],"names":["_jsx"],"mappings":";;;;;AAQA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAkD,EAAE,GAAoB,KAAI;QAA5E,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAA,EAA8B,EAAzB,IAAI,GAAA,MAAA,CAAA,EAAA,EAA7B,wBAA+B,CAAF;IACjG,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,QAAQ;AAAE,QAAA,EAAE,CAAC,QAAQ,GAAG,QAAQ;AACpC,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,QAAQ,GAAG,CAAC,CAAC,QAAQ;AAErB,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,QAAQ,EAAE;AAClC,IAAA,QAAQ,GAAG,QAAQ,IAAI,IAAI;AAC3B,IAAA,QACIA,GAAA,CAAC,GAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,QAAQ,EAAE;AACN,gBAAA,EAAE,EAAE,MAAM;AACV,gBAAA,CAAC,QAAe,GAAI,WAAmB,CAAC,QAAe;AAC1D,aAAA;AACD,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,CAAC;SACR,EACD,SAAS,EAAC,WAAW,EACrB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/Container/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType, useTheme, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ContainerProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    maxWidth?: useBreakpointPropsType<'lg' | 'md' | \"sm\" | 'xs'>\n}\n\nconst Container = React.forwardRef(<T extends TagComponentType = \"div\">({ children, maxWidth, ...rest }: ContainerProps<T>, ref?: React.Ref<any>) => {\n    const _p: any = {}\n    if (maxWidth) _p.maxWidth = maxWidth\n    const p: any = useBreakpointProps(_p)\n    maxWidth = p.maxWidth\n\n    const { breakpoints } = useTheme()\n    maxWidth = maxWidth || \"lg\"\n    return (\n        <Tag\n            {...rest}\n            sxr={{\n                width: \"100%\",\n                maxWidth: {\n                    xs: \"100%\",\n                    [maxWidth as any]: (breakpoints as any)[maxWidth as any]\n                },\n                mx: \"auto\",\n                px: 2,\n            }}\n            baseClass=\"container\"\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Container\n\n\n"],"names":["_jsx"],"mappings":";;;;;AAQA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAkD,EAAE,GAAoB,KAAI;QAA5E,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAA,EAA8B,EAAzB,IAAI,GAAA,MAAA,CAAA,EAAA,EAA7B,wBAA+B,CAAF;IACjG,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,QAAQ;AAAE,QAAA,EAAE,CAAC,QAAQ,GAAG,QAAQ;AACpC,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,QAAQ,GAAG,CAAC,CAAC,QAAQ;AAErB,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,QAAQ,EAAE;AAClC,IAAA,QAAQ,GAAG,QAAQ,IAAI,IAAI;AAC3B,IAAA,QACIA,GAAA,CAAC,GAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,QAAQ,EAAE;AACN,gBAAA,EAAE,EAAE,MAAM;AACV,gBAAA,CAAC,QAAe,GAAI,WAAmB,CAAC,QAAe;AAC1D,aAAA;AACD,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,CAAC;SACR,EACD,SAAS,EAAC,WAAW,EACrB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}

package/Datatable/FilterBox.js

@@ -11,22 +11,19 @@ var index$5 = require('../Input/index.js');
 var IconSearch = require('@xanui/icons/Search');
 
 const FilterBox = (props) => {
-    let { tabs, filters, onSearch, onTabChange, disableSearch, slotProps, state, update, } = props;
-    let selected = state.selectedIds;
-    let checked = state.selectAll || !!selected.length;
+    let { tabs, filters, hideSearch, slotProps, state, update, } = props;
+    let checked = state.selectAll || !!state.selected.length;
     if (checked)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     return (jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%", children: [jsxRuntime.jsx(index, { gap: 2.4, flexRow: true, children: tabs && jsxRuntime.jsx(index$1, { onChange: (value) => {
-                        update({ activeTab: value });
-                        onTabChange && onTabChange(value, state);
-                    }, value: state.activeTab, children: tabs.map(t => jsxRuntime.jsx(index$2, { value: t.value || t.label.toLowerCase(), children: t.label }, t.label)) }) }), jsxRuntime.jsx(index, { className: 'datatable-header-filter-area', flex: 1, flexRow: true, children: filters && jsxRuntime.jsx(index, { flexRow: true, gap: 2, px: 2, children: Object.keys(filters).map(name => {
+                        update({ tab: value });
+                    }, value: state.tab, children: tabs.map(t => jsxRuntime.jsx(index$2, { value: t.value || t.label.toLowerCase(), children: t.label }, t.label)) }) }), jsxRuntime.jsx(index, { className: 'datatable-header-filter-area', flex: 1, flexRow: true, children: filters && jsxRuntime.jsx(index, { flexRow: true, gap: 2, px: 2, children: Object.keys(filters).map(name => {
                         const items = filters[name];
                         return (jsxRuntime.jsx(index$3, { placeholder: name.charAt(0).toUpperCase() + name.slice(1), value: state[name] || "", onChange: (value) => {
                                 update({ [name]: value });
                             }, children: items.map((item) => jsxRuntime.jsx(index$4, { value: item.value, children: item.label }, name + item.value)) }, name));
-                    }) }) }), jsxRuntime.jsx(index, { flexRow: true, gap: 2, className: 'datatable-header-right-area', children: !disableSearch && jsxRuntime.jsx(index$5, Object.assign({ endIcon: jsxRuntime.jsx(IconSearch, {}), p: 1, placeholder: 'Search...' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.search, { value: state.search, onChange: (e) => {
+                    }) }) }), jsxRuntime.jsx(index, { flexRow: true, gap: 2, className: 'datatable-header-right-area', children: !hideSearch && jsxRuntime.jsx(index$5, Object.assign({ endIcon: jsxRuntime.jsx(IconSearch, {}), p: 1, placeholder: 'Search...' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.search, { value: state.search, onChange: (e) => {
                         update({ search: e.target.value });
-                        onSearch && onSearch(e.target.value, state);
                     } })) })] }));
 };
 

package/Datatable/FilterBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBox.js","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["\"use client\";\r\nimport Stack from '../Stack'\r\nimport { DatatableFilter, DatatablePropsWithState } from '.'\r\nimport Tabs from '../Tabs'\r\nimport Tab from '../Tab'\r\nimport Select from '../Select'\r\nimport Option from '../Option'\r\nimport Input from '../Input'\r\nimport IconSearch from '@xanui/icons/Search'\r\n\r\n\r\nconst FilterBox = (props: DatatablePropsWithState) => {\r\n   let {\r\n      tabs,\r\n      filters,\r\n      onSearch,\r\n      onTabChange,\r\n      disableSearch,\r\n      slotProps,\r\n      state,\r\n      update,\r\n   } = props\r\n\r\n   let selected = state.selectedIds\r\n   let checked = state.selectAll || !!selected.length\r\n\r\n   if (checked) return <></>\r\n\r\n   return (\r\n      <Stack\r\n         direction=\"row\"\r\n         alignItems=\"center\"\r\n         justifyContent=\"space-between\"\r\n         zIndex={1}\r\n         radius={1}\r\n         mb={1}\r\n         height={50}\r\n         width=\"100%\"\r\n      >\r\n         <Stack gap={2.4} flexRow>\r\n            {\r\n               tabs && <Tabs\r\n                  onChange={(value: any) => {\r\n                     update({ activeTab: value })\r\n                     onTabChange && onTabChange(value, state)\r\n                  }}\r\n                  value={state.activeTab}\r\n               >\r\n                  {\r\n                     tabs.map(t => <Tab key={t.label} value={t.value || t.label.toLowerCase()}>{t.label}</Tab>)\r\n                  }\r\n               </Tabs>\r\n            }\r\n         </Stack>\r\n         <Stack className='datatable-header-filter-area' flex={1} flexRow>\r\n            {\r\n               filters && <Stack flexRow gap={2} px={2}>\r\n                  {\r\n                     Object.keys(filters).map(name => {\r\n                        const items: DatatableFilter[] = (filters as any)[name]\r\n                        return (\r\n                           <Select\r\n                              key={name}\r\n                              placeholder={name.charAt(0).toUpperCase() + name.slice(1)}\r\n                              value={(state as any)[name] || \"\"}\r\n                              onChange={(value) => {\r\n                                 update({ [name]: value } as any)\r\n                              }}\r\n                           >\r\n                              {\r\n                                 items.map((item) => <Option key={name + item.value} value={item.value}>\r\n                                    {item.label}\r\n                                 </Option>)\r\n                              }\r\n                           </Select>\r\n                        )\r\n                     })\r\n                  }\r\n               </Stack>\r\n            }\r\n         </Stack>\r\n         <Stack flexRow gap={2} className='datatable-header-right-area'>\r\n\r\n            {!disableSearch && <Input\r\n               endIcon={<IconSearch />}\r\n               p={1}\r\n               placeholder='Search...'\r\n               {...slotProps?.search}\r\n               value={state.search}\r\n               onChange={(e: any) => {\r\n                  update({ search: e.target.value })\r\n                  onSearch && onSearch(e.target.value, state)\r\n               }}\r\n            />}\r\n         </Stack>\r\n      </Stack>\r\n   )\r\n}\r\n\r\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;;;AAWA;AACG;AAWA;;AAGA;AAAa;;AAiBK;AACA;AACH;AAcM;AACA;;AAOM;;;;AAyBf;AAKf;;"}
+{"version":3,"file":"FilterBox.js","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["\"use client\";\nimport Stack from '../Stack'\nimport Tabs from '../Tabs'\nimport Tab from '../Tab'\nimport Select from '../Select'\nimport Option from '../Option'\nimport Input from '../Input'\nimport IconSearch from '@xanui/icons/Search'\nimport { DatatableFilter, DatatablePropsWithState } from './types';\n\n\nconst FilterBox = (props: DatatablePropsWithState) => {\n   let {\n      tabs,\n      filters,\n      hideSearch,\n      slotProps,\n      state,\n      update,\n   } = props\n\n   let checked = state.selectAll || !!state.selected.length\n\n   if (checked) return <></>\n\n   return (\n      <Stack\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n      >\n         <Stack gap={2.4} flexRow>\n            {\n               tabs && <Tabs\n                  onChange={(value: any) => {\n                     update({ tab: value })\n                  }}\n                  value={state.tab}\n               >\n                  {\n                     tabs.map(t => <Tab key={t.label} value={t.value || t.label.toLowerCase()}>{t.label}</Tab>)\n                  }\n               </Tabs>\n            }\n         </Stack>\n         <Stack className='datatable-header-filter-area' flex={1} flexRow>\n            {\n               filters && <Stack flexRow gap={2} px={2}>\n                  {\n                     Object.keys(filters).map(name => {\n                        const items: DatatableFilter[] = (filters as any)[name]\n                        return (\n                           <Select\n                              key={name}\n                              placeholder={name.charAt(0).toUpperCase() + name.slice(1)}\n                              value={(state as any)[name] || \"\"}\n                              onChange={(value) => {\n                                 update({ [name]: value } as any)\n                              }}\n                           >\n                              {\n                                 items.map((item) => <Option key={name + item.value} value={item.value}>\n                                    {item.label}\n                                 </Option>)\n                              }\n                           </Select>\n                        )\n                     })\n                  }\n               </Stack>\n            }\n         </Stack>\n         <Stack flexRow gap={2} className='datatable-header-right-area'>\n            {!hideSearch && <Input\n               endIcon={<IconSearch />}\n               p={1}\n               placeholder='Search...'\n               {...slotProps?.search}\n               value={state.search}\n               onChange={(e: any) => {\n                  update({ search: e.target.value })\n               }}\n            />}\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;;;AAWA;AACG;AASA;AAEA;AAAa;;AAiBK;AACH;AAcM;AACA;;AAOM;;;AAuBf;AAKf;;"}

package/Datatable/FilterBox.mjs

@@ -9,22 +9,19 @@ import Input from '../Input/index.mjs';
 import IconSearch from '@xanui/icons/Search';
 
 const FilterBox = (props) => {
-    let { tabs, filters, onSearch, onTabChange, disableSearch, slotProps, state, update, } = props;
-    let selected = state.selectedIds;
-    let checked = state.selectAll || !!selected.length;
+    let { tabs, filters, hideSearch, slotProps, state, update, } = props;
+    let checked = state.selectAll || !!state.selected.length;
     if (checked)
         return jsx(Fragment, {});
     return (jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%", children: [jsx(Stack, { gap: 2.4, flexRow: true, children: tabs && jsx(Tabs, { onChange: (value) => {
-                        update({ activeTab: value });
-                        onTabChange && onTabChange(value, state);
-                    }, value: state.activeTab, children: tabs.map(t => jsx(Tab, { value: t.value || t.label.toLowerCase(), children: t.label }, t.label)) }) }), jsx(Stack, { className: 'datatable-header-filter-area', flex: 1, flexRow: true, children: filters && jsx(Stack, { flexRow: true, gap: 2, px: 2, children: Object.keys(filters).map(name => {
+                        update({ tab: value });
+                    }, value: state.tab, children: tabs.map(t => jsx(Tab, { value: t.value || t.label.toLowerCase(), children: t.label }, t.label)) }) }), jsx(Stack, { className: 'datatable-header-filter-area', flex: 1, flexRow: true, children: filters && jsx(Stack, { flexRow: true, gap: 2, px: 2, children: Object.keys(filters).map(name => {
                         const items = filters[name];
                         return (jsx(Select, { placeholder: name.charAt(0).toUpperCase() + name.slice(1), value: state[name] || "", onChange: (value) => {
                                 update({ [name]: value });
                             }, children: items.map((item) => jsx(Option, { value: item.value, children: item.label }, name + item.value)) }, name));
-                    }) }) }), jsx(Stack, { flexRow: true, gap: 2, className: 'datatable-header-right-area', children: !disableSearch && jsx(Input, Object.assign({ endIcon: jsx(IconSearch, {}), p: 1, placeholder: 'Search...' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.search, { value: state.search, onChange: (e) => {
+                    }) }) }), jsx(Stack, { flexRow: true, gap: 2, className: 'datatable-header-right-area', children: !hideSearch && jsx(Input, Object.assign({ endIcon: jsx(IconSearch, {}), p: 1, placeholder: 'Search...' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.search, { value: state.search, onChange: (e) => {
                         update({ search: e.target.value });
-                        onSearch && onSearch(e.target.value, state);
                     } })) })] }));
 };
 

package/Datatable/FilterBox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBox.mjs","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["\"use client\";\r\nimport Stack from '../Stack'\r\nimport { DatatableFilter, DatatablePropsWithState } from '.'\r\nimport Tabs from '../Tabs'\r\nimport Tab from '../Tab'\r\nimport Select from '../Select'\r\nimport Option from '../Option'\r\nimport Input from '../Input'\r\nimport IconSearch from '@xanui/icons/Search'\r\n\r\n\r\nconst FilterBox = (props: DatatablePropsWithState) => {\r\n   let {\r\n      tabs,\r\n      filters,\r\n      onSearch,\r\n      onTabChange,\r\n      disableSearch,\r\n      slotProps,\r\n      state,\r\n      update,\r\n   } = props\r\n\r\n   let selected = state.selectedIds\r\n   let checked = state.selectAll || !!selected.length\r\n\r\n   if (checked) return <></>\r\n\r\n   return (\r\n      <Stack\r\n         direction=\"row\"\r\n         alignItems=\"center\"\r\n         justifyContent=\"space-between\"\r\n         zIndex={1}\r\n         radius={1}\r\n         mb={1}\r\n         height={50}\r\n         width=\"100%\"\r\n      >\r\n         <Stack gap={2.4} flexRow>\r\n            {\r\n               tabs && <Tabs\r\n                  onChange={(value: any) => {\r\n                     update({ activeTab: value })\r\n                     onTabChange && onTabChange(value, state)\r\n                  }}\r\n                  value={state.activeTab}\r\n               >\r\n                  {\r\n                     tabs.map(t => <Tab key={t.label} value={t.value || t.label.toLowerCase()}>{t.label}</Tab>)\r\n                  }\r\n               </Tabs>\r\n            }\r\n         </Stack>\r\n         <Stack className='datatable-header-filter-area' flex={1} flexRow>\r\n            {\r\n               filters && <Stack flexRow gap={2} px={2}>\r\n                  {\r\n                     Object.keys(filters).map(name => {\r\n                        const items: DatatableFilter[] = (filters as any)[name]\r\n                        return (\r\n                           <Select\r\n                              key={name}\r\n                              placeholder={name.charAt(0).toUpperCase() + name.slice(1)}\r\n                              value={(state as any)[name] || \"\"}\r\n                              onChange={(value) => {\r\n                                 update({ [name]: value } as any)\r\n                              }}\r\n                           >\r\n                              {\r\n                                 items.map((item) => <Option key={name + item.value} value={item.value}>\r\n                                    {item.label}\r\n                                 </Option>)\r\n                              }\r\n                           </Select>\r\n                        )\r\n                     })\r\n                  }\r\n               </Stack>\r\n            }\r\n         </Stack>\r\n         <Stack flexRow gap={2} className='datatable-header-right-area'>\r\n\r\n            {!disableSearch && <Input\r\n               endIcon={<IconSearch />}\r\n               p={1}\r\n               placeholder='Search...'\r\n               {...slotProps?.search}\r\n               value={state.search}\r\n               onChange={(e: any) => {\r\n                  update({ search: e.target.value })\r\n                  onSearch && onSearch(e.target.value, state)\r\n               }}\r\n            />}\r\n         </Stack>\r\n      </Stack>\r\n   )\r\n}\r\n\r\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;AAWA;AACG;AAWA;;AAGA;AAAa;;AAiBK;AACA;AACH;AAcM;AACA;;AAOM;;;;AAyBf;AAKf;;"}
+{"version":3,"file":"FilterBox.mjs","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["\"use client\";\nimport Stack from '../Stack'\nimport Tabs from '../Tabs'\nimport Tab from '../Tab'\nimport Select from '../Select'\nimport Option from '../Option'\nimport Input from '../Input'\nimport IconSearch from '@xanui/icons/Search'\nimport { DatatableFilter, DatatablePropsWithState } from './types';\n\n\nconst FilterBox = (props: DatatablePropsWithState) => {\n   let {\n      tabs,\n      filters,\n      hideSearch,\n      slotProps,\n      state,\n      update,\n   } = props\n\n   let checked = state.selectAll || !!state.selected.length\n\n   if (checked) return <></>\n\n   return (\n      <Stack\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n      >\n         <Stack gap={2.4} flexRow>\n            {\n               tabs && <Tabs\n                  onChange={(value: any) => {\n                     update({ tab: value })\n                  }}\n                  value={state.tab}\n               >\n                  {\n                     tabs.map(t => <Tab key={t.label} value={t.value || t.label.toLowerCase()}>{t.label}</Tab>)\n                  }\n               </Tabs>\n            }\n         </Stack>\n         <Stack className='datatable-header-filter-area' flex={1} flexRow>\n            {\n               filters && <Stack flexRow gap={2} px={2}>\n                  {\n                     Object.keys(filters).map(name => {\n                        const items: DatatableFilter[] = (filters as any)[name]\n                        return (\n                           <Select\n                              key={name}\n                              placeholder={name.charAt(0).toUpperCase() + name.slice(1)}\n                              value={(state as any)[name] || \"\"}\n                              onChange={(value) => {\n                                 update({ [name]: value } as any)\n                              }}\n                           >\n                              {\n                                 items.map((item) => <Option key={name + item.value} value={item.value}>\n                                    {item.label}\n                                 </Option>)\n                              }\n                           </Select>\n                        )\n                     })\n                  }\n               </Stack>\n            }\n         </Stack>\n         <Stack flexRow gap={2} className='datatable-header-right-area'>\n            {!hideSearch && <Input\n               endIcon={<IconSearch />}\n               p={1}\n               placeholder='Search...'\n               {...slotProps?.search}\n               value={state.search}\n               onChange={(e: any) => {\n                  update({ search: e.target.value })\n               }}\n            />}\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;AAWA;AACG;AASA;AAEA;AAAa;;AAiBK;AACH;AAcM;AACA;;AAOM;;;AAuBf;AAKf;;"}

package/Datatable/Row.js

@@ -13,16 +13,15 @@ var index$6 = require('../ListItem/index.js');
 var ActionIcon = require('@xanui/icons/MoreVert');
 var index$4 = require('../Menu/index.js');
 
-const Row = ({ rows, rawRow, row, rowAction, disableRow, disableSelect, columns, state, update }) => {
-    let selectesIds = state.selectedIds;
-    const selected = row.id ? state.selectedIds.includes(row === null || row === void 0 ? void 0 : row.id) : false;
+const Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, state, update }) => {
+    const selected = row.id ? state.selected.includes(row === null || row === void 0 ? void 0 : row.id) : false;
     let selectedColor = selected ? "primary.soft" : "transparent";
     const [target, setTarget] = React.useState();
     const isDisable = (disableRow ? disableRow(rawRow, state) : false) || false;
-    return (jsxRuntime.jsxs(index, { disabled: isDisable, children: [!disableSelect && jsxRuntime.jsx(index$1, { width: 40, bgcolor: selectedColor, children: !!row.id && jsxRuntime.jsx(index$2, { checked: selected, onChange: () => {
+    return (jsxRuntime.jsxs(index, { disabled: isDisable, children: [!hideCheckbox && jsxRuntime.jsx(index$1, { width: 40, bgcolor: selectedColor, children: !!row.id && jsxRuntime.jsx(index$2, { checked: selected, onChange: () => {
                         if (isDisable || !row.id)
                             return;
-                        let ids = [...selectesIds];
+                        let ids = [...state.selected];
                         ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id);
                         let selectedLength = 0;
                         rows.forEach(r => {
@@ -32,10 +31,10 @@ const Row = ({ rows, rawRow, row, rowAction, disableRow, disableSelect, columns,
                         });
                         update({
                             selectAll: selectedLength === ids.length,
-                            selectedIds: ids
+                            selected: ids
                         });
                     } }) }), columns.map((_a, idx) => {
-                var { label, field } = _a, rest = tslib.__rest(_a, ["label", "field"]);
+                var { label, field, sortable } = _a, rest = tslib.__rest(_a, ["label", "field", "sortable"]);
                 field = field || label;
                 if (!row[field])
                     return jsxRuntime.jsx(index$1, {}, idx);