# Inset

Pads content with spacing tokens.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Inset.tsx)

## Overview

Inset pads its content with spacing tokens on every side or per axis.

Use it for spacing only. Pick a semantic element through `render` when the region needs one.

## Examples

### Basic

```tsx
import { Inset, Stack, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Inset space="6" {...styles.card()}>
      <Stack gap="3">
        <span>Card content</span>
        <span>Second line</span>
      </Stack>
    </Inset>
  )
}

namespace styles {
  export const card = style({ backgroundColor: 'background.surface', borderRadius: '4xl' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Inset/Basic.tsx)

### Space

Set `space` to a spacing token to pad every side.

```tsx
import { Inline, Inset, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Inline align="start" gap="4" wrap>
      {(['2', '4', '6', '8'] as const).map((space) => (
        <Inset key={space} space={space} {...styles.card()}>
          space {space}
        </Inset>
      ))}
    </Inline>
  )
}

namespace styles {
  export const card = style({ backgroundColor: 'background.surface', borderRadius: '4xl' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Inset/Space.tsx)

### Block

Set `block` and `inline` to override `space` on one axis.

```tsx
import { Inset, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Inset block="6" inline="8" {...styles.card()}>
      Block 6, inline 8
    </Inset>
  )
}

namespace styles {
  export const card = style({ backgroundColor: 'background.surface', borderRadius: '4xl' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Inset/Block.tsx)

## Guidelines

TODO: Write guidelines for Inset.