{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination-with-ellipsis",
  "title": "Pagination with Ellipsis",
  "description": "Numbered pagination that keeps the current page visible and collapses long ranges with ellipses.",
  "dependencies": [],
  "files": [
    {
      "path": "components/navigation/PaginationWithEllipsis.tsx",
      "content": "'use client';\n\ntype PaginationWithEllipsisProps = {\n  pageCount?: number;\n  page?: number;\n  // eslint-disable-next-line no-unused-vars\n  onPageChange?: (page: number) => void;\n  className?: string;\n};\n\nconst getPages = (pageCount: number, page: number) => {\n  if (pageCount <= 7) return Array.from({ length: pageCount }, (_, index) => index);\n  if (page <= 2) return [0, 1, 2, 3, 'ellipsis', pageCount - 1];\n  if (page >= pageCount - 3) return [0, 'ellipsis', pageCount - 4, pageCount - 3, pageCount - 2, pageCount - 1];\n  return [0, 'ellipsis', page - 1, page, page + 1, 'ellipsis', pageCount - 1];\n};\n\nexport default function PaginationWithEllipsis({\n  pageCount = 10,\n  page = 0,\n  onPageChange,\n  className = '',\n}: PaginationWithEllipsisProps) {\n  const totalPages = Math.max(1, pageCount);\n  const activePage = Math.max(0, Math.min(page, totalPages - 1));\n\n  return (\n    <nav\n      className={['flex items-center justify-center gap-1', className].filter(Boolean).join(' ')}\n      aria-label='Pagination'\n    >\n      <button\n        type='button'\n        aria-label='Previous page'\n        disabled={activePage === 0}\n        onClick={() => onPageChange?.(activePage - 1)}\n        className='flex h-9 w-9 items-center justify-center rounded-[var(--radius-md,0.375rem)] text-lg text-[color:var(--color-muted-foreground,#6b7280)] transition hover:bg-[var(--color-muted,#f3f4f6)] hover:text-[color:var(--color-foreground,#030712)] disabled:cursor-not-allowed disabled:opacity-30'\n      >\n        <span aria-hidden='true'>‹</span>\n      </button>\n\n      {getPages(totalPages, activePage).map((item, index) =>\n        item === 'ellipsis' ? (\n          <span key={`ellipsis-${index}`} className='flex h-9 w-9 items-center justify-center text-[color:var(--color-muted-foreground,#9ca3af)]' aria-hidden='true'>\n            …\n          </span>\n        ) : (\n          <button\n            key={item}\n            type='button'\n            aria-label={`Go to page ${item + 1}`}\n            aria-current={activePage === item ? 'page' : undefined}\n            onClick={() => onPageChange?.(item)}\n            className={[\n              'flex h-9 w-9 items-center justify-center rounded-lg text-sm font-medium',\n              activePage === item\n                ? 'bg-[var(--color-primary,#030712)] text-[color:var(--color-primary-foreground,#fff)]'\n                : 'text-[color:var(--color-muted-foreground,#4b5563)] hover:bg-[var(--color-muted,#f3f4f6)] hover:text-[color:var(--color-foreground,#030712)]',\n            ].join(' ')}\n          >\n            {item + 1}\n          </button>\n        ),\n      )}\n\n      <button\n        type='button'\n        aria-label='Next page'\n        disabled={activePage === totalPages - 1}\n        onClick={() => onPageChange?.(activePage + 1)}\n        className='flex h-9 w-9 items-center justify-center rounded-[var(--radius-md,0.375rem)] text-lg text-[color:var(--color-muted-foreground,#6b7280)] transition hover:bg-[var(--color-muted,#f3f4f6)] hover:text-[color:var(--color-foreground,#030712)] disabled:cursor-not-allowed disabled:opacity-30'\n      >\n        <span aria-hidden='true'>›</span>\n      </button>\n    </nav>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/navigation/PaginationWithEllipsis.tsx"
    }
  ],
  "categories": [
    "navigation"
  ],
  "type": "registry:component"
}