{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-53",
  "type": "registry:component",
  "registryDependencies": [
    "https://coss.com/origin/r/input.json",
    "https://coss.com/origin/r/label.json",
    "https://coss.com/origin/r/tooltip.json"
  ],
  "files": [
    {
      "path": "registry/default/components/comp-53.tsx",
      "content": "\"use client\";\n\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport { useId, useRef, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  const id = useId();\n  const [copied, setCopied] = useState<boolean>(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleCopy = () => {\n    if (inputRef.current) {\n      navigator.clipboard.writeText(inputRef.current.value);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    }\n  };\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Copy to clipboard</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"pe-9\"\n          defaultValue=\"pnpm install origin-ui\"\n          id={id}\n          readOnly\n          ref={inputRef}\n          type=\"text\"\n        />\n        <TooltipProvider delayDuration={0}>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <button\n                aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n                className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed\"\n                disabled={copied}\n                onClick={handleCopy}\n                type=\"button\"\n              >\n                <div\n                  className={cn(\n                    \"transition-all\",\n                    copied ? \"scale-100 opacity-100\" : \"scale-0 opacity-0\",\n                  )}\n                >\n                  <CheckIcon\n                    aria-hidden=\"true\"\n                    className=\"stroke-emerald-500\"\n                    size={16}\n                  />\n                </div>\n                <div\n                  className={cn(\n                    \"absolute transition-all\",\n                    copied ? \"scale-0 opacity-0\" : \"scale-100 opacity-100\",\n                  )}\n                >\n                  <CopyIcon aria-hidden=\"true\" size={16} />\n                </div>\n              </button>\n            </TooltipTrigger>\n            <TooltipContent className=\"px-2 py-1 text-xs\">\n              Copy to clipboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "input",
      "label",
      "copy"
    ]
  }
}