{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chat-list-item",
  "type": "registry:ui",
  "title": "Chat List Item",
  "description": "Conversation row: avatar, name, preview, time, unread badge.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/utils.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/text.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/theme.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/avatar.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/badge.json"
  ],
  "files": [
    {
      "path": "registry/shared/ui/chat-list-item.tsx",
      "type": "registry:ui",
      "target": "components/ui/chat-list-item.tsx",
      "content": "import { Pressable, View, type ViewProps } from 'react-native';\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Badge } from '@/components/ui/badge';\nimport { Text } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\n\nexport interface ChatListItemProps extends ViewProps {\n  name: string;\n  /** Last message preview. */\n  message?: string;\n  /** Right-aligned timestamp text. */\n  time?: string;\n  unreadCount?: number;\n  /** Avatar image uri. */\n  avatarUrl?: string;\n  /** Fallback text (initials). */\n  fallback?: string;\n  /** Online indicator dot. */\n  online?: boolean;\n  /** Extra classes for the online dot (e.g. `bg-sky-500`). */\n  presenceClassName?: string;\n  onPress?: () => void;\n  className?: string;\n}\n\nexport function ChatListItem({\n  name,\n  message,\n  time,\n  unreadCount = 0,\n  avatarUrl,\n  fallback,\n  online,\n  presenceClassName,\n  onPress,\n  className,\n  ...props\n}: ChatListItemProps) {\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      onPress={onPress}\n      className=\"active:bg-accent\"\n    >\n      <View\n        className={cn(\n          'min-h-16 flex-row items-center gap-3 px-4 py-2.5',\n          className\n        )}\n        {...props}\n      >\n        <View>\n          <Avatar>\n            {avatarUrl && <AvatarImage source={{ uri: avatarUrl }} />}\n            <AvatarFallback>\n              {fallback ?? name.slice(0, 2).toUpperCase()}\n            </AvatarFallback>\n          </Avatar>\n          {online && (\n            <View\n              className={cn(\n                'absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full border-2 border-background bg-green-500',\n                presenceClassName\n              )}\n            />\n          )}\n        </View>\n        <View className=\"flex-1\">\n          <View className=\"flex-row items-baseline justify-between\">\n            <Text\n              className=\"flex-1 text-base font-medium text-foreground\"\n              numberOfLines={1}\n            >\n              {name}\n            </Text>\n            {time && (\n              <Text className=\"ml-2 text-xs text-muted-foreground\">{time}</Text>\n            )}\n          </View>\n          <View className=\"mt-0.5 flex-row items-center justify-between\">\n            <Text\n              className=\"flex-1 text-sm text-muted-foreground\"\n              numberOfLines={1}\n            >\n              {message}\n            </Text>\n            {unreadCount > 0 && (\n              <Badge className=\"ml-2 h-5 min-w-5 px-1.5\">\n                {unreadCount > 99 ? '99+' : unreadCount}\n              </Badge>\n            )}\n          </View>\n        </View>\n      </View>\n    </Pressable>\n  );\n}\n"
    }
  ]
}