{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "type": "registry:ui",
  "title": "Badge",
  "description": "A badge component for React Native applications.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/badge/badge.tsx",
      "content": "import * as React from \"react\";\nimport { View, Text, Pressable, ViewStyle } from \"react-native\";\nimport { cn } from \"@/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nconst badgeVariants = cva(\n  \"flex-row items-center justify-center rounded-full px-2.5 py-1\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary\",\n        secondary: \"bg-secondary\",\n        destructive: \"bg-destructive\",\n        outline: \"border border-input bg-transparent\",\n      },\n      size: {\n        default: \"h-8 px-3\",\n        sm: \"h-6 px-2.5\",\n        lg: \"h-10 px-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nexport interface BadgeProps\n  extends VariantProps<typeof badgeVariants> {\n  className?: string;\n  style?: ViewStyle;\n  children: React.ReactNode;\n  onPress?: () => void;\n  accessibilityLabel?: string;\n}\n\nfunction Badge({\n  className,\n  variant,\n  size,\n  style,\n  children,\n  onPress,\n  accessibilityLabel,\n}: BadgeProps) {\n  const getTextStyle = () => {\n    let textStyle = \"font-medium\";\n\n    // Adjust text size based on badge size\n    if (size === \"lg\") {\n      textStyle = cn(textStyle, \"text-sm\");\n    } else if (size === \"sm\") {\n      textStyle = cn(textStyle, \"text-xs\");\n    } else {\n      textStyle = cn(textStyle, \"text-xs\");\n    }\n\n    // Adjust text color based on variant\n    if (variant === \"default\") {\n      textStyle = cn(textStyle, \"text-primary-foreground\");\n    } else if (variant === \"secondary\") {\n      textStyle = cn(textStyle, \"text-secondary-foreground\");\n    } else if (variant === \"destructive\") {\n      textStyle = cn(textStyle, \"text-destructive-foreground\");\n    } else if (variant === \"outline\") {\n      textStyle = cn(textStyle, \"text-foreground\");\n    }\n\n    return textStyle;\n  };\n\n  const content = (\n    <View className={cn(badgeVariants({ variant, size, className }))} style={style}>\n      {typeof children === 'string' ? (\n        <Text\n          className={getTextStyle()}\n          numberOfLines={1}\n        >\n          {children}\n        </Text>\n      ) : (\n        children\n      )}\n    </View>\n  );\n\n  if (onPress) {\n    return (\n      <Pressable\n        onPress={onPress}\n        accessibilityRole=\"button\"\n        accessibilityLabel={accessibilityLabel || (typeof children === 'string' ? children : undefined)}\n      >\n        {({ pressed }) => (\n          <View style={{ opacity: pressed ? 0.7 : 1 }}>\n            {content}\n          </View>\n        )}\n      </Pressable>\n    );\n  }\n\n  return content;\n}\n\nBadge.displayName = \"Badge\";\n\nexport { Badge, badgeVariants }; ",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import { Badge } from \"@/components/ui/badge\";\nimport React from \"react\";\n\nexport default function BadgeExample() {\n\n    return (\n        <Badge variant=\"default\" size=\"default\">\n            Default\n        </Badge>\n    );\n}\n",
  "customPreview": "import { Badge } from \"@/components/ui/badge\";\nimport { Feather } from \"@expo/vector-icons\";\nimport { useColorScheme } from \"nativewind\";\nimport React from \"react\";\nimport { Alert, ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function BadgeExample() {\n    const { colorScheme } = useColorScheme();\n    const isDark = colorScheme === \"dark\";\n\n    return (\n        <>\n            <SafeAreaView className=\"flex-1 bg-background\" edges={[\"bottom\"]}>\n                <ScrollView className=\"px-5 py-5\">\n                    <View className=\"mb-6\">\n                        <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n                            Badge\n                        </Text>\n                        <Text className=\"text-base mb-4 text-muted-foreground\">\n                            Displays a status or notification count in a compact format\n                        </Text>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Badge Variants\n                        </Text>\n                        <View className=\"flex-row flex-wrap gap-4\">\n                            <Badge variant=\"default\">Default</Badge>\n                            <Badge variant=\"secondary\">Secondary</Badge>\n                            <Badge variant=\"destructive\">Destructive</Badge>\n                            <Badge variant=\"outline\">Outline</Badge>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Badge Sizes\n                        </Text>\n                        <View className=\"flex-row items-center gap-4\">\n                            <Badge variant=\"default\" size=\"sm\">\n                                Small\n                            </Badge>\n                            <Badge variant=\"default\" size=\"default\">\n                                Default\n                            </Badge>\n                            <Badge variant=\"default\" size=\"lg\">\n                                Large\n                            </Badge>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            With Icons\n                        </Text>\n                        <View className=\"flex-row items-center gap-4\">\n                            <Badge variant=\"default\" size=\"default\">\n                                <View className=\"flex-row items-center\">\n                                    <Feather\n                                        name=\"check\"\n                                        size={14}\n                                        className=\"color-primary mr-4\"\n                                    />\n                                    <Text className=\"text-xs font-medium text-primary-foreground\">\n                                        Verified\n                                    </Text>\n                                </View>\n                            </Badge>\n                            <Badge variant=\"default\" size=\"default\">\n                                <View className=\"flex-row items-center\">\n                                    <Text className=\"text-xs font-medium text-primary-foreground\">\n                                        Delete\n                                    </Text>\n                                    <Feather\n                                        name=\"x\"\n                                        size={14}\n                                        onPress={() => Alert.alert(\"Badge Clicked\", \"You clicked the delete badge\")}\n                                        color={isDark ? \"#171717\" : \"white\"}\n                                        style={{ marginLeft: 4 }}\n                                    />\n                                </View>\n                            </Badge>\n                            <Badge variant=\"secondary\" size=\"default\">\n                                <View className=\"flex-row items-center\">\n                                    <Feather\n                                        name=\"star\"\n                                        size={14}\n                                        color={isDark ? \"white\" : \"#171717\"}\n                                        style={{ marginRight: 4 }}\n                                    />\n                                    <Text className=\"text-xs font-medium text-secondary-foreground\">\n                                        Featured\n                                    </Text>\n                                </View>\n                            </Badge>\n                            <Badge variant=\"destructive\" size=\"default\">\n                                <View className=\"flex-row items-center\">\n                                    <Feather\n                                        name=\"alert-circle\"\n                                        size={14}\n                                        color={isDark ? \"white\" : \"#171717\"}\n                                        style={{ marginRight: 4 }}\n                                    />\n                                    <Text className=\"text-xs font-medium text-destructive-foreground\">\n                                        Alert\n                                    </Text>\n                                </View>\n                            </Badge>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Interactive Badges\n                        </Text>\n                        <View className=\"flex-row flex-wrap gap-4\">\n                            <Badge\n                                variant=\"default\"\n                                onPress={() =>\n                                    Alert.alert(\"Badge Clicked\", \"You clicked the default badge\")\n                                }\n                            >\n                                Click me\n                            </Badge>\n                            <Badge\n                                variant=\"secondary\"\n                                onPress={() =>\n                                    Alert.alert(\n                                        \"Badge Clicked\",\n                                        \"You clicked the secondary badge\"\n                                    )\n                                }\n                            >\n                                Tap here\n                            </Badge>\n                            <Badge\n                                variant=\"destructive\"\n                                onPress={() =>\n                                    Alert.alert(\n                                        \"Badge Clicked\",\n                                        \"You clicked the destructive badge\"\n                                    )\n                                }\n                            >\n                                Delete\n                            </Badge>\n                            <Badge\n                                variant=\"outline\"\n                                onPress={() =>\n                                    Alert.alert(\"Badge Clicked\", \"You clicked the outline badge\")\n                                }\n                            >\n                                More info\n                            </Badge>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Notification Badges\n                        </Text>\n                        <View className=\"flex-row items-center gap-8\">\n                            <View className=\"items-center\">\n                                <Badge variant=\"destructive\" className=\"h-5 w-5 mb-2\">\n                                    3\n                                </Badge>\n                                <Text className=\"text-sm text-muted-foreground\">Messages</Text>\n                            </View>\n                            <View className=\"items-center\">\n                                <Badge variant=\"default\" className=\"h-5 w-5 mb-2\">\n                                    12\n                                </Badge>\n                                <Text className=\"text-sm text-muted-foreground\">\n                                    Notifications\n                                </Text>\n                            </View>\n                            <View className=\"items-center\">\n                                <Badge variant=\"secondary\" className=\"h-5 w-5 mb-2\">\n                                    5+\n                                </Badge>\n                                <Text className=\"text-sm text-muted-foreground\">Updates</Text>\n                            </View>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Status Badges\n                        </Text>\n                        <View className=\"gap-4\">\n                            <View className=\"flex-row items-center\">\n                                <Badge className=\"bg-green-500 text-white mr-2\">Online</Badge>\n                                <Text className=\"text-foreground\">User is available</Text>\n                            </View>\n                            <View className=\"flex-row items-center\">\n                                <Badge className=\"bg-yellow-500 text-white mr-2\">Away</Badge>\n                                <Text className=\"text-foreground\">User is inactive</Text>\n                            </View>\n                            <View className=\"flex-row items-center\">\n                                <Badge className=\"bg-gray-400 text-white mr-2\">Offline</Badge>\n                                <Text className=\"text-foreground\">User is disconnected</Text>\n                            </View>\n                        </View>\n                    </View>\n                </ScrollView>\n            </SafeAreaView>\n        </>\n    );\n}\n"
}