{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "type": "registry:ui",
  "title": "Alert (MIAN)",
  "description": "Inline messages for information, success, warnings and errors, with optional actions and dismiss.",
  "categories": [
    "feedback",
    "alert",
    "callout",
    "banner",
    "message"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/alert.css",
      "type": "registry:file",
      "target": "mian/components/alert.css",
      "content": ".mn-alert {\n  /* Role props do not inherit, so copy them into ordinary ones the\n     title and icon can read. */\n  --_a: var(--_c, var(--mn-info)); --_at: var(--_ct, var(--mn-info-text)); --_af: var(--_cf, var(--mn-info-fg));\n  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .25rem .75rem;\n  padding: .9rem 1rem;\n  border: var(--mn-border-w) solid color-mix(in oklab, var(--_a) 30%, var(--mn-border));\n  border-radius: var(--mn-radius-box);\n  background: color-mix(in oklab, var(--_a) 8%, var(--mn-surface));\n  color: var(--mn-fg); font-size: var(--mn-text-sm); line-height: 1.55;\n}\n.mn-alert:not(:has(> .mn-alert-icon)) { grid-template-columns: 1fr auto; }\n.mn-alert-icon { grid-row: span 2; display: flex; color: var(--_at); padding-top: .1rem; }\n.mn-alert-icon svg { width: 1.15rem; height: 1.15rem; }\n.mn-alert-title { margin: 0; font-weight: 600; color: var(--_at); }\n.mn-alert-desc { margin: 0; grid-column: -3 / -2; color: color-mix(in oklab, var(--mn-fg) 82%, var(--_at)); }\n.mn-alert:not(:has(> .mn-alert-icon)) .mn-alert-desc { grid-column: 1; }\n.mn-alert-actions { grid-row: 1 / span 2; grid-column: -2; display: flex; gap: .4rem; align-items: center; }\n.mn-alert-solid { background: var(--_a); border-color: var(--_a); color: var(--_af); }\n.mn-alert-solid :is(.mn-alert-title, .mn-alert-icon, .mn-alert-desc) { color: var(--_af); }\n.mn-alert-neutral { --_a: var(--mn-fg); --_at: var(--mn-fg); background: var(--mn-surface); border-color: var(--mn-border); }"
    },
    {
      "path": "mian/examples/alert.html",
      "type": "registry:file",
      "target": "mian/examples/alert.html",
      "content": "<!-- Colours -->\n<div class=\"mn-stack\" style=\"max-width:36rem\">\n  <div class=\"mn-alert\"><span class=\"mn-alert-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 11v5M12 8v.01\"/></svg></span><p class=\"mn-alert-title\">A new version is available</p><p class=\"mn-alert-desc\">MIAN 1.1 adds six more noodles.</p></div>\n  <div class=\"mn-alert mn-success\"><span class=\"mn-alert-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"m8 12 3 3 5-6\"/></svg></span><p class=\"mn-alert-title\">Payment received</p><p class=\"mn-alert-desc\">Your invoice has been paid in full.</p></div>\n  <div class=\"mn-alert mn-warning\"><span class=\"mn-alert-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3 2 20h20L12 3Z\"/><path d=\"M12 10v4M12 17v.01\"/></svg></span><p class=\"mn-alert-title\">Your trial ends in 3 days</p><p class=\"mn-alert-desc\">Add a payment method to keep your projects.</p></div>\n  <div class=\"mn-alert mn-danger\" role=\"alert\"><span class=\"mn-alert-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"m15 9-6 6M9 9l6 6\"/></svg></span><p class=\"mn-alert-title\">Deployment failed</p><p class=\"mn-alert-desc\">Build exited with code 1. Check the logs.</p></div>\n</div>\n\n<!-- With actions -->\n<div class=\"mn-alert mn-neutral\" style=\"max-width:36rem\">\n  <span class=\"mn-alert-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2 2M16 16l2 2M6 18l2-2M16 8l2-2\"/></svg></span>\n  <p class=\"mn-alert-title\">Try the Udon noodle</p>\n  <p class=\"mn-alert-desc\">Softer corners, warmer colours, roomier controls.</p>\n  <div class=\"mn-alert-actions\"><button class=\"mn-btn mn-btn-sm\" data-mn-set-noodle=\"udon\">Apply</button><button class=\"mn-btn mn-btn-sm mn-btn-ghost mn-btn-icon\" data-mn-dismiss aria-label=\"Dismiss\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg></button></div>\n</div>\n\n<!-- Solid -->\n<div class=\"mn-alert mn-alert-solid mn-primary\" style=\"max-width:36rem\"><p class=\"mn-alert-title\">Heads up</p><p class=\"mn-alert-desc\">Scheduled maintenance tonight from 02:00 to 03:00 UTC.</p></div>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/alert",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-alert",
        "mn-alert-solid · mn-alert-neutral",
        "mn-alert-icon · mn-alert-title · mn-alert-desc · mn-alert-actions",
        "[data-mn-dismiss]"
      ],
      "accessibility": [
        "Static alerts are plain content. For messages that appear after an action, add role=\"alert\" (urgent) or role=\"status\" (polite)."
      ],
      "intents": [
        "alert message",
        "warning box",
        "error message",
        "success message",
        "info notice"
      ]
    }
  }
}