# Drawer

## Overview

A panel that slides in from the bottom edge of the screen — the mobile-optimized equivalent of `<Sheet>`. Drawers are the standard interaction pattern for panels on mobile, providing a more natural bottom-to-top gesture feel.

---

## When to Use

- Filter panels on mobile
- Create/edit flows accessed on small screens
- Action sheets with multiple options (mobile alternative to `DropdownMenu`)

## When NOT to Use

- Desktop side panels — use `<Sheet>` instead.
- Simple confirmations — use `<AlertDialog>` instead.

---

## Anatomy

```
<Drawer>
  <DrawerTrigger asChild>
    <Button />
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle />
      <DrawerDescription />
    </DrawerHeader>
    {/* Content */}
    <DrawerFooter>
      <DrawerClose asChild>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>
```

---

## Props

### Drawer

| Prop           | Type                      | Description           |
| -------------- | ------------------------- | --------------------- |
| `open`         | `boolean`                 | Controlled open state |
| `onOpenChange` | `(open: boolean) => void` | State handler         |

---

## Examples

```tsx
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
  Button,
} from 'xertica-ui/ui';

<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Open Filters</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Filters</DrawerTitle>
      <DrawerDescription>Narrow down your results.</DrawerDescription>
    </DrawerHeader>
    <div className="p-4">{/* Filter controls */}</div>
    <DrawerFooter>
      <Button>Apply Filters</Button>
      <DrawerClose asChild>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>;
```

---

## AI Rules

- `DrawerTitle` is **required** for accessibility.
- `DrawerClose asChild` wrapping a `<Button>` auto-closes the drawer.
- For desktop applications, prefer `<Sheet side="right">` over `<Drawer>`.

---

## Related Components

- [`Sheet`](./sheet.md) — Desktop side panel
- [`Dialog`](./dialog.md) — Centered modal