# Smooth Drawer

A drawer with heights to drag between: Peek shows the total and Pay, Expanded shows everything.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/smooth-drawer
```

## Usage

```tsx
import { SmoothDrawer } from '@/components/fetaui/smooth-drawer'
import { Button } from '@/components/fetaui/button'

export function Example() {
  return (
    <SmoothDrawer trigger={<Button>Review order</Button>} title="Order summary" peek={<Button>Pay $159.84</Button>}>
      {/* items, delivery, totals */}
    </SmoothDrawer>
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| title | ReactNode | required |
| peek | ReactNode | required |
| children | ReactNode | required |
| description | ReactNode |  |
| peekHeight | number | measured |
| showLabel | string | Order details |
| hideLabel | string | Hide details |
| defaultExpanded | boolean | false |
| trigger | ReactElement |  |
| open | boolean |  |
| onOpenChange | (open) => void |  |
| animated | boolean | true |
| aside | ReactNode |  |
| SmoothOption | title, meta, price, selected, onSelect, name |  |

## When to use

- For checkout and other flows that start small and open up.

## When not to use

- For content that needs no heights: use Drawer.

## Accessibility

- A native modal dialog labelled by the title.
- Details are inert at Peek, so focus cannot land below the fold.
- The toggle reports aria-expanded, so nobody has to drag.

## Motion

- Moves with transform only, so resizing never lays out the page.
- Rubber bands 0.3 past the top and snaps on a 0.25 spring. Over 500 px/s picks the next height.
- Order details moves the sheet and turns the chevron in 280 ms.
- Totals roll when an option changes.
- With reduced motion, it jumps to each height and totals swap.