{
  "schemaVersion": 1,
  "name": "dialog",
  "useFor": "Use for a short task that needs the person's full attention (Create Agent Identity) or a result they must read before moving on (the new API key). Put the title in DialogHeader, the content in DialogBody and a full-width default Button at the end of the body for the one action.",
  "constraints": [
    "A dark scrim",
    "A dialog that opens another dialog",
    "A drop shadow under the panel",
    "Scaling from zero"
  ],
  "documentation": "",
  "source": "Figma 427:2715: Modal - Create Agent, Modal - Created, modal-bg",
  "exports": [
    "Dialog",
    "DialogBody",
    "DialogClose",
    "DialogContent",
    "DialogDescription",
    "DialogFooter",
    "DialogHeader",
    "DialogOverlay",
    "DialogPortal",
    "DialogTitle",
    "DialogTrigger"
  ],
  "client": true,
  "docsUrl": "https://inkbox-ds.vercel.app/components/dialog",
  "markdownUrl": "https://inkbox-ds.vercel.app/r/dialog.md",
  "examples": [
    {
      "path": "examples/dialog.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Dialog, DialogBody, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\nexport function Preview() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button>Create Agent</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Create Agent Identity</DialogTitle>\n          <DialogDescription className=\"sr-only\">Choose a handle and a display name for the new agent.</DialogDescription>\n        </DialogHeader>\n        <DialogBody className=\"grid gap-3\">\n          <div className=\"grid gap-1\">\n            <Label htmlFor=\"handle\">Agent handle</Label>\n            <Input id=\"handle\" placeholder=\"acme-support\" />\n          </div>\n          <div className=\"grid gap-1\">\n            <Label htmlFor=\"display\">Agent display name</Label>\n            <Input id=\"display\" placeholder=\"Robert\" />\n          </div>\n          <Button className=\"mt-3 w-full\">Create Agent Identity</Button>\n        </DialogBody>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
      "exports": [
        "Preview"
      ],
      "requires": [
        "dialog",
        "button",
        "input",
        "label"
      ],
      "packages": [],
      "previews": [
        {
          "name": "Preview",
          "url": "https://inkbox-ds.vercel.app/preview/dialog/Preview"
        }
      ]
    }
  ],
  "type": "ui",
  "title": "Dialog",
  "description": "A centered white panel with 16px corners over the blurred, ink-tinted page.",
  "surface": "site",
  "kinds": [],
  "requires": [
    "theme",
    "surface",
    "utils"
  ],
  "packages": [
    "radix-ui",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "components/ui/dialog.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport { XIcon } from \"@phosphor-icons/react/ssr\";\n\nimport { usePortalContainer } from \"@/lib/surface\";\nimport { cn } from \"@/lib/utils\";\n\n// The console's dialog (Create Agent Identity, @test-agent is ready!): a white panel with 16px corners on the page\n// behind it, which takes the ink at 12 percent over a light blur. A 68px head holds the 20px regular title 24px in from\n// the left and a faint 20px close glyph 24px from the right; the body keeps the same 24px sides. It stays centered and\n// opens from 96 percent with a fade (250ms, the strong ease-out); it closes faster than it opens.\nfunction Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger(props: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  const container = usePortalContainer();\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" container={container} {...props} />;\n}\n\nfunction DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\"fixed inset-0 z-50 bg-scrim backdrop-blur-[var(--ds-blur-scrim)] data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({ className, children, showClose = true, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & { showClose?: boolean }) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-133.5 -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-dialog bg-surface text-fg outline-none data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showClose && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"absolute top-5 right-5 inline-flex size-7 items-center justify-center rounded-control text-fg-faint outline-none transition-colors duration-150 ease-out hover:text-fg-muted focus-visible:outline-2 focus-visible:outline-focus-ring motion-reduce:transition-none\"\n          >\n            <XIcon className=\"size-5.5\" weight=\"bold\" />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"dialog-header\" className={cn(\"flex min-h-17 shrink-0 flex-col justify-center gap-1 py-5 pr-14 pl-6\", className)} {...props} />;\n}\n\n/** The scrolling middle of a dialog, with the head's 24px sides. */\nfunction DialogBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"dialog-body\" className={cn(\"min-h-0 flex-1 overflow-y-auto px-6 pb-6\", className)} {...props} />;\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"dialog-footer\" className={cn(\"flex shrink-0 flex-col-reverse gap-3 px-6 pb-6 sm:flex-row sm:justify-end\", className)} {...props} />;\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return <DialogPrimitive.Title data-slot=\"dialog-title\" className={cn(\"font-sans text-h3 leading-heading font-normal text-fg\", className)} {...props} />;\n}\n\nfunction DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return <DialogPrimitive.Description data-slot=\"dialog-description\" className={cn(\"text-body leading-body text-fg-secondary\", className)} {...props} />;\n}\n\nexport { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };\n"
    }
  ]
}