{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mempool-meter",
  "title": "Mempool meter",
  "description": "Accessible mempool size and fee summary.",
  "registryDependencies": [
    "dennisonbertram/bitcoin-ui/bitcoin-core",
    "dennisonbertram/bitcoin-ui/bitcoin-theme"
  ],
  "files": [
    {
      "path": "components/bitcoin/mempool-meter.tsx",
      "content": "import type { ComponentProps } from \"react\";\n\nimport { clampPercent, formatBytes, formatFeeRate } from \"@/lib/bitcoin\";\nimport { componentClasses } from \"@/lib/utils\";\n\nimport { panelStyles, type BitcoinVisualProps } from \"./shared\";\n\nexport type MempoolMeterProps = Omit<ComponentProps<\"section\">, \"children\"> &\n  BitcoinVisualProps & {\n    size: number;\n    transactionCount: number;\n    medianFeeRate: number;\n    /** Scale ceiling in bytes. @default 300_000_000 */\n    capacity?: number;\n  };\n\nexport function MempoolMeter({\n  size,\n  transactionCount,\n  medianFeeRate,\n  capacity = 300_000_000,\n  unstyled,\n  className,\n  ...props\n}: MempoolMeterProps) {\n  const percent = clampPercent((Math.max(size, 0) / Math.max(capacity, 1)) * 100);\n\n  return (\n    <section\n      data-slot=\"mempool-meter\"\n      data-unstyled={unstyled || undefined}\n      aria-label=\"Mempool status\"\n      className={componentClasses(\n        unstyled,\n        [panelStyles, \"grid gap-5 p-5\"],\n        className,\n      )}\n      {...props}\n    >\n      <header\n        data-slot=\"mempool-meter-header\"\n        className={componentClasses(\n          unstyled,\n          \"flex min-w-0 items-start justify-between gap-4\",\n        )}\n      >\n        <div>\n          <h3\n            className={componentClasses(\n              unstyled,\n              \"text-sm font-medium tracking-[-0.01em]\",\n            )}\n          >\n            Mempool\n          </h3>\n          <p\n            className={componentClasses(\n              unstyled,\n              \"mt-1 text-xs text-[var(--color-muted)]\",\n            )}\n          >\n            {new Intl.NumberFormat(\"en-US\").format(transactionCount)} transactions\n          </p>\n        </div>\n        <span\n          className={componentClasses(\n            unstyled,\n            \"font-mono text-sm font-medium tabular-nums\",\n          )}\n        >\n          {formatBytes(size)}\n        </span>\n      </header>\n      <div\n        data-slot=\"mempool-meter-track\"\n        role=\"progressbar\"\n        aria-label=\"Mempool size\"\n        aria-valuemin={0}\n        aria-valuemax={capacity}\n        aria-valuenow={Math.min(Math.max(size, 0), capacity)}\n        aria-valuetext={`${formatBytes(size)}, ${Math.round(percent)} percent of display capacity`}\n        className={componentClasses(\n          unstyled,\n          \"h-2 overflow-hidden rounded-[var(--radius-full)] bg-[var(--color-surface-active)]\",\n        )}\n      >\n        <span\n          data-slot=\"mempool-meter-value\"\n          aria-hidden=\"true\"\n          className={componentClasses(\n            unstyled,\n            \"block h-full rounded-[var(--radius-full)] bg-[var(--color-bitcoin)]\",\n          )}\n          style={{ width: `${percent}%` }}\n        />\n      </div>\n      <dl\n        className={componentClasses(\n          unstyled,\n          \"grid grid-cols-2 gap-4 border-t border-[var(--color-rule-subtle)] pt-4\",\n        )}\n      >\n        <div>\n          <dt\n            className={componentClasses(\n              unstyled,\n              \"text-xs text-[var(--color-muted)]\",\n            )}\n          >\n            Median fee\n          </dt>\n          <dd\n            className={componentClasses(\n              unstyled,\n              \"mt-1 font-mono text-sm font-medium tabular-nums\",\n            )}\n          >\n            {formatFeeRate(medianFeeRate)}\n          </dd>\n        </div>\n        <div>\n          <dt\n            className={componentClasses(\n              unstyled,\n              \"text-xs text-[var(--color-muted)]\",\n            )}\n          >\n            Load\n          </dt>\n          <dd\n            className={componentClasses(\n              unstyled,\n              \"mt-1 font-mono text-sm font-medium tabular-nums\",\n            )}\n          >\n            {Math.round(percent)}%\n          </dd>\n        </div>\n      </dl>\n    </section>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}