@yamada-ui/react/dist/types/components/carousel/use-carousel.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { Orientation } from "../../core/system/index.types.js";
import { HTMLProps, PropGetter, RequiredPropGetter } from "../../core/components/index.types.js";
import "../../core/index.js";
import * as react925 from "react";
import { RefObject } from "react";
import { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from "embla-carousel";

//#region src/components/carousel/use-carousel.d.ts
type EmblaOptions = Required<EmblaOptionsType>;
type CarouselAlign = EmblaOptions["align"];
type CarouselContainScroll = EmblaOptions["containScroll"];
type CarouselInViewThreshold = EmblaOptions["inViewThreshold"];
type CarouselWatchDrag = EmblaOptions["watchDrag"];
type CarouselWatchResize = EmblaOptions["watchResize"];
type CarouselWatchSlides = EmblaOptions["watchSlides"];
type CarouselControl = EmblaCarouselType;
type CarouselPlugin = EmblaPluginType;
interface CarouselContext extends Omit<UseCarouselReturn, "getRootProps"> {}
declare const CarouselContext: react925.Context<CarouselContext>, useCarouselContext: () => CarouselContext;
interface UseCarouselProps extends Omit<HTMLProps<"section">, "onChange"> {
  /**
   * The alignment of the carousel.
   *
   * @default 'center'
   */
  align?: CarouselAlign;
  /**
   * If `true`, the carousel will be autoplay.
   *
   * @default false
   */
  autoplay?: boolean;
  /**
   * 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 false
   */
  containScroll?: CarouselContainScroll;
  /**
   * Ref of the resizable item callback.
   */
  controlRef?: RefObject<CarouselControl | null>;
  /**
   * The initial index of the carousel slide.
   *
   * @default 0
   */
  defaultIndex?: number;
  /**
   * The number for the autoplay interval of the carousel.
   *
   * @default 4000
   */
  delay?: number;
  /**
   * If `true`, momentum scrolling will be enabled.
   *
   * @default false
   */
  dragFree?: boolean;
  /**
   * If `true`, carousel can be scrolled with mouse and touch interactions.
   *
   * @default true
   */
  draggable?: boolean;
  /**
   * Set scroll duration when triggered by any of the API methods.
   * Higher numbers enables slower scrolling.
   * Drag interactions are not affected because duration is then determined by the drag force.
   *
   * @default 25
   */
  duration?: number;
  /**
   * The index of the carousel slide.
   */
  index?: number;
  /**
   * 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?: CarouselInViewThreshold;
  /**
   * If `true`, infinite looping.
   * Automatically falls back to false if slide content isn't enough to loop.
   *
   * @default true
   */
  loop?: boolean;
  /**
   * The orientation of the carousel.
   *
   * @default 'horizontal'
   */
  orientation?: Orientation;
  /**
   * Embla plugins to use.
   */
  plugins?: CarouselPlugin[];
  /**
   * 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?: boolean;
  /**
   * The number of slides that should be scrolled with next or previous buttons.
   *
   * @default 1
   */
  slidesToScroll?: number;
  /**
   * If `true`, autoplay will pause when the mouse entries over.
   *
   * @default true
   */
  stopMouseEnterAutoplay?: boolean;
  /**
   * Enables for scrolling the carousel with mouse and touch interactions.
   * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.
   *
   * @default true
   */
  watchDrag?: CarouselWatchDrag;
  /**
   * Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed.
   * Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.
   *
   * @default true
   */
  watchResize?: CarouselWatchResize;
  /**
   * Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed.
   * Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.
   *
   * @default true
   */
  watchSlides?: CarouselWatchSlides;
  /**
   * The callback invoked when carousel slide selected.
   */
  onChange?: (index: number) => void;
  /**
   * A callback that return the current scroll amount when the carousel is scrolled.
   */
  onScrollProgress?: (progress: number) => void;
}
declare const useCarousel: ({
  id,
  align,
  autoplay,
  containScroll,
  controlRef,
  defaultIndex,
  delay,
  dragFree,
  draggable,
  duration,
  index: indexProp,
  inViewThreshold,
  loop,
  orientation,
  plugins,
  skipSnaps,
  slidesToScroll,
  stopMouseEnterAutoplay,
  watchDrag,
  watchResize: watchResizeProp,
  watchSlides,
  onChange,
  onScrollProgress,
  ...rest
}?: UseCarouselProps) => {
  carousel: EmblaCarouselType | undefined;
  index: number;
  setIndex: react925.Dispatch<react925.SetStateAction<number>>;
  snapCount: number;
  total: number;
  getIndicatorProps: RequiredPropGetter<"button", {
    index: number;
  }, undefined>;
  getIndicatorsProps: PropGetter<"div", undefined, undefined>;
  getItemProps: RequiredPropGetter<"div", {
    index: number;
  }, undefined>;
  getListProps: PropGetter<"div", undefined, undefined>;
  getNextTriggerProps: PropGetter<"button", undefined, undefined>;
  getPrevTriggerProps: PropGetter<"button", undefined, undefined>;
  getRootProps: PropGetter<"section", undefined, undefined>;
};
type UseCarouselReturn = ReturnType<typeof useCarousel>;
//#endregion
export { CarouselAlign, CarouselContainScroll, CarouselContext, CarouselControl, CarouselInViewThreshold, CarouselPlugin, CarouselWatchDrag, CarouselWatchResize, CarouselWatchSlides, UseCarouselProps, UseCarouselReturn, useCarousel, useCarouselContext };
//# sourceMappingURL=use-carousel.d.ts.map