{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-copyable",
  "title": "Input Copyable",
  "description": "An Input component that has copy button which copies the value to clipboard",
  "dependencies": [
    "usehooks-ts"
  ],
  "registryDependencies": [
    "input-group",
    "tooltip"
  ],
  "files": [
    {
      "path": "registry/components/ui/input-copyable.tsx",
      "content": "\"use client\"\n\nimport { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from \"@/components/ui/input-group\"\nimport { Check, Copy } from \"lucide-react\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\"\nimport { useCopyToClipboard } from \"usehooks-ts\"\n\ntype InputCopyableProps = {\n  value: string\n} & React.ComponentProps<typeof InputGroup>\n\nexport function InputCopyable(props: InputCopyableProps) {\n  const [copied, copy] = useCopyToClipboard()\n\n  const CopyButton = ({ copied }: { copied: string | null }) => {\n    if (copied) {\n      return (\n        <Tooltip defaultOpen={true}>\n          <TooltipTrigger render={<Check />} />\n          <TooltipContent>Copied!</TooltipContent>\n        </Tooltip>\n      )\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger render={<Copy />} />\n        <TooltipContent>Copy</TooltipContent>\n      </Tooltip>\n    )\n  }\n\n  return (\n    <InputGroup {...props}>\n      <InputGroupInput value={props.value} readOnly className=\"overflow-ellipsis\" />\n      <InputGroupAddon align=\"inline-end\">\n        <InputGroupButton\n          aria-label=\"Copy\"\n          title=\"Copy\"\n          size=\"icon-xs\"\n          onClick={() => {\n            copy(props.value)\n          }}\n        >\n          <CopyButton copied={copied} />\n        </InputGroupButton>\n      </InputGroupAddon>\n    </InputGroup>\n  )\n}",
      "type": "registry:ui",
      "target": "components/ui/input-copyable.tsx"
    }
  ],
  "type": "registry:ui"
}