{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "transaction-flow",
  "title": "Transaction flow",
  "description": "Responsive Bitcoin input and output flow.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "dennisonbertram/bitcoin-ui/bitcoin-amount",
    "dennisonbertram/bitcoin-ui/hash-display",
    "dennisonbertram/bitcoin-ui/protocol-badges"
  ],
  "files": [
    {
      "path": "components/bitcoin/transaction-flow.tsx",
      "content": "import { ArrowDown, ArrowRight } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\n\nimport type { TransactionEndpoint } from \"@/lib/bitcoin\";\nimport { componentClasses } from \"@/lib/utils\";\n\nimport { BitcoinAmount } from \"./bitcoin-amount\";\nimport { HashDisplay } from \"./hash-display\";\nimport { ScriptBadge } from \"./script-badge\";\nimport { panelStyles, type BitcoinVisualProps } from \"./shared\";\n\nexport type TransactionFlowProps = Omit<\n  ComponentProps<\"section\">,\n  \"children\"\n> &\n  BitcoinVisualProps & {\n    inputs: TransactionEndpoint[];\n    outputs: TransactionEndpoint[];\n    fee?: bigint | number | string;\n  };\n\nexport function TransactionFlow({\n  inputs,\n  outputs,\n  fee,\n  unstyled,\n  className,\n  ...props\n}: TransactionFlowProps) {\n  return (\n    <section\n      data-slot=\"transaction-flow\"\n      data-unstyled={unstyled || undefined}\n      aria-label=\"Transaction flow\"\n      className={componentClasses(\n        unstyled,\n        [\n          panelStyles,\n          \"grid min-w-0 gap-4 p-4 md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:items-center\",\n        ],\n        className,\n      )}\n      {...props}\n    >\n      <EndpointGroup\n        label=\"Inputs\"\n        endpoints={inputs}\n        unstyled={unstyled}\n      />\n      <div\n        data-slot=\"transaction-flow-direction\"\n        className={componentClasses(\n          unstyled,\n          \"flex items-center justify-center text-[var(--color-muted)]\",\n        )}\n        aria-hidden=\"true\"\n      >\n        <ArrowDown className=\"size-4 md:hidden\" />\n        <ArrowRight className=\"hidden size-4 md:block\" />\n      </div>\n      <EndpointGroup\n        label=\"Outputs\"\n        endpoints={outputs}\n        unstyled={unstyled}\n      />\n      {fee !== undefined ? (\n        <footer\n          data-slot=\"transaction-flow-fee\"\n          className={componentClasses(\n            unstyled,\n            \"flex items-center justify-between gap-4 border-t border-[var(--color-rule-subtle)] pt-4 text-xs md:col-span-3\",\n          )}\n        >\n          <span className={componentClasses(unstyled, \"text-[var(--color-muted)]\")}>\n            Miner fee\n          </span>\n          <BitcoinAmount value={fee} unit=\"sat\" unstyled={unstyled} />\n        </footer>\n      ) : null}\n    </section>\n  );\n}\n\nfunction EndpointGroup({\n  label,\n  endpoints,\n  unstyled,\n}: {\n  label: string;\n  endpoints: TransactionEndpoint[];\n  unstyled?: boolean;\n}) {\n  return (\n    <div data-slot={`transaction-${label.toLowerCase()}`}>\n      <h3\n        className={componentClasses(\n          unstyled,\n          \"mb-2 text-xs font-medium text-[var(--color-muted)]\",\n        )}\n      >\n        {label}\n      </h3>\n      <ul\n        className={componentClasses(\n          unstyled,\n          \"m-0 grid list-none gap-2 p-0\",\n        )}\n      >\n        {endpoints.map((endpoint) => (\n          <li\n            key={endpoint.id}\n            className={componentClasses(\n              unstyled,\n              \"grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-[var(--radius-md)] bg-[var(--color-surface)] p-3\",\n            )}\n          >\n            <div className=\"min-w-0\">\n              {endpoint.coinbase ? (\n                <span\n                  className={componentClasses(\n                    unstyled,\n                    \"text-sm font-medium\",\n                  )}\n                >\n                  Coinbase\n                </span>\n              ) : endpoint.address ? (\n                <HashDisplay\n                  value={endpoint.address}\n                  label=\"Address\"\n                  startCharacters={8}\n                  endCharacters={6}\n                  copyable={false}\n                  unstyled={unstyled}\n                />\n              ) : (\n                <span className={componentClasses(unstyled, \"text-sm\")}>\n                  {endpoint.label ?? \"Unknown\"}\n                </span>\n              )}\n              {endpoint.scriptType ? (\n                <div className={componentClasses(unstyled, \"mt-1.5\")}>\n                  <ScriptBadge\n                    type={endpoint.scriptType}\n                    unstyled={unstyled}\n                  />\n                </div>\n              ) : null}\n            </div>\n            <BitcoinAmount\n              value={endpoint.value}\n              unit=\"sat\"\n              unstyled={unstyled}\n            />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}