Aurora CopyButton

1"use client"
2 
3/**
4 * Aurora CopyButton — copy-to-clipboard action control.
5 *
6 * Aurora extension matching the Claude Design source 1:1. A neutral lit-outline
7 * button (border + glow, no flooded fill) that copies `value` to the clipboard
8 * and briefly swaps to a "copied" success state. Renders icon-only when no
9 * `label` is supplied.
10 *
11 * Visual layer lives in registry/aurora/styles/aurora-components.css
12 * (`@layer aurora-components`, reads only `--aurora-*` tokens) so it renders
13 * identically in dark + `.light`. Architecture stays shadcn: `forwardRef`,
14 * `displayName`, named + default export, a11y (aria-label, aria-live status).
15 */
16 
17import * as React from "react"
18import { Check, Copy } from "lucide-react"
19import { cn } from "@/lib/utils"
20import { useClipboard } from "@/registry/aurora/lib/use-clipboard"
21 
22// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
23 
24// ─── Component ───────────────────────────────────────────────────────────────
25 
26export interface CopyButtonProps
27  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "onCopy"> {
28  /** Text written to the clipboard when the button is pressed. */
29  value: string
30  /** Visible label rendered after the icon. When omitted the button is icon-only. */
31  label?: React.ReactNode
32  /** Label announced/shown briefly after a successful copy. Defaults to "Copied". */
33  copiedLabel?: React.ReactNode
34  /** How long the copied state persists, in ms. Defaults to 2000. */
35  timeout?: number
36  /** Fired after `value` is written to the clipboard. */
37  onCopy?: (value: string) => void
38}
39 
40function CopyButton(
41  {
42    ref,
43    value,
44    label,
45    copiedLabel = "Copied",
46    timeout = 2000,
47    onCopy,
48    className,
49    onClick,
50    disabled,
51    "aria-label": ariaLabel,
52    ...props
53  }: CopyButtonProps & { ref?: React.Ref<HTMLButtonElement> }
54) {
55    const { state, copied, copy } = useClipboard(timeout)
56 
57    const handleClick = React.useCallback(
58      (event: React.MouseEvent<HTMLButtonElement>) => {
59        onClick?.(event)
60        if (event.defaultPrevented) return
61 
62        void copy(value).then((didCopy) => {
63          if (didCopy) onCopy?.(value)
64        })
65      },
66      [onClick, onCopy, value, copy]
67    )
68 
69    const isIconOnly = label === undefined || label === null || label === ""
70    const resolvedAriaLabel =
71// … truncated