Files
fn_registry/frontend/functions/ui/avatar.md
T
egutierrez 5f4f1f7508 docs: params/output semántico en 506 funciones para composabilidad
Añade campos params y output al frontmatter YAML de las 506 funciones del registry.
Cada parámetro tiene descripción semántica (qué representa, unidades, rango típico)
y cada función describe qué produce su output. Permite a agentes razonar sobre
cadenas de composición (ej: prices → log_return → sharpe_ratio) sin leer código.
2026-04-05 18:45:16 +02:00

2.0 KiB

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, 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 output 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
Componente Avatar que renderiza imagen de usuario circular con fallback a iniciales generadas 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.