{
  "id": "drawer",
  "name": "Drawer",
  "level": "molecule",
  "status": "stable",
  "purpose": "A panel that slides in from an edge for a secondary task.",
  "description": "Modal side panel. Composes `@radix-ui/react-dialog` for the full modal contract: `aria-modal`, focus trap, focus return, escape-to-close, outside-click-to-close, body scroll lock, portal isolation. Two semantic axes — `side` (right / left / top / bottom) and `size` (sm / md / lg / xl / full). Mobile (<md) is fullscreen regardless of `side`; the slide animation enters from the configured edge so the affordance stays consistent.",
  "role": "surface",
  "import": "@rrios-forge/ui/molecules/drawer",
  "exports": [
    "Drawer",
    "DrawerBody",
    "DrawerClose",
    "DrawerContent",
    "DrawerDescription",
    "DrawerFooter",
    "DrawerHeader",
    "DrawerTitle",
    "DrawerTrigger",
    "drawerBodyVariants",
    "drawerContentVariants",
    "drawerFooterVariants",
    "drawerHeaderVariants",
    "drawerOverlayVariants",
    "DRAWER_SIDES",
    "DRAWER_SIZES"
  ],
  "source": "packages/ui/src/molecules/drawer",
  "axes": [
    {
      "axis": "side",
      "part": null,
      "values": [
        "right",
        "left",
        "top",
        "bottom"
      ],
      "default": "right",
      "meaning": "Which side something belongs to."
    },
    {
      "axis": "size",
      "part": null,
      "values": [
        "sm",
        "md",
        "lg",
        "xl",
        "full"
      ],
      "default": "md",
      "meaning": "Ergonomic scale, in three families (control, text, container)."
    }
  ],
  "needs": [
    {
      "need": "Side panel",
      "answer": "`Drawer` or `Sheet`"
    }
  ],
  "patterns": [],
  "a11yExceptions": [],
  "decisions": [
    {
      "id": "ADR-015",
      "title": "Drawer molecule on top of Radix Dialog"
    },
    {
      "id": "ADR-016",
      "title": "NotificationCenter v2: Popover → Drawer + Provider/Hooks"
    }
  ],
  "stories": [
    {
      "name": "Playground",
      "id": "components-molecules-drawer--playground",
      "interaction": false,
      "snapshots": [
        "dark",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-drawer--playground",
      "frame": "/iframe.html?id=components-molecules-drawer--playground&viewMode=story"
    },
    {
      "name": "Sides",
      "id": "components-molecules-drawer--sides",
      "interaction": false,
      "snapshots": [
        "dark",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-drawer--sides",
      "frame": "/iframe.html?id=components-molecules-drawer--sides&viewMode=story"
    },
    {
      "name": "Sizes",
      "id": "components-molecules-drawer--sizes",
      "interaction": false,
      "snapshots": [
        "dark",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-drawer--sizes",
      "frame": "/iframe.html?id=components-molecules-drawer--sizes&viewMode=story"
    },
    {
      "name": "With long content",
      "id": "components-molecules-drawer--with-long-content",
      "interaction": false,
      "snapshots": [
        "dark",
        "high-contrast",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-drawer--with-long-content",
      "frame": "/iframe.html?id=components-molecules-drawer--with-long-content&viewMode=story"
    },
    {
      "name": "Accessibility",
      "id": "components-molecules-drawer--accessibility",
      "interaction": false,
      "snapshots": [
        "dark",
        "high-contrast",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-drawer--accessibility",
      "frame": "/iframe.html?id=components-molecules-drawer--accessibility&viewMode=story"
    }
  ],
  "storyFile": "tooling/storybook/stories/components/molecules/drawer.stories.tsx"
}