{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "dialog",
  "title": "Dialog",
  "author": "Matthew Blode",
  "description": "A modal window that overlays the main content and requires user interaction.",
  "dependencies": ["@base-ui/react"],
  "registryDependencies": ["button"],
  "files": [
    {
      "path": "ui/dialog.tsx",
      "content": "\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { XIcon } from \"blode-icons-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\n\nconst Dialog = ({ ...props }: DialogPrimitive.Root.Props) => (\n  <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n);\n\nconst DialogTrigger = ({\n  asChild,\n  children,\n  ...props\n}: DialogPrimitive.Trigger.Props & {\n  asChild?: boolean;\n}) => {\n  if (asChild && React.isValidElement(children)) {\n    return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" render={children} {...props} />;\n  }\n\n  return (\n    <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props}>\n      {children}\n    </DialogPrimitive.Trigger>\n  );\n};\n\nconst DialogPortal = ({ ...props }: DialogPrimitive.Portal.Props) => (\n  <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n);\n\nconst DialogClose = ({\n  asChild,\n  children,\n  ...props\n}: DialogPrimitive.Close.Props & {\n  asChild?: boolean;\n}) => {\n  if (asChild && React.isValidElement(children)) {\n    return <DialogPrimitive.Close data-slot=\"dialog-close\" render={children} {...props} />;\n  }\n\n  return (\n    <DialogPrimitive.Close data-slot=\"dialog-close\" {...props}>\n      {children}\n    </DialogPrimitive.Close>\n  );\n};\n\nconst DialogOverlay = ({ className, ...props }: DialogPrimitive.Backdrop.Props) => (\n  <DialogPrimitive.Backdrop\n    className={cn(\n      \"data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-overlay backdrop-blur-[10px] data-closed:animate-out data-open:animate-in data-closed:duration-300 data-open:duration-500 motion-reduce:transition-none\",\n      className,\n    )}\n    data-slot=\"dialog-overlay\"\n    {...props}\n  />\n);\n\nconst DialogContent = ({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n}) => (\n  <DialogPortal data-slot=\"dialog-portal\">\n    <DialogOverlay />\n    <DialogPrimitive.Popup\n      className={cn(\n        \"data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 bg-background p-6 shadow-lg outline-none duration-200 data-closed:animate-out data-open:animate-in motion-reduce:transition-none sm:max-w-lg\",\n        className,\n      )}\n      data-slot=\"dialog-content\"\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close\n          className=\"absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n          data-slot=\"dialog-close\"\n        >\n          <XIcon />\n          <span className=\"sr-only\">Close</span>\n        </DialogPrimitive.Close>\n      )}\n    </DialogPrimitive.Popup>\n  </DialogPortal>\n);\n\nconst DialogHeader = ({ className, ...props }: React.ComponentProps<\"div\">) => (\n  <div\n    className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n    data-slot=\"dialog-header\"\n    {...props}\n  />\n);\n\nconst DialogFooter = ({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean;\n}) => (\n  <div\n    className={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n    data-slot=\"dialog-footer\"\n    {...props}\n  >\n    {children}\n    {showCloseButton && (\n      <DialogPrimitive.Close render={<Button variant=\"outline\" />}>Close</DialogPrimitive.Close>\n    )}\n  </div>\n);\n\nconst DialogTitle = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) => (\n  <DialogPrimitive.Title\n    className={cn(\"font-semibold text-lg leading-none\", className)}\n    data-slot=\"dialog-title\"\n    {...props}\n  />\n);\n\nconst DialogDescription = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) => (\n  <DialogPrimitive.Description\n    className={cn(\"text-muted-foreground text-sm\", className)}\n    data-slot=\"dialog-description\"\n    {...props}\n  />\n);\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}