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

package/dist/{chunk-N7FKTABA.mjs → chunk-PDUQUV53.mjs}

@@ -2,7 +2,7 @@
 import {
   useCarouselContext,
   useCarouselSlide
-} from "./chunk-27FJSIPV.mjs";
+} from "./chunk-YSHRYDOY.mjs";
 
 // src/carousel-slide.tsx
 import { ui, forwardRef } from "@yamada-ui/core";
@@ -47,4 +47,4 @@ var CarouselSlideInner = forwardRef(
 export {
   CarouselSlide
 };
-//# sourceMappingURL=chunk-N7FKTABA.mjs.map
+//# sourceMappingURL=chunk-PDUQUV53.mjs.map

package/dist/chunk-PDUQUV53.mjs.map

@@ -0,0 +1 @@
+{"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\ninterface CarouselSlideOptions {\n  /**\n   * The CSS `width` property.\n   */\n  size?: CSSUIObject[\"width\"]\n}\n\nexport interface CarouselSlideProps\n  extends HTMLUIProps,\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\ninterface CarouselSlideInnerProps extends HTMLUIProps {}\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;AAuCX;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-QCRQ6FXC.mjs → chunk-X4MS32G3.mjs}

@@ -2,7 +2,7 @@
 import {
   useCarouselContext,
   useCarouselControl
-} from "./chunk-27FJSIPV.mjs";
+} from "./chunk-YSHRYDOY.mjs";
 
 // src/carousel-control.tsx
 import { IconButton } from "@yamada-ui/button";
@@ -82,4 +82,4 @@ export {
   CarouselControlPrev,
   CarouselControlNext
 };
-//# sourceMappingURL=chunk-QCRQ6FXC.mjs.map
+//# sourceMappingURL=chunk-X4MS32G3.mjs.map

package/dist/chunk-X4MS32G3.mjs.map

@@ -0,0 +1 @@
+{"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 interface CarouselControlProps extends 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-27FJSIPV.mjs → chunk-YSHRYDOY.mjs}

@@ -28,7 +28,6 @@ var useCarousel = ({
   loop = true,
   duration = 25,
   delay = 4e3,
-  gap = "fallback(4, 1rem)",
   slidesToScroll = 1,
   draggable = true,
   dragFree = false,
@@ -45,7 +44,7 @@ var useCarousel = ({
   children,
   ...rest
 }) => {
-  const computedProps = splitObject(rest, layoutStyleProperties);
+  const [{ gap = "fallback(4, 1rem)", ...containerProps }, slidesProps] = splitObject(rest, layoutStyleProperties);
   const [selectedIndex, setSelectedIndex] = useControllableState({
     value: index,
     defaultValue: defaultIndex,
@@ -150,7 +149,7 @@ var useCarousel = ({
   }, [carousel, onScroll]);
   const getContainerProps = useCallback(
     (props = {}, ref = null) => ({
-      ...computedProps[0],
+      ...containerProps,
       ...props,
       ref,
       onMouseEnter: handlerAll(props.onMouseEnter, () => {
@@ -160,15 +159,15 @@ var useCarousel = ({
         setIsMouseEnter(false);
       })
     }),
-    [computedProps]
+    [containerProps]
   );
   const getSlidesProps = useCallback(
     (props = {}) => ({
-      ...computedProps[1],
+      ...slidesProps,
       ...props,
       ref: carouselRef
     }),
-    [computedProps, carouselRef]
+    [slidesProps, carouselRef]
   );
   return {
     carousel,
@@ -260,4 +259,4 @@ export {
   useCarouselControl,
   useCarouselIndicators
 };
-//# sourceMappingURL=chunk-27FJSIPV.mjs.map
+//# sourceMappingURL=chunk-YSHRYDOY.mjs.map

package/dist/chunk-YSHRYDOY.mjs.map

@@ -0,0 +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  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":";;;AASA,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,OAAO,sBAAsB;AAE7B,SAAS,UAAU,aAAa,WAAW,QAAQ,gBAAgB;AAsB5D,IAAM,CAAC,kBAAkB,kBAAkB,IAChD,cAA+B;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAsJI,IAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,WAAW;AAAA,EACX,yBAAyB;AAAA,EACzB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,QAAM,CAAC,EAAE,MAAM,qBAAqB,GAAG,eAAe,GAAG,WAAW,IAClE,YAAY,MAAM,qBAAqB;AAEzC,QAAM,CAAC,eAAe,gBAAgB,IAAI,qBAAqB;AAAA,IAC7D,OAAO;AAAA,IACP,cAAc;AAAA,IACd;AAAA,EACF,CAAC;AAED,QAAM,aAAa,gBAAgB;AAEnC,QAAM,CAAC,aAAa,QAAQ,IAAI;AAAA,IAC9B;AAAA,MACE,MAAM,aAAa,MAAM;AAAA,MACzB,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,YAAU,YAAY,QAAQ;AAE9B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAmB,CAAC,CAAC;AACnD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,YAAY,OAAY,MAAS;AAEvC,QAAM,WAAW,YAAY,MAAM;AACjC,QAAI,CAAC,SAAU;AAEf,UAAM,WAAW,KAAK;AAAA,MACpB,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,SAAS,eAAe,CAAC,CAAC,IAAI;AAAA,IACxD;AAEA,yDAAmB;AAAA,EACrB,GAAG,CAAC,UAAU,gBAAgB,CAAC;AAE/B,QAAM,WAAW,YAAY,MAAM;AACjC,QAAI,CAAC,SAAU;AAEf,UAAMA,SAAQ,SAAS,mBAAmB;AAE1C,qBAAiBA,MAAK;AAAA,EACxB,GAAG,CAAC,UAAU,gBAAgB,CAAC;AAE/B,YAAU,MAAM;AACd,UAAM,SAAS,gBAAgB;AAC/B,UAAM,SAAS,EAAC,qCAAU;AAE1B,QAAI,YAAY,YAAY,CAAC,UAAU,CAAC,QAAQ;AAC9C,gBAAU,UAAU,YAAY,MAAM;AACpC,iBAAS,WAAW;AAAA,MACtB,GAAG,KAAK;AAAA,IACV,OAAO;AACL,UAAI,UAAU,QAAS,eAAc,UAAU,OAAO;AAEtD,gBAAU,UAAU;AAAA,IACtB;AAEA,WAAO,MAAM;AACX,UAAI,UAAU,QAAS,eAAc,UAAU,OAAO;AAAA,IACxD;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,kBAAgB,MAAM;AACpB,QAAI,CAAC,SAAU;AAEf,aAAS,OAAO;AAEhB,UAAM,WAAW,SAAS,eAAe;AACzC,UAAMC,WAAU,SAAS,IAAI,CAAC,GAAG,MAAM,CAAC;AAExC,eAAWA,QAAO;AAAA,EACpB,GAAG;AAAA,IACD,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,kBAAgB,MAAM;AACpB,QAAI,CAAC,SAAU;AAEf,UAAM,WAAW,SAAS,eAAe;AACzC,UAAMA,WAAU,SAAS,IAAI,CAAC,GAAG,MAAM,CAAC;AAExC,eAAWA,QAAO;AAAA,EACpB,GAAG,CAAC,QAAQ,CAAC;AAEb,kBAAgB,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,GAAG,UAAU,QAAQ;AAC9B,eAAS,GAAG,UAAU,QAAQ;AAE9B,eAAS;AAET,aAAO,MAAM;AACX,iBAAS,IAAI,UAAU,QAAQ;AAC/B,iBAAS,IAAI,UAAU,QAAQ;AAAA,MACjC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,QAAM,oBAAgC;AAAA,IACpC,CAAC,QAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA,cAAc,WAAW,MAAM,cAAc,MAAM;AACjD,wBAAgB,IAAI;AAAA,MACtB,CAAC;AAAA,MACD,cAAc,WAAW,MAAM,cAAc,MAAM;AACjD,wBAAgB,KAAK;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,iBAA6B;AAAA,IACjC,CAAC,QAAQ,CAAC,OAAO;AAAA,MACf,GAAG;AAAA,MACH,GAAG;AAAA,MACH,KAAK;AAAA,IACP;AAAA,IACA,CAAC,aAAa,WAAW;AAAA,EAC3B;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAQO,IAAM,mBAAmB,CAAC,EAAE,MAAM,MAA6B;AACpE,QAAM,EAAE,eAAe,eAAe,IAAI,mBAAmB;AAE7D,UAAQ,KAAK,OAAO,wBAAS,MAAM,0CAAkB,EAAE;AAEvD,QAAM,aAAa,UAAU;AAE7B,QAAM,gBAA4B;AAAA,IAChC,CAAC,QAAQ,CAAC,OAAO;AAAA,MACf,GAAG;AAAA,MACH,cAAc;AAAA,MACd,iBAAiB,SAAS,UAAU;AAAA,IACtC;AAAA,IACA,CAAC,YAAY,KAAK;AAAA,EACpB;AAEA,SAAO,EAAE,cAAc;AACzB;AAQO,IAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,GAAG;AACL,MAA+B;AA7a/B;AA8aE,QAAM,EAAE,SAAS,IAAI,mBAAmB;AAExC,QAAM,SAAS,cAAc;AAE7B,QAAM,YACJ,gBAAK,aAAL,YACA,KAAK,eADL,YAEC,SAAS,EAAC,qCAAU,mBAAkB,EAAC,qCAAU;AAEpD,QAAM,UAAU,YAAY,MAAM;AAChC,QAAI,CAAC,SAAU;AAEf,QAAI,QAAQ;AACV,eAAS,WAAW;AAAA,IACtB,OAAO;AACL,eAAS,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,UAAU,MAAM,CAAC;AAErB,QAAM,kBAAwC;AAAA,IAC5C,CAAC,QAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,SAAS,WAAW,MAAM,SAAS,OAAO;AAAA,IAC5C;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,EACpB;AAEA,SAAO,EAAE,gBAAgB;AAC3B;AAIO,IAAM,wBAAwB,MAAM;AACzC,QAAM,EAAE,eAAe,UAAU,QAAQ,IAAI,mBAAmB;AAEhE,QAAM,UAAU;AAAA,IACd,CAAC,IAAgB,UAAkB;AACjC,UAAI,CAAC,SAAU;AAEf,SAAG,gBAAgB;AAEnB,eAAS,SAAS,KAAK;AAAA,IACzB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,oBAGF;AAAA,IACF,CAAC,EAAE,OAAO,GAAG,MAAM,MAAM;AACvB,YAAM,aAAa,UAAU;AAE7B,aAAO;AAAA,QACL,cAAc,SAAS,QAAQ,CAAC;AAAA,QAChC,GAAG;AAAA,QACH,KAAK;AAAA,QACL,cAAc;AAAA,QACd,iBAAiB,SAAS,UAAU;AAAA,QACpC,SAAS,WAAW,MAAM,SAAS,CAAC,OAAO,QAAQ,IAAI,KAAK,CAAC;AAAA,MAC/D;AAAA,IACF;AAAA,IACA,CAAC,SAAS,aAAa;AAAA,EACzB;AAEA,SAAO,EAAE,SAAS,kBAAkB;AACtC;","names":["index","indexes"]}

package/dist/index.js

@@ -40,11 +40,17 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/carousel.tsx
-var import_core2 = require("@yamada-ui/core");
+var import_core5 = require("@yamada-ui/core");
 var import_use_token = require("@yamada-ui/use-token");
 var import_use_value = require("@yamada-ui/use-value");
+var import_utils5 = require("@yamada-ui/utils");
+var import_react3 = require("react");
+
+// src/carousel-control.tsx
+var import_button = require("@yamada-ui/button");
+var import_core2 = require("@yamada-ui/core");
+var import_icon = require("@yamada-ui/icon");
 var import_utils2 = require("@yamada-ui/utils");
-var import_react2 = require("react");
 
 // src/use-carousel.ts
 var import_core = require("@yamada-ui/core");
@@ -67,7 +73,6 @@ var useCarousel = ({
   loop = true,
   duration = 25,
   delay = 4e3,
-  gap = "fallback(4, 1rem)",
   slidesToScroll = 1,
   draggable = true,
   dragFree = false,
@@ -84,7 +89,7 @@ var useCarousel = ({
   children,
   ...rest
 }) => {
-  const computedProps = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
+  const [{ gap = "fallback(4, 1rem)", ...containerProps }, slidesProps] = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
   const [selectedIndex, setSelectedIndex] = (0, import_use_controllable_state.useControllableState)({
     value: index,
     defaultValue: defaultIndex,
@@ -189,7 +194,7 @@ var useCarousel = ({
   }, [carousel, onScroll]);
   const getContainerProps = (0, import_react.useCallback)(
     (props = {}, ref = null) => ({
-      ...computedProps[0],
+      ...containerProps,
       ...props,
       ref,
       onMouseEnter: (0, import_utils.handlerAll)(props.onMouseEnter, () => {
@@ -199,15 +204,15 @@ var useCarousel = ({
         setIsMouseEnter(false);
       })
     }),
-    [computedProps]
+    [containerProps]
   );
   const getSlidesProps = (0, import_react.useCallback)(
     (props = {}) => ({
-      ...computedProps[1],
+      ...slidesProps,
       ...props,
       ref: carouselRef
     }),
-    [computedProps, carouselRef]
+    [slidesProps, carouselRef]
   );
   return {
     carousel,
@@ -291,9 +296,176 @@ var useCarouselIndicators = () => {
   return { indexes, getIndicatorProps };
 };
 
-// src/carousel.tsx
+// src/carousel-control.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var Carousel = (0, import_core2.forwardRef)(
+var CarouselControlPrev = (0, import_core2.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { orientation } = useCarouselContext();
+    const { getControlProps } = useCarouselControl({ operation: "prev" });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CarouselControl,
+      {
+        operation: "prev",
+        className: (0, import_utils2.cx)("ui-carousel__control--prev", className),
+        "aria-label": "Go to previous slide",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_icon.ChevronIcon,
+          {
+            __css: {
+              fontSize: "1.5em",
+              transform: orientation === "vertical" ? "rotate(180deg)" : "rotate(90deg)"
+            }
+          }
+        ),
+        ...getControlProps(rest, ref)
+      }
+    );
+  }
+);
+var CarouselControlNext = (0, import_core2.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { orientation } = useCarouselContext();
+    const { getControlProps } = useCarouselControl({ operation: "next" });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CarouselControl,
+      {
+        operation: "next",
+        className: (0, import_utils2.cx)("ui-carousel__control--next", className),
+        "aria-label": "Go to next slide",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_icon.ChevronIcon,
+          {
+            __css: {
+              fontSize: "1.5em",
+              transform: orientation === "vertical" ? "rotate(0deg)" : "rotate(-90deg)"
+            }
+          }
+        ),
+        ...getControlProps(rest, ref)
+      }
+    );
+  }
+);
+var CarouselControl = (0, import_core2.forwardRef)(({ className, operation, ...rest }, ref) => {
+  const { styles } = useCarouselContext();
+  const colorScheme = (0, import_core2.useColorModeValue)("whiteAlpha", "blackAlpha");
+  const css = {
+    ...styles.control,
+    ...styles[operation]
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.IconButton,
+    {
+      ref,
+      className: (0, import_utils2.cx)("ui-carousel__control", className),
+      colorScheme,
+      isRounded: true,
+      __css: css,
+      ...rest
+    }
+  );
+});
+
+// src/carousel-indicators.tsx
+var import_core3 = require("@yamada-ui/core");
+var import_utils3 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CarouselIndicators = (0, import_core3.forwardRef)(
+  ({ className, component, ...rest }, ref) => {
+    const { selectedIndex, orientation, styles } = useCarouselContext();
+    const { indexes, getIndicatorProps } = useCarouselIndicators();
+    const css = {
+      ...styles.indicators,
+      ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core3.ui.div,
+      {
+        ref,
+        className: (0, import_utils3.cx)("ui-carousel__indicators", className),
+        __css: css,
+        ...rest,
+        children: indexes.map((index) => {
+          const isSelected = index === selectedIndex;
+          if (typeof component === "function") {
+            const child = component({
+              index,
+              isSelected
+            });
+            if (!child) return null;
+            const props = getIndicatorProps({ ...child.props, index });
+            return (0, import_react2.cloneElement)(child, props);
+          } else {
+            const { key, ...props } = getIndicatorProps({ index });
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CarouselIndicator, { ...props }, key);
+          }
+        })
+      }
+    );
+  }
+);
+var CarouselIndicator = ({
+  className,
+  ...rest
+}) => {
+  const { styles } = useCarouselContext();
+  const css = { ...styles.indicator };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_core3.ui.button,
+    {
+      type: "button",
+      tabIndex: -1,
+      className: (0, import_utils3.cx)("ui-carousel__indicator", className),
+      __css: css,
+      ...rest
+    }
+  );
+};
+
+// src/carousel-slide.tsx
+var import_core4 = require("@yamada-ui/core");
+var import_utils4 = require("@yamada-ui/utils");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CarouselSlide = (0, import_core4.forwardRef)(
+  ({ className, size, ...rest }, ref) => {
+    const { slideSize, includeGapInSize, orientation, gap } = useCarouselContext();
+    const { getSlideProps } = useCarouselSlide(rest);
+    size != null ? size : size = slideSize;
+    const css = {
+      position: "relative",
+      flex: `0 0 ${size}`,
+      ...includeGapInSize ? { [orientation === "vertical" ? "pb" : "pr"]: gap } : { [orientation === "vertical" ? "mb" : "mr"]: gap }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_core4.ui.div,
+      {
+        className: (0, import_utils4.cx)("ui-carousel__slide", className),
+        __css: css,
+        ...getSlideProps({}),
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CarouselSlideInner, { ref, ...rest })
+      }
+    );
+  }
+);
+var CarouselSlideInner = (0, import_core4.forwardRef)(
+  ({ ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_core4.ui.div,
+      {
+        ref,
+        className: "ui-carousel__slide-inner",
+        w: "100%",
+        h: "100%",
+        ...rest
+      }
+    );
+  }
+);
+
+// src/carousel.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Carousel = (0, import_core5.forwardRef)(
   ({ h, height, minH, minHeight, ...props }, ref) => {
     var _a, _b;
     const orientation = (0, import_use_value.useValue)(props.orientation);
@@ -310,9 +482,11 @@ var Carousel = (0, import_core2.forwardRef)(
     const skipSnaps = (0, import_use_value.useValue)(props.skipSnaps);
     const containScroll = (0, import_use_value.useValue)(props.containScroll);
     const includeGapInSize = (0, import_use_value.useValue)(props.includeGapInSize);
-    const gap = (_a = (0, import_use_token.useToken)("spaces", (0, import_use_value.useValue)(props.gap))) != null ? _a : (0, import_use_value.useValue)(props.gap);
-    const slideSize = (_b = (0, import_use_token.useToken)("sizes", (0, import_use_value.useValue)(props.slideSize))) != null ? _b : (0, import_use_value.useValue)(props.slideSize);
-    const [styles, mergedProps] = (0, import_core2.useMultiComponentStyle)("Carousel", {
+    const _gap = (0, import_use_value.useValue)(props.gap);
+    const gap = (_a = (0, import_use_token.useToken)("spaces", _gap)) != null ? _a : _gap;
+    const _slideSize = (0, import_use_value.useValue)(props.slideSize);
+    const slideSize = (_b = (0, import_use_token.useToken)("sizes", _slideSize)) != null ? _b : _slideSize;
+    const [styles, mergedProps] = (0, import_core5.useComponentMultiStyle)("Carousel", {
       ...props,
       orientation,
       align,
@@ -341,27 +515,27 @@ var Carousel = (0, import_core2.forwardRef)(
       withIndicators = true,
       indicatorsProps,
       ...computedProps
-    } = (0, import_core2.omitThemeProps)(mergedProps);
+    } = (0, import_core5.omitThemeProps)(mergedProps);
     const computedWithControls = (0, import_use_value.useValue)(withControls);
     const computedWithIndicators = (0, import_use_value.useValue)(withIndicators);
     const { getContainerProps, getSlidesProps, children, ...rest } = useCarousel({
       ...computedProps
     });
-    const validChildren = (0, import_utils2.getValidChildren)(children);
-    const [customCarouselControlPrev] = (0, import_utils2.findChildren)(
+    const validChildren = (0, import_utils5.getValidChildren)(children);
+    const [customCarouselControlPrev] = (0, import_utils5.findChildren)(
       validChildren,
       CarouselControlPrev
     );
-    const [customCarouselControlNext] = (0, import_utils2.findChildren)(
+    const [customCarouselControlNext] = (0, import_utils5.findChildren)(
       validChildren,
       CarouselControlNext
     );
-    const [customCarouselIndicators] = (0, import_utils2.findChildren)(
+    const [customCarouselIndicators] = (0, import_utils5.findChildren)(
       validChildren,
       CarouselIndicators
     );
-    const slideChildren = (0, import_utils2.pickChildren)(validChildren, CarouselSlide);
-    const otherChildren = (0, import_utils2.omitChildren)(
+    const slideChildren = (0, import_utils5.pickChildren)(validChildren, CarouselSlide);
+    const otherChildren = (0, import_utils5.omitChildren)(
       validChildren,
       CarouselControlPrev,
       CarouselControlNext,
@@ -369,42 +543,42 @@ var Carousel = (0, import_core2.forwardRef)(
       CarouselSlide
     );
     const cloneSlideChildren = slideChildren.map(
-      (child, index) => (0, import_react2.cloneElement)(child, { index })
+      (child, index) => (0, import_react3.cloneElement)(child, { index })
     );
     h != null ? h : h = height;
     minH != null ? minH : minH = minHeight;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_core2.ui.div,
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_core5.ui.div,
       {
-        className: (0, import_utils2.cx)("ui-carousel", className),
+        className: (0, import_utils5.cx)("ui-carousel", className),
         __css: {
           ...styles.container
         },
         ...getContainerProps({}, ref),
         children: [
-          customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
-          customCarouselControlNext != null ? customCarouselControlNext : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselControlNext, { ...controlProps, ...controlNextProps }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
+          customCarouselControlNext != null ? customCarouselControlNext : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselControlNext, { ...controlProps, ...controlNextProps }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             CarouselSlides,
             {
               ...getSlidesProps({
-                ...(0, import_utils2.filterUndefined)({ h, minH }),
+                ...(0, import_utils5.filterUndefined)({ h, minH }),
                 ...innerProps
               }),
               children: cloneSlideChildren
             }
           ),
-          customCarouselIndicators != null ? customCarouselIndicators : computedWithIndicators ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselIndicators, { ...indicatorsProps }) : null,
+          customCarouselIndicators != null ? customCarouselIndicators : computedWithIndicators ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselIndicators, { ...indicatorsProps }) : null,
           otherChildren
         ]
       }
     ) });
   }
 );
-var CarouselSlides = (0, import_core2.forwardRef)(
+var CarouselSlides = (0, import_core5.forwardRef)(
   ({ ...rest }, ref) => {
     const css = { w: "100%", h: "fit-content", overflow: "hidden" };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.ui.div, { ref, className: "ui-carousel__sliders", __css: css, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselSlidesInner, { ...rest }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.ui.div, { ref, className: "ui-carousel__sliders", __css: css, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselSlidesInner, { ...rest }) });
   }
 );
 var CarouselSlidesInner = ({ ...rest }) => {
@@ -413,182 +587,11 @@ var CarouselSlidesInner = ({ ...rest }) => {
     flexDirection: orientation === "vertical" ? "column" : "row",
     ...styles.inner,
     ...includeGapInSize ? {
-      var: [{ name: "gap", token: "spaces", value: gap }],
+      vars: [{ name: "gap", token: "spaces", value: gap }],
       [orientation === "vertical" ? "mb" : "mr"]: "calc($gap * -1)"
     } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.ui.div, { className: "ui-carousel__sliders-inner", __css: css, ...rest });
-};
-
-// src/carousel-slide.tsx
-var import_core3 = require("@yamada-ui/core");
-var import_utils3 = require("@yamada-ui/utils");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var CarouselSlide = (0, import_core3.forwardRef)(
-  ({ className, size, ...rest }, ref) => {
-    const { slideSize, includeGapInSize, orientation, gap } = useCarouselContext();
-    const { getSlideProps } = useCarouselSlide(rest);
-    size != null ? size : size = slideSize;
-    const css = {
-      position: "relative",
-      flex: `0 0 ${size}`,
-      ...includeGapInSize ? { [orientation === "vertical" ? "pb" : "pr"]: gap } : { [orientation === "vertical" ? "mb" : "mr"]: gap }
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_core3.ui.div,
-      {
-        className: (0, import_utils3.cx)("ui-carousel__slide", className),
-        __css: css,
-        ...getSlideProps({}),
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CarouselSlideInner, { ref, ...rest })
-      }
-    );
-  }
-);
-var CarouselSlideInner = (0, import_core3.forwardRef)(
-  ({ ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_core3.ui.div,
-      {
-        ref,
-        className: "ui-carousel__slide-inner",
-        w: "100%",
-        h: "100%",
-        ...rest
-      }
-    );
-  }
-);
-
-// src/carousel-control.tsx
-var import_button = require("@yamada-ui/button");
-var import_core4 = require("@yamada-ui/core");
-var import_icon = require("@yamada-ui/icon");
-var import_utils4 = require("@yamada-ui/utils");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var CarouselControlPrev = (0, import_core4.forwardRef)(
-  ({ className, ...rest }, ref) => {
-    const { orientation } = useCarouselContext();
-    const { getControlProps } = useCarouselControl({ operation: "prev" });
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      CarouselControl,
-      {
-        operation: "prev",
-        className: (0, import_utils4.cx)("ui-carousel__control--prev", className),
-        "aria-label": "Go to previous slide",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_icon.ChevronIcon,
-          {
-            __css: {
-              fontSize: "1.5em",
-              transform: orientation === "vertical" ? "rotate(180deg)" : "rotate(90deg)"
-            }
-          }
-        ),
-        ...getControlProps(rest, ref)
-      }
-    );
-  }
-);
-var CarouselControlNext = (0, import_core4.forwardRef)(
-  ({ className, ...rest }, ref) => {
-    const { orientation } = useCarouselContext();
-    const { getControlProps } = useCarouselControl({ operation: "next" });
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      CarouselControl,
-      {
-        operation: "next",
-        className: (0, import_utils4.cx)("ui-carousel__control--next", className),
-        "aria-label": "Go to next slide",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_icon.ChevronIcon,
-          {
-            __css: {
-              fontSize: "1.5em",
-              transform: orientation === "vertical" ? "rotate(0deg)" : "rotate(-90deg)"
-            }
-          }
-        ),
-        ...getControlProps(rest, ref)
-      }
-    );
-  }
-);
-var CarouselControl = (0, import_core4.forwardRef)(({ className, operation, ...rest }, ref) => {
-  const { styles } = useCarouselContext();
-  const colorScheme = (0, import_core4.useColorModeValue)("whiteAlpha", "blackAlpha");
-  const css = {
-    ...styles.control,
-    ...styles[operation]
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_button.IconButton,
-    {
-      ref,
-      className: (0, import_utils4.cx)("ui-carousel__control", className),
-      colorScheme,
-      isRounded: true,
-      __css: css,
-      ...rest
-    }
-  );
-});
-
-// src/carousel-indicators.tsx
-var import_core5 = require("@yamada-ui/core");
-var import_utils5 = require("@yamada-ui/utils");
-var import_react3 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var CarouselIndicators = (0, import_core5.forwardRef)(
-  ({ className, component, ...rest }, ref) => {
-    const { selectedIndex, orientation, styles } = useCarouselContext();
-    const { indexes, getIndicatorProps } = useCarouselIndicators();
-    const css = {
-      ...styles.indicators,
-      ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_core5.ui.div,
-      {
-        ref,
-        className: (0, import_utils5.cx)("ui-carousel__indicators", className),
-        __css: css,
-        ...rest,
-        children: indexes.map((index) => {
-          const isSelected = index === selectedIndex;
-          if (typeof component === "function") {
-            const child = component({
-              index,
-              isSelected
-            });
-            if (!child) return null;
-            const props = getIndicatorProps({ ...child.props, index });
-            return (0, import_react3.cloneElement)(child, props);
-          } else {
-            const { key, ...props } = getIndicatorProps({ index });
-            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselIndicator, { ...props }, key);
-          }
-        })
-      }
-    );
-  }
-);
-var CarouselIndicator = ({
-  className,
-  ...rest
-}) => {
-  const { styles } = useCarouselContext();
-  const css = { ...styles.indicator };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_core5.ui.button,
-    {
-      type: "button",
-      tabIndex: -1,
-      className: (0, import_utils5.cx)("ui-carousel__indicator", className),
-      __css: css,
-      ...rest
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.ui.div, { className: "ui-carousel__sliders-inner", __css: css, ...rest });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {