{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drawer",
  "files": [
    {
      "path": "registry/new-york/ui/drawer.tsx",
      "content": "import { X } from \"lucide-react\";\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface DrawerContextValue {\n\topen: boolean;\n\tonOpenChange: (open: boolean) => void;\n}\n\nconst DrawerContext = React.createContext<DrawerContextValue | null>(null);\n\nfunction useDrawerContext() {\n\tconst context = React.useContext(DrawerContext);\n\tif (!context) {\n\t\tthrow new Error(\"Drawer components must be used within a Drawer\");\n\t}\n\treturn context;\n}\n\ninterface DrawerProps {\n\tchildren: React.ReactNode;\n\topen?: boolean;\n\tonOpenChange?: (open: boolean) => void;\n}\n\nfunction Drawer({ children, open: controlledOpen, onOpenChange }: DrawerProps) {\n\tconst [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);\n\tconst isControlled = controlledOpen !== undefined;\n\tconst open = isControlled ? controlledOpen : uncontrolledOpen;\n\n\tconst handleOpenChange = React.useCallback(\n\t\t(newOpen: boolean) => {\n\t\t\tif (!isControlled) {\n\t\t\t\tsetUncontrolledOpen(newOpen);\n\t\t\t}\n\t\t\tonOpenChange?.(newOpen);\n\t\t},\n\t\t[isControlled, onOpenChange],\n\t);\n\n\treturn (\n\t\t<DrawerContext.Provider value={{ open, onOpenChange: handleOpenChange }}>\n\t\t\t{children}\n\t\t</DrawerContext.Provider>\n\t);\n}\n\ninterface DrawerTriggerProps\n\textends React.ButtonHTMLAttributes<HTMLButtonElement> {\n\tasChild?: boolean;\n}\n\nfunction DrawerTrigger({\n\tchildren,\n\tasChild,\n\tonClick,\n\t...props\n}: DrawerTriggerProps) {\n\tconst { onOpenChange } = useDrawerContext();\n\n\tconst handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n\t\tonClick?.(e);\n\t\tonOpenChange(true);\n\t};\n\n\tif (asChild && React.isValidElement(children)) {\n\t\treturn React.cloneElement(\n\t\t\tchildren as React.ReactElement<{ onClick?: React.MouseEventHandler }>,\n\t\t\t{\n\t\t\t\tonClick: handleClick,\n\t\t\t},\n\t\t);\n\t}\n\n\treturn (\n\t\t<button type=\"button\" onClick={handleClick} {...props}>\n\t\t\t{children}\n\t\t</button>\n\t);\n}\n\ninterface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nfunction DrawerContent({ className, children, ...props }: DrawerContentProps) {\n\tconst { open, onOpenChange } = useDrawerContext();\n\n\tReact.useEffect(() => {\n\t\tconst handleEscape = (e: KeyboardEvent) => {\n\t\t\tif (e.key === \"Escape\") {\n\t\t\t\tonOpenChange(false);\n\t\t\t}\n\t\t};\n\n\t\tif (open) {\n\t\t\tdocument.addEventListener(\"keydown\", handleEscape);\n\t\t\tdocument.body.style.overflow = \"hidden\";\n\t\t}\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"keydown\", handleEscape);\n\t\t\tdocument.body.style.overflow = \"\";\n\t\t};\n\t}, [open, onOpenChange]);\n\n\tif (!open) return null;\n\n\treturn createPortal(\n\t\t<div className=\"fixed inset-0 z-50 flex justify-end\">\n\t\t\t<div\n\t\t\t\tclassName=\"fixed inset-0 bg-black/50\"\n\t\t\t\tonClick={() => onOpenChange(false)}\n\t\t\t\tonKeyDown={(e) => e.key === \"Escape\" && onOpenChange(false)}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabIndex={-1}\n\t\t\t\taria-label=\"Close drawer\"\n\t\t\t/>\n\t\t\t<div\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"relative z-50 flex h-full w-full max-w-lg flex-col border-l bg-background shadow-lg\",\n\t\t\t\t\t\"animate-in slide-in-from-right\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\"\n\t\t\t\t\tonClick={() => onOpenChange(false)}\n\t\t\t\t>\n\t\t\t\t\t<X className=\"h-4 w-4\" />\n\t\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t\t</button>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>,\n\t\tdocument.body,\n\t);\n}\n\nfunction DrawerHeader({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"flex flex-col space-y-1.5 p-6 pb-0\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DrawerFooter({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"mt-auto flex flex-col gap-2 p-6 pt-0\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DrawerTitle({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLHeadingElement>) {\n\treturn (\n\t\t<h2\n\t\t\tclassName={cn(\n\t\t\t\t\"text-lg font-semibold leading-none tracking-tight\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DrawerDescription({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLParagraphElement>) {\n\treturn (\n\t\t<p className={cn(\"text-sm text-muted-foreground\", className)} {...props} />\n\t);\n}\n\nfunction DrawerClose({\n\tchildren,\n\t...props\n}: React.ButtonHTMLAttributes<HTMLButtonElement>) {\n\tconst { onOpenChange } = useDrawerContext();\n\n\treturn (\n\t\t<button type=\"button\" onClick={() => onOpenChange(false)} {...props}>\n\t\t\t{children}\n\t\t</button>\n\t);\n}\n\nexport {\n\tDrawer,\n\tDrawerTrigger,\n\tDrawerContent,\n\tDrawerHeader,\n\tDrawerFooter,\n\tDrawerTitle,\n\tDrawerDescription,\n\tDrawerClose,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}