{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "invoice-list",
  "type": "registry:ui",
  "title": "Invoice list",
  "description": "A bordered list of invoices showing number, date, amount and a paid, open or void status badge on each row. Fits the billing history in account settings.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/status-badge.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/invoice-list.tsx",
      "type": "registry:ui",
      "target": "components/ui/invoice-list.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { StatusBadge } from \"@/components/ui/status-badge\"\n\n/** A compact list of invoices: number and date on the left, amount and status badge on the right. */\ntype InvoiceItem = { id: string; date: string; amount: string; status: \"paid\" | \"open\" | \"void\" }\n\nconst SAMPLE_ITEMS: InvoiceItem[] = [\n  { id: \"INV-2041\", date: \"Sep 24, 2026\", amount: \"$12,400.00\", status: \"open\" },\n  { id: \"INV-2040\", date: \"Sep 22, 2026\", amount: \"$3,890.00\", status: \"open\" },\n  { id: \"INV-2039\", date: \"Sep 12, 2026\", amount: \"$890.00\", status: \"void\" },\n  { id: \"INV-2038\", date: \"Sep 10, 2026\", amount: \"$5,200.00\", status: \"paid\" },\n  { id: \"INV-2037\", date: \"Sep 8, 2026\", amount: \"$21,750.00\", status: \"paid\" },\n  { id: \"INV-2036\", date: \"Sep 3, 2026\", amount: \"$1,450.00\", status: \"paid\" },\n]\n\ntype InvoiceListProps = {\n  /** Invoices, newest first. Defaults to recent Lumen invoices. */\n  items?: InvoiceItem[]\n  className?: string\n}\n\nfunction InvoiceList({ items = SAMPLE_ITEMS, className }: InvoiceListProps) {\n  return (\n    <div data-slot=\"invoice-list\" className={cn(\"w-full max-w-md divide-y divide-border rounded-xl border border-border\", className)}>\n      {items.map(i => (\n        <div key={i.id} className=\"flex items-center justify-between gap-3 px-3 py-3 text-sm\">\n          <div><p className=\"font-medium text-fg\">{i.id}</p><p className=\"text-xs text-fg-muted\">{i.date}</p></div>\n          <div className=\"flex items-center gap-3\"><span className=\"tabular-nums\">{i.amount}</span><StatusBadge tone={i.status===\"paid\"?\"success\":i.status===\"void\"?\"neutral\":\"warning\"}>{i.status}</StatusBadge></div>\n        </div>\n      ))}\n    </div>\n  )\n}\nexport { InvoiceList }\nexport type { InvoiceListProps, InvoiceItem }\n"
    }
  ]
}