@max-ts/kit 1.3.1 → 1.4.1

package/lib/index.mjs

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Accordion, Checkbox } from "@base-ui/react";
 import clsx_0, { clsx } from "clsx";
-import { ArrowDownNarrowWide, ArrowDownUp, ArrowDownWideNarrow, Calendar1, Check, CheckIcon, ChevronDown, ChevronDownIcon, ChevronLeft, ChevronRight, ChevronRightIcon, ChevronUp, CircleCheck, CircleIcon, Copy, Ellipsis as external_lucide_react_Ellipsis, EllipsisVertical, Info, MoreHorizontalIcon, OctagonAlert, PanelLeftIcon, TriangleAlert, XIcon } from "lucide-react";
+import { ArrowDownNarrowWide, ArrowDownUp, ArrowDownWideNarrow, ArrowLeft, ArrowRight, Calendar1, Check, CheckIcon, ChevronDown, ChevronDownIcon, ChevronLeft, ChevronRight, ChevronRightIcon, ChevronUp, CircleCheck, CircleIcon, Copy, Ellipsis as external_lucide_react_Ellipsis, EllipsisVertical, Info, MoreHorizontalIcon, OctagonAlert, PanelLeftIcon, TriangleAlert, XIcon } from "lucide-react";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { Button } from "@base-ui/react/button";
 import react, { createContext, createElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -12,7 +12,6 @@ import { useRender } from "@base-ui/react/use-render";
 import { Separator as separator_Separator } from "@base-ui/react/separator";
 import { DayPicker } from "react-day-picker";
 import { ru } from "react-day-picker/locale";
-import embla_carousel_react from "embla-carousel-react";
 import { Collapsible } from "@base-ui/react/collapsible";
 import { Popover } from "@base-ui/react/popover";
 import { Tooltip } from "@base-ui/react/tooltip";
@@ -272,6 +271,49 @@ AlertDialog_AlertDialog.Title = Title;
 AlertDialog_AlertDialog.Description = Description;
 AlertDialog_AlertDialog.Action = Action;
 AlertDialog_AlertDialog.Cancel = Cancel;
+var circle = 'style__m6b9n24';
+var colors = {
+    primary: 'primary__m6b9n27',
+    secondary: 'secondary__m6b9n28',
+    inherit: 'inherit__m6b9n29'
+};
+var styles_css_root = 'style__m6b9n22';
+var svg = 'style__m6b9n23';
+var variants = {
+    determinate: 'determinate__m6b9n25',
+    indeterminate: 'indeterminate__m6b9n26'
+};
+const CircularProgress = ({ size = 30, thickness = 2.2, color = 'primary', value = 0, variant = 'indeterminate', className })=>{
+    const radius = (size - thickness) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const dashOffset = 'determinate' === variant ? circumference * (1 - value / 100) : 0.25 * circumference;
+    return /*#__PURE__*/ jsx("div", {
+        className: clsx_0(styles_css_root, variants[variant], colors[color], className),
+        style: {
+            width: size,
+            height: size
+        },
+        children: /*#__PURE__*/ jsxs("svg", {
+            className: svg,
+            viewBox: `0 0 ${size} ${size}`,
+            children: [
+                /*#__PURE__*/ jsx("title", {
+                    children: "Progress bar"
+                }),
+                /*#__PURE__*/ jsx("circle", {
+                    className: clsx_0(circle, 'determinate' === variant && variants.determinate),
+                    cx: size / 2,
+                    cy: size / 2,
+                    r: radius,
+                    fill: "none",
+                    strokeWidth: thickness,
+                    strokeDasharray: circumference,
+                    strokeDashoffset: dashOffset
+                })
+            ]
+        })
+    });
+};
 var addon = 'style__1rv6t1j1';
 var addonAlign = {
     'inline-start': 'inline-start__1rv6t1j2',
@@ -288,13 +330,13 @@ var buttonSize = {
 };
 var control = 'style__1rv6t1jc';
 var input = 'style__1rv6t1jd';
-var styles_css_root = 'style__1rv6t1j0';
+var InputGroup_styles_css_root = 'style__1rv6t1j0';
 var styles_css_text = 'style__1rv6t1jb';
 var styles_css_textarea = 'style__1rv6t1je';
 function InputGroup({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "input-group",
-        className: clsx(styles_css_root, className),
+        className: clsx(InputGroup_styles_css_root, className),
         ...props
     });
 }
@@ -398,7 +440,7 @@ function Clear({ className, children, ...props }) {
         })
     });
 }
-function Combobox_Input({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
+function Combobox_Input({ className, children, disabled = false, error: _error, helperText: _helperText, showTrigger = true, showClear = false, ...props }) {
     return /*#__PURE__*/ jsxs(Combobox.InputGroup, {
         render: /*#__PURE__*/ jsx(InputGroup, {
             className: clsx(inputGroup, className)
@@ -522,7 +564,7 @@ function Chip({ className, children, showRemove = true, ...props }) {
         ]
     });
 }
-function ChipsInput({ className, ...props }) {
+function ChipsInput({ className, error: _error, helperText: _helperText, ...props }) {
     return /*#__PURE__*/ jsx(Combobox.Input, {
         "data-slot": "combobox-chip-input",
         className: clsx(chipsInput, className),
@@ -566,7 +608,7 @@ var alignments = {
     right: 'right__1sba6zom',
     justify: 'justify__1sba6zon'
 };
-var colors = {
+var styles_css_colors = {
     primary: 'primary__1sba6zoc',
     secondary: 'secondary__1sba6zod',
     disabled: 'disabled__1sba6zoe',
@@ -591,7 +633,7 @@ var transforms = {
     uppercase: 'uppercase__1sba6zov',
     capitalize: 'capitalize__1sba6zow'
 };
-var variants = {
+var styles_css_variants = {
     h1: 'h1__1sba6zo0',
     h2: 'h2__1sba6zo1',
     h3: 'h3__1sba6zo2',
@@ -628,7 +670,7 @@ const VARIANT_COMPONENT_MAP = {
 const Typography = ({ className, variant = 'body1', component, color = 'primary', align = 'left', display = 'inline', weight = 'normal', transform, decoration = 'none', gutterBottom, children, ...props })=>{
     const Component = component || VARIANT_COMPONENT_MAP[variant || 'body1'];
     return /*#__PURE__*/ jsx(Component, {
-        className: clsx(decorations[decoration], variants[variant], colors[color], weights[weight], transform && transforms[transform], displays[display], alignments[align], {
+        className: clsx(decorations[decoration], styles_css_variants[variant], styles_css_colors[color], weights[weight], transform && transforms[transform], displays[display], alignments[align], {
             [gutterBottomClass]: gutterBottom
         }, className),
         ...props,
@@ -641,11 +683,12 @@ var styles_css_field = 'style__17arfox0';
 var styles_css_fullWidth = 'style__17arfox1';
 var styles_css_helperText = 'style__17arfox3';
 var styles_css_label = 'style__17arfox2';
+var styles_css_loading = 'style__17arfox6';
 function defaultGetOptionLabel(option) {
     return 'string' == typeof option ? option : String(option);
 }
 function Autocomplete(props) {
-    const { className, contentClassName, defaultValue, disabled = false, error = false, fullWidth = false, getOptionLabel = defaultGetOptionLabel, getOptionValue = getOptionLabel, helperText, id, inputClassName, isOptionEqualToValue, label, labelClassName, multiple, noOptionsText = 'No results found', onChange, options, placeholder, renderOption, required, style, value, ...rootProps } = props;
+    const { className, contentClassName, defaultValue, disabled = false, error = false, fullWidth = false, getOptionLabel = defaultGetOptionLabel, getOptionValue = getOptionLabel, helperText, id, inputClassName, isOptionEqualToValue, isLoading = false, label, labelClassName, loadingText, multiple, noOptionsText = 'No results found', onChange, options, placeholder, renderOption, required, style, value, ...rootProps } = props;
     const generatedId = useId();
     const inputId = id ?? (label ? generatedId : void 0);
     const anchor = useComboboxAnchor();
@@ -715,17 +758,28 @@ function Autocomplete(props) {
                             [styles_css_fullWidth]: fullWidth
                         }, inputClassName)
                     }),
-                    /*#__PURE__*/ jsxs(Combobox_Combobox.Content, {
+                    /*#__PURE__*/ jsx(Combobox_Combobox.Content, {
                         anchor: multiple ? anchor : void 0,
                         className: contentClassName,
-                        children: [
-                            /*#__PURE__*/ jsx(Combobox_Combobox.Empty, {
-                                children: noOptionsText
-                            }),
-                            /*#__PURE__*/ jsx(Combobox_Combobox.List, {
-                                children: renderItem
+                        children: isLoading ? /*#__PURE__*/ jsx("div", {
+                            "data-slot": "autocomplete-loading",
+                            className: styles_css_loading,
+                            role: "status",
+                            children: loadingText ?? /*#__PURE__*/ jsx(CircularProgress, {
+                                thickness: 1.6,
+                                size: 18,
+                                color: "inherit"
                             })
-                        ]
+                        }) : /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsx(Combobox_Combobox.Empty, {
+                                    children: noOptionsText
+                                }),
+                                /*#__PURE__*/ jsx(Combobox_Combobox.List, {
+                                    children: renderItem
+                                })
+                            ]
+                        })
                     })
                 ]
             }),
@@ -1154,52 +1208,62 @@ function useCarousel() {
     if (!context) throw new Error('useCarousel must be used within a <Carousel />');
     return context;
 }
-var next = 'style__2d6ocq1 style__2d6ocq0';
-var orientations = {
-    horizontal: 'horizontal__2d6ocq3',
-    vertical: 'vertical__2d6ocq4'
+var buttonNext = {
+    horizontal: 'horizontal__2d6ocq2 style__2d6ocq0',
+    vertical: 'vertical__2d6ocq3 style__2d6ocq0'
+};
+var buttonPrev = {
+    horizontal: 'horizontal__2d6ocq4 style__2d6ocq0',
+    vertical: 'vertical__2d6ocq5 style__2d6ocq0'
 };
-var prev = 'style__2d6ocq2 style__2d6ocq0';
-function Buttons({ className, ...props }) {
+var iconWrapper = 'style__2d6ocq1';
+function Arrows({ className, ...props }) {
     const { orientation = 'horizontal', canScrollNext, scrollNext, canScrollPrev, scrollPrev } = useCarousel();
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx("button", {
-                className: clsx(next, orientations[orientation]),
+                className: clsx(buttonPrev[orientation], className),
                 type: "button",
-                "data-slot": "carousel-next",
-                disabled: !canScrollNext,
-                onClick: scrollNext,
+                "data-slot": "carousel-previous",
+                "aria-label": "Previous slide",
+                disabled: !canScrollPrev,
+                onClick: scrollPrev,
                 ...props,
-                children: 'horizontal' === orientation ? /*#__PURE__*/ jsx(ChevronRight, {}) : /*#__PURE__*/ jsx(ChevronDown, {})
+                children: /*#__PURE__*/ jsx("span", {
+                    className: iconWrapper,
+                    children: /*#__PURE__*/ jsx(ArrowLeft, {})
+                })
             }),
             /*#__PURE__*/ jsx("button", {
                 type: "button",
-                className: clsx(prev, orientations[orientation]),
-                "data-slot": "carousel-previous",
-                disabled: !canScrollPrev,
-                onClick: scrollPrev,
+                className: clsx(buttonNext[orientation], className),
+                "data-slot": "carousel-next",
+                "aria-label": "Next slide",
+                "aria-disabled": !canScrollNext,
+                disabled: !canScrollNext,
+                onClick: scrollNext,
                 ...props,
-                children: 'horizontal' === orientation ? /*#__PURE__*/ jsx(ChevronLeft, {}) : /*#__PURE__*/ jsx(ChevronUp, {})
+                children: /*#__PURE__*/ jsx("span", {
+                    className: iconWrapper,
+                    children: /*#__PURE__*/ jsx(ArrowRight, {})
+                })
             })
         ]
     });
 }
-var styles_css_orientations = {
+var Content_styles_css_content = 'style__i1lems0';
+var orientations = {
     horizontal: 'horizontal__i1lems1',
     vertical: 'vertical__i1lems2'
 };
-var wrapper = 'style__i1lems0';
-function Content_Content(props) {
+function Content_Content({ className, ...props }) {
     const { carouselRef, orientation = 'horizontal' } = useCarousel();
     return /*#__PURE__*/ jsx("div", {
-        className: wrapper,
+        className: clsx(Content_styles_css_content, orientations[orientation], className),
         ref: carouselRef,
         "data-slot": "carousel-content",
-        children: /*#__PURE__*/ jsx("div", {
-            className: styles_css_orientations[orientation],
-            ...props
-        })
+        "data-orientation": orientation,
+        ...props
     });
 }
 var dotButton = {
@@ -1207,7 +1271,7 @@ var dotButton = {
     vertical: 'vertical__e2zpp65 style__e2zpp63'
 };
 var styles_css_selected = 'style__e2zpp66';
-var styles_css_wrapper = {
+var wrapper = {
     horizontal: 'horizontal__e2zpp61 style__e2zpp60',
     vertical: 'vertical__e2zpp62 style__e2zpp60'
 };
@@ -1215,24 +1279,23 @@ const useLogic = (api)=>{
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [scrollSnaps, setScrollSnaps] = useState([]);
     const onDotButtonClick = useCallback((index)=>{
-        if (!api) return;
         api.scrollTo(index);
     }, [
         api
     ]);
     const onInit = useCallback((api)=>{
-        if (!api) return;
         setScrollSnaps(api.scrollSnapList());
     }, []);
     const onSelect = useCallback((api)=>{
-        if (!api) return;
         setSelectedIndex(api.selectedScrollSnap());
     }, []);
     useEffect(()=>{
-        if (!api) return;
         onInit(api);
         onSelect(api);
         api.on('reInit', onInit).on('reInit', onSelect).on('select', onSelect);
+        return ()=>{
+            api.off('reInit', onInit).off('reInit', onSelect).off('select', onSelect);
+        };
     }, [
         api,
         onInit,
@@ -1244,12 +1307,15 @@ const useLogic = (api)=>{
         onDotButtonClick
     };
 };
-const Dots = ({ api, orientation })=>{
+const Dots = ({ className, ...props })=>{
+    const { api, orientation } = useCarousel();
     const { selectedIndex, scrollSnaps, onDotButtonClick } = useLogic(api);
     return /*#__PURE__*/ jsx("div", {
-        className: styles_css_wrapper[orientation],
+        className: clsx(wrapper[orientation], className),
+        ...props,
         children: scrollSnaps.map((number, index)=>/*#__PURE__*/ jsx("button", {
                 type: "button",
+                "aria-label": "Carousel Dots",
                 className: clsx(dotButton[orientation], {
                     [styles_css_selected]: index === selectedIndex
                 }),
@@ -1258,51 +1324,221 @@ const Dots = ({ api, orientation })=>{
     });
 };
 var Item_styles_css_item = 'style__1gif6yr0';
-function Item_Item(props) {
+var styles_css_orientations = {
+    horizontal: 'horizontal__1gif6yr1',
+    vertical: 'vertical__1gif6yr2'
+};
+function Item_Item({ className, ...props }) {
+    const { orientation = 'horizontal' } = useCarousel();
     return /*#__PURE__*/ jsx("div", {
-        className: Item_styles_css_item,
-        role: "presentation",
+        className: clsx(Item_styles_css_item, styles_css_orientations[orientation], className),
+        role: "group",
         "aria-roledescription": "slide",
+        "data-orientation": orientation,
         "data-slot": "carousel-item",
         ...props
     });
 }
 var styles_css_rootClass = 'Carousel__1jbydv50';
-const useLogic_useLogic = ({ orientation = 'horizontal', opts, setApi, plugins, data, showDots, showArrows })=>{
-    const [carouselRef, api] = embla_carousel_react({
-        ...opts,
-        axis: 'horizontal' === orientation ? 'x' : 'y'
-    }, plugins);
+const useLogic_useLogic = ({ orientation = 'horizontal', align = 'center', setApi })=>{
+    const resolvedOrientation = orientation;
+    const resolvedAlign = align;
+    const viewportRef = useRef(null);
+    const resizeObserverRef = useRef(null);
+    const mutationObserverRef = useRef(null);
+    const observedSlidesRef = useRef([]);
+    const orientationRef = useRef(resolvedOrientation);
+    const alignRef = useRef(resolvedAlign);
+    const selectedIndexRef = useRef(0);
+    const canScrollPrevRef = useRef(false);
+    const canScrollNextRef = useRef(false);
+    const scrollSnapsRef = useRef([]);
+    const listenersRef = useRef({
+        reInit: new Set(),
+        select: new Set()
+    });
     const [canScrollPrev, setCanScrollPrev] = useState(false);
     const [canScrollNext, setCanScrollNext] = useState(false);
-    const isShowButtons = Boolean(showArrows && data.length > 1);
-    const isShowDots = Boolean(showDots && data.length > 1);
-    const onSelect = useCallback((api)=>{
-        if (!api) return;
-        setCanScrollPrev(api.canScrollPrev());
-        setCanScrollNext(api.canScrollNext());
+    const getSlides = useCallback(()=>{
+        if (!viewportRef.current) return [];
+        return Array.from(viewportRef.current.querySelectorAll('[data-slot="carousel-item"]'));
     }, []);
-    const onDotButtonClick = useCallback((index)=>{
-        if (!api) return;
-        api.scrollTo(index);
+    const getTargetFor = useCallback((index)=>{
+        const viewport = viewportRef.current;
+        if (!viewport) return 0;
+        const slide = getSlides()[index];
+        if (!slide) return 0;
+        const isHorizontal = 'horizontal' === orientationRef.current;
+        const viewportSize = isHorizontal ? viewport.clientWidth : viewport.clientHeight;
+        const slideSize = isHorizontal ? slide.offsetWidth : slide.offsetHeight;
+        const slideStart = isHorizontal ? slide.offsetLeft : slide.offsetTop;
+        let target = slideStart;
+        if ('center' === alignRef.current) target = slideStart - (viewportSize - slideSize) / 2;
+        else if ('end' === alignRef.current) target = slideStart - (viewportSize - slideSize);
+        const max = isHorizontal ? viewport.scrollWidth - viewport.clientWidth : viewport.scrollHeight - viewport.clientHeight;
+        return Math.max(0, Math.min(target, Math.max(0, max)));
     }, [
-        api
+        getSlides
+    ]);
+    const emit = useCallback((event, api)=>{
+        for (const callback of listenersRef.current[event])callback(api);
+    }, []);
+    const rebindSlideObservers = useCallback(()=>{
+        const resizeObserver = resizeObserverRef.current;
+        if (!resizeObserver) return;
+        for (const slide of observedSlidesRef.current)resizeObserver.unobserve(slide);
+        observedSlidesRef.current = getSlides();
+        for (const slide of observedSlidesRef.current)resizeObserver.observe(slide);
+    }, [
+        getSlides
+    ]);
+    const api = useMemo(()=>{
+        const carouselApi = {
+            scrollPrev: ()=>{
+                carouselApi.scrollTo(Math.max(0, selectedIndexRef.current - 1));
+            },
+            scrollNext: ()=>{
+                const lastIndex = getSlides().length - 1;
+                if (lastIndex < 0) return;
+                carouselApi.scrollTo(Math.min(lastIndex, selectedIndexRef.current + 1));
+            },
+            scrollTo: (index, jump = false)=>{
+                const viewport = viewportRef.current;
+                if (!viewport) return;
+                const target = getTargetFor(index);
+                viewport.scrollTo('horizontal' === orientationRef.current ? {
+                    left: target,
+                    behavior: jump ? 'auto' : 'smooth'
+                } : {
+                    top: target,
+                    behavior: jump ? 'auto' : 'smooth'
+                });
+            },
+            canScrollNext: ()=>canScrollNextRef.current,
+            canScrollPrev: ()=>canScrollPrevRef.current,
+            selectedScrollSnap: ()=>selectedIndexRef.current,
+            scrollSnapList: ()=>scrollSnapsRef.current,
+            on: (event, callback)=>{
+                listenersRef.current[event].add(callback);
+                return carouselApi;
+            },
+            off: (event, callback)=>{
+                listenersRef.current[event].delete(callback);
+                return carouselApi;
+            },
+            reInit: ()=>{
+                rebindSlideObservers();
+                const slides = getSlides();
+                scrollSnapsRef.current = slides.map((_, index)=>getTargetFor(index));
+                emit('reInit', carouselApi);
+                emit('select', carouselApi);
+            }
+        };
+        return carouselApi;
+    }, [
+        emit,
+        getSlides,
+        getTargetFor,
+        rebindSlideObservers
+    ]);
+    const refresh = useCallback(()=>{
+        const viewport = viewportRef.current;
+        const slides = getSlides();
+        const scrollSnaps = slides.map((_, index)=>getTargetFor(index));
+        scrollSnapsRef.current = scrollSnaps;
+        if (!viewport || 0 === slides.length) {
+            selectedIndexRef.current = 0;
+            canScrollPrevRef.current = false;
+            canScrollNextRef.current = false;
+            setCanScrollPrev(false);
+            setCanScrollNext(false);
+            emit('select', api);
+            return;
+        }
+        const scrollPosition = 'horizontal' === orientationRef.current ? viewport.scrollLeft : viewport.scrollTop;
+        let nearestIndex = 0;
+        let nearestDistance = 1 / 0;
+        for(let index = 0; index < scrollSnaps.length; index += 1){
+            const distance = Math.abs(scrollSnaps[index] - scrollPosition);
+            if (distance < nearestDistance) {
+                nearestDistance = distance;
+                nearestIndex = index;
+            }
+        }
+        selectedIndexRef.current = nearestIndex;
+        canScrollPrevRef.current = nearestIndex > 0;
+        canScrollNextRef.current = nearestIndex < slides.length - 1;
+        setCanScrollPrev(canScrollPrevRef.current);
+        setCanScrollNext(canScrollNextRef.current);
+        emit('select', api);
+    }, [
+        api,
+        emit,
+        getSlides,
+        getTargetFor
+    ]);
+    const handleScroll = useCallback(()=>{
+        refresh();
+    }, [
+        refresh
+    ]);
+    const detachViewport = useCallback(()=>{
+        if (viewportRef.current) viewportRef.current.removeEventListener('scroll', handleScroll);
+        resizeObserverRef.current?.disconnect();
+        mutationObserverRef.current?.disconnect();
+        resizeObserverRef.current = null;
+        mutationObserverRef.current = null;
+        observedSlidesRef.current = [];
+    }, [
+        handleScroll
+    ]);
+    const carouselRef = useCallback((node)=>{
+        if (viewportRef.current === node) return;
+        detachViewport();
+        viewportRef.current = node;
+        if (!node) return void refresh();
+        node.addEventListener('scroll', handleScroll, {
+            passive: true
+        });
+        if ("u" > typeof ResizeObserver) {
+            resizeObserverRef.current = new ResizeObserver(refresh);
+            resizeObserverRef.current.observe(node);
+        }
+        if ("u" > typeof MutationObserver) {
+            mutationObserverRef.current = new MutationObserver(()=>{
+                rebindSlideObservers();
+                refresh();
+                api.reInit();
+            });
+            mutationObserverRef.current.observe(node, {
+                childList: true,
+                subtree: false
+            });
+        }
+        rebindSlideObservers();
+        refresh();
+    }, [
+        api,
+        detachViewport,
+        handleScroll,
+        rebindSlideObservers,
+        refresh
     ]);
     const scrollPrev = useCallback(()=>{
-        api?.scrollPrev();
+        api.scrollPrev();
     }, [
         api
     ]);
     const scrollNext = useCallback(()=>{
-        api?.scrollNext();
+        api.scrollNext();
     }, [
         api
     ]);
     const handleKeyDown = useCallback((event)=>{
-        if ('ArrowLeft' === event.key) {
+        if ('ArrowLeft' === event.key || 'ArrowUp' === event.key) {
             event.preventDefault();
             scrollPrev();
-        } else if ('ArrowRight' === event.key) {
+        } else if ('ArrowRight' === event.key || 'ArrowDown' === event.key) {
             event.preventDefault();
             scrollNext();
         }
@@ -1311,23 +1547,25 @@ const useLogic_useLogic = ({ orientation = 'horizontal', opts, setApi, plugins,
         scrollNext
     ]);
     useEffect(()=>{
-        if (!api || !setApi) return;
-        setApi(api);
+        orientationRef.current = resolvedOrientation;
+        alignRef.current = resolvedAlign;
+        refresh();
+        api.reInit();
     }, [
         api,
-        setApi
+        refresh,
+        resolvedAlign,
+        resolvedOrientation
     ]);
     useEffect(()=>{
-        if (!api) return;
-        onSelect(api);
-        api.on('reInit', onSelect);
-        api.on('select', onSelect);
-        return ()=>{
-            api?.off('select', onSelect);
-        };
+        setApi?.(api);
+        return ()=>setApi?.(void 0);
     }, [
         api,
-        onSelect
+        setApi
+    ]);
+    useEffect(()=>()=>detachViewport(), [
+        detachViewport
     ]);
     return {
         carouselRef,
@@ -1337,54 +1575,38 @@ const useLogic_useLogic = ({ orientation = 'horizontal', opts, setApi, plugins,
         canScrollPrev,
         canScrollNext,
         handleKeyDown,
-        opts,
-        orientation,
-        onDotButtonClick,
-        isShowButtons,
-        isShowDots,
-        data
+        orientation
     };
 };
-function Carousel({ width = '100%', height = '100%', ...props }) {
-    const { canScrollNext, canScrollPrev, scrollNext, scrollPrev, api, opts, orientation, carouselRef, handleKeyDown, data, isShowButtons, isShowDots } = useLogic_useLogic(props);
+function Carousel({ align, children, className, orientation: orientationProp, setApi, ...props }) {
+    const { canScrollNext, canScrollPrev, scrollNext, scrollPrev, api, orientation, carouselRef, handleKeyDown } = useLogic_useLogic({
+        align,
+        orientation: orientationProp,
+        setApi
+    });
     return /*#__PURE__*/ jsx(CarouselContext.Provider, {
         value: {
             carouselRef,
             api,
-            opts,
-            orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+            orientation,
             scrollPrev,
             scrollNext,
             canScrollPrev,
             canScrollNext
         },
-        children: /*#__PURE__*/ jsxs("div", {
+        children: /*#__PURE__*/ jsx("section", {
             onKeyDownCapture: handleKeyDown,
-            className: clsx(styles_css_rootClass, props.className),
+            className: clsx(styles_css_rootClass, className),
             "data-slot": "carousel",
-            style: {
-                width,
-                height
-            },
-            children: [
-                /*#__PURE__*/ jsx(Content_Content, {
-                    style: {
-                        width,
-                        height
-                    },
-                    children: data.map((item)=>/*#__PURE__*/ jsx(Item_Item, {
-                            children: props.renderItem(item)
-                        }, `${item[props.keyId]}`))
-                }),
-                isShowButtons && /*#__PURE__*/ jsx(Buttons, {}),
-                isShowDots && /*#__PURE__*/ jsx(Dots, {
-                    api: api,
-                    orientation: orientation
-                })
-            ]
+            ...props,
+            children: children
         })
     });
 }
+Carousel.Content = Content_Content;
+Carousel.Item = Item_Item;
+Carousel.Arrows = Arrows;
+Carousel.Dots = Dots;
 var checkbox_css_icon = 'style__b7yo4k2';
 var indicator = 'style__b7yo4k1';
 var checkbox_css_root = 'style__b7yo4k0';
@@ -1399,49 +1621,6 @@ const Checkbox_Checkbox = ({ className, ...props })=>/*#__PURE__*/ jsx(Checkbox.
             })
         })
     });
-var circle = 'style__m6b9n24';
-var styles_css_colors = {
-    primary: 'primary__m6b9n27',
-    secondary: 'secondary__m6b9n28',
-    inherit: 'inherit__m6b9n29'
-};
-var CircularProgress_styles_css_root = 'style__m6b9n22';
-var svg = 'style__m6b9n23';
-var styles_css_variants = {
-    determinate: 'determinate__m6b9n25',
-    indeterminate: 'indeterminate__m6b9n26'
-};
-const CircularProgress = ({ size = 30, thickness = 2.6, color = 'primary', value = 0, variant = 'indeterminate', className })=>{
-    const radius = (size - thickness) / 2;
-    const circumference = 2 * Math.PI * radius;
-    const dashOffset = 'determinate' === variant ? circumference * (1 - value / 100) : 0.25 * circumference;
-    return /*#__PURE__*/ jsx("div", {
-        className: clsx_0(CircularProgress_styles_css_root, styles_css_variants[variant], styles_css_colors[color], className),
-        style: {
-            width: size,
-            height: size
-        },
-        children: /*#__PURE__*/ jsxs("svg", {
-            className: svg,
-            viewBox: `0 0 ${size} ${size}`,
-            children: [
-                /*#__PURE__*/ jsx("title", {
-                    children: "Progress bar"
-                }),
-                /*#__PURE__*/ jsx("circle", {
-                    className: clsx_0(circle, 'determinate' === variant && styles_css_variants.determinate),
-                    cx: size / 2,
-                    cy: size / 2,
-                    r: radius,
-                    fill: "none",
-                    strokeWidth: thickness,
-                    strokeDasharray: circumference,
-                    strokeDashoffset: dashOffset
-                })
-            ]
-        })
-    });
-};
 function Collapsible_Collapsible({ ...props }) {
     return /*#__PURE__*/ jsx(Collapsible.Root, {
         "data-slot": "collapsible",
@@ -1575,11 +1754,11 @@ var sizes = {
     medium: 'medium__1o97kvm2',
     large: 'large__1o97kvm3'
 };
-var Image_styles_css_wrapper = 'style__1o97kvm0';
+var styles_css_wrapper = 'style__1o97kvm0';
 const Image_Image = (props)=>/*#__PURE__*/ jsx("img", {
         alt: props.alt,
         src: props.src,
-        className: clsx_0(Image_styles_css_wrapper, sizes[props.size || 'medium'], props.className),
+        className: clsx_0(styles_css_wrapper, sizes[props.size || 'medium'], props.className),
         width: props.width,
         height: props.height
     });
@@ -2030,7 +2209,7 @@ function Header_Header({ columns, height }) {
 var DataGrid_styles_css_container = 'style__1gqvluf0';
 var DataGrid_styles_css_disabled = 'style__1gqvluf3';
 var fullHeight = 'style__1gqvluf2';
-var styles_css_loading = 'style__1gqvluf4';
+var DataGrid_styles_css_loading = 'style__1gqvluf4';
 var table = 'style__1gqvluf1';
 var titleClass = 'style__1gqvluf5';
 function DataGrid({ rows, columns, height = '100%', className, rowHeight = 40, headerHeight = 40, keyId, onRowClick, isLoading, isDisabled, isError, emptyState, errorState, footer, title, onRetry }) {
@@ -2045,7 +2224,7 @@ function DataGrid({ rows, columns, height = '100%', className, rowHeight = 40, h
             /*#__PURE__*/ jsxs("table", {
                 className: clsx(table, {
                     [DataGrid_styles_css_disabled]: isDisabled,
-                    [styles_css_loading]: isLoading,
+                    [DataGrid_styles_css_loading]: isLoading,
                     [fullHeight]: isFullHeight
                 }, className),
                 children: [
@@ -3009,7 +3188,7 @@ var Drawer_styles_css_footer = 'style__ccss508';
 var Drawer_styles_css_header = 'style__ccss507';
 var Drawer_styles_css_overlay = 'style__ccss502';
 var Drawer_styles_css_title = 'style__ccss509';
-var viewport = 'style__ccss503';
+var styles_css_viewport = 'style__ccss503';
 const Drawer_Drawer = ({ children, trigger, className, title, description = '', footer, closeButton, swipeDirection = 'down', ...props })=>/*#__PURE__*/ jsxs(Drawer.Root, {
         swipeDirection: swipeDirection,
         ...props,
@@ -3026,7 +3205,7 @@ const Drawer_Drawer = ({ children, trigger, className, title, description = '',
                         className: Drawer_styles_css_overlay
                     }),
                     /*#__PURE__*/ jsx(Drawer.Viewport, {
-                        className: viewport,
+                        className: styles_css_viewport,
                         children: /*#__PURE__*/ jsx(Drawer.Popup, {
                             "data-slot": "drawer-content",
                             className: clsx('group/drawer-content', Drawer_styles_css_content, className),
@@ -3138,7 +3317,7 @@ var carouselInner = 'style__a5l83v1';
 var ImageCarousel_styles_css_image = 'style__a5l83v3';
 var styles_css_indicator = 'style__a5l83v8';
 var indicators = 'style__a5l83v7';
-var slide = 'style__a5l83v2';
+var styles_css_slide = 'style__a5l83v2';
 const ImageCarousel = ({ images = [], autoPlay = false, interval = 5000 })=>{
     const [currentIndex, setCurrentIndex] = useState(0);
     const goToPrevious = ()=>{
@@ -3174,7 +3353,7 @@ const ImageCarousel = ({ images = [], autoPlay = false, interval = 5000 })=>{
                     transform: `translateX(-${100 * currentIndex}%)`
                 },
                 children: images.map((image, index)=>/*#__PURE__*/ jsx("div", {
-                        className: slide,
+                        className: styles_css_slide,
                         children: /*#__PURE__*/ jsx("img", {
                             src: image.src,
                             alt: image.alt || `Slide ${index + 1}`,
@@ -4110,7 +4289,7 @@ var Select_styles_css_sizes = {
     large: 'large__5ilg7o5'
 };
 var Select_styles_css_trigger = 'style__5ilg7o2';
-var styles_css_viewport = 'style__5ilg7o9';
+var Select_styles_css_viewport = 'style__5ilg7o9';
 const Select_Select = ({ onValueChange, ...props })=>/*#__PURE__*/ jsx(Select.Root, {
         ...props,
         onValueChange: (value, eventDetails)=>{
@@ -4163,7 +4342,7 @@ const SelectContent = ({ className, children, side = 'bottom', sideOffset = 4, a
                 children: [
                     /*#__PURE__*/ jsx(SelectScrollUpButton, {}),
                     /*#__PURE__*/ jsx(Select.List, {
-                        className: styles_css_viewport,
+                        className: Select_styles_css_viewport,
                         children: children
                     }),
                     /*#__PURE__*/ jsx(SelectScrollDownButton, {})
@@ -4844,4 +5023,4 @@ const ToggleGroup = ({ value, onChange, options, size, className, label, multipl
         ]
     });
 };
-export { Accordion_Accordion as Accordion, AlertDialog_AlertDialog as AlertDialog, Autocomplete, Avatar_Avatar as Avatar, Badge_Badge as Badge, Breadcrumb, ButtonGroup, Button_Button as Button, Button_buttonSizes as buttonSizes, Button_buttonVariants as buttonVariants, Calendar, Card, Carousel, Checkbox_Checkbox as Checkbox, CircularProgress, Collapsible_Collapsible as Collapsible, Combobox_Combobox as Combobox, ConfirmAction, ContentState, CopyTypography, DEFAULT_SEPARATOR, DEFAULT_SYMBOL, DESCRIPTION_ROOT_CLASSNAME, DashboardLayout, DataGrid, DataGridActionCell, DataGridSortHeader, DataList, DatePicker, Description_Description as Description, Dialog_Dialog as Dialog, Drawer_Drawer as Drawer, DropdownMenu, Empty_Empty as Empty, ImageCarousel, Image_Image as Image, InputGroup, InputOTP, Input_Input as Input, Label, MaskField, NOTIFICATION_POSITIONS, NOTIFY_CLASSNAME, Notification, NotificationContainer, OverflowTypography, PageLayout, Pagination, PeriodPicker, Placeholder, Popover_Popover as Popover, RadioGroupItem, RadioGroup_RadioGroup as RadioGroup, RangeInput, ScrollTopButton, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Select_Select as Select, Sheet, Sidebar_Sidebar as Sidebar, Slider_Slider as Slider, Tabs_Tabs as Tabs, TextField, Textarea_Textarea as Textarea, ToggleGroup, Tooltip_Tooltip as Tooltip, Typography, alignments, badgeVariants, calculateSize, colors, constants_NotificationVariantTypes as NotificationVariantTypes, createHandle, displays, negativeSpacing, notification, spacing, theme, transforms, useComboboxAnchor, useDashboard, useIsMobile, useOverflowed, useSidebar, variants, weights };
+export { Accordion_Accordion as Accordion, AlertDialog_AlertDialog as AlertDialog, Autocomplete, Avatar_Avatar as Avatar, Badge_Badge as Badge, Breadcrumb, ButtonGroup, Button_Button as Button, Button_buttonSizes as buttonSizes, Button_buttonVariants as buttonVariants, Calendar, Card, Carousel, Checkbox_Checkbox as Checkbox, CircularProgress, Collapsible_Collapsible as Collapsible, Combobox_Combobox as Combobox, ConfirmAction, ContentState, CopyTypography, DEFAULT_SEPARATOR, DEFAULT_SYMBOL, DESCRIPTION_ROOT_CLASSNAME, DashboardLayout, DataGrid, DataGridActionCell, DataGridSortHeader, DataList, DatePicker, Description_Description as Description, Dialog_Dialog as Dialog, Drawer_Drawer as Drawer, DropdownMenu, Empty_Empty as Empty, ImageCarousel, Image_Image as Image, InputGroup, InputOTP, Input_Input as Input, Label, MaskField, NOTIFICATION_POSITIONS, NOTIFY_CLASSNAME, Notification, NotificationContainer, OverflowTypography, PageLayout, Pagination, PeriodPicker, Placeholder, Popover_Popover as Popover, RadioGroupItem, RadioGroup_RadioGroup as RadioGroup, RangeInput, ScrollTopButton, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Select_Select as Select, Sheet, Sidebar_Sidebar as Sidebar, Slider_Slider as Slider, Tabs_Tabs as Tabs, TextField, Textarea_Textarea as Textarea, ToggleGroup, Tooltip_Tooltip as Tooltip, Typography, alignments, badgeVariants, calculateSize, constants_NotificationVariantTypes as NotificationVariantTypes, createHandle, displays, negativeSpacing, notification, spacing, styles_css_colors as colors, styles_css_variants as variants, theme, transforms, useComboboxAnchor, useDashboard, useIsMobile, useOverflowed, useSidebar, weights };