{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "swaps-fx",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "Amount → fee → rate → recipient gets. Every line.",
  "files": [
    {
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport type { MoneyValue } from \"@/lib/ledger/money.types\";\nimport { Money } from \"@/components/ledger/money\";\nimport { RateLine } from \"@/components/ledger/rate-line\";\nimport { Rule } from \"@/components/ledger/rule\";\n\nexport interface ConversionBreakdownProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  amount: MoneyValue;\n  converted: MoneyValue;\n  /** Every fee named and itemized. Never a lump \"Fees\". */\n  fees: { label: string; amount: MoneyValue }[];\n  from: string;\n  rate: number;\n  rateAsOf: Date;\n  recipientGets: MoneyValue;\n  to: string;\n}\n\n/** The honesty pattern, as a component. Every line visible. */\nexport const ConversionBreakdown = React.forwardRef<HTMLDivElement, ConversionBreakdownProps>(\n  ({ className, amount, fees, converted, from, to, rate, rateAsOf, recipientGets, ...props }, ref) => (\n    <div className={cn(\"w-full\", className)} ref={ref} {...props}>\n      <table className=\"w-full\">\n        <caption className=\"sr-only\">Conversion breakdown</caption>\n        <tbody>\n          <Line amount={amount} label=\"Amount to convert\" showCode />\n          {fees.map((f) => (\n            <Line amount={f.amount} key={f.label} label={f.label} negative showCode />\n          ))}\n          <tr>\n            <td />\n            <td className=\"py-1\">\n              <Rule variant=\"subtotal\" />\n            </td>\n          </tr>\n          <Line amount={converted} emphasis label=\"Amount we’ll convert\" showCode />\n          <tr>\n            <th className=\"pt-3 text-left\" colSpan={2} scope=\"row\">\n              <RateLine asOf={rateAsOf} from={from} rate={rate} to={to} />\n            </th>\n          </tr>\n          <Line amount={recipientGets} emphasis label=\"Recipient gets\" showCode size=\"md\" />\n          <tr>\n            <td />\n            <td className=\"pt-1\">\n              <Rule variant=\"total\" />\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  ),\n);\nConversionBreakdown.displayName = \"ConversionBreakdown\";\n\nfunction Line({\n  label,\n  amount,\n  showCode,\n  emphasis,\n  negative,\n  size = \"sm\",\n}: {\n  label: string;\n  amount: MoneyValue;\n  showCode?: boolean;\n  emphasis?: boolean;\n  negative?: boolean;\n  size?: \"sm\" | \"md\";\n}) {\n  return (\n    <tr>\n      <th\n        className={cn(\n          \"py-1 pr-6 text-left text-body font-normal\",\n          emphasis ? \"font-medium text-text-primary\" : \"text-text-secondary\",\n        )}\n        scope=\"row\"\n      >\n        {label}\n      </th>\n      <td className=\"py-1 text-right\">\n        <Money\n          showCode={showCode}\n          size={size}\n          value={negative ? { ...amount, amount: -Math.abs(Number(amount.amount)) } : amount}\n        />\n      </td>\n    </tr>\n  );\n}\n",
      "path": "components/ledger/conversion-breakdown.tsx",
      "target": "components/ledger/conversion-breakdown.tsx",
      "type": "registry:component"
    }
  ],
  "name": "conversion-breakdown",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/money",
    "@lopifi/money.types",
    "@lopifi/rate-line",
    "@lopifi/rule"
  ],
  "title": "ConversionBreakdown",
  "type": "registry:component"
}