{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "title": "Dialog",
  "author": "Tori Bryan",
  "description": "A window over the page for a short task, such as editing a few fields, that keeps focus until it's done or dismissed.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://fibo.toribryan.com/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/dialog.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { XIcon } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\n/*\n * Shared with Alert dialog, so both pop up the same way: centered, fading\n * and scaling from 95% as Command menu does, and capped to the viewport so\n * a long body scrolls inside instead of pushing the footer off screen.\n */\nconst dialogContentVariants = cva(\n  \"fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-xl border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-hidden duration-150 motion-reduce:animate-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n  {\n    variants: {\n      size: {\n        sm: \"max-w-sm\",\n        default: \"max-w-lg\",\n        lg: \"max-w-2xl\",\n      },\n    },\n    defaultVariants: { size: \"default\" },\n  }\n)\n\nconst dialogOverlayClassName =\n  \"fixed inset-0 z-50 bg-backdrop duration-150 motion-reduce:animate-none data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\"\n\nfunction Dialog(props: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root {...props} />\n}\n\nfunction DialogTrigger(props: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogClose(props: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogContent({\n  className,\n  children,\n  size,\n  showCloseButton = true,\n  container,\n  ...props\n}: DialogPrimitive.Popup.Props &\n  VariantProps<typeof dialogContentVariants> & {\n    /** Shows a close button in the top corner. */\n    showCloseButton?: boolean\n    /** The element the dialog portals into; the body by default. */\n    container?: DialogPrimitive.Portal.Props[\"container\"]\n  }) {\n  return (\n    <DialogPrimitive.Portal container={container}>\n      <DialogPrimitive.Backdrop\n        data-slot=\"dialog-overlay\"\n        className={dialogOverlayClassName}\n      />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        data-size={size ?? \"default\"}\n        className={cn(dialogContentVariants({ size }), className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton ? (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                className=\"absolute top-3 right-3\"\n                aria-label=\"Close\"\n              />\n            }\n          >\n            <XIcon />\n          </DialogPrimitive.Close>\n        ) : null}\n      </DialogPrimitive.Popup>\n    </DialogPrimitive.Portal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      // Clears the close button, which sits in the corner over the title.\n      className={cn(\"flex flex-col gap-1.5 pr-8\", className)}\n      {...props}\n    />\n  )\n}\n\n/** The part that scrolls when the content is taller than the screen. */\nfunction DialogBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-body\"\n      className={cn(\"-mx-6 min-h-0 flex-1 overflow-y-auto px-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      // On a phone the main action stacks on top, nearest the thumb.\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg font-semibold text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  dialogOverlayClassName,\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  dialogContentVariants,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "color-backdrop": "var(--backdrop)"
    },
    "light": {
      "backdrop": "color-mix(in oklch, var(--color-neutral-950) 20%, transparent)"
    },
    "dark": {
      "backdrop": "color-mix(in oklch, var(--color-black) 60%, transparent)"
    }
  },
  "meta": {
    "tier": "base-components",
    "group": "Overlays",
    "docs": "https://fibo.toribryan.com/?path=/docs/base-components-overlays-dialog--docs"
  },
  "docs": "Docs and live examples: https://fibo.toribryan.com/?path=/docs/base-components-overlays-dialog--docs",
  "categories": [
    "base-components",
    "overlays"
  ],
  "type": "registry:ui"
}