its-just-ui/dist/components/Carousel/Carousel.d.ts

ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.

import { default as React } from 'react';

export interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
    variant?: 'default' | 'fade' | 'slide' | 'zoom' | 'stacked' | 'coverflow';
    axis?: 'horizontal' | 'vertical';
    transitionType?: 'slide' | 'fade' | 'scale' | 'scroll';
    direction?: 'ltr' | 'rtl';
    loop?: boolean;
    autoplay?: boolean;
    autoplayInterval?: number;
    duration?: number;
    pauseOnHover?: boolean;
    pauseOnFocus?: boolean;
    keyboardNavigation?: boolean;
    touchEnabled?: boolean;
    swipeEnabled?: boolean;
    snap?: boolean;
    dragEnabled?: boolean;
    lazyLoad?: boolean;
    dynamicHeight?: boolean;
    itemsPerSlide?: number;
    responsive?: {
        [key: string]: {
            itemsPerSlide?: number;
            gap?: string;
        };
    };
    currentIndex?: number;
    onSlideChange?: (index: number) => void;
    imageMode?: 'contain' | 'cover' | 'stretch';
    height?: string;
    width?: string;
    maxWidth?: string;
    aspectRatio?: string;
    gap?: string;
    spacing?: string;
    padding?: string;
    margin?: string;
    borderRadius?: string;
    boxShadow?: string;
    backgroundColor?: string;
    borderColor?: string;
    borderWidth?: string;
    borderStyle?: string;
    showIndicators?: boolean;
    showControls?: boolean;
    indicatorPosition?: 'inside' | 'outside' | 'bottom' | 'top';
    controlPosition?: 'inside' | 'outside' | 'center' | 'corners';
    nextIcon?: React.ReactNode;
    prevIcon?: React.ReactNode;
    indicatorIcon?: React.ReactNode;
    slideBackgroundColor?: string;
    slideBorderRadius?: string;
    slidePadding?: string;
    slideBoxShadow?: string;
    slideBorderColor?: string;
    slideBorderWidth?: string;
    slideBorderStyle?: string;
    controlBackgroundColor?: string;
    controlHoverBackgroundColor?: string;
    controlActiveBackgroundColor?: string;
    controlTextColor?: string;
    controlHoverTextColor?: string;
    controlActiveTextColor?: string;
    controlSize?: string;
    controlBorderRadius?: string;
    controlPadding?: string;
    controlBoxShadow?: string;
    controlBorderColor?: string;
    controlBorderWidth?: string;
    controlBorderStyle?: string;
    controlOpacity?: string;
    controlHoverOpacity?: string;
    indicatorBackgroundColor?: string;
    indicatorActiveBackgroundColor?: string;
    indicatorHoverBackgroundColor?: string;
    indicatorSize?: string;
    indicatorBorderRadius?: string;
    indicatorMargin?: string;
    indicatorBoxShadow?: string;
    indicatorBorderColor?: string;
    indicatorBorderWidth?: string;
    indicatorBorderStyle?: string;
    indicatorOpacity?: string;
    indicatorActiveOpacity?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusRingOffsetColor?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    textColor?: string;
    loading?: boolean;
    loadingMessage?: string;
    children: React.ReactNode;
}
interface CarouselContextValue {
    currentIndex: number;
    totalSlides: number;
    goTo: (index: number) => void;
    next: () => void;
    prev: () => void;
    variant?: 'default' | 'fade' | 'slide' | 'zoom' | 'stacked' | 'coverflow';
    axis?: 'horizontal' | 'vertical';
    transitionType?: 'slide' | 'fade' | 'scale' | 'scroll';
    direction?: 'ltr' | 'rtl';
    loop?: boolean;
    duration?: number;
    imageMode?: 'contain' | 'cover' | 'stretch';
    gap?: string;
    itemsPerSlide?: number;
    slideBackgroundColor?: string;
    slideBorderRadius?: string;
    slidePadding?: string;
    slideBoxShadow?: string;
    slideBorderColor?: string;
    slideBorderWidth?: string;
    slideBorderStyle?: string;
    controlBackgroundColor?: string;
    controlHoverBackgroundColor?: string;
    controlActiveBackgroundColor?: string;
    controlTextColor?: string;
    controlHoverTextColor?: string;
    controlActiveTextColor?: string;
    controlSize?: string;
    controlBorderRadius?: string;
    controlPadding?: string;
    controlBoxShadow?: string;
    controlBorderColor?: string;
    controlBorderWidth?: string;
    controlBorderStyle?: string;
    controlOpacity?: string;
    controlHoverOpacity?: string;
    indicatorBackgroundColor?: string;
    indicatorActiveBackgroundColor?: string;
    indicatorHoverBackgroundColor?: string;
    indicatorSize?: string;
    indicatorBorderRadius?: string;
    indicatorMargin?: string;
    indicatorBoxShadow?: string;
    indicatorBorderColor?: string;
    indicatorBorderWidth?: string;
    indicatorBorderStyle?: string;
    indicatorOpacity?: string;
    indicatorActiveOpacity?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusRingOffsetColor?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    textColor?: string;
}
export declare const useCarousel: () => CarouselContextValue;
declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
export interface CarouselSlideProps extends React.HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
}
declare const CarouselSlide: React.ForwardRefExoticComponent<CarouselSlideProps & React.RefAttributes<HTMLDivElement>>;
export interface CarouselControlsProps extends React.HTMLAttributes<HTMLDivElement> {
    position?: 'inside' | 'outside' | 'center' | 'corners';
    children: React.ReactNode;
}
declare const CarouselControls: React.ForwardRefExoticComponent<CarouselControlsProps & React.RefAttributes<HTMLDivElement>>;
export interface CarouselButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    icon?: React.ReactNode;
}
declare const CarouselPrev: React.ForwardRefExoticComponent<CarouselButtonProps & React.RefAttributes<HTMLButtonElement>>;
declare const CarouselNext: React.ForwardRefExoticComponent<CarouselButtonProps & React.RefAttributes<HTMLButtonElement>>;
export interface CarouselIndicatorsProps extends React.HTMLAttributes<HTMLDivElement> {
    position?: 'inside' | 'outside' | 'bottom' | 'top';
    icon?: React.ReactNode;
}
declare const CarouselIndicators: React.ForwardRefExoticComponent<CarouselIndicatorsProps & React.RefAttributes<HTMLDivElement>>;
export { Carousel, CarouselSlide, CarouselControls, CarouselPrev, CarouselNext, CarouselIndicators };