{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drawer",
  "type": "registry:ui",
  "title": "Drawer",
  "description": "Bottom drawer that slides a sheet up from the screen edge with a titled header, close button and scrolling body, capped at 80% of the viewport height.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "https://ui.minidev.pro/r/sheet.json"
  ],
  "files": [
    {
      "path": "registry/ui/drawer.tsx",
      "type": "registry:ui",
      "target": "components/ui/drawer.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { Sheet } from \"@/components/ui/sheet\"\n\n/** A bottom sheet for quick actions and mobile forms: a Sheet that slides up from the bottom edge. */\ntype DrawerProps = {\n  /** Controlled open state. Leave it out and the drawer renders its own \"Open drawer\" button. */\n  open?: boolean\n  onClose?: () => void\n  /** Edge the drawer slides from. */\n  side?: \"left\" | \"right\" | \"top\" | \"bottom\"\n  /** Title in the drawer's header bar. */\n  title?: string\n  /** Drawer content. Defaults to a Lumen invoice action list. */\n  children?: React.ReactNode\n  /** Rendered when the drawer is uncontrolled. Defaults to an \"Open drawer\" button. */\n  trigger?: React.ReactNode\n  /** Extra classes for the panel. */\n  className?: string\n}\n\nconst SAMPLE_TITLE = \"Invoice INV-2041\"\n\nconst SAMPLE_ACTIONS = [\n  { label: \"Send reminder\", hint: \"Email Northwind's billing contact\" },\n  { label: \"Record payment\", hint: \"$12,400.00 outstanding\" },\n  { label: \"Download PDF\", hint: \"Issued Sep 24, 2026\" },\n  { label: \"Void invoice\", hint: \"Cannot be undone\", danger: true },\n]\n\nconst SAMPLE_CONTENT = (\n  <ul className=\"mx-auto max-w-md space-y-1\">\n    {SAMPLE_ACTIONS.map((a) => (\n      <li key={a.label}>\n        <button\n          type=\"button\"\n          className=\"flex w-full flex-col rounded-lg px-3 py-2 text-left outline-none hover:bg-sunken focus-visible:ring-2 focus-visible:ring-accent\"\n        >\n          <span className={a.danger ? \"text-sm font-medium text-danger\" : \"text-sm font-medium text-fg\"}>{a.label}</span>\n          <span className=\"text-xs text-fg-muted\">{a.hint}</span>\n        </button>\n      </li>\n    ))}\n  </ul>\n)\n\nfunction Drawer({ open, onClose, side = \"bottom\", title, children, trigger, className }: DrawerProps) {\n  const controlled = open !== undefined\n  const [internal, setInternal] = React.useState(false)\n  const isOpen = controlled ? open : internal\n  const close = () => {\n    if (!controlled) setInternal(false)\n    onClose?.()\n  }\n  return (\n    <div data-slot=\"drawer\" className=\"contents\">\n      {!controlled\n        ? trigger ?? (\n            <Button type=\"button\" variant=\"outline\" aria-haspopup=\"dialog\" aria-expanded={isOpen} onClick={() => setInternal(true)}>\n              Open drawer\n            </Button>\n          )\n        : null}\n      <Sheet open={isOpen} onClose={close} side={side} title={title ?? (children === undefined ? SAMPLE_TITLE : undefined)} className={className}>\n        {children ?? SAMPLE_CONTENT}\n      </Sheet>\n    </div>\n  )\n}\nexport { Drawer }\nexport type { DrawerProps }\n"
    }
  ]
}