Generador de componentes de avatar.

Crea un componente <Avatar /> reutilizable en React con Tailwind CSS. Patrón: avatar básico con imagen y fallback de iniciales. Diseño: avatar circular que renderiza un <img> cuando src carga; ante un error o si falta src, renderiza un fallback de iniciales generado con un color de fondo determinista derivado de la cadena del nombre. API: props para src, name (obligatorio, usado para el texto alt y las iniciales), size ("xs" | "sm" | "md" | "lg" | "xl") y className pasado al elemento. Incluye: texto alt obligatorio a partir de name, loading="lazy", cambio al fallback con onError mediante estado local, anillo focus-visible cuando se renderiza dentro de un enlace o un botón, y soporte de tema claro y oscuro con clases dark: de Tailwind. Restricciones: solo React + Tailwind, sin dependencias externas de UI ni de imágenes, sin salto de diseño mientras carga la imagen (reserva la caja con width/height fijos).

Crea un componente <AvatarWithStatus /> en React con Tailwind CSS. Patrón: avatar con indicador de presencia. Diseño: avatar circular con un pequeño punto de estado fijado abajo a la derecha, separado de la foto por un anillo del color del fondo para que se lea sobre cualquier superficie. API: props para src, name, size y status ("online" | "away" | "busy" | "offline"), con el color del punto asignado según el estado y el punto escalando con el tamaño del avatar. Incluye: fallback de iniciales, una etiqueta de texto visualmente oculta que anuncie el estado a los lectores de pantalla (no dependas solo del color), aria-label en el contenedor y soporte de tema claro y oscuro. Restricciones: solo React + Tailwind, sin dependencias externas de UI, el punto nunca solapa más del 30% del borde del avatar.

Crea un componente <AvatarGroup /> en React con Tailwind CSS. Patrón: grupo de avatares apilados (solapados) con contador de desborde. Diseño: fila horizontal de avatares solapados aproximadamente un tercio, cada uno con un anillo del color del fondo para que la pila siga siendo legible; superado el número máximo de avatares visibles, renderiza una etiqueta contador "+N" con el mismo tamaño y forma. API: props para users (array de { src, name }), max (por defecto 4), size y un onAddClick opcional que renderiza un elemento "Invitar" con borde discontinuo al final de la fila. Comportamiento: al pasar el cursor, el avatar activo se eleva por encima de sus vecinos con un pequeño desplazamiento y un cambio de z-index; la pila invierte la dirección del solape con una prop "dir". Incluye: fallback de iniciales en cada avatar, aria-label que resuma el número total de miembros, elementos enfocables por teclado con anillos focus-visible y soporte de tema claro y oscuro. Restricciones: solo React + Tailwind, sin dependencias externas de UI, sin librerías de animación.

Crea un componente <Avatar /> tematizable en React con una escala completa de tamaños y formas, usando Tailwind CSS. Patrón: primitiva de avatar para un sistema de diseño. API: size ("xs" | "sm" | "md" | "lg" | "xl" | "2xl") mapeado a través de un único objeto de consulta que controla a la vez el ancho, la altura, el tamaño de fuente y el border-radius; shape ("circle" | "squircle" | "square"); además de src, name y className. Requisito: el tamaño de fuente de las iniciales escala de forma proporcional a la caja del avatar para que tanto xs como 2xl queden equilibrados; todos los tokens viven en un único objeto de configuración al principio del archivo, de modo que un equipo pueda retematizar en un solo lugar. Incluye: fallback de iniciales, texto alt a partir de name, forwardRef al elemento raíz, tipos de props de TypeScript exportados y soporte de tema claro y oscuro. Restricciones: solo React + Tailwind, sin dependencias externas de UI, sin estilos inline salvo los tamaños en píxeles calculados.

Crea un componente <AvatarUploader /> en React con Tailwind CSS. Patrón: control editable de foto de perfil para una página de ajustes. Diseño: avatar grande a la izquierda con un distintivo circular de cámara fijado abajo a la derecha; a la derecha, una etiqueta "Foto de perfil", una línea de ayuda con las restricciones del archivo ("PNG o JPG, hasta 2 MB") y un botón principal Subir junto a un botón de texto Eliminar. Comportamiento: un <input type="file" accept="image/png,image/jpeg"> oculto que se activa tanto desde el distintivo como desde el botón Subir; validación de tamaño y tipo en el cliente con un mensaje de error inline; previsualización local con URL.createObjectURL, revocada al desmontar; Eliminar restaura el fallback de iniciales. Incluye: asociación con <label> para el input de archivo, región aria-live para los mensajes de validación, anillos focus-visible, estado deshabilitado/subiendo en el botón y soporte de tema claro y oscuro. Restricciones: solo React + Tailwind, sin librería de subida, sin dependencia de recorte; expón un callback onChange(file) para quien lo use.

Crea un componente <AvatarRow /> en React (y un contenedor <MemberList />) con Tailwind CSS. Patrón: fila de avatar más metadatos para listas de miembros, tablas e hilos de comentarios. Diseño: avatar a la izquierda, un bloque de dos líneas con el nombre de la persona (más una marca de verificación opcional) y una línea secundaria atenuada ("Equipo · Rol"), y un botón de acción al final por la derecha; el bloque central se recorta con min-w-0 + truncate en lugar de pasar a varias líneas. API: props para users (array de { src, name, role, team, verified }), una etiqueta para la acción final y un callback onAction(user). Incluye: fallback de iniciales, marcado semántico <ul>/<li> en el contenedor, nombre accesible en el botón final ("Gestionar acceso de {name}"), resaltado de la fila al pasar el cursor, anillos focus-visible y soporte de tema claro y oscuro. Restricciones: solo React + Tailwind, sin librerías de tablas ni de listas, funciona a 320px de ancho sin desbordarse.