{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "type": "registry:ui",
  "description": "Display focused content in a modal overlay.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "components/ui/dialog.tsx",
      "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\"\r\nimport { X } from \"lucide-react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Dialog = BaseDialog.Root\r\n\r\nconst DialogTrigger = BaseDialog.Trigger\r\n\r\nconst DialogPortal = BaseDialog.Portal\r\n\r\nconst DialogClose = BaseDialog.Close\r\n\r\ntype DialogOverlayProps = React.ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>\r\n\r\nconst DialogOverlay = React.forwardRef<\r\n    React.ComponentRef<typeof BaseDialog.Backdrop>,\r\n    DialogOverlayProps\r\n>(({ className, ...props }, ref) => (\r\n    <BaseDialog.Backdrop\r\n        ref={ref}\r\n        className={cn(\r\n            \"fixed inset-0 z-50 bg-black opacity-80 transition-opacity data-ending-style:opacity-0 data-starting-style:opacity-0\",\r\n            className\r\n        )}\r\n        {...props}\r\n    />\r\n))\r\nDialogOverlay.displayName = \"DialogOverlay\"\r\n\r\ntype DialogContentProps = React.ComponentPropsWithoutRef<typeof BaseDialog.Popup>\r\n\r\nconst DialogContent = React.forwardRef<\r\n    React.ComponentRef<typeof BaseDialog.Popup>,\r\n    DialogContentProps\r\n>(({ className, children, ...props }, ref) => (\r\n    <DialogPortal>\r\n        <DialogOverlay />\r\n        <BaseDialog.Popup\r\n            ref={ref}\r\n            className={cn(\r\n                \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-2 border-black bg-white p-6 shadow-brutal duration-200 transition-opacity motion-reduce:transition-none data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 rounded-base\",\r\n                className\r\n            )}\r\n            {...props}\r\n        >\r\n            {children}\r\n            <BaseDialog.Close aria-label=\"Close dialog\" className=\"absolute right-4 top-4 rounded-base opacity-70 transition-opacity hover:opacity-100 focus-brutal disabled:pointer-events-none\">\r\n                <X className=\"h-4 w-4\" />\r\n                <span className=\"sr-only\">Close</span>\r\n            </BaseDialog.Close>\r\n        </BaseDialog.Popup>\r\n    </DialogPortal>\r\n))\r\nDialogContent.displayName = \"DialogContent\"\r\n\r\nconst DialogHeader = ({\r\n    className,\r\n    ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => (\r\n    <div\r\n        className={cn(\r\n            \"flex flex-col space-y-1.5 text-center sm:text-left\",\r\n            className\r\n        )}\r\n        {...props}\r\n    />\r\n)\r\nDialogHeader.displayName = \"DialogHeader\"\r\n\r\nconst DialogFooter = ({\r\n    className,\r\n    ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => (\r\n    <div\r\n        className={cn(\r\n            \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\r\n            className\r\n        )}\r\n        {...props}\r\n    />\r\n)\r\nDialogFooter.displayName = \"DialogFooter\"\r\n\r\ntype DialogTitleProps = React.ComponentPropsWithoutRef<typeof BaseDialog.Title>\r\n\r\nconst DialogTitle = React.forwardRef<\r\n    React.ComponentRef<typeof BaseDialog.Title>,\r\n    DialogTitleProps\r\n>(({ className, ...props }, ref) => (\r\n    <BaseDialog.Title\r\n        ref={ref}\r\n        className={cn(\r\n            \"text-lg font-semibold leading-none tracking-tight text-black\",\r\n            className\r\n        )}\r\n        {...props}\r\n    />\r\n))\r\nDialogTitle.displayName = \"DialogTitle\"\r\n\r\ntype DialogDescriptionProps = React.ComponentPropsWithoutRef<typeof BaseDialog.Description>\r\n\r\nconst DialogDescription = React.forwardRef<\r\n    React.ComponentRef<typeof BaseDialog.Description>,\r\n    DialogDescriptionProps\r\n>(({ className, ...props }, ref) => (\r\n    <BaseDialog.Description\r\n        ref={ref}\r\n        className={cn(\"text-sm text-black\", className)}\r\n        {...props}\r\n    />\r\n))\r\nDialogDescription.displayName = \"DialogDescription\"\r\n\r\nexport {\r\n    Dialog,\r\n    DialogPortal,\r\n    DialogOverlay,\r\n    DialogClose,\r\n    DialogTrigger,\r\n    DialogContent,\r\n    DialogHeader,\r\n    DialogFooter,\r\n    DialogTitle,\r\n    DialogDescription,\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}