{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hash-display",
  "title": "Hash display",
  "description": "Truncated, linkable, and copyable Bitcoin identifiers.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "dennisonbertram/bitcoin-ui/bitcoin-core",
    "dennisonbertram/bitcoin-ui/bitcoin-theme"
  ],
  "files": [
    {
      "path": "components/bitcoin/hash-display.tsx",
      "content": "\"use client\";\n\nimport { Check, Copy, ExternalLink, X } from \"lucide-react\";\nimport {\n  type ComponentProps,\n  type MouseEvent,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { truncateMiddle } from \"@/lib/bitcoin\";\nimport { componentClasses } from \"@/lib/utils\";\n\nimport {\n  interactiveStyles,\n  monoStyles,\n  type BitcoinVisualProps,\n} from \"./shared\";\n\ntype CopyState = \"idle\" | \"loading\" | \"success\" | \"error\";\n\nexport type HashDisplayProps = Omit<ComponentProps<\"span\">, \"children\"> &\n  BitcoinVisualProps & {\n    value: string;\n    label?: string;\n    href?: string;\n    copyable?: boolean;\n    startCharacters?: number;\n    endCharacters?: number;\n    /** Shows the entire value instead of truncating it. @default false */\n    full?: boolean;\n  };\n\nexport function HashDisplay({\n  value,\n  label = \"Hash\",\n  href,\n  copyable = true,\n  startCharacters = 8,\n  endCharacters = 8,\n  full = false,\n  unstyled,\n  className,\n  ...props\n}: HashDisplayProps) {\n  const [copyState, setCopyState] = useState<CopyState>(\"idle\");\n  const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(\n    () => () => {\n      if (resetTimer.current) clearTimeout(resetTimer.current);\n    },\n    [],\n  );\n\n  async function handleCopy(event: MouseEvent<HTMLButtonElement>) {\n    event.preventDefault();\n    event.stopPropagation();\n    setCopyState(\"loading\");\n\n    try {\n      await navigator.clipboard.writeText(value);\n      setCopyState(\"success\");\n    } catch {\n      setCopyState(\"error\");\n    }\n\n    if (resetTimer.current) clearTimeout(resetTimer.current);\n    resetTimer.current = setTimeout(() => setCopyState(\"idle\"), 1_800);\n  }\n\n  const visibleValue = full\n    ? value\n    : truncateMiddle(value, startCharacters, endCharacters);\n  const statusLabel = {\n    idle: `Copy ${label.toLowerCase()}`,\n    loading: `Copying ${label.toLowerCase()}`,\n    success: `${label} copied`,\n    error: `Could not copy ${label.toLowerCase()}`,\n  }[copyState];\n  const StatusIcon =\n    copyState === \"success\" ? Check : copyState === \"error\" ? X : Copy;\n\n  return (\n    <span\n      data-slot=\"hash-display\"\n      data-state={copyState}\n      data-unstyled={unstyled || undefined}\n      className={componentClasses(\n        unstyled,\n        \"inline-flex min-w-0 max-w-full items-center gap-1.5\",\n        className,\n      )}\n      {...props}\n    >\n      {href ? (\n        <a\n          data-slot=\"hash-display-link\"\n          href={href}\n          title={value}\n          className={componentClasses(\n            unstyled,\n            [\n              monoStyles,\n              \"inline-flex min-h-11 min-w-0 items-center overflow-hidden text-ellipsis whitespace-nowrap text-[var(--color-muted-strong)] underline decoration-[var(--color-rule-strong)] underline-offset-4 hover:text-[var(--color-ink)] hover:decoration-current sm:min-h-0\",\n              interactiveStyles,\n            ],\n          )}\n        >\n          {visibleValue}\n          <span className=\"sr-only\">, open {label.toLowerCase()}</span>\n          <ExternalLink\n            aria-hidden=\"true\"\n            className={componentClasses(\n              unstyled,\n              \"ml-1 inline size-3 align-[-0.08em]\",\n            )}\n          />\n        </a>\n      ) : (\n        <span\n          data-slot=\"hash-display-value\"\n          title={value}\n          className={componentClasses(\n            unstyled,\n            [monoStyles, \"min-w-0 overflow-hidden text-ellipsis whitespace-nowrap\"],\n          )}\n        >\n          {visibleValue}\n        </span>\n      )}\n      {copyable ? (\n        <button\n          data-slot=\"hash-display-copy\"\n          data-state={copyState}\n          type=\"button\"\n          onClick={handleCopy}\n          disabled={copyState === \"loading\"}\n          aria-label={statusLabel}\n          className={componentClasses(\n            unstyled,\n            [\n              interactiveStyles,\n              \"inline-flex size-11 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-transparent text-[var(--color-muted)] hover:border-[var(--color-rule)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-ink)] data-[state=success]:text-[var(--color-success)] data-[state=error]:text-[var(--color-danger)] sm:size-7\",\n            ],\n          )}\n        >\n          <StatusIcon aria-hidden=\"true\" className=\"size-3.5\" />\n        </button>\n      ) : null}\n      <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {copyState === \"success\" || copyState === \"error\" ? statusLabel : \"\"}\n      </span>\n    </span>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}