{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "type": "registry:ui",
  "title": "Pagination",
  "description": "Page navigation with siblings + ellipsis.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/utils.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/text.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/theme.json"
  ],
  "dependencies": [
    "lucide-react-native"
  ],
  "files": [
    {
      "path": "registry/shared/ui/pagination.tsx",
      "type": "registry:ui",
      "target": "components/ui/pagination.tsx",
      "content": "import { ChevronLeft, ChevronRight } from 'lucide-react-native';\nimport {\n  Pressable,\n  StyleSheet,\n  View,\n  type PressableProps,\n  type StyleProp,\n  type ViewProps,\n  type ViewStyle,\n} from 'react-native';\nimport { Text } from '@/components/ui/text';\nimport { cn, useIconColor, useThemeColor } from '@/lib/utils';\n\nexport interface PaginationProps extends ViewProps {\n  page: number;\n  totalPages: number;\n  onPageChange?: (page: number) => void;\n  /** Pages shown around current. */\n  siblings?: number;\n  className?: string;\n}\n\nfunction range(\n  page: number,\n  total: number,\n  siblings: number\n): (number | '…')[] {\n  const pages = new Set<number>([1, total]);\n  for (let i = -siblings; i <= siblings; i++) {\n    const p = page + i;\n    if (p >= 1 && p <= total) pages.add(p);\n  }\n  const sorted = [...pages].sort((a, b) => a - b);\n  const out: (number | '…')[] = [];\n  for (let i = 0; i < sorted.length; i++) {\n    if (i > 0 && sorted[i] - sorted[i - 1] > 1) out.push('…');\n    out.push(sorted[i]);\n  }\n  return out;\n}\n\nexport function Pagination({\n  page,\n  totalPages,\n  onPageChange,\n  siblings = 1,\n  className,\n  ...props\n}: PaginationProps) {\n  const iconColor = useIconColor('foreground');\n  const colors = useThemeColor();\n  const items = range(page, totalPages, siblings);\n\n  return (\n    <View\n      accessibilityRole=\"toolbar\"\n      className={cn('flex-row items-center gap-1.5 self-center', className)}\n      {...props}\n    >\n      <PaginationButton\n        disabled={page <= 1}\n        onPress={() => onPageChange?.(page - 1)}\n        accessibilityLabel=\"Previous page\"\n      >\n        <ChevronLeft size={18} color={iconColor} />\n      </PaginationButton>\n\n      {items.map((it, i) =>\n        it === '…' ? (\n          <Text\n            key={`ellipsis-${items[i - 1]}-${items[i + 1]}`}\n            className=\"px-1 text-sm text-muted-foreground\"\n          >\n            …\n          </Text>\n        ) : (\n          <PaginationButton\n            key={it}\n            active={it === page}\n            activeStyle={{\n              backgroundColor: colors.primary,\n              borderColor: colors.primary,\n            }}\n            onPress={() => onPageChange?.(it)}\n            accessibilityLabel={`Page ${it}`}\n          >\n            <Text\n              style={{\n                fontSize: 14,\n                fontWeight: it === page ? '700' : '500',\n                color: it === page ? colors.primaryForeground : colors.foreground,\n              }}\n            >\n              {it}\n            </Text>\n          </PaginationButton>\n        )\n      )}\n\n      <PaginationButton\n        disabled={page >= totalPages}\n        onPress={() => onPageChange?.(page + 1)}\n        accessibilityLabel=\"Next page\"\n      >\n        <ChevronRight size={18} color={iconColor} />\n      </PaginationButton>\n    </View>\n  );\n}\n\nfunction PaginationButton({\n  active,\n  activeStyle,\n  disabled,\n  className,\n  style,\n  ...props\n}: PressableProps & {\n  active?: boolean;\n  activeStyle?: ViewStyle;\n  className?: string;\n  style?: StyleProp<ViewStyle>;\n}) {\n  const colors = useThemeColor();\n\n  return (\n    <Pressable\n      disabled={disabled}\n      hitSlop={6}\n      className={cn(\n        'h-10 min-w-10 items-center justify-center rounded-xl border border-transparent px-2.5',\n        !active && 'border-border bg-card active:bg-accent',\n        disabled && 'opacity-40',\n        className\n      )}\n      style={[\n        { borderCurve: 'continuous' },\n        active ? activeStyle : undefined,\n        style,\n      ]}\n      {...props}\n    />\n  );\n}\n"
    }
  ]
}