{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drawer",
  "type": "registry:ui",
  "title": "Drawer (MIAN)",
  "description": "A panel that slides in from the right, left or bottom. Also a native <dialog>.",
  "categories": [
    "overlays",
    "drawer",
    "sheet",
    "side panel",
    "offcanvas"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/drawer.css",
      "type": "registry:file",
      "target": "mian/components/drawer.css",
      "content": ".mn-drawer {\n  --_w: min(24rem, 88vw);\n  position: fixed; inset: 0 0 0 auto;\n  width: var(--_w); max-width: 100vw; height: 100dvh; max-height: 100dvh;\n  margin: 0; padding: 0;\n  border: 0; border-inline-start: var(--mn-border-w) solid var(--mn-border);\n  background: var(--mn-popover); color: var(--mn-fg); box-shadow: var(--mn-shadow-lg);\n  font-family: var(--mn-font); overflow: auto;\n}\n.mn-drawer[open] { display: flex; flex-direction: column; animation: mn-drawer-right 260ms var(--mn-ease); }\n.mn-drawer::backdrop { background: var(--mn-overlay); animation: mn-fade 260ms var(--mn-ease); }\n.mn-drawer-left { inset: 0 auto 0 0; border-inline-start: 0; border-inline-end: var(--mn-border-w) solid var(--mn-border); }\n.mn-drawer-left[open] { animation-name: mn-drawer-left; }\n.mn-drawer-bottom { inset: auto 0 0 0; width: 100vw; height: auto; max-height: 85dvh; border: 0; border-top: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box) var(--mn-radius-box) 0 0; }\n.mn-drawer-bottom[open] { animation-name: mn-drawer-bottom; }\n.mn-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-bottom: var(--mn-border-w) solid var(--mn-border); }\n.mn-drawer-body { flex: 1; padding: 1.25rem; overflow: auto; font-size: var(--mn-text-sm); }\n.mn-drawer-footer { display: flex; gap: .5rem; justify-content: flex-end; padding: 1rem 1.25rem; border-top: var(--mn-border-w) solid var(--mn-border); }\n.mn-drawer-bottom::before { content: \"\"; display: block; width: 2.5rem; height: 4px; margin: .6rem auto 0; border-radius: 999px; background: var(--mn-input); }\n@keyframes mn-drawer-right { from { transform: translateX(100%); } }\n@keyframes mn-drawer-left { from { transform: translateX(-100%); } }\n@keyframes mn-drawer-bottom { from { transform: translateY(100%); } }"
    },
    {
      "path": "mian/examples/drawer.html",
      "type": "registry:file",
      "target": "mian/examples/drawer.html",
      "content": "<!-- Edges -->\n<button class=\"mn-btn mn-btn-outline\" data-mn-open=\"dr-right\">Right</button>\n<button class=\"mn-btn mn-btn-outline\" data-mn-open=\"dr-left\">Left</button>\n<button class=\"mn-btn mn-btn-outline\" data-mn-open=\"dr-bottom\">Bottom</button>\n<dialog class=\"mn-drawer\" id=\"dr-right\">\n  <div class=\"mn-drawer-header\"><h2 class=\"mn-modal-title\">Filters</h2><button class=\"mn-close\" data-mn-close aria-label=\"Close\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg></button></div>\n  <div class=\"mn-drawer-body mn-stack\">\n    <label class=\"mn-check\"><input class=\"mn-checkbox\" type=\"checkbox\" checked> In stock</label>\n    <label class=\"mn-check\"><input class=\"mn-checkbox\" type=\"checkbox\"> On sale</label>\n    <div class=\"mn-field\"><label class=\"mn-label\" for=\"dr-p\">Max price</label><input class=\"mn-slider\" id=\"dr-p\" type=\"range\" value=\"40\"></div>\n  </div>\n  <div class=\"mn-drawer-footer\"><button class=\"mn-btn mn-btn-ghost\" data-mn-close>Reset</button><button class=\"mn-btn\" data-mn-close>Apply</button></div>\n</dialog>\n<dialog class=\"mn-drawer mn-drawer-left\" id=\"dr-left\">\n  <div class=\"mn-drawer-header\"><h2 class=\"mn-modal-title\">Menu</h2><button class=\"mn-close\" data-mn-close aria-label=\"Close\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg></button></div>\n  <nav class=\"mn-drawer-body mn-sidebar\" aria-label=\"Drawer navigation\"><div class=\"mn-sidebar-group\">\n    <a class=\"mn-sidebar-link\" href=\"#drawer\" aria-current=\"page\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 11 12 3l9 8\"/><path d=\"M5 10v10h14V10\"/></svg> Home</a><a class=\"mn-sidebar-link\" href=\"#drawer\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 13h5l1.5 2h5L16 13h5\"/><path d=\"M5 5h14l2 8v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Z\"/></svg> Inbox</a><a class=\"mn-sidebar-link\" href=\"#drawer\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z\"/></svg> Settings</a>\n  </div></nav>\n</dialog>\n<dialog class=\"mn-drawer mn-drawer-bottom\" id=\"dr-bottom\">\n  <div class=\"mn-drawer-body\"><h2 class=\"mn-modal-title\">Share</h2><p class=\"mn-muted\">Choose where to send this.</p>\n  <div class=\"mn-row\"><button class=\"mn-btn mn-btn-outline\" data-mn-close><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"m3 7 9 6 9-6\"/></svg> Email</button><button class=\"mn-btn mn-btn-outline\" data-mn-close><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1\"/><path d=\"M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1\"/></svg> Copy link</button></div></div>\n</dialog>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/drawer",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "dialog.mn-drawer",
        "mn-drawer-left · mn-drawer-bottom",
        "mn-drawer-header · mn-drawer-body · mn-drawer-footer"
      ],
      "accessibility": [
        "Same guarantees as Modal: focus trap, Escape, inert page, focus return."
      ],
      "intents": [
        "side panel",
        "slide over",
        "filter drawer",
        "mobile menu panel",
        "bottom sheet"
      ]
    }
  }
}