import type { HTMLAttributes, ReactNode } from 'react';
import React from 'react';
import type { Size } from '../../util/variant-types';
import { type IconName } from '../Icon';
export type CardProps = HTMLAttributes<HTMLElement> & {
    /**
     * Child node(s) that can be nested inside component
     */
    children?: ReactNode;
    /**
     * CSS class names that can be appended to the component.
     */
    className?: string;
    /**
     * CSS properties defined for the HTML element. Includes the component's CSS Custom Properties:
     *
     * - `--card__top-stripe-bg`
     */
    style?: CardCSSProperties;
    /**
     * When `isInteractive` and has a behavior set, name is used as the name of the hidden form field.
     */
    name?: string;
    /**
     * When `isInteractive`, describes the behavior of the card when selected. Single (radio) or multiple (checkbox) selection.
     */
    behavior?: 'checkbox' | 'radio';
    /**
     * Treatment for the card's container element. When using `"custom-brand"`, set the
     * container background and border color using the brand border/bg utility classes.
     *
     * **Default is `"default"`**.
     */
    containerColor?: 'default' | 'call-out' | 'custom-brand';
    /**
     * The bounding box and other container emphasis details
     *
     * **Default is `"low"`**.
     */
    containerStyle?: 'none' | 'low' | 'high';
    /**
     * State to trigger when the card is being dragged. Can be combined with the HTML `draggable` property,
     * or used programmatically with drag and drop libraries
     */
    isDragging?: boolean;
    /**
     * Whether `Card` itself is directly interactive (clicking will perform some navigation or action)
     *
     * **Default is `false`**.
     */
    isInteractive?: boolean;
    /**
     * Decorative top bar used to cause a highlight on a given card. When present, this
     * corresponds to a specified emphasis level.
     *
     * **Default is `"none"`**.
     */
    topStripe?: 'none' | 'medium' | 'high';
};
export type CardSubComponentProps = {
    /**
     * Child node(s) that can be nested inside component
     */
    children: ReactNode;
    /**
     * CSS class names that can be appended to the component.
     */
    className?: string;
};
export type CardHeaderProps = {
    /**
     * Child node(s) that can be nested inside component. Used in place of any of the above named slots.
     */
    children?: ReactNode;
    /**
     * CSS class names that can be appended to the component.
     */
    className?: string;
    /**
     * Component slot to add in an action-focused area to a card. Typically a button with hidden options.
     */
    action?: ReactNode;
    /**
     * Text above the main title of the card, to add category text/information.
     */
    eyebrow?: string;
    /**
     * Card slot for an icon sitting in front of the card header text
     */
    icon?: IconName;
    /**
     * Overall size treatment of the Card header
     */
    size?: Extract<Size, 'sm' | 'md'>;
    /**
     * Secondary text used to describe the content in more detail
     */
    subTitle?: ReactNode;
    /**
     * The title/heading of the component
     */
    title?: string;
};
export interface CardCSSProperties extends React.CSSProperties {
    '--card__top-stripe-bg'?: string;
}
/**
 * `import {Card} from "@chanzuckerberg/eds";`
 *
 * Card component is the outer wrapper for the block that typically contains a title, image,
 * text, and/or calls to action.
 */
export declare const Card: {
    ({ containerColor, behavior, className, children, containerStyle, isDragging, isInteractive, name, topStripe, ...other }: CardProps): React.JSX.Element;
    displayName: string;
    Body: {
        ({ children, className, ...other }: CardSubComponentProps): React.JSX.Element;
        displayName: string;
    };
    Footer: {
        ({ children, className, ...other }: CardSubComponentProps): React.JSX.Element;
        displayName: string;
    };
    Header: {
        ({ action, children, className, eyebrow, icon, size, subTitle, title, ...other }: CardHeaderProps): React.JSX.Element;
        displayName: string;
    };
};