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:T253b,'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'; export interface MaximizeScreenIconHandle { startAnimation: () => void; stopAnimation: () => void; } interface MaximizeScreenIconProps extends HTMLAttributes { size?: number; } const MAXIMIZE_WINDOW = 'M2 17C2 15.1144 2 14.1716 2.58579 13.5858C3.17157 13 4.11438 13 6 13H7C8.88562 13 9.82843 13 10.4142 13.5858C11 14.1716 11 15.1144 11 17V18C11 19.8856 11 20.8284 10.4142 21.4142C9.82843 22 8.88562 22 7 22H6C4.11438 22 3.17157 22 2.58579 21.4142C2 20.8284 2 19.8856 2 18V17Z'; const MAXIMIZE_OUTER_SOURCE = 'M2 8.5V10.5M14 2H10M22 14V10M13.5 22H15.5M2.05986 5.5C2.21387 4.43442 2.51347 3.67903 3.09625 3.09625C3.67903 2.51347 4.43442 2.21387 5.5 2.05986M18.5 2.05986C19.5656 2.21387 20.321 2.51347 20.9037 3.09625C21.4865 3.67903 21.7861 4.43442 21.9401 5.5M21.9401 18.5C21.7861 19.5656 21.4865 20.321 20.9037 20.9037C20.321 21.4865 19.5656 21.7861 18.5 21.9401'; const MAXIMIZE_DURATION = 0.86; const MAXIMIZE_TIMES = [0, 0.07, 0.14, 0.23, 0.34, 0.46, 0.58, 0.68, 0.76, 0.82, 0.88, 0.94, 1]; function createExpandedWindowPath({ right, top, }: { right: number; top: number; }) { return `M2 ${top + 4}C2 ${top + 2.1144} 2 ${top + 1.1716} 2.58579 ${top + 0.5858}C3.17157 ${top} 4.11438 ${top} 6 ${top}H${right - 4}C${right - 2.11438} ${top} ${right - 1.17157} ${top} ${right - 0.5858} ${top + 0.5858}C${right} ${top + 1.1716} ${right} ${top + 2.1144} ${right} ${top + 4}V18C${right} 19.8856 ${right} 20.8284 ${right - 0.5858} 21.4142C${right - 1.17157} 22 ${right - 2.11438} 22 ${right - 4} 22H6C4.11438 22 3.17157 22 2.58579 21.4142C2 20.8284 2 19.8856 2 18V${top + 4}Z`; } const EXPANDING_WINDOW_FRAMES = [ MAXIMIZE_WINDOW, MAXIMIZE_WINDOW, createExpandedWindowPath({ right: 11.66, top: 12.34 }), createExpandedWindowPath({ right: 12.98, top: 11.02 }), createExpandedWindowPath({ right: 15.18, top: 8.82 }), createExpandedWindowPath({ right: 17.82, top: 6.18 }), createExpandedWindowPath({ right: 20.02, top: 3.98 }), createExpandedWindowPath({ right: 21.45, top: 2.55 }), createExpandedWindowPath({ right: 22, top: 2 }), createExpandedWindowPath({ right: 22, top: 2 }), createExpandedWindowPath({ right: 20.02, top: 3.98 }), createExpandedWindowPath({ right: 15.18, top: 8.82 }), MAXIMIZE_WINDOW, ]; // The arrow leads the original window into the outer frame. const arrowVariants: Variants = { normal: { transform: 'translate(0px, 0px)' }, animate: { transform: [ 'translate(0px, 0px)', 'translate(0.2px, -0.2px)', 'translate(0.55px, -0.55px)', 'translate(1.1px, -1.1px)', 'translate(1.45px, -1.45px)', 'translate(0.9px, -0.9px)', 'translate(0.35px, -0.35px)', 'translate(0px, 0px)', 'translate(0px, 0px)', 'translate(0px, 0px)', 'translate(0.35px, -0.35px)', 'translate(0.15px, -0.15px)', 'translate(0px, 0px)', ], transition: { duration: MAXIMIZE_DURATION, ease: [0.77, 0, 0.175, 1], times: MAXIMIZE_TIMES, }, }, }; const sourceWindowVariants: Variants = { normal: { d: MAXIMIZE_WINDOW, strokeDasharray: '100 0', strokeDashoffset: 0, visibility: 'visible', }, animate: { d: EXPANDING_WINDOW_FRAMES, strokeDasharray: [ '100 0', '100 0', '100 0', '100 0', '100 0', '100 0', '36 0.4', '12 1', '5 1.8', '2.6 2.2', '5 1.8', '36 0.4', '100 0', ], strokeDashoffset: [0, 0, 0, 0, 0, 0, 0.5, 1.5, 3, 4, 3, 0.5, 0], visibility: [ 'visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'hidden', 'hidden', 'visible', ], transition: { duration: MAXIMIZE_DURATION, ease: 'linear', times: MAXIMIZE_TIMES, }, }, }; const sourceOuterFrameVariants: Variants = { normal: { pathLength: 1 }, animate: { pathLength: [1, 1, 1, 0.92, 0.72, 0.42, 0.15, 0, 0, 0, 0.18, 0.55, 1], transition: { duration: MAXIMIZE_DURATION, ease: 'linear', times: MAXIMIZE_TIMES, }, }, }; const arrivingWindowVariants: Variants = { normal: { transform: 'translate(-12px, 12px)' }, animate: { transform: [ 'translate(-12px, 12px)', 'translate(-12px, 12px)', 'translate(-12px, 12px)', 'translate(-12px, 12px)', 'translate(-12px, 12px)', 'translate(-9px, 9px)', 'translate(-4.5px, 4.5px)', 'translate(-1px, 1px)', 'translate(0px, 0px)', 'translate(0px, 0px)', 'translate(0px, 0px)', 'translate(0px, 0px)', 'translate(0px, 0px)', ], transition: { duration: MAXIMIZE_DURATION, ease: 'linear', times: MAXIMIZE_TIMES, }, }, }; const generatedGeometryVariants: Variants = { normal: { visibility: 'hidden', transition: { duration: 0 } }, animate: { visibility: ['hidden', 'hidden', 'hidden', 'hidden', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'visible', 'hidden'], transition: { duration: MAXIMIZE_DURATION, ease: 'linear', times: MAXIMIZE_TIMES, }, }, }; const occlusionMaskVariants: Variants = { normal: { transform: 'translate(-12px, 12px)' }, animate: { transform: [ 'translate(-12px, 12px)', 'translate(-12px, 12px)', 'translate(-12px, 12px)', 'translate(-12px, 12px)', 'translate(-12px, 12px)', 'translate(-9px, 9px)', 'translate(-4.5px, 4.5px)', 'translate(-1px, 1px)', 'translate(0px, 0px)', 'translate(0px, 0px)', 'translate(0px, 0px)', 'translate(0px, 0px)', 'translate(0px, 0px)', ], transition: { duration: MAXIMIZE_DURATION, ease: 'linear', times: MAXIMIZE_TIMES, }, }, }; const MaximizeScreenIcon = forwardRef( ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => { const controls = useAnimation(); const occlusionMaskId = useId(); const { handleMouseEnter, handleMouseLeave } = useIconAnimation({ controls, loops: false, onMouseEnter, onMouseLeave, ref, }); return (

); } ); MaximizeScreenIcon.displayName = 'MaximizeScreenIcon'; export { MaximizeScreenIcon }; 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/maximize-screen.tsx","content":"$54","type":"registry:ui"},{"path":"lib/use-icon-animation.ts","content":"$55","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]