{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "type": "registry:ui",
  "title": "Dialog",
  "description": "Pop-Brutalist modal popover with pastel surface variants.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/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'\n\nexport const DialogTrigger = DialogPrimitive.Trigger\nexport const DialogPortal = DialogPrimitive.Portal\nexport const DialogClose = DialogPrimitive.Close\n\nexport const 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    className={cn(\n      'fixed inset-0 z-50 bg-black/60 backdrop-blur-xs data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nexport const dialogContentVariants = {\n  white: 'bg-white text-rk-ink',\n  mint: 'bg-rk-mint text-rk-ink',\n  peach: 'bg-rk-peach text-rk-ink',\n  lavender: 'bg-rk-lavender text-rk-ink',\n  sky: 'bg-rk-sky text-rk-ink',\n  pink: 'bg-rk-pink text-rk-ink',\n  yellow: 'bg-rk-primary text-rk-ink',\n} as const\n\nexport type DialogVariant = keyof typeof dialogContentVariants\n\nexport interface DialogContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  variant?: DialogVariant\n  showCloseButton?: boolean\n}\n\nexport const DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(({ className, children, variant = 'lavender', showCloseButton = true, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        'fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-[32px] rk-border rk-shadow-xl p-6 lg:p-8 font-sans transition-all duration-200 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',\n        dialogContentVariants[variant],\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close className=\"absolute top-5 right-5 w-9 h-9 rounded-full bg-white rk-border-sm flex items-center justify-center font-bold rk-shadow-sm hover:bg-rk-primary transition-colors focus:outline-none focus:ring-4 focus:ring-black cursor-pointer shrink-0 p-0 aspect-square\">\n          <X className=\"w-5 h-5 stroke-[2.5]\" />\n          <span className=\"sr-only\">Close</span>\n        </DialogPrimitive.Close>\n      )}\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nexport const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('flex flex-col space-y-1.5 text-left', className)} {...props} />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nexport const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nexport const 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    className={cn('font-display text-2xl sm:text-3xl font-black tracking-tight pr-8', className)}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nexport const 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    className={cn('text-sm font-bold opacity-70', className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\n/* ------------------------------------------------------------------ */\n/* Compound API root + legacy compatibility wrapper                    */\n/* ------------------------------------------------------------------ */\n\nexport const DialogRoot = DialogPrimitive.Root\n\nexport interface DialogProps {\n  open: boolean\n  onClose: () => void\n  title?: string\n  description?: string\n  children?: React.ReactNode\n  variant?: DialogVariant\n}\n\nexport function Dialog({ open, onClose, title, description, children, variant = 'lavender' }: DialogProps) {\n  return (\n    <DialogRoot open={open} onOpenChange={(next) => !next && onClose()}>\n      <DialogContent variant={variant}>\n        {title && <DialogTitle>{title}</DialogTitle>}\n        {description && <DialogDescription>{description}</DialogDescription>}\n        <div className=\"pt-2\">{children}</div>\n      </DialogContent>\n    </DialogRoot>\n  )\n}\n\n",
      "type": "registry:ui",
      "target": "components/ui/dialog.tsx"
    }
  ]
}