Gerador de Componentes de Avatar.

Crie um componente React <Avatar /> reutilizável com Tailwind CSS. Padrão: avatar básico com imagem e fallback de iniciais. Layout: avatar circular renderizando um <img> quando o src carrega; em caso de erro ou src ausente, renderize um fallback de iniciais gerado com uma cor de fundo determinística derivada da string do nome. API: props para src, name (obrigatório, usado no texto alternativo e nas iniciais), size ("xs" | "sm" | "md" | "lg" | "xl") e repasse de className. Inclua: alt obrigatório a partir de name, loading="lazy", troca para o fallback via onError com estado local, anel de focus-visible quando renderizado dentro de um link ou botão, suporte a tema claro e escuro pelas classes dark: do Tailwind. Restrições: apenas React + Tailwind, sem dependências externas de UI ou imagem, sem layout shift enquanto a imagem carrega (reserve a caixa com width/height fixos).

Crie um componente React <AvatarWithStatus /> com Tailwind CSS. Padrão: avatar com indicador de presença. Layout: avatar circular com um pequeno ponto de status fixado no canto inferior direito, separado da foto por um anel na cor do fundo para que ele se destaque em qualquer superfície. API: props para src, name, size e status ("online" | "away" | "busy" | "offline"), com a cor do ponto mapeada por status e o ponto escalando junto com o tamanho do avatar. Inclua: fallback de iniciais, um rótulo de texto visualmente oculto anunciando o status para leitores de tela (não dependa apenas da cor), aria-label no wrapper, suporte a tema claro e escuro. Restrições: apenas React + Tailwind, sem dependências externas de UI, o ponto nunca cobre mais de 30% da borda do avatar.

Crie um componente React <AvatarGroup /> com Tailwind CSS. Padrão: grupo de avatares empilhados (sobrepostos) com contagem de excedente. Layout: linha horizontal de avatares sobrepostos em cerca de um terço, cada um com um anel na cor do fundo para que a pilha continue legível; passado o número máximo de avatares visíveis, renderize um chip contador "+N" no mesmo tamanho e formato. API: props para users (array de { src, name }), max (padrão 4), size e um onAddClick opcional que renderiza no fim da linha um botão tracejado de "Convidar". Comportamento: o hover eleva o avatar sob o cursor acima dos vizinhos com um pequeno translate e mudança de z-index; a pilha inverte a direção da sobreposição com uma prop "dir". Inclua: fallback de iniciais em cada avatar, aria-label resumindo o total de membros, itens focáveis por teclado com anéis de focus-visible, suporte a tema claro e escuro. Restrições: apenas React + Tailwind, sem dependências externas de UI, sem biblioteca de animação.

Crie um componente React <Avatar /> temável com uma escala completa de tamanhos e formatos, usando Tailwind CSS. Padrão: primitivo de avatar de design system. API: size ("xs" | "sm" | "md" | "lg" | "xl" | "2xl") mapeado por um único objeto de lookup que controla junto largura, altura, tamanho da fonte e border-radius; shape ("circle" | "squircle" | "square"); mais src, name e className. Requisito: o tamanho da fonte das iniciais escala proporcionalmente à caixa do avatar, para que xs e 2xl fiquem equilibrados; todos os tokens ficam em um único objeto de configuração no topo do arquivo, para o time retematizar em um só lugar. Inclua: fallback de iniciais, texto alternativo a partir de name, forwardRef para o elemento raiz, tipos de props em TypeScript exportados, suporte a tema claro e escuro. Restrições: apenas React + Tailwind, sem dependências externas de UI, sem estilos inline exceto os tamanhos em pixel calculados.

Crie um componente React <AvatarUploader /> com Tailwind CSS. Padrão: controle editável de foto de perfil para uma página de configurações. Layout: avatar grande à esquerda com um selo circular de câmera fixado no canto inferior direito; à direita, um rótulo "Foto de perfil", uma linha de dica com as restrições do arquivo ("PNG ou JPG, até 2 MB") e um botão primário Enviar mais um botão de texto Remover. Comportamento: <input type="file" accept="image/png,image/jpeg"> oculto, acionado tanto pelo selo quanto pelo botão Enviar; validação de tipo/tamanho no cliente com mensagem de erro inline; preview local via URL.createObjectURL, revogado ao desmontar; Remover restaura o fallback de iniciais. Inclua: associação de <label> ao input de arquivo, região aria-live para as mensagens de validação, anéis de focus-visible, estado desabilitado/enviando no botão, suporte a tema claro e escuro. Restrições: apenas React + Tailwind, sem biblioteca de upload, sem dependência de recorte — exponha um callback onChange(file) para quem consome o componente.

Crie um componente React <AvatarRow /> (e um wrapper <MemberList />) com Tailwind CSS. Padrão: linha de avatar com metadados para listas de membros, tabelas e threads de comentários. Layout: avatar à esquerda, um bloco de duas linhas com o nome da pessoa (mais um selo de verificação opcional) e uma linha secundária esmaecida ("Time · Cargo"), e um botão de ação no fim da linha à direita; o bloco do meio trunca com min-w-0 + truncate em vez de quebrar linha. API: props para users (array de { src, name, role, team, verified }), um rótulo para a ação final e um callback onAction(user). Inclua: fallback de iniciais, marcação semântica <ul>/<li> no wrapper, nome acessível no botão final ("Gerenciar acesso de {name}"), destaque da linha no hover, anéis de focus-visible, suporte a tema claro e escuro. Restrições: apenas React + Tailwind, sem biblioteca de tabela ou lista, funciona a 320px de largura sem overflow.