{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "invoice",
  "type": "registry:ui",
  "title": "Invoice (MIAN)",
  "description": "A printable invoice or receipt: parties, line items, totals with tax, and payment notes.",
  "categories": [
    "data display",
    "invoice",
    "receipt",
    "bill",
    "quote"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/invoice.css",
      "type": "registry:file",
      "target": "mian/components/invoice.css",
      "content": ".mn-invoice { container: mn-invoice / inline-size; display: grid; gap: 2rem; padding: clamp(1.25rem, 4vw, 2.75rem); font-size: var(--mn-text-sm); line-height: 1.55; }\n.mn-invoice > * { margin: 0; }\n.mn-invoice-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.25rem 2rem; }\n.mn-invoice-head h2 { margin: 0 0 .35rem; font: var(--mn-heading-weight) 1.75rem/1.1 var(--mn-font-heading); letter-spacing: -.02em; }\n.mn-invoice-head dl { display: grid; grid-template-columns: auto auto; gap: .25rem 1rem; margin: 0; }\n.mn-invoice-head dt, .mn-invoice-parties h3 { color: var(--mn-muted); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }\n.mn-invoice-head dd { margin: 0; font-variant-numeric: tabular-nums; }\n.mn-invoice-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1.5rem; }\n.mn-invoice-parties h3 { margin: 0 0 .4rem; }\n.mn-invoice-parties address { font-style: normal; }\n.mn-invoice-totals { display: grid; grid-template-columns: 1fr auto; gap: .45rem 2rem; width: min(100%, 20rem); margin-inline-start: auto; }\n.mn-invoice-totals dt { color: var(--mn-muted); }\n.mn-invoice-totals dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }\n.mn-invoice-totals .mn-invoice-total { padding-top: .6rem; border-top: var(--mn-border-w) solid var(--mn-fg); color: var(--mn-fg); font-size: 1.0625rem; font-weight: 700; }\n.mn-invoice-foot { color: var(--mn-muted); font-size: .8125rem; }"
    },
    {
      "path": "mian/examples/invoice.html",
      "type": "registry:file",
      "target": "mian/examples/invoice.html",
      "content": "<!-- Invoice -->\n<article class=\"mn-card mn-invoice\" style=\"max-width:44rem\" aria-labelledby=\"inv-t\">\n  <header class=\"mn-invoice-head\"><div><h2 id=\"inv-t\">Invoice</h2><span class=\"mn-muted\">Ledger GmbH · VAT DE318 442 910</span></div>\n    <dl><dt>Number</dt><dd>2026-0419</dd><dt>Issued</dt><dd>25 Sep 2026</dd><dt>Due</dt><dd>9 Oct 2026</dd></dl></header>\n  <div class=\"mn-invoice-parties\"><div><h3>From</h3><address>Ledger GmbH<br>Torstraße 12<br>10119 Berlin, Germany</address></div><div><h3>Bill to</h3><address>Halden &amp; Co SRL<br>Str. Memorandumului 28<br>400114 Cluj-Napoca, Romania</address></div></div>\n  <div class=\"mn-table-wrap\"><table class=\"mn-table\"><thead><tr><th scope=\"col\">Description</th><th scope=\"col\" class=\"mn-num\">Qty</th><th scope=\"col\" class=\"mn-num\">Price</th><th scope=\"col\" class=\"mn-num\">Amount</th></tr></thead>\n  <tbody><tr><td>Team plan, October</td><td class=\"mn-num\">1</td><td class=\"mn-num\">€190.00</td><td class=\"mn-num\">€190.00</td></tr><tr><td>Extra entities</td><td class=\"mn-num\">4</td><td class=\"mn-num\">€25.00</td><td class=\"mn-num\">€100.00</td></tr><tr><td>API calls over plan (4,210)</td><td class=\"mn-num\">4.21</td><td class=\"mn-num\">€0.40</td><td class=\"mn-num\">€1.68</td></tr></tbody></table></div>\n  <dl class=\"mn-invoice-totals\"><dt>Subtotal</dt><dd>€291.68</dd><dt>VAT (reverse charge)</dt><dd>€0.00</dd><dt class=\"mn-invoice-total\">Total due</dt><dd class=\"mn-invoice-total\">€291.68</dd></dl>\n  <p class=\"mn-invoice-foot\">Pay by SEPA transfer to DE44 1001 0010 0123 4567 89, reference 2026-0419. VAT reverse charge, Art. 196 Directive 2006/112/EC.</p>\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/invoice",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-invoice",
        "mn-invoice-head",
        "mn-invoice-parties",
        "mn-invoice-totals",
        "mn-invoice-foot"
      ],
      "accessibility": [
        "Use a real <table> with column headers for line items, and <address> for the parties.",
        "The total must be in text, not only emphasised; print styles keep it on paper."
      ],
      "intents": [
        "invoice",
        "receipt",
        "bill",
        "order summary",
        "printable document"
      ]
    }
  }
}