rharuow-ds
Version:
Modern React Design System with 20 components and auto color system. Define only 2 colors (primary/secondary) and get automatic variations (hover, light, dark) with proper text contrast (WCAG AA). Includes: Table, Card, Button, Chip, Pagination, Input, Te
36 lines (35 loc) • 1.5 kB
TypeScript
import React from "react";
interface BaseCardProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
className?: string;
}
export interface CardHeaderProps extends BaseCardProps {
as?: 'div' | 'header';
}
export interface CardBodyProps extends BaseCardProps {
as?: 'div' | 'main' | 'section';
}
export interface CardFooterProps extends BaseCardProps {
as?: 'div' | 'footer';
}
export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
className?: string;
variant?: 'default' | 'outlined' | 'elevated' | 'flat' | 'primary' | 'secondary';
size?: 'sm' | 'md' | 'lg';
padding?: 'none' | 'sm' | 'md' | 'lg';
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
constrainWidth?: boolean;
allowOverflow?: boolean;
}
declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
type CardComponent = typeof Card & {
Header: typeof CardHeader;
Body: typeof CardBody;
Footer: typeof CardFooter;
};
declare const CompoundCard: CardComponent;
export { CompoundCard as Card, CardHeader, CardBody, CardFooter };