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:T214b,"use client"; import * as React from "react"; import { type VariantProps, cva } from "class-variance-authority"; import gsap from "gsap"; import { cn } from "@/lib/utils"; const overlayVariants = cva( "pointer-events-none absolute left-0 top-0 block aspect-square w-[170%] -translate-x-1/2 -translate-y-1/2 rounded-full", { variants: { variant: { default: "bg-black dark:bg-white", outline: "bg-zinc-300 dark:bg-zinc-600", destructive: "bg-destructive", secondary: "bg-secondary-foreground", ghost: "bg-muted", link: "", }, }, defaultVariants: { variant: "default", }, }, ); const buttonVariants = cva( "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors", { variants: { variant: { default: "relative bg-primary text-primary-foreground dark:hover:text-black overflow-hidden rounded-full! px-6 py-3.5 tracking-tight after:absolute after:inset-0 after:rounded-full after:pointer-events-none after:content-[''] ", outline: "relative overflow-hidden rounded-full bg-transparent text-foreground px-6 py-3.5 tracking-tight after:absolute after:inset-0 after:rounded-full after:border-2 after:border-zinc-300 dark:after:border-zinc-600 after:pointer-events-none after:content-[''] ", destructive: "relative bg-destructive/10 dark:bg-destructive/20 text-destructive hover:text-background overflow-hidden rounded-full! px-6 py-3.5 tracking-tight", secondary: "relative bg-secondary text-secondary-foreground hover:text-background overflow-hidden rounded-full! px-6 py-3.5 tracking-tight", ghost: "relative bg-transparent text-foreground hover:text-accent-foreground overflow-hidden rounded-full! px-6 py-3.5 tracking-tight", link: "relative text-primary", }, size: { default: "h-9 px-4 py-2 has-[>svg]:px-3", xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3", sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", lg: "h-10 rounded-md px-6 has-[>svg]:px-4", icon: "size-9 p-0", "icon-xs": "size-6 rounded-md p-0 [&_svg:not([class*='size-'])]:size-3", "icon-sm": "size-8 p-0", "icon-lg": "size-10 p-0", }, }, defaultVariants: { variant: "default", size: "default", }, }, ); function FillableButton({ className, variant = "default", size = "default", children, overlayClassname, ...props }: React.ComponentProps<"button"> & VariantProps & { overlayClassname?: string; }) { const buttonRef = React.useRef(null); const flairRef = React.useRef(null); const underlineRef = React.useRef(null); React.useEffect(() => { const button = buttonRef.current; if (!button) return; if (variant === "link") { const underline = underlineRef.current; if (!underline) return; const getXPercent = (e: MouseEvent) => { const { left, width } = button!.getBoundingClientRect(); return gsap.utils.clamp(0, 100, ((e.clientX - left) / width) * 100); }; const handleEnter = (e: MouseEvent) => { const xPercent = getXPercent(e); gsap.killTweensOf(underline); gsap.fromTo( underline, { scaleX: 0, transformOrigin: `${xPercent}% center` }, { scaleX: 1, duration: 0.3, ease: "power2.out" }, ); }; const handleLeave = (e: MouseEvent) => { const xPercent = getXPercent(e); gsap.killTweensOf(underline); gsap.to(underline, { scaleX: 0, transformOrigin: `${xPercent}% center`, duration: 0.25, ease: "power2.in", }); }; button.addEventListener("mouseenter", handleEnter); button.addEventListener("mouseleave", handleLeave); return () => { button.removeEventListener("mouseenter", handleEnter); button.removeEventListener("mouseleave", handleLeave); gsap.killTweensOf(underline); }; } const flair = flairRef.current; if (!flair) return; const xSet = gsap.quickSetter(flair, "xPercent"); const ySet = gsap.quickSetter(flair, "yPercent"); function getXY(e: MouseEvent) { if (!button) return; const { left, top, width, height } = button.getBoundingClientRect(); const xTransformer = gsap.utils.pipe(gsap.utils.mapRange(0, width, 0, 100), gsap.utils.clamp(0, 100)); const yTransformer = gsap.utils.pipe(gsap.utils.mapRange(0, height, 0, 100), gsap.utils.clamp(0, 100)); return { x: xTransformer(e.clientX - left), y: yTransformer(e.clientY - top), }; } function onMouseEnter(e: MouseEvent) { const pos = getXY(e); if (!pos) return; const { x, y } = pos; xSet(x); ySet(y); gsap.to(flair, { scale: 1, duration: 0.4, ease: "power2.out", }); } function onMouseLeave(e: MouseEvent) { const pos = getXY(e); if (!pos) return; const { x, y } = pos; gsap.killTweensOf(flair); gsap.to(flair, { xPercent: x > 90 ? x + 20 : x < 10 ? x - 20 : x, yPercent: y > 90 ? y + 20 : y < 10 ? y - 20 : y, scale: 0, duration: 0.3, ease: "power2.out", }); } function onMouseMove(e: MouseEvent) { const pos = getXY(e); if (!pos) return; const { x, y } = pos; gsap.to(flair, { xPercent: x, yPercent: y, duration: 0.4, ease: "power2", }); } button.addEventListener("mouseenter", onMouseEnter); button.addEventListener("mouseleave", onMouseLeave); button.addEventListener("mousemove", onMouseMove); return () => { button.removeEventListener("mouseenter", onMouseEnter); button.removeEventListener("mouseleave", onMouseLeave); button.removeEventListener("mousemove", onMouseMove); gsap.killTweensOf(flair); }; }, [variant]); return ( ); } export { FillableButton, buttonVariants }; 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","gsap",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","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":"gsap"}]]}]}],["$","li","@gsap/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40gsap%2Freact","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":"@gsap/react"}]]}]}]]}],["$","$L52",null,{"namespace":"@paceui-gsap","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/gsap/fillable-button.tsx","content":"$54","type":"registry:ui","target":"~/components/gsap/fillable-button.tsx"}],"className":"h-[70svh] min-h-80"}]]}]