MockQr
A decorative QR-like code (Figma "Mock QR" 188:1525) for examples and screen mocks only: three finder squares and a seeded module pattern.
It encodes nothing; the real QR fallback (D3) comes from the pairing API.
<MockQr bits={7} label="QR de exemplo" />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Mock QR
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).
Mock QR ·
| Mock QR |
|---|
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 |
|---|---|---|---|
| bits? | number | 7 | Seed for the pattern: the same number always draws the same code. |
| label | string | — | Accessible name ("QR de exemplo"). |
| className? | string | — |
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.
PreCheckChoice
The pre-check card before the connection queue (Figma "Pre-check Choice" 2056:61941): a question, three answers and a primary that says what each answer does next.