{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-group",
  "type": "registry:ui",
  "title": "Avatar Group",
  "description": "An animated avatar group that displays overlapping user images and smoothly shifts each avatar forward on hover to highlight it.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://animate-ui.com/r/tooltip"
  ],
  "files": [
    {
      "path": "registry/components/avatar-group/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Transition } from 'motion/react';\n\nimport { cn } from '@/lib/utils';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n  type TooltipProps,\n  type TooltipContentProps,\n} from '@/components/animate-ui/components/tooltip';\n\ntype AvatarProps = TooltipProps & {\n  children: React.ReactNode;\n  zIndex: number;\n  transition: Transition;\n  translate: string | number;\n};\n\nfunction AvatarContainer({\n  children,\n  zIndex,\n  transition,\n  translate,\n  ...props\n}: AvatarProps) {\n  return (\n    <Tooltip {...props}>\n      <TooltipTrigger>\n        <motion.div\n          data-slot=\"avatar-container\"\n          initial=\"initial\"\n          whileHover=\"hover\"\n          whileTap=\"hover\"\n          className=\"relative\"\n          style={{ zIndex }}\n        >\n          <motion.div\n            variants={{\n              initial: { y: 0 },\n              hover: { y: translate },\n            }}\n            transition={transition}\n          >\n            {children}\n          </motion.div>\n        </motion.div>\n      </TooltipTrigger>\n    </Tooltip>\n  );\n}\n\ntype AvatarGroupTooltipProps = TooltipContentProps;\n\nfunction AvatarGroupTooltip(props: AvatarGroupTooltipProps) {\n  return <TooltipContent {...props} />;\n}\n\ntype AvatarGroupProps = Omit<React.ComponentProps<'div'>, 'translate'> & {\n  children: React.ReactElement[];\n  transition?: Transition;\n  invertOverlap?: boolean;\n  translate?: string | number;\n  tooltipProps?: Omit<TooltipProps, 'children'>;\n};\n\nfunction AvatarGroup({\n  ref,\n  children,\n  className,\n  transition = { type: 'spring', stiffness: 300, damping: 17 },\n  invertOverlap = false,\n  translate = '-30%',\n  tooltipProps = { side: 'top', sideOffset: 24 },\n  ...props\n}: AvatarGroupProps) {\n  return (\n    <TooltipProvider openDelay={0} closeDelay={0}>\n      <div\n        ref={ref}\n        data-slot=\"avatar-group\"\n        className={cn('flex flex-row -space-x-2 items-center h-8', className)}\n        {...props}\n      >\n        {children?.map((child, index) => (\n          <AvatarContainer\n            key={index}\n            zIndex={\n              invertOverlap ? React.Children.count(children) - index : index\n            }\n            transition={transition}\n            translate={translate}\n            {...tooltipProps}\n          >\n            {child}\n          </AvatarContainer>\n        ))}\n      </div>\n    </TooltipProvider>\n  );\n}\n\nexport {\n  AvatarGroup,\n  AvatarGroupTooltip,\n  type AvatarGroupProps,\n  type AvatarGroupTooltipProps,\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/components/avatar-group.tsx"
    }
  ]
}