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 ( Settings Manage your preferences.

Content here.

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