import { Root, RootProps } from './flip-card-root';
import { Back, BackProps } from './flip-card-back';
import { Front, FrontProps } from './flip-card-front';
import { Trigger, TriggerProps } from './flip-card-trigger';
import { Footer, FooterProps } from './flip-card-footer';
export type FlipCardProps = {
Root: RootProps;
Back: BackProps;
Front: FrontProps;
Trigger: TriggerProps;
Footer: FooterProps;
};
/**
* FlipCard enhances the standard Card component with flip animation capabilities.
*
* Use FlipCard as a drop-in replacement for Card when you need the flip functionality,
* while continuing to use regular Card subcomponents within the Front and Back components.
* Both Front and Back components are regular Card root elements with the flip behavior added.
*
* @component
*
* @example Basic usage with Card subcomponents
* ```tsx
*
*
* Card Front
* Click to see details
*
* Learn More
*
*
*
* Card Back
* Here are the details
* Additional content goes here
*
* Back
*
*
*
* ```
*
* @example With controlled state
* ```tsx
* const [flipped, setFlipped] = useState(false);
*
*
*
* Card Front
*
*
* Card Back
*
*
* ```
*/
declare const FlipCard: typeof Root & {
/**
* Container for content displayed on the back of the card.
* This content is shown when the card is flipped.
*
* This is a regular Card component, so you can use all Card subcomponents inside it:
* Card.Heading, Card.Description, Card.Content, etc.
*
* Includes accessibility features:
* - Proper ARIA attributes (aria-hidden when not visible)
* - Automatic focus management
* - Scroll capabilities for handling overflow content
*
* @component
*
* @example
* ```tsx
*
* Details
* Additional information
* Main content here
*
* ```
*/
Back: typeof Back;
/**
* Container for content displayed on the front of the card.
* This content is shown by default when the card is not flipped.
*
* This is a regular Card component, so you can use all Card subcomponents inside it:
* Card.Heading, Card.Description, Card.Content, etc.
*
* The Front component determines the overall dimensions of the FlipCard.
*
* Includes accessibility features:
* - Proper ARIA attributes (aria-hidden when not visible)
* - Automatic focus management
*
* @component
*
* @example
* ```tsx
*
* Product Name
*
* 
*
* Preview content
*
* ```
*/
Front: typeof Front;
/**
* Button to toggle the card between front and back states.
* Can be placed anywhere within Front or Back components.
*
* @component
*
* @example
* ```tsx
*
* See Details
*
* ```
*
* @example Back button
* ```tsx
*
* Back to Front
*
* ```
*/
Trigger: typeof Trigger;
/**
* Container for positioning content (typically a trigger button) at the bottom
* of either the front or back card side.
*
* @component
*
* @example
* ```tsx
*
* Back
*
* ```
*/
Footer: typeof Footer;
};
export { FlipCard };