Layout primitives

[brandonjpierce]

Provide a general summary of the feature

I find myself constructing the exact same CSS over and over again for basic layout work e.g. a grid-ish based horizontal or vertical layout etc.

Ideally we have something akin to common primitives in the wild for other design systems such as Stack, Flex, Grid, etc.

Caveat that this definitely lands in more of a "chrome" package where we layer some higher level primitives on top of our headless system + some theme values.

💻 Examples

https://react-spectrum.adobe.com/react-spectrum/Flex.html

<Stack direction="column" gap={1}>
  <Stack direction="row" justifyContent="space-around" gap={1}>
    <div>Cool block bro</div>
    <div>Cool block bro</div>
  </Stack>
  <div>Cool block bro</div>
</Stack>