import { HTMLAttributes, JSX, ReactNode } from 'react';
import { BreakpointCustomizable, SelectedAriaAttributes } from '../../types';
import { DSLanguage } from '../../utils';
import { CarouselAriaAttributes, CarouselLayout, CarouselNavigationControls, CarouselScrollMarkerPosition, CarouselScrollMarkerVariant, CarouselTranslations, CarouselVariant } from './Carousel.utils';
export type CarouselProps = Omit<HTMLAttributes<HTMLElement>, 'aria-label' | 'aria-labelledby' | 'children' | 'lang'> & {
    /**
     * Accessible label for the carousel.
     *
     * Provide `aria-label` for a self-contained label
     * or `aria-labelledby` to reference a visible heading.
     *
     * @example
     * ```tsx
     * <DSCarousel aria={{ 'aria-label': 'Product gallery' }}>…</DSCarousel>
     * <DSCarousel aria={{ 'aria-labelledby': 'heading-id' }}>…</DSCarousel>
     * ```
     */
    aria: SelectedAriaAttributes<CarouselAriaAttributes>;
    /**
     * Carousel item content.
     *
     * Each direct child is treated as one item.
     */
    children: ReactNode;
    /**
     * Initial visible item index. (zero-based)
     *
     * @default 0
     */
    defaultIndex?: number;
    /**
     * Number of visible items per viewport.
     *
     * Applies to `multi` variant only.
     * Supports responsive breakpoint values.
     *
     * @default { base: 1, s: 1, m: 2, l: 4 }
     */
    itemsPerView?: BreakpointCustomizable<number>;
    /**
     * Number of items to advance per navigation action.
     *
     * Applies to `multi` variant only (`single` always advances by 1).
     * Use `1` to move one item at a time instead of a full page.
     * Supports responsive breakpoint values.
     *
     * @default itemsPerView (advances a full page)
     */
    itemsToScroll?: BreakpointCustomizable<number>;
    /** Sets language for screen reader messages and ICU plural rule resolution.
     * Use `'de'` or `'en'` for preconfigured translations, or any
     * [BCP 47 language tag](https://www.rfc-editor.org/info/bcp47) (e.g. `'fr'`, `'pl'`, `'en-GB'`)
     * when providing a custom `translations` object.
     * @default 'en'
     */
    lang?: DSLanguage;
    /**
     * Layout mode of the carousel.
     *
     * `flex`: self-contained flex layout that works anywhere.
     *
     * `grid`: aligns the carousel content with the design system grid.
     * The scroll viewport is placed in the `main` grid area.
     * If used with `navigationControls={{ position: 'outside' }}`, the navigation
     * buttons are placed in the surrounding margins from breakpoint L, and resolve
     * to `inside` below L, where there is no room in the margins.
     *
     * Requires the carousel to be a direct child of a `ds.grid` container
     * (uses CSS subgrid).
     *
     * @default 'flex'
     */
    layout?: CarouselLayout;
    /**
     * Configuration for the previous/next navigation buttons.
     *
     * `position`: placement of the navigation buttons. Supports responsive
     * breakpoint values.
     *  - `outside`: controls are placed adjacent to the viewport.
     *  - `inside`: controls overlay the viewport.
     *  - (default) `outside`
     *
     * `variant`: visual style of the navigation buttons. Supports responsive
     * breakpoint values.
     *  - `filled`: default navigation button appearance.
     *  - `inverse`: navigation buttons rendered with `theme='dark'`.
     *  - (default) `filled`
     *
     * In `layout='grid'`, `position='outside'` resolves to `inside` below
     * breakpoint L (where there is no room in the margins) and to `outside` from
     * L. Pass a breakpoint object like `{ base: 'inside', l: 'outside' }` to make
     * this explicit and silence the auto-adjust warning.
     *
     * `show`: whether the previous/next navigation buttons are rendered. Supports
     * responsive breakpoint values.
     *  - By default the navigation is hidden below breakpoint L and visible on
     *    breakpoint L and above.
     *  - (default) `{ base: false, l: true }`
     *
     * `previousButtonProps` / `nextButtonProps`: custom `data-*` attributes for the
     * respective navigation button.
     *
     * @example
     * ```tsx
     * <DSCarousel navigationControls={{
     *   show: { base: false, l: true },
     *   position: { base: 'inside', l: 'outside' },
     *   variant: 'inverse',
     *   previousButtonProps: { 'data-testid': 'carousel-prev' },
     *   nextButtonProps: { 'data-testid': 'carousel-next' },
     * }}>…</DSCarousel>
     * ```
     */
    navigationControls?: CarouselNavigationControls;
    /**
     * Enables partial preview of the next item.
     *
     * Can only be used with variant='multi'.
     * It can be used with:
     *  - `layout='flex'`
     *  - `layout='grid'` below breakpoint L with `{ base: true, l: false }`
     *
     * @default false
     */
    peek?: BreakpointCustomizable<boolean>;
    /**
     * Scroll marker placement.
     *
     * `outside`: scroll markers are placed underneath the viewport.
     *
     * `inside`: scroll markers overlay the bottom of the viewport.
     *
     * @default 'outside'
     */
    scrollMarkerPosition?: CarouselScrollMarkerPosition;
    /**
     * Visual style of the scroll marker dots.
     *
     * `ghost`: no container background, dark active dot.
     *
     * `filled`: dark background container with white active dot.
     *
     * `inverse`: light background container with dark active dot.
     *
     *
     * @default 'ghost'
     */
    scrollMarkerVariant?: CarouselScrollMarkerVariant;
    /**
     * Translations for the DSCarousel. Use our [customization page](/?path=/docs/components-carousel-translations--documentation) for creating custom translations.
     */
    translations?: CarouselTranslations;
    /**
     * Defines the visible content model.
     *
     * `single`: one item visible at a time.
     *
     * `multi`: multiple items visible simultaneously.
     *
     * @default 'single'
     */
    variant?: CarouselVariant;
};
/**
 * A carousel is an interactive UI pattern that sequentially displays multiple
 * pieces of content within a limited viewport and allows users to move between
 * these elements via navigation.
 *
 * Design in Figma: [Carousel](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=26075-11524)
 */
export declare const DSCarousel: {
    ({ aria, children, className, defaultIndex, itemsPerView, itemsToScroll, lang, layout, navigationControls, peek, scrollMarkerPosition, scrollMarkerVariant, translations, variant, ...rest }: CarouselProps): JSX.Element;
    displayName: string;
};