# Frame

Lays out a header, body, and footer in a column.

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

## Overview

A frame lays out a header, body, and footer in a column with no fill of its own.

Wrap it in a `Surface` for a card, or place it inside a dialog or drawer popup.

## Examples

### Basic

```tsx
import { Button, Frame, Surface } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Surface>
      <Frame.Root onDismiss={() => {}}>
        <Frame.Header>
          <Frame.Title>Review request</Frame.Title>
          <Frame.Description>Review the details before continuing.</Frame.Description>
          <Frame.Close />
        </Frame.Header>
        <Frame.Body>Request details</Frame.Body>
        <Frame.Footer>
          <Frame.Actions>
            <Button variant="secondary">Cancel</Button>
            <Button>Approve</Button>
          </Frame.Actions>
        </Frame.Footer>
      </Frame.Root>
    </Surface>
  )
}
```

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

### OnDismiss

`Frame.Close` appears only when `onDismiss` is set on the frame or on a surrounding `Frame.Provider`. Pass `onDismiss={null}` to opt out of an inherited handler.

```tsx
import { Button, Frame, style, Surface } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Frame.Provider onDismiss={() => {}}>
      <div {...styles.grid()}>
        <Surface>
          <Review />
        </Surface>
        <Review />
        <Surface>
          <Review onDismiss={null} />
        </Surface>
      </div>
    </Frame.Provider>
  )
}

function Review(props: Frame.Root.Props) {
  return (
    <Frame.Root {...props}>
      <Frame.Header>
        <Frame.Title>Review request</Frame.Title>
        <Frame.Description>Review the details before continuing.</Frame.Description>
        <Frame.Close />
      </Frame.Header>
      <Frame.Body>Request details</Frame.Body>
      <Frame.Footer>
        <Frame.Actions>
          <Button variant="secondary">Cancel</Button>
          <Button>Approve</Button>
        </Frame.Actions>
      </Frame.Footer>
    </Frame.Root>
  )
}

namespace styles {
  export const grid = style({
    backgroundColor: 'background.primary',
    display: 'grid',
    gap: '4',
    padding: '4',
    gridTemplateColumns: 'repeat(auto-fill, minmax(20rem, 1fr)) !custom',
  })
}
```

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

## Guidelines

TODO: Write guidelines for Frame.