{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "title": "Pagination",
  "description": "Accessible page navigation with previous/next controls and a truncated page range with ellipses.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "packages/core/src/components/lumo/pagination.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, \"onChange\"> {\n  /** 1-based current page. */\n  page: number\n  pageCount: number\n  onPageChange: (page: number) => void\n  /** Pages shown on each side of the current page. Defaults to 1. */\n  siblingCount?: number\n}\n\nconst DOTS = \"dots\"\n\nfunction range(start: number, end: number): number[] {\n  return Array.from({ length: end - start + 1 }, (_, i) => start + i)\n}\n\nfunction paginationRange(page: number, pageCount: number, siblingCount: number): Array<number | typeof DOTS> {\n  const totalPageNumbers = siblingCount + 5\n  if (totalPageNumbers >= pageCount) {\n    return range(1, pageCount)\n  }\n\n  const leftSibling = Math.max(page - siblingCount, 1)\n  const rightSibling = Math.min(page + siblingCount, pageCount)\n  const showLeftDots = leftSibling > 2\n  const showRightDots = rightSibling < pageCount - 2\n\n  if (!showLeftDots && showRightDots) {\n    return [...range(1, 3 + 2 * siblingCount), DOTS, pageCount]\n  }\n  if (showLeftDots && !showRightDots) {\n    return [1, DOTS, ...range(pageCount - (2 + 2 * siblingCount), pageCount)]\n  }\n  return [1, DOTS, ...range(leftSibling, rightSibling), DOTS, pageCount]\n}\n\nconst itemClass =\n  \"inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm font-medium transition-[color,background-color,transform] hover:bg-accent active:scale-95 disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n\nconst Pagination = React.forwardRef<HTMLElement, PaginationProps>(\n  ({ className, page, pageCount, onPageChange, siblingCount = 1, ...props }, ref) => {\n    if (pageCount <= 1) return null\n\n    const pages = paginationRange(page, pageCount, siblingCount)\n\n    return (\n      <nav ref={ref} aria-label=\"Pagination\" className={cn(\"flex items-center gap-1\", className)} {...props}>\n        <button\n          type=\"button\"\n          className={itemClass}\n          onClick={() => onPageChange(page - 1)}\n          disabled={page <= 1}\n          aria-label=\"Previous page\"\n        >\n          <ChevronLeft className=\"h-4 w-4\" />\n        </button>\n\n        {pages.map((item, index) =>\n          item === DOTS ? (\n            <span key={`dots-${index}`} className=\"inline-flex h-9 min-w-9 items-center justify-center text-sm text-muted-foreground\" aria-hidden>\n              &#8230;\n            </span>\n          ) : (\n            <button\n              key={item}\n              type=\"button\"\n              onClick={() => onPageChange(item)}\n              aria-current={item === page ? \"page\" : undefined}\n              aria-label={`Page ${item}`}\n              className={cn(\n                itemClass,\n                item === page && \"bg-primary text-primary-foreground hover:bg-primary/90\"\n              )}\n            >\n              {item}\n            </button>\n          )\n        )}\n\n        <button\n          type=\"button\"\n          className={itemClass}\n          onClick={() => onPageChange(page + 1)}\n          disabled={page >= pageCount}\n          aria-label=\"Next page\"\n        >\n          <ChevronRight className=\"h-4 w-4\" />\n        </button>\n      </nav>\n    )\n  }\n)\nPagination.displayName = \"Pagination\"\n\nexport { Pagination }\n",
      "type": "registry:ui",
      "target": "components/lumo/pagination.tsx"
    }
  ],
  "type": "registry:ui"
}