@xanui/ui 1.2.5 → 1.2.7

package/Calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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, 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: 50,\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 = 36\n    const boxWidth = btnWidth * 7\n\n    const showCalendar = () => {\n\n        let firstDay = (new Date(year, month)).getDay();\n        let rows = []\n        let row = []\n\n        const dayNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\n        for (let i = 0; i < dayNames.length; i++) {\n            const k = dayNames[i];\n            row.push(<Stack\n                key={\"dayname-\" + i}\n                sx={{\n                    width: btnWidth,\n                    height: btnWidth,\n                    alignItems: \"center\",\n                    justifyContent: \"center\"\n                }}\n            >\n                <IconButton\n                    variant={\"text\"}\n                    color=\"default\"\n                    disabled\n                >\n                    {k}\n                </IconButton>\n            </Stack>)\n        }\n\n        rows.push(<Stack flexRow key={\"header\"} className='calender-day-row'>\n            {row}\n        </Stack>);\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                        alignItems=\"center\"\n                        justifyContent=\"center\"\n                        key={date + j + i}\n                        sx={{\n                            width: btnWidth,\n                            height: btnWidth,\n                            alignItems: \"center\",\n                            justifyContent: \"center\"\n                        }}\n                    >\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: \"fill\",\n                            color: \"default\"\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={\"50%\"}\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\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.secondary\"\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;AACH;;;;;;;AAuBT;AAGY;AACA;AACA;AACA;AACH;AAMb;AAGA;AAAkB;;;AAGd;AAAW;AACX;AAAW;AACX;AACA;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAII;;;AAIA;AACA;AACI;AACA;AAGQ;AACA;AACA;AACA;;;AAaZ;;AAKA;;AAEI;;AAEQ;AAKQ;AACA;AACA;AACA;AACH;;AAIF;;;;;;;;AAQC;AACI;AACA;;;;AAKJ;AACI;AACA;;;AAIR;AAEQ;AACA;AACA;AACA;;;AAaI;;AACA;AACA;AACA;;AAMZ;;;AAGR;;AAIJ;AACJ;;;;AAKI;;AAGI;AAeY;;;AAGA;;;;;;AAeJ;AACA;AACA;AACA;;AAMhB;;;AAII;;AAOY;;;AAGA;AACJ;;AAGR;;;AAGA;AACI;;;;AA8BgB;AACA;AACJ;AASI;;AAUA;;AAa5B;;"}
+{"version":3,"file":"index.js","sources":["../../src/Calendar/index.tsx"],"sourcesContent":["\"use client\";\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, 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: 50,\n                p: .1\n            }}\n            className='calender-year-item'\n        >\n            <Button\n                color={selected ? color : 'surface'}\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 || \"primary\"\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 = 36\n    const boxWidth = btnWidth * 7\n\n    const showCalendar = () => {\n\n        let firstDay = (new Date(year, month)).getDay();\n        let rows = []\n        let row = []\n\n        const dayNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\n        for (let i = 0; i < dayNames.length; i++) {\n            const k = dayNames[i];\n            row.push(<Stack\n                key={\"dayname-\" + i}\n                sx={{\n                    width: btnWidth,\n                    height: btnWidth,\n                    alignItems: \"center\",\n                    justifyContent: \"center\"\n                }}\n            >\n                <IconButton\n                    variant={\"text\"}\n                    color=\"surface\"\n                    disabled\n                >\n                    {k}\n                </IconButton>\n            </Stack>)\n        }\n\n        rows.push(<Stack flexRow key={\"header\"} className='calender-day-row'>\n            {row}\n        </Stack>);\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                        alignItems=\"center\"\n                        justifyContent=\"center\"\n                        key={date + j + i}\n                        sx={{\n                            width: btnWidth,\n                            height: btnWidth,\n                            alignItems: \"center\",\n                            justifyContent: \"center\"\n                        }}\n                    >\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: \"fill\",\n                            color: \"surface\"\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 : \"surface\"}\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={\"50%\"}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                p={.1}\n                className='calender-months-item'\n            >\n                <Button\n                    color={selected ? color : 'surface'}\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 ? \"primary.contrast\" : \"surface.contrast\"\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\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=\"surface.lighter\"\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=\"surface\"\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=\"surface\"\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=\"surface\"\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;AACH;;;;;;;AAuBT;AAGY;AACA;AACA;AACA;AACH;AAMb;AAGA;AAAkB;;;AAGd;AAAW;AACX;AAAW;AACX;AACA;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAII;;;AAIA;AACA;AACI;AACA;AAGQ;AACA;AACA;AACA;;;AAaZ;;AAKA;;AAEI;;AAEQ;AAKQ;AACA;AACA;AACA;AACH;;AAIF;;;;;;;;AAQC;AACI;AACA;;;;AAKJ;AACI;AACA;;;AAIR;AAEQ;AACA;AACA;AACA;;;AAaI;;AACA;AACA;AACA;;AAMZ;;;AAGR;;AAIJ;AACJ;;;;AAKI;;AAGI;AAeY;;;AAGA;;;;;;AAeJ;AACA;AACA;AACA;;AAMhB;;;AAII;;AAOY;;;AAGA;AACJ;;AAGR;;;AAGA;AACI;;;;AA8BgB;AACA;AACJ;AASI;;AAUA;;AAa5B;;"}

package/CalendarInput/index.cjs

@@ -18,7 +18,7 @@ const CalenderInput = (props) => {
     let [_a] = core.useInterface("CanlendarInput", props, {}), { value, onChange, getInputValue, slotProps, placeholder } = _a, inputProps = tslib.__rest(_a, ["value", "onChange", "getInputValue", "slotProps", "placeholder"]);
     const [target, setTarget] = React.useState();
     const inputRef = React.useRef(null);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index, Object.assign({ readOnly: true, startIcon: jsxRuntime.jsx(CalendarIcon, {}), placeholder: placeholder }, inputProps, { endIcon: jsxRuntime.jsx(jsxRuntime.Fragment, { children: value && jsxRuntime.jsx(index$1, { children: jsxRuntime.jsx(index$2, { color: "default", size: 28, variant: "text", onClick: () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index, Object.assign({ readOnly: true, startIcon: jsxRuntime.jsx(CalendarIcon, {}), placeholder: placeholder }, inputProps, { endIcon: jsxRuntime.jsx(jsxRuntime.Fragment, { children: value && jsxRuntime.jsx(index$1, { children: jsxRuntime.jsx(index$2, { color: "surface", size: 28, variant: "text", onClick: () => {
                                 onChange && onChange(null);
                             }, children: jsxRuntime.jsx(ClearIcon, { fontSize: 20 }) }) }) }), cursor: "pointer", ref: inputRef, onFocus: () => setTarget(target ? null : inputRef === null || inputRef === void 0 ? void 0 : inputRef.current), value: getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString("en-US") : "") })), jsxRuntime.jsx(index$3, Object.assign({ target: target, placement: "bottom-left", bgcolor: "transparent" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { children: jsxRuntime.jsx(index$4, { onClickOutside: () => setTarget(null), children: jsxRuntime.jsx(index$5, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.calender, { value: value, onChange: (e) => {
                             setTarget(null);

package/CalendarInput/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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                startIcon={<CalendarIcon />}\n                placeholder={placeholder}\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                ref={inputRef}\n                onFocus={() => setTarget(target ? null : inputRef?.current)}\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;;AAgB4B;AACJ;;AAuBA;AACJ;AAMxB;;"}
+{"version":3,"file":"index.cjs","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                startIcon={<CalendarIcon />}\n                placeholder={placeholder}\n                {...inputProps}\n                endIcon={<>\n                    {value && <Stack>\n                        <IconButton\n                            color=\"surface\"\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                ref={inputRef}\n                onFocus={() => setTarget(target ? null : inputRef?.current)}\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;;AAgB4B;AACJ;;AAuBA;AACJ;AAMxB;;"}

package/CalendarInput/index.js

@@ -16,7 +16,7 @@ const CalenderInput = (props) => {
     let [_a] = useInterface("CanlendarInput", props, {}), { value, onChange, getInputValue, slotProps, placeholder } = _a, inputProps = __rest(_a, ["value", "onChange", "getInputValue", "slotProps", "placeholder"]);
     const [target, setTarget] = useState();
     const inputRef = useRef(null);
-    return (jsxs(Fragment, { children: [jsx(Input, Object.assign({ readOnly: true, startIcon: jsx(CalendarIcon, {}), placeholder: placeholder }, inputProps, { endIcon: jsx(Fragment, { children: value && jsx(Stack, { children: jsx(IconButton, { color: "default", size: 28, variant: "text", onClick: () => {
+    return (jsxs(Fragment, { children: [jsx(Input, Object.assign({ readOnly: true, startIcon: jsx(CalendarIcon, {}), placeholder: placeholder }, inputProps, { endIcon: jsx(Fragment, { children: value && jsx(Stack, { children: jsx(IconButton, { color: "surface", size: 28, variant: "text", onClick: () => {
                                 onChange && onChange(null);
                             }, children: jsx(ClearIcon, { fontSize: 20 }) }) }) }), cursor: "pointer", ref: inputRef, onFocus: () => setTarget(target ? null : inputRef === null || inputRef === void 0 ? void 0 : inputRef.current), value: getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString("en-US") : "") })), jsx(Menu, Object.assign({ target: target, placement: "bottom-left", bgcolor: "transparent" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { children: jsx(ClickOutside, { onClickOutside: () => setTarget(null), children: jsx(Calendar, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.calender, { value: value, onChange: (e) => {
                             setTarget(null);

package/CalendarInput/index.js.map

@@ -1 +1 @@
-{"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                startIcon={<CalendarIcon />}\n                placeholder={placeholder}\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                ref={inputRef}\n                onFocus={() => setTarget(target ? null : inputRef?.current)}\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;;AAgB4B;AACJ;;AAuBA;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                startIcon={<CalendarIcon />}\n                placeholder={placeholder}\n                {...inputProps}\n                endIcon={<>\n                    {value && <Stack>\n                        <IconButton\n                            color=\"surface\"\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                ref={inputRef}\n                onFocus={() => setTarget(target ? null : inputRef?.current)}\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;;AAgB4B;AACJ;;AAuBA;AACJ;AAMxB;;"}

package/Carousel/index.cjs

@@ -0,0 +1,231 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@xanui/core');
+var React = require('react');
+
+const Carousel = React.forwardRef((_a, ref) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    const [index, setIndex] = React.useState(0);
+    const childs = React.Children.toArray(children);
+    const total = childs.length;
+    const track = React.useRef(null);
+    const animating = React.useRef(() => { });
+    const state = React.useRef({ x: 0 });
+    const autoplayRef = React.useRef(null);
+    let [_k] = core.useInterface("Carousel", rest, {}), { slidesToShow, slidesToScroll, loop, autoplay, autoplayInterval, duration, transition, easing, onChange, onBeforeChange, onNext, onBeforeNext, onPrev, onBeforePrev } = _k, props = tslib.__rest(_k, ["slidesToShow", "slidesToScroll", "loop", "autoplay", "autoplayInterval", "duration", "transition", "easing", "onChange", "onBeforeChange", "onNext", "onBeforeNext", "onPrev", "onBeforePrev"]);
+    const _p = {};
+    if (slidesToShow)
+        _p.slidesToShow = slidesToShow;
+    if (slidesToScroll)
+        _p.slidesToScroll = slidesToScroll;
+    if (loop)
+        _p.loop = loop;
+    if (autoplay)
+        _p.autoplay = autoplay;
+    if (autoplayInterval)
+        _p.autoplayInterval = autoplayInterval;
+    if (duration)
+        _p.duration = duration;
+    if (transition)
+        _p.transition = transition;
+    if (easing)
+        _p.easing = easing;
+    const p = core.useBreakpointProps(_p);
+    slidesToShow = (_b = p.slidesToShow) !== null && _b !== void 0 ? _b : 1;
+    slidesToScroll = (_c = p.slidesToScroll) !== null && _c !== void 0 ? _c : 1;
+    autoplay = (_d = p.autoplay) !== null && _d !== void 0 ? _d : false;
+    autoplayInterval = (_e = p.autoplayInterval) !== null && _e !== void 0 ? _e : 3000;
+    loop = (_f = p.loop) !== null && _f !== void 0 ? _f : (autoplay ? true : false);
+    duration = (_g = p.duration) !== null && _g !== void 0 ? _g : 500;
+    transition = (_h = p.transition) !== null && _h !== void 0 ? _h : undefined;
+    easing = (_j = p.easing) !== null && _j !== void 0 ? _j : undefined;
+    if (slidesToShow > total) {
+        slidesToShow = total;
+    }
+    if (slidesToScroll > total) {
+        slidesToScroll = total;
+    }
+    if (slidesToShow <= 0) {
+        slidesToShow = 1;
+    }
+    if (slidesToScroll <= 0) {
+        slidesToScroll = 1;
+    }
+    if (slidesToScroll > slidesToShow) {
+        slidesToScroll = slidesToShow;
+    }
+    const goTo = (_index) => {
+        if (_index === index)
+            return;
+        if (_index < 0 || _index > total - slidesToShow)
+            return;
+        setIndex(_index);
+        const indexes = [];
+        for (let i = 0; i < slidesToShow; i++) {
+            indexes.push(_index + i);
+        }
+        onChange && onChange(_index, indexes);
+        const itemWidth = 100 / slidesToShow;
+        const trackEle = track.current;
+        const translate = itemWidth * _index;
+        animating.current();
+        animating.current = core.animate({
+            duration: duration,
+            from: { x: state.current.x },
+            to: { x: translate },
+            onUpdate: ({ x }) => {
+                state.current.x = x;
+                trackEle.style.transform = `translateX(-${x}%)`;
+            },
+        });
+    };
+    const next = () => {
+        let _index = index;
+        if (loop) {
+            if (_index >= total - slidesToShow) {
+                _index = 0;
+            }
+            else if (index + slidesToScroll > total - slidesToShow) {
+                _index = total - slidesToShow;
+            }
+            else {
+                _index = index + slidesToScroll;
+            }
+        }
+        else {
+            if (_index >= total - slidesToShow) {
+                _index = total - slidesToShow;
+            }
+            else if (index + slidesToScroll > total - slidesToShow) {
+                _index = total - slidesToShow;
+            }
+            else {
+                _index = index + slidesToScroll;
+            }
+        }
+        const indexes = [];
+        for (let i = 0; i < slidesToShow; i++) {
+            indexes.push(_index + i);
+        }
+        onNext && onNext(_index, indexes);
+        goTo(_index);
+    };
+    const prev = () => {
+        let _index = index;
+        if (loop) {
+            if (_index <= 0) {
+                _index = total - slidesToShow;
+            }
+            else if (index - slidesToScroll < 0) {
+                _index = 0;
+            }
+            else {
+                _index = index - slidesToScroll;
+            }
+        }
+        else {
+            if (_index <= 0) {
+                _index = 0;
+            }
+            else if (index - slidesToScroll < 0) {
+                _index = 0;
+            }
+            else {
+                _index = index - slidesToScroll;
+            }
+        }
+        const indexes = [];
+        for (let i = 0; i < slidesToShow; i++) {
+            indexes.push(_index + i);
+        }
+        onPrev && onPrev(_index, indexes);
+        goTo(_index);
+    };
+    const stopAutoplay = () => {
+        if (autoplayRef.current) {
+            clearTimeout(autoplayRef.current);
+            autoplayRef.current = null;
+        }
+    };
+    const startAutoplay = () => {
+        stopAutoplay();
+        autoplayRef.current = setTimeout(next, autoplayInterval);
+    };
+    React.useEffect(() => {
+        if (!autoplay)
+            return;
+        startAutoplay();
+        return () => stopAutoplay();
+    }, [index, autoplay]);
+    const indexes = React.useMemo(() => {
+        const idx = [];
+        for (let i = 0; i < slidesToShow; i++) {
+            idx.push(index + i);
+        }
+        return idx;
+    }, [index, slidesToShow]);
+    React.useImperativeHandle(ref, () => ({
+        next,
+        prev,
+        goTo,
+        getIndex: () => index,
+    }));
+    React.useLayoutEffect(() => {
+        goTo(0);
+    }, []);
+    const startX = React.useRef(0);
+    const isDragging = React.useRef(false);
+    const handleStart = (x) => {
+        startX.current = x;
+        isDragging.current = true;
+    };
+    const handleEnd = (x) => {
+        if (!isDragging.current)
+            return;
+        const diff = x - startX.current;
+        if (diff > 50)
+            prev();
+        else if (diff < -50)
+            next();
+        isDragging.current = false;
+    };
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { baseClass: 'carousel', ref: ref, sxr: {
+            width: "100%",
+            overflow: "hidden",
+            cursor: "grab",
+            touchAction: "pan-y",
+            position: "relative",
+        }, children: jsxRuntime.jsx(core.Tag, { baseClass: 'carousel-track', ref: track, sxr: {
+                display: "flex",
+                willChange: "transform",
+                flexDirection: "row",
+            }, onPointerDown: (e) => {
+                e.preventDefault();
+                handleStart(e.clientX);
+            }, onPointerUp: (e) => handleEnd(e.clientX), onTouchStart: (e) => {
+                e.preventDefault();
+                handleStart(e.touches[0].clientX);
+            }, onTouchEnd: (e) => handleEnd(e.changedTouches[0].clientX), onMouseEnter: () => {
+                stopAutoplay();
+            }, onMouseLeave: () => {
+                if (autoplay)
+                    startAutoplay();
+            }, children: childs.map((child, index) => (transition ? jsxRuntime.jsx(core.Transition, { open: indexes.includes(index), variant: transition, easing: easing, duration: duration, initialTransition: false, children: jsxRuntime.jsx(core.Tag, { baseClass: 'carousel-item', sxr: {
+                        p: 1,
+                        userSelect: "none",
+                        flexShrink: 0,
+                        width: `${100 / slidesToShow}%`,
+                    }, children: child }, `${index}`) }, index) : jsxRuntime.jsx(core.Tag, { baseClass: 'carousel-item', sxr: {
+                    p: 1,
+                    userSelect: "none",
+                    flexShrink: 0,
+                    width: `${100 / slidesToShow}%`,
+                }, children: child }, `${index}`))) }) })));
+});
+
+module.exports = Carousel;
+//# sourceMappingURL=index.cjs.map

package/Carousel/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Carousel/index.tsx"],"sourcesContent":["\"use client\"\nimport { animate, Transition, TransitionProps } from '@xanui/core';\nimport { Children, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\nexport type CarouselRef = {\n    next: () => void;\n    prev: () => void;\n    goTo: (index: number) => void;\n    getIndex: () => number;\n};\n\nexport type CarouselProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"children\" | \"onChange\" | \"transition\"> & {\n    children: React.ReactNode\n    slidesToShow?: useBreakpointPropsType<number>;\n    slidesToScroll?: useBreakpointPropsType<number>;\n    infinite?: useBreakpointPropsType<boolean>;\n    autoplay?: useBreakpointPropsType<boolean>;\n    autoplayInterval?: useBreakpointPropsType<number>;\n    loop?: useBreakpointPropsType<boolean>;\n    duration?: useBreakpointPropsType<number>;\n    transition?: useBreakpointPropsType<TransitionProps[\"variant\"]>;\n    easing?: useBreakpointPropsType<TransitionProps[\"easing\"]>;\n\n    onChange?: (index: number, indexes: number[]) => void;\n    onNext?: (index: number, indexes: number[]) => void;\n    onPrev?: (index: number, indexes: number[]) => void;\n}\n\nconst Carousel = forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: CarouselProps<T>, ref: React.Ref<CarouselRef>) => {\n    const [index, setIndex] = useState(0)\n    const childs = Children.toArray(children)\n    const total = childs.length\n    const track = useRef<HTMLElement>(null)\n    const animating = useRef(() => { })\n    const state = useRef({ x: 0 })\n    const autoplayRef = useRef<any | null>(null)\n\n    let [{\n        slidesToShow,\n        slidesToScroll,\n        loop,\n        autoplay,\n        autoplayInterval,\n        duration,\n        transition,\n        easing,\n\n        onChange,\n        onBeforeChange,\n        onNext,\n        onBeforeNext,\n        onPrev,\n        onBeforePrev,\n\n        ...props\n    }] = useInterface<any>(\"Carousel\", rest, {})\n\n    const _p: any = {}\n    if (slidesToShow) _p.slidesToShow = slidesToShow\n    if (slidesToScroll) _p.slidesToScroll = slidesToScroll\n    if (loop) _p.loop = loop\n    if (autoplay) _p.autoplay = autoplay\n    if (autoplayInterval) _p.autoplayInterval = autoplayInterval\n    if (duration) _p.duration = duration\n    if (transition) _p.transition = transition\n    if (easing) _p.easing = easing\n\n\n    const p: any = useBreakpointProps(_p)\n\n    slidesToShow = p.slidesToShow ?? 1\n    slidesToScroll = p.slidesToScroll ?? 1\n    autoplay = p.autoplay ?? false\n    autoplayInterval = p.autoplayInterval ?? 3000\n    loop = p.loop ?? (autoplay ? true : false)\n    duration = p.duration ?? 500\n    transition = p.transition ?? undefined\n    easing = p.easing ?? undefined\n\n    if (slidesToShow > total) {\n        slidesToShow = total\n    }\n    if (slidesToScroll > total) {\n        slidesToScroll = total\n    }\n    if (slidesToShow <= 0) {\n        slidesToShow = 1\n    }\n    if (slidesToScroll <= 0) {\n        slidesToScroll = 1\n    }\n    if (slidesToScroll > slidesToShow) {\n        slidesToScroll = slidesToShow\n    }\n\n    const goTo = (_index: number) => {\n        if (_index === index) return;\n        if (_index < 0 || _index > total - slidesToShow) return;\n\n        setIndex(_index);\n\n        const indexes = []\n        for (let i = 0; i < slidesToShow; i++) {\n            indexes.push(_index + i)\n        }\n        onChange && onChange(_index, indexes)\n\n        const itemWidth = 100 / slidesToShow\n        const trackEle = track.current!;\n        const translate = itemWidth * _index\n        animating.current();\n        animating.current = animate({\n            duration: duration,\n            from: { x: state.current.x },\n            to: { x: translate },\n            onUpdate: ({ x }) => {\n                state.current.x = x\n                trackEle.style.transform = `translateX(-${x}%)`\n            },\n        });\n    }\n\n    const next = () => {\n        let _index = index\n        if (loop) {\n            if (_index >= total - slidesToShow) {\n                _index = 0\n            } else if (index + slidesToScroll > total - slidesToShow) {\n                _index = total - slidesToShow\n            } else {\n                _index = index + slidesToScroll\n            }\n        } else {\n            if (_index >= total - slidesToShow) {\n                _index = total - slidesToShow\n            } else if (index + slidesToScroll > total - slidesToShow) {\n                _index = total - slidesToShow\n            } else {\n                _index = index + slidesToScroll\n            }\n        }\n        const indexes = []\n        for (let i = 0; i < slidesToShow; i++) {\n            indexes.push(_index + i)\n        }\n        onNext && onNext(_index, indexes)\n        goTo(_index)\n    }\n\n    const prev = () => {\n        let _index = index\n        if (loop) {\n            if (_index <= 0) {\n                _index = total - slidesToShow\n            } else if (index - slidesToScroll < 0) {\n                _index = 0\n            } else {\n                _index = index - slidesToScroll\n            }\n        } else {\n            if (_index <= 0) {\n                _index = 0\n            } else if (index - slidesToScroll < 0) {\n                _index = 0\n            } else {\n                _index = index - slidesToScroll\n            }\n        }\n\n        const indexes = []\n        for (let i = 0; i < slidesToShow; i++) {\n            indexes.push(_index + i)\n        }\n        onPrev && onPrev(_index, indexes)\n        goTo(_index)\n    }\n\n    const stopAutoplay = () => {\n        if (autoplayRef.current) {\n            clearTimeout(autoplayRef.current);\n            autoplayRef.current = null;\n        }\n    }\n\n    const startAutoplay = () => {\n        stopAutoplay();\n        autoplayRef.current = setTimeout(next, autoplayInterval);\n    }\n\n    useEffect(() => {\n        if (!autoplay) return;\n        startAutoplay();\n        return () => stopAutoplay();\n    }, [index, autoplay]);\n\n    const indexes = useMemo(() => {\n        const idx = []\n        for (let i = 0; i < slidesToShow; i++) {\n            idx.push(index + i)\n        }\n        return idx\n    }, [index, slidesToShow])\n\n    useImperativeHandle(ref, () => ({\n        next,\n        prev,\n        goTo,\n        getIndex: () => index,\n    }));\n\n    useLayoutEffect(() => {\n        goTo(0)\n    }, [])\n\n    const startX = useRef(0);\n    const isDragging = useRef(false);\n\n    const handleStart = (x: number) => {\n        startX.current = x;\n        isDragging.current = true;\n    };\n\n    const handleEnd = (x: number) => {\n        if (!isDragging.current) return;\n        const diff = x - startX.current;\n        if (diff > 50) prev();\n        else if (diff < -50) next();\n        isDragging.current = false;\n    };\n\n    return (\n        <Tag\n            {...props}\n            baseClass='carousel'\n            ref={ref}\n            sxr={{\n                width: \"100%\",\n                overflow: \"hidden\",\n                cursor: \"grab\",\n                touchAction: \"pan-y\",\n                position: \"relative\",\n            }}\n        >\n            <Tag\n                baseClass='carousel-track'\n                ref={track}\n                sxr={{\n                    display: \"flex\",\n                    willChange: \"transform\",\n                    flexDirection: \"row\",\n                }}\n                onPointerDown={(e: any) => {\n                    e.preventDefault()\n                    handleStart(e.clientX)\n                }}\n                onPointerUp={(e: any) => handleEnd(e.clientX)}\n                onTouchStart={(e: any) => {\n                    e.preventDefault()\n                    handleStart(e.touches[0].clientX)\n                }}\n                onTouchEnd={(e: any) => handleEnd(e.changedTouches[0].clientX)}\n\n                onMouseEnter={() => {\n                    stopAutoplay()\n                }}\n                onMouseLeave={() => {\n                    if (autoplay) startAutoplay()\n                }}\n            >\n                {\n                    childs.map((child, index) => (\n                        transition ? <Transition\n                            key={index}\n                            open={indexes.includes(index)}\n                            variant={transition}\n                            easing={easing}\n                            duration={duration}\n                            initialTransition={false}\n                        >\n                            <Tag\n                                key={`${index}`}\n                                baseClass='carousel-item'\n                                sxr={{\n                                    p: 1,\n                                    userSelect: \"none\",\n                                    flexShrink: 0,\n                                    width: `${100 / slidesToShow}%`,\n                                }}\n                            >\n                                {child}\n                            </Tag>\n                        </Transition> : <Tag\n                            key={`${index}`}\n                            baseClass='carousel-item'\n                            sxr={{\n                                p: 1,\n                                userSelect: \"none\",\n                                flexShrink: 0,\n                                width: `${100 / slidesToShow}%`,\n                            }}\n                        >\n                            {child}\n                        </Tag>\n                    ))\n                }\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default Carousel"],"names":[],"mappings":";;;;;;;;AA6BA;;AAAiE;;;AAG7D;AACA;;;AAGA;;;AAuBA;AAAkB;AAClB;AAAoB;AACpB;AAAU;AACV;AAAc;AACd;AAAsB;AACtB;AAAc;AACd;AAAgB;AAChB;AAAY;AAGZ;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAGA;;;AAGA;;;AAGA;;;AAGA;;;AAIA;;;;;;;AAOI;AACI;;AAEJ;AAEA;AACA;AACA;;AAEA;AACI;;AAEA;AACA;AACI;;;AAGP;AACL;;;;AAKQ;;;;AAGI;;;AAEA;;;;AAGJ;AACI;;;AAEA;;;AAEA;;;;AAIR;AACI;;AAEJ;;AAEJ;;;;AAKQ;AACI;;AACG;;;;AAGH;;;;AAGJ;;;AAEO;;;;AAGH;;;;AAKR;AACI;;AAEJ;;AAEJ;;AAGI;AACI;AACA;;AAER;;AAGI;;AAEJ;;AAGI;;AACA;AACA;AACJ;AAEA;;AAEI;AACI;;AAEJ;AACJ;AAEA;;;;AAII;AACH;;;;AAMD;AACA;AAEA;AACI;AACA;AACJ;AAEA;;;AAEI;;AACe;;AACM;AACrB;AACJ;AAEA;AAMY;AACA;AACA;AACA;AACA;AACH;AAMO;AACA;AACA;AACH;;AAGG;;;;;AAUA;AACJ;AAEI;AAAc;;AAiBE;AACA;AACA;AACA;;AASJ;AACA;AACA;AACA;;AAUhC;;"}

package/Carousel/index.d.ts

@@ -0,0 +1,28 @@
+import * as React$1 from 'react';
+import { TagComponentType, TagProps, useBreakpointPropsType, TransitionProps } from '@xanui/core';
+
+type CarouselRef = {
+    next: () => void;
+    prev: () => void;
+    goTo: (index: number) => void;
+    getIndex: () => number;
+};
+type CarouselProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "children" | "onChange" | "transition"> & {
+    children: React.ReactNode;
+    slidesToShow?: useBreakpointPropsType<number>;
+    slidesToScroll?: useBreakpointPropsType<number>;
+    infinite?: useBreakpointPropsType<boolean>;
+    autoplay?: useBreakpointPropsType<boolean>;
+    autoplayInterval?: useBreakpointPropsType<number>;
+    loop?: useBreakpointPropsType<boolean>;
+    duration?: useBreakpointPropsType<number>;
+    transition?: useBreakpointPropsType<TransitionProps["variant"]>;
+    easing?: useBreakpointPropsType<TransitionProps["easing"]>;
+    onChange?: (index: number, indexes: number[]) => void;
+    onNext?: (index: number, indexes: number[]) => void;
+    onPrev?: (index: number, indexes: number[]) => void;
+};
+declare const Carousel: React$1.ForwardRefExoticComponent<Omit<CarouselProps<TagComponentType>, "ref"> & React$1.RefAttributes<CarouselRef>>;
+
+export { Carousel as default };
+export type { CarouselProps, CarouselRef };

package/Carousel/index.js

@@ -0,0 +1,229 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { useInterface, useBreakpointProps, Tag, Transition, animate } from '@xanui/core';
+import { forwardRef, useState, Children, useRef, useEffect, useMemo, useImperativeHandle, useLayoutEffect } from 'react';
+
+const Carousel = forwardRef((_a, ref) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    const [index, setIndex] = useState(0);
+    const childs = Children.toArray(children);
+    const total = childs.length;
+    const track = useRef(null);
+    const animating = useRef(() => { });
+    const state = useRef({ x: 0 });
+    const autoplayRef = useRef(null);
+    let [_k] = useInterface("Carousel", rest, {}), { slidesToShow, slidesToScroll, loop, autoplay, autoplayInterval, duration, transition, easing, onChange, onBeforeChange, onNext, onBeforeNext, onPrev, onBeforePrev } = _k, props = __rest(_k, ["slidesToShow", "slidesToScroll", "loop", "autoplay", "autoplayInterval", "duration", "transition", "easing", "onChange", "onBeforeChange", "onNext", "onBeforeNext", "onPrev", "onBeforePrev"]);
+    const _p = {};
+    if (slidesToShow)
+        _p.slidesToShow = slidesToShow;
+    if (slidesToScroll)
+        _p.slidesToScroll = slidesToScroll;
+    if (loop)
+        _p.loop = loop;
+    if (autoplay)
+        _p.autoplay = autoplay;
+    if (autoplayInterval)
+        _p.autoplayInterval = autoplayInterval;
+    if (duration)
+        _p.duration = duration;
+    if (transition)
+        _p.transition = transition;
+    if (easing)
+        _p.easing = easing;
+    const p = useBreakpointProps(_p);
+    slidesToShow = (_b = p.slidesToShow) !== null && _b !== void 0 ? _b : 1;
+    slidesToScroll = (_c = p.slidesToScroll) !== null && _c !== void 0 ? _c : 1;
+    autoplay = (_d = p.autoplay) !== null && _d !== void 0 ? _d : false;
+    autoplayInterval = (_e = p.autoplayInterval) !== null && _e !== void 0 ? _e : 3000;
+    loop = (_f = p.loop) !== null && _f !== void 0 ? _f : (autoplay ? true : false);
+    duration = (_g = p.duration) !== null && _g !== void 0 ? _g : 500;
+    transition = (_h = p.transition) !== null && _h !== void 0 ? _h : undefined;
+    easing = (_j = p.easing) !== null && _j !== void 0 ? _j : undefined;
+    if (slidesToShow > total) {
+        slidesToShow = total;
+    }
+    if (slidesToScroll > total) {
+        slidesToScroll = total;
+    }
+    if (slidesToShow <= 0) {
+        slidesToShow = 1;
+    }
+    if (slidesToScroll <= 0) {
+        slidesToScroll = 1;
+    }
+    if (slidesToScroll > slidesToShow) {
+        slidesToScroll = slidesToShow;
+    }
+    const goTo = (_index) => {
+        if (_index === index)
+            return;
+        if (_index < 0 || _index > total - slidesToShow)
+            return;
+        setIndex(_index);
+        const indexes = [];
+        for (let i = 0; i < slidesToShow; i++) {
+            indexes.push(_index + i);
+        }
+        onChange && onChange(_index, indexes);
+        const itemWidth = 100 / slidesToShow;
+        const trackEle = track.current;
+        const translate = itemWidth * _index;
+        animating.current();
+        animating.current = animate({
+            duration: duration,
+            from: { x: state.current.x },
+            to: { x: translate },
+            onUpdate: ({ x }) => {
+                state.current.x = x;
+                trackEle.style.transform = `translateX(-${x}%)`;
+            },
+        });
+    };
+    const next = () => {
+        let _index = index;
+        if (loop) {
+            if (_index >= total - slidesToShow) {
+                _index = 0;
+            }
+            else if (index + slidesToScroll > total - slidesToShow) {
+                _index = total - slidesToShow;
+            }
+            else {
+                _index = index + slidesToScroll;
+            }
+        }
+        else {
+            if (_index >= total - slidesToShow) {
+                _index = total - slidesToShow;
+            }
+            else if (index + slidesToScroll > total - slidesToShow) {
+                _index = total - slidesToShow;
+            }
+            else {
+                _index = index + slidesToScroll;
+            }
+        }
+        const indexes = [];
+        for (let i = 0; i < slidesToShow; i++) {
+            indexes.push(_index + i);
+        }
+        onNext && onNext(_index, indexes);
+        goTo(_index);
+    };
+    const prev = () => {
+        let _index = index;
+        if (loop) {
+            if (_index <= 0) {
+                _index = total - slidesToShow;
+            }
+            else if (index - slidesToScroll < 0) {
+                _index = 0;
+            }
+            else {
+                _index = index - slidesToScroll;
+            }
+        }
+        else {
+            if (_index <= 0) {
+                _index = 0;
+            }
+            else if (index - slidesToScroll < 0) {
+                _index = 0;
+            }
+            else {
+                _index = index - slidesToScroll;
+            }
+        }
+        const indexes = [];
+        for (let i = 0; i < slidesToShow; i++) {
+            indexes.push(_index + i);
+        }
+        onPrev && onPrev(_index, indexes);
+        goTo(_index);
+    };
+    const stopAutoplay = () => {
+        if (autoplayRef.current) {
+            clearTimeout(autoplayRef.current);
+            autoplayRef.current = null;
+        }
+    };
+    const startAutoplay = () => {
+        stopAutoplay();
+        autoplayRef.current = setTimeout(next, autoplayInterval);
+    };
+    useEffect(() => {
+        if (!autoplay)
+            return;
+        startAutoplay();
+        return () => stopAutoplay();
+    }, [index, autoplay]);
+    const indexes = useMemo(() => {
+        const idx = [];
+        for (let i = 0; i < slidesToShow; i++) {
+            idx.push(index + i);
+        }
+        return idx;
+    }, [index, slidesToShow]);
+    useImperativeHandle(ref, () => ({
+        next,
+        prev,
+        goTo,
+        getIndex: () => index,
+    }));
+    useLayoutEffect(() => {
+        goTo(0);
+    }, []);
+    const startX = useRef(0);
+    const isDragging = useRef(false);
+    const handleStart = (x) => {
+        startX.current = x;
+        isDragging.current = true;
+    };
+    const handleEnd = (x) => {
+        if (!isDragging.current)
+            return;
+        const diff = x - startX.current;
+        if (diff > 50)
+            prev();
+        else if (diff < -50)
+            next();
+        isDragging.current = false;
+    };
+    return (jsx(Tag, Object.assign({}, props, { baseClass: 'carousel', ref: ref, sxr: {
+            width: "100%",
+            overflow: "hidden",
+            cursor: "grab",
+            touchAction: "pan-y",
+            position: "relative",
+        }, children: jsx(Tag, { baseClass: 'carousel-track', ref: track, sxr: {
+                display: "flex",
+                willChange: "transform",
+                flexDirection: "row",
+            }, onPointerDown: (e) => {
+                e.preventDefault();
+                handleStart(e.clientX);
+            }, onPointerUp: (e) => handleEnd(e.clientX), onTouchStart: (e) => {
+                e.preventDefault();
+                handleStart(e.touches[0].clientX);
+            }, onTouchEnd: (e) => handleEnd(e.changedTouches[0].clientX), onMouseEnter: () => {
+                stopAutoplay();
+            }, onMouseLeave: () => {
+                if (autoplay)
+                    startAutoplay();
+            }, children: childs.map((child, index) => (transition ? jsx(Transition, { open: indexes.includes(index), variant: transition, easing: easing, duration: duration, initialTransition: false, children: jsx(Tag, { baseClass: 'carousel-item', sxr: {
+                        p: 1,
+                        userSelect: "none",
+                        flexShrink: 0,
+                        width: `${100 / slidesToShow}%`,
+                    }, children: child }, `${index}`) }, index) : jsx(Tag, { baseClass: 'carousel-item', sxr: {
+                    p: 1,
+                    userSelect: "none",
+                    flexShrink: 0,
+                    width: `${100 / slidesToShow}%`,
+                }, children: child }, `${index}`))) }) })));
+});
+
+export { Carousel as default };
+//# sourceMappingURL=index.js.map