@xanui/ui 1.2.6 → 1.2.7

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

package/Carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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/Checkbox/index.cjs

@@ -31,7 +31,7 @@ const Checkbox = React.forwardRef((props, ref) => {
     const [c, set] = React.useState(false);
     checked !== null && checked !== void 0 ? checked : (checked = c);
     size !== null && size !== void 0 ? size : (size = "medium");
-    color !== null && color !== void 0 ? color : (color = "brand");
+    color !== null && color !== void 0 ? color : (color = "primary");
     onChange = onChange || (() => set(!c));
     if (indeterminate) {
         checked = true;
@@ -47,7 +47,7 @@ const Checkbox = React.forwardRef((props, ref) => {
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(core.Tag, { baseClass: 'checkbox', onClick: () => {
                     onChange && onChange();
-                }, sxr: Object.assign({ height: size, width: size, display: "flex", alignItems: "center", justifyContent: "center", color: checked ? color : "text.secondary", cursor: "pointer", disabled: disabled, "& svg": {
+                }, sxr: Object.assign({ height: size, width: size, display: "flex", alignItems: "center", justifyContent: "center", color: checked ? color : "surface.muted", cursor: "pointer", disabled: disabled, "& svg": {
                         fontSize: size
                     } }, rest === null || rest === void 0 ? void 0 : rest.sx), children: checked ? (checkIcon || jsxRuntime.jsx(CheckIcon, {})) : (uncheckIcon || jsxRuntime.jsx(UnCheckIcon, {})) }), jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { component: 'input', ref: ref, readOnly: true, type: "checkbox", checked: checked, sxr: {
                     display: "none!important"

package/Checkbox/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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;;"}
+{"version":3,"file":"index.cjs","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 ??= \"primary\"\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 : \"surface.muted\",\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.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React__default, { ReactElement } from 'react';
 import { TagProps, useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';
 
 type CheckboxProps = Omit<TagProps<"input">, "color" | "size" | "component" | "type" | "checked"> & {
@@ -9,7 +9,7 @@ type CheckboxProps = Omit<TagProps<"input">, "color" | "size" | "component" | "t
     size?: useBreakpointPropsType<number | "small" | "medium" | "large">;
     color?: useBreakpointPropsType<UseColorTemplateColor>;
 };
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<any>>;
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React__default.RefAttributes<any>>;
 
 export { Checkbox as default };
 export type { CheckboxProps };