@spark-ui/components/dist/scrolling-list/index.d.ts

Spark (Leboncoin design system) components.

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

type SnapType = 'mandatory' | 'proximity' | 'none';
type ScrollBehavior = 'smooth' | 'instant';
type SnapStop = 'normal' | 'always';
interface Props$2 {
    /**
     * 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.
     * - `none` to disabled scroll snapping.
     */
    snapType?: SnapType;
    /**
     * Defines whether or not the scroll container is allowed to "pass over" possible snap positions.
     */
    snapStop?: SnapStop;
    scrollBehavior?: ScrollBehavior;
    /**
     * Add a fade effect to indicate content overflow.
     */
    widthFade?: boolean;
    children?: ReactNode;
    /**
     * When `true`, allow previous and next buttons to be used when reaching the edges of the list.
     */
    loop?: boolean;
    /**
     * Space (in pixels) between items.
     */
    gap?: number;
    /**
     * Offset (in pixels) of the left of the optimal viewing region of the list.
     */
    scrollPadding?: number;
}
declare const ScrollingList$1: {
    ({ snapType, snapStop, scrollBehavior, loop, gap, widthFade, scrollPadding, children, }: Props$2): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface ScrollingListControls extends ComponentPropsWithoutRef<'div'> {
    /**
     * Visibility behavior of the control buttons:
     * - `always`: buttons are always visible.
     * - `hover`: buttons only appear on hover.
     *
     * a11y: `hover` is dangerous for accessibility as it disabled controls for touch screen users.
     * When using it, you must provide an alternative control outside of the list to replace them.
     */
    visibility?: 'hover' | 'always';
    children: ReactNode;
}
declare const ScrollingListControls: {
    ({ children, visibility, className, ...rest }: ScrollingListControls): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface ScrollingListItemProps extends ComponentPropsWithoutRef<'div'> {
    /**
     * Change the default rendered element for the one passed as a child, merging their props and behavior.
     */
    asChild?: boolean;
    children?: ReactNode;
    /**
     * DO NOT USE. This prop is automatically managed by the parent ScrollingList.ListItems
     */
    index?: number;
    className?: string;
}
declare const ScrollingListItem: {
    ({ asChild, children, index, className, ...rest }: ScrollingListItemProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

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

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

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

interface Props extends ComponentPropsWithoutRef<'button'> {
    children: string;
}
declare const ScrollingListSkipButton: {
    ({ children, ...rest }: Props): react_jsx_runtime.JSX.Element;
    displayName: string;
};

declare const ScrollingList: typeof ScrollingList$1 & {
    Controls: typeof ScrollingListControls;
    NextButton: typeof ScrollingListNextButton;
    PrevButton: typeof ScrollingListPrevButton;
    Item: typeof ScrollingListItem;
    Items: typeof ScrollingListItems;
    SkipButton: typeof ScrollingListSkipButton;
};

export { ScrollingList };