Copy Button

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
"use client";
 
import {
  forwardRef,
  useEffect,
  useRef,
  useState,
  type ComponentPropsWithoutRef,
} from "react";
 
import { cn } from "@/lib/cn";
import { Check, Copy } from "lucide-react";
 
export type CopyButtonProps = Readonly<
  {
    value?: string;
    label?: string;
    copiedLabel?: string;
    resetMs?: number;
  } & ComponentPropsWithoutRef<"button">
>;
 
// Icons stack in one fixed slot and fade with the same rhythm as the labels.
const ICON_LAYER =
  "absolute inset-0 grid place-items-center transition-opacity ease-out motion-reduce:transition-none";
 
// Labels stack in one grid cell; outgoing fades out, incoming fades in after.
const LABEL_LAYER =
  "col-start-1 row-start-1 text-left transition-opacity ease-out motion-reduce:transition-none";
 
// Soft cast shadow under the glyph — 3D lift, no hard outline rim.
const ICON_SHADOW =
  "filter-[drop-shadow(0_1px_1px_rgba(0,0,0,0.22))_drop-shadow(0_2px_3px_rgba(0,0,0,0.12))]";
const ICON_SHADOW_COPIED =
  "filter-[drop-shadow(0_1px_1px_rgba(4,120,87,0.3))_drop-shadow(0_2px_3px_rgba(4,120,87,0.15))]";
 
// Copy — writes to clipboard and fades the icon and label to a confirmation.
export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
  (
    {
      className,
      value = "npm i @appui/components",
      label = "Copy",
      copiedLabel = "Copied",
      resetMs = 1600,
      onClick,
      ...props
    },
    ref,
  ) => {
    const [copied, setCopied] = useState(false);
    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
    useEffect(() => {
      return () => {
        if (timerRef.current !== null) {
          globalThis.clearTimeout(timerRef.current);
        }
      };
    }, []);
 
    const handleClick = async (event: React.MouseEvent<HTMLButtonElement>) => {
      onClick?.(event);
      try {
        await navigator.clipboard.writeText(value);
      } catch {
        // Clipboard may be unavailable; still show the confirmation state.
      }
      setCopied(true);
      if (timerRef.current !== null) globalThis.clearTimeout(timerRef.current);
      timerRef.current = globalThis.setTimeout(() => setCopied(false), resetMs);
    };
 
    return (
      <button
        ref={ref}
        type="button"
        data-slot="copy-button"
        data-copied={copied}
        onClick={handleClick}
        className={cn(
          "inline-flex h-10 cursor-pointer items-center gap-2 rounded-lg bg-neutral-50 px-3.5 font-sans text-sm font-medium outline-none select-none",
          "transition-[background-color,box-shadow,color] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900",
          // Raised keycap: hairline outline, downward shadows, bottom shade.
          "shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_1px_1px_rgba(0,0,0,0.12),0_2px_3px_rgba(0,0,0,0.12),inset_0_-2px_3px_rgba(0,0,0,0.08)]",
          // Pressing sinks the key with the balanced inset recipe.
          "active:bg-neutral-100 active:shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_1px_1px_rgba(0,0,0,0.06),inset_0_1px_1px_rgba(0,0,0,0.06),inset_0_2px_3px_rgba(0,0,0,0.03),inset_0_-2px_3px_rgba(0,0,0,0.05)]",
          copied ? "text-emerald-700" : "text-neutral-700 hover:text-neutral-900",
          className,
        )}
        {...props}
      >
        {/* Bare icon in a fixed slot — no chip background. */}
        <span className="relative size-4 shrink-0">
          <span
            aria-hidden
            className={cn(
              ICON_LAYER,
              copied ? "opacity-0 duration-200" : "opacity-100 duration-300 delay-200",
            )}
          >
            <Copy size={12} strokeWidth={2} className={ICON_SHADOW} />
          </span>
          <span
            aria-hidden
            className={cn(
              ICON_LAYER,
              copied ? "opacity-100 duration-300 delay-200" : "opacity-0 duration-200",
            )}
          >
            <Check size={14} strokeWidth={2.5} className={ICON_SHADOW_COPIED} />
          </span>
        </span>
 
        <span className="grid [text-shadow:0_1px_0_rgba(255,255,255,0.8)]">
          <span
            aria-hidden={copied}
            className={cn(
              LABEL_LAYER,
              copied ? "opacity-0 duration-200" : "opacity-100 duration-300 delay-200",
            )}
          >
            {label}
          </span>
          <span
            aria-hidden={!copied}
            className={cn(
              LABEL_LAYER,
              copied ? "opacity-100 duration-300 delay-200" : "opacity-0 duration-200",
            )}
          >
            {copiedLabel}
          </span>
        </span>
 
        <span className="sr-only" aria-live="polite">
          {copied ? copiedLabel : ""}
        </span>
      </button>
    );
  },
);
 
CopyButton.displayName = "CopyButton";