@dossierhq/design/lib/components/Card/Card.d.ts

The design system for Dossier.

import type { FunctionComponent, JSX, MouseEventHandler, ReactNode } from 'react';
import { type DropdownItem } from '../Dropdown/Dropdown.js';
import { type IconName } from '../Icon/Icon.js';
interface CardProps {
    children: ReactNode;
}
interface CardHeaderProps {
    children?: ReactNode;
}
interface CardHeaderTitleProps {
    children?: ReactNode;
}
interface CardHeaderDropDownProps<TItem extends DropdownItem> {
    items: TItem[];
    renderItem: (item: TItem) => React.ReactNode;
    onItemClick?: (item: TItem) => void;
}
interface CardHeaderIconButtonProps {
    icon: IconName;
    onClick?: MouseEventHandler<HTMLButtonElement>;
}
interface CardContentProps {
    children?: ReactNode;
}
interface CardFooterProps {
    children?: ReactNode;
}
interface CardFooterItemProps {
    children?: ReactNode;
}
interface CardFooterButtonProps {
    value?: string;
    disabled?: boolean;
    children?: ReactNode;
    onClick?: MouseEventHandler<HTMLButtonElement>;
}
/** @public */
export interface CardComponent extends FunctionComponent<CardProps> {
    Header: FunctionComponent<CardHeaderProps>;
    HeaderTitle: FunctionComponent<CardHeaderTitleProps>;
    HeaderDropdown: <TItem extends DropdownItem>(props: CardHeaderDropDownProps<TItem>, context?: unknown) => JSX.Element;
    HeaderIconButton: FunctionComponent<CardHeaderIconButtonProps>;
    Content: FunctionComponent<CardContentProps>;
    Footer: FunctionComponent<CardFooterProps>;
    FooterButton: FunctionComponent<CardFooterButtonProps>;
    FooterItem: FunctionComponent<CardFooterItemProps>;
}
export declare const Card: CardComponent;
export {};