{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "merkle-proof",
  "title": "Merkle proof",
  "description": "Readable transaction-to-root Merkle proof path.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "dennisonbertram/bitcoin-ui/hash-display"
  ],
  "files": [
    {
      "path": "components/bitcoin/merkle-proof.tsx",
      "content": "import { CornerDownRight, ShieldCheck } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\n\nimport { componentClasses } from \"@/lib/utils\";\n\nimport { HashDisplay } from \"./hash-display\";\nimport { panelStyles, type BitcoinVisualProps } from \"./shared\";\n\nexport interface MerkleProofNode {\n  hash: string;\n  side: \"left\" | \"right\";\n}\n\nexport type MerkleProofProps = Omit<ComponentProps<\"section\">, \"children\"> &\n  BitcoinVisualProps & {\n    transactionId: string;\n    merkleRoot: string;\n    proof: MerkleProofNode[];\n    verified?: boolean;\n  };\n\nexport function MerkleProof({\n  transactionId,\n  merkleRoot,\n  proof,\n  verified,\n  unstyled,\n  className,\n  ...props\n}: MerkleProofProps) {\n  return (\n    <section\n      data-slot=\"merkle-proof\"\n      data-state={verified ? \"verified\" : \"unverified\"}\n      data-unstyled={unstyled || undefined}\n      aria-label=\"Merkle proof\"\n      className={componentClasses(\n        unstyled,\n        [panelStyles, \"grid min-w-0 gap-5 p-5\"],\n        className,\n      )}\n      {...props}\n    >\n      <header\n        className={componentClasses(\n          unstyled,\n          \"flex items-center justify-between gap-4\",\n        )}\n      >\n        <h3 className={componentClasses(unstyled, \"text-sm font-medium\")}>\n          Merkle proof\n        </h3>\n        {verified ? (\n          <span\n            className={componentClasses(\n              unstyled,\n              \"inline-flex items-center gap-1.5 text-xs font-medium text-[var(--color-success)]\",\n            )}\n          >\n            <ShieldCheck aria-hidden=\"true\" className=\"size-3.5\" />\n            Verified\n          </span>\n        ) : null}\n      </header>\n      <div>\n        <p\n          className={componentClasses(\n            unstyled,\n            \"mb-1 text-xs text-[var(--color-muted)]\",\n          )}\n        >\n          Transaction\n        </p>\n        <HashDisplay\n          value={transactionId}\n          label=\"Transaction ID\"\n          unstyled={unstyled}\n        />\n      </div>\n      <ol\n        data-slot=\"merkle-proof-path\"\n        className={componentClasses(\n          unstyled,\n          \"m-0 grid list-none gap-2 border-l border-[var(--color-rule)] p-0 pl-4\",\n        )}\n      >\n        {proof.map((node, index) => (\n          <li\n            key={`${node.hash}-${index}`}\n            className={componentClasses(\n              unstyled,\n              \"grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-2\",\n            )}\n          >\n            <span\n              className={componentClasses(\n                unstyled,\n                \"inline-flex min-w-12 items-center gap-1 font-mono text-[0.6875rem] text-[var(--color-muted)]\",\n              )}\n            >\n              <CornerDownRight aria-hidden=\"true\" className=\"size-3\" />\n              {node.side}\n            </span>\n            <HashDisplay\n              value={node.hash}\n              label={`Proof node ${index + 1}`}\n              copyable={false}\n              unstyled={unstyled}\n            />\n          </li>\n        ))}\n      </ol>\n      <div\n        className={componentClasses(\n          unstyled,\n          \"border-t border-[var(--color-rule-subtle)] pt-4\",\n        )}\n      >\n        <p\n          className={componentClasses(\n            unstyled,\n            \"mb-1 text-xs text-[var(--color-muted)]\",\n          )}\n        >\n          Merkle root\n        </p>\n        <HashDisplay\n          value={merkleRoot}\n          label=\"Merkle root\"\n          unstyled={unstyled}\n        />\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}