62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:Tf95,'use client'; import type { Variants } from 'motion/react'; import { motion, useAnimation } from 'motion/react'; import type { HTMLAttributes } from 'react'; import { forwardRef } from 'react'; import { useIconAnimation } from '@/lib/use-icon-animation'; import { cn } from '@/lib/utils'; export interface ListViewIconHandle { startAnimation: () => void; stopAnimation: () => void; } interface ListViewIconProps extends HTMLAttributes { size?: number; } const ROWS = [ 'M2 3.4C2 2.24173 2.24173 2 3.4 2H20.6C21.7583 2 22 2.24173 22 3.4V4.6C22 5.75827 21.7583 6 20.6 6H3.4C2.24173 6 2 5.75827 2 4.6V3.4Z', 'M2 11.4C2 10.2417 2.24173 10 3.4 10H20.6C21.7583 10 22 10.2417 22 11.4V12.6C22 13.7583 21.7583 14 20.6 14H3.4C2.24173 14 2 13.7583 2 12.6V11.4Z', 'M2 19.4C2 18.2417 2.24173 18 3.4 18H20.6C21.7583 18 22 18.2417 22 19.4V20.6C22 21.7583 21.7583 22 20.6 22H3.4C2.24173 22 2 21.7583 2 20.6V19.4Z', ]; const SHORT_ROWS = [ 'M2 3.4C2 2.24173 2.24173 2 3.4 2H10.6C11.7583 2 12 2.24173 12 3.4V4.6C12 5.75827 11.7583 6 10.6 6H3.4C2.24173 6 2 5.75827 2 4.6V3.4Z', 'M9.5 11.4C9.5 10.2417 9.74173 10 10.9 10H20.6C21.7583 10 22 10.2417 22 11.4V12.6C22 13.7583 21.7583 14 20.6 14H10.9C9.74173 14 9.5 13.7583 9.5 12.6V11.4Z', 'M2 19.4C2 18.2417 2.24173 18 3.4 18H13.1C14.2583 18 14.5 18.2417 14.5 19.4V20.6C14.5 21.7583 14.2583 22 13.1 22H3.4C2.24173 22 2 21.7583 2 20.6V19.4Z', ]; // Each row pulls in from alternating anchored edges in reading order, then // springs back to full width. The rows morph, so their rounded ends keep shape. const rowVariants: Variants = { normal: (i: number) => ({ d: ROWS[i], transition: { duration: 0.18, ease: [0.23, 1, 0.32, 1] }, }), animate: (i: number) => ({ d: [ROWS[i], SHORT_ROWS[i], ROWS[i]], transition: { duration: 0.46, delay: i * 0.08, times: [0, 0.4, 1], ease: ['easeInOut', [0.34, 1.36, 0.64, 1]], }, }), }; const ListViewIcon = forwardRef( ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => { const controls = useAnimation(); const { handleMouseEnter, handleMouseLeave } = useIconAnimation({ controls, loops: false, onMouseEnter, onMouseLeave, ref, }); return (

); } ); ListViewIcon.displayName = 'ListViewIcon'; export { ListViewIcon }; 65:Td09,'use client'; import type { LegacyAnimationControls } from 'motion/react'; import { spring, useReducedMotion } from 'motion/react'; import type { ForwardedRef, MouseEventHandler, } from 'react'; import { useCallback, useImperativeHandle, useRef } from 'react'; /** * A damped spring as the easing of one keyframe segment: the value overshoots * its target and settles on it. Use it for landings so every icon shares the * same physical bounce. Higher `bounce` gives more oscillation. */ export function springEase(bounce = 0.45, visualDuration = 0.35) { const generator = spring({ keyframes: [0, 1], bounce, visualDuration }); let settle = 0; while (!generator.next(settle).done && settle < 5000) settle += 10; return (progress: number) => progress >= 1 ? 1 : generator.next(progress * settle).value; } const NUMBER = /-?\d*\.?\d+/g; /** * The path at position `t` along a row of poses that share the same path * commands: `t = 1` is the second pose, `t = 1.5` is halfway to the third. * Waves use it to move along their own curvature instead of scaling, so the * stroke keeps its width. */ export function pathAt(poses: string[], t: number) { const i = Math.min(Math.max(Math.floor(t), 0), poses.length - 2); const to = poses[i + 1].match(NUMBER) ?? []; let k = 0; return poses[i].replace(NUMBER, (from) => { const value = Number(from) + (Number(to[k++]) - Number(from)) * (t - i); return String(Math.round(value * 10000) / 10000); }); } 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 }; } 61:["$","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"}]]}]}]]}],["$","$L62",null,{"namespace":"@hugeicons-animated","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"icons/list-view.tsx","content":"$64","type":"registry:ui"},{"path":"lib/use-icon-animation.ts","content":"$65","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]