{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "primitives",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "Copyable transaction/account ID with disambiguated glyphs.",
  "files": [
    {
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport { CheckIcon, DocumentDuplicateIcon } from \"@/components/ledger/icons\";\nimport { Tooltip } from \"@/components/ledger/tooltip\";\n\nexport interface ReferenceProps extends React.ComponentPropsWithoutRef<\"span\"> {\n  copyable?: boolean;\n  label?: string;\n  /** Truncate in the middle; the tail is the discriminating part. */\n  truncate?: boolean;\n  value: string;\n}\n\n/**\n * Transaction and account IDs — the strings humans transcribe into other\n * systems. `zero` slashes the 0 and `ss02` separates 1 / l / I, so nobody\n * mistypes an IBAN. Copy takes the raw value.\n */\nexport const Reference = React.forwardRef<HTMLSpanElement, ReferenceProps>(\n  ({ className, value, truncate = true, copyable = true, label = \"Reference\", ...props }, ref) => {\n    const [copied, setCopied] = React.useState(false);\n    const shown = truncate && value.length > 18 ? `${value.slice(0, 8)}…${value.slice(-4)}` : value;\n\n    const copy = React.useCallback(() => {\n      navigator.clipboard?.writeText(value).then(\n        () => {\n          setCopied(true);\n          setTimeout(() => setCopied(false), 1600);\n        },\n        () => setCopied(false),\n      );\n    }, [value]);\n\n    return (\n      <span className={cn(\"inline-flex items-center gap-1\", className)} ref={ref} {...props}>\n        <Tooltip content={shown === value ? null : value}>\n          <span className=\"reference-numeric text-caption text-text-secondary\">{shown}</span>\n        </Tooltip>\n        {copyable ? (\n          <button\n            aria-label={copied ? `${label} copied` : `Copy ${label.toLowerCase()} ${value}`}\n            className={cn(\n              \"press grid size-6 place-items-center rounded-xs text-text-tertiary\",\n              \"hover:bg-surface-hover\",\n            )}\n            onClick={copy}\n            type=\"button\"\n          >\n            {copied ? (\n              <CheckIcon aria-hidden=\"true\" className=\"size-3 text-positive\" />\n            ) : (\n              <DocumentDuplicateIcon aria-hidden=\"true\" className=\"size-3\" />\n            )}\n          </button>\n        ) : null}\n      </span>\n    );\n  },\n);\nReference.displayName = \"Reference\";\n\n/** Account numbers show last 4 only; the mask is aria-hidden. */\nexport function MaskedAccount({ last4, className }: { last4: string; className?: string }) {\n  return (\n    <span className={cn(\"reference-numeric relative text-caption text-text-secondary\", className)}>\n      <span aria-hidden=\"true\">•••• {last4}</span>\n      <span className=\"sr-only select-none\">account ending {last4}</span>\n    </span>\n  );\n}\n",
      "path": "components/ledger/reference.tsx",
      "target": "components/ledger/reference.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "reference",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/icons",
    "@lopifi/tooltip"
  ],
  "title": "Reference",
  "type": "registry:ui"
}