{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "magnetic-avatar-group-shadcnui",
  "type": "registry:component",
  "title": "Magnetic Avatar Group",
  "description": "Stacked avatars that spread apart on hover showing tooltips",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/motion-core/magnetic-avatar-group.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { useState } from \"react\";\n\ntype Avatar = {\n  id: string;\n  name: string;\n  initials: string;\n  color: string;\n};\n\ntype MagneticAvatarGroupProps = {\n  avatars?: Avatar[];\n  maxVisible?: number;\n};\n\nexport function MagneticAvatarGroup({\n  avatars = [\n    { id: \"1\", name: \"John Doe\", initials: \"JD\", color: \"bg-primary\" },\n    { id: \"2\", name: \"Jane Smith\", initials: \"JS\", color: \"bg-primary/80\" },\n    { id: \"3\", name: \"Bob Wilson\", initials: \"BW\", color: \"bg-primary/60\" },\n    { id: \"4\", name: \"Alice Brown\", initials: \"AB\", color: \"bg-primary/40\" },\n  ],\n  maxVisible = 4,\n}: MagneticAvatarGroupProps) {\n  const [hoveredId, setHoveredId] = useState<string | null>(null);\n  const visibleAvatars = avatars.slice(0, maxVisible);\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      {visibleAvatars.map((avatar, index) => {\n        const isHovered = hoveredId === avatar.id;\n        const spread = isHovered ? 40 : 0;\n\n        return (\n          <div key={avatar.id} className=\"relative\">\n            <motion.div\n              initial={{ x: -index * 8, opacity: 0 }}\n              animate={{\n                x: isHovered ? -index * 8 - spread : -index * 8,\n                opacity: 1,\n                scale: isHovered ? 1.15 : 1,\n                zIndex: isHovered ? 10 : index,\n              }}\n              transition={{\n                type: \"spring\",\n                stiffness: 300,\n                damping: 25,\n              }}\n              onHoverStart={() => setHoveredId(avatar.id)}\n              onHoverEnd={() => setHoveredId(null)}\n              className={`flex h-10 w-10 cursor-pointer items-center justify-center rounded-full ${avatar.color} text-primary-foreground font-semibold text-xs shadow-md`}\n            >\n              {avatar.initials}\n            </motion.div>\n\n            <AnimatePresence>\n              {isHovered && (\n                <motion.div\n                  initial={{ opacity: 0, y: 10, scale: 0.8 }}\n                  animate={{ opacity: 1, y: 0, scale: 1 }}\n                  exit={{ opacity: 0, y: 10, scale: 0.8 }}\n                  transition={{\n                    type: \"spring\",\n                    stiffness: 400,\n                    damping: 25,\n                  }}\n                  className=\"absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg border border-border bg-card px-3 py-1.5 text-xs shadow-lg\"\n                >\n                  {avatar.name}\n                  <div className=\"absolute left-1/2 top-full h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-border bg-card\" />\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </div>\n        );\n      })}\n\n      {avatars.length > maxVisible && (\n        <motion.div\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          className=\"flex h-10 w-10 items-center justify-center rounded-full border-2 border-border bg-muted text-xs font-medium\"\n        >\n          +{avatars.length - maxVisible}\n        </motion.div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/magnetic-avatar-group-shadcnui.tsx"
    }
  ]
}