@spark-ui/components/dist/carousel/index.d.ts

Spark (Leboncoin design system) components.

import * as react_jsx_runtime from 'react/jsx-runtime';
import { CSSProperties, Ref, KeyboardEvent, RefObject, ReactNode, ComponentProps } from 'react';
import { IconButtonProps } from '../icon-button/index.js';
import '../button/index.js';
import 'class-variance-authority/types';
import 'class-variance-authority';

declare const DATA_SCOPE: "carousel";
declare const DIRECTION: "ltr";
interface UseCarouselProps {
    /**
     * Opens the carousel on a predefined page index.
     */
    defaultPage?: number;
    /**
     * Active page of the carousel.
     * Use it to control the carousel with your own state.
     */
    page?: number;
    /**
     * Space (in pixels) between slides.
     */
    gap?: number;
    /**
     * CSS scroll snap behavior.
     * - `mandatory` to force snapping on each "page".
     * - `proximity` to force snapping only when scroll position is near the edge of a "page". Behavior can change depending on each browser.
     */
    snapType?: 'proximity' | 'mandatory';
    /**
     * Defines whether or not the scroll container is allowed to "pass over" possible snap positions.
     */
    snapStop?: 'always' | 'normal';
    /**
     * Offset (in pixels) of the left of the optimal viewing region of the list.
     */
    scrollPadding?: number;
    /**
     * Number of slides to display in the carousel viewport.
     */
    slidesPerPage?: number;
    /**
     * By default, the carousel scroll N slides per move, N being the number of slides in the carousel viewport.
     * Use this prop if you prefer to scroll by a smaller amount of slides each time.
     */
    slidesPerMove?: number | 'auto';
    /**
     * When `true`, allow previous and next buttons to be used when reaching the edges of the carousel.
     */
    loop?: boolean;
    scrollBehavior?: 'instant' | 'smooth';
    onPageChange?: (pageIndex: number) => void;
}
interface ComputedRootProps {
    id: string;
    role: 'region';
    'aria-roledescription': 'carousel';
    'data-scope': typeof DATA_SCOPE;
    'data-part': 'root';
    'data-orientation': 'horizontal';
    dir: typeof DIRECTION;
    style: CSSProperties & {
        '--slides-per-page': number;
        '--slide-spacing': string;
        '--slide-item-size': string;
    };
}
interface ComputedControlProps {
    'data-scope': typeof DATA_SCOPE;
    'data-part': 'control';
    'data-orientation': 'horizontal';
}
interface ComputedTriggerProps<T extends 'prev-trigger' | 'next-trigger'> {
    id: string;
    'aria-controls': string;
    'data-scope': typeof DATA_SCOPE;
    'data-part': T;
    'data-orientation': 'horizontal';
    type: 'button';
    dir: typeof DIRECTION;
    disabled: boolean;
    onClick: () => void;
}
interface ComputedSlideGroupProps {
    id: string;
    'aria-live': 'polite' | 'off';
    'data-scope': typeof DATA_SCOPE;
    'data-part': 'item-group';
    'data-orientation': 'horizontal';
    dir: typeof DIRECTION;
    tabIndex: 0;
    style: CSSProperties;
    ref: Ref<HTMLDivElement | null>;
}
interface ComputedSlideProps {
    id: string;
    role: 'group';
    'aria-roledescription': 'slide';
    'data-scope': typeof DATA_SCOPE;
    'data-part': 'item';
    'data-index': number;
    'data-orientation': 'horizontal';
    dir: typeof DIRECTION;
    style: CSSProperties;
}
interface ComputedIndicatorGroupProps {
    role: 'radiogroup';
    id: string;
    'data-scope': typeof DATA_SCOPE;
    'data-part': 'indicator-group';
    'data-orientation': 'horizontal';
    dir: typeof DIRECTION;
}
interface ComputedIndicatorProps {
    role: 'radio';
    id: string;
    'aria-checked': boolean;
    'data-scope': typeof DATA_SCOPE;
    'data-part': 'indicator';
    'data-orientation': 'horizontal';
    'data-index': number;
    'data-state': 'active' | 'inactive';
    tabIndex: 0 | -1;
    onClick: () => void;
    onKeyDown: (event: KeyboardEvent) => void;
}
interface AnatomyPropsSetters {
    getRootProps: () => ComputedRootProps;
    getControlProps: () => ComputedControlProps;
    getPrevTriggerProps: () => ComputedTriggerProps<'prev-trigger'>;
    getNextTriggerProps: () => ComputedTriggerProps<'next-trigger'>;
    getSlidesContainerProps: () => ComputedSlideGroupProps;
    getSlideProps: (props: {
        index: number;
        totalSlides: number;
    }) => ComputedSlideProps;
    getIndicatorGroupProps: () => ComputedIndicatorGroupProps;
    getIndicatorProps: (props: {
        index: number;
    }) => ComputedIndicatorProps;
}
interface CarouselAPI extends AnatomyPropsSetters {
    ref: RefObject<HTMLElement | null>;
    pageIndicatorsRefs: RefObject<(HTMLElement | null)[] | null>;
    gap: number;
    page: number;
    pageSnapPoints: number[];
    canScrollNext: boolean;
    canScrollPrev: boolean;
    scrollTo: (pageIndex: number, behavior: 'instant' | 'smooth') => void;
    scrollPrev: () => void;
    scrollNext: () => void;
    loop: boolean;
    scrollPadding: number;
    slidesPerPage: number;
    slidesPerMove: number | 'auto';
    snapType: UseCarouselProps['snapType'];
    snapStop: UseCarouselProps['snapStop'];
    scrollBehavior: UseCarouselProps['scrollBehavior'];
}

interface Props$4 extends UseCarouselProps {
    children?: ReactNode;
    className?: string;
}
declare const Carousel$1: {
    ({ className, snapType, snapStop, scrollBehavior, slidesPerMove, slidesPerPage, loop, children, gap, defaultPage, page, onPageChange, }: Props$4): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface ControlsProps {
    children: ReactNode;
}
declare const CarouselControls: {
    ({ children }: ControlsProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

declare const CarouselNextButton: {
    ({ "aria-label": ariaLabel, ...buttonProps }: IconButtonProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface Props$3 {
    children?: ReactNode;
    'aria-label': string;
    index: number;
    className?: string;
    unstyled?: boolean;
}
declare const CarouselPageIndicator: {
    ({ children, unstyled, index, "aria-label": ariaLabel, className, }: Props$3): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface RenderProps extends CarouselAPI {
    pages: number[];
}
interface Props$2 {
    children: (renderProps: RenderProps) => ReactNode;
    className?: string;
}
declare const CarouselPagePicker: {
    ({ children, className }: Props$2): react_jsx_runtime.JSX.Element;
    displayName: string;
};

declare const CarouselPrevButton: {
    ({ "aria-label": ariaLabel, ...buttonProps }: IconButtonProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface CarouselSlideProps extends ComponentProps<'div'> {
    isSnapPoint?: boolean;
    children?: ReactNode;
    index?: number;
    totalSlides?: number;
    className?: string;
}
declare const CarouselSlide: {
    ({ children, index, totalSlides, className, ...props }: CarouselSlideProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface Props$1 extends ComponentProps<'div'> {
    children?: ReactNode;
    className?: string;
}
declare const CarouselSlides: {
    ({ children, className }: Props$1): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface Props {
    children: ReactNode;
}
declare const CarouselViewport: {
    ({ children }: Props): react_jsx_runtime.JSX.Element;
    displayName: string;
};

declare const Carousel: typeof Carousel$1 & {
    Controls: typeof CarouselControls;
    NextButton: typeof CarouselNextButton;
    PrevButton: typeof CarouselPrevButton;
    Slide: typeof CarouselSlide;
    Slides: typeof CarouselSlides;
    Viewport: typeof CarouselViewport;
    PagePicker: typeof CarouselPagePicker;
    PageIndicator: typeof CarouselPageIndicator;
};

export { Carousel };