# Components Examples --- ## Accordion ```tsx ``` --- ## AlertBanner ```tsx {}} /> ``` --- ## AutoCompleteSelect ```tsx ``` --- ## Avatar ```tsx // --- imageType: photo --- // Padrão — circle, tamanho 48 // Square // Estado disabled // Estado focus // Todos os tamanhos (24 | 32 | 48 | 64 | 80 | 160) // --- imageType: initials ---f // Iniciais padrão (background usa token --t_avatar-bg_color / red-500 light, red-400 dark) // Iniciais com fundo personalizado (backgroundColor só funciona com imageType="initials" ou "icon") // --- imageType: icon --- // Ícone como ReactNode } size="48" shape="circle" /> // Ícone com fundo personalizado } size="64" shape="circle" backgroundColor="#8b5cf6" /> // Ícone como string (URL) // --- Badge (canto superior) --- // Badge automático — tamanho definido pelo size do avatar: sm para 24/32, md para 48/64, lg para 80/160 // Badge com variant e size explícito // --- Presence indicator (canto inferior) --- // Presença com cor padrão (green-600) // Presença com cor personalizada // --- Badge + presença juntos --- // Lado direito (padrão): badge no canto superior direito, presença no canto inferior direito // Lado esquerdo: badge no canto superior esquerdo, presença no canto inferior esquerdo // --- Alt acessível --- // Sempre passe alt quando o avatar representa uma pessoa específica ``` --- ## Badge ```tsx ``` --- ## BigNumber ```tsx ``` --- ## BottomNavigation ```tsx }, { id: 'search', label: 'Buscar', icon: }, ]} activeItemId={activeId} variant="accent" size="md" onChange={setActiveId} /> ``` --- ## BottomSheet ```tsx

Conteúdo do sheet

 ``` --- ## Breadcrumbs ```tsx navigate(item)} /> ``` --- ## Button ```tsx // Com ícone — use iconBefore ou iconAfter, nunca dentro de children ``` --- ## Card ```tsx } footer={ } /> ``` --- ## Carousel ```tsx
Slide 1
Slide 2
Slide 3
 ``` --- ## Checkbox ```tsx ``` --- ## CheckboxGroup ```tsx ``` --- ## Chip ```tsx handleRemove()}> React ``` --- ## ChipsTextField ```tsx ``` --- ## Counter ```tsx ``` --- ## DateSelector ```tsx // Modo single (padrão) // Modo range ``` --- ## Divider ```tsx ``` --- ## Drawer ```tsx

Conteúdo do drawer

 ``` --- ## EmptyState ```tsx ``` --- ## FileUploader ```tsx ``` --- ## IconButton ```tsx } aria-label="Deletar" /> // Botão de fechar ``` --- ## Link ```tsx Saiba mais // Com ícone — use leftIcon ou rightIcon, nunca dentro de children }> Ver todos ``` --- ## Modal ```tsx

Título do modal

Conteúdo do modal.

 ``` --- ## OtpInput ```tsx ``` --- ## PageControl ```tsx ``` --- ## Pagination ```tsx ``` --- ## Popover ```tsx Abrir } side="bottom" align="center" sideOffset={8} >
Conteúdo do popover
 ``` --- ## ProgressBar ```tsx ``` --- ## ProgressIndicator ```tsx ``` --- ## RadioButton ```tsx ``` --- ## RadioGroup ```tsx ``` --- ## SearchField ```tsx ``` --- ## Select ```tsx // Single ``` --- ## SideNavigation ```tsx // Básico // Com toggle de dark mode e barra de scroll oculta // Com usuário, menu de opções e botão de logout navigate('/profile') }, { id: 'settings', label: 'Configurações da conta', onClick: () => navigate('/settings') }, ], }} onLogout={() => handleLogout()} /> // Estrutura de itens com seção, submenus e ícones const navItems = [ { id: 'main', label: 'Principal', header: true, children: [ { id: 'dashboard', label: 'Dashboard', icon: }, { id: 'reports', label: 'Relatórios', icon: , children: [ { id: 'sales', label: 'Vendas' }, { id: 'finance', label: 'Financeiro' }, ], }, ], }, ] ``` --- ## Skeleton ```tsx ``` --- ## Slider ```tsx // Valor único // Range ``` --- ## StatusLight ```tsx ``` --- ## Switch ```tsx ``` --- ## Table ```tsx Nome Status Acme Inc. Ativo
``` --- ## Tabs ```tsx // Ícones vão dentro de cada objeto Tab, não como prop do componente }, { label: 'Relatórios', iconBefore: }, ]} /> ``` --- ## Tag ```tsx Novo // Com ícone — use a prop icon, nunca dentro de children }> Aprovado ``` --- ## TextArea ```tsx