{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stories-bar",
  "type": "registry:ui",
  "title": "Stories bar (MIAN)",
  "description": "A scrolling row of avatars with a ring for new stories and a grey ring for seen ones.",
  "categories": [
    "navigation",
    "stories",
    "avatars",
    "status",
    "highlights"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/stories-bar.css",
      "type": "registry:file",
      "target": "mian/components/stories-bar.css",
      "content": ".mn-storybar { display: flex; gap: .9rem; margin: 0; padding: .3rem .25rem .5rem; list-style: none; overflow-x: auto; scrollbar-width: none; }\n.mn-storybar::-webkit-scrollbar { display: none; }\n.mn-storybar a, .mn-storybar button { display: grid; justify-items: center; gap: .4rem; width: 4.5rem; padding: 0; border: 0; background: none; color: var(--mn-fg); font: 500 .75rem/1.2 var(--mn-font); text-decoration: none; cursor: pointer; }\n.mn-storybar-ring { padding: 3.5px; border-radius: 50%; background: conic-gradient(from 200deg, var(--mn-accent), var(--mn-primary), var(--mn-accent)); }\n.mn-storybar-ring > .mn-avatar { --_s: 3.4rem; box-shadow: 0 0 0 3px var(--mn-bg); }\n.mn-storybar [data-seen] .mn-storybar-ring { background: var(--mn-input); }\n.mn-storybar-label { width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }"
    },
    {
      "path": "mian/examples/stories-bar.html",
      "type": "registry:file",
      "target": "mian/examples/stories-bar.html",
      "content": "<!-- Stories -->\n<ul class=\"mn-storybar\" style=\"max-width:34rem\">\n  <li><a href=\"#\" aria-label=\"Ana, new story\"><span class=\"mn-storybar-ring\"><span class=\"mn-avatar\" aria-hidden=\"true\">AP</span></span><span class=\"mn-storybar-label\" aria-hidden=\"true\">Ana</span></a></li><li><a href=\"#\" aria-label=\"Jonas, new story\"><span class=\"mn-storybar-ring\"><span class=\"mn-avatar\" aria-hidden=\"true\">JO</span></span><span class=\"mn-storybar-label\" aria-hidden=\"true\">Jonas</span></a></li><li><a href=\"#\" aria-label=\"Ilinca, new story\"><span class=\"mn-storybar-ring\"><span class=\"mn-avatar\" aria-hidden=\"true\">IS</span></span><span class=\"mn-storybar-label\" aria-hidden=\"true\">Ilinca</span></a></li><li><a href=\"#\" data-seen aria-label=\"Lea\"><span class=\"mn-storybar-ring\"><span class=\"mn-avatar\" aria-hidden=\"true\">LK</span></span><span class=\"mn-storybar-label\" aria-hidden=\"true\">Lea</span></a></li><li><a href=\"#\" data-seen aria-label=\"Maren\"><span class=\"mn-storybar-ring\"><span class=\"mn-avatar\" aria-hidden=\"true\">MR</span></span><span class=\"mn-storybar-label\" aria-hidden=\"true\">Maren</span></a></li><li><a href=\"#\" data-seen aria-label=\"Radu\"><span class=\"mn-storybar-ring\"><span class=\"mn-avatar\" aria-hidden=\"true\">RE</span></span><span class=\"mn-storybar-label\" aria-hidden=\"true\">Radu</span></a></li><li><a href=\"#\" data-seen aria-label=\"Kenji\"><span class=\"mn-storybar-ring\"><span class=\"mn-avatar\" aria-hidden=\"true\">KM</span></span><span class=\"mn-storybar-label\" aria-hidden=\"true\">Kenji</span></a></li>\n</ul>"
    }
  ],
  "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/stories-bar",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-storybar",
        "mn-storybar-ring",
        "mn-storybar-label"
      ],
      "accessibility": [
        "Each item is a link or button whose name says whose story it is and whether it is new (“Ana, new story”).",
        "The row scrolls horizontally with the keyboard focus."
      ],
      "intents": [
        "stories",
        "story avatars",
        "social stories row"
      ]
    }
  }
}