@yamada-ui/carousel 3.0.0-next-20240908154823 → 3.0.0-next-20240921202825

package/dist/use-carousel.d.ts

@@ -1,8 +1,7 @@
-import * as _yamada_ui_core from '@yamada-ui/core';
-import { HTMLUIProps, CSSUIProps, UIPropGetter, RequiredUIPropGetter, CSSUIObject } from '@yamada-ui/core';
 import * as react from 'react';
 import { RefObject } from 'react';
 import { IconButtonProps } from '@yamada-ui/button';
+import { HTMLUIProps, CSSUIProps, PropGetter, RequiredPropGetter, HTMLProps, CSSUIObject } from '@yamada-ui/core';
 import { EmblaOptionsType, EmblaCarouselType } from 'embla-carousel';
 
 type AlignmentOptionType = EmblaOptionsType["align"];
@@ -12,7 +11,7 @@ type DragHandlerOptionType = EmblaOptionsType["watchDrag"];
 type ResizeHandlerOptionType = EmblaOptionsType["watchResize"];
 type SlidesHandlerOptionType = EmblaOptionsType["watchSlides"];
 type CarouselControl = EmblaCarouselType;
-type CarouselContext = {
+interface CarouselContext {
     carousel: CarouselControl | undefined;
     indexes: number[];
     selectedIndex: number;
@@ -21,11 +20,13 @@ type CarouselContext = {
     slidesToScroll: number;
     slideSize: string | number;
     gap: CSSUIProps["gap"];
-    styles: Record<string, CSSUIObject>;
-};
+    styles: {
+        [key: string]: CSSUIObject;
+    };
+}
 declare const CarouselProvider: react.Provider<CarouselContext>;
 declare const useCarouselContext: () => CarouselContext;
-type UseCarouselProps = Omit<HTMLUIProps<"div">, "onChange" | "draggable" | "gap"> & {
+interface UseCarouselProps extends Omit<HTMLUIProps, "onChange" | "draggable" | "gap"> {
     /**
      * The index of the carousel slide.
      */
@@ -170,7 +171,7 @@ type UseCarouselProps = Omit<HTMLUIProps<"div">, "onChange" | "draggable" | "gap
      * Ref of the resizable item callback.
      */
     controlRef?: RefObject<CarouselControl | undefined>;
-};
+}
 declare const useCarousel: ({ index, defaultIndex, onChange, align, orientation, autoplay, stopMouseEnterAutoplay, loop, duration, delay, slidesToScroll, draggable, dragFree, inViewThreshold, skipSnaps, containScroll, slideSize, includeGapInSize, onScrollProgress, watchDrag, watchResize, watchSlides, controlRef, children, ...rest }: UseCarouselProps) => {
     carousel: EmblaCarouselType | undefined;
     children: react.ReactNode;
@@ -178,32 +179,56 @@ declare const useCarousel: ({ index, defaultIndex, onChange, align, orientation,
     selectedIndex: number;
     orientation: "vertical" | "horizontal";
     slideSize: string | number;
-    gap: string | number | (string & {}) | Partial<Record<(string & {}) | "base" | "sm" | "md" | "lg" | "xl" | "2xl", number | (string & {}) | "px" | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl">> | _yamada_ui_core.ColorModeArray<number | (string & {}) | "px" | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "sm" | "md" | "lg" | "xl" | "2xl" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl">;
+    gap: string | number | (string & {}) | {
+        [x: string & {}]: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | [number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl", number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl"] | undefined;
+        base?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | [number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl", number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl"] | undefined;
+        sm?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | [number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl", number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl"] | undefined;
+        md?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | [number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl", number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl"] | undefined;
+        lg?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | [number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl", number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl"] | undefined;
+        xl?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | [number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl", number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl"] | undefined;
+        "2xl"?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | [number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl", number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl"] | undefined;
+    } | [number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | {
+        [x: string & {}]: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
+        base?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
+        sm?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
+        md?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
+        lg?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
+        xl?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
+        "2xl"?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
+    }, number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | {
+        [x: string & {}]: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
+        base?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
+        sm?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
+        md?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
+        lg?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
+        xl?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
+        "2xl"?: number | "px" | "inherit" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "68" | "72" | "76" | "80" | "84" | "88" | "92" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "xs" | "3xl" | "4xl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-13" | "-14" | "-15" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-68" | "-72" | "-76" | "-80" | "-84" | "-88" | "-92" | "-96" | "-px" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-6.5" | "-7.5" | "-xs" | "-sm" | "-md" | "-normal" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | undefined;
+    }];
     slidesToScroll: number;
     includeGapInSize: boolean;
-    getContainerProps: UIPropGetter;
-    getSlidesProps: UIPropGetter;
+    getContainerProps: PropGetter<"div", undefined>;
+    getSlidesProps: PropGetter<"div", undefined>;
 };
 type UseCarouselReturn = ReturnType<typeof useCarousel>;
-type UseCarouselSlideProps = {
+interface UseCarouselSlideProps {
     index?: number;
-};
+}
 declare const useCarouselSlide: ({ index }: UseCarouselSlideProps) => {
-    getSlideProps: UIPropGetter;
+    getSlideProps: PropGetter<"div", undefined>;
 };
 type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>;
-type UseCarouselControlProps = IconButtonProps & {
+interface UseCarouselControlProps extends IconButtonProps {
     operation: "prev" | "next";
-};
+}
 declare const useCarouselControl: ({ operation, ...rest }: UseCarouselControlProps) => {
-    getControlProps: UIPropGetter<"button">;
+    getControlProps: PropGetter<"button", undefined>;
 };
 type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>;
 declare const useCarouselIndicators: () => {
     indexes: number[];
-    getIndicatorProps: RequiredUIPropGetter<"button", {
+    getIndicatorProps: RequiredPropGetter<HTMLProps<"button"> & {
         index: number;
-    }>;
+    }, HTMLProps<"button">>;
 };
 type UseCarouselIndicatorsReturn = ReturnType<typeof useCarouselIndicators>;
 

package/dist/use-carousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/use-carousel.ts"],"sourcesContent":["import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n  CSSUIObject,\n  HTMLUIProps,\n  CSSUIProps,\n  UIPropGetter,\n  RequiredUIPropGetter,\n} from \"@yamada-ui/core\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n  assignRef,\n  createContext,\n  dataAttr,\n  handlerAll,\n  splitObject,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { EmblaCarouselType, EmblaOptionsType } from \"embla-carousel\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport type { MouseEvent, RefObject } from \"react\"\nimport { Children, useCallback, useEffect, useRef, useState } from \"react\"\n\nexport type AlignmentOptionType = EmblaOptionsType[\"align\"]\nexport type ScrollContainOptionType = EmblaOptionsType[\"containScroll\"]\nexport type SlidesInViewOptionsType = EmblaOptionsType[\"inViewThreshold\"]\nexport type DragHandlerOptionType = EmblaOptionsType[\"watchDrag\"]\nexport type ResizeHandlerOptionType = EmblaOptionsType[\"watchResize\"]\nexport type SlidesHandlerOptionType = EmblaOptionsType[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\n\ntype CarouselContext = {\n  carousel: CarouselControl | undefined\n  indexes: number[]\n  selectedIndex: number\n  orientation: \"vertical\" | \"horizontal\"\n  includeGapInSize: boolean\n  slidesToScroll: number\n  slideSize: string | number\n  gap: CSSUIProps[\"gap\"]\n  styles: Record<string, CSSUIObject>\n}\n\nexport const [CarouselProvider, useCarouselContext] =\n  createContext<CarouselContext>({\n    name: \"CarouselContext\",\n    errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Carousel />\"`,\n  })\n\nexport type UseCarouselProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"onChange\" | \"draggable\" | \"gap\"\n> & {\n  /**\n   * The index of the carousel slide.\n   */\n  index?: number\n  /**\n   * The initial index of the carousel slide.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The callback invoked when carousel slide selected.\n   */\n  onChange?: (index: number) => void\n  /**\n   * The orientation of the carousel.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: \"vertical\" | \"horizontal\"\n  /**\n   * The alignment of the carousel.\n   *\n   * @default 'center'\n   */\n  align?: AlignmentOptionType\n  /**\n   * Clear leading and trailing empty space that causes excessive scrolling.\n   * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n   *\n   * @default false\n   */\n  containScroll?: ScrollContainOptionType\n  /**\n   * The number of slides that should be scrolled with next or previous buttons.\n   *\n   * @default 1\n   */\n  slidesToScroll?: number\n  /**\n   * If `true`, momentum scrolling will be enabled.\n   *\n   * @default false\n   */\n  dragFree?: boolean\n  /**\n   * If `true`, carousel can be scrolled with mouse and touch interactions.\n   *\n   * @default true\n   */\n  draggable?: boolean\n  /**\n   * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n   *\n   * @default 0\n   */\n  inViewThreshold?: SlidesInViewOptionsType\n  /**\n   * If `true`, infinite looping.\n   * Automatically falls back to false if slide content isn't enough to loop.\n   *\n   * @default true\n   */\n  loop?: boolean\n  /**\n   * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n   * Note that this option will be ignored if the dragFree option is set to true.\n   *\n   * @default false\n   */\n  skipSnaps?: boolean\n  /**\n   * Set scroll duration when triggered by any of the API methods.\n   * Higher numbers enables slower scrolling.\n   * Drag interactions are not affected because duration is then determined by the drag force.\n   *\n   * @default 25\n   */\n  duration?: number\n  /**\n   * The number for the autoplay interval of the carousel.\n   *\n   * @default 4000\n   */\n  delay?: number\n  /**\n   * If `true`, the carousel will be autoplay.\n   *\n   * @default false\n   */\n  autoplay?: boolean\n  /**\n   * If `true`, autoplay will pause when the mouse entries over.\n   *\n   * @default true\n   */\n  stopMouseEnterAutoplay?: boolean\n  /**\n   * If `true`, gap will be treated as part of the carousel slide size.\n   *\n   * @default true\n   */\n  includeGapInSize?: boolean\n  /**\n   * The CSS `gap` property.\n   *\n   * @default '4'\n   */\n  gap?: CSSUIProps[\"gap\"]\n  /**\n   * The carousel slide width.\n   *\n   * @default '100%'\n   */\n  slideSize?: string | number\n  /**\n   * A callback that return the current scroll amount when the carousel is scrolled.\n   */\n  onScrollProgress?: (progress: number) => void\n  /**\n   * Enables for scrolling the carousel with mouse and touch interactions.\n   * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.\n   *\n   * @default true\n   */\n  watchDrag?: DragHandlerOptionType\n  /**\n   * Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed.\n   * Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.\n   *\n   * @default true\n   */\n  watchResize?: ResizeHandlerOptionType\n  /**\n   * Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed.\n   * Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.\n   *\n   * @default true\n   */\n  watchSlides?: SlidesHandlerOptionType\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<CarouselControl | undefined>\n}\n\nexport const useCarousel = ({\n  index,\n  defaultIndex = 0,\n  onChange,\n  align = \"center\",\n  orientation = \"horizontal\",\n  autoplay = false,\n  stopMouseEnterAutoplay = true,\n  loop = true,\n  duration = 25,\n  delay = 4000,\n  slidesToScroll = 1,\n  draggable = true,\n  dragFree = false,\n  inViewThreshold = 0,\n  skipSnaps = false,\n  containScroll = false,\n  slideSize = \"100%\",\n  includeGapInSize = true,\n  onScrollProgress,\n  watchDrag = draggable,\n  watchResize,\n  watchSlides,\n  controlRef,\n  children,\n  ...rest\n}: UseCarouselProps) => {\n  const [{ gap = \"fallback(4, 1rem)\", ...containerProps }, slidesProps] =\n    splitObject(rest, layoutStyleProperties)\n\n  const [selectedIndex, setSelectedIndex] = useControllableState({\n    value: index,\n    defaultValue: defaultIndex,\n    onChange,\n  })\n\n  const isVertical = orientation === \"vertical\"\n\n  const [carouselRef, carousel] = useEmblaCarousel(\n    {\n      axis: isVertical ? \"y\" : \"x\",\n      startIndex: defaultIndex,\n      loop,\n      align,\n      slidesToScroll,\n      duration,\n      dragFree,\n      inViewThreshold,\n      skipSnaps,\n      containScroll,\n      watchDrag,\n      watchResize,\n      watchSlides,\n    },\n    [],\n  )\n\n  assignRef(controlRef, carousel)\n\n  const [indexes, setIndexes] = useState<number[]>([])\n  const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n\n  const timeoutId = useRef<any>(undefined)\n\n  const onScroll = useCallback(() => {\n    if (!carousel) return\n\n    const progress = Math.round(\n      Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n    )\n\n    onScrollProgress?.(progress)\n  }, [carousel, onScrollProgress])\n\n  const onSelect = useCallback(() => {\n    if (!carousel) return\n\n    const index = carousel.selectedScrollSnap()\n\n    setSelectedIndex(index)\n  }, [carousel, setSelectedIndex])\n\n  useEffect(() => {\n    const isStop = isMouseEnter && stopMouseEnterAutoplay\n    const isLast = !carousel?.canScrollNext()\n\n    if (carousel && autoplay && !isStop && !isLast) {\n      timeoutId.current = setInterval(() => {\n        carousel.scrollNext()\n      }, delay)\n    } else {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n\n      timeoutId.current = undefined\n    }\n\n    return () => {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n    }\n  }, [\n    autoplay,\n    delay,\n    stopMouseEnterAutoplay,\n    carousel,\n    isMouseEnter,\n    loop,\n    selectedIndex,\n  ])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    carousel.reInit()\n\n    const snapList = carousel.scrollSnapList()\n    const indexes = snapList.map((_, i) => i)\n\n    setIndexes(indexes)\n  }, [\n    Children.toArray(children).length,\n    align,\n    orientation,\n    loop,\n    duration,\n    gap,\n    slidesToScroll,\n    draggable,\n    dragFree,\n    inViewThreshold,\n    skipSnaps,\n    containScroll,\n    slideSize,\n    includeGapInSize,\n  ])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    const snapList = carousel.scrollSnapList()\n    const indexes = snapList.map((_, i) => i)\n\n    setIndexes(indexes)\n  }, [carousel])\n\n  useUpdateEffect(() => {\n    if (carousel) {\n      carousel.on(\"select\", onSelect)\n      carousel.on(\"scroll\", onScroll)\n\n      onScroll()\n\n      return () => {\n        carousel.off(\"select\", onSelect)\n        carousel.off(\"scroll\", onScroll)\n      }\n    }\n  }, [carousel, onScroll])\n\n  const getContainerProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...containerProps,\n      ...props,\n      ref,\n      onMouseEnter: handlerAll(props.onMouseEnter, () => {\n        setIsMouseEnter(true)\n      }),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => {\n        setIsMouseEnter(false)\n      }),\n    }),\n    [containerProps],\n  )\n\n  const getSlidesProps: UIPropGetter = useCallback(\n    (props = {}) => ({\n      ...slidesProps,\n      ...props,\n      ref: carouselRef,\n    }),\n    [slidesProps, carouselRef],\n  )\n\n  return {\n    carousel,\n    children,\n    indexes,\n    selectedIndex,\n    orientation,\n    slideSize,\n    gap,\n    slidesToScroll,\n    includeGapInSize,\n    getContainerProps,\n    getSlidesProps,\n  }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport type UseCarouselSlideProps = {\n  index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n  const { selectedIndex, slidesToScroll } = useCarouselContext()\n\n  index = Math.floor((index ?? 0) / (slidesToScroll ?? 1))\n\n  const isSelected = index === selectedIndex\n\n  const getSlideProps: UIPropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      \"data-index\": index,\n      \"data-selected\": dataAttr(isSelected),\n    }),\n    [isSelected, index],\n  )\n\n  return { getSlideProps }\n}\n\nexport type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>\n\nexport type UseCarouselControlProps = IconButtonProps & {\n  operation: \"prev\" | \"next\"\n}\n\nexport const useCarouselControl = ({\n  operation,\n  ...rest\n}: UseCarouselControlProps) => {\n  const { carousel } = useCarouselContext()\n\n  const isPrev = operation === \"prev\"\n\n  const disabled =\n    rest.disabled ??\n    rest.isDisabled ??\n    (isPrev ? !carousel?.canScrollPrev() : !carousel?.canScrollNext())\n\n  const onClick = useCallback(() => {\n    if (!carousel) return\n\n    if (isPrev) {\n      carousel.scrollPrev()\n    } else {\n      carousel.scrollNext()\n    }\n  }, [carousel, isPrev])\n\n  const getControlProps: UIPropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      disabled,\n      onClick: handlerAll(props.onClick, onClick),\n    }),\n    [disabled, onClick],\n  )\n\n  return { getControlProps }\n}\n\nexport type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>\n\nexport const useCarouselIndicators = () => {\n  const { selectedIndex, carousel, indexes } = useCarouselContext()\n\n  const onClick = useCallback(\n    (ev: MouseEvent, index: number) => {\n      if (!carousel) return\n\n      ev.stopPropagation()\n\n      carousel.scrollTo(index)\n    },\n    [carousel],\n  )\n\n  const getIndicatorProps: RequiredUIPropGetter<\"button\", { index: number }> =\n    useCallback(\n      ({ index, ...props }) => {\n        const isSelected = index === selectedIndex\n\n        return {\n          \"aria-label\": `Go to ${index + 1} slide`,\n          ...props,\n          key: index,\n          \"data-index\": index,\n          \"data-selected\": dataAttr(isSelected),\n          onClick: handlerAll(props.onClick, (ev) => onClick(ev, index)),\n        }\n      },\n      [onClick, selectedIndex],\n    )\n\n  return { indexes, getIndicatorProps }\n}\n\nexport type UseCarouselIndicatorsReturn = ReturnType<\n  typeof useCarouselIndicators\n>\n"],"mappings":"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","names":["useEmblaCarousel","index","indexes"]}
+{"version":3,"sources":["../src/use-carousel.ts"],"sourcesContent":["import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n  CSSUIObject,\n  HTMLUIProps,\n  CSSUIProps,\n  PropGetter,\n  RequiredPropGetter,\n  HTMLProps,\n} from \"@yamada-ui/core\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n  assignRef,\n  createContext,\n  dataAttr,\n  handlerAll,\n  splitObject,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { EmblaCarouselType, EmblaOptionsType } from \"embla-carousel\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport type { MouseEvent, RefObject } from \"react\"\nimport { Children, useCallback, useEffect, useRef, useState } from \"react\"\n\nexport type AlignmentOptionType = EmblaOptionsType[\"align\"]\nexport type ScrollContainOptionType = EmblaOptionsType[\"containScroll\"]\nexport type SlidesInViewOptionsType = EmblaOptionsType[\"inViewThreshold\"]\nexport type DragHandlerOptionType = EmblaOptionsType[\"watchDrag\"]\nexport type ResizeHandlerOptionType = EmblaOptionsType[\"watchResize\"]\nexport type SlidesHandlerOptionType = EmblaOptionsType[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\n\ninterface CarouselContext {\n  carousel: CarouselControl | undefined\n  indexes: number[]\n  selectedIndex: number\n  orientation: \"vertical\" | \"horizontal\"\n  includeGapInSize: boolean\n  slidesToScroll: number\n  slideSize: string | number\n  gap: CSSUIProps[\"gap\"]\n  styles: { [key: string]: CSSUIObject }\n}\n\nexport const [CarouselProvider, useCarouselContext] =\n  createContext<CarouselContext>({\n    name: \"CarouselContext\",\n    errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Carousel />\"`,\n  })\n\nexport interface UseCarouselProps\n  extends Omit<HTMLUIProps, \"onChange\" | \"draggable\" | \"gap\"> {\n  /**\n   * The index of the carousel slide.\n   */\n  index?: number\n  /**\n   * The initial index of the carousel slide.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The callback invoked when carousel slide selected.\n   */\n  onChange?: (index: number) => void\n  /**\n   * The orientation of the carousel.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: \"vertical\" | \"horizontal\"\n  /**\n   * The alignment of the carousel.\n   *\n   * @default 'center'\n   */\n  align?: AlignmentOptionType\n  /**\n   * Clear leading and trailing empty space that causes excessive scrolling.\n   * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n   *\n   * @default false\n   */\n  containScroll?: ScrollContainOptionType\n  /**\n   * The number of slides that should be scrolled with next or previous buttons.\n   *\n   * @default 1\n   */\n  slidesToScroll?: number\n  /**\n   * If `true`, momentum scrolling will be enabled.\n   *\n   * @default false\n   */\n  dragFree?: boolean\n  /**\n   * If `true`, carousel can be scrolled with mouse and touch interactions.\n   *\n   * @default true\n   */\n  draggable?: boolean\n  /**\n   * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n   *\n   * @default 0\n   */\n  inViewThreshold?: SlidesInViewOptionsType\n  /**\n   * If `true`, infinite looping.\n   * Automatically falls back to false if slide content isn't enough to loop.\n   *\n   * @default true\n   */\n  loop?: boolean\n  /**\n   * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n   * Note that this option will be ignored if the dragFree option is set to true.\n   *\n   * @default false\n   */\n  skipSnaps?: boolean\n  /**\n   * Set scroll duration when triggered by any of the API methods.\n   * Higher numbers enables slower scrolling.\n   * Drag interactions are not affected because duration is then determined by the drag force.\n   *\n   * @default 25\n   */\n  duration?: number\n  /**\n   * The number for the autoplay interval of the carousel.\n   *\n   * @default 4000\n   */\n  delay?: number\n  /**\n   * If `true`, the carousel will be autoplay.\n   *\n   * @default false\n   */\n  autoplay?: boolean\n  /**\n   * If `true`, autoplay will pause when the mouse entries over.\n   *\n   * @default true\n   */\n  stopMouseEnterAutoplay?: boolean\n  /**\n   * If `true`, gap will be treated as part of the carousel slide size.\n   *\n   * @default true\n   */\n  includeGapInSize?: boolean\n  /**\n   * The CSS `gap` property.\n   *\n   * @default '4'\n   */\n  gap?: CSSUIProps[\"gap\"]\n  /**\n   * The carousel slide width.\n   *\n   * @default '100%'\n   */\n  slideSize?: string | number\n  /**\n   * A callback that return the current scroll amount when the carousel is scrolled.\n   */\n  onScrollProgress?: (progress: number) => void\n  /**\n   * Enables for scrolling the carousel with mouse and touch interactions.\n   * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.\n   *\n   * @default true\n   */\n  watchDrag?: DragHandlerOptionType\n  /**\n   * Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed.\n   * Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.\n   *\n   * @default true\n   */\n  watchResize?: ResizeHandlerOptionType\n  /**\n   * Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed.\n   * Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.\n   *\n   * @default true\n   */\n  watchSlides?: SlidesHandlerOptionType\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<CarouselControl | undefined>\n}\n\nexport const useCarousel = ({\n  index,\n  defaultIndex = 0,\n  onChange,\n  align = \"center\",\n  orientation = \"horizontal\",\n  autoplay = false,\n  stopMouseEnterAutoplay = true,\n  loop = true,\n  duration = 25,\n  delay = 4000,\n  slidesToScroll = 1,\n  draggable = true,\n  dragFree = false,\n  inViewThreshold = 0,\n  skipSnaps = false,\n  containScroll = false,\n  slideSize = \"100%\",\n  includeGapInSize = true,\n  onScrollProgress,\n  watchDrag = draggable,\n  watchResize,\n  watchSlides,\n  controlRef,\n  children,\n  ...rest\n}: UseCarouselProps) => {\n  const [{ gap = \"fallback(4, 1rem)\", ...containerProps }, slidesProps] =\n    splitObject(rest, layoutStyleProperties)\n\n  const [selectedIndex, setSelectedIndex] = useControllableState({\n    value: index,\n    defaultValue: defaultIndex,\n    onChange,\n  })\n\n  const isVertical = orientation === \"vertical\"\n\n  const [carouselRef, carousel] = useEmblaCarousel(\n    {\n      axis: isVertical ? \"y\" : \"x\",\n      startIndex: defaultIndex,\n      loop,\n      align,\n      slidesToScroll,\n      duration,\n      dragFree,\n      inViewThreshold,\n      skipSnaps,\n      containScroll,\n      watchDrag,\n      watchResize,\n      watchSlides,\n    },\n    [],\n  )\n\n  assignRef(controlRef, carousel)\n\n  const [indexes, setIndexes] = useState<number[]>([])\n  const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n\n  const timeoutId = useRef<any>(undefined)\n\n  const onScroll = useCallback(() => {\n    if (!carousel) return\n\n    const progress = Math.round(\n      Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n    )\n\n    onScrollProgress?.(progress)\n  }, [carousel, onScrollProgress])\n\n  const onSelect = useCallback(() => {\n    if (!carousel) return\n\n    const index = carousel.selectedScrollSnap()\n\n    setSelectedIndex(index)\n  }, [carousel, setSelectedIndex])\n\n  useEffect(() => {\n    const isStop = isMouseEnter && stopMouseEnterAutoplay\n    const isLast = !carousel?.canScrollNext()\n\n    if (carousel && autoplay && !isStop && !isLast) {\n      timeoutId.current = setInterval(() => {\n        carousel.scrollNext()\n      }, delay)\n    } else {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n\n      timeoutId.current = undefined\n    }\n\n    return () => {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n    }\n  }, [\n    autoplay,\n    delay,\n    stopMouseEnterAutoplay,\n    carousel,\n    isMouseEnter,\n    loop,\n    selectedIndex,\n  ])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    carousel.reInit()\n\n    const snapList = carousel.scrollSnapList()\n    const indexes = snapList.map((_, i) => i)\n\n    setIndexes(indexes)\n  }, [\n    Children.toArray(children).length,\n    align,\n    orientation,\n    loop,\n    duration,\n    gap,\n    slidesToScroll,\n    draggable,\n    dragFree,\n    inViewThreshold,\n    skipSnaps,\n    containScroll,\n    slideSize,\n    includeGapInSize,\n  ])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    const snapList = carousel.scrollSnapList()\n    const indexes = snapList.map((_, i) => i)\n\n    setIndexes(indexes)\n  }, [carousel])\n\n  useUpdateEffect(() => {\n    if (carousel) {\n      carousel.on(\"select\", onSelect)\n      carousel.on(\"scroll\", onScroll)\n\n      onScroll()\n\n      return () => {\n        carousel.off(\"select\", onSelect)\n        carousel.off(\"scroll\", onScroll)\n      }\n    }\n  }, [carousel, onScroll])\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...containerProps,\n      ...props,\n      ref,\n      onMouseEnter: handlerAll(props.onMouseEnter, () => {\n        setIsMouseEnter(true)\n      }),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => {\n        setIsMouseEnter(false)\n      }),\n    }),\n    [containerProps],\n  )\n\n  const getSlidesProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...slidesProps,\n      ...props,\n      ref: carouselRef,\n    }),\n    [slidesProps, carouselRef],\n  )\n\n  return {\n    carousel,\n    children,\n    indexes,\n    selectedIndex,\n    orientation,\n    slideSize,\n    gap,\n    slidesToScroll,\n    includeGapInSize,\n    getContainerProps,\n    getSlidesProps,\n  }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport interface UseCarouselSlideProps {\n  index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n  const { selectedIndex, slidesToScroll } = useCarouselContext()\n\n  index = Math.floor((index ?? 0) / (slidesToScroll ?? 1))\n\n  const isSelected = index === selectedIndex\n\n  const getSlideProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      \"data-index\": index,\n      \"data-selected\": dataAttr(isSelected),\n    }),\n    [isSelected, index],\n  )\n\n  return { getSlideProps }\n}\n\nexport type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>\n\nexport interface UseCarouselControlProps extends IconButtonProps {\n  operation: \"prev\" | \"next\"\n}\n\nexport const useCarouselControl = ({\n  operation,\n  ...rest\n}: UseCarouselControlProps) => {\n  const { carousel } = useCarouselContext()\n\n  const isPrev = operation === \"prev\"\n\n  const disabled =\n    rest.disabled ??\n    rest.isDisabled ??\n    (isPrev ? !carousel?.canScrollPrev() : !carousel?.canScrollNext())\n\n  const onClick = useCallback(() => {\n    if (!carousel) return\n\n    if (isPrev) {\n      carousel.scrollPrev()\n    } else {\n      carousel.scrollNext()\n    }\n  }, [carousel, isPrev])\n\n  const getControlProps: PropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      disabled,\n      onClick: handlerAll(props.onClick, onClick),\n    }),\n    [disabled, onClick],\n  )\n\n  return { getControlProps }\n}\n\nexport type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>\n\nexport const useCarouselIndicators = () => {\n  const { selectedIndex, carousel, indexes } = useCarouselContext()\n\n  const onClick = useCallback(\n    (ev: MouseEvent, index: number) => {\n      if (!carousel) return\n\n      ev.stopPropagation()\n\n      carousel.scrollTo(index)\n    },\n    [carousel],\n  )\n\n  const getIndicatorProps: RequiredPropGetter<\n    HTMLProps<\"button\"> & { index: number },\n    HTMLProps<\"button\">\n  > = useCallback(\n    ({ index, ...props }) => {\n      const isSelected = index === selectedIndex\n\n      return {\n        \"aria-label\": `Go to ${index + 1} slide`,\n        ...props,\n        key: index,\n        \"data-index\": index,\n        \"data-selected\": dataAttr(isSelected),\n        onClick: handlerAll(props.onClick, (ev) => onClick(ev, index)),\n      }\n    },\n    [onClick, selectedIndex],\n  )\n\n  return { indexes, getIndicatorProps }\n}\n\nexport type UseCarouselIndicatorsReturn = ReturnType<\n  typeof useCarouselIndicators\n>\n"],"mappings":"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","names":["useEmblaCarousel","index","indexes"]}

package/dist/use-carousel.mjs

@@ -6,7 +6,7 @@ import {
   useCarouselControl,
   useCarouselIndicators,
   useCarouselSlide
-} from "./chunk-H4J2Q2O6.mjs";
+} from "./chunk-YSHRYDOY.mjs";
 export {
   CarouselProvider,
   useCarousel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/carousel",
-  "version": "3.0.0-next-20240908154823",
+  "version": "3.0.0-next-20240921202825",
   "description": "Yamada UI carousel component",
   "keywords": [
     "yamada",
@@ -37,13 +37,13 @@
   },
   "dependencies": {
     "embla-carousel-react": "^8.2.0",
-    "@yamada-ui/button": "2.0.0-next-20240908154823",
-    "@yamada-ui/core": "1.14.0-next-20240908154823",
-    "@yamada-ui/icon": "1.1.5-next-20240908154823",
-    "@yamada-ui/use-controllable-state": "1.0.19-next-20240908154823",
-    "@yamada-ui/use-token": "1.1.24-next-20240908154823",
-    "@yamada-ui/use-value": "1.1.24-next-20240908154823",
-    "@yamada-ui/utils": "1.4.1-next-20240908154823"
+    "@yamada-ui/button": "2.0.0-next-20240921202825",
+    "@yamada-ui/core": "1.15.0",
+    "@yamada-ui/icon": "1.1.6",
+    "@yamada-ui/use-controllable-state": "1.0.20",
+    "@yamada-ui/use-token": "1.1.25",
+    "@yamada-ui/use-value": "1.1.25",
+    "@yamada-ui/utils": "1.5.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0",

package/dist/chunk-ASHU4NCB.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/carousel-indicators.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { FC, ReactElement } from \"react\"\nimport { cloneElement } from \"react\"\nimport { useCarouselContext, useCarouselIndicators } from \"./use-carousel\"\n\ntype CarouselIndicatorsOptions = {\n  /**\n   * The custom carousel indicator to use.\n   */\n  component?: FC<{ index: number; isSelected: boolean }>\n}\n\nexport type CarouselIndicatorsProps = Omit<HTMLUIProps<\"div\">, \"children\"> &\n  CarouselIndicatorsOptions\n\nexport const CarouselIndicators = forwardRef<CarouselIndicatorsProps, \"div\">(\n  ({ className, component, ...rest }, ref) => {\n    const { selectedIndex, orientation, styles } = useCarouselContext()\n\n    const { indexes, getIndicatorProps } = useCarouselIndicators()\n\n    const css: CSSUIObject = {\n      ...styles.indicators,\n      ...(orientation === \"vertical\"\n        ? { flexDirection: \"column\" }\n        : { flexDirection: \"row\" }),\n    }\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-carousel__indicators\", className)}\n        __css={css}\n        {...rest}\n      >\n        {indexes.map((index) => {\n          const isSelected = index === selectedIndex\n\n          if (typeof component === \"function\") {\n            const child = component({\n              index,\n              isSelected,\n            }) as ReactElement | null\n\n            if (!child) return null\n\n            const props = getIndicatorProps({ ...child.props, index })\n\n            return cloneElement(child as ReactElement, props)\n          } else {\n            const { key, ...props } = getIndicatorProps({ index })\n\n            return <CarouselIndicator key={key} {...props} />\n          }\n        })}\n      </ui.div>\n    )\n  },\n)\n\ntype CarouselIndicatorProps = HTMLUIProps<\"button\">\n\nconst CarouselIndicator: FC<CarouselIndicatorProps> = ({\n  className,\n  ...rest\n}) => {\n  const { styles } = useCarouselContext()\n\n  const css: CSSUIObject = { ...styles.indicator }\n\n  return (\n    <ui.button\n      type=\"button\"\n      tabIndex={-1}\n      className={cx(\"ui-carousel__indicator\", className)}\n      __css={css}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AAEnB,SAAS,oBAAoB;AAkDV;AArCZ,IAAM,qBAAqB;AAAA,EAChC,CAAC,EAAE,WAAW,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC1C,UAAM,EAAE,eAAe,aAAa,OAAO,IAAI,mBAAmB;AAElE,UAAM,EAAE,SAAS,kBAAkB,IAAI,sBAAsB;AAE7D,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,MACV,GAAI,gBAAgB,aAChB,EAAE,eAAe,SAAS,IAC1B,EAAE,eAAe,MAAM;AAAA,IAC7B;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,2BAA2B,SAAS;AAAA,QAClD,OAAO;AAAA,QACN,GAAG;AAAA,QAEH,kBAAQ,IAAI,CAAC,UAAU;AACtB,gBAAM,aAAa,UAAU;AAE7B,cAAI,OAAO,cAAc,YAAY;AACnC,kBAAM,QAAQ,UAAU;AAAA,cACtB;AAAA,cACA;AAAA,YACF,CAAC;AAED,gBAAI,CAAC,MAAO,QAAO;AAEnB,kBAAM,QAAQ,kBAAkB,EAAE,GAAG,MAAM,OAAO,MAAM,CAAC;AAEzD,mBAAO,aAAa,OAAuB,KAAK;AAAA,UAClD,OAAO;AACL,kBAAM,EAAE,KAAK,GAAG,MAAM,IAAI,kBAAkB,EAAE,MAAM,CAAC;AAErD,mBAAO,oBAAC,qBAA6B,GAAG,SAAT,GAAgB;AAAA,UACjD;AAAA,QACF,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAIA,IAAM,oBAAgD,CAAC;AAAA,EACrD;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,OAAO,IAAI,mBAAmB;AAEtC,QAAM,MAAmB,EAAE,GAAG,OAAO,UAAU;AAE/C,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC,MAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW,GAAG,0BAA0B,SAAS;AAAA,MACjD,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/chunk-FX52VXMU.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/carousel-control.tsx"],"sourcesContent":["import type { IconButtonProps } from \"@yamada-ui/button\"\nimport { IconButton } from \"@yamada-ui/button\"\nimport type { CSSUIObject } from \"@yamada-ui/core\"\nimport { forwardRef, useColorModeValue } from \"@yamada-ui/core\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCarouselContext, useCarouselControl } from \"./use-carousel\"\n\nexport type CarouselControlProps = IconButtonProps\n\nexport const CarouselControlPrev = forwardRef<CarouselControlProps, \"button\">(\n  ({ className, ...rest }, ref) => {\n    const { orientation } = useCarouselContext()\n\n    const { getControlProps } = useCarouselControl({ operation: \"prev\" })\n\n    return (\n      <CarouselControl\n        operation=\"prev\"\n        className={cx(\"ui-carousel__control--prev\", className)}\n        aria-label=\"Go to previous slide\"\n        icon={\n          <ChevronIcon\n            __css={{\n              fontSize: \"1.5em\",\n              transform:\n                orientation === \"vertical\" ? \"rotate(180deg)\" : \"rotate(90deg)\",\n            }}\n          />\n        }\n        {...getControlProps(rest, ref)}\n      />\n    )\n  },\n)\n\nexport const CarouselControlNext = forwardRef<CarouselControlProps, \"button\">(\n  ({ className, ...rest }, ref) => {\n    const { orientation } = useCarouselContext()\n\n    const { getControlProps } = useCarouselControl({ operation: \"next\" })\n\n    return (\n      <CarouselControl\n        operation=\"next\"\n        className={cx(\"ui-carousel__control--next\", className)}\n        aria-label=\"Go to next slide\"\n        icon={\n          <ChevronIcon\n            __css={{\n              fontSize: \"1.5em\",\n              transform:\n                orientation === \"vertical\" ? \"rotate(0deg)\" : \"rotate(-90deg)\",\n            }}\n          />\n        }\n        {...getControlProps(rest, ref)}\n      />\n    )\n  },\n)\n\nconst CarouselControl = forwardRef<\n  CarouselControlProps & { operation: \"prev\" | \"next\" },\n  \"button\"\n>(({ className, operation, ...rest }, ref) => {\n  const { styles } = useCarouselContext()\n  const colorScheme = useColorModeValue(\"whiteAlpha\", \"blackAlpha\")\n\n  const css: CSSUIObject = {\n    ...styles.control,\n    ...styles[operation],\n  }\n\n  return (\n    <IconButton\n      ref={ref}\n      className={cx(\"ui-carousel__control\", className)}\n      colorScheme={colorScheme}\n      isRounded\n      __css={css}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;AACA,SAAS,kBAAkB;AAE3B,SAAS,YAAY,yBAAyB;AAC9C,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AAiBT;AAZH,IAAM,sBAAsB;AAAA,EACjC,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,YAAY,IAAI,mBAAmB;AAE3C,UAAM,EAAE,gBAAgB,IAAI,mBAAmB,EAAE,WAAW,OAAO,CAAC;AAEpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,WAAW,GAAG,8BAA8B,SAAS;AAAA,QACrD,cAAW;AAAA,QACX,MACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,WACE,gBAAgB,aAAa,mBAAmB;AAAA,YACpD;AAAA;AAAA,QACF;AAAA,QAED,GAAG,gBAAgB,MAAM,GAAG;AAAA;AAAA,IAC/B;AAAA,EAEJ;AACF;AAEO,IAAM,sBAAsB;AAAA,EACjC,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,YAAY,IAAI,mBAAmB;AAE3C,UAAM,EAAE,gBAAgB,IAAI,mBAAmB,EAAE,WAAW,OAAO,CAAC;AAEpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,WAAW,GAAG,8BAA8B,SAAS;AAAA,QACrD,cAAW;AAAA,QACX,MACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,WACE,gBAAgB,aAAa,iBAAiB;AAAA,YAClD;AAAA;AAAA,QACF;AAAA,QAED,GAAG,gBAAgB,MAAM,GAAG;AAAA;AAAA,IAC/B;AAAA,EAEJ;AACF;AAEA,IAAM,kBAAkB,WAGtB,CAAC,EAAE,WAAW,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC5C,QAAM,EAAE,OAAO,IAAI,mBAAmB;AACtC,QAAM,cAAc,kBAAkB,cAAc,YAAY;AAEhE,QAAM,MAAmB;AAAA,IACvB,GAAG,OAAO;AAAA,IACV,GAAG,OAAO,SAAS;AAAA,EACrB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,wBAAwB,SAAS;AAAA,MAC/C;AAAA,MACA,WAAS;AAAA,MACT,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":[]}

package/dist/chunk-H4J2Q2O6.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/use-carousel.ts"],"sourcesContent":["import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n  CSSUIObject,\n  HTMLUIProps,\n  CSSUIProps,\n  UIPropGetter,\n  RequiredUIPropGetter,\n} from \"@yamada-ui/core\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n  assignRef,\n  createContext,\n  dataAttr,\n  handlerAll,\n  splitObject,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { EmblaCarouselType, EmblaOptionsType } from \"embla-carousel\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport type { MouseEvent, RefObject } from \"react\"\nimport { Children, useCallback, useEffect, useRef, useState } from \"react\"\n\nexport type AlignmentOptionType = EmblaOptionsType[\"align\"]\nexport type ScrollContainOptionType = EmblaOptionsType[\"containScroll\"]\nexport type SlidesInViewOptionsType = EmblaOptionsType[\"inViewThreshold\"]\nexport type DragHandlerOptionType = EmblaOptionsType[\"watchDrag\"]\nexport type ResizeHandlerOptionType = EmblaOptionsType[\"watchResize\"]\nexport type SlidesHandlerOptionType = EmblaOptionsType[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\n\ntype CarouselContext = {\n  carousel: CarouselControl | undefined\n  indexes: number[]\n  selectedIndex: number\n  orientation: \"vertical\" | \"horizontal\"\n  includeGapInSize: boolean\n  slidesToScroll: number\n  slideSize: string | number\n  gap: CSSUIProps[\"gap\"]\n  styles: Record<string, CSSUIObject>\n}\n\nexport const [CarouselProvider, useCarouselContext] =\n  createContext<CarouselContext>({\n    name: \"CarouselContext\",\n    errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Carousel />\"`,\n  })\n\nexport type UseCarouselProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"onChange\" | \"draggable\" | \"gap\"\n> & {\n  /**\n   * The index of the carousel slide.\n   */\n  index?: number\n  /**\n   * The initial index of the carousel slide.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The callback invoked when carousel slide selected.\n   */\n  onChange?: (index: number) => void\n  /**\n   * The orientation of the carousel.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: \"vertical\" | \"horizontal\"\n  /**\n   * The alignment of the carousel.\n   *\n   * @default 'center'\n   */\n  align?: AlignmentOptionType\n  /**\n   * Clear leading and trailing empty space that causes excessive scrolling.\n   * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n   *\n   * @default false\n   */\n  containScroll?: ScrollContainOptionType\n  /**\n   * The number of slides that should be scrolled with next or previous buttons.\n   *\n   * @default 1\n   */\n  slidesToScroll?: number\n  /**\n   * If `true`, momentum scrolling will be enabled.\n   *\n   * @default false\n   */\n  dragFree?: boolean\n  /**\n   * If `true`, carousel can be scrolled with mouse and touch interactions.\n   *\n   * @default true\n   */\n  draggable?: boolean\n  /**\n   * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n   *\n   * @default 0\n   */\n  inViewThreshold?: SlidesInViewOptionsType\n  /**\n   * If `true`, infinite looping.\n   * Automatically falls back to false if slide content isn't enough to loop.\n   *\n   * @default true\n   */\n  loop?: boolean\n  /**\n   * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n   * Note that this option will be ignored if the dragFree option is set to true.\n   *\n   * @default false\n   */\n  skipSnaps?: boolean\n  /**\n   * Set scroll duration when triggered by any of the API methods.\n   * Higher numbers enables slower scrolling.\n   * Drag interactions are not affected because duration is then determined by the drag force.\n   *\n   * @default 25\n   */\n  duration?: number\n  /**\n   * The number for the autoplay interval of the carousel.\n   *\n   * @default 4000\n   */\n  delay?: number\n  /**\n   * If `true`, the carousel will be autoplay.\n   *\n   * @default false\n   */\n  autoplay?: boolean\n  /**\n   * If `true`, autoplay will pause when the mouse entries over.\n   *\n   * @default true\n   */\n  stopMouseEnterAutoplay?: boolean\n  /**\n   * If `true`, gap will be treated as part of the carousel slide size.\n   *\n   * @default true\n   */\n  includeGapInSize?: boolean\n  /**\n   * The CSS `gap` property.\n   *\n   * @default '4'\n   */\n  gap?: CSSUIProps[\"gap\"]\n  /**\n   * The carousel slide width.\n   *\n   * @default '100%'\n   */\n  slideSize?: string | number\n  /**\n   * A callback that return the current scroll amount when the carousel is scrolled.\n   */\n  onScrollProgress?: (progress: number) => void\n  /**\n   * Enables for scrolling the carousel with mouse and touch interactions.\n   * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.\n   *\n   * @default true\n   */\n  watchDrag?: DragHandlerOptionType\n  /**\n   * Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed.\n   * Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.\n   *\n   * @default true\n   */\n  watchResize?: ResizeHandlerOptionType\n  /**\n   * Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed.\n   * Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.\n   *\n   * @default true\n   */\n  watchSlides?: SlidesHandlerOptionType\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<CarouselControl | undefined>\n}\n\nexport const useCarousel = ({\n  index,\n  defaultIndex = 0,\n  onChange,\n  align = \"center\",\n  orientation = \"horizontal\",\n  autoplay = false,\n  stopMouseEnterAutoplay = true,\n  loop = true,\n  duration = 25,\n  delay = 4000,\n  slidesToScroll = 1,\n  draggable = true,\n  dragFree = false,\n  inViewThreshold = 0,\n  skipSnaps = false,\n  containScroll = false,\n  slideSize = \"100%\",\n  includeGapInSize = true,\n  onScrollProgress,\n  watchDrag = draggable,\n  watchResize,\n  watchSlides,\n  controlRef,\n  children,\n  ...rest\n}: UseCarouselProps) => {\n  const [{ gap = \"fallback(4, 1rem)\", ...containerProps }, slidesProps] =\n    splitObject(rest, layoutStyleProperties)\n\n  const [selectedIndex, setSelectedIndex] = useControllableState({\n    value: index,\n    defaultValue: defaultIndex,\n    onChange,\n  })\n\n  const isVertical = orientation === \"vertical\"\n\n  const [carouselRef, carousel] = useEmblaCarousel(\n    {\n      axis: isVertical ? \"y\" : \"x\",\n      startIndex: defaultIndex,\n      loop,\n      align,\n      slidesToScroll,\n      duration,\n      dragFree,\n      inViewThreshold,\n      skipSnaps,\n      containScroll,\n      watchDrag,\n      watchResize,\n      watchSlides,\n    },\n    [],\n  )\n\n  assignRef(controlRef, carousel)\n\n  const [indexes, setIndexes] = useState<number[]>([])\n  const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n\n  const timeoutId = useRef<any>(undefined)\n\n  const onScroll = useCallback(() => {\n    if (!carousel) return\n\n    const progress = Math.round(\n      Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n    )\n\n    onScrollProgress?.(progress)\n  }, [carousel, onScrollProgress])\n\n  const onSelect = useCallback(() => {\n    if (!carousel) return\n\n    const index = carousel.selectedScrollSnap()\n\n    setSelectedIndex(index)\n  }, [carousel, setSelectedIndex])\n\n  useEffect(() => {\n    const isStop = isMouseEnter && stopMouseEnterAutoplay\n    const isLast = !carousel?.canScrollNext()\n\n    if (carousel && autoplay && !isStop && !isLast) {\n      timeoutId.current = setInterval(() => {\n        carousel.scrollNext()\n      }, delay)\n    } else {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n\n      timeoutId.current = undefined\n    }\n\n    return () => {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n    }\n  }, [\n    autoplay,\n    delay,\n    stopMouseEnterAutoplay,\n    carousel,\n    isMouseEnter,\n    loop,\n    selectedIndex,\n  ])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    carousel.reInit()\n\n    const snapList = carousel.scrollSnapList()\n    const indexes = snapList.map((_, i) => i)\n\n    setIndexes(indexes)\n  }, [\n    Children.toArray(children).length,\n    align,\n    orientation,\n    loop,\n    duration,\n    gap,\n    slidesToScroll,\n    draggable,\n    dragFree,\n    inViewThreshold,\n    skipSnaps,\n    containScroll,\n    slideSize,\n    includeGapInSize,\n  ])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    const snapList = carousel.scrollSnapList()\n    const indexes = snapList.map((_, i) => i)\n\n    setIndexes(indexes)\n  }, [carousel])\n\n  useUpdateEffect(() => {\n    if (carousel) {\n      carousel.on(\"select\", onSelect)\n      carousel.on(\"scroll\", onScroll)\n\n      onScroll()\n\n      return () => {\n        carousel.off(\"select\", onSelect)\n        carousel.off(\"scroll\", onScroll)\n      }\n    }\n  }, [carousel, onScroll])\n\n  const getContainerProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...containerProps,\n      ...props,\n      ref,\n      onMouseEnter: handlerAll(props.onMouseEnter, () => {\n        setIsMouseEnter(true)\n      }),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => {\n        setIsMouseEnter(false)\n      }),\n    }),\n    [containerProps],\n  )\n\n  const getSlidesProps: UIPropGetter = useCallback(\n    (props = {}) => ({\n      ...slidesProps,\n      ...props,\n      ref: carouselRef,\n    }),\n    [slidesProps, carouselRef],\n  )\n\n  return {\n    carousel,\n    children,\n    indexes,\n    selectedIndex,\n    orientation,\n    slideSize,\n    gap,\n    slidesToScroll,\n    includeGapInSize,\n    getContainerProps,\n    getSlidesProps,\n  }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport type UseCarouselSlideProps = {\n  index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n  const { selectedIndex, slidesToScroll } = useCarouselContext()\n\n  index = Math.floor((index ?? 0) / (slidesToScroll ?? 1))\n\n  const isSelected = index === selectedIndex\n\n  const getSlideProps: UIPropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      \"data-index\": index,\n      \"data-selected\": dataAttr(isSelected),\n    }),\n    [isSelected, index],\n  )\n\n  return { getSlideProps }\n}\n\nexport type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>\n\nexport type UseCarouselControlProps = IconButtonProps & {\n  operation: \"prev\" | \"next\"\n}\n\nexport const useCarouselControl = ({\n  operation,\n  ...rest\n}: UseCarouselControlProps) => {\n  const { carousel } = useCarouselContext()\n\n  const isPrev = operation === \"prev\"\n\n  const disabled =\n    rest.disabled ??\n    rest.isDisabled ??\n    (isPrev ? !carousel?.canScrollPrev() : !carousel?.canScrollNext())\n\n  const onClick = useCallback(() => {\n    if (!carousel) return\n\n    if (isPrev) {\n      carousel.scrollPrev()\n    } else {\n      carousel.scrollNext()\n    }\n  }, [carousel, isPrev])\n\n  const getControlProps: UIPropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      disabled,\n      onClick: handlerAll(props.onClick, onClick),\n    }),\n    [disabled, onClick],\n  )\n\n  return { getControlProps }\n}\n\nexport type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>\n\nexport const useCarouselIndicators = () => {\n  const { selectedIndex, carousel, indexes } = useCarouselContext()\n\n  const onClick = useCallback(\n    (ev: MouseEvent, index: number) => {\n      if (!carousel) return\n\n      ev.stopPropagation()\n\n      carousel.scrollTo(index)\n    },\n    [carousel],\n  )\n\n  const getIndicatorProps: RequiredUIPropGetter<\"button\", { index: number }> =\n    useCallback(\n      ({ index, ...props }) => {\n        const isSelected = index === selectedIndex\n\n        return {\n          \"aria-label\": `Go to ${index + 1} slide`,\n          ...props,\n          key: index,\n          \"data-index\": index,\n          \"data-selected\": dataAttr(isSelected),\n          onClick: handlerAll(props.onClick, (ev) => onClick(ev, index)),\n        }\n      },\n      [onClick, selectedIndex],\n    )\n\n  return { indexes, getIndicatorProps }\n}\n\nexport type UseCarouselIndicatorsReturn = ReturnType<\n  typeof useCarouselIndicators\n>\n"],"mappings":"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","names":["index","indexes"]}

package/dist/chunk-O7UZOX72.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/carousel-slide.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { UseCarouselSlideProps } from \"./use-carousel\"\nimport { useCarouselContext, useCarouselSlide } from \"./use-carousel\"\n\ntype CarouselSlideOptions = {\n  /**\n   * The CSS `width` property.\n   */\n  size?: CSSUIObject[\"width\"]\n}\n\nexport type CarouselSlideProps = HTMLUIProps<\"div\"> &\n  UseCarouselSlideProps &\n  CarouselSlideOptions\n\nexport const CarouselSlide = forwardRef<CarouselSlideProps, \"div\">(\n  ({ className, size, ...rest }, ref) => {\n    const { slideSize, includeGapInSize, orientation, gap } =\n      useCarouselContext()\n\n    const { getSlideProps } = useCarouselSlide(rest)\n\n    size ??= slideSize\n\n    const css: CSSUIObject = {\n      position: \"relative\",\n      flex: `0 0 ${size}`,\n      ...(includeGapInSize\n        ? { [orientation === \"vertical\" ? \"pb\" : \"pr\"]: gap }\n        : { [orientation === \"vertical\" ? \"mb\" : \"mr\"]: gap }),\n    }\n\n    return (\n      <ui.div\n        className={cx(\"ui-carousel__slide\", className)}\n        __css={css}\n        {...getSlideProps({})}\n      >\n        <CarouselSlideInner ref={ref} {...rest} />\n      </ui.div>\n    )\n  },\n)\n\ntype CarouselSlideInnerProps = HTMLUIProps<\"div\">\n\nconst CarouselSlideInner = forwardRef<CarouselSlideInnerProps, \"div\">(\n  ({ ...rest }, ref) => {\n    return (\n      <ui.div\n        ref={ref}\n        className=\"ui-carousel__slide-inner\"\n        w=\"100%\"\n        h=\"100%\"\n        {...rest}\n      />\n    )\n  },\n)\n"],"mappings":";;;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AAsCX;AAvBD,IAAM,gBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,MAAM,GAAG,KAAK,GAAG,QAAQ;AACrC,UAAM,EAAE,WAAW,kBAAkB,aAAa,IAAI,IACpD,mBAAmB;AAErB,UAAM,EAAE,cAAc,IAAI,iBAAiB,IAAI;AAE/C,iCAAS;AAET,UAAM,MAAmB;AAAA,MACvB,UAAU;AAAA,MACV,MAAM,OAAO,IAAI;AAAA,MACjB,GAAI,mBACA,EAAE,CAAC,gBAAgB,aAAa,OAAO,IAAI,GAAG,IAAI,IAClD,EAAE,CAAC,gBAAgB,aAAa,OAAO,IAAI,GAAG,IAAI;AAAA,IACxD;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,sBAAsB,SAAS;AAAA,QAC7C,OAAO;AAAA,QACN,GAAG,cAAc,CAAC,CAAC;AAAA,QAEpB,8BAAC,sBAAmB,KAAW,GAAG,MAAM;AAAA;AAAA,IAC1C;AAAA,EAEJ;AACF;AAIA,IAAM,qBAAqB;AAAA,EACzB,CAAC,EAAE,GAAG,KAAK,GAAG,QAAQ;AACpB,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,GAAE;AAAA,QACF,GAAE;AAAA,QACD,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":[]}

package/dist/chunk-XJHVMEOT.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/carousel.tsx"],"sourcesContent":["import type {\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIObject,\n  Token,\n  CSSUIProps,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useToken } from \"@yamada-ui/use-token\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n  cx,\n  filterUndefined,\n  findChildren,\n  getValidChildren,\n  omitChildren,\n  pickChildren,\n} from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\nimport { cloneElement } from \"react\"\nimport type {\n  AlignmentOptionType,\n  ScrollContainOptionType,\n  SlidesInViewOptionsType,\n  UseCarouselProps,\n} from \"./use-carousel\"\nimport {\n  CarouselProvider,\n  useCarousel,\n  useCarouselContext,\n} from \"./use-carousel\"\nimport type { CarouselControlProps, CarouselIndicatorsProps } from \"./\"\nimport {\n  CarouselControlNext,\n  CarouselControlPrev,\n  CarouselIndicators,\n  CarouselSlide,\n} from \"./\"\n\ntype CarouselOptions = {\n  /**\n   * The orientation of the carousel.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Token<\"vertical\" | \"horizontal\">\n  /**\n   * The alignment of the carousel.\n   *\n   * @default 'center'\n   */\n  align?: Token<AlignmentOptionType>\n  /**\n   * Clear leading and trailing empty space that causes excessive scrolling.\n   * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n   *\n   * @default ''\n   */\n  containScroll?: Token<ScrollContainOptionType>\n  /**\n   * The number of slides that should be scrolled with next or previous buttons.\n   *\n   * @default 1\n   */\n  slidesToScroll?: Token<number>\n  /**\n   * If `true`, momentum scrolling will be enabled.\n   *\n   * @default false\n   */\n  dragFree?: Token<boolean>\n  /**\n   * If `true`, carousel can be scrolled with mouse and touch interactions.\n   *\n   * @default true\n   */\n  draggable?: Token<boolean>\n  /**\n   * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n   *\n   * @default 0\n   */\n  inViewThreshold?: Token<SlidesInViewOptionsType>\n  /**\n   * If `true`, infinite looping.\n   * Automatically falls back to false if slide content isn't enough to loop.\n   *\n   * @default true\n   */\n  loop?: Token<boolean>\n  /**\n   * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n   * Note that this option will be ignored if the dragFree option is set to true.\n   *\n   * @default false\n   */\n  skipSnaps?: Token<boolean>\n  /**\n   * Set scroll duration when triggered by any of the API methods.\n   * Higher numbers enables slower scrolling.\n   * Drag interactions are not affected because duration is then determined by the drag force.\n   *\n   * @default 25\n   */\n  duration?: Token<number>\n  /**\n   * The number for the autoplay interval of the carousel.\n   *\n   * @default 4000\n   */\n  delay?: Token<number>\n  /**\n   * If `true`, the carousel will be autoplay.\n   *\n   * @default false\n   */\n  autoplay?: Token<boolean>\n  /**\n   * If `true`, autoplay will pause when the mouse entries over.\n   *\n   * @default true\n   */\n  stopMouseEnterAutoplay?: Token<boolean>\n  /**\n   * If `true`, gap will be treated as part of the carousel slide size.\n   *\n   * @default true\n   */\n  includeGapInSize?: Token<boolean>\n  /**\n   * The CSS `width` property.\n   */\n  slideSize?: CSSUIProps[\"width\"]\n  /**\n   * Props for carousel inner element.\n   */\n  innerProps?: HTMLUIProps<\"div\">\n  /**\n   * If `true`, display the carousel control buttons.\n   *\n   * @default true\n   */\n  withControls?: Token<boolean>\n  /**\n   * Props for carousel control element.\n   */\n  controlProps?: CarouselControlProps\n  /**\n   * Props for previous of the carousel control element.\n   */\n  controlPrevProps?: CarouselControlProps\n  /**\n   * Props for next of the carousel control element.\n   */\n  controlNextProps?: CarouselControlProps\n  /**\n   * If `true`, display the carousel indicator buttons.\n   *\n   * @default true\n   */\n  withIndicators?: Token<boolean>\n  /**\n   * Props for carousel indicators element.\n   */\n  indicatorsProps?: CarouselIndicatorsProps\n}\n\nexport type CarouselProps = ThemeProps<\"Carousel\"> &\n  Omit<HTMLUIProps<\"div\">, \"onChange\" | \"draggable\"> &\n  Pick<\n    UseCarouselProps,\n    | \"index\"\n    | \"defaultIndex\"\n    | \"onChange\"\n    | \"onScrollProgress\"\n    | \"watchDrag\"\n    | \"watchResize\"\n    | \"watchSlides\"\n    | \"controlRef\"\n  > &\n  CarouselOptions\n\n/**\n * `Carousel` is a component that displays multiple elements like a slideshow.\n *\n * @see Docs https://yamada-ui.com/components/data-display/carousel\n */\nexport const Carousel = forwardRef<CarouselProps, \"div\">(\n  ({ h, height, minH, minHeight, ...props }, ref) => {\n    const orientation = useValue(props.orientation)\n    const align = useValue(props.align)\n    const autoplay = useValue(props.autoplay)\n    const stopMouseEnterAutoplay = useValue(props.stopMouseEnterAutoplay)\n    const loop = useValue(props.loop)\n    const duration = useValue(props.duration)\n    const delay = useValue(props.delay)\n    const slidesToScroll = useValue(props.slidesToScroll)\n    const draggable = useValue(props.draggable)\n    const dragFree = useValue(props.dragFree)\n    const inViewThreshold = useValue(props.inViewThreshold)\n    const skipSnaps = useValue(props.skipSnaps)\n    const containScroll = useValue(props.containScroll)\n    const includeGapInSize = useValue(props.includeGapInSize)\n    const gap = useToken(\"spaces\", useValue(props.gap)) ?? useValue(props.gap)\n    const slideSize =\n      useToken(\"sizes\", useValue(props.slideSize)) ?? useValue(props.slideSize)\n\n    const [styles, mergedProps] = useMultiComponentStyle(\"Carousel\", {\n      ...props,\n      orientation,\n      align,\n      autoplay,\n      stopMouseEnterAutoplay,\n      loop,\n      duration,\n      delay,\n      slidesToScroll,\n      draggable,\n      dragFree,\n      inViewThreshold,\n      skipSnaps,\n      containScroll,\n      includeGapInSize,\n      gap,\n      slideSize,\n    })\n    const {\n      className,\n      innerProps,\n      withControls = true,\n      controlProps,\n      controlPrevProps,\n      controlNextProps,\n      withIndicators = true,\n      indicatorsProps,\n      ...computedProps\n    } = omitThemeProps(mergedProps)\n\n    const computedWithControls = useValue(withControls)\n    const computedWithIndicators = useValue(withIndicators)\n\n    const { getContainerProps, getSlidesProps, children, ...rest } =\n      useCarousel({\n        ...computedProps,\n      })\n\n    const validChildren = getValidChildren(children)\n\n    const [customCarouselControlPrev] = findChildren(\n      validChildren,\n      CarouselControlPrev,\n    )\n    const [customCarouselControlNext] = findChildren(\n      validChildren,\n      CarouselControlNext,\n    )\n    const [customCarouselIndicators] = findChildren(\n      validChildren,\n      CarouselIndicators,\n    )\n    const slideChildren = pickChildren(validChildren, CarouselSlide)\n    const otherChildren = omitChildren(\n      validChildren,\n      CarouselControlPrev,\n      CarouselControlNext,\n      CarouselIndicators,\n      CarouselSlide,\n    )\n\n    const cloneSlideChildren = slideChildren.map((child, index) =>\n      cloneElement(child, { index }),\n    )\n\n    h ??= height\n    minH ??= minHeight\n\n    return (\n      <CarouselProvider value={{ styles, ...rest }}>\n        <ui.div\n          className={cx(\"ui-carousel\", className)}\n          __css={{\n            ...styles.container,\n          }}\n          {...getContainerProps({}, ref)}\n        >\n          {customCarouselControlPrev ??\n            (computedWithControls ? (\n              <CarouselControlPrev {...controlProps} {...controlPrevProps} />\n            ) : null)}\n          {customCarouselControlNext ??\n            (computedWithControls ? (\n              <CarouselControlNext {...controlProps} {...controlNextProps} />\n            ) : null)}\n\n          <CarouselSlides\n            {...getSlidesProps({\n              ...filterUndefined({ h, minH }),\n              ...innerProps,\n            })}\n          >\n            {cloneSlideChildren}\n          </CarouselSlides>\n\n          {customCarouselIndicators ??\n            (computedWithIndicators ? (\n              <CarouselIndicators {...indicatorsProps} />\n            ) : null)}\n\n          {otherChildren}\n        </ui.div>\n      </CarouselProvider>\n    )\n  },\n)\n\ntype CarouselSlidesProps = HTMLUIProps<\"div\">\n\nconst CarouselSlides = forwardRef<CarouselSlidesProps, \"div\">(\n  ({ ...rest }, ref) => {\n    const css: CSSUIObject = { w: \"100%\", h: \"fit-content\", overflow: \"hidden\" }\n\n    return (\n      <ui.div ref={ref} className=\"ui-carousel__sliders\" __css={css}>\n        <CarouselSlidesInner {...rest} />\n      </ui.div>\n    )\n  },\n)\n\ntype CarouselSlidesInnerProps = HTMLUIProps<\"div\">\n\nconst CarouselSlidesInner: FC<CarouselSlidesInnerProps> = ({ ...rest }) => {\n  const { orientation, includeGapInSize, gap, styles } = useCarouselContext()\n\n  const css: CSSUIObject = {\n    flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n    ...styles.inner,\n    ...(includeGapInSize\n      ? {\n          vars: [{ name: \"gap\", token: \"spaces\", value: gap }],\n          [orientation === \"vertical\" ? \"mb\" : \"mr\"]: \"calc($gap * -1)\",\n        }\n      : {}),\n  }\n\n  return <ui.div className=\"ui-carousel__sliders-inner\" __css={css} {...rest} />\n}\n"],"mappings":"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","names":[]}