import { PropsWithChildren } from 'react';
import { ResponsiveValue } from '../../../hooks/use-responsive-value.js';
import { SpacingToken } from '../../../utils/spacing.js';
export declare const carouselContent: import('tailwind-variants').TVReturnType<{
    [key: string]: {
        [key: string]: import('tailwind-merge').ClassNameValue | {
            track?: import('tailwind-merge').ClassNameValue;
            root?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {
    [x: string]: {
        [x: string]: import('tailwind-merge').ClassNameValue | {
            track?: import('tailwind-merge').ClassNameValue;
            root?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {}, {
    root: string[];
    track: string[];
}, undefined, {
    [key: string]: {
        [key: string]: import('tailwind-merge').ClassNameValue | {
            track?: import('tailwind-merge').ClassNameValue;
            root?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {}, {
    root: string[];
    track: string[];
}, import('tailwind-variants').TVReturnType<unknown, {
    root: string[];
    track: string[];
}, undefined, unknown, unknown, undefined>>;
export interface CarouselContentProps extends PropsWithChildren {
    /**
     * Number of slides visible at once, optionally configured per breakpoint.
     * @example
     * itemsPerPage={3}
     * itemsPerPage={{ base: 1, md: 2, lg: 3 }}
     */
    itemsPerPage?: number | ResponsiveValue<number>;
    /** Gap between slides — Unity spacing token only (e.g. `'$200'`). */
    gap?: SpacingToken | ResponsiveValue<SpacingToken>;
    /** Additional padding to add to the first and last slides, for visual alignment purposes */
    trackPadding?: {
        start?: SpacingToken | ResponsiveValue<SpacingToken>;
        end?: SpacingToken | ResponsiveValue<SpacingToken>;
    };
    /** Additional CSS classes for the viewport element. */
    className?: string;
    /**
     * Negative horizontal margin to apply to the carousel viewport, for cases where you place the carousel inside a padded container
     */
    trackOffset?: number | SpacingToken | ResponsiveValue<number | SpacingToken>;
}
/**
 * The scrollable viewport that houses carousel slides.
 * `CarouselContent` controls the visual layout of the carousel: how many slides are visible
 * at once, spacing between slides, and optional padding to create a "peek" effect showing
 * adjacent slides.
 * ## Layout Control
 * - **itemsPerPage**: Number of slides visible at once (supports fractional values like `2.5`)
 * - **gap**: Spacing between slides (Unity spacing tokens only, e.g., `'$200'`)
 * - **trackPadding**: Padding on start/end edges to align with the header, in cases where you use `trackOffset`
 * - **trackOffset**: Horizontal offset to align slides with page content
 * ## Responsive Layout
 * All layout props support responsive values using the `{ base, md, lg }` syntax:
 * @example
 * ```tsx
 * <CarouselContent
 *   itemsPerPage={{ base: 1, md: 2, lg: 3 }}
 *   gap={{ base: '$100', md: '$200' }}
 *   trackPadding={{ end: { base: '$100', md: '$200' } }}
 * >
 *   <CarouselSlide>Slide 1</CarouselSlide>
 *   <CarouselSlide>Slide 2</CarouselSlide>
 * </CarouselContent>
 * ```
 * ## Fractional Items Per Page
 * Use fractional values to create a "bleeding" effect where the next slide is partially visible:
 * @example
 * ```tsx
 * <CarouselContent itemsPerPage={2.3} gap="$200">
 *   <CarouselSlide>Slide 1</CarouselSlide>
 *   <CarouselSlide>Slide 2</CarouselSlide>
 *   <CarouselSlide>Slide 3</CarouselSlide>
 * </CarouselContent>
 * ```
 * @param {CarouselContentProps} props - Component props
 * @param {CarouselContentProps['itemsPerPage']} props.itemsPerPage - Number of slides visible at once
 * @param {CarouselContentProps['gap']} props.gap - Spacing between slides (Unity spacing tokens)
 * @param {CarouselContentProps['trackPadding']} props.trackPadding - Padding to reveal adjacent slides
 * @param {CarouselContentProps['trackOffset']} props.trackOffset - Horizontal offset for alignment
 * @param {CarouselContentProps['className']} props.className - Additional CSS classes
 * @param {CarouselContentProps['children']} props.children - CarouselSlide components
 * @see {@link CarouselContentProps} for all available props
 */
declare function CarouselContent({ className, children, itemsPerPage: responsiveItemsPerPage, gap: responsiveGap, trackPadding: responsiveTrackPadding, trackOffset: responsiveTrackOffset, }: CarouselContentProps): import("react/jsx-runtime").JSX.Element;
declare namespace CarouselContent {
    var displayName: string;
}
export { CarouselContent };