{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "statements",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "Indent level, subtotal, total, expand.",
  "files": [
    {
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport type { MoneyValue, StatementRowVariant } from \"@/lib/ledger/money.types\";\nimport { Money } from \"@/components/ledger/money\";\n\nexport interface StatementRowProps extends React.ComponentPropsWithoutRef<\"tr\"> {\n  expandable?: boolean;\n  expanded?: boolean;\n  label: string;\n  level?: number;\n  onToggle?: () => void;\n  values: (MoneyValue | null)[];\n  variant?: StatementRowVariant;\n}\n\n/**\n * One line. Server-safe (no `\"use client\"`) — a 400-row statement renders on\n * the server, which is why `Money`, `Rule` and this component all stay RSC-\n * compatible. That is a performance decision, not a purity one.\n */\nexport const StatementRow = React.forwardRef<HTMLTableRowElement, StatementRowProps>(\n  (\n    { className, label, level = 1, variant = \"line\", values, expandable, expanded, onToggle, ...props },\n    ref,\n  ) => {\n    const emphasized = variant === \"subtotal\" || variant === \"total\";\n    const accessibleLabel =\n      variant === \"total\" ? `${label}, grand total` : variant === \"subtotal\" ? `${label}, subtotal` : label;\n\n    return (\n      <tr\n        className={cn(\"border-b border-border-subtle\", className)}\n        data-row-variant={variant}\n        ref={ref}\n        {...props}\n      >\n        <th\n          className={cn(\n            \"py-3 pr-4 text-left font-normal\",\n            emphasized && \"font-medium\",\n            variant === \"section\" && \"text-title-sm font-medium\",\n          )}\n          data-level={level}\n          scope=\"row\"\n          style={{ paddingLeft: 24 + 24 * (level - 1) }}\n        >\n          {expandable ? (\n            <button\n              aria-expanded={expanded}\n              className=\"mr-1 text-text-tertiary\"\n              onClick={onToggle}\n              type=\"button\"\n            >\n              {expanded ? \"−\" : \"+\"}\n            </button>\n          ) : null}\n          {accessibleLabel}\n        </th>\n        {values.map((v, i) => (\n          <td className=\"px-3 py-3 text-right\" key={i}>\n            {variant === \"section\" ? null : (\n              <Money accounting size={variant === \"total\" ? \"md\" : \"sm\"} statement value={v} />\n            )}\n          </td>\n        ))}\n      </tr>\n    );\n  },\n);\nStatementRow.displayName = \"StatementRow\";\n\nexport { Rule } from \"@/components/ledger/rule\";\n",
      "path": "components/ledger/statement-row.tsx",
      "target": "components/ledger/statement-row.tsx",
      "type": "registry:component"
    }
  ],
  "name": "statement-row",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/money",
    "@lopifi/money.types",
    "@lopifi/rule"
  ],
  "title": "StatementRow",
  "type": "registry:component"
}