{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "difficulty-adjustment",
  "title": "Difficulty adjustment",
  "description": "Difficulty epoch progress and projected change.",
  "registryDependencies": [
    "dennisonbertram/bitcoin-ui/bitcoin-core",
    "dennisonbertram/bitcoin-ui/bitcoin-theme"
  ],
  "files": [
    {
      "path": "components/bitcoin/difficulty-adjustment.tsx",
      "content": "import type { ComponentProps } from \"react\";\n\nimport { clampPercent, formatBlockHeight } from \"@/lib/bitcoin\";\nimport { componentClasses } from \"@/lib/utils\";\n\nimport { panelStyles, type BitcoinVisualProps } from \"./shared\";\n\nexport type DifficultyAdjustmentProps = Omit<\n  ComponentProps<\"section\">,\n  \"children\"\n> &\n  BitcoinVisualProps & {\n    currentHeight: number;\n    epochStartHeight: number;\n    projectedChange: number;\n    remainingBlocks: number;\n    estimatedTime?: string;\n  };\n\nexport function DifficultyAdjustment({\n  currentHeight,\n  epochStartHeight,\n  projectedChange,\n  remainingBlocks,\n  estimatedTime,\n  unstyled,\n  className,\n  ...props\n}: DifficultyAdjustmentProps) {\n  const elapsedBlocks = Math.max(0, currentHeight - epochStartHeight);\n  const percent = clampPercent((elapsedBlocks / 2_016) * 100);\n  const changeLabel = `${projectedChange >= 0 ? \"+\" : \"\"}${projectedChange.toFixed(2)}%`;\n\n  return (\n    <section\n      data-slot=\"difficulty-adjustment\"\n      data-direction={projectedChange >= 0 ? \"up\" : \"down\"}\n      data-unstyled={unstyled || undefined}\n      aria-label=\"Difficulty adjustment\"\n      className={componentClasses(\n        unstyled,\n        [panelStyles, \"grid gap-5 p-5\"],\n        className,\n      )}\n      {...props}\n    >\n      <div\n        className={componentClasses(\n          unstyled,\n          \"flex items-baseline justify-between gap-4\",\n        )}\n      >\n        <div>\n          <h3\n            className={componentClasses(unstyled, \"text-sm font-medium\")}\n          >\n            Difficulty epoch\n          </h3>\n          <p\n            className={componentClasses(\n              unstyled,\n              \"mt-1 font-mono text-xs tabular-nums text-[var(--color-muted)]\",\n            )}\n          >\n            Block {formatBlockHeight(currentHeight)}\n          </p>\n        </div>\n        <span\n          data-slot=\"difficulty-adjustment-change\"\n          className={componentClasses(\n            unstyled,\n            [\n              \"font-mono text-lg font-medium tabular-nums\",\n              projectedChange >= 0\n                ? \"text-[var(--color-success)]\"\n                : \"text-[var(--color-danger)]\",\n            ],\n          )}\n        >\n          {changeLabel}\n        </span>\n      </div>\n      <div\n        role=\"progressbar\"\n        aria-label=\"Difficulty epoch progress\"\n        aria-valuemin={0}\n        aria-valuemax={2016}\n        aria-valuenow={Math.min(elapsedBlocks, 2016)}\n        aria-valuetext={`${elapsedBlocks} of 2,016 blocks`}\n        className={componentClasses(\n          unstyled,\n          \"h-2 overflow-hidden rounded-[var(--radius-full)] bg-[var(--color-surface-active)]\",\n        )}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={componentClasses(\n            unstyled,\n            \"block h-full rounded-[var(--radius-full)] bg-[var(--color-ink)]\",\n          )}\n          style={{ width: `${percent}%` }}\n        />\n      </div>\n      <div\n        className={componentClasses(\n          unstyled,\n          \"flex flex-wrap justify-between gap-2 text-xs text-[var(--color-muted)]\",\n        )}\n      >\n        <span>{new Intl.NumberFormat(\"en-US\").format(remainingBlocks)} blocks left</span>\n        {estimatedTime ? <span>Est. {estimatedTime}</span> : null}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}