<!-- source-hash: df41a32c852e3d01e5a937d8567445ad -->
Storybook stories for the `Drawer` UI component, demonstrating all supported slide-in directions, footer usage, and scrollable content scenarios.

## Key Components

| Story | Description |
|-------|-------------|
| `Right` | Drawer sliding in from the right edge |
| `Left` | Drawer sliding in from the left edge |
| `Top` | Drawer sliding in from the top edge |
| `Bottom` | Drawer sliding in from the bottom edge |
| `AllSides` | Interactive demo toggling all four `DrawerSide` directions from a single view |
| `WithFooter` | Drawer with `DrawerFooter` containing Cancel/Confirm actions |
| `LongContent` | Drawer with 20 scrollable items to validate overflow/scroll behavior |

**Drawer sub-components used:** `DrawerContent`, `DrawerHeader`, `DrawerTitle`, `DrawerDescription`, `DrawerBody`, `DrawerFooter`

## Usage Example

```typescript
import { useState } from 'react'
import { Button } from '../components/ui/button'
import {
  Drawer,
  DrawerBody,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
} from '../components/ui/drawer'

function MyDrawer() {
  const [open, setOpen] = useState(false)

  return (
    <Drawer open={open} onOpenChange={setOpen}>
      <Button variant="outline" onClick={() => setOpen(true)}>
        Open
      </Button>
      <DrawerContent side="right">
        <DrawerHeader>
          <DrawerTitle>Settings</DrawerTitle>
          <DrawerDescription>Manage your preferences.</DrawerDescription>
        </DrawerHeader>
        <DrawerBody>
          <p>Content here.</p>
        </DrawerBody>
        <DrawerFooter>
          <Button variant="accent" onClick={() => setOpen(false)}>Save</Button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}
```

The `side` prop on `DrawerContent` accepts `"right" | "left" | "top" | "bottom"`, defaulting to `"right"` when omitted.