{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "swaps-fx",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "Multi-hop path visualization.",
  "files": [
    {
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport { formatRate } from \"@/lib/ledger/format-money\";\nimport type { MoneyValue } from \"@/lib/ledger/money.types\";\nimport { ArrowRightIcon } from \"@/components/ledger/icons\";\nimport { Money } from \"@/components/ledger/money\";\n\nexport type Hop = { from: string; to: string; rate: number; fee: MoneyValue };\n\nexport interface SwapRouteProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  hops: Hop[];\n}\n\n/** A horizontal flow, each hop with its own rate and fee. Motion explains the mechanism. */\nexport const SwapRoute = React.forwardRef<HTMLDivElement, SwapRouteProps>(\n  ({ className, hops, ...props }, ref) => (\n    <div\n      aria-label=\"Conversion route\"\n      className={cn(\"flex flex-wrap items-stretch gap-2\", className)}\n      ref={ref}\n      role=\"list\"\n      {...props}\n    >\n      {hops.map((hop, i) => (\n        <React.Fragment key={`${hop.from}-${hop.to}`}>\n          <div className=\"flex-1 rounded-md border border-border bg-surface p-3\" role=\"listitem\">\n            <p className=\"reference-numeric text-label font-medium\">\n              {hop.from} → {hop.to}\n            </p>\n            <p className=\"numeric mt-1 text-caption text-text-secondary\">{formatRate(hop.rate)}</p>\n            <p className=\"text-caption text-text-secondary\">\n              Fee <Money showCode size=\"xs\" tone=\"inherit\" value={hop.fee} />\n            </p>\n          </div>\n          {i < hops.length - 1 ? (\n            <ArrowRightIcon aria-hidden=\"true\" className=\"size-4 self-center text-text-tertiary\" />\n          ) : null}\n        </React.Fragment>\n      ))}\n    </div>\n  ),\n);\nSwapRoute.displayName = \"SwapRoute\";\n",
      "path": "components/ledger/swap-route.tsx",
      "target": "components/ledger/swap-route.tsx",
      "type": "registry:component"
    }
  ],
  "meta": {
    "license": "MIT"
  },
  "name": "swap-route",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/format-money",
    "@lopifi/icons",
    "@lopifi/money",
    "@lopifi/money.types"
  ],
  "title": "SwapRoute",
  "type": "registry:component"
}