{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "type": "registry:ui",
  "title": "Alert",
  "description": "A alert component for React Native applications.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/alert/alert.tsx",
      "content": "import * as React from \"react\";\nimport { View, Text } from \"react-native\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst alertVariants = cva(\"w-full rounded-xl border p-4 mb-4\", {\n  variants: {\n    variant: {\n      default: \"bg-background border-input\",\n      destructive:\n        \"border-destructive/50 bg-destructive/10 text-destructive dark:border-destructive\",\n      success:\n        \"border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-500 dark:border-green-500\",\n      warning:\n        \"border-yellow-500/50 bg-yellow-500/10 text-yellow-700 dark:text-yellow-500 dark:border-yellow-500\",\n      info: \"border-blue-500/50 bg-blue-500/10 text-blue-700 dark:text-blue-500 dark:border-blue-500\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\ninterface AlertProps\n  extends React.ComponentPropsWithoutRef<typeof View>,\n  VariantProps<typeof alertVariants> {\n  icon?: React.ReactNode;\n}\n\nfunction Alert({ className, variant, icon, children, ...props }: AlertProps) {\n  return (\n    <View\n      className={cn(alertVariants({ variant }), className)}\n      accessibilityRole=\"alert\"\n      {...props}\n    >\n      {icon && <View className=\"mb-2\">{icon}</View>}\n      <View className={cn(icon ? \"pl-0\" : \"pl-0\")}>{children}</View>\n    </View>\n  );\n}\n\ninterface AlertTitleProps extends React.ComponentPropsWithoutRef<typeof Text> { }\n\nfunction AlertTitle({ className, ...props }: AlertTitleProps) {\n  return (\n    <Text\n      className={cn(\n        \"text-lg font-semibold leading-none tracking-tight text-foreground mb-2\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\ninterface AlertDescriptionProps\n  extends React.ComponentPropsWithoutRef<typeof Text> { }\n\nfunction AlertDescription({ className, ...props }: AlertDescriptionProps) {\n  return (\n    <Text\n      className={cn(\"text-base text-foreground opacity-90\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Alert,\n  AlertTitle,\n  AlertDescription,\n  type AlertProps,\n  type AlertTitleProps,\n  type AlertDescriptionProps,\n};\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import {\n    Alert,\n    AlertDescription,\n    AlertTitle\n} from \"@/components/ui/alert\";\nimport * as React from \"react\";\nimport { View } from \"react-native\";\n\nexport default function AlertExampleScreen() {\n    return (\n        <View className=\"mb-8\">\n            <Alert>\n                <AlertTitle>Information</AlertTitle>\n                <AlertDescription>\n                    This is a default alert with just text content.\n                </AlertDescription>\n            </Alert>\n        </View>\n    );\n}\n",
  "customPreview": "import {\n    Alert,\n    AlertDescription,\n    AlertTitle\n} from \"@/components/ui/alert\";\nimport { Feather } from \"@expo/vector-icons\";\nimport * as React from \"react\";\nimport { ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function AlertExampleScreen() {\n    return (\n        <>\n            <SafeAreaView className=\"flex-1 bg-background\" edges={[\"bottom\"]}>\n                <ScrollView className=\"p-4\">\n                    <View className=\"mb-6\">\n                        <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n                            Alert\n                        </Text>\n                        <Text className=\"text-base mb-6 text-muted-foreground\">\n                            Displays important messages or notifications to users.\n                        </Text>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Default Alert\n                        </Text>\n                        <Alert>\n                            <AlertTitle>Information</AlertTitle>\n                            <AlertDescription>\n                                This is a default alert with just text content.\n                            </AlertDescription>\n                        </Alert>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            With Icon\n                        </Text>\n                        <Alert\n                            icon={<Feather name=\"bell\" size={24} className=\"color-primary\" />}\n                        >\n                            <AlertTitle>Notification Alert</AlertTitle>\n                            <AlertDescription>\n                                You have new notifications waiting for you.\n                            </AlertDescription>\n                        </Alert>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Alert Variants\n                        </Text>\n\n                        <Alert\n                            variant=\"destructive\"\n                            icon={<Feather name=\"alert-circle\" size={24} color=\"#ef4444\" />}\n                            className=\"mb-4\"\n                        >\n                            <AlertTitle>Error Alert</AlertTitle>\n                            <AlertDescription>\n                                There was a problem with your request.\n                            </AlertDescription>\n                        </Alert>\n\n                        <Alert\n                            variant=\"success\"\n                            icon={<Feather name=\"check-circle\" size={24} color=\"#22c55e\" />}\n                            className=\"mb-4\"\n                        >\n                            <AlertTitle>Success Alert</AlertTitle>\n                            <AlertDescription>\n                                Your changes have been saved successfully.\n                            </AlertDescription>\n                        </Alert>\n\n                        <Alert\n                            variant=\"warning\"\n                            icon={<Feather name=\"alert-triangle\" size={24} color=\"#f59e0b\" />}\n                            className=\"mb-4\"\n                        >\n                            <AlertTitle>Warning Alert</AlertTitle>\n                            <AlertDescription>\n                                Your account subscription will expire soon.\n                            </AlertDescription>\n                        </Alert>\n\n                        <Alert\n                            variant=\"info\"\n                            icon={<Feather name=\"info\" size={24} color=\"#3b82f6\" />}\n                        >\n                            <AlertTitle>Information Alert</AlertTitle>\n                            <AlertDescription>\n                                A new update is available for your application.\n                            </AlertDescription>\n                        </Alert>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Without Title\n                        </Text>\n                        <Alert\n                            variant=\"default\"\n                            className=\"mb-4\"\n                        >\n                            <AlertDescription>\n                                This is an alert without a title, just showing a simple message.\n                            </AlertDescription>\n                        </Alert>\n\n                        <Alert\n                            variant=\"destructive\"\n                            icon={<Feather name=\"alert-circle\" size={24} color=\"#ef4444\" />}\n                        >\n                            <AlertDescription>\n                                This is an error alert without a title.\n                            </AlertDescription>\n                        </Alert>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Custom Styling\n                        </Text>\n                        <Alert\n                            className=\"border-purple-500/50 bg-purple-500/10 border-l-4\"\n                            icon={<Feather name=\"bell\" size={24} color=\"#9333ea\" />}\n                        >\n                            <AlertTitle className=\"text-purple-700 dark:text-purple-500\">\n                                Custom Alert\n                            </AlertTitle>\n                            <AlertDescription className=\"text-purple-700/90 dark:text-purple-500/90\">\n                                This alert has custom styling applied.\n                            </AlertDescription>\n                        </Alert>\n                    </View>\n                </ScrollView>\n            </SafeAreaView>\n        </>\n    );\n}\n"
}