{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "post",
  "type": "registry:ui",
  "title": "Social post (MIAN)",
  "description": "A post in a feed: author, time, text, media and like / reply / repost / share actions with counts.",
  "categories": [
    "data display",
    "post",
    "social",
    "feed",
    "tweet"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/post.css",
      "type": "registry:file",
      "target": "mian/components/post.css",
      "content": ".mn-post { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .8rem; padding: 1rem 1.1rem .6rem; }\n.mn-post > .mn-avatar { grid-row: span 4; }\n.mn-post > :not(.mn-avatar) { grid-column: 2; min-width: 0; margin: 0; }\n.mn-post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; font-size: var(--mn-text-sm); line-height: 1.3; }\n.mn-post-head strong { font-weight: 600; }\n.mn-post-head span, .mn-post-head time { color: var(--mn-muted); }\n.mn-post-body { font-size: .9688rem; line-height: 1.55; overflow-wrap: anywhere; }\n.mn-post > .mn-media { margin-top: .6rem; }\n.mn-post-actions { display: flex; flex-wrap: wrap; gap: .15rem; margin-inline-start: -.55rem !important; margin-top: .2rem !important; }\n.mn-post-action {\n  display: inline-flex; align-items: center; gap: .4rem; height: 2.25rem; padding: 0 .6rem; border: 0; border-radius: 999px;\n  background: none; color: var(--mn-muted); font: 500 .8125rem/1 var(--mn-font); font-variant-numeric: tabular-nums; cursor: pointer;\n  transition: color var(--mn-duration) var(--mn-ease), background-color var(--mn-duration) var(--mn-ease);\n}\n.mn-post-action svg { width: 1.1rem; height: 1.1rem; }\n.mn-post-action:hover { background: var(--mn-hover); color: var(--mn-fg); }\n.mn-post-action[aria-pressed=\"true\"] { color: var(--mn-danger-text); }\n.mn-post-action[aria-pressed=\"true\"] svg { fill: currentColor; }\n.mn-post-action[data-kind=\"repost\"][aria-pressed=\"true\"] { color: var(--mn-success-text); }\n.mn-post-action[data-kind=\"repost\"][aria-pressed=\"true\"] svg { fill: none; }"
    },
    {
      "path": "mian/examples/post.html",
      "type": "registry:file",
      "target": "mian/examples/post.html",
      "content": "<!-- Post -->\n<article class=\"mn-card mn-post\" style=\"max-width:34rem\" aria-label=\"Post by Ilinca Sava\">\n  <span class=\"mn-avatar\" aria-hidden=\"true\">IS</span>\n  <p class=\"mn-post-head\"><strong>Ilinca Sava</strong><span>@ilinca</span><span aria-hidden=\"true\">·</span><time datetime=\"2026-09-25T08:40\">2 h</time></p>\n  <p class=\"mn-post-body\">Spent a month on a stool at a noodle counter. The cook decides once how far apart his hands go, and every strand follows. Best design system I have ever seen.</p>\n  <div class=\"mn-media\" style=\"--ratio:16/9\"><svg viewBox=\"0 0 600 360\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" aria-label=\"A running route drawn over a street grid\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"600\" height=\"360\" fill=\"var(--mn-surface-2)\"/>\n<g stroke=\"color-mix(in srgb, var(--mn-fg) 10%, transparent)\" stroke-width=\"10\">\n  <path d=\"M0 80h600M0 190h600M0 300h600M90 0v360M230 0v360M380 0v360M520 0v360\"/>\n</g>\n<path d=\"M300 360c40-80 60-110 150-120\" stroke=\"color-mix(in srgb, var(--mn-info) 45%, transparent)\" stroke-width=\"22\" fill=\"none\" stroke-linecap=\"round\"/>\n<path d=\"M120 292c-30-60-20-140 40-176s150-40 206-10 120 70 112 132-70 84-150 70-116-8-150 14-44-10-58-30\" fill=\"none\" stroke=\"var(--mn-primary)\" stroke-width=\"6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<circle cx=\"120\" cy=\"292\" r=\"10\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-primary)\" stroke-width=\"5\"/>\n<circle cx=\"478\" cy=\"246\" r=\"7\" fill=\"var(--mn-accent)\"/></svg></div>\n  <div class=\"mn-post-actions\">\n    <button class=\"mn-post-action\" type=\"button\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M21 12a8 8 0 0 1-11.5 7.2L4 20l.9-4.6A8 8 0 1 1 21 12Z\"/></svg><span class=\"mn-sr-only\">Reply, </span><span>14</span></button>\n    <button class=\"mn-post-action\" type=\"button\" data-kind=\"repost\" aria-pressed=\"false\" data-mn-count=\"31\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m17 2 4 4-4 4\"/><path d=\"M3 11V9a3 3 0 0 1 3-3h15M7 22l-4-4 4-4\"/><path d=\"M21 13v2a3 3 0 0 1-3 3H3\"/></svg><span class=\"mn-sr-only\">Repost, </span><span>31</span></button>\n    <button class=\"mn-post-action\" type=\"button\" aria-pressed=\"true\" data-mn-count=\"127\"><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 20s-7-4.4-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.6-9 9-9 9Z\"/></svg><span class=\"mn-sr-only\">Like, </span><span>128</span></button>\n    <button class=\"mn-post-action\" type=\"button\" aria-label=\"Share\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M16 6l-4-4-4 4M12 2v13\"/></svg></button>\n  </div>\n</article>"
    }
  ],
  "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/post",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-post",
        "mn-post-head",
        "mn-post-body",
        "mn-post-actions",
        "mn-post-action"
      ],
      "accessibility": [
        "Wrap each post in <article> with an accessible name (the author).",
        "Toggles use aria-pressed; a visually hidden word before the count gives each a full name, e.g. “Like, 128”."
      ],
      "intents": [
        "social post",
        "feed item",
        "like and share",
        "status update"
      ]
    }
  }
}