import { Accessibility, CardBehaviorProps } from '@fluentui/accessibility';
import { ComponentWithAs } from '@fluentui/react-bindings';
import * as React from 'react';
import { ComponentEventHandler, FluentComponentStaticProps } from '../../types';
import { SizeValue, UIComponentProps } from '../../utils';
import { CardBody } from './CardBody';
import { CardColumn } from './CardColumn';
import { CardFooter } from './CardFooter';
import { CardHeader } from './CardHeader';
import { CardPreview } from './CardPreview';
import { CardExpandableBox } from './CardExpandableBox';
export interface CardProps extends UIComponentProps {
    /**
     * Accessibility behavior if overridden by the user.
     */
    accessibility?: Accessibility<CardBehaviorProps>;
    /** A primary content. */
    children?: React.ReactNode;
    /**
     * Called on click.
     *
     * @param event - React's original SyntheticEvent.
     * @param data - All props.
     */
    onClick?: ComponentEventHandler<CardProps>;
    /** A card can be compact, without any padding inside. */
    compact?: boolean;
    /** A card will used horizontal layout. */
    horizontal?: boolean;
    /** Centers content in a card. */
    centered?: boolean;
    /** A card can be sized. */
    size?: SizeValue;
    /** A card can take up the width and height of its container. */
    fluid?: boolean;
    /** A card can show that it cannot be interacted with. */
    disabled?: boolean;
    /** A card can be hiding part of the content and expand on hover/focus. */
    expandable?: boolean;
    /** A card can have elevation styles. */
    elevated?: boolean;
    /** A card can have inverted background styles. */
    inverted?: boolean;
    /** A card can have quiet styles. */
    quiet?: boolean;
    /** A card can show that it is currently selected or not. */
    selected?: boolean;
}
export declare type CardStylesProps = Pick<CardProps, 'compact' | 'horizontal' | 'centered' | 'size' | 'fluid' | 'disabled' | 'expandable' | 'elevated' | 'inverted' | 'quiet' | 'selected'> & {
    actionable: boolean;
};
export declare const cardClassName = "ui-card";
/**
 * A Card is used to display data in sematically grouped way.
 * * @accessibility
 * By default adds `group` role ([more information available in aria documentation](https://www.w3.org/TR/wai-aria-1.1/#group)), thus it's necessary to provide `aria-roledescription` for correct widget description. [More information available in aria documentation.](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription-property)
 * When card is actionable (i.e. has `onClick` property), use [cardFocusableBehavior](/components/card/accessibility#card-focusable). [More information available in aria documentation.](https://www.w3.org/TR/wai-aria-practices/#gridNav_focus)
 * When card contains actionable elements, use [cardChildrenFocusableBehavior](/components/card/accessibility#card-children-focusable).
 *
 */
export declare const Card: ComponentWithAs<'div', CardProps> & FluentComponentStaticProps<CardProps> & {
    Header: typeof CardHeader;
    Body: typeof CardBody;
    Footer: typeof CardFooter;
    Preview: typeof CardPreview;
    TopControls: typeof CardPreview;
    Column: typeof CardColumn;
    ExpandableBox: typeof CardExpandableBox;
};