{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitives-animate-avatar-group",
  "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": [
    "@odysseyui/primitives-animate-tooltip"
  ],
  "files": [
    {
      "path": "registry/primitives/animate/avatar-group/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { HTMLMotionProps, motion, type Transition } from 'motion/react';\n\nimport {\n  TooltipProvider,\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipArrow,\n  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipContentProps,\n  type TooltipArrowProps,\n} from '@/components/odyssey/primitives/animate/tooltip';\n\ntype AvatarProps = Omit<HTMLMotionProps<'div'>, 'translate'> & {\n  children: React.ReactNode;\n  zIndex: number;\n  translate?: string | number;\n} & Omit<TooltipProps, 'children'>;\n\nfunction AvatarContainer({\n  zIndex,\n  translate,\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n  ...props\n}: AvatarProps) {\n  return (\n    <Tooltip\n      side={side}\n      sideOffset={sideOffset}\n      align={align}\n      alignOffset={alignOffset}\n    >\n      <TooltipTrigger asChild>\n        <motion.div\n          data-slot=\"avatar-container\"\n          initial=\"initial\"\n          whileHover=\"hover\"\n          whileTap=\"hover\"\n          style={{ position: 'relative', zIndex }}\n        >\n          <motion.div\n            variants={{\n              initial: { y: 0 },\n              hover: { y: translate },\n            }}\n            {...props}\n          />\n        </motion.div>\n      </TooltipTrigger>\n    </Tooltip>\n  );\n}\n\ntype AvatarGroupProps = Omit<React.ComponentProps<'div'>, 'translate'> & {\n  children: React.ReactElement[];\n  invertOverlap?: boolean;\n  translate?: string | number;\n  transition?: Transition;\n  tooltipTransition?: Transition;\n} & Omit<TooltipProviderProps, 'children'> &\n  Omit<TooltipProps, 'children'>;\n\nfunction AvatarGroup({\n  ref,\n  children,\n  id,\n  transition = { type: 'spring', stiffness: 300, damping: 17 },\n  invertOverlap = false,\n  translate = '-30%',\n  openDelay = 0,\n  closeDelay = 0,\n  side = 'top',\n  sideOffset = 25,\n  align = 'center',\n  alignOffset = 0,\n  tooltipTransition = { type: 'spring', stiffness: 300, damping: 35 },\n  style,\n  ...props\n}: AvatarGroupProps) {\n  return (\n    <TooltipProvider\n      id={id}\n      openDelay={openDelay}\n      closeDelay={closeDelay}\n      transition={tooltipTransition}\n    >\n      <div\n        ref={ref}\n        data-slot=\"avatar-group\"\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          ...style,\n        }}\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            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            {child}\n          </AvatarContainer>\n        ))}\n      </div>\n    </TooltipProvider>\n  );\n}\n\ntype AvatarGroupTooltipProps = TooltipContentProps;\n\nfunction AvatarGroupTooltip(props: AvatarGroupTooltipProps) {\n  return <TooltipContent {...props} />;\n}\n\ntype AvatarGroupTooltipArrowProps = TooltipArrowProps;\n\nfunction AvatarGroupTooltipArrow(props: AvatarGroupTooltipArrowProps) {\n  return <TooltipArrow {...props} />;\n}\n\nexport {\n  AvatarGroup,\n  AvatarGroupTooltip,\n  AvatarGroupTooltipArrow,\n  type AvatarGroupProps,\n  type AvatarGroupTooltipProps,\n  type AvatarGroupTooltipArrowProps,\n};\n",
      "type": "registry:ui",
      "target": "components/odysseyui/primitives/animate/avatar-group.tsx"
    }
  ],
  "type": "registry:ui"
}