{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": ["@radix-ui/react-dialog", "motion", "lucide-react"],
  "devDependencies": [],
  "files": [
    {
      "path": "dialog.tsx",
      "content": "\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { X } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst controlCornerClassName =\n  \"rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]\";\n\nconst surfaceCornerClassName =\n  \"rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[12px]\";\n\nconst dialogThemeClassName =\n  \"[--dlg-surface:#ffffff] [--dlg-foreground:#111111] [--dlg-border:#e3e7ec] [--dlg-muted:#f5f7fa] [--color-accent:var(--dlg-muted)] [--color-accent-foreground:var(--dlg-foreground)] [--dlg-muted-foreground:#6d7480] dark:[--dlg-surface:#171717] dark:[--dlg-foreground:#f6f3ec] dark:[--dlg-border:#2b2a25] dark:[--dlg-muted:#1a1a18] dark:[--dlg-muted-foreground:#9a958a]\";\n\nconst dialogContentClassName = cn(\n  surfaceCornerClassName,\n  \"relative flex w-[min(100%,32rem)] max-w-lg flex-col gap-4 overflow-y-auto border border-[color:var(--dlg-border)] bg-[color:var(--dlg-surface)] p-6 text-[color:var(--dlg-foreground)] shadow-2xl\"\n);\n\nconst dialogCloseClassName = cn(\n  controlCornerClassName,\n  \"absolute top-4 right-4 p-1.5 text-[color:var(--dlg-foreground)] opacity-70 transition-colors hover:bg-accent/60 hover:opacity-100 focus:outline-none disabled:pointer-events-none\"\n);\n\nconst Dialog = DialogPrimitive.Root;\nconst DialogTrigger = DialogPrimitive.Trigger;\nconst DialogClose = DialogPrimitive.Close;\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst overlayVariants = {\n  hidden: { opacity: 0 },\n  visible: { opacity: 1 },\n};\n\nconst contentVariants = {\n  hidden: {\n    opacity: 0,\n    scale: 0.85,\n    y: 30,\n    filter: \"blur(8px)\",\n  },\n  visible: {\n    opacity: 1,\n    scale: 1,\n    y: 0,\n    filter: \"blur(0px)\",\n    transition: {\n      type: \"spring\" as const,\n      damping: 25,\n      stiffness: 300,\n      mass: 0.8,\n      staggerChildren: 0.07,\n      delayChildren: 0.1,\n    },\n  },\n  exit: {\n    opacity: 0,\n    scale: 0.92,\n    y: 15,\n    filter: \"blur(4px)\",\n    transition: {\n      type: \"spring\" as const,\n      damping: 30,\n      stiffness: 400,\n      duration: 0.2,\n    },\n  },\n};\n\nconst childVariants = {\n  hidden: { opacity: 0, y: 12 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: { type: \"spring\" as const, damping: 20, stiffness: 300 },\n  },\n};\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n    open?: boolean;\n  }\n>(({ className, children, open, ...props }, ref) => (\n  <AnimatePresence>\n    {open && (\n      <DialogPortal forceMount>\n        <DialogPrimitive.Overlay asChild forceMount>\n          <motion.div\n            animate=\"visible\"\n            className=\"fixed inset-0 z-50 bg-black/45 backdrop-blur-sm dark:bg-black/60\"\n            exit=\"hidden\"\n            initial=\"hidden\"\n            transition={{ duration: 0.25, ease: \"easeOut\" }}\n            variants={overlayVariants}\n          />\n        </DialogPrimitive.Overlay>\n        <DialogPrimitive.Content\n          className=\"fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-transparent p-4 outline-none\"\n          forceMount\n          ref={ref}\n          {...props}\n        >\n          <motion.div\n            animate=\"visible\"\n            className={cn(\n              dialogThemeClassName,\n              dialogContentClassName,\n              \"max-h-[min(90svh,calc(100svh-env(safe-area-inset-top,0px)-env(safe-area-inset-bottom,0px)-2rem))]\",\n              className\n            )}\n            exit=\"exit\"\n            initial=\"hidden\"\n            variants={contentVariants}\n          >\n            {React.Children.map(children, (child) => (\n              <motion.div variants={childVariants}>{child}</motion.div>\n            ))}\n            <DialogPrimitive.Close className={dialogCloseClassName}>\n              <X className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Close</span>\n            </DialogPrimitive.Close>\n          </motion.div>\n        </DialogPrimitive.Content>\n      </DialogPortal>\n    )}\n  </AnimatePresence>\n));\nDialogContent.displayName = \"DialogContent\";\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"flex flex-col space-y-1.5 text-start\", className)}\n    {...props}\n  />\n);\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse items-stretch gap-2 sm:flex-row sm:items-center sm:justify-end sm:gap-0 sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n);\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    className={cn(\n      \"mb-4 font-semibold text-lg leading-none tracking-tight\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n));\nDialogTitle.displayName = \"DialogTitle\";\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    className={cn(\n      \"text-[color:var(--dlg-muted-foreground)] text-sm\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n));\nDialogDescription.displayName = \"DialogDescription\";\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogClose,\n  DialogPortal,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n};\n",
      "type": "registry:ui"
    }
  ],
  "title": "Dialog",
  "description": "Modal dialog on Radix Dialog with Motion overlay and content springs, staggered children, and an animated close control. Pass the same open boolean to DialogContent as the Dialog root for AnimatePresence."
}