{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-tooltip",
  "title": "Animated Tooltip",
  "description": "Avatar row with springy name tooltips on hover.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/animated-tooltip.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface TooltipItem {\n  name: string;\n  role?: string;\n}\n\ninterface AnimatedTooltipProps {\n  items: TooltipItem[];\n  className?: string;\n}\n\nconst gradients = [\n  \"from-violet-500 to-fuchsia-500\",\n  \"from-cyan-500 to-blue-500\",\n  \"from-amber-500 to-orange-600\",\n  \"from-emerald-500 to-teal-600\",\n  \"from-pink-500 to-rose-500\",\n  \"from-indigo-500 to-purple-600\",\n];\n\n/**\n * Avatar row with springy name tooltips on hover and keyboard focus.\n */\nexport function AnimatedTooltip({ items, className }: AnimatedTooltipProps) {\n  const [hovered, setHovered] = useState<number | null>(null);\n  const reducedMotion = useReducedMotion();\n\n  return (\n    <div data-slot=\"animated-tooltip\" className={cn(\"flex -space-x-3\", className)}>\n      {items.map((item, i) => {\n        const initials = item.name\n          .split(\" \")\n          .map((w) => w[0])\n          .slice(0, 2)\n          .join(\"\");\n        return (\n          <div\n            key={item.name}\n            className=\"group/tooltip relative\"\n            onMouseEnter={() => setHovered(i)}\n            onMouseLeave={() => setHovered(null)}\n          >\n            <AnimatePresence>\n              {hovered === i && (\n                <motion.div\n                  aria-hidden\n                  initial={{ opacity: 0, y: 12, scale: 0.6 }}\n                  animate={{ opacity: 1, y: 0, scale: 1 }}\n                  exit={{ opacity: 0, y: 12, scale: 0.6 }}\n                  transition={\n                    reducedMotion\n                      ? { duration: 0 }\n                      : { type: \"spring\", stiffness: 260, damping: 14 }\n                  }\n                  className=\"pointer-events-none absolute -top-14 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center whitespace-nowrap rounded-lg border bg-popover px-3 py-1.5 shadow-xl\"\n                >\n                  <span className=\"text-xs font-semibold text-popover-foreground\">\n                    {item.name}\n                  </span>\n                  {item.role && (\n                    <span className=\"text-[10px] text-muted-foreground\">\n                      {item.role}\n                    </span>\n                  )}\n                </motion.div>\n              )}\n            </AnimatePresence>\n            <span\n              tabIndex={0}\n              onFocus={() => setHovered(i)}\n              onBlur={() => setHovered(null)}\n              onKeyDown={(e) => {\n                if (e.key === \"Escape\") setHovered(null);\n              }}\n              className={cn(\n                \"relative flex size-11 cursor-default items-center justify-center rounded-full bg-gradient-to-br text-xs font-semibold text-white ring-2 ring-background transition-transform duration-200 group-hover/tooltip:z-30 group-hover/tooltip:scale-110 focus-visible:z-30 focus-visible:scale-110 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none\",\n                gradients[i % gradients.length]\n              )}\n            >\n              <span aria-hidden>{initials}</span>\n              <span className=\"sr-only\">\n                {item.role ? `${item.name}, ${item.role}` : item.name}\n              </span>\n            </span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/animated-tooltip.tsx"
    }
  ],
  "type": "registry:ui"
}