/**
 * AvatarData interface defines the structure for avatar data across the application.
 * This standardized format ensures consistent avatar representation.
 *
 * @property src - URL to the avatar image (optional)
 * @property color - Background color for initials fallback (optional, will be generated if not provided)
 * @property initials - Custom initials to display when no image is available (optional, will be generated from displayName)
 * @property displayName - Used for alt text and generating initials (required)
 */
export interface AvatarData {
    src?: string;
    color?: string;
    initials?: string;
    displayName: string;
}
/**
 * Recommended image dimensions: 256x256 pixels
 * Supported formats: JPG, PNG, WebP, SVG
 * Maximum file size: 5MB
 */
export interface AvatarProps {
    /**
     * URL to the avatar image
     */
    src?: string;
    /**
     * Alternative text for the avatar image, also used for generating initials if needed
     */
    alt?: string;
    /**
     * Background color for the avatar when no image is provided
     * Uses Tailwind CSS color classes (e.g., 'bg-blue-500')
     * If not provided, a color will be generated based on the alt text
     */
    color?: string;
    /**
     * Size of the avatar
     * - sm: 32px (2rem)
     * - md: 40px (2.5rem) - default
     * - lg: 48px (3rem)
     * - xl: 64px (4rem)
     */
    size?: 'sm' | 'md' | 'lg' | 'xl';
    /**
     * Custom initials to display when no image is available
     * If not provided, initials will be generated from the alt text
     */
    initials?: string;
    /**
     * Click handler for the avatar, e.g for editing or viewing profiles
     */
    onClick?: () => void;
}
/**
 * Avatar component displays a user or room avatar with fallback to initials
 *
 * TODO: Consider breaking this component into smaller subcomponents:
 * - AvatarImage: Handles image loading and error states
 * - AvatarInitials: Handles initials generation and display
 * - AvatarContainer: Handles sizing and common styling
 *
 * TODO:
 * - Status indicators (online/offline/away)
 * - Avatar groups/stacks for multiple users
 * - Upload functionality for editable avatars
 * - Image optimization and lazy loading
 *
 * @example
 * // Basic usage
 * <Avatar alt="John Doe" />
 *
 * @example
 * // With image
 * <Avatar src="https://example.com/avatar.jpg" alt="John Doe" />
 *
 * @example
 * // With custom color and size
 * <Avatar alt="John Doe" color="bg-purple-500" size="lg" />
 *
 * @example
 * // Using AvatarData object
 * const avatarData = { displayName: "John Doe", src: "https://example.com/avatar.jpg" };
 * <Avatar alt={avatarData.displayName} src={avatarData.src} color={avatarData.color} initials={avatarData.initials} />
 */
export declare const Avatar: ({ src, alt, color, size, initials, onClick }: AvatarProps) => import("react/jsx-runtime").JSX.Element;