{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "separator",
  "type": "registry:ui",
  "title": "Separator",
  "description": "A separator component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/separator/separator.tsx",
      "content": "import React from \"react\";\nimport { View } from \"react-native\";\nimport { cn } from \"@/lib/utils\";\n\ninterface SeparatorProps {\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n}: SeparatorProps) {\n  return (\n    <View\n      className={cn(\n        \"bg-border\",\n        orientation === \"horizontal\" ? \"h-px w-full\" : \"h-full w-px\",\n        className\n      )}\n    />\n  );\n}\n\nexport { Separator };\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import { Separator } from \"@/components/ui/separator\";\nimport * as React from \"react\";\nimport { Text, View } from \"react-native\";\n\nexport function SeparatorDemo() {\n    return (\n        <View className=\"w-full\">\n            <Text className=\"text-base font-medium text-foreground\">Section 1</Text>\n            <Separator className=\"my-4\" />\n            <Text className=\"text-base text-foreground\">Section 2</Text>\n        </View>\n    );\n}\n",
  "customPreview": "import { Separator } from \"@/components/ui/separator\";\nimport * as React from \"react\";\nimport { ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function SeparatorExample() {\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                            Separator\n                        </Text>\n                        <Text className=\"text-base mb-6 text-muted-foreground\">\n                            A visual divider between content areas.\n                        </Text>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Horizontal Separator\n                        </Text>\n                        <View className=\"space-y-3\">\n                            <Text className=\"text-base text-foreground\">\n                                Above the separator\n                            </Text>\n                            <Separator className=\"my-4\" />\n                            <Text className=\"text-base text-foreground\">\n                                Below the separator\n                            </Text>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Vertical Separator\n                        </Text>\n                        <View className=\"flex-row h-16 items-center\">\n                            <Text className=\"text-base text-foreground\">Blog</Text>\n                            <View className=\"w-8 items-center\">\n                                <Separator orientation=\"vertical\" />\n                            </View>\n                            <Text className=\"text-base text-foreground\">Docs</Text>\n                            <View className=\"w-8 items-center\">\n                                <Separator orientation=\"vertical\" />\n                            </View>\n                            <Text className=\"text-base text-foreground\">Source</Text>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            With Custom Styling\n                        </Text>\n                        <View className=\"space-y-3\">\n                            <Text className=\"text-base text-foreground\">\n                                Default separator\n                            </Text>\n                            <Separator className=\"my-4\" />\n                            <Text className=\"text-base text-foreground\">\n                                Custom color and thickness\n                            </Text>\n                            <Separator className=\"my-4 h-0.5 bg-primary\" />\n                            <Text className=\"text-base text-foreground\">\n                                Custom width separator\n                            </Text>\n                            <Separator className=\"my-4 w-1/2\" />\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            In Card Layout\n                        </Text>\n                        <View className=\"border border-border rounded-lg p-4\">\n                            <Text className=\"text-lg font-medium text-foreground\">\n                                Card Title\n                            </Text>\n                            <Separator className=\"my-4\" />\n                            <Text className=\"text-base text-muted-foreground\">\n                                Card content goes here with a separator to visually divide\n                                sections.\n                            </Text>\n                        </View>\n                    </View>\n                </ScrollView>\n            </SafeAreaView>\n        </>\n    );\n}\n"
}