{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-avatar-stack",
  "title": "Animated Avatar Stack",
  "description": "An animated avatar stack component with size variants (xs, sm, md, lg, xl, 2xl, 3xl), customizable avatar data, and configurable max visible avatars.",
  "dependencies": [
    "motion",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "avatar",
    "tooltip"
  ],
  "files": [
    {
      "path": "src/registry/blocks/animated-avatar-stack/animated-avatar-stack-example.tsx",
      "content": "\"use client\";\n\nimport type { AvatarData } from \"@/registry/blocks/animated-avatar-stack/animated-avatar-stack\";\nimport { AnimatedAvatarStack } from \"@/registry/blocks/animated-avatar-stack/animated-avatar-stack\";\nimport { TooltipProvider } from \"@/registry/ui/tooltip\";\n\nconst AVATAR_DATA: AvatarData[] = [\n  {\n    src: \"https://rickandmortyapi.com/api/character/avatar/1.jpeg\",\n    fallback: \"RS\",\n    name: \"Rick Sanchez\",\n  },\n  {\n    src: \"https://rickandmortyapi.com/api/character/avatar/2.jpeg\",\n    fallback: \"MS\",\n    name: \"Morty Smith\",\n  },\n  {\n    src: \"https://rickandmortyapi.com/api/character/avatar/3.jpeg\",\n    fallback: \"SS\",\n    name: \"Summer Smith\",\n  },\n  {\n    src: \"https://rickandmortyapi.com/api/character/avatar/4.jpeg\",\n    fallback: \"BS\",\n    name: \"Beth Smith\",\n  },\n  {\n    src: \"https://rickandmortyapi.com/api/character/avatar/5.jpeg\",\n    fallback: \"JS\",\n    name: \"Jerry Smith\",\n  },\n  {\n    src: \"https://rickandmortyapi.com/api/character/avatar/6.jpeg\",\n    fallback: \"ACP\",\n    name: \"Abadango Cluster Princess\",\n  },\n  {\n    src: \"https://rickandmortyapi.com/api/character/avatar/7.jpeg\",\n    fallback: \"AL\",\n    name: \"Abradolf Lincler\",\n  },\n  {\n    src: \"https://rickandmortyapi.com/api/character/avatar/8.jpeg\",\n    fallback: \"AR\",\n    name: \"Adjudicator Rick\",\n  },\n];\n\nexport function AnimatedAvatarStackExample() {\n  return (\n    <TooltipProvider>\n      <AnimatedAvatarStack\n        avatarData={AVATAR_DATA}\n        maxVisible={5}\n        size=\"md\"\n      />\n    </TooltipProvider>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "src/registry/blocks/animated-avatar-stack/animated-avatar-stack.tsx",
      "content": "\"use client\";\n\nimport type * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/registry/ui/avatar\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/registry/ui/tooltip\";\n\nexport type AvatarData = {\n  src: string;\n  fallback: string;\n  name: string;\n};\n\nconst avatarStackVariants = cva(\"isolate flex items-center\", {\n  variants: {\n    size: {\n      xs: \"-space-x-1\",\n      sm: \"-space-x-1.5\",\n      md: \"-space-x-2\",\n      lg: \"-space-x-2.5\",\n      xl: \"-space-x-3\",\n      \"2xl\": \"-space-x-3.5\",\n      \"3xl\": \"-space-x-4\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nconst avatarVariants = cva(\n  \"relative cursor-pointer select-none overflow-hidden rounded-full hover:shadow-lg\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 w-6\",\n        sm: \"h-8 w-8\",\n        md: \"h-10 w-10\",\n        lg: \"h-12 w-12\",\n        xl: \"h-14 w-14\",\n        \"2xl\": \"h-16 w-16\",\n        \"3xl\": \"h-20 w-20\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n);\n\nconst countBadgeVariants = cva(\n  \"relative flex cursor-pointer select-none items-center justify-center overflow-hidden rounded-full bg-secondary font-medium text-muted-foreground hover:shadow-lg\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 w-6 text-xs\",\n        sm: \"h-8 w-8 text-xs\",\n        md: \"h-10 w-10 text-sm\",\n        lg: \"h-12 w-12 text-sm\",\n        xl: \"h-14 w-14 text-base\",\n        \"2xl\": \"h-16 w-16 text-lg\",\n        \"3xl\": \"h-20 w-20 text-xl\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n);\n\nexport interface AnimatedAvatarStackProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarStackVariants> {\n  avatarData: AvatarData[];\n  maxVisible?: number;\n}\n\nfunction AnimatedAvatarStack({\n  avatarData,\n  maxVisible = 5,\n  size = \"md\",\n  className,\n  ...props\n}: AnimatedAvatarStackProps) {\n  const visibleAvatars = avatarData.slice(0, maxVisible);\n  const hiddenCount = avatarData.length - visibleAvatars.length;\n\n  return (\n    <div className={cn(avatarStackVariants({ size }), className)} {...props}>\n      {visibleAvatars.map((avatar, index) => (\n        <Tooltip key={`${avatar.fallback}-${index}`}>\n          <TooltipTrigger asChild>\n            <motion.div\n              animate={{ scale: 1, opacity: 1, y: 0 }}\n              className={cn(avatarVariants({ size }))}\n              initial={{ scale: 0, opacity: 0, y: 20 }}\n              style={{\n                zIndex: visibleAvatars.length - index,\n              }}\n              whileHover={{\n                scale: 1.1,\n                y: -8,\n                zIndex: 100,\n                transition: {\n                  type: \"spring\",\n                  stiffness: 400,\n                  damping: 25,\n                },\n              }}\n            >\n              <Avatar className=\"size-full shadow-sm\">\n                <AvatarImage src={avatar.src || \"/placeholder.svg\"} />\n                <AvatarFallback>{avatar.fallback}</AvatarFallback>\n              </Avatar>\n            </motion.div>\n          </TooltipTrigger>\n          <TooltipContent className=\"z-50\" side=\"top\">\n            {avatar.name}\n          </TooltipContent>\n        </Tooltip>\n      ))}\n\n      {hiddenCount > 0 && (\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <motion.div\n              animate={{ scale: 1, opacity: 1, y: 0 }}\n              className={cn(countBadgeVariants({ size }))}\n              initial={{ scale: 0, opacity: 0, y: 20 }}\n              style={{\n                zIndex: 1,\n              }}\n              whileHover={{\n                scale: 1.1,\n                y: -8,\n                zIndex: 100,\n                transition: {\n                  type: \"spring\",\n                  stiffness: 400,\n                  damping: 25,\n                },\n              }}\n            >\n              +{hiddenCount}\n            </motion.div>\n          </TooltipTrigger>\n          <TooltipContent className=\"z-50\" side=\"top\">\n            {hiddenCount} more {hiddenCount === 1 ? \"person\" : \"people\"}\n          </TooltipContent>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport {\n  AnimatedAvatarStack,\n  avatarStackVariants,\n  avatarVariants,\n  countBadgeVariants,\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}