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:T19d5,'use client'; import type { Easing, 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 FolderOpenIconHandle { startAnimation: () => void; stopAnimation: () => void; } interface FolderOpenIconProps extends HTMLAttributes { size?: number; } const FLAP = 'M4.42028 14.0144L3.63368 16.0144C2.65618 18.4998 2.16743 19.7425 2.7524 20.6213C3.33737 21.5 4.65337 21.5 7.28537 21.5H15.1903C16.4249 21.5 17.0422 21.5 17.5295 21.1795C18.0169 20.859 18.2702 20.2865 18.7769 19.1415L19.6618 17.1415C20.7866 14.5992 21.349 13.3281 20.7679 12.4141C20.1868 11.5 18.8163 11.5 16.0752 11.5H8.07196C6.78232 11.5 6.1375 11.5 5.63811 11.8439C5.13872 12.1877 4.89924 12.7966 4.42028 14.0144Z'; // The front flap turns toward the viewer around its bottom edge (y = 21.5). // Each point is rotated in 3D and projected with a light perspective, so the // falling top edge shortens and widens like a real cover. Every pose keeps // the source commands, so Motion can morph between them. const HINGE_Y = 21.5; const EYE_X = 11.5; const EYE_Y = 12; const DEPTH = 70; const tiltFlap = (degrees: number) => { const angle = (degrees * Math.PI) / 180; const project = (x: number, y: number) => { const height = HINGE_Y - y; const scale = DEPTH / (DEPTH - height * Math.sin(angle)); return [ EYE_X + (x - EYE_X) * scale, EYE_Y + (HINGE_Y - height * Math.cos(angle) - EYE_Y) * scale, ]; }; const round = (value: number) => Number(value.toFixed(3)); let currentY = 0; return FLAP.replace(/([MLCHZ])([^MLCHZ]*)/g, (_, command: string, args: string) => { const numbers = args.trim() ? args.trim().split(/\s+/).map(Number) : []; if (command === 'H') return `H${round(project(numbers[0], currentY)[0])}`; const points: number[] = []; for (let index = 0; index < numbers.length; index += 2) { points.push(...project(numbers[index], numbers[index + 1]).map(round)); currentY = numbers[index + 1]; } return command + points.join(' '); }); }; // Open toward the viewer with a small overshoot, hold, then slap shut: the // flap tips a few degrees past closed and settles. const FLAP_DURATION = 1.1; const FLAP_TIMES = [0, 0.32, 0.46, 0.58, 0.8, 0.9, 1]; const FLAP_EASE: Easing[] = [ [0.23, 1, 0.32, 1], 'easeInOut', 'easeInOut', [0.55, 0, 0.8, 0.3], 'easeOut', 'easeInOut', ]; const FLAP_POSES = [FLAP, ...[66, 58, 61, -6, 2].map(tiltFlap), FLAP]; const folderFlapVariants: Variants = { normal: { d: FLAP }, animate: { d: FLAP_POSES, transition: { duration: FLAP_DURATION, ease: FLAP_EASE, times: FLAP_TIMES }, }, }; const generatedGeometryVariants: Variants = { normal: { visibility: 'hidden', transition: { duration: 0 } }, animate: { visibility: ['visible', 'visible', 'hidden'], transition: { duration: FLAP_DURATION, times: [0, 0.999, 1] }, }, }; const FolderOpenIcon = forwardRef( ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => { const occlusionMaskId = useId(); const controls = useAnimation(); const { handleMouseEnter, handleMouseLeave } = useIconAnimation({ controls, loops: false, onMouseEnter, onMouseLeave, ref, }); return (

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