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:T1a1b,"use client"; import { createContext, useContext, useEffect, useState } from "react"; import { createPortal } from "react-dom"; import { AnimatePresence, motion, useMotionValue, useSpring, useVelocity, useTransform, } from "motion/react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; const floatingTooltipVariants = cva("ml-4 mt-4 font-medium", { variants: { variant: { default: "bg-primary text-background dark:bg-white", outline: "border border-border bg-background text-foreground shadow-none", }, size: { md: "rounded-md px-3.5 py-2.5 text-sm", lg: "rounded-lg px-5 py-4 text-base", }, }, defaultVariants: { variant: "default", size: "md", }, }); interface TooltipContextType { setContent: ( content: string, description?: string, contentClassName?: string, descriptionClassName?: string, ) => void; setIsActive: (active: boolean) => void; } const TooltipContext = createContext(null); export function FloatingTooltipProvider({ children, className, variant, size, }: { children: React.ReactNode; className?: string; } & VariantProps) { const x = useMotionValue(0); const y = useMotionValue(0); const springConfig = { damping: 45, stiffness: 750 }; const smoothX = useSpring(x, springConfig); const smoothY = useSpring(y, springConfig); const velocityX = useVelocity(smoothX); const velocityY = useVelocity(smoothY); const scaleX = useTransform(velocityX, [-1000, 0, 1000], [0.9, 1, 1.15]); const scaleY = useTransform(velocityY, [-1000, 0, 1000], [1.15, 1, 0.9]); const skewX = useTransform(velocityX, [-1000, 0, 1000], [-3, 0, 3]); const skewY = useTransform(velocityY, [-1000, 0, 1000], [-3, 0, 3]); const [isActive, setIsActive] = useState(false); const [content, setContent] = useState(""); const [description, setDescription] = useState(""); const [contentClassName, setContentClassName] = useState(""); const [descriptionClassName, setDescriptionClassName] = useState(""); useEffect(() => { if (typeof window === "undefined") return; const getZoom = () => { const htmlElement = document.documentElement; const computedZoom = window.getComputedStyle(htmlElement).zoom; return computedZoom ? parseFloat(computedZoom) : 1; }; const handleMouseMove = (e: MouseEvent) => { const zoom = getZoom(); x.set(e.clientX / zoom); y.set(e.clientY / zoom); }; window.addEventListener("mousemove", handleMouseMove, { passive: true }); return () => { window.removeEventListener("mousemove", handleMouseMove); }; }, [x, y]); const handleSetContent = ( newContent: string, newDescription?: string, newContentClassName?: string, newDescriptionClassName?: string, ) => { setContent(newContent); setDescription(newDescription || ""); setContentClassName(newContentClassName || ""); setDescriptionClassName(newDescriptionClassName || ""); }; return ( {children} {typeof document !== "undefined" && createPortal( {isActive && content && ( {content} {description && ( {description} )} )} , document.body, )} ); } export function FloatingTooltipTrigger({ children, content, description, contentClassName, descriptionClassName, }: { children: React.ReactNode; content: string; description?: string; contentClassName?: string; descriptionClassName?: string; }) { const context = useContext(TooltipContext); if (!context) { throw new Error( "FloatingTooltipTrigger must be used within FloatingTooltipProvider", ); } const { setContent, setIsActive } = context; const handleMouseEnter = () => { setContent(content, description, contentClassName, descriptionClassName); setIsActive(true); }; const handleMouseLeave = () => { setIsActive(false); }; return (

{children}

); } export const FloatingTooltip = { Provider: FloatingTooltipProvider, Trigger: FloatingTooltipTrigger, }; 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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","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":"@unlumen-ui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/components/unlumen/floating-tooltip/index.tsx","content":"$54","type":"registry:ui","target":"components/unlumen-ui/floating-tooltip.tsx"}],"className":"h-[70svh] min-h-80"}]]}]