import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
import * as DrawerStories from './drawer.stories';

<Meta of={DrawerStories} />

<Title />
<Subtitle>A bottom-aligned panel optimized for mobile interactions.</Subtitle>

<Description />

<Primary />

---

## Variations

<Stories />

---

## AI Best Practices

> [!IMPORTANT]
> - **Mobile First** — Drawers are best suited for mobile screens. For desktop side panels, use the `Sheet` component.
> - **Accessibility** — Always include a `DrawerTitle` to ensure proper screen reader support.
> - **Content Centering** — Wrap internal content in a centered container (e.g., `mx-auto w-full max-w-sm`) for better layout on wider screens.