{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "ledger-tables",
    "finance",
    "accounting"
  ],
  "dependencies": [
    "@base-ui-components/react"
  ],
  "description": "The mobile re-rank.",
  "files": [
    {
      "content": "\"use client\";\n\nimport { Checkbox } from \"@base-ui-components/react/checkbox\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport { formatDateShort } from \"@/lib/ledger/fiscal-period\";\nimport { EntityMark } from \"@/components/ledger/entity-mark\";\nimport { CheckIcon, EllipsisHorizontalIcon } from \"@/components/ledger/icons\";\nimport { Money } from \"@/components/ledger/money\";\nimport { StatusPill } from \"@/components/ledger/status-pill\";\nimport type { Transaction } from \"@/components/ledger/transaction-table\";\n\nexport interface TransactionCardProps {\n  onOpen?: () => void;\n  onToggle?: () => void;\n  selected?: boolean;\n  transaction: Transaction;\n}\n\n/**\n * The mobile re-rank, not a squeezed table row: 72px, 16px inset, full-bleed\n * divider, 32px mark, amount right-aligned and never truncated.\n *\n * Swipe is undiscoverable, so the overflow menu is the equivalent and it is\n * always present.\n */\nexport function TransactionCard({\n  transaction: t,\n  selected = false,\n  onToggle,\n  onOpen,\n}: TransactionCardProps) {\n  return (\n    <li\n      className={cn(\n        \"flex min-h-[72px] items-center gap-3 border-b border-border-subtle px-4 last:border-b-0\",\n        selected && \"bg-surface-selected\",\n        // Pending is the warning rule and the \"Pending\" label, never a dimmed\n        // row: at 70% its secondary text fell to 3.2:1.\n        t.pending && \"border-l-2 border-l-[var(--warning)]\",\n      )}\n    >\n      {onToggle ? (\n        <Checkbox.Root\n          aria-label={`Select ${t.description}`}\n          checked={selected}\n          className=\"grid size-5 shrink-0 place-items-center rounded-xs border border-border-strong bg-surface data-[checked]:border-accent data-[checked]:bg-accent\"\n          onCheckedChange={onToggle}\n        >\n          <Checkbox.Indicator className=\"text-accent-fg\">\n            <CheckIcon className=\"size-3.5\" />\n          </Checkbox.Indicator>\n        </Checkbox.Root>\n      ) : null}\n\n      <EntityMark name={t.merchant ?? t.description} size={32} />\n\n      <button className=\"min-w-0 flex-1 py-3 text-left\" onClick={onOpen} type=\"button\">\n        <span className=\"block truncate text-body font-medium\">{t.description}</span>\n        <span className=\"mt-0.5 block truncate text-caption text-text-secondary\">\n          <span className=\"numeric\">{formatDateShort(t.date)}</span> · {t.account}{\" \"}\n          <span className=\"reference-numeric\">••{t.accountLast4}</span>\n        </span>\n        {t.status !== \"settled\" ? (\n          <span className=\"mt-1 inline-block\">\n            <StatusPill entity=\"Transaction\" status={t.status} />\n          </span>\n        ) : null}\n      </button>\n\n      <div className=\"flex shrink-0 flex-col items-end gap-1\">\n        <Money accounting colorBySign value={t.amount} />\n        <button\n          aria-label={`Actions for ${t.description}`}\n          className=\"press grid size-8 place-items-center rounded-sm text-text-tertiary hover:bg-surface-hover\"\n          type=\"button\"\n        >\n          <EllipsisHorizontalIcon aria-hidden=\"true\" className=\"size-4\" />\n        </button>\n      </div>\n    </li>\n  );\n}\n",
      "path": "components/ledger/transaction-card.tsx",
      "target": "components/ledger/transaction-card.tsx",
      "type": "registry:component"
    }
  ],
  "name": "transaction-card",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/entity-mark",
    "@lopifi/fiscal-period",
    "@lopifi/icons",
    "@lopifi/money",
    "@lopifi/status-pill",
    "@lopifi/transaction-table"
  ],
  "title": "TransactionCard",
  "type": "registry:component"
}