51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T20e8,"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 }; 54:T73a,"use client"; import { useCallback, useEffect, useState } from "react"; async function writeToClipboard(text: string): Promise { try { await navigator.clipboard.writeText(text); return true; } catch { try { const textarea = document.createElement("textarea"); textarea.value = text; textarea.style.position = "fixed"; textarea.style.opacity = "0"; document.body.appendChild(textarea); textarea.select(); const success = document.execCommand("copy"); document.body.removeChild(textarea); return success; } catch { return false; } } } export interface UseCopyToClipboardOptions { /** ms before `isCopied`/`isError` auto-resets. Pass `null` to disable (e.g. when another mechanism owns the lifecycle). */ timeout?: number | null; onCopied?: (text: string) => void; onCopyError?: (text: string) => void; } export function useCopyToClipboard({ timeout = 2000, onCopied, onCopyError, }: UseCopyToClipboardOptions = {}) { const [status, setStatus] = useState<"idle" | "copied" | "error">("idle"); useEffect(() => { if (status !== "idle" && timeout != null) { const timer = setTimeout(() => setStatus("idle"), timeout); return () => clearTimeout(timer); } }, [status, timeout]); const copyToClipboard = useCallback( async (text: string): Promise => { const success = await writeToClipboard(text); if (success) { setStatus("copied"); onCopied?.(text); } else { setStatus("error"); onCopyError?.(text); } return success; }, [onCopied, onCopyError], ); const reset = useCallback(() => setStatus("idle"), []); return { isCopied: status === "copied", isError: status === "error", copyToClipboard, reset, }; } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/core-free-icons"}]]}]}]]}],["$","$L51",null,{"namespace":"@cubby-ui","registryDependencies":["@cubby-ui/button","@cubby-ui/toast"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/copy-button/copy-button.tsx","content":"$53","type":"registry:ui","target":"components/ui/cubby-ui/copy-button/copy-button.tsx"},{"path":"registry/default/copy-button/hooks/use-copy-to-clipboard.ts","content":"$54","type":"registry:hook","target":"components/ui/cubby-ui/copy-button/hooks/use-copy-to-clipboard.ts"}],"className":"h-[70svh] min-h-80"}]]}]