import { default as React, PropsWithChildren } from 'react';
import { VariantProps } from '@payfit/unity-themes';
export declare const carouselSlide: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
export interface CarouselSlideProps extends PropsWithChildren<VariantProps<typeof carouselSlide>>, React.HTMLAttributes<HTMLDivElement> {
    className?: string;
}
/**
 * Individual slide wrapper for carousel content.
 * `CarouselSlide` wraps each item in the carousel and provides the proper semantic structure
 * and accessibility attributes. Each slide is focusable and navigable via keyboard.
 * ## Accessibility
 * - Each slide has `role="group"` and `aria-roledescription="slide"`
 * - Slides are keyboard navigable using Arrow keys, PageUp/PageDown, Home/End
 * - Use the `.uy:group` class on CarouselSlide to style focus states on child content
 * @example
 * ```tsx
 * import { CarouselSlide } from '@payfit/unity-components'
 *
 * <CarouselSlide>
 *   <img src="..." alt="Product" />
 *   <h3>Product title</h3>
 * </CarouselSlide>
 * ```
 * @example
 * ```tsx
 * <CarouselSlide>
 *   <div className="uy:group-focus-visible:outline uy:group-focus-visible:outline-2">
 *     Content with custom focus ring
 *   </div>
 * </CarouselSlide>
 * ```
 * @param {CarouselSlideProps} props - Component props
 * @param {CarouselSlideProps['className']} props.className - Additional CSS classes
 * @param {CarouselSlideProps['children']} props.children - Slide content
 * @see {@link CarouselSlideProps} for all available props
 */
declare const CarouselSlide: React.ForwardRefExoticComponent<CarouselSlideProps & React.RefAttributes<HTMLDivElement>>;
export { CarouselSlide };