52: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"] 53: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"] 54:T1244,'use client'; import type { Variants } from 'motion/react'; import { motion, useAnimation } from 'motion/react'; import type { HTMLAttributes } from 'react'; import { forwardRef, useId } from 'react'; import { useIconAnimation } from '@/lib/use-icon-animation'; import { cn } from '@/lib/utils'; /** Imperative controls for the Clipboard icon animation. */ export interface ClipboardIconHandle { startAnimation: () => void; stopAnimation: () => void; } interface ClipboardIconProps extends HTMLAttributes { size?: number; } const FRONT_BOARD_PATH = 'M17.0235 3.03358L16.0689 2.77924C13.369 2.05986 12.019 1.70018 10.9555 2.31074C9.89196 2.9213 9.53023 4.26367 8.80678 6.94841L7.78366 10.7452C7.0602 13.4299 6.69848 14.7723 7.3125 15.8298C7.92652 16.8874 9.27651 17.247 11.9765 17.9664L12.9311 18.2208C15.631 18.9401 16.981 19.2998 18.0445 18.6893C19.108 18.0787 19.4698 16.7363 20.1932 14.0516L21.2163 10.2548C21.9398 7.57005 22.3015 6.22768 21.6875 5.17016C21.0735 4.11264 19.7235 3.75295 17.0235 3.03358Z'; // The front clipboard merges over the rear board, pauses, then duplicates. const frontBoardVariants: Variants = { normal: { x: 0, y: 0, scale: 1, rotate: 0, transition: { type: 'spring', duration: 0.3, bounce: 0 }, }, animate: { x: [0, 0.35, -5, -5, 0.45, 0], y: [0, -0.25, 3, 3, -0.3, 0], scale: [1, 1.025, 1, 1, 1.035, 1], rotate: [0, 1.5, -30, -30, 1, 0], transition: { duration: 0.9, ease: 'easeInOut', times: [0, 0.1, 0.38, 0.52, 0.84, 1], }, }, }; const generatedGeometryVariants: Variants = { normal: { visibility: 'hidden', transition: { duration: 0.08 } }, animate: { visibility: 'visible', transition: { duration: 0 } }, }; /** Animated Clipboard icon with imperative hover controls. */ const ClipboardIcon = forwardRef( ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => { const occlusionMaskId = useId(); const controls = useAnimation(); const { handleMouseEnter, handleMouseLeave } = useIconAnimation({ controls, onMouseEnter, onMouseLeave, ref, }); return (

); } ); ClipboardIcon.displayName = 'ClipboardIcon'; export { ClipboardIcon }; 55:T83d,'use client'; import type { LegacyAnimationControls } from 'motion/react'; import { useReducedMotion } from 'motion/react'; import type { ForwardedRef, MouseEventHandler, } from 'react'; import { useCallback, useImperativeHandle, useRef } from 'react'; export interface AnimatedIconHandle { startAnimation: () => void; stopAnimation: () => void; } interface UseIconAnimationOptions { controls: LegacyAnimationControls; loops?: boolean; onMouseEnter?: MouseEventHandler; onMouseLeave?: MouseEventHandler; ref: ForwardedRef; } export function useIconAnimation({ controls, loops = false, onMouseEnter, onMouseLeave, ref, }: UseIconAnimationOptions) { const shouldReduceMotion = useReducedMotion(); const isControlledRef = useRef(false); const isPlayingRef = useRef(false); const runRef = useRef(0); const startAnimation = useCallback(() => { if (shouldReduceMotion || isPlayingRef.current) return; isPlayingRef.current = true; const run = ++runRef.current; controls.set('normal'); void controls.start('animate').then(() => { if (runRef.current === run) isPlayingRef.current = false; }); }, [controls, shouldReduceMotion]); const stopAnimation = useCallback(() => { if (!loops) return; runRef.current++; isPlayingRef.current = false; void controls.start('normal'); }, [controls, loops]); useImperativeHandle( ref, () => { isControlledRef.current = true; return { startAnimation, stopAnimation }; }, [startAnimation, stopAnimation] ); const handleMouseEnter = useCallback>( (event) => { onMouseEnter?.(event); if (!isControlledRef.current) startAnimation(); }, [onMouseEnter, startAnimation] ); const handleMouseLeave = useCallback>( (event) => { onMouseLeave?.(event); if (!isControlledRef.current) stopAnimation(); }, [onMouseLeave, stopAnimation] ); return { handleMouseEnter, handleMouseLeave }; } 51:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/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":"motion"}]]}]}]]}],["$","$L52",null,{"namespace":"@hugeicons-animated","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"icons/clipboard.tsx","content":"$54","type":"registry:ui"},{"path":"lib/use-icon-animation.ts","content":"$55","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]