{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "title": "Dialog (Base UI)",
  "description": "Animated modal dialog with spring-based scale and opacity transitions. Base UI flavor.",
  "dependencies": [
    "framer-motion",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://zeron-ui.vercel.app/r/surfaces.json",
    "utils",
    "https://zeron-ui.vercel.app/r/springs.json",
    "https://zeron-ui.vercel.app/r/shape-context.json",
    "https://zeron-ui.vercel.app/r/surface-context.json",
    "https://zeron-ui.vercel.app/r/surface-classes.json",
    "https://zeron-ui.vercel.app/r/icon-context.json",
    "https://zeron-ui.vercel.app/r/button.json",
    "https://zeron-ui.vercel.app/r/portal-container-context.json"
  ],
  "files": [
    {
      "path": "src/components/ui/dialog.tsx",
      "content": "\"use client\";\n\nimport {\n  forwardRef,\n  type ReactNode,\n  type HTMLAttributes,\n} from \"react\";\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { motion } from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\nimport { useIcon } from \"@/lib/icon-context\";\nimport { spring } from \"@/lib/springs\";\nimport { useShape } from \"@/lib/shape-context\";\nimport {\n  resolveSurface,\n  SurfaceProvider,\n  useSurface,\n} from \"@/lib/surface-context\";\nimport { surfaceClasses } from \"@/lib/surface-classes\";\nimport { Button } from \"@/components/ui/button\";\nimport { usePortalContainer } from \"@/lib/portal-container-context\";\n\ninterface DialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  modal?: boolean;\n  children?: ReactNode;\n}\n\nfunction Dialog({\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal,\n}: DialogProps) {\n  // Base UI's Root handles controlled/uncontrolled state internally. We only\n  // narrow the (open, eventDetails) callback to (open) for our public prop.\n  return (\n    <DialogPrimitive.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={(next) => onOpenChange?.(next)}\n      modal={modal}\n    >\n      {children}\n    </DialogPrimitive.Root>\n  );\n}\n\nconst DialogTrigger = DialogPrimitive.Trigger;\nconst DialogClose = DialogPrimitive.Close;\n\ninterface DialogContentProps extends HTMLAttributes<HTMLDivElement> {\n  size?: \"sm\" | \"lg\";\n  /** Portal target. When set, the overlay and panel render inside this element\n   *  (positioned `absolute`) instead of covering the viewport (`fixed`). Pair\n   *  with a `position: relative; overflow: hidden` container — and usually\n   *  `<Dialog modal={false}>` — to scope a dialog to a bounded region, e.g. a\n   *  docs preview. Defaults to the document body / full-viewport behaviour. */\n  container?: HTMLElement | null;\n}\n\nconst DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  ({ className, children, size = \"sm\", container, ...props }, ref) => {\n    const XIcon = useIcon(\"x\");\n    const shape = useShape();\n    const substrate = useSurface();\n    const dialogSurface = resolveSurface(substrate, \"overlay\");\n    const ambientPortal = usePortalContainer();\n\n    // No `if (!open) return null` here — Base UI's `<DialogPrimitive.Popup>`\n    // handles mount/unmount itself, and waits for the framer-motion opacity\n    // tween below to finish (via `element.getAnimations()`) before unmounting.\n    // Returning null early would short-circuit the closing animation.\n    return (\n      <DialogPrimitive.Portal\n        container={container ?? ambientPortal ?? undefined}\n      >\n        <DialogPrimitive.Backdrop\n          render={(backdropProps, state) => {\n            const exiting = state.transitionStatus === \"ending\";\n            const {\n              style: _style,\n              onDrag: _onDrag,\n              onDragStart: _onDragStart,\n              onDragEnd: _onDragEnd,\n              onAnimationStart: _onAnimationStart,\n              onAnimationEnd: _onAnimationEnd,\n              onAnimationIteration: _onAnimationIteration,\n              ...rest\n            } = backdropProps as React.HTMLAttributes<HTMLDivElement>;\n            return (\n              <motion.div\n                {...rest}\n                className={cn(\n                  container ? \"absolute\" : \"fixed\",\n                  \"inset-0 z-popover bg-scrim\"\n                )}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: exiting ? 0 : 1 }}\n                transition={exiting ? spring.slow.exit : spring.slow}\n              />\n            );\n          }}\n        />\n        <DialogPrimitive.Popup\n          ref={ref}\n          render={(popupProps, state) => {\n            const exiting = state.transitionStatus === \"ending\";\n            const {\n              style: baseStyle,\n              onDrag: _onDrag,\n              onDragStart: _onDragStart,\n              onDragEnd: _onDragEnd,\n              onAnimationStart: _onAnimationStart,\n              onAnimationEnd: _onAnimationEnd,\n              onAnimationIteration: _onAnimationIteration,\n              ...rest\n            } = popupProps as React.HTMLAttributes<HTMLDivElement>;\n            return (\n              <motion.div\n                // Base UI's props first (data attrs, refs, role, etc.)…\n                {...rest}\n                // …then the consumer's `<DialogContent>` props (className,\n                // event handlers, data-*, etc.) land on the visible motion.div.\n                {...(props as Omit<\n                  React.HTMLAttributes<HTMLDivElement>,\n                  | \"onDrag\"\n                  | \"onDragStart\"\n                  | \"onDragEnd\"\n                  | \"onAnimationStart\"\n                  | \"onAnimationEnd\"\n                  | \"onAnimationIteration\"\n                >)}\n                className={cn(\n                  container ? \"absolute\" : \"fixed\",\n                  \"left-1/2 top-1/2 z-popover w-[calc(100%-2rem)]\",\n                  surfaceClasses(dialogSurface, \"overlay\"),\n                  \"p-6 focus:outline-none\",\n                  size === \"sm\" && \"max-w-[400px]\",\n                  size === \"lg\" && \"max-w-[540px]\",\n                  shape.container,\n                  className\n                )}\n                style={{\n                  ...(baseStyle as React.CSSProperties | undefined),\n                  ...(props.style as React.CSSProperties | undefined),\n                }}\n                initial={{ opacity: 0, scale: 0.97, x: \"-50%\", y: \"-50%\" }}\n                animate={{\n                  opacity: exiting ? 0 : 1,\n                  scale: exiting ? 0.97 : 1,\n                  x: \"-50%\",\n                  y: \"-50%\",\n                }}\n                transition={exiting ? spring.slow.exit : spring.slow}\n              >\n                <SurfaceProvider role={dialogSurface}>\n                  {children}\n                  <DialogPrimitive.Close\n                    render={\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"absolute right-3 top-3\"\n                      >\n                        <XIcon />\n                        <span className=\"sr-only\">Close</span>\n                      </Button>\n                    }\n                  />\n                </SurfaceProvider>\n              </motion.div>\n            );\n          }}\n        />\n      </DialogPrimitive.Portal>\n    );\n  }\n);\nDialogContent.displayName = \"DialogContent\";\n\nfunction DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-1.5 mb-4\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"flex justify-end gap-2 mt-6\", className)}\n      {...props}\n    />\n  );\n}\n\nconst DialogTitle = forwardRef<\n  HTMLHeadingElement,\n  HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"text-title text-fg-default leading-tight font-bold\", className)}\n    {...props}\n  />\n));\nDialogTitle.displayName = \"DialogTitle\";\n\nconst DialogDescription = forwardRef<\n  HTMLParagraphElement,\n  HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-body text-fg-muted\", className)}\n    {...props}\n  />\n));\nDialogDescription.displayName = \"DialogDescription\";\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/dialog.tsx"
    }
  ],
  "type": "registry:ui"
}