@max-ts/kit 1.3.2 → 1.5.0

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";
@@ -1026,14 +1025,14 @@ function Dropdown(props) {
         onValueChange: handleChange,
         items: items,
         children: [
-            /*#__PURE__*/ jsx(SelectTrigger, {
+            /*#__PURE__*/ jsx(Select_Select.Trigger, {
                 className: Dropdown_styles_css_trigger,
-                children: /*#__PURE__*/ jsx(SelectValue, {
+                children: /*#__PURE__*/ jsx(Select_Select.Value, {
                     placeholder: selectedOption?.label
                 })
             }),
-            /*#__PURE__*/ jsx(SelectContent, {
-                children: options?.map(({ value, label, disabled })=>/*#__PURE__*/ jsx(SelectItem, {
+            /*#__PURE__*/ jsx(Select_Select.Content, {
+                children: options?.map(({ value, label, disabled })=>/*#__PURE__*/ jsx(Select_Select.Item, {
                         value: value.toString(),
                         disabled: disabled,
                         children: /*#__PURE__*/ jsx(Typography, {
@@ -1209,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 = {
@@ -1262,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'
 };
@@ -1270,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,
@@ -1299,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
                 }),
@@ -1313,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();
         }
@@ -1366,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,
@@ -1392,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';
@@ -1587,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
     });
@@ -3021,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,
@@ -3038,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),
@@ -3150,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 = ()=>{
@@ -3186,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}`,
@@ -3750,13 +3917,13 @@ function YearsDropdown({ year, onSelect, minDate, maxDate }) {
         onValueChange: onChange,
         value: year.toString(),
         children: [
-            /*#__PURE__*/ jsx(SelectTrigger, {
-                children: /*#__PURE__*/ jsx(SelectValue, {
+            /*#__PURE__*/ jsx(Select_Select.Trigger, {
+                children: /*#__PURE__*/ jsx(Select_Select.Value, {
                     placeholder: year.toString()
                 })
             }),
-            /*#__PURE__*/ jsx(SelectContent, {
-                children: years.map((value)=>/*#__PURE__*/ jsx(SelectItem, {
+            /*#__PURE__*/ jsx(Select_Select.Content, {
+                children: years.map((value)=>/*#__PURE__*/ jsx(Select_Select.Item, {
                         value: value.toString(),
                         children: /*#__PURE__*/ jsx(Typography, {
                             align: "center",
@@ -4107,44 +4274,57 @@ function ScrollTopButton({ onClick, variant = 'outline', ...props }) {
         children: /*#__PURE__*/ jsx(ChevronUp, {})
     });
 }
-var chevron = 'style__5ilg7of';
-var Select_styles_css_content = 'style__5ilg7o8';
-var Select_styles_css_icon = 'style__5ilg7oe';
-var Select_styles_css_item = 'style__5ilg7ob';
-var itemIndicatorWrapper = 'style__5ilg7oc';
-var Select_styles_css_label = 'style__5ilg7oa';
-var Select_styles_css_positioner = 'style__5ilg7o7';
-var scrollButton = 'style__5ilg7o6';
-var Select_styles_css_separator = 'style__5ilg7od';
-var Select_styles_css_sizes = {
-    small: 'small__5ilg7o3',
-    medium: 'medium__5ilg7o4',
-    large: 'large__5ilg7o5'
-};
+var chevron = 'style__5ilg7oc';
+var Select_styles_css_content = 'style__5ilg7o5';
+var Select_styles_css_icon = 'style__5ilg7ob';
+var Select_styles_css_item = 'style__5ilg7o8';
+var itemIndicatorWrapper = 'style__5ilg7o9';
+var Select_styles_css_label = 'style__5ilg7o7';
+var Select_styles_css_positioner = 'style__5ilg7o4';
+var scrollButton = 'style__5ilg7o3';
+var Select_styles_css_separator = 'style__5ilg7oa';
 var Select_styles_css_trigger = 'style__5ilg7o2';
-var styles_css_viewport = 'style__5ilg7o9';
-const Select_Select = ({ onValueChange, ...props })=>/*#__PURE__*/ jsx(Select.Root, {
+var Select_styles_css_viewport = 'style__5ilg7o6';
+function Select_Select({ onValueChange, ...props }) {
+    return /*#__PURE__*/ jsx(Select.Root, {
+        "data-slot": "select",
         ...props,
         onValueChange: (value, eventDetails)=>{
             if (null !== value) onValueChange?.(value, eventDetails);
         }
     });
-const SelectGroup = Select.Group;
-const SelectValue = Select.Value;
-const SelectTrigger = ({ className, children, size = 'medium', ...props })=>/*#__PURE__*/ jsxs(Select.Trigger, {
+}
+function Select_Group({ ...props }) {
+    return /*#__PURE__*/ jsx(Select.Group, {
+        "data-slot": "select-group",
+        ...props
+    });
+}
+function Select_Value({ ...props }) {
+    return /*#__PURE__*/ jsx(Select.Value, {
+        "data-slot": "select-value",
+        ...props
+    });
+}
+function Select_Trigger({ className, children, size = 'medium', ...props }) {
+    return /*#__PURE__*/ jsxs(Select.Trigger, {
         "data-slot": "select-trigger",
-        className: clsx(Select_styles_css_trigger, Select_styles_css_sizes[size], className),
+        "data-size": size,
+        className: clsx(Select_styles_css_trigger, className),
         ...props,
         children: [
             children,
             /*#__PURE__*/ jsx(Select.Icon, {
+                "data-slot": "select-icon",
                 render: /*#__PURE__*/ jsx(ChevronDown, {
                     className: chevron
                 })
             })
         ]
     });
-const SelectScrollUpButton = ({ className, ...props })=>/*#__PURE__*/ jsx(Select.ScrollUpArrow, {
+}
+function ScrollUpButton({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Select.ScrollUpArrow, {
         "data-slot": "select-scroll-up-button",
         className: clsx(scrollButton, className),
         ...props,
@@ -4152,7 +4332,9 @@ const SelectScrollUpButton = ({ className, ...props })=>/*#__PURE__*/ jsx(Select
             className: Select_styles_css_icon
         })
     });
-const SelectScrollDownButton = ({ className, ...props })=>/*#__PURE__*/ jsx(Select.ScrollDownArrow, {
+}
+function ScrollDownButton({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Select.ScrollDownArrow, {
         "data-slot": "select-scroll-down-button",
         className: clsx(scrollButton, className),
         ...props,
@@ -4160,8 +4342,12 @@ const SelectScrollDownButton = ({ className, ...props })=>/*#__PURE__*/ jsx(Sele
             className: Select_styles_css_icon
         })
     });
-const SelectContent = ({ className, children, side = 'bottom', sideOffset = 4, align = 'center', alignOffset = 0, alignItemWithTrigger, position = 'popper', ...props })=>/*#__PURE__*/ jsx(Select.Portal, {
+}
+function Select_Content({ className, children, side = 'bottom', sideOffset = 4, align = 'center', alignOffset = 0, alignItemWithTrigger, position = 'popper', ...props }) {
+    return /*#__PURE__*/ jsx(Select.Portal, {
+        "data-slot": "select-portal",
         children: /*#__PURE__*/ jsx(Select.Positioner, {
+            "data-slot": "select-positioner",
             side: side,
             sideOffset: sideOffset,
             align: align,
@@ -4173,42 +4359,61 @@ const SelectContent = ({ className, children, side = 'bottom', sideOffset = 4, a
                 className: clsx(Select_styles_css_content, className),
                 ...props,
                 children: [
-                    /*#__PURE__*/ jsx(SelectScrollUpButton, {}),
+                    /*#__PURE__*/ jsx(ScrollUpButton, {}),
                     /*#__PURE__*/ jsx(Select.List, {
-                        className: styles_css_viewport,
+                        "data-slot": "select-list",
+                        className: Select_styles_css_viewport,
                         children: children
                     }),
-                    /*#__PURE__*/ jsx(SelectScrollDownButton, {})
+                    /*#__PURE__*/ jsx(ScrollDownButton, {})
                 ]
             })
         })
     });
-const SelectLabel = ({ className, ...props })=>/*#__PURE__*/ jsx(Select.GroupLabel, {
+}
+function Select_Label({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Select.GroupLabel, {
         "data-slot": "select-label",
         className: clsx(Select_styles_css_label, className),
         ...props
     });
-const SelectItem = ({ className, children, ...props })=>/*#__PURE__*/ jsxs(Select.Item, {
+}
+function Select_Item({ className, children, ...props }) {
+    return /*#__PURE__*/ jsxs(Select.Item, {
         "data-slot": "select-item",
         className: clsx(Select_styles_css_item, className),
         ...props,
         children: [
             /*#__PURE__*/ jsx(Select.ItemIndicator, {
+                "data-slot": "select-item-indicator",
                 className: itemIndicatorWrapper,
                 children: /*#__PURE__*/ jsx(Check, {
                     className: Select_styles_css_icon
                 })
             }),
             /*#__PURE__*/ jsx(Select.ItemText, {
+                "data-slot": "select-item-text",
                 children: children
             })
         ]
     });
-const SelectSeparator = ({ className, ...props })=>/*#__PURE__*/ jsx(Select.Separator, {
+}
+function Select_Separator({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Select.Separator, {
         "data-slot": "select-separator",
         className: clsx(Select_styles_css_separator, className),
         ...props
     });
+}
+Select_Select.Trigger = Select_Trigger;
+Select_Select.Value = Select_Value;
+Select_Select.Content = Select_Content;
+Select_Select.Group = Select_Group;
+Select_Select.Label = Select_Label;
+Select_Select.Item = Select_Item;
+Select_Select.ScrollDownButton = ScrollDownButton;
+Select_Select.ScrollUpButton = ScrollUpButton;
+Select_Select.Separator = Select_Separator;
 var Sheet_styles_css_closeButton = 'style__5dkj2fc';
 var styles_css_closeText = 'style__5dkj2fd';
 var Sheet_styles_css_content = 'style__5dkj2fb';
@@ -4856,4 +5061,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, 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 };
+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, 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 };