{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb",
  "type": "registry:ui",
  "title": "Breadcrumb",
  "description": "A breadcrumb component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/breadcrumb/breadcrumb.tsx",
      "content": "import * as React from \"react\";\nimport { View, Text, Pressable, GestureResponderEvent } from \"react-native\";\nimport { Feather } from \"@expo/vector-icons\";\nimport { cn } from \"@/lib/utils\";\n\nconst Breadcrumb = React.forwardRef<\n  View,\n  React.ComponentPropsWithoutRef<typeof View> & {\n    separator?: React.ReactNode;\n  }\n>(({ style, separator, ...props }, ref) => (\n  <View\n    ref={ref}\n    accessibilityRole=\"header\"\n    accessibilityLabel=\"breadcrumb\"\n    style={style}\n    {...props}\n  />\n));\n\nBreadcrumb.displayName = \"Breadcrumb\";\n\nconst BreadcrumbList = React.forwardRef<\n  View,\n  React.ComponentPropsWithoutRef<typeof View>\n>(({ className, style, ...props }, ref) => (\n  <View\n    ref={ref}\n    style={style}\n    className={cn(\"flex-row flex-wrap items-center gap-2 md:gap-3\", className)}\n    {...props}\n  />\n));\n\nBreadcrumbList.displayName = \"BreadcrumbList\";\n\nconst BreadcrumbItem = React.forwardRef<\n  View,\n  React.ComponentPropsWithoutRef<typeof View>\n>(({ className, style, ...props }, ref) => (\n  <View\n    ref={ref}\n    style={style}\n    className={cn(\"flex-row items-center gap-2\", className)}\n    {...props}\n  />\n));\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\";\n\ninterface BreadcrumbLinkProps\n  extends React.ComponentPropsWithoutRef<typeof Pressable> {\n  asChild?: boolean;\n  href?: string;\n  active?: boolean;\n}\n\nconst BreadcrumbLink = React.forwardRef<View, BreadcrumbLinkProps>(\n  (\n    { asChild, className, style, href, active, onPress, children, ...props },\n    ref\n  ) => {\n    const handlePress = (e: GestureResponderEvent) => {\n      if (href) {\n        console.log(`Navigation to: ${href}`);\n      }\n      if (onPress) {\n        onPress(e);\n      }\n    };\n\n    return (\n      <Pressable\n        ref={ref}\n        style={style}\n        className={cn(\n          \"py-2 active:opacity-70\",\n          active ? \"text-foreground font-medium\" : \"text-muted-foreground\",\n          className\n        )}\n        onPress={handlePress}\n        {...props}\n      >\n        {typeof children === \"string\" ? (\n          <Text\n            className={cn(\n              active ? \"text-foreground font-medium\" : \"text-muted-foreground\",\n              \"text-base\"\n            )}\n          >\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </Pressable>\n    );\n  }\n);\n\nBreadcrumbLink.displayName = \"BreadcrumbLink\";\n\nconst BreadcrumbPage = React.forwardRef<\n  Text,\n  React.ComponentPropsWithoutRef<typeof Text>\n>(({ className, style, ...props }, ref) => (\n  <Text\n    ref={ref}\n    style={style}\n    accessibilityRole=\"text\"\n    accessibilityState={{ disabled: true }}\n    className={cn(\"font-medium text-foreground text-base\", className)}\n    {...props}\n  />\n));\n\nBreadcrumbPage.displayName = \"BreadcrumbPage\";\n\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  style,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof View>) => (\n  <View\n    accessibilityRole=\"none\"\n    accessibilityLabel=\"separator\"\n    style={style}\n    className={cn(\"mx-0.5\", className)}\n    {...props}\n  >\n    {children ?? <Feather name=\"chevron-right\" size={20} color=\"#888\" />}\n  </View>\n);\n\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\";\n\nconst BreadcrumbEllipsis = ({\n  className,\n  style,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof View>) => (\n  <View\n    accessibilityRole=\"none\"\n    accessibilityLabel=\"more\"\n    style={style}\n    className={cn(\"flex items-center justify-center py-1\", className)}\n    {...props}\n  >\n    <Feather name=\"more-horizontal\" size={20} color=\"#888\" />\n    <Text className=\"sr-only\">More</Text>\n  </View>\n);\n\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\";\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import * as React from \"react\";\nimport {\n    Breadcrumb,\n    BreadcrumbEllipsis,\n    BreadcrumbItem,\n    BreadcrumbLink,\n    BreadcrumbList,\n    BreadcrumbPage,\n    BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\n\nexport default function BreadcrumbExample() {\n\n    return (\n        <Breadcrumb>\n            <BreadcrumbList>\n                <BreadcrumbItem>\n                    <BreadcrumbLink href=\"/home\">\n                        Home\n                    </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator />\n                <BreadcrumbItem>\n                    <BreadcrumbLink href=\"/components\">\n                        Components\n                    </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator />\n                <BreadcrumbItem>\n                    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n                </BreadcrumbItem>\n            </BreadcrumbList>\n        </Breadcrumb>\n    );\n}\n",
  "customPreview": "import * as React from \"react\";\nimport { Alert, KeyboardAvoidingView, Platform, ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nimport {\n    Breadcrumb,\n    BreadcrumbEllipsis,\n    BreadcrumbItem,\n    BreadcrumbLink,\n    BreadcrumbList,\n    BreadcrumbPage,\n    BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\n\nexport default function BreadcrumbExample() {\n    // Simple custom navigation function that you could replace with your actual navigation logic\n    const handleNavigation = (path: string) => {\n        Alert.alert(\"Navigation\", `Navigating to: ${path}`);\n        // Your navigation code here, for example:\n        // router.push(path);\n    };\n\n    return (\n        <>\n            <SafeAreaView className=\"flex-1 bg-background\" edges={[\"bottom\"]}>\n                <KeyboardAvoidingView\n                    behavior={Platform.OS === \"ios\" ? \"padding\" : \"height\"}\n                    style={{ flex: 1 }}\n                    keyboardVerticalOffset={100}\n                >\n                    <ScrollView className=\"p-4\">\n                        <View className=\"mb-6\">\n                            <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n                                Breadcrumb\n                            </Text>\n                            <Text className=\"text-base mb-6 text-muted-foreground\">\n                                A breadcrumb navigation pattern to help users navigate hierarchical paths.\n                            </Text>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Basic Breadcrumb\n                            </Text>\n                            <View className=\"px-1\">\n                                <Breadcrumb>\n                                    <BreadcrumbList>\n                                        <BreadcrumbItem>\n                                            <BreadcrumbLink href=\"/home\">\n                                                Home\n                                            </BreadcrumbLink>\n                                        </BreadcrumbItem>\n                                        <BreadcrumbSeparator />\n                                        <BreadcrumbItem>\n                                            <BreadcrumbLink href=\"/components\">\n                                                Components\n                                            </BreadcrumbLink>\n                                        </BreadcrumbItem>\n                                        <BreadcrumbSeparator />\n                                        <BreadcrumbItem>\n                                            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n                                        </BreadcrumbItem>\n                                    </BreadcrumbList>\n                                </Breadcrumb>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                With Custom Navigation\n                            </Text>\n                            <View className=\"px-1\">\n                                <Breadcrumb>\n                                    <BreadcrumbList>\n                                        <BreadcrumbItem>\n                                            <BreadcrumbLink\n                                                href=\"/dashboard\"\n                                                onPress={() => handleNavigation(\"/dashboard\")}\n                                            >\n                                                Dashboard\n                                            </BreadcrumbLink>\n                                        </BreadcrumbItem>\n                                        <BreadcrumbSeparator />\n                                        <BreadcrumbItem>\n                                            <BreadcrumbLink\n                                                href=\"/settings\"\n                                                onPress={() => handleNavigation(\"/settings\")}\n                                            >\n                                                Settings\n                                            </BreadcrumbLink>\n                                        </BreadcrumbItem>\n                                        <BreadcrumbSeparator />\n                                        <BreadcrumbItem>\n                                            <BreadcrumbPage>Profile</BreadcrumbPage>\n                                        </BreadcrumbItem>\n                                    </BreadcrumbList>\n                                </Breadcrumb>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                With Ellipsis\n                            </Text>\n                            <View className=\"px-1\">\n                                <Breadcrumb>\n                                    <BreadcrumbList>\n                                        <BreadcrumbItem>\n                                            <BreadcrumbLink href=\"/home\">\n                                                Home\n                                            </BreadcrumbLink>\n                                        </BreadcrumbItem>\n                                        <BreadcrumbSeparator />\n                                        <BreadcrumbItem>\n                                            <BreadcrumbEllipsis />\n                                        </BreadcrumbItem>\n                                        <BreadcrumbSeparator />\n                                        <BreadcrumbItem>\n                                            <BreadcrumbLink href=\"/components/breadcrumb\">\n                                                Breadcrumb\n                                            </BreadcrumbLink>\n                                        </BreadcrumbItem>\n                                        <BreadcrumbSeparator />\n                                        <BreadcrumbItem>\n                                            <BreadcrumbPage>Example</BreadcrumbPage>\n                                        </BreadcrumbItem>\n                                    </BreadcrumbList>\n                                </Breadcrumb>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Custom Separator\n                            </Text>\n                            <View className=\"px-1\">\n                                <Breadcrumb>\n                                    <BreadcrumbList>\n                                        <BreadcrumbItem>\n                                            <BreadcrumbLink href=\"/dashboard\">\n                                                Dashboard\n                                            </BreadcrumbLink>\n                                        </BreadcrumbItem>\n                                        <BreadcrumbSeparator>\n                                            <Text className=\"text-muted-foreground mx-1\">/</Text>\n                                        </BreadcrumbSeparator>\n                                        <BreadcrumbItem>\n                                            <BreadcrumbLink href=\"/settings\">\n                                                Settings\n                                            </BreadcrumbLink>\n                                        </BreadcrumbItem>\n                                        <BreadcrumbSeparator>\n                                            <Text className=\"text-muted-foreground mx-1\">/</Text>\n                                        </BreadcrumbSeparator>\n                                        <BreadcrumbItem>\n                                            <BreadcrumbPage>Profile</BreadcrumbPage>\n                                        </BreadcrumbItem>\n                                    </BreadcrumbList>\n                                </Breadcrumb>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Interactive Breadcrumb\n                            </Text>\n                            <View className=\"px-1\">\n                                <Breadcrumb>\n                                    <BreadcrumbList>\n                                        <BreadcrumbItem>\n                                            <BreadcrumbLink\n                                                href=\"/shop\"\n                                                onPress={() => console.log(\"Shop pressed\")}\n                                            >\n                                                Shop\n                                            </BreadcrumbLink>\n                                        </BreadcrumbItem>\n                                        <BreadcrumbSeparator />\n                                        <BreadcrumbItem>\n                                            <BreadcrumbLink\n                                                href=\"/shop/clothing\"\n                                                onPress={() => console.log(\"Clothing pressed\")}\n                                            >\n                                                Clothing\n                                            </BreadcrumbLink>\n                                        </BreadcrumbItem>\n                                        <BreadcrumbSeparator />\n                                        <BreadcrumbItem>\n                                            <BreadcrumbLink\n                                                href=\"/shop/clothing/t-shirts\"\n                                                onPress={() => console.log(\"T-Shirts pressed\")}\n                                            >\n                                                T-Shirts\n                                            </BreadcrumbLink>\n                                        </BreadcrumbItem>\n                                        <BreadcrumbSeparator />\n                                        <BreadcrumbItem>\n                                            <BreadcrumbPage>Summer Collection</BreadcrumbPage>\n                                        </BreadcrumbItem>\n                                    </BreadcrumbList>\n                                </Breadcrumb>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Responsive Breadcrumb\n                            </Text>\n                            <View className=\"px-1\">\n                                <Breadcrumb>\n                                    <BreadcrumbList>\n                                        <BreadcrumbItem className=\"md:flex hidden\">\n                                            <BreadcrumbLink href=\"/app\">\n                                                App\n                                            </BreadcrumbLink>\n                                        </BreadcrumbItem>\n                                        <BreadcrumbSeparator className=\"md:flex hidden\" />\n                                        <BreadcrumbItem className=\"md:flex hidden\">\n                                            <BreadcrumbLink href=\"/app/projects\">\n                                                Projects\n                                            </BreadcrumbLink>\n                                        </BreadcrumbItem>\n                                        <BreadcrumbSeparator className=\"md:flex hidden\" />\n                                        <BreadcrumbItem>\n                                            <BreadcrumbLink href=\"/app/projects/website\">\n                                                Website\n                                            </BreadcrumbLink>\n                                        </BreadcrumbItem>\n                                        <BreadcrumbSeparator />\n                                        <BreadcrumbItem>\n                                            <BreadcrumbPage>Design</BreadcrumbPage>\n                                        </BreadcrumbItem>\n                                    </BreadcrumbList>\n                                </Breadcrumb>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Custom Styled Breadcrumb\n                            </Text>\n                            <View className=\"px-1 py-3 bg-muted rounded-lg\">\n                                <Breadcrumb>\n                                    <BreadcrumbList className=\"gap-1\">\n                                        <BreadcrumbItem>\n                                            <BreadcrumbLink\n                                                className=\"bg-primary/10 px-3 py-1 rounded-md\"\n                                                href=\"/files\"\n                                            >\n                                                Files\n                                            </BreadcrumbLink>\n                                        </BreadcrumbItem>\n                                        <BreadcrumbSeparator />\n                                        <BreadcrumbItem>\n                                            <BreadcrumbLink\n                                                className=\"bg-primary/10 px-3 py-1 rounded-md\"\n                                                href=\"/files/documents\"\n                                            >\n                                                Documents\n                                            </BreadcrumbLink>\n                                        </BreadcrumbItem>\n                                        <BreadcrumbSeparator />\n                                        <BreadcrumbItem>\n                                            <BreadcrumbPage className=\"bg-primary/20 px-3 py-1 rounded-md\">\n                                                Report.pdf\n                                            </BreadcrumbPage>\n                                        </BreadcrumbItem>\n                                    </BreadcrumbList>\n                                </Breadcrumb>\n                            </View>\n                        </View>\n\n                        {/* Extra padding to ensure good scroll */}\n                        <View className=\"h-20\" />\n                    </ScrollView>\n                </KeyboardAvoidingView>\n            </SafeAreaView>\n        </>\n    );\n}\n"
}