{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "payments",
    "finance",
    "accounting"
  ],
  "dependencies": [
    "@base-ui-components/react"
  ],
  "description": "Selectable method cards.",
  "files": [
    {
      "content": "\"use client\";\n\nimport { Radio } from \"@base-ui-components/react/radio\";\nimport { RadioGroup } from \"@base-ui-components/react/radio-group\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport type { MoneyValue } from \"@/lib/ledger/money.types\";\nimport { EntityMark } from \"@/components/ledger/entity-mark\";\nimport { CheckIcon } from \"@/components/ledger/icons\";\nimport { Money } from \"@/components/ledger/money\";\nimport { MaskedAccount } from \"@/components/ledger/reference\";\n\nexport type PaymentMethod = {\n  id: string;\n  name: string;\n  last4: string;\n  kind: \"bank\" | \"card\";\n  /** Stated inline; per-method differences are the reason this list exists. */\n  fee?: MoneyValue;\n  arrival: string;\n};\n\nexport interface PaymentMethodListProps {\n  className?: string;\n  methods: PaymentMethod[];\n  onValueChange: (id: string) => void;\n  value: string;\n}\n\n/**\n * Selected state carries a 2px accent border, an accent-subtle background,\n *and* a check glyph — border colour alone fails forced-colors mode.\n */\nexport function PaymentMethodList({ methods, value, onValueChange, className }: PaymentMethodListProps) {\n  return (\n    <RadioGroup\n      aria-label=\"Payment method\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      onValueChange={(v) => onValueChange(String(v))}\n      value={value}\n    >\n      {methods.map((m) => {\n        const selected = m.id === value;\n        return (\n          <Radio.Root\n            className={cn(\n              \"flex items-center gap-3 rounded-md border bg-surface p-3 text-left\",\n              \"transition-colors duration-1 ease-standard\",\n              selected\n                ? \"border-2 border-accent bg-accent-subtle p-[11px]\"\n                : \"border-border hover:bg-surface-hover\",\n            )}\n            key={m.id}\n            value={m.id}\n          >\n            <EntityMark category={m.kind} name={m.name} size={32} />\n            <span className=\"min-w-0 flex-1\">\n              <span className=\"block truncate text-body font-medium\">{m.name}</span>\n              <span className=\"flex items-center gap-2 text-caption text-text-secondary\">\n                <MaskedAccount last4={m.last4} />\n                <span aria-hidden=\"true\">·</span>\n                {m.arrival}\n              </span>\n            </span>\n            {m.fee ? (\n              <span className=\"text-caption text-text-secondary\">\n                Fee <Money size=\"xs\" tone=\"inherit\" value={m.fee} />\n              </span>\n            ) : (\n              <span className=\"text-caption text-text-secondary\">No fee</span>\n            )}\n            <span\n              aria-hidden=\"true\"\n              className={cn(\n                \"grid size-5 shrink-0 place-items-center rounded-full border\",\n                selected ? \"border-accent bg-accent text-accent-fg\" : \"border-border-strong\",\n              )}\n            >\n              {selected ? <CheckIcon className=\"size-3\" /> : null}\n            </span>\n          </Radio.Root>\n        );\n      })}\n    </RadioGroup>\n  );\n}\n",
      "path": "components/ledger/payment-method-list.tsx",
      "target": "components/ledger/payment-method-list.tsx",
      "type": "registry:component"
    }
  ],
  "name": "payment-method-list",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/entity-mark",
    "@lopifi/icons",
    "@lopifi/money",
    "@lopifi/money.types",
    "@lopifi/reference"
  ],
  "title": "PaymentMethodList",
  "type": "registry:component"
}