{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "copy-id",
  "type": "registry:ui",
  "title": "Copy id",
  "description": "Monospaced ID chip that copies its value to the clipboard on click and shows a check when done. Good for API keys, order IDs and record UUIDs.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/copy-id.tsx",
      "type": "registry:ui",
      "target": "components/ui/copy-id.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { CheckIcon, CopyIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction CopyId({\n  value,\n  className,\n}: {\n  value: string\n  className?: string\n}) {\n  const [copied, setCopied] = React.useState(false)\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"copy-id\"\n      aria-label={copied ? \"Copied\" : `Copy ${value}`}\n      className={cn(\n        \"inline-flex items-center gap-1.5 rounded-md border border-border bg-sunken px-2 py-1\",\n        \"font-mono text-[11px] tracking-[0.01em] text-fg-muted\",\n        \"outline-none hover:border-fg-subtle focus-visible:ring-2 focus-visible:ring-accent\",\n        className\n      )}\n      onClick={async () => {\n        try {\n          await navigator.clipboard.writeText(value)\n          setCopied(true)\n          setTimeout(() => setCopied(false), 1200)\n        } catch {}\n      }}\n    >\n      <span className=\"max-w-40 truncate\">{value}</span>\n      {copied ? <CheckIcon className=\"size-3 text-success\" /> : <CopyIcon className=\"size-3\" />}\n    </button>\n  )\n}\nexport { CopyId }\n"
    }
  ]
}