{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "type": "registry:ui",
  "title": "Pagination",
  "description": "A pagination component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/pagination/pagination.tsx",
      "content": "import * as React from \"react\";\nimport { View, Text, Pressable } from \"react-native\";\nimport { Feather } from \"@expo/vector-icons\";\nimport { cn } from \"@/lib/utils\";\n\nconst Pagination = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof View>) => (\n  <View\n    accessibilityRole=\"none\"\n    accessibilityLabel=\"pagination\"\n    className={cn(\"w-full justify-center items-center\", className)}\n    {...props}\n  />\n);\nPagination.displayName = \"Pagination\";\n\nconst PaginationContent = React.forwardRef<\n  View,\n  React.ComponentProps<typeof View>\n>(({ className, ...props }, ref) => (\n  <View\n    ref={ref}\n    className={cn(\"flex-row items-center justify-center gap-2\", className)}\n    {...props}\n  />\n));\nPaginationContent.displayName = \"PaginationContent\";\n\nconst PaginationItem = React.forwardRef<\n  View,\n  React.ComponentProps<typeof View>\n>(({ className, ...props }, ref) => (\n  <View ref={ref} className={cn(\"\", className)} {...props} />\n));\nPaginationItem.displayName = \"PaginationItem\";\n\ntype PaginationLinkProps = {\n  isActive?: boolean;\n  size?: \"default\" | \"sm\" | \"lg\" | \"icon\";\n  onPress?: () => void;\n  disabled?: boolean;\n} & React.ComponentProps<typeof Pressable>;\n\nconst PaginationLink = ({\n  className,\n  isActive,\n  size = \"icon\",\n  onPress,\n  disabled = false,\n  children,\n  ...props\n}: PaginationLinkProps) => {\n  // Different size variants for better touch targets on mobile\n  const getSizeStyles = () => {\n    switch (size) {\n      case \"sm\":\n        return \"h-8 min-w-8 px-2\";\n      case \"lg\":\n        return \"h-12 min-w-12 px-3\";\n      case \"icon\":\n        return \"h-10 w-10\";\n      default:\n        return \"h-10 min-w-10 px-2.5\";\n    }\n  };\n\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityState={{\n        selected: isActive,\n        disabled: disabled,\n      }}\n      className={cn(\n        \"items-center justify-center rounded-md\",\n        getSizeStyles(),\n        isActive\n          ? \"bg-primary text-primary-foreground\"\n          : \"bg-background text-foreground\",\n        isActive && \"font-medium\",\n        disabled && \"opacity-50\",\n        className\n      )}\n      onPress={disabled ? undefined : onPress}\n      disabled={disabled}\n      {...props}\n    >\n      {children}\n    </Pressable>\n  );\n};\nPaginationLink.displayName = \"PaginationLink\";\n\nconst PaginationPrevious = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink size=\"default\" className={cn(\"gap-1\", className)} {...props}>\n    <View className=\"flex-row items-center\">\n      <Feather name=\"chevron-left\" size={16} className=\"text-foreground\" />\n      <Text className=\"ml-0.5 text-sm text-foreground\">Prev</Text>\n    </View>\n  </PaginationLink>\n);\nPaginationPrevious.displayName = \"PaginationPrevious\";\n\nconst PaginationNext = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink size=\"default\" className={cn(\"gap-1\", className)} {...props}>\n    <View className=\"flex-row items-center\">\n      <Text className=\"mr-0.5 text-sm text-foreground\">Next</Text>\n      <Feather name=\"chevron-right\" size={16} className=\"text-foreground\" />\n    </View>\n  </PaginationLink>\n);\nPaginationNext.displayName = \"PaginationNext\";\n\nconst PaginationEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof View>) => (\n  <View\n    className={cn(\"flex h-10 w-10 items-center justify-center\", className)}\n    {...props}\n  >\n    <Feather name=\"more-horizontal\" size={16} className=\"text-foreground\" />\n    <Text className=\"sr-only\">More pages</Text>\n  </View>\n);\nPaginationEllipsis.displayName = \"PaginationEllipsis\";\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import {\n    Pagination,\n    PaginationContent,\n    PaginationEllipsis,\n    PaginationItem,\n    PaginationLink,\n    PaginationNext,\n    PaginationPrevious,\n} from \"@/components/ui/pagination\";\nimport * as React from \"react\";\n\nexport default function PaginationExampleScreen() {\n    const [currentPage, setCurrentPage] = React.useState(1);\n    const totalPages = 10;\n\n    const handlePageChange = (page: number) => {\n        setCurrentPage(page);\n    };\n\n    return (\n        <Pagination className=\"w-full max-w-screen-sm\">\n            <PaginationContent>\n                <PaginationItem>\n                    <PaginationPrevious\n                        onPress={() => handlePageChange(Math.max(1, currentPage - 1))}\n                        disabled={currentPage === 1}\n                    />\n                </PaginationItem>\n                <PaginationItem>\n                    <PaginationNext\n                        onPress={() => handlePageChange(Math.min(totalPages, currentPage + 1))}\n                        disabled={currentPage === totalPages}\n                    />\n                </PaginationItem>\n            </PaginationContent>\n        </Pagination>\n    );\n}\n",
  "customPreview": "import {\n    Pagination,\n    PaginationContent,\n    PaginationEllipsis,\n    PaginationItem,\n    PaginationLink,\n    PaginationNext,\n    PaginationPrevious,\n} from \"@/components/ui/pagination\";\nimport * as React from \"react\";\nimport { ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function PaginationExampleScreen() {\n    const [currentPage, setCurrentPage] = React.useState(1);\n    const totalPages = 10;\n\n    const handlePageChange = (page: number) => {\n        setCurrentPage(page);\n    };\n\n    const renderPaginationItems = () => {\n        const items = [];\n        const maxVisiblePages = 5;\n\n        // Case 1: Show just the first few pages\n        if (currentPage <= 3) {\n            for (let i = 1; i <= Math.min(maxVisiblePages, totalPages); i++) {\n                items.push(\n                    <PaginationItem key={i}>\n                        <PaginationLink\n                            isActive={i === currentPage}\n                            onPress={() => handlePageChange(i)}\n                        >\n                            <Text className={`text-base ${i === currentPage ? 'text-primary-foreground' : 'text-foreground'}`}>\n                                {i}\n                            </Text>\n                        </PaginationLink>\n                    </PaginationItem>\n                );\n            }\n\n            if (totalPages > maxVisiblePages) {\n                items.push(\n                    <PaginationItem key=\"ellipsis1\">\n                        <PaginationEllipsis />\n                    </PaginationItem>\n                );\n\n                items.push(\n                    <PaginationItem key={totalPages}>\n                        <PaginationLink onPress={() => handlePageChange(totalPages)}>\n                            <Text className=\"text-base text-foreground\">{totalPages}</Text>\n                        </PaginationLink>\n                    </PaginationItem>\n                );\n            }\n        }\n        // Case 2: Show middle pages with ellipsis on both sides\n        else if (currentPage > 3 && currentPage < totalPages - 2) {\n            items.push(\n                <PaginationItem key={1}>\n                    <PaginationLink onPress={() => handlePageChange(1)}>\n                        <Text className=\"text-base text-foreground\">1</Text>\n                    </PaginationLink>\n                </PaginationItem>\n            );\n\n            items.push(\n                <PaginationItem key=\"ellipsis1\">\n                    <PaginationEllipsis />\n                </PaginationItem>\n            );\n\n            for (let i = currentPage - 1; i <= currentPage + 1; i++) {\n                items.push(\n                    <PaginationItem key={i}>\n                        <PaginationLink\n                            isActive={i === currentPage}\n                            onPress={() => handlePageChange(i)}\n                        >\n                            <Text className={`text-base ${i === currentPage ? 'text-primary-foreground' : 'text-foreground'}`}>\n                                {i}\n                            </Text>\n                        </PaginationLink>\n                    </PaginationItem>\n                );\n            }\n\n            items.push(\n                <PaginationItem key=\"ellipsis2\">\n                    <PaginationEllipsis />\n                </PaginationItem>\n            );\n\n            items.push(\n                <PaginationItem key={totalPages}>\n                    <PaginationLink onPress={() => handlePageChange(totalPages)}>\n                        <Text className=\"text-base text-foreground\">{totalPages}</Text>\n                    </PaginationLink>\n                </PaginationItem>\n            );\n        }\n        // Case 3: Show the last few pages\n        else {\n            items.push(\n                <PaginationItem key={1}>\n                    <PaginationLink onPress={() => handlePageChange(1)}>\n                        <Text className=\"text-base text-foreground\">1</Text>\n                    </PaginationLink>\n                </PaginationItem>\n            );\n\n            items.push(\n                <PaginationItem key=\"ellipsis1\">\n                    <PaginationEllipsis />\n                </PaginationItem>\n            );\n\n            for (let i = Math.max(totalPages - 4, 2); i <= totalPages; i++) {\n                items.push(\n                    <PaginationItem key={i}>\n                        <PaginationLink\n                            isActive={i === currentPage}\n                            onPress={() => handlePageChange(i)}\n                        >\n                            <Text className={`text-base ${i === currentPage ? 'text-primary-foreground' : 'text-foreground'}`}>\n                                {i}\n                            </Text>\n                        </PaginationLink>\n                    </PaginationItem>\n                );\n            }\n        }\n\n        return items;\n    };\n\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                            Pagination\n                        </Text>\n                        <Text className=\"text-base mb-6 text-muted-foreground\">\n                            Navigation for pagination interface with page numbers and previous/next controls.\n                        </Text>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Basic Pagination\n                        </Text>\n                        <View className=\"items-center\">\n                            <Pagination className=\"w-full max-w-screen-sm\">\n                                <PaginationContent>\n                                    <PaginationItem>\n                                        <PaginationPrevious\n                                            onPress={() => handlePageChange(Math.max(1, currentPage - 1))}\n                                            disabled={currentPage === 1}\n                                        />\n                                    </PaginationItem>\n\n                                    {renderPaginationItems()}\n\n                                    <PaginationItem>\n                                        <PaginationNext\n                                            onPress={() => handlePageChange(Math.min(totalPages, currentPage + 1))}\n                                            disabled={currentPage === totalPages}\n                                        />\n                                    </PaginationItem>\n                                </PaginationContent>\n                            </Pagination>\n                            <Text className=\"mt-4 text-foreground\">\n                                Page {currentPage} of {totalPages}\n                            </Text>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Simple Pagination (Without Numbers)\n                        </Text>\n                        <View className=\"items-center\">\n                            <Pagination className=\"w-full max-w-screen-sm\">\n                                <PaginationContent>\n                                    <PaginationItem>\n                                        <PaginationPrevious\n                                            onPress={() => handlePageChange(Math.max(1, currentPage - 1))}\n                                            disabled={currentPage === 1}\n                                        />\n                                    </PaginationItem>\n                                    <PaginationItem>\n                                        <PaginationNext\n                                            onPress={() => handlePageChange(Math.min(totalPages, currentPage + 1))}\n                                            disabled={currentPage === totalPages}\n                                        />\n                                    </PaginationItem>\n                                </PaginationContent>\n                            </Pagination>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Number-Only Pagination\n                        </Text>\n                        <View className=\"items-center\">\n                            <Pagination className=\"w-full max-w-screen-sm\">\n                                <PaginationContent>\n                                    {Array.from({ length: 3 }, (_, i) => i + 1).map((page) => (\n                                        <PaginationItem key={page}>\n                                            <PaginationLink\n                                                isActive={page === currentPage}\n                                                onPress={() => handlePageChange(page)}\n                                            >\n                                                <Text className={`text-base ${page === currentPage ? 'text-primary-foreground' : 'text-foreground'}`}>\n                                                    {page}\n                                                </Text>\n                                            </PaginationLink>\n                                        </PaginationItem>\n                                    ))}\n                                </PaginationContent>\n                            </Pagination>\n                        </View>\n                    </View>\n                </ScrollView>\n            </SafeAreaView>\n        </>\n    );\n}\n"
}