{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "title": "Dialog",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/dialog/dialog.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/components/ui/button'\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>\n>(({ ...props }, ref) => <DialogPrimitive.Trigger ref={ref} data-uipkge=\"\" data-slot=\"dialog-trigger\" {...props} />)\nDialogTrigger.displayName = DialogPrimitive.Trigger.displayName\n\nconst DialogClose = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Close>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>\n>(({ ...props }, ref) => <DialogPrimitive.Close ref={ref} data-uipkge=\"\" data-slot=\"dialog-close\" {...props} />)\nDialogClose.displayName = DialogPrimitive.Close.displayName\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"dialog-overlay\"\n    className={cn(\n      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-foreground/50 fixed inset-0 z-50',\n      className,\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\ninterface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  showCloseButton?: boolean\n}\n\nconst DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(\n  ({ className, children, showCloseButton = true, ...props }, ref) => (\n    <DialogPrimitive.Portal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        data-uipkge=\"\"\n        data-slot=\"dialog-content\"\n        role=\"dialog\"\n        className={cn(\n          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-uipkge=\"\"\n            data-slot=\"dialog-close\"\n            className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          >\n            <X />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  ),\n)\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogScrollContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPrimitive.Portal>\n    <DialogPrimitive.Overlay className=\"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-foreground/50 fixed inset-0 z-50 grid place-items-center overflow-y-auto\">\n      <DialogPrimitive.Content\n        ref={ref}\n        className={cn(\n          'bg-background relative z-50 my-8 grid w-full max-w-lg gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',\n          className,\n        )}\n        onPointerDownOutside={(event) => {\n          const originalEvent = event.detail.originalEvent\n          const target = originalEvent.target as HTMLElement\n          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {\n            event.preventDefault()\n          }\n        }}\n        {...props}\n      >\n        {children}\n\n        <DialogPrimitive.Close className=\"hover:bg-secondary absolute top-4 right-4 rounded-md p-0.5 transition-colors duration-200\">\n          <X className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Close</span>\n        </DialogPrimitive.Close>\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Overlay>\n  </DialogPrimitive.Portal>\n))\nDialogScrollContent.displayName = 'DialogScrollContent'\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    data-uipkge=\"\"\n    data-slot=\"dialog-header\"\n    className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n    {...props}\n  />\n)\nDialogHeader.displayName = 'DialogHeader'\n\ninterface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  showCloseButton?: boolean\n}\n\nconst DialogFooter = ({ className, children, showCloseButton = false, ...props }: DialogFooterProps) => (\n  <div\n    data-uipkge=\"\"\n    data-slot=\"dialog-footer\"\n    className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}\n    {...props}\n  >\n    {children}\n    {showCloseButton && (\n      <DialogPrimitive.Close asChild>\n        <Button variant=\"outline\">Close</Button>\n      </DialogPrimitive.Close>\n    )}\n  </div>\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = 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    data-uipkge=\"\"\n    data-slot=\"dialog-title\"\n    className={cn('text-lg leading-none font-semibold', className)}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = 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    data-uipkge=\"\"\n    data-slot=\"dialog-description\"\n    className={cn('text-muted-foreground text-sm', className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogClose,\n  DialogOverlay,\n  DialogContent,\n  DialogScrollContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n",
      "type": "registry:ui",
      "target": "~/components/ui/dialog/dialog.tsx"
    },
    {
      "path": "packages/registry-react/components/dialog/index.ts",
      "content": "export {\n  Dialog,\n  DialogTrigger,\n  DialogClose,\n  DialogOverlay,\n  DialogContent,\n  DialogScrollContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n} from './dialog'\n",
      "type": "registry:ui",
      "target": "~/components/ui/dialog/index.ts"
    }
  ],
  "dependencies": [
    "@radix-ui/react-dialog",
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json"
  ],
  "description": "Free-form modal primitive — composable from `Dialog`, `DialogTrigger`, `DialogContent`, and friends. Use for forms, info cards, pickers, and any custom modal layout. For confirm/destructive prompts, prefer the prebuilt `AlertModal` shortcut.",
  "categories": [
    "overlay"
  ]
}