its-just-ui/dist/components/Card/Card.d.ts

ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.

import { default as React } from 'react';
import { CardVariant, CardSize, CardStatus, CardTransition, CardMediaConfig, CardBadgeConfig, CardAction, RenderHeaderFunction, RenderMediaFunction, RenderBodyFunction, RenderFooterFunction, RenderOverlayFunction, RenderActionsFunction, RenderEmptyFunction, RenderLoadingFunction, ActionClickHandler } from './types';

export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDoubleClick'> {
    children?: React.ReactNode;
    isSelected?: boolean;
    defaultSelected?: boolean;
    onSelectChange?: (selected: boolean) => void;
    isExpanded?: boolean;
    defaultExpanded?: boolean;
    onExpandChange?: (expanded: boolean) => void;
    isLoading?: boolean;
    defaultLoading?: boolean;
    onLoadingChange?: (loading: boolean) => void;
    isDisabled?: boolean;
    defaultDisabled?: boolean;
    onDisabledChange?: (disabled: boolean) => void;
    isFeatured?: boolean;
    defaultFeatured?: boolean;
    onFeaturedChange?: (featured: boolean) => void;
    selectable?: boolean;
    expandable?: boolean;
    showCheckbox?: boolean;
    checkboxPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
    variant?: CardVariant;
    size?: CardSize;
    status?: CardStatus;
    transition?: CardTransition;
    transitionDuration?: number;
    hoverElevation?: boolean;
    title?: string;
    subtitle?: string;
    description?: string;
    metadata?: string;
    helperText?: string;
    media?: CardMediaConfig;
    badges?: CardBadgeConfig[];
    actions?: CardAction[];
    primaryAction?: CardAction;
    secondaryActions?: CardAction[];
    emptyMessage?: string;
    emptyIllustration?: React.ReactNode;
    emptyAction?: CardAction;
    loadingMessage?: string;
    skeletonLines?: number;
    renderHeader?: RenderHeaderFunction;
    renderMedia?: RenderMediaFunction;
    renderBody?: RenderBodyFunction;
    renderFooter?: RenderFooterFunction;
    renderOverlay?: RenderOverlayFunction;
    renderActions?: RenderActionsFunction;
    renderEmpty?: RenderEmptyFunction;
    renderLoading?: RenderLoadingFunction;
    expandIcon?: React.ReactNode;
    collapseIcon?: React.ReactNode;
    selectedIcon?: React.ReactNode;
    featuredIcon?: React.ReactNode;
    loadingIcon?: React.ReactNode;
    onClick?: () => void;
    onDoubleClick?: () => void;
    onMouseEnter?: () => void;
    onMouseLeave?: () => void;
    onFocus?: () => void;
    onBlur?: () => void;
    onActionClick?: ActionClickHandler;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    titleTextColor?: string;
    bodyTextColor?: string;
    metaTextColor?: string;
    placeholderColor?: string;
    backgroundColor?: string;
    hoverBackgroundColor?: string;
    selectedBackgroundColor?: string;
    disabledBackgroundColor?: string;
    featuredBackgroundColor?: string;
    overlayColor?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    boxShadow?: string;
    hoverBoxShadow?: string;
    focusBoxShadow?: string;
    featuredBoxShadow?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    headerPadding?: string;
    bodyPadding?: string;
    footerPadding?: string;
    actionGap?: string;
    mediaGap?: string;
    'aria-label'?: string;
    'aria-describedby'?: string;
    'aria-expanded'?: boolean;
    'aria-selected'?: boolean;
    role?: string;
}
declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
    title?: string;
    subtitle?: string;
    expandable?: boolean;
    expandIcon?: React.ReactNode;
    collapseIcon?: React.ReactNode;
    children?: React.ReactNode;
}
declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
export interface CardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
    type: 'image' | 'video' | 'audio' | 'iframe';
    src: string;
    alt?: string;
    aspectRatio?: string;
    objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
    loading?: 'eager' | 'lazy';
    poster?: string;
    controls?: boolean;
    autoplay?: boolean;
    muted?: boolean;
    loop?: boolean;
}
declare const CardMedia: React.ForwardRefExoticComponent<CardMediaProps & React.RefAttributes<HTMLDivElement>>;
export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
    description?: string;
    metadata?: string;
    children?: React.ReactNode;
}
declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
    actions?: CardAction[];
    primaryAction?: CardAction;
    secondaryActions?: CardAction[];
    helperText?: string;
    onActionClick?: ActionClickHandler;
    children?: React.ReactNode;
}
declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
export interface CardActionsProps {
    action: CardAction;
    onActionClick?: ActionClickHandler;
}
declare const CardActions: React.NamedExoticComponent<CardActionsProps>;
export type CardBadgeProps = CardBadgeConfig;
declare const CardBadge: React.NamedExoticComponent<CardBadgeConfig>;
export interface CardSelectCheckboxProps {
    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
    icon?: React.ReactNode;
}
declare const CardSelectCheckbox: React.NamedExoticComponent<CardSelectCheckboxProps>;
export interface CardOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
}
declare const CardOverlay: React.ForwardRefExoticComponent<CardOverlayProps & React.RefAttributes<HTMLDivElement>>;
export interface CardExpandablePanelProps extends React.HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
}
declare const CardExpandablePanel: React.ForwardRefExoticComponent<CardExpandablePanelProps & React.RefAttributes<HTMLDivElement>>;
export interface CardLoadingProps {
    message?: string;
    skeletonLines?: number;
    icon?: React.ReactNode;
}
declare const CardLoading: React.NamedExoticComponent<CardLoadingProps>;
export interface CardEmptyProps {
    message?: string;
    illustration?: React.ReactNode;
    action?: CardAction;
    onActionClick?: ActionClickHandler;
}
declare const CardEmpty: React.NamedExoticComponent<CardEmptyProps>;
export { Card, CardHeader, CardMedia, CardBody, CardFooter, CardActions, CardBadge, CardSelectCheckbox, CardOverlay, CardExpandablePanel, CardLoading, CardEmpty, };
interface CardComponent extends React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> {
    Header: typeof CardHeader;
    Media: typeof CardMedia;
    Body: typeof CardBody;
    Footer: typeof CardFooter;
    Actions: typeof CardActions;
    Badge: typeof CardBadge;
    SelectCheckbox: typeof CardSelectCheckbox;
    Overlay: typeof CardOverlay;
    ExpandablePanel: typeof CardExpandablePanel;
    Loading: typeof CardLoading;
    Empty: typeof CardEmpty;
}
declare const CardCompound: CardComponent;
export default CardCompound;