Padrões

Padrões são composições recorrentes de organismos usadas nos produtos Velon. Eles são documentados aqui como exemplos canônicos, não como componentes exportados, para que as pessoas que desenvolvem possam copiar a forma sem acoplar a um wrapper. Capturar a forma uma vez, para todos reutilizarem, é Vantagem: menos fricção por tela, mais velocidade em toda a linha de produtos.

No roadmap

• Formulários. Label + Input + helper / erro, validados com react-hook-form. Encerra quando a integração tipada Form for lançada (#11).
• Carteira (saldo + ações). card de header com gradiente + MoneyAmount + linha de QuickActionButton. Encerra quando os componentes de domínio forem lançados (#12).
• Onboarding. layout multi-etapas com Progress, Card, Form e Alert contextual para pendência de KYC.
• Cobranças. tabela de cobranças com status em Badge, ações de linha via DropdownMenu, detalhamento via Sheet.
• Estados vazios. ilustração + CardTitle + CardDescription + Button primário. Layout padronizado entre “ainda sem transações”, “nenhum estabelecimento vinculado” e “nenhuma notificação”.

Como adicionar um padrão

1. Identifique uma composição que esteja aparecendo em 2 ou mais apps com pequenas variações.
2. Documente-a aqui como MDX com um exemplo ao vivo funcionando, construído a partir de organismos existentes, sem novos exports.
3. Se, depois de 2 a 3 padrões reutilizarem, a composição estabilizar, proponha elevá-la a um componente de domínio (molécula ou organismo de @velon-finance/ui).