@dossierhq/design
Version:
The design system for Dossier.
63 lines (62 loc) • 2.01 kB
TypeScript
import type { FunctionComponent, JSX, MouseEventHandler, ReactNode } from 'react';
import { type DropdownItem } from '../Dropdown/Dropdown.js';
import { type IconName } from '../Icon/Icon.js';
import { type TagProps } from '../Tag/Tag.js';
interface CardProps {
className?: string;
children: ReactNode;
}
interface CardHeaderProps {
noIcons?: boolean;
children?: ReactNode;
}
interface CardHeaderTitleProps {
children?: ReactNode;
}
interface CardHeaderTagProps {
children: TagProps['children'];
}
interface CardHeaderDropDownProps<TItem extends DropdownItem> {
items: TItem[];
renderItem: (item: TItem) => React.ReactNode;
onItemClick?: (item: TItem) => void;
}
interface CardHeaderIconButtonProps {
icon: IconName;
onClick?: MouseEventHandler<HTMLButtonElement>;
}
interface CardMediaProps {
children?: ReactNode;
}
interface CardContentProps {
style?: React.CSSProperties;
noPadding?: boolean;
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>;
HeaderTag: FunctionComponent<CardHeaderTagProps>;
HeaderDropdown: <TItem extends DropdownItem>(props: CardHeaderDropDownProps<TItem>, context?: unknown) => JSX.Element;
HeaderIconButton: FunctionComponent<CardHeaderIconButtonProps>;
Media: FunctionComponent<CardMediaProps>;
Content: FunctionComponent<CardContentProps>;
Footer: FunctionComponent<CardFooterProps>;
FooterButton: FunctionComponent<CardFooterButtonProps>;
FooterItem: FunctionComponent<CardFooterItemProps>;
}
export declare const Card2: CardComponent;
export {};