{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "title": "Pagination",
  "description": "A pagination component",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/cs/ui/pagination/pagination.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  MoreHorizontalIcon,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, type CsBtnColor } from \"@/registry/cs/ui/button/button\"\n\nexport interface PaginationProps extends Omit<React.ComponentProps<\"nav\">, \"onChange\"> {\n  /** Total number of pages. */\n  pages: number\n  /** Current active page (1-based). */\n  page?: number\n  /** Default page (uncontrolled). */\n  defaultPage?: number\n  /** Callback when page changes. */\n  onChange?: (page: number) => void\n  /** Number of sibling pages to show. */\n  siblings?: number\n  /** Button size. */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n  /** Button color. */\n  color?: CsBtnColor\n}\n\nfunction Pagination({\n  pages,\n  page: controlledPage,\n  defaultPage = 1,\n  onChange,\n  siblings = 1,\n  size = \"sm\",\n  color = \"primary\",\n  className,\n  ...props\n}: PaginationProps) {\n  const [internalPage, setInternalPage] = React.useState(defaultPage)\n  const safePages = Number.isFinite(pages) && pages > 0 ? pages : 1\n  const currentPage = Math.min(safePages, Math.max(1, controlledPage ?? internalPage))\n\n  const goTo = (p: number) => {\n    const clamped = Math.max(1, Math.min(safePages, p))\n    if (controlledPage === undefined) setInternalPage(clamped)\n    onChange?.(clamped)\n  }\n\n  // Generate page numbers with ellipsis\n  const getRange = (): (number | \"dots\")[] => {\n    const range: (number | \"dots\")[] = []\n    const left = Math.max(2, currentPage - siblings)\n    const right = Math.min(safePages - 1, currentPage + siblings)\n\n    range.push(1)\n    if (left > 2) range.push(\"dots\")\n    for (let i = left; i <= right; i++) range.push(i)\n    if (right < safePages - 1) range.push(\"dots\")\n    if (safePages > 1) range.push(safePages)\n\n    return range\n  }\n\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    >\n      <ul className=\"flex flex-row items-center gap-1\">\n        <li>\n          <Button\n            size={size}\n            color={color}\n            variant=\"outline\"\n            icon={ChevronLeftIcon}\n            disabled={currentPage <= 1}\n            onClick={() => goTo(currentPage - 1)}\n            aria-label=\"Previous page\"\n          />\n        </li>\n        {getRange().map((item, i) =>\n          item === \"dots\" ? (\n            <li key={`dots-${i}`} className=\"flex items-center justify-center px-1\">\n              <MoreHorizontalIcon className=\"size-4 text-muted-foreground\" />\n            </li>\n          ) : (\n            <li key={item}>\n              <Button\n                size={size}\n                color={color}\n                variant={currentPage === item ? \"fill\" : \"outline\"}\n                label={String(item)}\n                onClick={() => goTo(item)}\n                aria-current={currentPage === item ? \"page\" : undefined}\n              />\n            </li>\n          )\n        )}\n        <li>\n          <Button\n            size={size}\n            color={color}\n            variant=\"outline\"\n            icon={ChevronRightIcon}\n            disabled={currentPage >= pages}\n            onClick={() => goTo(currentPage + 1)}\n            aria-label=\"Next page\"\n          />\n        </li>\n      </ul>\n    </nav>\n  )\n}\n\nexport { Pagination }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}