{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ui-motion-tooltip","type":"registry:component","title":"Motion Tooltip","description":"Tooltip primitive with motion-driven enter and exit behavior.","version":"1.0.0","status":"ga","files":[{"path":"src/components/ui/motion-tooltip.tsx","type":"registry:component","content":"'use client'\n\nimport * as React from 'react'\n\nimport { motion, useTransform, AnimatePresence, useMotionValue, useSpring } from 'motion/react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nimport { cn } from '@/lib/utils'\n\ninterface TooltipItem {\n  image: string\n  name: string\n  fallback: string\n  designation: string\n}\n\nfunction AnimatedTooltip({ items, className }: { items: TooltipItem[]; className?: string }) {\n  const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null)\n  const springConfig = { stiffness: 100, damping: 5 }\n\n  // going to set this value on mouse move\n  const x = useMotionValue(0)\n\n  // rotate the tooltip\n  const rotate = useSpring(useTransform(x, [-100, 100], [-45, 45]), springConfig)\n\n  // translate the tooltip\n  const translateX = useSpring(useTransform(x, [-100, 100], [-50, 50]), springConfig)\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLElement>) => {\n    const halfWidth = event.currentTarget.offsetWidth / 2\n\n    // set the x value, which is then used in transform and rotate\n    x.set(event.nativeEvent.offsetX - halfWidth)\n  }\n\n  return (\n    <>\n      {items.map((item, index) => (\n        <div\n          className={cn('relative -me-2.5', className)}\n          key={item.name}\n          onMouseEnter={() => setHoveredIndex(index)}\n          onMouseLeave={() => setHoveredIndex(null)}\n        >\n          <AnimatePresence mode='popLayout'>\n            {hoveredIndex === index && (\n              <motion.div\n                initial={{ opacity: 0, y: 20, scale: 0.6 }}\n                animate={{\n                  opacity: 1,\n                  y: 0,\n                  scale: 1,\n                  transition: {\n                    type: 'spring',\n                    stiffness: 260,\n                    damping: 10\n                  }\n                }}\n                exit={{ opacity: 0, y: 20, scale: 0.6 }}\n                style={{\n                  translateX: translateX,\n                  rotate: rotate,\n                  whiteSpace: 'nowrap'\n                }}\n                className='bg-foreground text-background absolute -top-2 left-1/2 z-50 flex -translate-x-1/2 -translate-y-full flex-col items-center justify-center rounded-md px-4 py-2 text-xs shadow-xl'\n              >\n                <div className='relative z-1 text-base font-semibold'>{item.name}</div>\n                <div className='text-background/80 text-xs'>{item.designation}</div>\n              </motion.div>\n            )}\n          </AnimatePresence>\n          <Avatar\n            className='ring-background relative size-10 ring-2 transition-all duration-300 ease-in-out hover:z-1 hover:scale-105'\n            onMouseMove={handleMouseMove}\n          >\n            <AvatarImage src={item.image} alt={item.name} />\n            <AvatarFallback className='text-xs'>{item.fallback}</AvatarFallback>\n          </Avatar>\n        </div>\n      ))}\n    </>\n  )\n}\n\nexport { AnimatedTooltip }\n"}]}