@payfit/unity-components
Version:
88 lines (87 loc) • 3.43 kB
TypeScript
import { ReactNode } from 'react';
export declare const carouselHeader: import('tailwind-variants').TVReturnType<{
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
nav?: import('tailwind-merge').ClassNameValue;
slot?: import('tailwind-merge').ClassNameValue;
title?: import('tailwind-merge').ClassNameValue;
root?: import('tailwind-merge').ClassNameValue;
};
};
} | {
[x: string]: {
[x: string]: import('tailwind-merge').ClassNameValue | {
nav?: import('tailwind-merge').ClassNameValue;
slot?: import('tailwind-merge').ClassNameValue;
title?: import('tailwind-merge').ClassNameValue;
root?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
root: string;
title: string;
slot: string;
nav: string;
}, undefined, {
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
nav?: import('tailwind-merge').ClassNameValue;
slot?: import('tailwind-merge').ClassNameValue;
title?: import('tailwind-merge').ClassNameValue;
root?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
root: string;
title: string;
slot: string;
nav: string;
}, import('tailwind-variants').TVReturnType<unknown, {
root: string;
title: string;
slot: string;
nav: string;
}, undefined, unknown, unknown, undefined>>;
export interface CarouselHeaderProps {
/** Title of the carousel. Used as the accessible label for the carousel region. */
title: string;
/** Optional content rendered after the title (e.g. a "View all" link). */
actionSlot?: ReactNode;
/** Additional CSS classes for the root element. */
className?: string;
}
/**
* Header area for the Carousel. Renders the title and an optional action slot.
* The `CarouselHeader` displays a heading for the carousel and provides an optional slot
* for actions like a "View all" button or link. On medium screens and up (`md+`), it also
* embeds the `CarouselNav` controls in the top-right corner. On small screens, the nav
* is rendered below the slides instead.
* ## Accessibility
* The title is used as the accessible label for the carousel region via `aria-labelledby`,
* unless an explicit `aria-label` is provided to the `Carousel` root component.
* The action slot is wrapped in a `group` role with an appropriate label for screen readers.
* @example
* ```tsx
* <CarouselHeader title="Featured items" />
* ```
* @example
* ```tsx
* import { Button } from '@payfit/unity-components'
*
* <CarouselHeader
* title="Featured products"
* actionSlot={
* <Button variant="ghost" color="neutral">
* View all
* </Button>
* }
* />
* ```
* @param {CarouselHeaderProps} props - Component props
* @param {CarouselHeaderProps['title']} props.title - Carousel title (used as accessible label)
* @param {CarouselHeaderProps['actionSlot']} props.actionSlot - Optional action content (e.g., "View all" button)
* @param {CarouselHeaderProps['className']} props.className - Additional CSS classes
* @see {@link CarouselHeaderProps} for all available props
*/
declare const CarouselHeader: import('react').ForwardRefExoticComponent<CarouselHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
export { CarouselHeader };