{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "profile-header",
  "type": "registry:ui",
  "title": "Profile header (MIAN)",
  "description": "The top of a profile page: cover, avatar, name, bio, details, stats and a follow button.",
  "categories": [
    "data display",
    "profile",
    "user profile",
    "account",
    "cover"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/profile-header.css",
      "type": "registry:file",
      "target": "mian/components/profile-header.css",
      "content": ".mn-profile { container: mn-profile / inline-size; overflow: hidden; }\n.mn-profile-cover { height: clamp(6rem, 24cqi, 11rem); background: linear-gradient(135deg, color-mix(in oklab, var(--mn-primary) 30%, var(--mn-surface-2)), color-mix(in oklab, var(--mn-accent) 30%, var(--mn-surface-2))); }\n.mn-profile-cover > * { width: 100%; height: 100%; border-radius: 0; }\n.mn-profile-body { display: grid; gap: .75rem; padding: 0 1.25rem 1.25rem; }\n.mn-profile-body > * { margin: 0; }\n.mn-profile-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-top: -2.5rem; }\n.mn-profile-top > .mn-avatar { --_s: 5rem; box-shadow: 0 0 0 4px var(--mn-surface); font-size: 1.6rem; }\n.mn-profile-name { display: grid; gap: .1rem; }\n.mn-profile-name strong { font: var(--mn-heading-weight) 1.35rem/1.2 var(--mn-font-heading); letter-spacing: -.015em; }\n.mn-profile-name span { color: var(--mn-muted); font-size: var(--mn-text-sm); }\n.mn-profile-bio { font-size: .9375rem; line-height: 1.55; max-width: 40em; }\n.mn-profile-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--mn-muted); font-size: .8125rem; }\n.mn-profile-meta > span { display: inline-flex; align-items: center; gap: .35rem; }\n.mn-profile-stats { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: var(--mn-text-sm); color: var(--mn-muted); }\n.mn-profile-stats strong { color: var(--mn-fg); font-weight: 650; font-variant-numeric: tabular-nums; margin-inline-end: .25rem; }"
    },
    {
      "path": "mian/examples/profile-header.html",
      "type": "registry:file",
      "target": "mian/examples/profile-header.html",
      "content": "<!-- Profile -->\n<section class=\"mn-card mn-profile\" style=\"max-width:36rem\" aria-labelledby=\"pf-name\">\n  <div class=\"mn-profile-cover\" aria-hidden=\"true\"></div>\n  <div class=\"mn-profile-body\">\n    <div class=\"mn-profile-top\"><span class=\"mn-avatar mn-avatar-xl mn-primary\" aria-hidden=\"true\">IS</span><div class=\"mn-row\"><button class=\"mn-btn mn-btn-outline mn-btn-sm\" type=\"button\">Message</button><button class=\"mn-btn mn-btn-sm\" type=\"button\" aria-pressed=\"false\">Follow</button></div></div>\n    <h3 class=\"mn-profile-name\" id=\"pf-name\"><strong>Ilinca Sava</strong><span>@ilinca</span></h3>\n    <p class=\"mn-profile-bio\">Writes about craft and software. Book on repair, <em>Second Hands</em>, out in spring.</p>\n    <p class=\"mn-profile-meta\"><span><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 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11Z\"/><circle cx=\"12\" cy=\"10\" r=\"2.5\"/></svg> Cluj-Napoca</span><span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1\"/><path d=\"M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1\"/></svg> fieldnotes.example</span><span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\"/><path d=\"M3 10h18M8 3v4M16 3v4\"/></svg> Joined 2019</span></p>\n    <p class=\"mn-profile-stats\"><span><strong>412</strong>following</span><span><strong>18.2k</strong>followers</span><span><strong>1,204</strong>posts</span></p>\n  </div>\n</section>"
    }
  ],
  "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/profile-header",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-profile",
        "mn-profile-cover",
        "mn-profile-top",
        "mn-profile-name",
        "mn-profile-bio · mn-profile-meta · mn-profile-stats"
      ],
      "accessibility": [
        "The name is the page’s heading (<h1> on a profile page).",
        "Follow is a toggle button with aria-pressed, or a clear “Follow” / “Following” label."
      ],
      "intents": [
        "profile page",
        "user profile",
        "account header",
        "creator profile"
      ]
    }
  }
}