import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';

/**
 * A card provides scaffolding for hosting actions and content for a single topic.
 */
export declare const Card: ForwardRefComponent<CardProps>;

/**
 * Static CSS class names used internally for the component slots.
 */
export declare const cardClassNames: SlotClassNames<CardSlots>;

/**
 * Data shared between card components
 */
export declare interface CardContextValue {
    selectableA11yProps: {
        referenceId?: string;
        setReferenceId: (referenceId: string) => void;
        referenceLabel?: string;
        setReferenceLabel: (referenceLabel: string) => void;
    };
}

/**
 * CSS variable names used internally for uniform styling in Card.
 */
export declare const cardCSSVars: {
    cardSizeVar: string;
    cardBorderRadiusVar: string;
};

/**
 * Component to render Button actions in a Card component.
 */
export declare const CardFooter: ForwardRefComponent<CardFooterProps>;

/**
 * Static CSS class names used internally for the component slots.
 */
export declare const cardFooterClassNames: SlotClassNames<CardFooterSlots>;

/**
 * CardFooter component props.
 */
export declare type CardFooterProps = ComponentProps<CardFooterSlots>;

/**
 * Slots available in the CardFooter component.
 */
export declare type CardFooterSlots = {
    /**
     * Root element of the component.
     */
    root: Slot<'div'>;
    /**
     * Container that renders on the far end of the footer, used for action buttons.
     */
    action?: Slot<'div'>;
};

/**
 * State used in rendering CardFooter.
 */
export declare type CardFooterState = ComponentState<CardFooterSlots>;

/**
 * Component to render an image, text and an action in a Card component.
 */
export declare const CardHeader: ForwardRefComponent<CardHeaderProps>;

/**
 * Static CSS class names used internally for the component slots.
 */
export declare const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;

/**
 * CSS variable names used internally for uniform styling in CardHeader.
 */
export declare const cardHeaderCSSVars: {
    cardHeaderGapVar: string;
};

/**
 * CardHeader component props.
 */
export declare type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;

/**
 * Slots available in the CardHeader component.
 */
export declare type CardHeaderSlots = {
    /**
     * Root element of the component.
     */
    root: Slot<'div'>;
    /**
     * Element used to render an image or avatar related to the card.
     */
    image: Slot<'div', 'img'>;
    /**
     * Element used to render the main header title.
     */
    header: Slot<'div'>;
    /**
     * Element used to render short descriptions related to the title.
     */
    description: Slot<'div'>;
    /**
     * Container that renders on the far end of the footer, used for action buttons.
     */
    action?: Slot<'div'>;
};

/**
 * State used in rendering CardHeader.
 */
export declare type CardHeaderState = ComponentState<CardHeaderSlots>;

/**
 * Data sent from the selection events on a selectable card.
 */
declare type CardOnSelectData = {
    selected: boolean;
};

/**
 * Card selected event type
 *
 * This event is fired when a selectable card changes its selection state.
 */
export declare type CardOnSelectionChangeEvent = React_2.MouseEvent | React_2.KeyboardEvent | React_2.ChangeEvent;

/**
 * Component to render image previews of documents or articles in a Card component.
 */
export declare const CardPreview: ForwardRefComponent<CardPreviewProps>;

/**
 * Static CSS class names used internally for the component slots.
 */
export declare const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;

/**
 * CardPreview component props.
 */
export declare type CardPreviewProps = ComponentProps<CardPreviewSlots>;

/**
 * Slots available in the Card component.
 */
export declare type CardPreviewSlots = {
    /**
     * Root element of the component.
     */
    root: Slot<'div'>;
    /**
     * Container that holds a logo related to the image preview provided.
     */
    logo?: Slot<'div', 'img'>;
};

/**
 * State used in rendering CardPreview.
 */
export declare type CardPreviewState = ComponentState<CardPreviewSlots>;

/**
 * Card component props.
 */
export declare type CardProps = ComponentProps<CardSlots> & {
    /**
     * Sets the appearance of the card.
     *
     * `filled`
     * The card will have a shadow, border and background color.
     *
     * `filled-alternative`
     * This appearance is similar to `filled`, but the background color will be a little darker.
     *
     * `outline`
     * This appearance is similar to `filled`, but the background color will be transparent and no shadow applied.
     *
     * `subtle`
     * This appearance is similar to `filled-alternative`, but no border is applied.
     *
     * @default 'filled'
     */
    appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
    /**
     * Sets the focus behavior for the card.
     *
     * `off`
     * The card will not focusable.
     *
     * `no-tab`
     * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when
     * pressing the Escape key.
     *
     * `tab-exit`
     * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing
     * the Tab key on the last inner element.
     *
     * `tab-only`
     * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus
     * after the last inner element.
     *
     * @default 'off'
     */
    focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';
    /**
     * Defines the orientation of the card.
     *
     * @default 'vertical'
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * Controls the card's border radius and padding between inner elements.
     *
     * @default 'medium'
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * Defines the controlled selected state of the card.
     *
     * @default false
     */
    selected?: boolean;
    /**
     * Defines whether the card is initially in a selected state when rendered.
     *
     * @default false
     */
    defaultSelected?: boolean;
    /**
     * Callback to be called when the selected state value changes.
     */
    onSelectionChange?: (event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void;
};

/**
 * @internal
 */
export declare const CardProvider: React_2.Provider<CardContextValue | undefined>;

/**
 * Slots available in the Card component.
 */
export declare type CardSlots = {
    /**
     * Root element of the component.
     */
    root: Slot<'div'>;
    /**
     * Floating action that can be rendered on the top-right of a card. Often used together with
     * `selected`, `defaultSelected`, and `onSelectionChange` props
     */
    floatingAction?: Slot<'div'>;
    /**
     * The internal checkbox element that renders when the card is selectable.
     */
    checkbox?: Slot<'input'>;
};

/**
 * State used in rendering Card.
 */
export declare type CardState = ComponentState<CardSlots> & CardContextValue & Required<Pick<CardProps, 'appearance' | 'orientation' | 'size'> & {
    /**
     * Represents a card that contains interactive events (MouseEvents) or is a button/a tag.
     *
     * @default false
     */
    interactive: boolean;
    /**
     * Represents a selectable card.
     *
     * @default false
     */
    selectable: boolean;
    /**
     * Defines whether the card is currently selected.
     *
     * @default false
     */
    selected: boolean;
    /**
     * Defines whether the card internal checkbox is currently focused.
     *
     * @default false
     */
    selectFocused: boolean;
}>;

/**
 * Render the final JSX of Card.
 */
export declare const renderCard_unstable: (state: CardState, cardContextValue: CardContextValue) => JSX.Element;

/**
 * Render the final JSX of CardFooter.
 */
export declare const renderCardFooter_unstable: (state: CardFooterState) => JSX.Element;

/**
 * Render the final JSX of CardHeader.
 */
export declare const renderCardHeader_unstable: (state: CardHeaderState) => JSX.Element;

/**
 * Render the final JSX of CardPreview.
 */
export declare const renderCardPreview_unstable: (state: CardPreviewState) => JSX.Element;

/**
 * Create the state required to render Card.
 *
 * The returned state can be modified with hooks such as useCardStyles_unstable,
 * before being passed to renderCard_unstable.
 *
 * @param props - props from this instance of Card
 * @param ref - reference to the root element of Card
 */
export declare const useCard_unstable: (props: CardProps, ref: React_2.Ref<HTMLDivElement>) => CardState;

/**
 * @internal
 */
export declare const useCardContext_unstable: () => CardContextValue;

/**
 * Create the state required to render CardFooter.
 *
 * The returned state can be modified with hooks such as useCardFooterStyles_unstable,
 * before being passed to renderCardFooter_unstable.
 *
 * @param props - props from this instance of CardFooter
 * @param ref - reference to root HTMLElement of CardFooter
 */
export declare const useCardFooter_unstable: (props: CardFooterProps, ref: React_2.Ref<HTMLElement>) => CardFooterState;

/**
 * Apply styling to the CardFooter slots based on the state.
 */
export declare const useCardFooterStyles_unstable: (state: CardFooterState) => CardFooterState;

/**
 * Create the state required to render CardHeader.
 *
 * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,
 * before being passed to renderCardHeader_unstable.
 *
 * @param props - props from this instance of CardHeader
 * @param ref - reference to root HTMLElement of CardHeader
 */
export declare const useCardHeader_unstable: (props: CardHeaderProps, ref: React_2.Ref<HTMLElement>) => CardHeaderState;

/**
 * Apply styling to the CardHeader slots based on the state.
 */
export declare const useCardHeaderStyles_unstable: (state: CardHeaderState) => CardHeaderState;

/**
 * Create the state required to render CardPreview.
 *
 * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,
 * before being passed to renderCardPreview_unstable.
 *
 * @param props - props from this instance of CardPreview
 * @param ref - reference to root HTMLElement of CardPreview
 */
export declare const useCardPreview_unstable: (props: CardPreviewProps, ref: React_2.Ref<HTMLElement>) => CardPreviewState;

/**
 * Apply styling to the CardPreview slots based on the state.
 */
export declare const useCardPreviewStyles_unstable: (state: CardPreviewState) => CardPreviewState;

/**
 * Apply styling to the Card slots based on the state.
 */
export declare const useCardStyles_unstable: (state: CardState) => CardState;

export { }