Componentes

Retrato ou iniciais de uma pessoa ou entidade, sobre os primitivos Radix, com fallback automático e três tamanhos.

Linha de notícia para feed, com ponto de sentimento (alta, baixa ou neutro), título, fonte, horário e ação de abrir.

Tabela de ordens do terminal: horário, ativo, lado, preço, quantidade e status, com linha cancelada esmaecida e colunas configuráveis.

Tabela de cotações do terminal: ativo, último preço, oferta de compra e venda, variação e tendência, com colunas configuráveis.

Card de destaque para um valor numérico com rótulo, variação opcional (alta ou baixa) e descrição de apoio.

Tabela de dados com variantes bordered, compact, striped e hoverable, e célula numérica alinhada em font-mono.

Mensagem de destaque em linha, com variantes default, info, success, warning e destructive.

Rótulo compacto para status, categoria ou contagem, com cinco variantes semânticas e um modificador de tamanho e de ponto indicador.

Estado vazio composto por partes (media, título, descrição, conteúdo), para ausência de resultado ou de dado.

Barra de progresso sobre o primitivo Radix, com estado determinado e indeterminado e dois tamanhos.

Placeholder animado para conteúdo em carregamento, retangular ou circular, sem estado próprio.

Notificação temporária no canto da tela, com a identidade TRDR já aplicada e cores por tipo (sucesso, erro, aviso, info).

Indicador de carregamento em SVG animado, sem estado e sem Radix, em tres tamanhos e com a variante da marca: o touro da TRDR escalando a ladeira.

Botão do sistema, com dez variantes visuais, três tamanhos e as variantes de trading long e short.

Agrupa botões colados visualmente, resolvendo bordas internas e arredondando só as pontas, na horizontal ou na vertical.

Caixa de seleção com estados marcado, desmarcado e indeterminado (misto), sobre o primitivo Radix.

Seleção única com busca, composta a partir de popover e command, pronta para uso com uma lista de opções.

Agrupa rótulo, controle, descrição e mensagem de erro de um campo de formulário, com a amarração de acessibilidade (htmlFor, aria-describedby, aria-invalid) automática.

Ponte entre o react-hook-form e o Field: liga cada campo ao estado do formulário mantendo a amarração de acessibilidade automática.

Campo de texto de uma linha, com tamanhos, tons de validação, ícone à esquerda e botão de limpar.

Campo de texto composto com addon, botão ou texto acoplado, para variantes do campo combinado usado na boleta de operação.

Rótulo de campo de formulário sobre o primitivo Label do Radix, com associação nativa a inputs e textareas.

Boleta de operação: modo avançado/simples, campos de quantidade e preço, e as ações de comprar, vender e zerar.

Seleção única entre opções mutuamente exclusivas, com variantes bolinha (input) e botão selecionável.

Seletor de uma opção entre várias, com overlay, grupos, rótulos e navegação por teclado sobre o primitivo Radix.

Controle de arraste para escolher um valor ou um intervalo numérico, horizontal ou vertical.

Alternador on/off sobre o primitivo Radix, com uma prop visual para reproduzir o estado misto do Switch legado.

Campo de texto multi-linha, com número de linhas configurável e tons de validação.

Botão de dois estados (pressionado ou não) sobre o primitivo Radix, base do toggle-group e do segmented control.

Grupo de botões de dois estados, seleção única ou múltipla, com variante que reproduz o segmented control.

Lista de seções expansíveis com abertura única ou múltipla, chevron que gira e altura animada, sobre o primitivo Radix.

Restringe o conteúdo filho a uma proporção largura por altura fixa.

Container de superfície composto por partes (header, title, description, action, content, footer).

Primitivo de abrir e fechar um bloco de conteúdo, sem decoração própria: a base sem opinião visual do Accordion.

Linha genérica de lista, composta por partes (mídia, título, descrição, ações), para resultados de busca e listas de configuração.

Grupo de painéis redimensionáveis lado a lado ou empilhados, para telas com vários blocos de conteudo, como um terminal de trading.

Área de rolagem com barra fina própria (vertical e horizontal), para tabelas e listas longas do terminal.

Linha divisória horizontal ou vertical para separar grupos de conteúdo relacionado.

Painel de aplicação desktop: barra de ferramentas, abas de sessão, área de conteúdo e menu de mais ações.

Barra superior do terminal desktop, composta por partes: marca, navegação, busca, resumo do dia, ações e controles de janela.

Navegação estrutural que mostra a posição da página atual dentro da hierarquia do produto.

Paleta de comandos com busca fuzzy e navegação por teclado, para localizar um ativo ou disparar uma ação sem o mouse.

Barra de menus de aplicação desktop, com itens, checkbox, radio e submenus abertos por clique ou teclado.

Barra de navegação primária com itens que abrem submenus em painéis flutuantes ou navegam direto por link.

Navegação entre páginas de uma lista ou tabela, composta sobre o Button, com a página atual marcada por aria-current.

Navegação lateral composta, com recolhimento (offcanvas ou só ícones), persistência em cookie, atalho de teclado e formato de folha no mobile.

Barra de abas horizontal com sublinhado no item ativo e suporte a ícone por aba.

Confirmação destrutiva que bloqueia a tela e exige uma decisão explícita: não fecha ao clicar fora.

Menu flutuante acionado por botão direito, com o mesmo conjunto de itens do dropdown-menu.

Janela modal que interrompe o fluxo para uma decisão ou tarefa curta, com o fundo bloqueado atrás dela.

Gaveta com arraste que entra por uma borda da tela, o equivalente ao Sheet pensado para toque.

Menu flutuante acionado por clique, com itens, checkbox, radio, rótulos, separadores e sub-menus.

Preview de conteúdo ao pairar sobre um link ou referência, sem exigir clique nem tirar o foco do fluxo atual.

Painel flutuante acionado por clique, para ações ou formulários curtos fora do fluxo principal da tela.

Painel que desliza a partir de uma das quatro bordas da tela, para tarefas mais longas que um popover mas que não precisam de uma tela nova.

Legenda flutuante e breve para um controle, com posicionamento via side/align do Radix e atalho de teclado opcional.

Tabela de ordens do terminal: horário, ativo, lado, preço, quantidade e status, com linha cancelada esmaecida e colunas configuráveis.

Boleta de operação: modo avançado/simples, campos de quantidade e preço, e as ações de comprar, vender e zerar.

Tabela de cotações do terminal: ativo, último preço, oferta de compra e venda, variação e tendência, com colunas configuráveis.

Painel de aplicação desktop: barra de ferramentas, abas de sessão, área de conteúdo e menu de mais ações.

Representa uma tecla de atalho ou, com o KbdGroup, uma sequência como Ctrl mais K.