{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "voice-note",
  "type": "registry:ui",
  "title": "Voice note (MIAN)",
  "description": "An audio message as a waveform: play, pause, see where you are and drag to seek.",
  "categories": [
    "data display",
    "voice note",
    "audio message",
    "waveform",
    "audio player"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/voice-note.css",
      "type": "registry:file",
      "target": "mian/components/voice-note.css",
      "content": ".mn-voice { --_p: 0%; display: inline-flex; align-items: center; gap: .7rem; max-width: 100%; min-width: 0; padding: .45rem .9rem .45rem .45rem; border: var(--mn-border-w) solid var(--mn-border); border-radius: 999px; background: var(--mn-card); color: var(--mn-fg); }\n.mn-voice-play { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: var(--mn-primary); color: var(--mn-primary-fg); cursor: pointer; transition: scale var(--mn-dur-fast) var(--mn-ease-out); }\n.mn-voice-play:active { scale: .94; }\n.mn-voice-play:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 2px; }\n.mn-voice-play svg { width: 1rem; height: 1rem; }\n.mn-voice-play .mn-voice-pause, .mn-voice[data-playing] .mn-voice-play .mn-voice-go { display: none; }\n.mn-voice[data-playing] .mn-voice-play .mn-voice-pause { display: block; }\n.mn-voice-wave { display: flex; align-items: center; gap: 2px; flex: 1 1 9rem; min-width: 4rem; height: 1.75rem; cursor: pointer; touch-action: none; border-radius: 4px; }\n.mn-voice-wave:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 3px; }\n.mn-voice-wave > i { flex: 1 1 0; min-width: 2px; max-width: 3px; height: calc(var(--h, .4) * 100%); border-radius: 2px; background: color-mix(in oklab, var(--mn-fg) 28%, transparent); transition: background-color var(--mn-dur-fast) linear; }\n.mn-voice-wave > i.mn-on { background: var(--mn-primary-text, var(--mn-primary)); }\n.mn-voice-time { flex: none; color: var(--mn-muted); font: 500 .75rem/1 var(--mn-font-mono); font-variant-numeric: tabular-nums; }"
    },
    {
      "path": "mian/examples/voice-note.html",
      "type": "registry:file",
      "target": "mian/examples/voice-note.html",
      "content": "<!-- In a conversation -->\n<div class=\"mn-stack\" style=\"--mn-gap:.6rem;width:min(100%,24rem)\">\n  <div class=\"mn-voice\" data-mn-voice data-duration=\"42\"><button class=\"mn-voice-play\" type=\"button\" aria-label=\"Play\"><svg class=\"mn-voice-go\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M7 4.5v15l12-7.5Z\"/></svg><svg class=\"mn-voice-pause\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\"/><rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\"/></svg></button><div class=\"mn-voice-wave\" aria-label=\"Voice note from Ilse, position\"></div><span class=\"mn-voice-time\">0:42</span></div>\n  <p class=\"mn-muted\" style=\"margin:0;font-size:.8125rem\">Transcript: “The proofs are in. Page six needs a wider margin, the rest is good to print.”</p>\n</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/voice-note",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-voice",
        "mn-voice-play",
        "mn-voice-wave",
        "mn-voice-time"
      ],
      "accessibility": [
        "The waveform is a slider: arrow keys seek, Home and End jump, Space plays.",
        "The button’s label switches between Play and Pause.",
        "Offer a transcript next to any spoken message.",
        "Nothing plays until the person presses play."
      ],
      "intents": [
        "voice message",
        "audio waveform player",
        "voice memo",
        "audio clip in chat"
      ]
    }
  }
}