{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fee-estimates",
  "title": "Fee estimates",
  "description": "Controlled or uncontrolled block-target fee selection.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "dennisonbertram/bitcoin-ui/bitcoin-core",
    "dennisonbertram/bitcoin-ui/bitcoin-theme"
  ],
  "files": [
    {
      "path": "components/bitcoin/fee-estimates.tsx",
      "content": "\"use client\";\n\nimport { Check } from \"lucide-react\";\nimport {\n  type ComponentProps,\n  type KeyboardEvent,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { formatFeeRate, type FeeEstimate } from \"@/lib/bitcoin\";\nimport { componentClasses } from \"@/lib/utils\";\n\nimport {\n  interactiveStyles,\n  panelStyles,\n  type BitcoinVisualProps,\n} from \"./shared\";\n\nexport type FeeEstimatesProps = Omit<ComponentProps<\"div\">, \"children\"> &\n  BitcoinVisualProps & {\n    estimates: FeeEstimate[];\n    selectedBlocks?: number;\n    defaultSelectedBlocks?: number;\n    onSelectionChange?: (estimate: FeeEstimate) => void;\n    disabled?: boolean;\n  };\n\nexport function FeeEstimates({\n  estimates,\n  selectedBlocks,\n  defaultSelectedBlocks,\n  onSelectionChange,\n  disabled,\n  unstyled,\n  className,\n  ...props\n}: FeeEstimatesProps) {\n  const groupLabelId = useId();\n  const initial = defaultSelectedBlocks ?? estimates[0]?.blocks;\n  const [internalSelection, setInternalSelection] = useState(initial);\n  const optionRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  const currentSelection = selectedBlocks ?? internalSelection;\n  const sorted = useMemo(\n    () => [...estimates].sort((a, b) => a.blocks - b.blocks),\n    [estimates],\n  );\n\n  function chooseEstimate(estimate: FeeEstimate) {\n    if (disabled) return;\n    if (selectedBlocks === undefined) setInternalSelection(estimate.blocks);\n    onSelectionChange?.(estimate);\n  }\n\n  function handleOptionKeyDown(\n    event: KeyboardEvent<HTMLButtonElement>,\n    index: number,\n  ) {\n    if (disabled || sorted.length === 0) return;\n\n    let nextIndex: number;\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        nextIndex = (index + 1) % sorted.length;\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        nextIndex = (index - 1 + sorted.length) % sorted.length;\n        break;\n      case \"Home\":\n        nextIndex = 0;\n        break;\n      case \"End\":\n        nextIndex = sorted.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n    chooseEstimate(sorted[nextIndex]);\n    optionRefs.current[nextIndex]?.focus();\n  }\n\n  return (\n    <div\n      data-slot=\"fee-estimates\"\n      data-disabled={disabled || undefined}\n      data-unstyled={unstyled || undefined}\n      className={componentClasses(\n        unstyled,\n        [panelStyles, \"grid gap-1 p-1\"],\n        className,\n      )}\n      role=\"radiogroup\"\n      aria-labelledby={groupLabelId}\n      aria-disabled={disabled}\n      {...props}\n    >\n      <div\n        id={groupLabelId}\n        className={componentClasses(\n          unstyled,\n          \"px-3 pb-2 pt-3 text-sm font-medium\",\n        )}\n      >\n        Fee estimate\n      </div>\n      {sorted.map((estimate, index) => {\n        const selected = currentSelection === estimate.blocks;\n        const hasSelectedOption = sorted.some(\n          (option) => option.blocks === currentSelection,\n        );\n        const minutes = estimate.minutes ?? estimate.blocks * 10;\n\n        return (\n          <button\n            key={estimate.blocks}\n            data-slot=\"fee-estimate-option\"\n            data-state={selected ? \"selected\" : \"idle\"}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            tabIndex={selected || (!hasSelectedOption && index === 0) ? 0 : -1}\n            disabled={disabled}\n            ref={(node) => {\n              optionRefs.current[index] = node;\n            }}\n            onClick={() => chooseEstimate(estimate)}\n            onKeyDown={(event) => handleOptionKeyDown(event, index)}\n            className={componentClasses(\n              unstyled,\n              [\n                interactiveStyles,\n                \"grid min-h-14 grid-cols-[minmax(0,1fr)_auto] items-center gap-4 rounded-[var(--radius-md)] px-3 py-2 text-left hover:bg-[var(--color-surface-hover)] data-[state=selected]:bg-[var(--color-surface-active)]\",\n              ],\n            )}\n          >\n            <span className=\"min-w-0\">\n              <span\n                className={componentClasses(\n                  unstyled,\n                  \"flex items-center gap-2 text-sm font-medium\",\n                )}\n              >\n                {estimate.label}\n                {selected ? (\n                  <Check\n                    aria-hidden=\"true\"\n                    className={componentClasses(\n                      unstyled,\n                      \"size-3.5 text-[var(--color-success)]\",\n                    )}\n                  />\n                ) : null}\n              </span>\n              <span\n                className={componentClasses(\n                  unstyled,\n                  \"mt-0.5 block text-xs text-[var(--color-muted)]\",\n                )}\n              >\n                ~{minutes} min · {estimate.blocks}{\" \"}\n                {estimate.blocks === 1 ? \"block\" : \"blocks\"}\n              </span>\n            </span>\n            <span\n              className={componentClasses(\n                unstyled,\n                \"font-mono text-sm font-medium tabular-nums\",\n              )}\n            >\n              {formatFeeRate(estimate.satPerVbyte)}\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}