Order Ticket

Quando usar

Use a boleta de operacao no painel lateral de uma tela de trading, ao lado do grafico ou do book de ofertas: e o formulario denso onde o usuario ajusta quantidade e preco e dispara ordens de compra e venda. E um dos componentes mais caracteristicos do produto, entao a densidade alta (campo pequeno, rotulo pequeno, botao lg para alvo de toque) e proposital, nao um descuido de espacamento.

Quando nao usar

Nao use a boleta para formularios genericos de valor monetario fora do contexto de trading (por exemplo um formulario de deposito ou saque): a linguagem visual (verde/vermelho de compra e venda, botao de zerar em laranja) so faz sentido quando a acao realmente e comprar ou vender um ativo. Para esses casos, componha com Input, Button e Label diretamente.

Anatomia

<OrderTicket>                                       data-slot="order-ticket"
  <div data-slot="order-ticket-mode">                modo avancado/simples, ToggleGroup segment
  <div data-slot="order-ticket-fields">
    <div data-slot="order-ticket-field">             Estrategia (Select), opcional
    <div data-slot="order-ticket-available">         Disp., opcional
    <div data-slot="order-ticket-field">              Quantidade (Input) + presets (Button ghost)
    <div data-slot="order-ticket-field">              Preco da Ordem (Input)
    Checkbox + Label                                  TP/SL
  <div data-slot="order-ticket-actions">
    <div data-slot="order-ticket-action-row">         Button long / Button short, por linha
    Button ghost (zerar, cor de stop)
    Button ghost largura total (cancelar + zerar)
    <div data-slot="order-ticket-footer-actions">     Cancelar Ordem / Inverter
    <div data-slot="order-ticket-position">           resumo de posicao, opcional

Nenhuma parte alem de quantidade, preco e das linhas de acao e obrigatoria: Estrategia, saldo disponivel, presets de quantidade, TP/SL, zerar, cancelar+zerar, cancelar ordem, inverter e o resumo de posicao so aparecem quando o consumidor passa os dados e callbacks correspondentes.

Identidade

• Comprar e vender usam as variantes long e short do Button (context-trading-long-* e context-trading-short-*): verde e alta de preco, vermelho e baixa, nao sucesso/erro genericos.
• O botao Zerar usa o token --context-trading-stop-default, que no design system atual e uma cor solida (laranja, #F97316), nao mais o primitivo de paleta que o Hub antigo usava por falta de token (o comentario do CSS legado registra essa lacuna, ja fechada aqui).
• Todo numero (quantidade, preco, saldo disponivel, resultado) usa font-mono.

Migracao do componente legado

O Boleta.tsx do Hub antigo recebia so uma prop, versao ('avancado' | 'simples'), e desenhava tudo mais com dado de exemplo fixo dentro do componente: a estrategia "Manejo", o saldo "258.010.200,00 USDT", a posicao "Zerado" com "Qtd: 0". Isso funcionava para a vitrine do Hub, mas nao dava para usar numa aplicacao real. Aqui:

• versao vira mode/onModeChange, controlado pelo consumidor
• todo dado de exemplo vira prop: strategies/strategy, availableLabel, quantity, price, position
• as quatro linhas fixas de botoes (CP Limite/VD Limite, CP Mercado/VD Mercado, Bid/Ask, Ask/Bid) viram actionRows, uma lista que o consumidor define: quantas linhas existem e o que cada uma significa e regra de negocio da corretora, nao do design system
• o clique de qualquer botao de comprar/vender vira uma unica callback, onSubmit(rowId, side), em vez de um onClick sem argumento por botao
• os botoes soltos "Cancelar ordens (2) + Zerar (5)", "Cancelar Ordem" e "Inverter" viram onCancelAndZero, onCancel e onInvert, cada um com seu rotulo formatado pelo consumidor (a boleta nao sabe contar ordens abertas, so exibe o texto que recebe)

Acessibilidade

• Todo campo tem Label associado por htmlFor/id: Estrategia, Quantidade, Preco da Ordem e TP/SL.
• A ordem de tabulacao segue a ordem visual: modo, estrategia, quantidade, presets, preco, TP/SL, linhas de compra/venda, zerar, cancelar+zerar, cancelar ordem, inverter.
• Os botoes de comprar e vender carregam o rotulo da acao como texto visivel (por exemplo "Comprar Limite"), nao so a cor: quem usa leitor de tela ouve o que o botao faz, nao so "botao verde".
• O seletor de modo (avancado/simples) usa ToggleGroup com type="single", que expoe role="radiogroup"/role="radio" e navegacao por seta do Radix, de graca.