Input Copy

1'use client'
2 
3import { forwardRef, useCallback, useEffect, useRef, useState, type HTMLAttributes } from 'react'
4import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
5import { cn } from '@/lib/utils'
6import { springs } from '@/lib/motion-tokens'
7import { playHoverSound, playClickSound } from '@/lib/sound'
8 
9type InputCopyVariant = 'icon' | 'button'
10type InputCopyAlign = 'right' | 'left'
11 
12export interface InputCopyProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
13  value: string
14  label?: string
15  onCopy?: () => void
16  disabled?: boolean
17  variant?: InputCopyVariant
18  align?: InputCopyAlign
19  copyLabel?: string
20  copiedLabel?: string
21}
22 
23function CopyIcon({ className }: { className?: string }) {
24  return (
25    <svg
26      width={14}
27      height={14}
28      viewBox="0 0 24 24"
29      fill="none"
30      stroke="currentColor"
31      strokeWidth={1.5}
32      strokeLinecap="round"
33      strokeLinejoin="round"
34      aria-hidden="true"
35      className={className}
36    >
37      <rect x="9" y="9" width="12" height="12" rx="2" />
38      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
39    </svg>
40  )
41}
42 
43function CheckIcon({ className }: { className?: string }) {
44  return (
45    <svg
46      width={14}
47      height={14}
48      viewBox="2 4 20 16"
49      fill="none"
50      stroke="currentColor"
51      strokeWidth={2}
52      strokeLinecap="round"
53      strokeLinejoin="round"
54      aria-hidden="true"
55      className={className}
56    >
57      <path d="M6 12L10 16L18 8" />
58    </svg>
59  )
60}
61 
62export const InputCopy = forwardRef<HTMLDivElement, InputCopyProps>(
63  (
64    {
65      value,
66      label,
67      onCopy,
68      disabled,
69      variant = 'icon',
70      align = 'right',
71      copyLabel = 'Copy to clipboard',
72      copiedLabel = 'Copied',
73      className,
74      ...props
75    },
76    ref,
77  ) => {
78    const reduceMotion = useReducedMotion()
79    const [copied, setCopied] = useState(false)
80    const [copyCount, setCopyCount] = useState(0)
81    const [tooltipOpen, setTooltipOpen] = useState(false)
82    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
83 
84    const handleCopy = useCallback(async () => {
85      if (disabled) return
86      playClickSound()
87      try {
88        await navigator.clipboard.writeText(value)
89        setCopied(true)
90        setCopyCount((c) => c + 1)
91        onCopy?.()
92        if (timeoutRef.current) clearTimeout(timeoutRef.current)
93        timeoutRef.current = setTimeout(() => setCopied(false), 2000)
94// … truncated