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:T12b0,"use client"; import type { Variants } from "motion/react"; import { motion, useAnimation } from "motion/react"; import type { HTMLAttributes } from "react"; import { forwardRef, useCallback, useImperativeHandle, useRef } from "react"; import { cn } from "@/lib/utils"; export interface FaceFrownIconHandle { startAnimation: () => void; stopAnimation: () => void; } interface FaceFrownIconProps extends HTMLAttributes { size?: number; } const FACE_VARIANTS: Variants = { normal: { scale: 1, rotate: 0, transition: { duration: 0.3, ease: "easeOut" }, }, animate: { scale: [1, 1.15, 1.05, 1.08], rotate: [0, -2, 2, 0], transition: { duration: 0.8, times: [0, 0.3, 0.6, 1], ease: "easeInOut", }, }, }; const MOUTH_VARIANTS: Variants = { normal: { d: "M15.1823 16.3179C14.3075 15.4432 13.1623 15.0038 12.0158 14.9999C10.859 14.996 9.70095 15.4353 8.81834 16.3179", pathLength: 1, transition: { duration: 0.3, ease: "easeOut" }, }, animate: { d: [ "M15.1823 16.3179C14.3075 15.4432 13.1623 15.0038 12.0158 14.9999C10.859 14.996 9.70095 15.4353 8.81834 16.3179", "M15.5 17C14.5 16 13 15.5 12 15.5C11 15.5 9.5 16 8.5 17", "M15.1823 16.3179C14.3075 15.4432 13.1623 15.0038 12.0158 14.9999C10.859 14.996 9.70095 15.4353 8.81834 16.3179", ], pathLength: [0.3, 1, 1], transition: { d: { duration: 0.5, ease: "easeOut" }, pathLength: { duration: 0.5, times: [0, 0.5, 1], ease: "easeInOut", }, delay: 0.1, }, }, }; const LEFT_EYE_VARIANTS: Variants = { normal: { scale: 1, y: 0, transition: { duration: 0.3, ease: "easeOut" }, }, animate: { scale: [1, 1.3, 0.9, 1.1], y: [0, -0.5, 0.3, 0], transition: { duration: 0.6, times: [0, 0.3, 0.6, 1], ease: "easeInOut", }, }, }; const RIGHT_EYE_VARIANTS: Variants = { normal: { scale: 1, y: 0, transition: { duration: 0.3, ease: "easeOut" }, }, animate: { scale: [1, 0.9, 1.3, 1.1], y: [0, -0.5, 0.3, 0], transition: { duration: 0.6, times: [0, 0.3, 0.6, 1], ease: "easeInOut", }, }, }; const FaceFrownIcon = forwardRef( ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => { const controls = useAnimation(); const isControlledRef = useRef(false); useImperativeHandle(ref, () => { isControlledRef.current = true; return { startAnimation: () => controls.start("animate"), stopAnimation: () => controls.start("normal"), }; }); const handleMouseEnter = useCallback( (e: React.MouseEvent) => { if (isControlledRef.current) { onMouseEnter?.(e); } else { controls.start("animate"); } }, [controls, onMouseEnter] ); const handleMouseLeave = useCallback( (e: React.MouseEvent) => { if (isControlledRef.current) { onMouseLeave?.(e); } else { controls.start("normal"); } }, [controls, onMouseLeave] ); return (

); } ); FaceFrownIcon.displayName = "FaceFrownIcon"; export { FaceFrownIcon }; 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":"@heroicons-animated","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"face-frown.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]