import type { ReactNode, FC } from "react";
type AvatarColor = "primary" | "slate";
type AvatarSize = "large" | "medium" | "small" | "xsmall";
/**
 * Union to prevent both "initials" and "children" to be used at the same time.
 */
type BaseProps = {
    initials: string;
    children?: never;
} | {
    children: ReactNode;
    initials?: never;
};
type Props = {
    color?: AvatarColor;
    src?: string;
    /**
     * Put the name of the person here, so less sighted
     * users can know who the avatar belongs to.
     *
     * In case of rendering the default image or the
     * initials, this will also be used as the `alt` text.
     */
    alt?: string;
    size?: AvatarSize;
    /**
     * URL to an image to be used as the default image.
     * If this is set, the image provided via `src` will never render.
     */
    defaultImage?: string;
    className?: string;
    /**
     * Sometimes avatars are rendered in a group. Setting this to `true`
     * makes it so that the avatars overlap each other a bit, as designed.
     */
    applyGroupOffset?: boolean;
} & BaseProps;
/**
 * Displays a badge-style avatar. Keep in mind that
 * you can only use `initials` or `children`, not both.
 *
 * @example
 * // Using initials
 * <Avatar initials="JS" alt="John Smith" size="medium" color="primary" />
 *
 * @example
 * // Using children
 * <Avatar alt="Jane Doe" size="large" color="slate">
 *   <img src="https://example.com/jane-doe.jpg" alt="Jane Doe" />
 * </Avatar>
 */
export declare const Avatar: FC<Props>;
export {};