@payfit/unity-components
Version:
60 lines (59 loc) • 2.33 kB
TypeScript
export declare const carouselNav: import('tailwind-variants').TVReturnType<{
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
indicator?: import('tailwind-merge').ClassNameValue;
root?: import('tailwind-merge').ClassNameValue;
};
};
} | {
[x: string]: {
[x: string]: import('tailwind-merge').ClassNameValue | {
indicator?: import('tailwind-merge').ClassNameValue;
root?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
root: string;
indicator: string;
}, undefined, {
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
indicator?: import('tailwind-merge').ClassNameValue;
root?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
root: string;
indicator: string;
}, import('tailwind-variants').TVReturnType<unknown, {
root: string;
indicator: string;
}, undefined, unknown, unknown, undefined>>;
export interface CarouselNavProps {
/** Additional CSS classes for the root element. */
className?: string;
}
/**
* Internal navigation component for the Carousel.
* Renders previous/next buttons and a page indicator showing the current position (e.g., "2/5").
* This component is automatically rendered by `CarouselHeader` on medium screens and up, and
* below the slides on small screens. You typically don't need to use it directly.
* ## Behavior
* - Automatically hidden when there's only one page of content (`snapCount === 1`)
* - Previous/next buttons are disabled when at the start/end (unless `loop: true`)
* - Buttons are properly labeled for screen readers
* - Uses `role="toolbar"` for semantic navigation grouping
*
* ## Internal Use
* This component is wired to the carousel via context and is used internally by the
* `Carousel` component. You don't typically render it directly.
* @param {CarouselNavProps} props - Component props
* @param {CarouselNavProps['className']} props.className - Additional CSS classes
* @see {@link CarouselNavProps} for all available props
* @internal
*/
declare const CarouselNav: {
({ className }: CarouselNavProps): import("react/jsx-runtime").JSX.Element | null;
displayName: string;
};
export { CarouselNav };