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