QueueCard
The connection queue card (Figma "Queue Card" 188:1708): the place in line and a word estimate in a polite live region while Waiting, then Your turn, then Reserved with the clock time and an explicit way back to the line.
The breathing rings are decorative and only move with motion allowed.
<QueueCard state="waiting" position="2º" estimate="Uns 4 minutos" positionLabel="Posição na fila" title="Você está na fila" body="Conectamos poucas pessoas por vez." notifyLabel="Me avisar quando for a vez" onNotify={notify} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Queue Card
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
| Waiting | Your turn | Reserved |
|---|---|---|
2ºUns 4 minutos Você está na filaConectamos poucas pessoas por vez, pro WhatsApp não bloquear ninguém. A gente avisa quando for sua vez.
| Chegou sua vezPegue o celular da Lia. Leva uns 3 minutos.
| Chegou sua vezSua vez fica reservada até 14:32. Tenha o celular da Lia em mãos.
|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| state? | "reserved" | "waiting" | "your-turn" | "waiting" | Figma State: Waiting (place in line), Your turn, Reserved (a 5-minute hold with the clock time). |
| position? | string | — | Waiting: the place in line as said ("2º"). |
| estimate? | string | — | Waiting: the estimate in words ("Uns 4 minutos"). |
| positionLabel? | string | — | Accessible name of the place ("Posição na fila"). |
| title | string | — | |
| body | string | — | The sentence under the title; on Reserved it holds the time ("Sua vez fica reservada até 14:32. Tenha o celular da Lia em mãos."). |
| people? | QueueCardPerson[] | [] | Who the wait is for, so the card is about people, not about us. |
| notifyLabel? | string | — | Waiting: outline "Me avisar quando for a vez". |
| startLabel? | string | — | Your turn / Reserved: brand "Começar agora". |
| declineLabel? | string | — | Reserved: ghost 44 "Agora não dá, voltar pra fila". |
| onNotify? | (() => void) | — | |
| onStart? | (() => void) | — | |
| onDecline? | (() => void) | — | |
| className? | string | — |
QrFallbackRow
The QR fallback entry (Figma "QR Fallback Row" 2130:12353): the QR stays a fallback under "Vocês estão juntos agora?" (D3); the default pairing is the phone-number code.
ProgressRing
A thin progress ring (Figma "Progress Ring" 188:1539), kept only for the queue position: countdown and sync-percentage rings are retired (SC-06, SC-16), time is said as text.