{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-copy",
  "title": "Input Copy",
  "description": "Read-only input with a copy-to-clipboard button and animated check feedback. Supports optional label and shape context.",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://zeron-ui.vercel.app/r/surfaces.json",
    "utils",
    "https://zeron-ui.vercel.app/r/springs.json",
    "https://zeron-ui.vercel.app/r/shape-context.json",
    "https://zeron-ui.vercel.app/r/icon-context.json"
  ],
  "files": [
    {
      "path": "src/components/ui/input-copy.tsx",
      "content": "\"use client\";\n\nimport { forwardRef, useState, useCallback, useRef, useEffect, useId, type HTMLAttributes } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\nimport { useIcon } from \"@/lib/icon-context\";\nimport { useShape } from \"@/lib/shape-context\";\nimport { spring } from \"@/lib/springs\";\nimport { Tooltip } from \"@/components/ui/tooltip\";\n\ntype InputCopyVariant = \"icon\" | \"button\";\ntype InputCopyAlign = \"right\" | \"left\";\n\ninterface InputCopyProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /** The value to display and copy to clipboard. */\n  value: string;\n  /** Optional label displayed above the input. */\n  label?: string;\n  /** Callback fired after the value is copied. */\n  onCopy?: () => void;\n  /** Whether the component is disabled. */\n  disabled?: boolean;\n  /** Display variant: icon-only with tooltip, or button with label. */\n  variant?: InputCopyVariant;\n  /** Position of the copy action relative to the value. */\n  align?: InputCopyAlign;\n}\n\nconst InputCopy = forwardRef<HTMLDivElement, InputCopyProps>(\n  ({ value, label, onCopy, disabled, variant = \"icon\", align = \"right\", className, ...props }, ref) => {\n    const CopyIcon = useIcon(\"copy\");\n    // \"copied\" and \"error\" both occupy the same animation slot on the button\n    const [status, setStatus] = useState<\"idle\" | \"copied\" | \"error\">(\"idle\");\n    const [copyCount, setCopyCount] = useState(0);\n    // \"idle\" = normal tooltip behavior, \"copied\" = force open, \"suppressed\" = force closed\n    const [tooltipState, setTooltipState] = useState<\"idle\" | \"copied\" | \"suppressed\">(\"idle\");\n    const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null);\n    const tooltipVisibleRef = useRef(false);\n    const tooltipWasVisibleRef = useRef(false);\n    const shape = useShape();\n\n    // Associate the visible label with the button: the button's accessible\n    // name reads \"Copy <label>\" (its own state label + the field label).\n    const generatedId = useId();\n    const labelId = label ? `${generatedId}-label` : undefined;\n    const buttonId = `${generatedId}-button`;\n\n    const handlePointerDown = useCallback(() => {\n      // Capture tooltip visibility before it closes on pointer down.\n      tooltipWasVisibleRef.current = tooltipVisibleRef.current;\n    }, []);\n\n    // execCommand fallback for when the async Clipboard API is unavailable or\n    // denied (insecure context, permissions policy) — copies via a temporary\n    // off-screen textarea.\n    const copyViaExecCommand = useCallback(() => {\n      const textarea = document.createElement(\"textarea\");\n      textarea.value = value;\n      textarea.setAttribute(\"readonly\", \"\");\n      textarea.style.position = \"fixed\";\n      textarea.style.opacity = \"0\";\n      document.body.appendChild(textarea);\n      textarea.select();\n      let ok = false;\n      try {\n        ok = document.execCommand(\"copy\");\n      } catch {\n        ok = false;\n      }\n      document.body.removeChild(textarea);\n      return ok;\n    }, [value]);\n\n    const handleCopy = useCallback(async () => {\n      if (disabled) return;\n      let ok = true;\n      try {\n        await navigator.clipboard.writeText(value);\n      } catch {\n        ok = copyViaExecCommand();\n      }\n      setStatus(ok ? \"copied\" : \"error\");\n      setCopyCount((c) => c + 1);\n      setTooltipState(tooltipWasVisibleRef.current ? \"copied\" : \"suppressed\");\n      if (ok) onCopy?.();\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => {\n        setStatus(\"idle\");\n        setTooltipState(\"suppressed\");\n      }, 2000);\n    }, [value, disabled, onCopy, copyViaExecCommand]);\n\n    const handleTooltipOpenChange = useCallback((open: boolean) => {\n      tooltipVisibleRef.current = open;\n    }, []);\n\n    useEffect(() => {\n      return () => {\n        if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      };\n    }, []);\n\n    const handleMouseEnter = useCallback(() => {\n      setTooltipState((prev) => prev === \"suppressed\" ? \"idle\" : prev);\n    }, []);\n\n    const handleMouseLeave = useCallback(() => {\n      setTooltipState((prev) => prev === \"copied\" ? \"suppressed\" : prev);\n    }, []);\n\n    const iconSwitch = (\n      <AnimatePresence mode=\"wait\" initial={false}>\n        {status === \"error\" ? (\n          <motion.span\n            key={`error-${copyCount}`}\n            initial={{ opacity: 0, scale: 0.6 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.8 }}\n            transition={spring.fast}\n            className=\"flex items-center justify-center text-fg-danger [&_svg]:stroke-[1.5] [&_svg]:transition-[stroke-width] [&_svg]:duration-fast group-hover:[&_svg]:stroke-[2]\"\n          >\n            <svg\n              width={14}\n              height={14}\n              viewBox=\"2 4 20 16\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <motion.path\n                d=\"M9 9L15 15M15 9L9 15\"\n                initial={{ pathLength: 0 }}\n                animate={{\n                  pathLength: 1,\n                  transition: { duration: spring.fast.duration, ease: \"easeOut\" },\n                }}\n              />\n            </svg>\n          </motion.span>\n        ) : status === \"copied\" ? (\n          <motion.span\n            key={`check-${copyCount}`}\n            initial={{ opacity: 0, scale: 0.6 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.8 }}\n            transition={spring.fast}\n            className=\"flex items-center justify-center [&_svg]:stroke-[1.5] [&_svg]:transition-[stroke-width] [&_svg]:duration-fast group-hover:[&_svg]:stroke-[2]\"\n          >\n            <svg\n              width={14}\n              height={14}\n              viewBox=\"2 4 20 16\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <motion.path\n                d=\"M6 12L10 16L18 8\"\n                initial={{ pathLength: 0 }}\n                animate={{\n                  pathLength: 1,\n                  transition: { duration: spring.fast.duration, ease: \"easeOut\" },\n                }}\n              />\n            </svg>\n          </motion.span>\n        ) : (\n          <motion.span\n            key=\"copy\"\n            initial={{ opacity: 0, scale: 0.8 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.8 }}\n            transition={spring.fast}\n            className=\"flex items-center justify-center\"\n          >\n            <CopyIcon size={14} strokeWidth={1.5} className=\"transition-[stroke-width] duration-fast group-hover:stroke-[2]\" />\n          </motion.span>\n        )}\n      </AnimatePresence>\n    );\n\n    const actionElement = variant === \"button\" ? (\n      <span\n        className={cn(\n          \"shrink-0 flex items-center gap-1.5 px-1.5 py-2 text-body transition-colors duration-fast\",\n          \"text-fg-muted group-hover:text-fg-default\", \"font-normal\"\n        )}\n      >\n        <AnimatePresence mode=\"wait\" initial={false}>\n          {status === \"error\" ? (\n            <motion.span\n              key={`error-label-${copyCount}`}\n              className=\"flex items-center gap-1.5 text-fg-danger\"\n              initial={{ opacity: 0, scale: 0.6 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.8 }}\n              transition={spring.fast}\n            >\n              <span className=\"flex items-center justify-center\">\n                <svg\n                  width={14}\n                  height={14}\n                  viewBox=\"2 4 20 16\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth={2}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                >\n                  <motion.path\n                    d=\"M9 9L15 15M15 9L9 15\"\n                    initial={{ pathLength: 0 }}\n                    animate={{\n                      pathLength: 1,\n                      transition: { duration: spring.fast.duration, ease: \"easeOut\" },\n                    }}\n                  />\n                </svg>\n              </span>\n              <span className=\"select-none inline-grid text-left\">\n                <span className=\"col-start-1 row-start-1 invisible\" aria-hidden=\"true\">Copied</span>\n                <span className=\"col-start-1 row-start-1\">Failed</span>\n              </span>\n            </motion.span>\n          ) : status === \"copied\" ? (\n            <motion.span\n              key={`check-label-${copyCount}`}\n              className=\"flex items-center gap-1.5\"\n              initial={{ opacity: 0, scale: 0.6 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.8 }}\n              transition={spring.fast}\n            >\n              <span className=\"flex items-center justify-center\">\n                <svg\n                  width={14}\n                  height={14}\n                  viewBox=\"2 4 20 16\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth={2}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                >\n                  <motion.path\n                    d=\"M6 12L10 16L18 8\"\n                    initial={{ pathLength: 0 }}\n                    animate={{\n                      pathLength: 1,\n                      transition: { duration: spring.fast.duration, ease: \"easeOut\" },\n                    }}\n                  />\n                </svg>\n              </span>\n              <span className=\"select-none inline-grid text-left\">\n                <span className=\"col-start-1 row-start-1 invisible\" aria-hidden=\"true\">Copied</span>\n                <span className=\"col-start-1 row-start-1\">Copied</span>\n              </span>\n            </motion.span>\n          ) : (\n            <motion.span\n              key=\"copy-label\"\n              className=\"flex items-center gap-1.5\"\n              initial={{ opacity: 0, scale: 0.8 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.8 }}\n              transition={spring.fast}\n            >\n              <span className=\"flex items-center justify-center\">\n                <CopyIcon size={14} strokeWidth={1.5} className=\"transition-[stroke-width] duration-fast group-hover:stroke-[2]\" />\n              </span>\n              <span className=\"select-none inline-grid text-left\">\n                <span className=\"col-start-1 row-start-1 invisible\" aria-hidden=\"true\">Copied</span>\n                <span className=\"col-start-1 row-start-1\">Copy</span>\n              </span>\n            </motion.span>\n          )}\n        </AnimatePresence>\n      </span>\n    ) : (\n      <span\n        className={cn(\n          \"shrink-0 px-1.5 py-2 transition-colors duration-fast\",\n          \"text-fg-muted group-hover:text-fg-default\",\n        )}\n      >\n        {iconSwitch}\n      </span>\n    );\n\n    const valueElement = (\n      <span\n        className={cn(\n          \"flex-1 min-w-0 text-left text-body text-fg-default font-mono py-2 select-none truncate\",\n          align === \"left\" ? \"pl-1\" : \"pl-0\", \"font-normal\"\n        )}\n      >\n        <mark className=\"bg-transparent text-fg-default transition-colors duration-fast group-hover:bg-brand/20 group-hover:text-fg-default\">\n          {value}\n        </mark>\n      </span>\n    );\n\n    const buttonContent = align === \"left\" ? (\n      <>{actionElement}{valueElement}</>\n    ) : (\n      <>{valueElement}{actionElement}</>\n    );\n\n    const button = (\n      <button\n        id={buttonId}\n        type=\"button\"\n        onPointerDown={handlePointerDown}\n        onClick={handleCopy}\n        disabled={disabled}\n        aria-label={\n          status === \"copied\"\n            ? \"Copied\"\n            : status === \"error\"\n              ? \"Copy failed\"\n              : label\n                ? \"Copy\"\n                : \"Copy to clipboard\"\n        }\n        aria-labelledby={label ? `${buttonId} ${labelId}` : undefined}\n        className={cn(\n          \"group flex items-center w-full cursor-pointer outline-none transition-all duration-fast\",\n          \"focus-visible:ring-1 focus-visible:ring-focus-ring\",\n          shape.input\n        )}\n      >\n        {buttonContent}\n      </button>\n    );\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col gap-0.5\",\n          disabled && \"opacity-50 pointer-events-none\",\n          className\n        )}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        {...props}\n      >\n        {label && (\n          <span\n            id={labelId}\n            className={cn(\"text-body text-fg-muted\", align === \"left\" ? \"pl-1\" : \"pl-0\", \"font-normal\")}\n          >\n            {label}\n          </span>\n        )}\n        {variant === \"icon\" ? (\n          <Tooltip content={tooltipState === \"idle\" ? \"Copy to clipboard\" : status === \"error\" ? \"Copy failed\" : \"Copied\"} delayDuration={500} sideOffset={2} forceOpen={tooltipState === \"copied\" ? true : tooltipState === \"suppressed\" ? false : undefined} onOpenChange={handleTooltipOpenChange}>\n            {button}\n          </Tooltip>\n        ) : (\n          button\n        )}\n      </div>\n    );\n  }\n);\n\nInputCopy.displayName = \"InputCopy\";\n\nexport { InputCopy };\nexport type { InputCopyProps };\nexport default InputCopy;\n",
      "type": "registry:ui",
      "target": "components/ui/input-copy.tsx"
    }
  ],
  "type": "registry:ui"
}