{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "type": "registry:ui",
  "title": "Pagination",
  "description": "Responsive page navigation with ellipsis compression and disabled edges.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/pagination.tsx",
      "content": "import * as React from 'react'\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nexport interface PaginationProps extends React.HTMLAttributes<HTMLElement> {\n  currentPage: number\n  totalPages: number\n  onPageChange: (page: number) => void\n  siblingCount?: number\n}\n\nexport function Pagination({ currentPage, totalPages, onPageChange, siblingCount = 1, className, ...props }: PaginationProps) {\n  const pages = React.useMemo<(number | 'ellipsis')[]>(() => {\n    const visibleCount = siblingCount * 2 + 5\n    if (totalPages <= visibleCount) return Array.from({ length: totalPages }, (_, index) => index + 1)\n    const left = Math.max(currentPage - siblingCount, 2)\n    const right = Math.min(currentPage + siblingCount, totalPages - 1)\n    const result: (number | 'ellipsis')[] = [1]\n    if (left > 2) result.push('ellipsis')\n    for (let page = left; page <= right; page += 1) result.push(page)\n    if (right < totalPages - 1) result.push('ellipsis')\n    result.push(totalPages)\n    return result\n  }, [currentPage, siblingCount, totalPages])\n\n  const goTo = (page: number) => {\n    if (page >= 1 && page <= totalPages && page !== currentPage) onPageChange(page)\n  }\n\n  return (\n    <nav aria-label=\"Pagination\" className={cn('font-sans', className)} {...props}>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <button type=\"button\" aria-label=\"Previous page\" disabled={currentPage === 1} onClick={() => goTo(currentPage - 1)} className=\"flex h-10 items-center gap-1 rounded-full bg-rk-surface px-3 text-xs font-extrabold rk-border-sm rk-shadow-sm hover:bg-rk-primary focus:outline-none focus:ring-4 focus:ring-black focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-40\">\n          <ChevronLeft className=\"h-4 w-4 stroke-[3]\" aria-hidden=\"true\" /><span className=\"hidden sm:inline\">Previous</span>\n        </button>\n        <div className=\"flex items-center gap-1\" role=\"list\">\n          {pages.map((page, index) => page === 'ellipsis' ? (\n            <span key={`ellipsis-${index}`} className=\"flex h-10 w-8 items-center justify-center text-black/45\" aria-hidden=\"true\"><MoreHorizontal className=\"h-4 w-4\" /></span>\n          ) : (\n            <button key={page} type=\"button\" role=\"listitem\" aria-label={`Page ${page}`} aria-current={page === currentPage ? 'page' : undefined} onClick={() => goTo(page)} className={cn('flex h-10 min-w-10 items-center justify-center rounded-full px-3 text-sm font-black transition-colors focus:outline-none focus:ring-4 focus:ring-black focus:ring-offset-2', page === currentPage ? 'bg-rk-primary rk-border-sm rk-shadow-sm' : 'bg-rk-surface hover:bg-rk-mint')}>{page}</button>\n          ))}\n        </div>\n        <button type=\"button\" aria-label=\"Next page\" disabled={currentPage === totalPages} onClick={() => goTo(currentPage + 1)} className=\"flex h-10 items-center gap-1 rounded-full bg-rk-surface px-3 text-xs font-extrabold rk-border-sm rk-shadow-sm hover:bg-rk-primary focus:outline-none focus:ring-4 focus:ring-black focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-40\">\n          <span className=\"hidden sm:inline\">Next</span><ChevronRight className=\"h-4 w-4 stroke-[3]\" aria-hidden=\"true\" />\n        </button>\n      </div>\n    </nav>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/ui/pagination.tsx"
    }
  ]
}