# Drawer

Slides a modal panel in from an edge of the viewport.

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

## Overview

A drawer is a modal panel that slides in from a viewport edge and can be swiped away.

Use it for supplementary tasks that keep page context visible. Use `Dialog` for focused tasks.

## Examples

### Basic

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

export function Demo() {
  return (
    <Drawer.Root>
      <Drawer.Trigger render={<Button variant="secondary" />}>Open drawer</Drawer.Trigger>
      <Drawer.Popup closeButton>
        <Drawer.Content>
          <Drawer.Title>Filters</Drawer.Title>
          <Drawer.Description>Swipe down or press Escape to close.</Drawer.Description>
          <div {...styles.actions()}>
            <Drawer.Close render={<Button variant="secondary" />}>Close</Drawer.Close>
          </div>
        </Drawer.Content>
      </Drawer.Popup>
    </Drawer.Root>
  )
}

namespace styles {
  export const actions = style({ display: 'flex', justifyContent: 'flex-end', marginTop: '8' })
}
```

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

### SwipeDirection

Set `swipeDirection` on `Drawer.Root` to `down`, `up`, `left`, or `right`. It defaults to `down`, which opens from the bottom.

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

const edges = { down: 'bottom', left: 'left', right: 'right', up: 'top' } as const

export function Demo() {
  return (
    <div {...styles.row()}>
      {(['down', 'right', 'left', 'up'] as const).map((direction) => (
        <Drawer.Root key={direction} swipeDirection={direction}>
          <Drawer.Trigger render={<Button variant="secondary" />}>
            Open from the {edges[direction]}
          </Drawer.Trigger>
          <Drawer.Popup closeButton>
            <Drawer.Content>
              <Drawer.Title>Filters</Drawer.Title>
              <Drawer.Description>Swipe {direction} or press Escape to close.</Drawer.Description>
              <div {...styles.actions()}>
                <Drawer.Close render={<Button variant="secondary" />}>Close</Drawer.Close>
              </div>
            </Drawer.Content>
          </Drawer.Popup>
        </Drawer.Root>
      ))}
    </div>
  )
}

namespace styles {
  export const actions = style({ display: 'flex', justifyContent: 'flex-end', marginTop: '8' })

  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '3' })
}
```

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

## Guidelines

TODO: Write guidelines for Drawer.