Input Copy

1"use client";
2 
3import { forwardRef, useState, useCallback, useRef, useEffect, useId, type HTMLAttributes } from "react";
4import { motion, AnimatePresence } from "framer-motion";
5import { cn } from "@/lib/utils";
6import { useIcon } from "@/lib/icon-context";
7import { fontWeights } from "@/lib/font-weight";
8import { useShape } from "@/lib/shape-context";
9import { spring } from "@/lib/springs";
10import { Tooltip } from "@/registry/radix/tooltip";
11 
12type InputCopyVariant = "icon" | "button";
13type InputCopyAlign = "right" | "left";
14 
15interface InputCopyProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
16  /** The value to display and copy to clipboard. */
17  value: string;
18  /** Optional label displayed above the input. */
19  label?: string;
20  /** Callback fired after the value is copied. */
21  onCopy?: () => void;
22  /** Whether the component is disabled. */
23  disabled?: boolean;
24  /** Display variant: icon-only with tooltip, or button with label. */
25  variant?: InputCopyVariant;
26  /** Position of the copy action relative to the value. */
27  align?: InputCopyAlign;
28}
29 
30const InputCopy = forwardRef<HTMLDivElement, InputCopyProps>(
31  ({ value, label, onCopy, disabled, variant = "icon", align = "right", className, ...props }, ref) => {
32    const CopyIcon = useIcon("copy");
33    // "copied" and "error" both occupy the same animation slot on the button
34    const [status, setStatus] = useState<"idle" | "copied" | "error">("idle");
35    const [copyCount, setCopyCount] = useState(0);
36    // "idle" = normal tooltip behavior, "copied" = force open, "suppressed" = force closed
37    const [tooltipState, setTooltipState] = useState<"idle" | "copied" | "suppressed">("idle");
38    const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
39    const tooltipVisibleRef = useRef(false);
40    const tooltipWasVisibleRef = useRef(false);
41    const shape = useShape();
42 
43    // Associate the visible label with the button: the button's accessible
44    // name reads "Copy <label>" (its own state label + the field label).
45    const generatedId = useId();
46    const labelId = label ? `${generatedId}-label` : undefined;
47    const buttonId = `${generatedId}-button`;
48 
49    const handlePointerDown = useCallback(() => {
50      // Capture tooltip visibility before Radix closes it on pointer down
51      tooltipWasVisibleRef.current = tooltipVisibleRef.current;
52    }, []);
53 
54    // execCommand fallback for when the async Clipboard API is unavailable or
55// … truncated