RecipientRow
One person who receives the alerts (Figma "Recipient Row" 2130:11917): avatar, name and what they receive.
Sits in the Weekly Stat Card "Quem recebe os alertas" slot and in the person page consent card. Long names and scopes clamp to one line (line-clamp, so nothing scrolls sideways), never squeeze.
<RecipientRow render={<li />} avatar={<Avatar.Root tone="brand" size="40"><Avatar.Fallback>MA</Avatar.Fallback></Avatar.Root>} name="Você" scope="Todos os alertas" />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Recipient Row
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).
Recipient Row ·
| Recipient Row |
|---|
MAVocêTodos os alertas da Lia e da Marlene |
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 |
|---|---|---|---|
| avatar | ReactNode | — | Figma "Avatar" (exposed instance): an Avatar.Root with initials. |
| name | string | — | Figma "name": "Você", "Mariana". |
| scope? | string | — | Figma "scope": what they receive, "Todos os alertas da Lia e da Marlene". |
| render? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | Another element keeps the look, e.g. `render={<li />}` inside a list. |
| className? | string | — |
PersonCard
One protected person in the Família list and detail (Figma "Person Card" 2024:2880): avatar, name, protection status, the reason in one or two lines, the last check and an optional action.
TimelineItem
One event of a person's protection history (Figma "Timeline Item" 2058:52517, Kind × 7): a 32 px dot with the kind's icon on its role colour, a 2 px connector, title and meta.