{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "statements",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "All accounts with the debit=credit proof.",
  "files": [
    {
      "content": "import * as React from \"react\";\nimport { useScrollEdges } from \"@/hooks/ledger/use-scroll-edges\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport { CheckIcon, ExclamationTriangleIcon } from \"@/components/ledger/icons\";\nimport { Money } from \"@/components/ledger/money\";\nimport { Rule } from \"@/components/ledger/rule\";\n\nexport type TrialBalanceRow = {\n  number: string;\n  name: string;\n  /** Two columns. One of these is zero for any given account. */\n  debit: number;\n  credit: number;\n  normalBalance: \"Dr\" | \"Cr\";\n};\n\nexport interface TrialBalanceProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  asOfLabel: string;\n  currency: string;\n  /** Caps the scroller so the header and the account column can freeze. */\n  maxHeight?: number;\n  rows: TrialBalanceRow[];\n  totalCredit: number;\n  totalDebit: number;\n}\n\n/**\n * The most boring component in the library, and the one an accountant checks\n * first. Every account, with the proof that debits equal credits.\n */\nexport const TrialBalance = React.forwardRef<HTMLDivElement, TrialBalanceProps>(\n  ({ className, rows, currency, totalDebit, totalCredit, asOfLabel, maxHeight = 520, ...props }, ref) => {\n    const scroller = useScrollEdges<HTMLDivElement>();\n    const balanced = totalDebit === totalCredit;\n    return (\n      <div className={cn(\"rounded-xl border border-border bg-surface\", className)} ref={ref} {...props}>\n        <div className=\"px-6 pb-4 pt-6\">\n          <p className=\"text-title-sm font-medium\">Trial balance</p>\n          <p className=\"text-caption text-text-secondary\">{asOfLabel}</p>\n        </div>\n        <div className=\"ledger-frozen scrollbar-thin\" ref={scroller} style={{ maxHeight }}>\n          <table className=\"w-full min-w-[680px]\">\n            <caption className=\"sr-only\">Trial balance. {asOfLabel}</caption>\n            <thead>\n              <tr className=\"border-b border-border-subtle\">\n                <th className=\"px-6 py-3 text-left text-label font-medium text-text-secondary\" scope=\"col\">\n                  Account\n                </th>\n                <th className=\"px-3 py-3 text-left text-label font-medium text-text-secondary\" scope=\"col\">\n                  Normal\n                </th>\n                <th className=\"px-3 py-3 text-right text-label font-medium text-text-secondary\" scope=\"col\">\n                  Debit\n                </th>\n                <th className=\"px-6 py-3 text-right text-label font-medium text-text-secondary\" scope=\"col\">\n                  Credit\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              {rows.map((r) => (\n                <tr className=\"border-b border-border-subtle\" key={r.number}>\n                  <th className=\"px-6 py-2 text-left font-normal\" scope=\"row\">\n                    <span className=\"reference-numeric text-caption text-text-tertiary\">{r.number}</span>{\" \"}\n                    <span className=\"text-body\">{r.name}</span>\n                  </th>\n                  <td className=\"px-3 py-2 text-left text-caption text-text-secondary\">{r.normalBalance}</td>\n                  <td className=\"px-3 py-2 text-right\">\n                    {r.debit === 0 ? (\n                      <span className=\"numeric relative text-figure-sm text-text-tertiary\">\n                        <span aria-hidden=\"true\">—</span>\n                        <span className=\"sr-only select-none\">zero</span>\n                      </span>\n                    ) : (\n                      <Money accounting value={{ amount: r.debit, currency }} />\n                    )}\n                  </td>\n                  <td className=\"px-6 py-2 text-right\">\n                    {r.credit === 0 ? (\n                      <span className=\"numeric relative text-figure-sm text-text-tertiary\">\n                        <span aria-hidden=\"true\">—</span>\n                        <span className=\"sr-only select-none\">zero</span>\n                      </span>\n                    ) : (\n                      <Money accounting value={{ amount: r.credit, currency }} />\n                    )}\n                  </td>\n                </tr>\n              ))}\n            </tbody>\n            <tfoot>\n              <tr>\n                <td colSpan={2} />\n                <td className=\"px-3\">\n                  <Rule variant=\"subtotal\" />\n                </td>\n                <td className=\"px-6\">\n                  <Rule variant=\"subtotal\" />\n                </td>\n              </tr>\n              <tr>\n                <th className=\"px-6 py-3 text-left text-label font-medium\" scope=\"row\">\n                  Totals\n                </th>\n                <td />\n                <td className=\"px-3 py-3 text-right\">\n                  <Money accounting size=\"md\" value={{ amount: totalDebit, currency }} />\n                </td>\n                <td className=\"px-6 py-3 text-right\">\n                  <Money accounting size=\"md\" value={{ amount: totalCredit, currency }} />\n                </td>\n              </tr>\n              <tr>\n                <td colSpan={2} />\n                <td className=\"px-3\">\n                  <Rule variant=\"total\" />\n                </td>\n                <td className=\"px-6\">\n                  <Rule variant=\"total\" />\n                </td>\n              </tr>\n            </tfoot>\n          </table>\n        </div>\n\n        <p\n          className={cn(\n            \"m-6 mt-4 flex items-center gap-2 rounded-sm px-3 py-2 text-body\",\n            balanced ? \"bg-positive-subtle text-positive\" : \"bg-negative-subtle text-negative\",\n          )}\n          role={balanced ? undefined : \"alert\"}\n        >\n          {balanced ? (\n            <CheckIcon aria-hidden=\"true\" className=\"size-4\" />\n          ) : (\n            <ExclamationTriangleIcon aria-hidden=\"true\" className=\"size-4\" />\n          )}\n          {balanced ? (\n            \"Debits equal credits.\"\n          ) : (\n            <>\n              Out of balance by{\" \"}\n              <Money tone=\"inherit\" value={{ amount: Math.abs(totalDebit - totalCredit), currency }} />.\n            </>\n          )}\n        </p>\n      </div>\n    );\n  },\n);\nTrialBalance.displayName = \"TrialBalance\";\n",
      "path": "components/ledger/trial-balance.tsx",
      "target": "components/ledger/trial-balance.tsx",
      "type": "registry:component"
    }
  ],
  "meta": {
    "license": "MIT"
  },
  "name": "trial-balance",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/icons",
    "@lopifi/money",
    "@lopifi/rule",
    "@lopifi/use-scroll-edges"
  ],
  "title": "TrialBalance",
  "type": "registry:component"
}