{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "indicator",
  "type": "registry:ui",
  "title": "Indicator (MIAN)",
  "description": "A count or status dot pinned to the corner of any element, avatars, icons, buttons.",
  "categories": [
    "data display",
    "indicator",
    "notification dot",
    "badge count",
    "status dot"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/indicator.css",
      "type": "registry:file",
      "target": "mian/components/indicator.css",
      "content": ".mn-indicator { position: relative; display: inline-flex; }\n.mn-indicator-item { position: absolute; z-index: 1; top: 0; right: 0; translate: 40% -40%; }\n.mn-indicator-bottom > .mn-indicator-item { top: auto; bottom: 0; translate: 40% 40%; }\n.mn-indicator-start > .mn-indicator-item { right: auto; left: 0; translate: -40% -40%; }\n.mn-indicator-inset > .mn-indicator-item { translate: 0 0; }\n.mn-indicator-item.mn-badge { height: 1.15rem; min-width: 1.15rem; padding: 0 .3rem; justify-content: center; font-size: .6875rem; box-shadow: 0 0 0 2px var(--mn-bg); }\n.mn-indicator-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--_c, var(--mn-danger)); box-shadow: 0 0 0 2px var(--mn-bg); }\n.mn-indicator-pulse::after { content: \"\"; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: mn-indicator-pulse 1.6s var(--mn-ease) infinite; }\n@keyframes mn-indicator-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.4); opacity: 0; } }\n@media (prefers-reduced-motion: reduce) { .mn-indicator-pulse::after { animation: none; } }"
    },
    {
      "path": "mian/examples/indicator.html",
      "type": "registry:file",
      "target": "mian/examples/indicator.html",
      "content": "<!-- Indicators -->\n<span class=\"mn-indicator\"><span class=\"mn-indicator-item mn-badge mn-danger\" aria-hidden=\"true\">3</span><button class=\"mn-btn mn-btn-outline mn-btn-icon\" aria-label=\"Notifications, 3 unread\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"/><path d=\"M10.3 21a1.9 1.9 0 0 0 3.4 0\"/></svg></button></span>\n<span class=\"mn-indicator mn-indicator-bottom\"><span class=\"mn-indicator-item mn-indicator-dot mn-success\" aria-hidden=\"true\"></span><span class=\"mn-avatar\" role=\"img\" aria-label=\"Ana, online\">AP</span></span>\n<span class=\"mn-indicator\"><span class=\"mn-indicator-item mn-indicator-dot mn-indicator-pulse mn-primary\" aria-hidden=\"true\"></span><button class=\"mn-btn mn-btn-soft\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 13h5l1.5 2h5L16 13h5\"/><path d=\"M5 5h14l2 8v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Z\"/></svg> Inbox</button></span>"
    }
  ],
  "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/indicator",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-indicator",
        "mn-indicator-item",
        "mn-indicator-dot · mn-indicator-pulse",
        "mn-indicator-bottom · mn-indicator-start · mn-indicator-inset"
      ],
      "accessibility": [
        "The dot is decorative: say the same thing in text, e.g. aria-label=\"Inbox, 3 unread\" on the button, or a visually hidden span."
      ],
      "intents": [
        "notification dot",
        "unread count",
        "status dot on avatar"
      ]
    }
  }
}