{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "onboarding",
  "type": "registry:ui",
  "title": "Onboarding checklist (MIAN)",
  "description": "The first steps of a new account, with progress, done states and one action per step.",
  "categories": [
    "feedback",
    "onboarding",
    "checklist",
    "setup",
    "getting started"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/onboarding.css",
      "type": "registry:file",
      "target": "mian/components/onboarding.css",
      "content": ".mn-tasks { display: grid; margin: 0; padding: 0; list-style: none; }\n.mn-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem .85rem; align-items: start; padding: .9rem 0; border-top: var(--mn-border-w) solid var(--mn-border); }\n.mn-task:first-child { border-top: 0; }\n.mn-task > * { margin: 0; }\n.mn-task-check { display: grid; place-items: center; grid-row: span 2; width: 1.35rem; height: 1.35rem; margin-top: .05rem; border: 1.5px solid var(--mn-input); border-radius: 50%; color: transparent; }\n.mn-task-check svg { width: .8rem; height: .8rem; }\n.mn-task[data-done] .mn-task-check { border-color: var(--mn-success); background: var(--mn-success); color: var(--mn-success-fg); }\n.mn-task-title { font-weight: 600; font-size: .9375rem; line-height: 1.35; }\n.mn-task[data-done] .mn-task-title { color: var(--mn-muted); text-decoration: line-through; text-decoration-thickness: 1px; }\n.mn-task-desc { grid-column: 2; color: var(--mn-muted); font-size: var(--mn-text-sm); line-height: 1.5; }\n.mn-task > .mn-btn { grid-column: 3; grid-row: 1 / span 2; align-self: center; }"
    },
    {
      "path": "mian/examples/onboarding.html",
      "type": "registry:file",
      "target": "mian/examples/onboarding.html",
      "content": "<!-- Getting started -->\n<div class=\"mn-card\" style=\"max-width:32rem\"><div class=\"mn-card-header\"><div class=\"mn-row\" style=\"justify-content:space-between\"><h3 class=\"mn-card-title\">Set up Ledger</h3><span class=\"mn-muted mn-small\">2 of 4 done</span></div><div class=\"mn-progress mn-progress-sm\" role=\"progressbar\" aria-label=\"Setup\" aria-valuenow=\"50\" style=\"--_v:50%;margin-top:.5rem\"></div></div>\n<div class=\"mn-card-body\"><ol class=\"mn-tasks\">\n  <li class=\"mn-task\" data-done><span class=\"mn-task-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg></span><p class=\"mn-task-title\"><span class=\"mn-sr-only\">Done: </span>Create your workspace</p><p class=\"mn-task-desc\">Named, with your company’s currency.</p></li>\n  <li class=\"mn-task\" data-done><span class=\"mn-task-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg></span><p class=\"mn-task-title\"><span class=\"mn-sr-only\">Done: </span>Connect a bank account</p><p class=\"mn-task-desc\">Read-only, takes about two minutes.</p></li>\n  <li class=\"mn-task\"><span class=\"mn-task-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg></span><p class=\"mn-task-title\">Invite your accountant</p><p class=\"mn-task-desc\">They get a free seat.</p><a class=\"mn-btn mn-btn-sm\" href=\"#\">Invite</a></li>\n  <li class=\"mn-task\"><span class=\"mn-task-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg></span><p class=\"mn-task-title\">Approve your first matches</p><p class=\"mn-task-desc\">Ledger learns from every approval.</p><a class=\"mn-btn mn-btn-sm mn-btn-outline\" href=\"#\">Review</a></li>\n</ol></div></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/onboarding",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-tasks",
        "mn-task"
      ],
      "accessibility": [
        "Use an ordered list and say “Done” in text for completed steps (a visually hidden span).",
        "Put the overall progress in words too (“2 of 4 done”)."
      ],
      "intents": [
        "onboarding checklist",
        "getting started steps",
        "setup progress",
        "first run"
      ]
    }
  }
}