{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "payments",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "Printable/shareable receipt.",
  "files": [
    {
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport { formatTimestamp } from \"@/lib/ledger/fiscal-period\";\nimport type { MoneyValue } from \"@/lib/ledger/money.types\";\nimport { Money } from \"@/components/ledger/money\";\nimport { Reference } from \"@/components/ledger/reference\";\nimport { Rule } from \"@/components/ledger/rule\";\n\nexport interface ReceiptSheetProps extends React.ComponentPropsWithoutRef<\"article\"> {\n  amount: MoneyValue;\n  at: Date;\n  entity: string;\n  lines?: { label: string; amount: MoneyValue }[];\n  method: string;\n  payee: string;\n  reference: string;\n  timeZone?: string;\n}\n\n/**\n * A document people keep. Print styles are first-class, and nothing here is\n * abbreviated.\n */\nexport const ReceiptSheet = React.forwardRef<HTMLElement, ReceiptSheetProps>(\n  (\n    { className, entity, amount, payee, method, reference, at, timeZone = \"UTC\", lines = [], ...props },\n    ref,\n  ) => (\n    <article\n      className={cn(\"rounded-xl border border-border bg-surface p-6 print:border-0\", className)}\n      ref={ref}\n      {...props}\n    >\n      <header className=\"border-b border-border-subtle pb-4\">\n        <p className=\"font-display text-title-md\">{entity}</p>\n        <p className=\"text-caption text-text-secondary\">Payment receipt</p>\n      </header>\n\n      <dl className=\"mt-4 space-y-2\">\n        <Row label=\"Paid to\">{payee}</Row>\n        <Row label=\"Method\">{method}</Row>\n        <Row label=\"Reference\">\n          <Reference truncate={false} value={reference} />\n        </Row>\n        <Row label=\"Date\">\n          <span className=\"numeric\">{formatTimestamp(at, timeZone)}</span>\n        </Row>\n      </dl>\n\n      {lines.length > 0 ? (\n        <table className=\"mt-4 w-full\">\n          <tbody>\n            {lines.map((l) => (\n              <tr key={l.label}>\n                <th className=\"py-1 text-left text-body font-normal text-text-secondary\" scope=\"row\">\n                  {l.label}\n                </th>\n                <td className=\"py-1 text-right\">\n                  <Money accounting value={l.amount} />\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      ) : null}\n\n      <div className=\"mt-4\">\n        <Rule className=\"ml-auto w-1/2\" variant=\"subtotal\" />\n        <div className=\"flex items-baseline justify-between pt-2\">\n          <span className=\"text-label font-medium\">Total paid</span>\n          <Money accounting size=\"md\" value={amount} />\n        </div>\n        <Rule className=\"ml-auto mt-1 w-1/2\" variant=\"total\" />\n      </div>\n    </article>\n  ),\n);\nReceiptSheet.displayName = \"ReceiptSheet\";\n\nfunction Row({ label, children }: { label: string; children: React.ReactNode }) {\n  return (\n    <div className=\"flex items-baseline justify-between gap-6\">\n      <dt className=\"text-body text-text-secondary\">{label}</dt>\n      <dd className=\"text-right text-body\">{children}</dd>\n    </div>\n  );\n}\n",
      "path": "components/ledger/receipt-sheet.tsx",
      "target": "components/ledger/receipt-sheet.tsx",
      "type": "registry:component"
    }
  ],
  "name": "receipt-sheet",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/fiscal-period",
    "@lopifi/money",
    "@lopifi/money.types",
    "@lopifi/reference",
    "@lopifi/rule"
  ],
  "title": "ReceiptSheet",
  "type": "registry:component"
}