import React from 'react'; export type ControlSize = 'tiny' | 'small' | 'medium' | 'large'; export type CarouselControlsPosition = 'sides' | 'overlay' | 'bottom' | 'none'; export type CarouselImage = Partial & { src: string; }; export type CarouselSlidesPerPage = number | { minSlideWidth: number; maxSlides?: number; }; export interface CarouselProps { /** Applies a data-hook HTML attribute that can be used in the tests. */ dataHook?: string; /** Specifies a CSS class name to be appended to the component's root element. * @internal */ className?: string; /** Defines an array of objects where each contains the `src` of an image (in ``). */ images?: CarouselImage[]; /** Sets the image's position. */ imagesPosition?: React.CSSProperties['objectPosition']; /** Sets the image's fit. */ imagesFit?: React.CSSProperties['objectFit']; /** Accepts any component as a child item. Most commonly used to display ``, `` or video files. */ children?: React.ReactNode; /** Sets the skin of the control (next / previous) buttons. */ buttonSkin?: 'standard' | 'inverted' | 'light' | 'transparent' | 'premium'; /** Drops a shadow below the control buttons. */ showControlsShadow?: boolean; /** Loops images endlessly. */ infinite?: boolean; /** Specifies whether the carousel advances to the next slide automatically every 3 seconds. Autoplay pauses while the mouse is over the carousel. * @default false */ autoplay?: boolean; /** Controls if the bottom dots are visible or hidden. */ dots?: boolean; /** Shows one slide at a time (default) or stacks one slide after another horizontally. */ variableWidth?: boolean; /** Sets the slide to start a presentation with. */ initialSlideIndex?: number; /** Index change callback. `index => ...` */ afterChange?: (currentSlide: number) => void; /** Index change callback. `(oldIndex, newIndex) => ...` */ beforeChange?: (currentSlide: number, nextSlide: number) => void; /** Sets the control buttons' position. */ controlsPosition?: CarouselControlsPosition; /** Sets the control buttons' size. */ controlsSize?: ControlSize; /** Controls if the next / previous control buttons are visible, hidden or disabled at the start and end of the slideshow. */ controlsStartEnd?: 'disabled' | 'hidden'; /** Controls gradient color when controlsPosition set to overlay. * @default white */ gradientColor?: string; /** Enables gradient on when controlsPosition set to overlay. * @default false */ gradient?: boolean; /** Number of pixels dividing between slides. */ slideSpacing?: number; /** Animation duration in milliseconds. */ animationDuration?: number; /** Defines how slides align relative to the viewport. * When set, this takes full control of slide positioning and `startEndOffset` is ignored. * If neither `align` nor `startEndOffset` is provided, defaults to `'start'`. * @default 'start' */ align?: 'start' | 'center' | 'end'; /** Specifies how many slides advance per navigation action. */ slidingType?: 'align-to-start' | 'reveal-one' | 'reveal-chunk' | number; /** Number of pixels for showing "peeking" cards on the edges of the carousel. * Adds visible offset at the start and end of the carousel to hint at more content. * Only takes effect when `align` isn't explicitly set. If `align` is provided, * this prop is ignored. Use one or the other, not both. */ startEndOffset?: number; /** Shows several slides side by side on one page. A number fixes the count; * an object fits as many slides as the strip allows, each at least * `minSlideWidth` px wide, up to `maxSlides`. Indices in the other props keep * referring to slides, not pages. Turns off `variableWidth`, `align`, * `startEndOffset` and `slidingType` for this instance. */ slidesPerPage?: CarouselSlidesPerPage; } export interface CarouselHandle { slideTo: (index: number) => void; leftIconByControlSize: (controlSize: ControlSize) => React.ReactElement; rightIconByControlSize: (controlSize: ControlSize) => React.ReactElement; } export interface SliderArrowProps extends React.HTMLAttributes { /** Applied as data-hook HTML attribute that can be used in the tests. */ dataHook?: string; /** Size of the arrow button. */ arrowSize?: 'tiny' | 'small' | 'medium' | 'large'; /** Skin style of the button. */ buttonSkin?: 'standard' | 'inverted' | 'light' | 'transparent' | 'premium'; /** Icon to be rendered within the icon button. */ icon: React.ReactElement; /** Gradient background class name. */ gradientClassName?: string; /** Controls if the next / previous control buttons are visible, hidden or disabled at the start and end of the slideshow. */ controlsStartEnd?: 'disabled' | 'hidden'; /** Click handler for the arrow button. */ onClick?: () => void; /** Whether the arrow button is disabled. */ disabled?: boolean; /** Accessible label for the arrow button. */ ariaLabel?: string; direction?: 'prev' | 'next'; } export interface PaginationProps { /** Specifies a CSS class name to be appended to the component's root element. */ className?: string; originalClassName?: string; /** Sets the slides the pagination represents, one dot per entry. */ pages: React.ReactElement[]; } //# sourceMappingURL=Carousel.types.d.ts.map