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

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

import { Orientation, ThemeProps } from "../../core/system/index.types.js";
import { CSSProps } from "../../core/css/index.types.js";
import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
import "../../core/index.js";
import { IconButtonProps } from "../button/icon-button.js";
import { CarouselStyle } from "./carousel.style.js";
import { CarouselAlign, CarouselContainScroll, CarouselInViewThreshold, UseCarouselProps } from "./use-carousel.js";
import "../../index.js";
import * as react928 from "react";
import { ReactNode } from "react";

//#region src/components/carousel/carousel.d.ts
interface CarouselRootProps extends Omit<HTMLStyledProps<"section">, "draggable" | "onChange">, Omit<UseCarouselProps, "align" | "autoplay" | "containScroll" | "delay" | "dragFree" | "draggable" | "duration" | "inViewThreshold" | "loop" | "orientation" | "skipSnaps" | "slidesToScroll" | "stopMouseEnterAutoplay">, ThemeProps<CarouselStyle> {
  /**
   * 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;
  /**
   * 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;
  /**
   * If `true`, gap will be treated as part of the carousel slide size.
   *
   * @default true
   */
  includeGapInSize?: 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?: 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;
  /**
   * 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 size of the carousel item.
   */
  slideSize?: CSSProps["width"];
  /**
   * 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;
}
declare const CarouselPropsContext: react928.Context<Partial<CarouselRootProps> | undefined>, useCarouselPropsContext: () => Partial<CarouselRootProps> | undefined;
/**
 * `Carousel` is a component that displays multiple elements like a slideshow.
 *
 * @see https://yamada-ui.com/docs/components/carousel
 */
declare const CarouselRoot: Component<"section", CarouselRootProps>;
interface CarouselListProps extends HTMLStyledProps {}
declare const CarouselList: Component<"div", CarouselListProps>;
interface CarouselItemProps extends HTMLStyledProps {
  /**
   * The index of the carousel item.
   */
  index: number;
  /**
   * The size of the carousel item.
   */
  slideSize?: CSSProps["width"];
}
declare const CarouselItem: Component<"div", CarouselItemProps>;
interface CarouselPrevTriggerProps extends IconButtonProps {}
declare const CarouselPrevTrigger: Component<"button", CarouselPrevTriggerProps>;
interface CarouselNextTriggerProps extends IconButtonProps {}
declare const CarouselNextTrigger: Component<"button", CarouselNextTriggerProps>;
interface CarouselIndicatorsProps extends HTMLStyledProps {
  /**
   * The function used to generate children.
   * it will be called with `{ index: number; selected: boolean }`.
   */
  render?: (props: {
    index: number;
    selected: boolean;
  }) => ReactNode;
}
declare const CarouselIndicators: Component<"div", CarouselIndicatorsProps>;
interface CarouselIndicatorProps extends HTMLStyledProps<"button"> {
  /**
   * The index of the carousel indicator.
   */
  index: number;
}
declare const CarouselIndicator: Component<"button", CarouselIndicatorProps>;
//#endregion
export { CarouselIndicator, CarouselIndicatorProps, CarouselIndicators, CarouselIndicatorsProps, CarouselItem, CarouselItemProps, CarouselList, CarouselListProps, CarouselNextTrigger, CarouselNextTriggerProps, CarouselPrevTrigger, CarouselPrevTriggerProps, CarouselPropsContext, CarouselRoot, CarouselRootProps, useCarouselPropsContext };
//# sourceMappingURL=carousel.d.ts.map