{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "title": "Pagination",
  "description": "Ruled page numbers that collapse long runs.",
  "registryDependencies": [
    "https://spotcheckui.com/r/spotcheck-base.json"
  ],
  "files": [
    {
      "path": "registry/spotcheck/components/spotcheck/pagination.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst SIBLINGS = 1\n\n/** Page numbers to show, with \"gap\" where a run of pages is skipped. */\nexport function pageRange(page: number, pageCount: number) {\n  const pages: (number | \"gap\")[] = []\n  for (let current = 1; current <= pageCount; current++) {\n    const shown = current === 1 || current === pageCount || Math.abs(current - page) <= SIBLINGS\n    if (shown) pages.push(current)\n    else if (pages.at(-1) !== \"gap\") pages.push(\"gap\")\n  }\n  return pages\n}\n\nconst CELL =\n  \"spotcheck-focus border-ink min-w-9 border-l-(length:--rule) px-2.5 py-1.5 text-center first:border-l-0\"\n\ntype PaginationProps = {\n  /** The current page, counted from 1. */\n  page: number\n  pageCount: number\n  onPageChange: (page: number) => void\n  className?: string\n}\n\nexport function Pagination({ page, pageCount, onPageChange, className }: PaginationProps) {\n  return (\n    <nav\n      aria-label=\"Pagination\"\n      className={cn(\n        \"border-ink inline-flex border-(length:--rule) font-(family-name:--f-mono) text-xs tabular-nums\",\n        className,\n      )}\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Previous page\"\n        disabled={page <= 1}\n        onClick={() => onPageChange(page - 1)}\n        className={cn(CELL, \"cursor-pointer disabled:cursor-not-allowed disabled:opacity-45\")}\n      >\n        ←\n      </button>\n      {pageRange(page, pageCount).map((item, index) =>\n        item === \"gap\" ? (\n          <span key={`gap-${index}`} aria-hidden className={cn(CELL, \"text-mute\")}>\n            …\n          </span>\n        ) : (\n          <button\n            key={item}\n            type=\"button\"\n            aria-label={`Page ${item}`}\n            aria-current={item === page ? \"page\" : undefined}\n            onClick={() => onPageChange(item)}\n            className={cn(CELL, \"cursor-pointer\", item === page && \"bg-ink text-paper\")}\n          >\n            {item}\n          </button>\n        ),\n      )}\n      <button\n        type=\"button\"\n        aria-label=\"Next page\"\n        disabled={page >= pageCount}\n        onClick={() => onPageChange(page + 1)}\n        className={cn(CELL, \"cursor-pointer disabled:cursor-not-allowed disabled:opacity-45\")}\n      >\n        →\n      </button>\n    </nav>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "core"
  ],
  "type": "registry:component"
}