{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "copy-button",
  "title": "Copy Button",
  "description": "Accessible icon button that copies a string to the clipboard and shows a transient copied state. Has aria-label, an aria-live announcement, keyboard focus ring, and a configurable reset timeout. Use it next to code blocks, API keys, share links, or any inline value a user might want to copy.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ui/copy-button.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Copy } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface CopyButtonProps extends React.ComponentPropsWithoutRef<\"button\"> {\n  /** The string copied to the clipboard when the button is pressed. */\n  value: string\n  /** How long (ms) the \"copied\" state stays before resetting. */\n  timeout?: number\n}\n\nexport function CopyButton({\n  value,\n  timeout = 2000,\n  className,\n  ...props\n}: CopyButtonProps) {\n  const [copied, setCopied] = React.useState(false)\n\n  React.useEffect(() => {\n    if (!copied) return\n    const id = window.setTimeout(() => setCopied(false), timeout)\n    return () => window.clearTimeout(id)\n  }, [copied, timeout])\n\n  async function onCopy() {\n    try {\n      await navigator.clipboard.writeText(value)\n      setCopied(true)\n    } catch {\n      setCopied(false)\n    }\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onCopy}\n      aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n      className={cn(\n        \"inline-flex h-8 w-8 items-center justify-center rounded-md border border-input bg-transparent text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <span aria-live=\"polite\" className=\"sr-only\">\n        {copied ? \"Copied\" : \"Copy\"}\n      </span>\n      {copied ? (\n        <Check className=\"h-4 w-4\" aria-hidden=\"true\" />\n      ) : (\n        <Copy className=\"h-4 w-4\" aria-hidden=\"true\" />\n      )}\n    </button>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}