import { Heading, HeadingProps } from './card-heading';
import { Root, RootProps } from './card';
import { Button, ButtonProps } from './card-button';
import { Content, ContentProps } from './card-content';
import { Illustration, IllustrationProps } from './card-illustration';
import { Line, LineProps } from './card-line';
import { Link, LinkProps } from './card-link';
import { Slot, SlotProps } from './card-slot';
import { Footer, FooterProps } from './card-footer';
import { Overline, OverlineProps } from './card-overline';
import { Description, DescriptionProps } from './card-description';
import { Availability, AvailabilityProps } from './card-availability';
import { ColorDots, ColorDotsProps } from './card-color-dots';
import { Price, PriceProps } from './card-price';
import { ImageSlider, ImageSliderProps } from './card-carousel';
type CardProps = {
Root: RootProps;
Heading: HeadingProps;
Button: ButtonProps;
Content: ContentProps;
Illustration: IllustrationProps;
Line: LineProps;
Link: LinkProps;
Slot: SlotProps;
Footer: FooterProps;
Overline: OverlineProps;
Description: DescriptionProps;
Availability: AvailabilityProps;
ColorDots: ColorDotsProps;
Price: PriceProps;
ImageSlider: ImageSliderProps;
};
/**
* Card is a versatile container component that can be used to display various types of content in a structured and consistent way.
* It supports different variants, layouts, and can be used for both static and interactive content.
*
* @component
*
* @example
* // Basic card with default layout
*
* Basic Card
*
* Some content here
*
*
*
* @example
* // Navigation card with vertical layout
*
* Product Card
*
* View Details
*
*
*
* @example
* // Product card with product layout
*
*
*
*
* Product Name
* 99.99
*
* Product description
*
*
*
*
* @example
* // Rich card with background image
*
* Featured Content
* Rich content with background image
*
* Learn More
*
*
*/
declare const Card: typeof Root & {
/**
* Main title of the card. Renders the internal Heading component.
* Should be used to provide clear context about the card's content.
*
* @component
*
* @example
* Product Name
*/
Heading: typeof Heading;
/**
* Interactive button for navigation cards.
* When used, the entire card becomes interactive through ref forwarding.
* Should not be used together with Card.Link in the same card.
* Works best with navigation layouts (navigation-vertical, navigation-horizontal-small, etc.).
*
* @component
*
* @example
*
* View Details
*
*/
Button: typeof Button;
/**
* Main content area of the card.
* Should wrap the primary content of the card.
* Layout and positioning are determined by the card's layout prop.
*
* @component
*
* @example
*
* Main content goes here
*
*/
Content: typeof Content;
/**
* Container for images or illustrations.
* Handles proper sizing and positioning of visual content.
* Particularly important for product and rich card layouts.
*
* @component
*
* @example
*
*
*
*/
Illustration: typeof Illustration;
/**
* Divider line between sections of the card.
* Used to create visual separation between content blocks.
* Common in product and rich card layouts.
*
* @component
*
* @example
*
*/
Line: typeof Line;
/**
* Alternative to Card.Button for navigation cards.
* When used, the entire card becomes interactive through ref forwarding.
* Should not be used together with Card.Button in the same card.
* Works best with navigation layouts.
*
* @component
*
* @example
*
* Learn More
*
*/
Link: typeof Link;
/**
* Flexible container for badges, icons, or other small elements.
* Can be positioned using the align prop.
* Common in product cards for badges and status indicators.
*
* @component
*
* @example
*
* New
*
*/
Slot: typeof Slot;
/**
* Footer section of the card.
* Typically used for additional actions or information.
* Common in product cards for action buttons.
*
* @component
*
* @example
*
*
*
*/
Footer: typeof Footer;
/**
* Text displayed above the heading.
* Used for additional context or categorization.
* Common in product and rich card layouts.
*
* @component
*
* @example
* Featured Product
*/
Overline: typeof Overline;
/**
* Short description text for the card.
* Provides additional context about the card's content.
* Common in product and rich card layouts.
*
* @component
*
* @example
* Limited time offer
*/
Description: typeof Description;
/**
* Shows availability status of a product or service.
* Primarily used in product card layouts.
*
* @component
*
* @example
* In Stock
*/
Availability: typeof Availability;
/**
* Displays color options or variants.
* Useful for product cards with multiple color choices.
* Primarily used in product card layouts.
*
* @component
*
* @example
*
*/
ColorDots: typeof ColorDots;
/**
* Shows pricing information.
* Can display various price formats and options.
* Primarily used in product card layouts.
*
* @component
*
* @example
* 99.99
*/
Price: typeof Price;
/**
* Carousel component for displaying multiple images.
* Useful for product cards with multiple views.
* Primarily used in product card layouts.
*
* @component
*
* @example
*
*
*
*
*/
ImageSlider: typeof ImageSlider;
};
export { Card };
export type { CardProps };