import { CSSProperties, ChangeEventHandler, MouseEvent, Ref } from 'react';
import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
import { SelectionCardDirection, SelectionCardImageObjectFit, SelectionCardType } from '@mezzanine-ui/core/selection-card';
import type { IconDefinition } from '@mezzanine-ui/icons';
export interface SelectionCardPropsBase extends Omit<NativeElementPropsWithoutKeyAndRef<'label'>, 'onChange'> {
    /**
     * Whether the selection is checked.
     */
    checked?: boolean;
    /**
     * Whether the selection is checked by default.
     * @default false
     */
    defaultChecked?: boolean;
    /**
     * The type of selection.
     * @default 'radio'
     */
    selector: SelectionCardType;
    /**
     * If true, selection will be disabled
     * @default false
     */
    disabled?: boolean;
    /**
     * The direction of selection.
     * @default 'horizontal'
     */
    direction?: SelectionCardDirection;
    /**
     * The image of selection. Supports image URL.
     */
    image?: string;
    /**
     * The object fit of selection image.
     * @default 'cover'
     */
    imageObjectFit?: SelectionCardImageObjectFit;
    /**
     * The custom icon of selection.
     */
    customIcon?: IconDefinition;
    /**
     * The name of selection.
     *
     * @important When using with react-hook-form or inside a RadioGroup/CheckboxGroup, this prop is recommended.
     */
    name?: string;
    /**
     * The id of the input element.
     */
    id?: string;
    /**
     * The accessible text of selection.
     */
    text: string;
    /**
     * The max width of the text element.
     * @example '112px' // 8 Chinese characters at 14px
     * @example '168px' // 24 English letters at 14px
     */
    textMaxWidth?: CSSProperties['maxWidth'];
    /**
     * The accessible description of selection.
     */
    supportingText?: string;
    /**
     * The max width of the supporting text element.
     * @example '144px' // 12 Chinese characters at 12px
     * @example '216px' // 36 English letters at 12px
     */
    supportingTextMaxWidth?: CSSProperties['maxWidth'];
    /**
     * Whether the selection is readonly.
     * @default false
     */
    readonly?: boolean;
    /**
     * The value of selection.
     *
     * @important This prop is required when selection is inside a RadioGroup/CheckboxGroup.
     * It is also recommended when integrating with react-hook-form.
     */
    value?: string;
    /**
     * The react ref passed to input element.
     *
     * @important When using with react-hook-form's `register`, pass the ref through this prop:
     * ```tsx
     * const { register } = useForm();
     * <SelectionCard inputRef={register('fieldName').ref} name="fieldName" />
     * ```
     */
    inputRef?: Ref<HTMLInputElement>;
    /**
     * Invoked by input change event.
     */
    onChange?: ChangeEventHandler<HTMLInputElement>;
}
export interface SelectionCardProps extends SelectionCardPropsBase {
    /**
     * Callback when the selection is clicked.
     */
    onClick?: (event: MouseEvent<HTMLLabelElement>) => void;
}
/**
 * The react component for `mezzanine` selection card.
 */
declare const SelectionCard: import("react").ForwardRefExoticComponent<SelectionCardProps & import("react").RefAttributes<HTMLLabelElement>>;
export default SelectionCard;