@payfit/unity-components
Version:
39 lines (38 loc) • 1.82 kB
TypeScript
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 };