{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"avatar-stack","type":"registry:ui","title":"avatar-stack","description":"Avatar Stack is a component that allows you to stack and overlap avatars.","author":"Hayden Bleasel <hello@haydenbleasel.com>","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"import { Children, type ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type AvatarStackProps = {\n  children: ReactNode;\n  className?: string;\n  animate?: boolean;\n  size?: number;\n};\n\nexport const AvatarStack = ({\n  children,\n  className,\n  animate = false,\n  size = 40,\n  ...props\n}: AvatarStackProps) => (\n  <div\n    className={cn(\n      \"-space-x-1 flex items-center\",\n      animate && \"hover:space-x-0 [&>*]:transition-all\",\n      className\n    )}\n    {...props}\n  >\n    {Children.map(children, (child, index) => {\n      if (!child) {\n        return null;\n      }\n\n      return (\n        <div\n          className={cn(\n            \"size-full shrink-0 overflow-hidden rounded-full\",\n            '[&_[data-slot=\"avatar\"]]:size-full',\n            className\n          )}\n          style={{\n            width: size,\n            height: size,\n            maskImage: index\n              ? `radial-gradient(circle ${size / 2}px at -${size / 4 + size / 10}px 50%, transparent 99%, white 100%)`\n              : \"\",\n          }}\n        >\n          {child}\n        </div>\n      );\n    })}\n  </div>\n);\n","target":"components/kibo-ui/avatar-stack/index.tsx"}],"css":{}}