4e: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"] 4f: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"] 50:T1639,"use client"; import * as React from "react"; import { motion, useAnimate, useInView, useReducedMotion } from "motion/react"; import { cn } from "@/lib/utils"; export type ClickyColor = "purple" | "pink" | "blue" | "emerald" | "orange" | "default"; const palette: Record = { purple: { line: "#8b5cf6", edge: "#6d28d9", from: "#a855f7", to: "#ec4899" }, pink: { line: "#ec4899", edge: "#be185d", from: "#f472b6", to: "#fb7185" }, blue: { line: "#3b82f6", edge: "#1d4ed8", from: "#60a5fa", to: "#22d3ee" }, emerald: { line: "#10b981", edge: "#047857", from: "#34d399", to: "#a3e635" }, orange: { line: "#f97316", edge: "#c2410c", from: "#fb923c", to: "#facc15" }, default: { line: "#52525b", edge: "#27272a", from: "#a1a1aa", to: "#71717a" }, }; export interface ClickyProps extends Omit, "color"> { children: React.ReactNode; color?: ClickyColor; size?: number; anchor?: { x: number; y: number }; delay?: number; loop?: boolean; interval?: number; autoClick?: boolean; } const TIP = { x: 13, y: 2.5 }; const HAND = "M11 16V4.5a2 2 0 0 1 4 0V12a2 2 0 0 1 4 0v1a2 2 0 0 1 4 0v1a2 2 0 0 1 4 0v7c0 4.5-3 8-7.5 8h-3c-2.7 0-4.3-1-5.9-3l-5.2-6.4a1.9 1.9 0 0 1 2.8-2.6L11 19.5Z"; function Clicky({ children, color = "purple", size = 40, anchor = { x: 62, y: 58 }, delay = 0.2, loop = true, interval = 2.4, autoClick = false, className, ref, ...props }: ClickyProps) { const [scope, animate] = useAnimate(); React.useImperativeHandle(ref, () => scope.current, [scope]); const targetRef = React.useRef(null); const inView = useInView(scope, { once: true, amount: 0.6 }); const reduceMotion = useReducedMotion(); const colors = palette[color]; React.useEffect(() => { if (!inView) return; let cancelled = false; const timers = new Set>(); const wait = (seconds: number) => new Promise((resolve) => { const timer = setTimeout(() => { timers.delete(timer); resolve(); }, seconds * 1000); timers.add(timer); }); const quick = { duration: 0.12, ease: "easeOut" } as const; const release = { type: "spring", stiffness: 520, damping: 26 } as const; async function press() { const target = targetRef.current; await Promise.all([ animate("[data-hand]", { scale: 0.86, rotate: -4 }, quick), target && animate(target, { scale: 0.97 }, quick), ]); if (cancelled) return; animate( "[data-glow]", { scale: [0.4, 1.8], opacity: [0.55, 0] }, { duration: 0.7, ease: "easeOut" }, ); if (autoClick) (target?.firstElementChild as HTMLElement | null)?.click(); await Promise.all([ animate("[data-hand]", { scale: 1, rotate: 0 }, release), target && animate(target, { scale: 1 }, release), ]); } async function run() { await wait(reduceMotion ? 0 : delay); if (cancelled) return; await animate( "[data-cursor]", { opacity: 1, scale: 1 }, reduceMotion ? { duration: 0 } : { duration: 0.18, ease: "easeOut" }, ); if (reduceMotion) return; while (!cancelled) { await press(); if (!loop || cancelled) break; await wait(interval); } } run(); return () => { cancelled = true; timers.forEach(clearTimeout); }; }, [inView, animate, autoClick, delay, interval, loop, reduceMotion]); const scale = size / 32; const tipX = TIP.x * scale; const tipY = TIP.y * scale; return ( {children} ); } export { Clicky }; 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@clover-ui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/clover-ui/clicky.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]