{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "alert",
    "type": "registry:component",
    "title": "Alert",
    "description": "Inline message with an icon, title and text. Tone is set with data-tone (info, success, warning, danger).",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Feedback",
        "layout": "stack"
    },
    "files": [
        {
            "path": "components/alert.html",
            "type": "registry:file",
            "target": "components/alert.html",
            "content": "<!-- Alert\n     Tone: info (default), success, warning, danger.\n     Compose an icon, a title and text inside .dp-alert-body. -->\n\n<div class=\"dp-alert\" role=\"status\">\n  <svg class=\"dp-alert-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n       stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n    <circle cx=\"12\" cy=\"12\" r=\"10\"></circle><path d=\"M12 16v-4\"></path><path d=\"M12 8h.01\"></path>\n  </svg>\n  <div class=\"dp-alert-body\">\n    <span class=\"dp-alert-title\">Data refreshed</span>\n    <span class=\"dp-alert-text\">The dataset was last updated on the first of this month.</span>\n  </div>\n</div>\n\n<div class=\"dp-alert\" data-tone=\"success\" role=\"status\">\n  <svg class=\"dp-alert-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n       stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n    <path d=\"M20 6 9 17l-5-5\"></path>\n  </svg>\n  <div class=\"dp-alert-body\">\n    <span class=\"dp-alert-title\">Export ready</span>\n    <span class=\"dp-alert-text\">Your CSV download has finished.</span>\n  </div>\n</div>\n\n<div class=\"dp-alert\" data-tone=\"warning\" role=\"status\">\n  <svg class=\"dp-alert-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n       stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n    <path d=\"m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3Z\"></path>\n    <path d=\"M12 9v4\"></path><path d=\"M12 17h.01\"></path>\n  </svg>\n  <div class=\"dp-alert-body\">\n    <span class=\"dp-alert-title\">Approaching limit</span>\n    <span class=\"dp-alert-text\">You have used 90% of this month's queries.</span>\n  </div>\n</div>\n\n<div class=\"dp-alert\" data-tone=\"danger\" role=\"alert\">\n  <svg class=\"dp-alert-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n       stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n    <circle cx=\"12\" cy=\"12\" r=\"10\"></circle><path d=\"m15 9-6 6\"></path><path d=\"m9 9 6 6\"></path>\n  </svg>\n  <div class=\"dp-alert-body\">\n    <span class=\"dp-alert-title\">Query failed</span>\n    <span class=\"dp-alert-text\">The filter could not be parsed. Check the syntax and try again.</span>\n  </div>\n</div>\n"
        },
        {
            "path": "components/alert.css",
            "type": "registry:file",
            "target": "components/alert.css",
            "content": "/* Alert\n   An inline message. Tone is set with data-tone (info (default), success,\n   warning, danger). Compose with an icon, .dp-alert-body, a title and text.\n   All colour and type come from tokens.css. */\n\n.dp-alert {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--dp-space-3);\n  padding: var(--dp-space-4) var(--dp-space-5);\n  border: 1px solid transparent;\n  border-radius: var(--dp-radius-md);\n  color: var(--dp-text);\n  background: var(--dp-info-soft);\n  border-color: var(--dp-blue-300);\n}\n\n.dp-alert-icon {\n  flex: none;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-top: 1px;\n  color: var(--dp-info);\n}\n\n.dp-alert-body {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.dp-alert-title {\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n}\n\n.dp-alert-text {\n  font-size: var(--dp-text-sm);\n  color: var(--dp-text-muted);\n}\n\n/* ---- Tones ----------------------------------------------------------- */\n.dp-alert[data-tone=\"success\"] {\n  background: var(--dp-success-soft);\n  border-color: #bbf7d0;\n}\n.dp-alert[data-tone=\"success\"] .dp-alert-icon { color: var(--dp-success); }\n\n.dp-alert[data-tone=\"warning\"] {\n  background: var(--dp-warning-soft);\n  border-color: #fde68a;\n}\n.dp-alert[data-tone=\"warning\"] .dp-alert-icon { color: var(--dp-warning); }\n\n.dp-alert[data-tone=\"danger\"] {\n  background: var(--dp-danger-soft);\n  border-color: #fecaca;\n}\n.dp-alert[data-tone=\"danger\"] .dp-alert-icon { color: var(--dp-danger); }\n"
        }
    ]
}