PrimitivesEstável

Stack

Relatório de paridade: docs/atoms.md

Flexbox tipado. direction (column padrão / row), gap (chave de --space-*, aplicada inline), align e justify (via data-* + CSS), wrap, inline (inline-flex) e as (os mesmos do <Box>).

É o único jeito de espaçar irmãos no DS — o <Box> não tem margin. align: start/center/end/stretch/baseline. justify: start/center/end/between/around/evenly.

Quando usar

Qualquer coluna ou linha de elementos com espaçamento consistente — um formulário, uma barra de ações, uma lista de cards.
Um contêiner com fundo/borda/padding (sem arranjar filhos) → Box. Um grid 2D → CSS grid direto (o DS não tem um <Grid>).

Exemplos

Linha

<Stack direction="row" gap="12" align="center">
  <Item>A</Item><Item>B</Item><Item>C</Item>
</Stack>

justify=between

Título da seção

Ação

<Stack direction="row" justify="between" align="center">
  <Text tone="headings">Título da seção</Text>
  <Item>Ação</Item>
</Stack>

wrap

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

<Stack direction="row" gap="8" wrap>
  {items.map((n) => <Item key={n}>Item {n}</Item>)}
</Stack>

Playground

Dois

Três

direction

gap

align

wrap

<Stack gap="12">
  {/* filhos */}
</Stack>

Props

Prop	Tipo	padrão	Descrição
`align`	`"start" \| "center" \| "end" \| "stretch" \| "baseline"`	`—`	—
`as`	`"div" \| "section" \| "article" \| "aside" \| "header" \| "footer" \| "main" \| "nav" \| "span" \| "ul" \| "ol" \| "li"`	`—`	—
`direction`	`"row" \| "column"`	`column`	Direção do flex. Default `"column"`.
`gap`	`"4" \| "8" \| "12" \| "16" \| "24" \| "32" \| "40" \| "48"`	`—`	Espaço entre os itens — chave de `--space-*`.
`inline`	`boolean`	`false`	`inline-flex` em vez de `flex`.
`justify`	`"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"`	`—`	—
`wrap`	`boolean`	`false`	—

Acessibilidade

Só layout, sem papel. Escolha o as semântico quando o agrupamento tiver sentido (as="ul" para uma lista, com <Box as="li"> nos filhos).