{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "dialog",
    "type": "registry:component",
    "title": "Dialog",
    "description": "Modal dialog panel with a header, body and footer. Wrap it in the modal backdrop, or place it inside a native dialog element.",
    "registryDependencies": [
        "tokens",
        "button"
    ],
    "meta": {
        "category": "Layout & overlay",
        "layout": "block"
    },
    "files": [
        {
            "path": "components/dialog.html",
            "type": "registry:file",
            "target": "components/dialog.html",
            "content": "<!-- Dialog\n     .dp-dialog is the panel. Shown here on its own so it renders in place.\n     In use, wrap it in <div class=\"dp-modal\"> for the centred backdrop and\n     toggle that wrapper from JS, or place this panel inside a native <dialog>\n     element and call showModal(). -->\n\n<div class=\"dp-dialog\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"dlg-title\">\n  <div class=\"dp-dialog-header\">\n    <h2 class=\"dp-dialog-title\" id=\"dlg-title\">Delete this query</h2>\n    <button class=\"dp-dialog-close\" type=\"button\" aria-label=\"Close\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n           stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path>\n      </svg>\n    </button>\n  </div>\n  <div class=\"dp-dialog-body\">\n    This removes the saved query and its schedule. Exported files are not\n    affected. This cannot be undone.\n  </div>\n  <div class=\"dp-dialog-footer\">\n    <button class=\"dp-btn\" type=\"button\" data-variant=\"outline\">Cancel</button>\n    <button class=\"dp-btn\" type=\"button\" data-variant=\"danger\">Delete query</button>\n  </div>\n</div>\n"
        },
        {
            "path": "components/dialog.css",
            "type": "registry:file",
            "target": "components/dialog.css",
            "content": "/* Dialog\n   A modal dialog. .dp-dialog is the panel; wrap it in .dp-modal for the\n   centred backdrop. Toggle the backdrop's visibility from JS, or use a native\n   <dialog> element with this panel inside. Colour, radius and shadow from\n   tokens.css. */\n\n.dp-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dp-space-6);\n  background: var(--dp-overlay);\n}\n\n.dp-dialog {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 28rem;\n  background: var(--dp-surface);\n  border-radius: var(--dp-radius-xl);\n  box-shadow: var(--dp-shadow-lg);\n  overflow: hidden;\n}\n\n.dp-dialog-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--dp-space-4);\n  padding: var(--dp-space-5) var(--dp-space-6);\n  border-bottom: 1px solid var(--dp-border);\n}\n\n.dp-dialog-title {\n  margin: 0;\n  font-size: var(--dp-text-xl);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n}\n\n.dp-dialog-close {\n  appearance: none;\n  border: 0;\n  background: transparent;\n  color: var(--dp-text-muted);\n  cursor: pointer;\n  padding: 4px;\n  line-height: 0;\n  border-radius: var(--dp-radius-xs);\n}\n\n.dp-dialog-close:hover {\n  background: var(--dp-surface-soft);\n  color: var(--dp-navy);\n}\n\n.dp-dialog-close svg {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.dp-dialog-body {\n  padding: var(--dp-space-6);\n  color: var(--dp-text-muted);\n}\n\n.dp-dialog-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--dp-space-3);\n  padding: var(--dp-space-4) var(--dp-space-6);\n  border-top: 1px solid var(--dp-border);\n  background: var(--dp-surface-subtle);\n}\n"
        }
    ]
}