fn_registry/frontend/functions/ui/avatar.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant
avatar	component	ts	ui	1.0.0	impure	Avatar(props: AvatarProps): JSX.Element	Imagen de usuario circular con fallback a iniciales generadas automaticamente. 5 tamaños via CVA.	avatar user image component ui cva	cn_ts_core			false		class-variance-authority	false			frontend/functions/ui/avatar.tsx	name type required description src string false URL de la imagen name type required description alt string false Texto alternativo de la imagen name type required description fallback string false Nombre completo del que extraer iniciales (ej: 'Juan Perez' -> 'JP') name type required description initials string false Iniciales explicitas para el fallback (sobrescribe fallback) name type required description size 'xs' | 'sm' | 'md' | 'lg' | 'xl' false Tamanio del avatar (default: md) name type required description className string false Clases CSS adicionales		true	react	xs sm md lg xl

Ejemplo

// Con imagen
<Avatar src="https://example.com/user.jpg" alt="Juan Perez" size="md" />

// Con fallback a iniciales
<Avatar fallback="Juan Perez" size="lg" />

// Iniciales explicitas
<Avatar initials="JD" size="sm" />

// Maneja error de imagen automaticamente
<Avatar src="/broken-url.jpg" fallback="Maria Garcia" />

Notas

Usa estado interno para manejar errores de carga de imagen (onError). La funcion getInitials extrae 2 iniciales del nombre completo (primera y ultima palabra). Si solo hay una palabra, toma los 2 primeros caracteres. Usa forwardRef para compatibilidad con wrappers.