{
  "$schema": "https://ethereal-ui.saefulrohman.dev/schema/registry-item.json",
  "name": "drawer",
  "title": "Drawer",
  "type": "registry:primitives",
  "description": "Slide-over side panel anchored to the left or right viewport edge for inspecting table rows or forms.",
  "dependencies": [
    "@radix-ui/react-dialog",
    "lucide-react"
  ],
  "usage": "import {\n  Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, Button\n} from \"@etherealui/react\"\n\nexport function DrawerDemo() {\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent side=\"right\">\n        <DrawerHeader>\n          <DrawerTitle>Customer Details</DrawerTitle>\n          <DrawerDescription>Subscription and billing breakdown</DrawerDescription>\n        </DrawerHeader>\n        <div className=\"py-6 text-xs text-zinc-500\">\n          Drawer body content goes here.\n        </div>\n        <DrawerFooter>\n          <Button variant=\"primary\" size=\"sm\">Save changes</Button>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}",
  "files": [
    {
      "path": "packages/ui/src/primitives/drawer.tsx",
      "target": "components/ui/drawer.tsx",
      "type": "registry:primitives",
      "content": "import * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\nimport { cn } from \"../utils/cn\"\n\nconst Drawer = DialogPrimitive.Root\nconst DrawerTrigger = DialogPrimitive.Trigger\nconst DrawerClose = DialogPrimitive.Close\n\nexport interface DrawerContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  side?: \"right\" | \"left\"\n}\n\nconst DrawerContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  DrawerContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <DialogPrimitive.Portal>\n    <DialogPrimitive.Overlay className=\"fixed inset-0 z-50 bg-black/50 backdrop-blur-xs transition-opacity\" />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed inset-y-0 z-50 flex h-full w-full max-w-md flex-col border-zinc-200 bg-white p-6 text-zinc-900 shadow-2xl focus:outline-none dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100\",\n        side === \"right\" ? \"right-0 border-l\" : \"left-0 border-r\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-lg p-1.5 text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700 focus:outline-none dark:hover:bg-zinc-800 dark:hover:text-zinc-200 cursor-pointer\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close drawer</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPrimitive.Portal>\n))\nDrawerContent.displayName = \"DrawerContent\"\n\nconst DrawerHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"flex flex-col space-y-1.5 border-b border-zinc-200 pb-4 dark:border-zinc-800\", className)}\n    {...props}\n  />\n)\nDrawerHeader.displayName = \"DrawerHeader\"\n\nconst DrawerTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"text-base font-semibold text-zinc-900 dark:text-zinc-100\", className)}\n    {...props}\n  />\n))\nDrawerTitle.displayName = \"DrawerTitle\"\n\nconst DrawerDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-xs text-zinc-500 dark:text-zinc-400\", className)}\n    {...props}\n  />\n))\nDrawerDescription.displayName = DialogPrimitive.Description.displayName\n\nconst DrawerFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"mt-auto flex items-center justify-end gap-2 border-t border-zinc-200 pt-4 dark:border-zinc-800\", className)}\n    {...props}\n  />\n)\nDrawerFooter.displayName = \"DrawerFooter\"\n\nexport {\n  Drawer,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerDescription,\n  DrawerFooter,\n}\n"
    }
  ]
}