import { default as React, ReactElement } from 'react';

/**
 * Avatar component to display user profile pictures or initials.
 * It supports displaying an image, initials, or an icon with customizable colors and sizes.
 * @component
 * @param {Object} props - Component properties.
 * @param {string} [props.name] - The name of the user for initials.
 * @param {ReactElement} [props.icon] - An optional icon to display.
 * @param {string} [props.color] - Text color for initials or icon.
 * @param {string} [props.bgColor] - Background color of the avatar.
 * @param {("sm" | "md" | "lg" | "xl" | number)} [props.size] - Size of the avatar.
 * @param {string} [props.src] - Source URL for the avatar image.
 * @param {string} [props.alt] - Alt text for the avatar image.
 * @param {string} [props.id] - Optional ID for testing purposes.
 * @returns {JSX.Element} The Avatar component.
 * @example
 * <Avatar name="John Doe" />
 * <Avatar icon={<SomeIcon />} color="#fff" bgColor="#000" size="lg" />
 * <Avatar src="https://example.com/avatar.jpg" alt="User Avatar" />
 * <Avatar name="Jane Smith" size={50} />
 * <Avatar id="unique-avatar" />
 */
type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
    name?: string;
    icon?: ReactElement;
    color?: string;
    bgColor?: string;
    size?: "sm" | "md" | "lg" | "xl" | number;
    src?: string;
    alt?: string;
    id?: string;
};
declare const Avatar: React.FC<AvatarProps>;
export default Avatar;