import { AvatarProps, AvatarWithStackProps } from './types';
/**
 * ============================================
 * AVATAR COMPONENT - ATOMIC DESIGN
 * ============================================
 *
 * Componente Avatar versátil que sigue principios de Atomic Design.
 * Actúa como un wrapper que delega la renderización a subcomponentes
 * especializados según el tipo de avatar.
 *
 * ## Tipos de Avatar
 *
 * ### 1. People Avatar (type: 'people')
 * Muestra una imagen de persona con manejo de errores y fallback automático al icono por defecto
 *
 * ### 2. Icon Avatar (type: 'icon')
 * Muestra un icono del sistema de iconos con temas de color
 *
 * ### 3. Letter Avatar (type: 'letter')
 * Muestra texto (iniciales, números, símbolos) con truncado automático
 *
 * ## Personalización
 *
 * Para modificar colores, tamaños, o agregar nuevos temas:
 * @see /constants/index.ts - Tokens de diseño centralizados
 * @see /types/index.ts - Tipos y props disponibles
 *
 * ## Ejemplos de Uso
 *
 * @example
 * // Avatar con imagen de persona
 * <Avatar
 *   type="people"
 *   src="https://example.com/avatar.jpg"
 *   size="md"
 * />
 *
 * @example
 * // Avatar con icono (default: UserOutlined)
 * <Avatar
 *   type="icon"
 *   theme="solid"
 *   color="blue"
 *   size="md"
 * />
 *
 * @example
 * // Avatar con iniciales
 * <Avatar
 *   type="letter"
 *   text="AB"
 *   theme="soft"
 *   color="green"
 *   size="lg"
 *   pill={false}
 * />
 *
 * @example
 * // Avatar con contador (estilo Teams)
 * <Avatar
 *   type="letter"
 *   text="99+"
 *   theme="solid"
 *   color="red"
 *   size="sm"
 * />
 *
 * @example
 * // Avatar con indicador
 * <Avatar
 *   type="letter"
 *   text="+5"
 *   theme="soft"
 *   color="azure"
 *   size="md"
 * />
 *
 * @example
 * // Avatar stack (avatares apilados)
 * // Nota: Si un avatar tiene `src`, automáticamente se usa type='people'
 * <Avatar
 *   stack={[
 *     { src: 'https://example.com/avatar1.jpg' }, // type='people' se infiere automáticamente
 *     { src: 'https://example.com/avatar2.jpg' }, // type='people' se infiere automáticamente
 *     { src: 'https://example.com/avatar3.jpg' }, // type='people' se infiere automáticamente
 *     { type: 'letter', text: 'A', theme: 'solid', color: 'blue' }
 *   ]}
 *   size="md"
 * />
 *
 * @example
 * // Avatar stack con límite máximo
 * <Avatar
 *   stack={[
 *     { src: 'https://example.com/avatar1.jpg' },
 *     { src: 'https://example.com/avatar2.jpg' },
 *     // ... 8 avatares más (total 10)
 *   ]}
 *   size="md"
 *   maxVisible={5} // Muestra 5 avatares + contador "+5"
 * />
 */
export declare const Avatar: (props: AvatarProps | AvatarWithStackProps) => import("react/jsx-runtime").JSX.Element | null;
/**
 * ============================================
 * TYPE EXPORTS
 * ============================================
 * Exportar tipos para uso externo en la aplicación
 */
export type { AvatarProps, AvatarSize, AvatarColor, AvatarTheme, AvatarType, PeopleAvatarProps, IconAvatarProps, LetterAvatarProps, AvatarWithStackProps, AvatarStatusProps, AvatarStatusType, AvatarStatusColor, AvatarStatusSize, } from './types';
//# sourceMappingURL=index.d.ts.map