@yamada-ui/carousel 1.0.27 → 1.0.28-dev-20240501105325

package/dist/carousel-slide.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/carousel-slide.tsx","../src/use-carousel.ts"],"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","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  createContext,\n  dataAttr,\n  handlerAll,\n  splitObject,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { EmblaCarouselType } from \"embla-carousel-react\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport type { MouseEvent } from \"react\"\nimport { Children, useCallback, useEffect, useRef, useState } from \"react\"\n\ntype CarouselContext = {\n  carousel: EmblaCarouselType | 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?: \"start\" | \"center\" | \"end\" | number\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?: \"trimSnaps\" | \"keepSnaps\" | \"\"\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?: number\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   * Adjusts scroll speed when triggered by any of the methods.\n   * Higher numbers enables faster scrolling.\n   *\n   * @default 10\n   */\n  speed?: 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\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  speed = 10,\n  delay = 4000,\n  gap = \"fallback(4, 1rem)\",\n  slidesToScroll = 1,\n  draggable = true,\n  dragFree = false,\n  inViewThreshold = 0,\n  skipSnaps = false,\n  containScroll = \"\",\n  slideSize = \"100%\",\n  includeGapInSize = true,\n  onScrollProgress,\n  children,\n  ...rest\n}: UseCarouselProps) => {\n  const computedProps = 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    axis: isVertical ? \"y\" : \"x\",\n    startIndex: defaultIndex,\n    loop,\n    align,\n    slidesToScroll,\n    draggable,\n    dragFree,\n    speed,\n    inViewThreshold,\n    skipSnaps,\n    containScroll,\n  })\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    speed,\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      ...computedProps[0],\n      ...props,\n      ref,\n      onMouseEnter: handlerAll(props.onMouseEnter, () => {\n        setIsMouseEnter(true)\n      }),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => {\n        setIsMouseEnter(false)\n      }),\n    }),\n    [computedProps],\n  )\n\n  const getSlidesProps: UIPropGetter = useCallback(\n    (props = {}) => ({\n      ...computedProps[1],\n      ...props,\n      ref: carouselRef,\n    }),\n    [computedProps, 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,eAA+B;AAC/B,IAAAC,gBAAmB;;;ACMnB,kBAAsC;AACtC,oCAAqC;AACrC,mBAMO;AAEP,kCAA6B;AAE7B,mBAAmE;AAc5D,IAAM,CAAC,kBAAkB,kBAAkB,QAChD,4BAA+B;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AA8TI,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,oBAA8B;AAAA,IAClC,CAAC,QAAQ,CAAC,OAAO;AAAA,MACf,GAAG;AAAA,MACH,cAAc;AAAA,MACd,qBAAiB,uBAAS,UAAU;AAAA,IACtC;AAAA,IACA,CAAC,YAAY,KAAK;AAAA,EACpB;AAEA,SAAO,EAAE,cAAc;AACzB;;;AD7UQ;AAvBD,IAAM,oBAAgB;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,gBAAG;AAAA,MAAH;AAAA,QACC,eAAW,kBAAG,sBAAsB,SAAS;AAAA,QAC7C,OAAO;AAAA,QACN,GAAG,cAAc,CAAC,CAAC;AAAA,QAEpB,sDAAC,sBAAmB,KAAW,GAAG,MAAM;AAAA;AAAA,IAC1C;AAAA,EAEJ;AACF;AAIA,IAAM,yBAAqB;AAAA,EACzB,CAAC,EAAE,GAAG,KAAK,GAAG,QAAQ;AACpB,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,GAAE;AAAA,QACF,GAAE;AAAA,QACD,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":["import_core","import_utils"]}

package/dist/carousel-slide.mjs

@@ -1,9 +0,0 @@
-"use client"
-import {
-  CarouselSlide
-} from "./chunk-VQX7S5CU.mjs";
-import "./chunk-QQ2HS4J4.mjs";
-export {
-  CarouselSlide
-};
-//# sourceMappingURL=carousel-slide.mjs.map

package/dist/carousel-slide.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/carousel.d.mts

@@ -1,144 +0,0 @@
-import * as _yamada_ui_core from '@yamada-ui/core';
-import { ThemeProps, HTMLUIProps, Token, CSSUIProps } from '@yamada-ui/core';
-import { UseCarouselProps } from './use-carousel.mjs';
-import { CarouselControlProps } from './carousel-control.mjs';
-import { CarouselIndicatorsProps } from './carousel-indicators.mjs';
-import 'react';
-import '@yamada-ui/button';
-import 'embla-carousel-react';
-
-type CarouselOptions = {
-    /**
-     * The orientation of the carousel.
-     *
-     * @default 'horizontal'
-     */
-    orientation?: Token<"vertical" | "horizontal">;
-    /**
-     * The alignment of the carousel.
-     *
-     * @default 'center'
-     */
-    align?: Token<"start" | "center" | "end" | number>;
-    /**
-     * Clear leading and trailing empty space that causes excessive scrolling.
-     * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.
-     *
-     * @default ''
-     */
-    containScroll?: Token<"trimSnaps" | "keepSnaps" | "">;
-    /**
-     * The number of slides that should be scrolled with next or previous buttons.
-     *
-     * @default 1
-     */
-    slidesToScroll?: Token<number>;
-    /**
-     * If `true`, momentum scrolling will be enabled.
-     *
-     * @default false
-     */
-    dragFree?: Token<boolean>;
-    /**
-     * If `true`, carousel can be scrolled with mouse and touch interactions.
-     *
-     * @default true
-     */
-    draggable?: Token<boolean>;
-    /**
-     * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.
-     *
-     * @default 0
-     */
-    inViewThreshold?: Token<number>;
-    /**
-     * If `true`, infinite looping.
-     * Automatically falls back to false if slide content isn't enough to loop.
-     *
-     * @default true
-     */
-    loop?: Token<boolean>;
-    /**
-     * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.
-     * Note that this option will be ignored if the dragFree option is set to true.
-     *
-     * @default false
-     */
-    skipSnaps?: Token<boolean>;
-    /**
-     * Adjusts scroll speed when triggered by any of the methods.
-     * Higher numbers enables faster scrolling.
-     *
-     * @default 10
-     */
-    speed?: Token<number>;
-    /**
-     * The number for the autoplay interval of the carousel.
-     *
-     * @default 4000
-     */
-    delay?: Token<number>;
-    /**
-     * If `true`, the carousel will be autoplay.
-     *
-     * @default false
-     */
-    autoplay?: Token<boolean>;
-    /**
-     * If `true`, autoplay will pause when the mouse entries over.
-     *
-     * @default true
-     */
-    stopMouseEnterAutoplay?: Token<boolean>;
-    /**
-     * If `true`, gap will be treated as part of the carousel slide size.
-     *
-     * @default true
-     */
-    includeGapInSize?: Token<boolean>;
-    /**
-     * The CSS `width` property.
-     */
-    slideSize?: CSSUIProps["width"];
-    /**
-     * Props for carousel inner element.
-     */
-    innerProps?: HTMLUIProps<"div">;
-    /**
-     * If `true`, display the carousel control buttons.
-     *
-     * @default true
-     */
-    withControls?: Token<boolean>;
-    /**
-     * Props for carousel control element.
-     */
-    controlProps?: CarouselControlProps;
-    /**
-     * Props for previous of the carousel control element.
-     */
-    controlPrevProps?: CarouselControlProps;
-    /**
-     * Props for next of the carousel control element.
-     */
-    controlNextProps?: CarouselControlProps;
-    /**
-     * If `true`, display the carousel indicator buttons.
-     *
-     * @default true
-     */
-    withIndicators?: Token<boolean>;
-    /**
-     * Props for carousel indicators element.
-     */
-    indicatorsProps?: CarouselIndicatorsProps;
-};
-type CarouselProps = ThemeProps<"Carousel"> & Omit<HTMLUIProps<"div">, "onChange" | "draggable"> & Pick<UseCarouselProps, "index" | "defaultIndex" | "onChange" | "onScrollProgress"> & CarouselOptions;
-/**
- * `Carousel` is a component that displays multiple elements like a slideshow.
- *
- * @see Docs https://yamada-ui.com/components/data-display/carousel
- */
-declare const Carousel: _yamada_ui_core.Component<"div", CarouselProps>;
-
-export { Carousel, type CarouselProps };

package/dist/carousel.d.ts

@@ -1,144 +0,0 @@
-import * as _yamada_ui_core from '@yamada-ui/core';
-import { ThemeProps, HTMLUIProps, Token, CSSUIProps } from '@yamada-ui/core';
-import { UseCarouselProps } from './use-carousel.js';
-import { CarouselControlProps } from './carousel-control.js';
-import { CarouselIndicatorsProps } from './carousel-indicators.js';
-import 'react';
-import '@yamada-ui/button';
-import 'embla-carousel-react';
-
-type CarouselOptions = {
-    /**
-     * The orientation of the carousel.
-     *
-     * @default 'horizontal'
-     */
-    orientation?: Token<"vertical" | "horizontal">;
-    /**
-     * The alignment of the carousel.
-     *
-     * @default 'center'
-     */
-    align?: Token<"start" | "center" | "end" | number>;
-    /**
-     * Clear leading and trailing empty space that causes excessive scrolling.
-     * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.
-     *
-     * @default ''
-     */
-    containScroll?: Token<"trimSnaps" | "keepSnaps" | "">;
-    /**
-     * The number of slides that should be scrolled with next or previous buttons.
-     *
-     * @default 1
-     */
-    slidesToScroll?: Token<number>;
-    /**
-     * If `true`, momentum scrolling will be enabled.
-     *
-     * @default false
-     */
-    dragFree?: Token<boolean>;
-    /**
-     * If `true`, carousel can be scrolled with mouse and touch interactions.
-     *
-     * @default true
-     */
-    draggable?: Token<boolean>;
-    /**
-     * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.
-     *
-     * @default 0
-     */
-    inViewThreshold?: Token<number>;
-    /**
-     * If `true`, infinite looping.
-     * Automatically falls back to false if slide content isn't enough to loop.
-     *
-     * @default true
-     */
-    loop?: Token<boolean>;
-    /**
-     * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.
-     * Note that this option will be ignored if the dragFree option is set to true.
-     *
-     * @default false
-     */
-    skipSnaps?: Token<boolean>;
-    /**
-     * Adjusts scroll speed when triggered by any of the methods.
-     * Higher numbers enables faster scrolling.
-     *
-     * @default 10
-     */
-    speed?: Token<number>;
-    /**
-     * The number for the autoplay interval of the carousel.
-     *
-     * @default 4000
-     */
-    delay?: Token<number>;
-    /**
-     * If `true`, the carousel will be autoplay.
-     *
-     * @default false
-     */
-    autoplay?: Token<boolean>;
-    /**
-     * If `true`, autoplay will pause when the mouse entries over.
-     *
-     * @default true
-     */
-    stopMouseEnterAutoplay?: Token<boolean>;
-    /**
-     * If `true`, gap will be treated as part of the carousel slide size.
-     *
-     * @default true
-     */
-    includeGapInSize?: Token<boolean>;
-    /**
-     * The CSS `width` property.
-     */
-    slideSize?: CSSUIProps["width"];
-    /**
-     * Props for carousel inner element.
-     */
-    innerProps?: HTMLUIProps<"div">;
-    /**
-     * If `true`, display the carousel control buttons.
-     *
-     * @default true
-     */
-    withControls?: Token<boolean>;
-    /**
-     * Props for carousel control element.
-     */
-    controlProps?: CarouselControlProps;
-    /**
-     * Props for previous of the carousel control element.
-     */
-    controlPrevProps?: CarouselControlProps;
-    /**
-     * Props for next of the carousel control element.
-     */
-    controlNextProps?: CarouselControlProps;
-    /**
-     * If `true`, display the carousel indicator buttons.
-     *
-     * @default true
-     */
-    withIndicators?: Token<boolean>;
-    /**
-     * Props for carousel indicators element.
-     */
-    indicatorsProps?: CarouselIndicatorsProps;
-};
-type CarouselProps = ThemeProps<"Carousel"> & Omit<HTMLUIProps<"div">, "onChange" | "draggable"> & Pick<UseCarouselProps, "index" | "defaultIndex" | "onChange" | "onScrollProgress"> & CarouselOptions;
-/**
- * `Carousel` is a component that displays multiple elements like a slideshow.
- *
- * @see Docs https://yamada-ui.com/components/data-display/carousel
- */
-declare const Carousel: _yamada_ui_core.Component<"div", CarouselProps>;
-
-export { Carousel, type CarouselProps };