{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drawer",
  "type": "registry:ui",
  "title": "Drawer",
  "description": "Slide-over panel for inspecting logs, resources, and configurations without losing page context.",
  "registryDependencies": [
    "https://ui.arpitbhayani.me/r/aui.json"
  ],
  "files": [
    {
      "path": "ui/drawer.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface DrawerProps {\n  isOpen: boolean;\n  onClose: () => void;\n  side?: \"left\" | \"right\" | \"bottom\";\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  children: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n  closeOnBackdropClick?: boolean;\n}\n\nexport function Drawer({\n  isOpen,\n  onClose,\n  side = \"right\",\n  size = \"md\",\n  title,\n  description,\n  children,\n  footer,\n  className,\n  closeOnBackdropClick = true,\n}: DrawerProps) {\n  const [mounted, setMounted] = React.useState(false);\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  React.useEffect(() => {\n    if (!isOpen) return;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        e.stopPropagation();\n        onClose();\n      }\n    };\n    document.addEventListener(\"keydown\", handleKeyDown);\n    const originalOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown);\n      document.body.style.overflow = originalOverflow;\n    };\n  }, [isOpen, onClose]);\n\n  if (!isOpen || !mounted) return null;\n\n  const sizeClasses = {\n    sm: side === \"bottom\" ? \"h-[300px]\" : \"w-full sm:max-w-sm\",\n    md: side === \"bottom\" ? \"h-[450px]\" : \"w-full sm:max-w-md\",\n    lg: side === \"bottom\" ? \"h-[600px]\" : \"w-full sm:max-w-lg\",\n    xl: side === \"bottom\" ? \"h-[750px]\" : \"w-full sm:max-w-xl\",\n    full: \"w-screen h-screen\",\n  };\n\n  const sideClasses = {\n    right: \"inset-y-0 right-0 border-l border-border\",\n    left: \"inset-y-0 left-0 border-r border-border\",\n    bottom: \"inset-x-0 bottom-0 border-t border-border max-h-[85vh]\",\n  };\n\n  const node = (\n    <div\n      className=\"fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] animate-in fade-in-0\"\n      onClick={(e) => {\n        if (closeOnBackdropClick && e.target === e.currentTarget) {\n          onClose();\n        }\n      }}\n      role=\"dialog\"\n      aria-modal=\"true\"\n    >\n      <div\n        className={cn(\n          \"fixed bg-card text-card-foreground shadow-2xl flex flex-col overflow-hidden transition-all duration-300\",\n          sideClasses[side],\n          sizeClasses[size],\n          className\n        )}\n      >\n        <div className=\"flex items-start justify-between px-6 py-5 border-b border-border\">\n          <div className=\"flex flex-col gap-1\">\n            {title && (\n              <h3 className=\"font-heading font-semibold text-lg text-foreground\">\n                {title}\n              </h3>\n            )}\n            {description && (\n              <p className=\"text-xs text-muted-foreground\">{description}</p>\n            )}\n          </div>\n          <button\n            type=\"button\"\n            className=\"w-7 h-7 inline-flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors\"\n            onClick={onClose}\n            aria-label=\"Close drawer\"\n          >\n            ✕\n          </button>\n        </div>\n\n        <div className=\"flex-1 p-6 overflow-y-auto text-sm\">{children}</div>\n\n        {footer && (\n          <div className=\"flex items-center justify-end gap-2 px-6 py-4 bg-muted/30 border-t border-border\">\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n\n  return typeof document !== \"undefined\"\n    ? createPortal(node, document.body)\n    : null;\n}\n\nexport const Sheet = Drawer;\n",
      "type": "registry:ui"
    }
  ]
}