import { TNode, Value } from '@tempots/dom';
import { ThemeColorName } from '../../tokens';
/**
 * Size options for Avatar components.
 * Ranges from `'xs'` (24px) to `'2xl'` (96px).
 */
export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
/**
 * Configuration options for the {@link Avatar} component.
 */
export interface AvatarOptions {
    /** Image URL for the avatar. @default undefined */
    src?: Value<string | undefined>;
    /** Name for generating initials fallback. @default undefined */
    name?: Value<string | undefined>;
    /** Icon name (Iconify format) as a fallback. @default undefined */
    icon?: Value<string | undefined>;
    /** Size of the avatar. @default 'md' */
    size?: Value<AvatarSize>;
    /** Shape variant: circle or square. @default 'circle' */
    variant?: Value<'circle' | 'square'>;
    /** Theme color for the avatar background. @default 'base' */
    color?: Value<ThemeColorName>;
    /** Whether to add a border around the avatar. @default false */
    bordered?: Value<boolean>;
    /** Theme color for the avatar border. Implies bordered when set. */
    borderColor?: Value<ThemeColorName>;
}
/**
 * Renders a user avatar with image, initials, or icon fallback.
 *
 * The Avatar component displays user profile images with graceful fallbacks:
 * 1. Image from `src` prop (if provided and loads successfully)
 * 2. Initials derived from `name` prop (if image fails or is not provided)
 * 3. Icon from `icon` prop (if provided and no name is available)
 * 4. Default user icon (if all else fails)
 *
 * Supports multiple sizes, shapes (circle or square), theme colors, and optional borders.
 * The component automatically applies the appropriate background color and text color
 * based on the theme color and appearance mode.
 *
 * @param options - Configuration for image, name, icon, size, shape, color, and border
 * @param children - Additional child nodes appended to the avatar container
 * @returns A div element containing the rendered avatar
 *
 * @example
 * ```typescript
 * // Avatar with image
 * Avatar({ src: 'https://example.com/avatar.jpg', name: 'John Doe', size: 'lg' })
 * ```
 *
 * @example
 * ```typescript
 * // Avatar with initials fallback
 * Avatar({ name: 'Jane Smith', color: 'primary', variant: 'square' })
 * ```
 *
 * @example
 * ```typescript
 * // Avatar with icon fallback
 * Avatar({ icon: 'mdi:account', size: 'xl', bordered: true })
 * ```
 */
export declare function Avatar({ src, name, icon, size, variant, color, bordered, borderColor, }: AvatarOptions, ...children: TNode[]): import("@tempots/dom").Renderable;