import { SyntheticEvent } from 'react';
import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion';
import type { AsElementType, AvatarTheme, OtherHTMLAttributes, PropValidators } from '@instructure/shared-types';
import { Renderable } from '@instructure/shared-types';
type AvatarOwnProps = {
    /**
     * The name to display. It will be automatically converted to initials.
     */
    name: string;
    /**
     * URL of the image to display as the background image
     */
    src?: string;
    /**
     * Accessible label
     */
    alt?: string;
    size?: 'auto' | 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
    color?: 'default' | 'shamrock' | 'barney' | 'crimson' | 'fire' | 'licorice' | 'ash' | 'ai';
    /**
     * In inverse color mode the background and text/icon colors are inverted
     */
    hasInverseColor?: boolean;
    /**
     * `auto` only shows a border when there is no source image. This prop can force to always or never show that border.
     */
    showBorder?: 'auto' | 'always' | 'never';
    shape?: 'circle' | 'rectangle';
    display?: 'inline-block' | 'block';
    /**
     * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
     * familiar CSS-like shorthand. For example: `margin="small auto large"`.
     */
    margin?: Spacing;
    /**
     * Callback fired when the avatar image has loaded.
     * `event` can be `undefined`, if its already loaded when the page renders
     * (can happen in SSR)
     */
    onImageLoaded?: (event?: SyntheticEvent) => void;
    /**
     * The element type to render as
     */
    as?: AsElementType;
    /**
     * provides a reference to the underlying html root element
     */
    elementRef?: (element: Element | null) => void;
    /**
     * An icon, or function that returns an icon that gets displayed. If the `src` prop is provided, `src` will have priority.
     */
    renderIcon?: Renderable;
};
export type AvatarState = {
    loaded: boolean;
};
type PropKeys = keyof AvatarOwnProps;
type AllowedPropKeys = Readonly<Array<PropKeys>>;
type AvatarProps = AvatarOwnProps & WithStyleProps<AvatarTheme, AvatarStyle> & OtherHTMLAttributes<AvatarOwnProps>;
type AvatarStyle = ComponentStyle<'avatar' | 'initials' | 'loadImage' | 'iconSVG'>;
declare const propTypes: PropValidators<PropKeys>;
declare const allowedProps: AllowedPropKeys;
export type { AvatarProps, AvatarStyle };
export { propTypes, allowedProps };
//# sourceMappingURL=props.d.ts.map