50: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"] 51: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"] 52:T3835,"use client"; import { forwardRef, useState, useCallback, useRef, useEffect, useId, type HTMLAttributes } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { cn } from "@/lib/utils"; import { useIcon } from "@/lib/icon-context"; import { fontWeights } from "@/lib/font-weight"; import { useShape } from "@/lib/shape-context"; import { useSize, type SizeVariant } from "@/lib/size-context"; import { spring } from "@/lib/springs"; import { Tooltip } from "@/registry/radix/tooltip"; type InputCopyVariant = "icon" | "button"; type InputCopyAlign = "right" | "left"; interface InputCopyProps extends Omit, "children"> { /** The value to display and copy to clipboard. */ value: string; /** Optional label displayed above the input. */ label?: string; /** Callback fired after the value is copied. */ onCopy?: () => void; /** Whether the component is disabled. */ disabled?: boolean; /** Display variant: icon-only with tooltip, or button with label. */ variant?: InputCopyVariant; /** Position of the copy action relative to the value. */ align?: InputCopyAlign; /** Pins the field to one step of the size ladder (default 36px, compact * 28px — see /docs/sizes). Omitted, it follows the surrounding * SizeProvider. */ size?: SizeVariant; } const InputCopy = forwardRef( ({ value, label, onCopy, disabled, variant = "icon", align = "right", size, className, ...props }, ref) => { const CopyIcon = useIcon("copy"); // "copied" and "error" both occupy the same animation slot on the button const [status, setStatus] = useState<"idle" | "copied" | "error">("idle"); const [copyCount, setCopyCount] = useState(0); // "idle" = normal tooltip behavior, "copied" = force open, "suppressed" = force closed const [tooltipState, setTooltipState] = useState<"idle" | "copied" | "suppressed">("idle"); const timeoutRef = useRef>(null); const tooltipVisibleRef = useRef(false); const tooltipWasVisibleRef = useRef(false); const shape = useShape(); const sizeClasses = useSize(size); // The row's height comes from the padded children, so the paddings step // down with the ladder (py-2 → 36px total, py-1 → 28px). const rowPy = sizeClasses.variant === "compact" ? "py-1" : "py-2"; // Associate the visible label with the button: the button's accessible // name reads "Copy " (its own state label + the field label). const generatedId = useId(); const labelId = label ? `${generatedId}-label` : undefined; const buttonId = `${generatedId}-button`; const handlePointerDown = useCallback(() => { // Capture tooltip visibility before Radix closes it on pointer down tooltipWasVisibleRef.current = tooltipVisibleRef.current; }, []); // execCommand fallback for when the async Clipboard API is unavailable or // denied (insecure context, permissions policy) — copies via a temporary // off-screen textarea. const copyViaExecCommand = useCallback(() => { const textarea = document.createElement("textarea"); textarea.value = value; textarea.setAttribute("readonly", ""); textarea.style.position = "fixed"; textarea.style.opacity = "0"; document.body.appendChild(textarea); textarea.select(); let ok = false; try { ok = document.execCommand("copy"); } catch { ok = false; } document.body.removeChild(textarea); return ok; }, [value]); const handleCopy = useCallback(async () => { if (disabled) return; let ok = true; try { await navigator.clipboard.writeText(value); } catch { ok = copyViaExecCommand(); } setStatus(ok ? "copied" : "error"); setCopyCount((c) => c + 1); setTooltipState(tooltipWasVisibleRef.current ? "copied" : "suppressed"); if (ok) onCopy?.(); if (timeoutRef.current) clearTimeout(timeoutRef.current); timeoutRef.current = setTimeout(() => { setStatus("idle"); setTooltipState("suppressed"); }, 2000); }, [value, disabled, onCopy, copyViaExecCommand]); const handleTooltipOpenChange = useCallback((open: boolean) => { tooltipVisibleRef.current = open; }, []); useEffect(() => { return () => { if (timeoutRef.current) clearTimeout(timeoutRef.current); }; }, []); const handleMouseEnter = useCallback(() => { setTooltipState((prev) => prev === "suppressed" ? "idle" : prev); }, []); const handleMouseLeave = useCallback(() => { setTooltipState((prev) => prev === "copied" ? "suppressed" : prev); }, []); const iconSwitch = ( {status === "error" ? ( ) : status === "copied" ? ( ) : ( )} ); const actionElement = variant === "button" ? ( {status === "error" ? ( Failed ) : status === "copied" ? ( Copied ) : ( Copy )} ) : ( {iconSwitch} ); const valueElement = ( {value} ); const buttonContent = align === "left" ? ( <>{actionElement}{valueElement} ) : ( <>{valueElement}{actionElement} ); const button = ( ); return (

{label && ( {label} )} {variant === "icon" ? ( {button} ) : ( button )}

); } ); InputCopy.displayName = "InputCopy"; export { InputCopy }; export type { InputCopyProps }; export default InputCopy; 4f:["$","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","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","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":"framer-motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@fluid","registryDependencies":["utils","https://www.fluidfunctionalism.com/r/springs.json","https://www.fluidfunctionalism.com/r/font-weight.json","https://www.fluidfunctionalism.com/r/shape-context.json","https://www.fluidfunctionalism.com/r/icon-context.json","https://www.fluidfunctionalism.com/r/size-context.json","https://www.fluidfunctionalism.com/r/tooltip.json","https://www.fluidfunctionalism.com/r/tokens.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/input-copy.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]