import React from 'react';
import { PropsWithMetadata } from '@highlight-ui/utils-commons';
import { HeadingVariant, TokenisedTypographyProps } from '@highlight-ui/typography';
export declare type AvatarRef = React.Ref<HTMLAnchorElement | HTMLDivElement>;
export declare type AvatarProps = Omit<React.ComponentPropsWithoutRef<'a'>, 'className' | 'href' | 'children'> & PropsWithMetadata<{
    /** If true, then Avatar will be animated on mouse hover */
    animate?: boolean;
    /** A CSS class applied on component container */
    containerClassname?: string;
    /** A CSS class to be applied on the image element */
    imageClassname?: string;
    /** Name of the Avatar. If the image is not available, use first letters of the name  */
    name?: string;
    /** The `width` and `height` attributes for the container element */
    avatarSize?: number;
    /** The `size` attribute for the `Icon` element */
    iconSize?: number;
    /**
     * @deprecated This prop has been replaced by `headingVariant` and will be removed in an upcoming release.
     * The `fontSize` attribute for the `Typography` element
     */
    typographyFontSize?: TokenisedTypographyProps['fontSize'];
    /** The `variant` attribute for the `Heading` element */
    headingVariant?: HeadingVariant;
    /** Image source for the Avatar */
    src?: string;
    /** Url to go to on click */
    url?: string;
    /** Alternative text for an image element */
    imageAltText?: string;
    /** Optional property to indicate how the browser should load images on img tags */
    imageLoading?: React.ImgHTMLAttributes<HTMLImageElement>['loading'];
    /** A function can be passed as a child node. This function will receive an image of the Avatar.
     * Thus, you can render that image and any additional visuals, like status.
     */
    children?: (fn: () => JSX.Element) => JSX.Element;
}>;
declare const Avatar: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "href" | "className" | "children"> & {
    /** If true, then Avatar will be animated on mouse hover */
    animate?: boolean | undefined;
    /** A CSS class applied on component container */
    containerClassname?: string | undefined;
    /** A CSS class to be applied on the image element */
    imageClassname?: string | undefined;
    /** Name of the Avatar. If the image is not available, use first letters of the name  */
    name?: string | undefined;
    /** The `width` and `height` attributes for the container element */
    avatarSize?: number | undefined;
    /** The `size` attribute for the `Icon` element */
    iconSize?: number | undefined;
    /**
     * @deprecated This prop has been replaced by `headingVariant` and will be removed in an upcoming release.
     * The `fontSize` attribute for the `Typography` element
     */
    typographyFontSize?: TokenisedTypographyProps['fontSize'];
    /** The `variant` attribute for the `Heading` element */
    headingVariant?: HeadingVariant | undefined;
    /** Image source for the Avatar */
    src?: string | undefined;
    /** Url to go to on click */
    url?: string | undefined;
    /** Alternative text for an image element */
    imageAltText?: string | undefined;
    /** Optional property to indicate how the browser should load images on img tags */
    imageLoading?: React.ImgHTMLAttributes<HTMLImageElement>['loading'];
    /** A function can be passed as a child node. This function will receive an image of the Avatar.
     * Thus, you can render that image and any additional visuals, like status.
     */
    children?: ((fn: () => JSX.Element) => JSX.Element) | undefined;
} & {
    metadata?: import("@highlight-ui/utils-commons").ComponentMetadata | undefined;
} & React.RefAttributes<HTMLAnchorElement & HTMLDivElement>>;
export default Avatar;