@buun_group/brutalist-ui
Version:
A brutalist-styled component library
87 lines (86 loc) • 2.62 kB
TypeScript
/**
* @module Card
* @description A versatile card component for displaying content in a contained format. Supports multiple variants, compound components, and interactive states with brutalist design aesthetics.
*/
import { HTMLAttributes } from 'react';
/**
* Props for the Card component
*/
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
/**
* Visual variant of the card
* @default 'elevated'
*/
variant?: 'elevated' | 'flat' | 'outline';
/**
* Padding size for the card content
* @default 'md'
*/
padding?: 'none' | 'sm' | 'md' | 'lg';
/**
* Whether the card is clickable/interactive
* @default false
*/
clickable?: boolean;
/**
* Whether to show hover effects when not clickable
* @default true
*/
hover?: boolean;
}
/**
* Props for the Card.Header component
*/
export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
}
/**
* Props for the Card.Body component
*/
export interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
}
/**
* Props for the Card.Footer component
*/
export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
}
/**
* A container component for grouping related content and actions.
* Supports compound components for flexible layouts.
*
* @example
* ```tsx
* <Card variant="elevated" padding="lg">
* <Card.Header>
* <h3>Card Title</h3>
* </Card.Header>
* <Card.Body>
* <p>Card content goes here</p>
* </Card.Body>
* <Card.Footer>
* <Button>Action</Button>
* </Card.Footer>
* </Card>
* ```
*/
declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
/**
* Header section of the Card component.
* Typically contains the title and optional actions.
*/
declare const CardHeader: import("react").ForwardRefExoticComponent<CardHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
/**
* Main content area of the Card component.
* Contains the primary content of the card.
*/
declare const CardBody: import("react").ForwardRefExoticComponent<CardBodyProps & import("react").RefAttributes<HTMLDivElement>>;
/**
* Footer section of the Card component.
* Typically contains actions or additional information.
*/
declare const CardFooter: import("react").ForwardRefExoticComponent<CardFooterProps & import("react").RefAttributes<HTMLDivElement>>;
declare const CardComponent: typeof Card & {
Header: typeof CardHeader;
Body: typeof CardBody;
Footer: typeof CardFooter;
};
export { CardComponent as Card };