@buun_group/brutalist-ui/dist/react/carousel/Carousel.d.ts

A brutalist-styled component library

/**
 * @module Carousel
 * @description A fully-featured carousel component with support for touch gestures, keyboard navigation, and auto-play. Includes compound components for flexible composition.
 */
import React, { CSSProperties } from 'react';
/**
 * Props for the Carousel component
 */
interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The orientation of the carousel slides
     * @default 'horizontal'
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * Whether the carousel should automatically advance slides
     * @default false
     */
    autoPlay?: boolean;
    /**
     * The interval between auto-play transitions in milliseconds
     * @default 3000
     */
    autoPlayInterval?: number;
    /**
     * Whether the carousel should loop back to the beginning after the last slide
     * @default false
     */
    loop?: boolean;
    /**
     * The controlled current slide index
     */
    value?: number;
    /**
     * The default slide index when uncontrolled
     * @default 0
     */
    defaultValue?: number;
    /**
     * Callback fired when the slide index changes
     */
    onValueChange?: (value: number) => void;
    /**
     * The size variant of the carousel
     * @default 'md'
     */
    size?: 'sm' | 'md' | 'lg';
    /**
     * The visual style variant of the carousel
     * @default 'default'
     */
    variant?: 'default' | 'brutal' | 'outline';
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
}
/**
 * Props for the Carousel.Content component
 */
interface CarouselContentProps {
    /**
     * The slide items to display in the carousel
     */
    children?: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
}
/**
 * Props for the Carousel.Controls component
 */
interface CarouselControlsProps {
    /**
     * The control elements (typically Previous and Next buttons)
     */
    children?: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
}
/**
 * Props for the Carousel.Previous component
 */
interface CarouselPreviousProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    /**
     * Custom content for the button (defaults to arrow icon)
     */
    children?: React.ReactNode;
}
/**
 * Props for the Carousel.Next component
 */
interface CarouselNextProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    /**
     * Custom content for the button (defaults to arrow icon)
     */
    children?: React.ReactNode;
}
/**
 * Props for the Carousel.Indicators component
 */
interface CarouselIndicatorsProps {
    /**
     * Custom indicator elements (defaults to dot indicators)
     */
    children?: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
}
declare const CarouselComponent: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>> & {
    Content: React.ForwardRefExoticComponent<CarouselContentProps & React.RefAttributes<HTMLDivElement>>;
    Controls: React.ForwardRefExoticComponent<CarouselControlsProps & React.RefAttributes<HTMLDivElement>>;
    Previous: React.ForwardRefExoticComponent<CarouselPreviousProps & React.RefAttributes<HTMLButtonElement>>;
    Next: React.ForwardRefExoticComponent<CarouselNextProps & React.RefAttributes<HTMLButtonElement>>;
    Indicators: React.ForwardRefExoticComponent<CarouselIndicatorsProps & React.RefAttributes<HTMLDivElement>>;
};
export { CarouselComponent as Carousel };
export type { CarouselProps, CarouselContentProps, CarouselControlsProps, CarouselPreviousProps, CarouselNextProps, CarouselIndicatorsProps };