Copy Button

1"use client";
2
3import * as React from "react";
4import { Button } from "@/registry/default/button/button";
5import { cn } from "@/lib/utils";
6import { useCopyToClipboard } from "@/registry/default/copy-button/hooks/use-copy-to-clipboard";
7import {
8  toast as toastApi,
9  type AnchoredToastOptions,
10} from "@/registry/default/toast/toast";
11import { HugeiconsIcon } from "@hugeicons/react";
12import {
13  Cancel01Icon,
14  Copy01Icon,
15  Tick02Icon,
16} from "@hugeicons/core-free-icons";
17
18type CopyButtonToastConfig = Omit<AnchoredToastOptions, "anchor">;
19
20const DEFAULT_COPY_ICON = (
21  <HugeiconsIcon icon={Copy01Icon} strokeWidth={2} className="size-4" />
22);
23const DEFAULT_CHECK_ICON = (
24  <HugeiconsIcon
25    icon={Tick02Icon}
26    strokeWidth={2}
27    className="size-4 text-green-500"
28  />
29);
30const DEFAULT_ERROR_ICON = (
31  <HugeiconsIcon
32    icon={Cancel01Icon}
33    strokeWidth={2}
34    className="size-4 text-red-500"
35  />
36);
37
38interface CopyButtonProps extends Omit<
39  React.ComponentProps<typeof Button>,
40  "onClick" | "children" | "size" | "variant"
41> {
42  content: string;
43  timeout?: number;
44  copyIcon?: React.ReactNode;
45  checkIcon?: React.ReactNode;
46  errorIcon?: React.ReactNode;
47  onCopied?: (text: string) => void;
48  onCopyError?: (text: string) => void;
49  /**
50   * Show an anchored toast above the button on successful copy.
51   * Pass `true` for defaults, or an options object to customize the toast.
52   */
53  toast?: true | CopyButtonToastConfig;
54}
55
56function CopyButton({
57  content,
58  timeout = 2000,
59  className,
60  copyIcon,
61  checkIcon,
62  errorIcon,
63  onCopied,
64  onCopyError,
65  toast,
66  ref,
67  ...props
68}: CopyButtonProps) {
69  const internalRef = React.useRef<HTMLButtonElement>(null);
70  const toastEnabled = Boolean(toast);
71  const toastConfig: CopyButtonToastConfig = toast === true ? {} : (toast ?? {});
72
73  const { isCopied, isError, copyToClipboard, reset } = useCopyToClipboard({
74    // When an anchored toast is attached, the toast's lifecycle owns the
75    // reset via `onClose` — so disable the hook's internal auto-reset.
76    timeout: toastEnabled ? null : timeout,
77    onCopied: (text) => {
78      onCopied?.(text);
79      if (toastEnabled) {
80        toastApi.anchored({
81          description: "Copied to clipboard!",
82          side: "top",
83          sideOffset: 8,
84          arrow: true,
85          duration: timeout,
86          ...toastConfig,
87          anchor: internalRef,
88// … truncated