"use client"; import * as React from "react"; import { Button } from "@/registry/default/button/button"; import { cn } from "@/lib/utils"; import { useCopyToClipboard } from "@/registry/default/copy-button/hooks/use-copy-to-clipboard"; import { toast as toastApi, type AnchoredToastOptions, } from "@/registry/default/toast/toast"; import { HugeiconsIcon } from "@hugeicons/react"; import { Cancel01Icon, CheckIcon, Copy01Icon, } from "@hugeicons/core-free-icons"; type CopyButtonToastConfig = Omit; const DEFAULT_COPY_ICON = ( ); const DEFAULT_CHECK_ICON = ( ); const DEFAULT_ERROR_ICON = ( ); interface CopyButtonProps extends Omit< React.ComponentProps, "onClick" | "children" | "size" | "variant" > { content: string; timeout?: number; copyIcon?: React.ReactNode; checkIcon?: React.ReactNode; errorIcon?: React.ReactNode; onCopied?: (text: string) => void; onCopyError?: (text: string) => void; /** * Show an anchored toast above the button on successful copy. * Pass `true` for defaults, or an options object to customize the toast. */ toast?: true | CopyButtonToastConfig; } function CopyButton({ content, timeout = 2000, className, copyIcon, checkIcon, errorIcon, onCopied, onCopyError, toast, ref, ...props }: CopyButtonProps) { const internalRef = React.useRef(null); const toastEnabled = Boolean(toast); const toastConfig: CopyButtonToastConfig = toast === true ? {} : (toast ?? {}); const { isCopied, isError, copyToClipboard, reset } = useCopyToClipboard({ // When an anchored toast is attached, the toast's lifecycle owns the // reset via `onClose` — so disable the hook's internal auto-reset. timeout: toastEnabled ? null : timeout, onCopied: (text) => { onCopied?.(text); if (toastEnabled) { toastApi.anchored({ description: "Copied to clipboard!", side: "top", sideOffset: 8, arrow: true, duration: timeout, ...toastConfig, anchor: internalRef, onClose: () => { reset(); toastConfig.onClose?.(); }, }); } }, onCopyError: (text) => { onCopyError?.(text); if (toastEnabled) { toastApi.anchored({ side: "top", sideOffset: 8, arrow: true, duration: timeout, ...toastConfig, // The configurable description is the success message — the error // toast always states the failure. description: "Failed to copy to clipboard", anchor: internalRef, onClose: () => { reset(); toastConfig.onClose?.(); }, }); } }, }); const mergedRef = React.useCallback( (node: HTMLButtonElement | null) => { internalRef.current = node; if (typeof ref === "function") ref(node); else if (ref) ref.current = node; }, [ref], ); const button = ( ); // The icons are aria-hidden and the label is fixed, so this is the only // thing that reports the outcome. Two rules govern where it can live. // // Mounted for the whole life of the button, never conditionally rendered // around the result: a region that arrives already holding its text is not a // change, and screen readers announce the change. // // And a SIBLING of the button, not a child. `role="button"` is Children // Presentational, so a conforming reader prunes the semantics of everything // inside it — a live region in there is not a live region. This is why the // fixed `aria-label` above is safe: the region genuinely does the reporting. // // Suppressed entirely when a toast is attached, which says the same words out // loud on its own. // // `display: contents` rather than a bare fragment, so the component still // resolves to one element for anything that counts them — `Children.only`, // a `render` prop, `:only-child`, `> * + *`. It adds no box, so it creates no // containing block and the absolutely-positioned floating variant in // CodeBlock still resolves against the same ancestor it did before. return ( {button} {!toastEnabled && ( {isCopied ? "Copied to clipboard" : isError ? "Failed to copy to clipboard. Copy it manually." : ""} )} ); } export { CopyButton };