{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "copy-field",
  "title": "Copy Field",
  "description": "Read-only field that shows a value with a copy button docked at its right edge: one click copies, and focusing or clicking anywhere in the field selects the whole value. Use it wherever a generated string is read once and copied — an API key or secret, an access token, a client ID and client secret, a database connection string, an invite or share link, a webhook or callback URL, a license key, recovery or backup codes, a referral code, a wallet address, an account, order or transaction ID, an ngrok or preview URL, the CLI command your onboarding tells the user to run. Select-on-focus is the part that matters and the part hand-rolled versions leave out: navigator.clipboard.writeText rejects on an insecure origin, inside a sandboxed iframe, or when the document is not focused, and a copy button that swallows that error leaves the user with a value they cannot get out of the box. Here the whole value is already selected, so Ctrl/Cmd+C works, and it is reachable from the keyboard because focus alone selects it. The button announces itself properly too — it composes pulld's copy-button, so its accessible name flips between \"Copy to clipboard\" and \"Copied\", a polite live region says \"Copied\" for a screen reader, the icon is aria-hidden, and the copied state reverts after a timeout you can set. The field renders in monospace so an O and a 0 are distinguishable, forwards a ref so you can focus it from a shortcut, and takes an aria-label (default \"Copyable value\"). Official shadcn/ui has no copy field: its input-group is an assembly kit of six parts (InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea) that pulls in button, input and textarea and contains no clipboard call, no read-only handling and no selection behaviour — you would be writing all of the above yourself. Two files, no npm dependencies, shadcn tokens, dark mode included.",
  "dependencies": [],
  "registryDependencies": [
    "https://pulld.pages.dev/r/copy-button.json"
  ],
  "files": [
    {
      "path": "registry/ui/copy-field.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { CopyButton } from \"@/registry/ui/copy-button\"\n\ninterface CopyFieldProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<\"input\">,\n    \"value\" | \"readOnly\" | \"type\"\n  > {\n  /** The value shown in the read-only field and copied to the clipboard. */\n  value: string\n  /** Accessible label for the field. Defaults to \"Copyable value\". */\n  label?: string\n  /** How long (ms) the copy button stays in its \"copied\" state. */\n  timeout?: number\n}\n\n/**\n * Read-only field that displays a value with a copy button docked at its right\n * edge. Focusing or clicking the field selects the whole value so it can also\n * be copied manually. Use it for API keys, invite/share links, IDs, webhook\n * URLs, or any value a user reads once and copies. Composes copy-button.\n */\nexport const CopyField = React.forwardRef<HTMLInputElement, CopyFieldProps>(\n  function CopyField(\n    { value, label = \"Copyable value\", timeout, className, onFocus, onClick, ...props },\n    ref\n  ) {\n    function selectAll(\n      event:\n        | React.FocusEvent<HTMLInputElement>\n        | React.MouseEvent<HTMLInputElement>\n    ) {\n      event.currentTarget.select()\n    }\n\n    return (\n      <div className=\"relative\">\n        <input\n          ref={ref}\n          type=\"text\"\n          readOnly\n          value={value}\n          aria-label={label}\n          onFocus={(event) => {\n            selectAll(event)\n            onFocus?.(event)\n          }}\n          onClick={(event) => {\n            selectAll(event)\n            onClick?.(event)\n          }}\n          className={cn(\n            \"flex h-9 w-full rounded-md border border-input bg-transparent py-1 pl-3 pr-10 font-mono text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\",\n            className\n          )}\n          {...props}\n        />\n        <CopyButton\n          value={value}\n          timeout={timeout}\n          className=\"absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2 border-0\"\n        />\n      </div>\n    )\n  }\n)\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}