{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-group",
  "title": "Avatar group",
  "description": "overlapping avatars + \"+N\"",
  "dependencies": [],
  "registryDependencies": [
    "@kit-native/avatar",
    "@kit-native/lib-utils",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/avatar-group.tsx",
      "content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Text } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\nimport { View } from 'react-native';\n\nexport type AvatarGroupItem = { id: string; initials: string; uri?: string; alt?: string };\n\ntype Props = { items: AvatarGroupItem[]; max?: number; size?: number; className?: string };\n\n/** Overlapping avatars with a \"+N\" overflow chip — participants, members, shared-with. */\nexport function AvatarGroup({ items, max = 4, size = 32, className }: Props) {\n  const shown = items.slice(0, max);\n  const rest = items.length - shown.length;\n  return (\n    <View className={cn('flex-row items-center', className)}>\n      {shown.map((a, i) => (\n        <Avatar key={a.id} alt={a.alt ?? a.initials} className=\"border-background border-2\" style={{ width: size, height: size, marginLeft: i === 0 ? 0 : -size * 0.3 }}>\n          {a.uri ? <AvatarImage source={{ uri: a.uri }} /> : null}\n          <AvatarFallback>\n            <Text className=\"text-xs\">{a.initials}</Text>\n          </AvatarFallback>\n        </Avatar>\n      ))}\n      {rest > 0 ? (\n        <View className=\"bg-muted border-background items-center justify-center rounded-full border-2\" style={{ width: size, height: size, marginLeft: -size * 0.3 }}>\n          <Text className=\"text-muted-foreground text-xs font-medium\">+{rest}</Text>\n        </View>\n      ) : null}\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/avatar-group.tsx"
    }
  ],
  "meta": {
    "exports": [
      "AvatarGroup"
    ],
    "api": "<AvatarGroup items={[{id,initials,uri?}]} max? size? />"
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "data"
  ],
  "type": "registry:component"
}