← Design system · Componentes N.A.S.H. DS Text Input 327:486

Text Input

A barra "Ask AI" do Figma: 568 × 64, Icon/Plus e o campo à esquerda, Icon/Mic e Icon/AudioWaveform à direita. Três variantes desenhadas (Default, Hover, Pressed) e os estados que o campo precisa além delas: foco, envio, ouvindo, ocupado. O accent é o do modo, a mesma tabela do Tab Bar.

modo no ar: Chatcampo: repousopasse o cursor · clique · digite e Enter · microfone

modo câmera lenta ×4 ouvindo ocupado movimento reduzido

As três variantes

O quadro do Figma, congelado: não respondem ao ponteiro. O Pressed é o que o campo mostra em foco; aqui no vermelho imperial (#FF1A1A, o accent de data-accent="imperio"), o mais perto que a paleta chega do #FF1A33 do quadro.

Default

Hover

Pressed

Anatomia

A barra em foco, ampliada 1,35×. Numerado é o que o CSS desenha; cotado é o que o Figma mede.

568 × 64 · raio 24 · respiro 24 ícones 20 · gap 16 · stroke 1,5 por dentro

A placa.#0D0F12 a 32% com o vidro desfocado atrás; #1F2128 a 40% sob o ponteiro; #080A0D a 32% em foco. Os três fills são tokens do kit (--nash-placa, -hover, -pressed).
Os anéis, 1,5px por dentro.Branco 15 › 6 › 2 › 0, a 50% no repouso e a 100% no hover; accent 45 › 18 › 6 › 0 em foco. A mesma máscara do Tab Bar.
Icon/Plus, 20px.Branco 60%; branco no hover. Com aria-expanded gira 45°. Alvo de 40 invisível, centrado no ícone.
O campo.input ou textarea nu, Archivo Regular 15, linha de 24. Placeholder branco 60% nos três estados; texto branco; caret no accent.
Icon/Mic e Icon/AudioWaveform, 20px.Gap 16 entre eles. O microfone ligado toma o accent com halo; a forma de onda oscila em scaleY enquanto a barra ouve.
A luz do cursor.160px no accent a 12% por dentro do vidro, e o anel aceso no ponto mais perto do ponteiro. Só existe com o ponteiro em cima; no envio atravessa a barra uma vez.

O que o Figma diz e o que a peça faz

Coluna a coluna: a medida do Figma, o que o kit já tinha, e o que a peça adotou. Onde as três batem, o componente já falava a língua da família; onde não, a adaptação e o motivo.

Figma 327:486	O kit / o Tab Bar	A peça
Fill Default rgba(13,15,18,.32) · Hover rgba(31,33,40,.4) · Pressed rgba(8,10,13,.32)	--nash-placa · --nash-placa-hover · --nash-placa-pressed	iguais, byte a byte — os três tokens já existiam
Stroke 1,5 branco 15% no Hover; nenhum no Default	anel branco 15 › 6 › 2 › 0 por máscara (.nash-surface, .nash-tab)	o mesmo anel; a 50% no repouso (a luz do GLASS que o Figma renderiza sem stroke), a 100% no hover
Stroke 1,5 #FF1A33 no Pressed	--nash-imperio é #FF1A1A; o Tab acende no accent 45 › 18 › 6 › 0	adaptado: anel no --nash-text-input-accent (branco; #FF1A1A com data-accent="imperio"; a cor do modo com data-mode). #FF1A33 não entra na paleta
Estado "Pressed"	o Tab chama de Active; o kit tem pressão de 100ms	adaptado: Pressed = foco (:focus-within), porque o anel fica durante a digitação; a pressão física é a do kit, scale 0,995 em 100ms
Archivo Regular 15, branco 60%, nos três estados	o rótulo da aba em repouso é o mesmo 60%; o placeholder do kit é 55% (--text-mid) e o convite da Barra de prompt 62%	60%, como a aba. Dívida do kit: três valores pra "texto secundário sobre vidro"; 60 é o que o Figma mede duas vezes
Raio 24 num corpo de 64	o Tab Bar é raio 24 em 48 (pílula); a Barra de prompt é raio 32 em 64 (pílula)	24, como medido; a descrição do componente diz "pill", que seria 32. --nash-text-input-raio deixa a página escolher. Pendente no Figma
Ícones de 20 soltos nas pontas, sem alvo	a descrição do Tab pede alvo de 44; .nash-icon-button--small é 36	cada ícone num botão de 40 sem placa, margem -10: o ícone fica a 24 da borda como no Figma
568 × 64, fixo	a Barra de prompt é min(560px, 100%)	width 100%, max-width 568 (--nash-text-input-largura); padding 20 + linha 24 = 64; textarea cresce até 168
Sem estados de foco, envio, ouvindo, ocupado, desabilitado	o kit tem ocupado (.nash-aura) e concluído	adicionados aqui: foco, envio (a luz atravessa), ouvindo (mic + onda), ocupado (arco no anel), desabilitado (50%). Pendentes no Figma
Sem botão de enviar	a Barra de prompt tem Enviar	Enter envia; Shift+Enter quebra linha. Sem botão, como o Figma
Escala de tempo	o Tab Bar lia só --nash-tab-escala	as duas peças leem --nash-escala como fallback: um ancestral põe a família em câmera lenta

O que se move

Toda curva é a de saída do kit. Dois laços, cada um preso a um estado: a respiração de ouvindo e o giro de ocupado.

Ponteiro entra hover

A placa sobe e o anel branco vai a 100%. Os ícones clareiam só sob o próprio ponteiro.

passe o cursor pela barra e pelos ícones

propriedade	de → para	tempo
placa	#0D0F12 32% → #1F2128 40%	180ms
anel branco	0,5 → 1	180ms
ícone sob o ponteiro	60% → 100% · placa branca 6%	140ms · 180ms

A luz do cursor vidro

Uma névoa de 160px no accent por dentro da barra e o anel aceso no ponto mais próximo do ponteiro. Segue em 70ms; apaga em 260 quando o ponteiro sai. Em foco a névoa é mais forte.

arraste o cursor devagar ao longo da barra

camada	cor	tempo
névoa	accent 12% (foco 18%, apertada 24%), 160px	260ms · segue em 70
anel	accent 70%, 120px	260ms

Foco o Pressed do Figma

A placa desce pro #080A0D, o anel branco apaga e o de accent acende em 260. O halo espera 120 e vai a 32px antes de assentar em 24 — a curva do ponto da aba. Permanece durante a digitação; Escape tira o foco. Total: 440ms.

câmera lenta ×4

Pressão 100ms

A barra assenta a 0,995 em 100ms e solta em 160. Um ícone apertado encolhe a 0,9. Soltar sobre a barra foca o campo.

segure o botão apertado na barra, depois num ícone

propriedade	de → para	tempo
barra	scale 1 → 0,995	100ms · solta em 160
ícone	scale 1 → 0,9	100ms · solta em 160
luz do cursor	12% → 24%	imediato

Envio Enter

A luz atravessa a barra da esquerda pra direita em 520ms e o halo repete o acende. O campo esvazia; a barra dispara nash-text-input-envia com o texto. Ocupado segura o envio.

digite e aperte Enter

propriedade	de → para	tempo
luz (x)	-10% → 110%	520ms
luz (opacidade)	1 → 0 nos últimos 30%	520ms
halo	0 → 32px → 24px	320ms

Ouvindo microfone

O microfone ligado (aria-pressed) toma o accent com halo de 8px; a forma de onda oscila em scaleY a cada 1,2s; o placeholder vira "Ouvindo…"; o anel de accent fica aceso. Laço preso ao estado.

clique no microfone

propriedade	de → para	tempo
microfone	60% → accent · drop-shadow 8px	140ms · 320ms
forma de onda	scaleY 0,55 ↔ 1	1200ms, ease-in-out, laço
anel de accent	0 → 1	260ms

Ocupado esperando

O anel de accent vira um arco cônico (0 → 6 → 45 → 70%) que dá a volta em 1,8s, sem halo. O campo continua editável; Enter não envia. Com movimento reduzido, o anel fica parado.

propriedade	de → para	tempo
--nash-text-input-giro	0° → 360°	1800ms, linear, laço
placa	→ #080A0D 32%	180ms

A entrada uma vez

Ao montar, a barra sobe 6px, escala de 0,985 a 1 e assenta em 420ms. Sem fila: é um elemento só.

quem	de → para	tempo
barra	opacidade 0 → 1 · y 6 → 0 · scale 0,985 → 1	420ms

Uso

Dois arquivos do kit. Carregar o JS basta: todo .nash-text-input da página é completado e montado sozinho.

<link rel="stylesheet" href="css/nash-text-input.css" />   ← depois de nash-componentes.css
<div class="nash-text-input" id="pergunta" data-placeholder="Ask AI"></div>
<script src="js/nash-text-input.js"></script>

const barra = NashTextInput.montar('#pergunta', {
  placeholder: 'Ask AI',
  linhas: 3,                              // textarea que cresce até 168px; 1 = input
  acoes: ['mais', 'mic', 'onda'],         // quais botões entram, nesta ordem
  aoEnviar(texto, b) {},                   // Enter; ou o evento nash-text-input-envia
  aoMic(ligado, b) {}, aoMais(aberto, b) {}, aoOnda(b) {}
})
barra.ocupado(true)                        // o arco no anel; Enter não envia
barra.ouvir(true)                          // microfone aceso, onda oscilando
barra.estado(null)                         // repouso
barra.el.addEventListener('nash-text-input-estado', (e) => e.detail)   // { de, para }

// a página escreve a anatomia, o JS completa o que falta:
<form class="nash-text-input"><textarea rows="1" placeholder="Ask AI"></textarea></form>

// variante congelada, pra documentação — não responde ao ponteiro:
<div class="nash-text-input" data-state="pressed"></div>

// na barra:  data-mode="chat|voz|design|imagem|social"  · --nash-text-input-accent: …  · --nash-text-input-raio: 32px  · --nash-text-input-largura: …
// na família:  --nash-escala: 4  (câmera lenta no Tab Bar e no Text Input)  · .nash-reduzido

Decisões

Pressed é foco.O Figma desenha o anel de accent como terceiro estado. Num campo o anel tem de permanecer enquanto se digita; a pressão física dura 100ms. Ligado a :focus-within; a variante congelada mantém o nome do Figma.
O anel é o accent, não #FF1A33.O vermelho do Pressed não existe na paleta (o imperial é #FF1A1A). No app o accent é o do modo — o campo e a aba aberta acendem na mesma cor, e --nash-text-input-accent registrado interpola a troca.
Raio 24, como medido.A descrição do componente diz "pill" (32 em 64); a medida diz 24. Codificado o que está medido, com --nash-text-input-raio pra página escolher. A decidir no Figma.
Alvo de 40 nos ícones.O Figma solta os ícones sem alvo; a família pede 44 (descrição do Tab). 40 é o que cabe em 64 com os 12 de respiro; a margem negativa mantém a geometria do Figma.
Sem botão de enviar.O Figma não tem. Enter envia; a luz atravessando a barra é o retorno visual.
Estados que o Figma não desenhou.Foco, envio, ouvindo, ocupado e desabilitado existem no CSS porque o campo precisa deles; ficam listados como pendentes no Figma.
A Barra de prompt (.nash-prompt) saiu.Era a geração anterior desta referência, com o abre em duas linhas e a âncora no rodapé (motion.md). Aposentada no mesmo dia: a landing, o design system, a camada de falar com o Nash e a Conversa do Nash Code são esta peça, só o campo. A receita e os efeitos vivem em src/arquivo/llm/, com a tela arquivada que ainda os desenha. O Figma decidiu: 64 fixo, cresce em linha, não vira cartão.