{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "copy-button", "type": "registry:ui", "title": "Copy Button", "description": "Copies on press, draws a tick, holds its width and reverts on its own.", "categories": [ "actions" ], "dependencies": [ "motion" ], "registryDependencies": [ "https://www.stealth.pm/r/tokens.json", "https://www.stealth.pm/r/cn.json", "https://www.stealth.pm/r/motion.json" ], "files": [ { "path": "components/ui/copy-button.tsx", "content": "\"use client\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { ease, spring } from \"@/lib/motion\";\n\ntype CopyState = \"idle\" | \"copied\" | \"failed\";\ntype Value = string | (() => string | Promise);\n\nasync function writeText(text: string) {\n if (navigator.clipboard?.writeText && window.isSecureContext) return navigator.clipboard.writeText(text);\n // Insecure contexts (plain http, some embeds) have no async clipboard.\n const area = document.createElement(\"textarea\");\n area.value = text;\n area.setAttribute(\"readonly\", \"\");\n area.style.cssText = \"position:fixed;top:0;left:0;opacity:0;pointer-events:none\";\n document.body.appendChild(area);\n area.select();\n const ok = document.execCommand(\"copy\");\n area.remove();\n if (!ok) throw new Error(\"The browser refused the copy command\");\n}\n\n/** The copy lifecycle on its own, for when the trigger isn't a button. */\nexport function useCopy({ timeout = 2000, onCopied, onError }: { timeout?: number; onCopied?: (text: string) => void; onError?: (error: unknown) => void } = {}) {\n const [state, setState] = useState(\"idle\");\n const timer = useRef(undefined);\n useEffect(() => () => window.clearTimeout(timer.current), []);\n\n const copy = useCallback(\n async (value: Value) => {\n window.clearTimeout(timer.current);\n try {\n const text = typeof value === \"function\" ? await value() : value;\n // Never report a success that didn't happen.\n if (!text) throw new Error(\"Nothing to copy\");\n await writeText(text);\n setState(\"copied\");\n onCopied?.(text);\n } catch (error) {\n setState(\"failed\");\n onError?.(error);\n }\n timer.current = window.setTimeout(() => setState(\"idle\"), timeout);\n },\n [timeout, onCopied, onError],\n );\n\n return { state, copy };\n}\n\nexport type CopyButtonProps = Omit, \"value\" | \"children\" | \"onCopy\"> & {\n /** The text to copy, or a function that returns it (sync or async) at press time. */\n value: Value;\n label?: string;\n copiedLabel?: string;\n failedLabel?: string;\n /** Square button with only the icon. The label becomes the accessible name. */\n iconOnly?: boolean;\n size?: \"sm\" | \"md\";\n variant?: \"secondary\" | \"ghost\";\n /** Milliseconds before the button returns to its resting state. */\n timeout?: number;\n onCopied?: (text: string) => void;\n onError?: (error: unknown) => void;\n};\n\nexport function CopyButton({\n value,\n label = \"Copy\",\n copiedLabel = \"Copied\",\n failedLabel = \"Failed\",\n iconOnly = false,\n size = \"md\",\n variant = \"secondary\",\n timeout = 2000,\n onCopied,\n onError,\n disabled,\n className,\n onClick,\n ...rest\n}: CopyButtonProps) {\n const { state, copy } = useCopy({ timeout, onCopied, onError });\n const reduce = useReducedMotion();\n const empty = value === \"\";\n const text = state === \"copied\" ? copiedLabel : state === \"failed\" ? failedLabel : label;\n\n // Swaps pop in place. Reduced motion keeps the crossfade and drops the travel.\n const enter = reduce ? { opacity: 0 } : { opacity: 0, y: 6, filter: \"blur(2px)\" };\n const leave = reduce ? { opacity: 0 } : { opacity: 0, y: -6, filter: \"blur(2px)\" };\n\n return (\n <>\n {\n onClick?.(e);\n if (!e.defaultPrevented) copy(value);\n }}\n className={cn(\n \"group/copy relative inline-flex shrink-0 select-none items-center justify-center font-medium tracking-[-0.005em]\",\n \"outline-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-fg-3\",\n \"transition-[background-color,border-color,color,scale] duration-150 ease-out active:scale-[0.97] active:duration-75\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n size === \"sm\" ? \"h-7 gap-1.5 rounded-md text-[12px]\" : \"h-8 gap-2 rounded-lg text-[12.5px]\",\n iconOnly ? (size === \"sm\" ? \"w-7\" : \"w-8\") : size === \"sm\" ? \"px-2\" : \"px-2.5\",\n // Icon-only buttons draw at 28–32px; on touch the hit area grows to 44px+ without changing the drawing.\n iconOnly && \"before:absolute before:-inset-2 before:content-[''] pointer-fine:before:hidden\",\n variant === \"secondary\"\n ? \"border border-line-2 bg-raised text-fg shadow-[var(--shadow)] hover:border-fg-4 hover:bg-hover\"\n : \"text-fg-2 hover:bg-hover hover:text-fg\",\n state === \"failed\" && \"text-danger hover:text-danger\",\n className,\n )}\n {...rest}\n >\n \n \n \n \n \n \n \n\n {!iconOnly && (\n // Every label sits in the same grid cell, so the button is always as wide\n // as the longest one and never shifts the layout around it.\n \n {[label, copiedLabel, failedLabel].map((l, i) => (\n {l}\n ))}\n \n \n {text}\n \n \n \n )}\n \n \n {state === \"copied\" ? copiedLabel : state === \"failed\" ? failedLabel : \"\"}\n \n \n );\n}\n\nfunction Glyph({ state, reduce }: { state: CopyState; reduce: boolean }) {\n const draw = reduce ? {} : { initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: 0.32, ease: ease.out, delay: 0.04 } };\n const common = { width: 16, height: 16, viewBox: \"0 0 16 16\", fill: \"none\", stroke: \"currentColor\", strokeWidth: 1.4, strokeLinecap: \"round\" as const, strokeLinejoin: \"round\" as const, \"aria-hidden\": true };\n if (state === \"copied\")\n return (\n \n \n \n );\n if (state === \"failed\")\n return (\n \n \n \n \n );\n return (\n \n \n \n \n );\n}\n", "type": "registry:ui" } ], "docs": "https://www.stealth.pm/ui/copy-button" }