Padrões mobile

Blocos de construção de app bancário reutilizados nas telas nativas. Documentados aqui primeiro; promovidos para @velon-finance/ui conforme se estabilizam (DSM#39).

Menu de linhas de lista

Linhas tocáveis agrupadas em um card arredondado, a espinha dorsal das telas de configurações/perfil no mobile.

┌─────────────────────────────┐
│ ( ◷ )  Informações       ›  │
│ ( ◷ )  Segurança         ›  │
│ ( ◷ )  Notificações      ›  │
└─────────────────────────────┘

• Linha: chip de ícone (size-9 rounded-full bg-primary/10 text-primary) + rótulo + chevron, px-4 py-3.5, active:bg-gray-100.
• Agrupadas em rounded-2xl border bg-white dark:bg-gray-900; linhas separadas por um fio fino (border-t border-gray-100), não por espaços.
• Linhas destrutivas (ex.: Sair) usam text-red-600 + um chip de ícone tingido de vermelho.

Navegação drill-in

O Perfil no mobile é um fluxo menu → seção em tela cheia (não abas). Cada linha faz deep-link para uma rota real (/app/profile/:section), de modo que o botão físico de voltar do Android retorna ao menu. As telas de seção reutilizam os componentes de abas existentes da web, sem formulários duplicados.

/app/profile            →  menu (header card + rows)
/app/profile/security   →  full screen + back header  (reuses SecurityTab)

Reutilizar as abas da web significa que um componente sensível à segurança (ex.: SecurityTab) é renderizado como está, então nenhum arquivo protegido/de autenticação é tocado pela camada mobile.

Avatar de iniciais

Avatar circular exibindo 1 a 2 iniciais quando não há foto. Ordem de origem: nome completo → parte local do email → "US". Apenas tokens da marca.

Bottom sheets

Prefira um Sheet inferior (side="bottom") em vez de um dialog centralizado para ações contextuais e seletores no mobile. Ele fica ao alcance do polegar e respeita o home indicator. Veja o organismo Sheet; no nativo, adicione padding ao fundo do conteúdo do sheet com env(safe-area-inset-bottom).

Toque e movimento

• Use estados active: (não hover:) para feedback de pressionar. Não há hover no toque.
• Alvo mínimo de 44×44pt. Controles apenas de ícone recebem um aria-label.
• Mantenha as transições curtas (transition-colors); evite animações que deslocam o layout em contêineres com scroll.