{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"pagination","type":"registry:ui","title":"Pagination","description":"Pagination from react-fancy","package":"react-fancy","dependencies":["lucide-react"],"registryDependencies":[],"files":[{"path":"components\/fancy\/pagination\/Pagination.tsx","content":"import { ChevronLeft, ChevronRight } from \"lucide-react\";\r\nimport { useMemo } from \"react\";\r\nimport { cn } from \"..\/..\/utils\/cn\";\r\nimport type { PaginationProps } from \".\/Pagination.types\";\r\n\r\nfunction range(start: number, end: number): number[] {\r\n  return Array.from({ length: end - start + 1 }, (_, i) => start + i);\r\n}\r\n\r\nfunction getPages(\r\n  page: number,\r\n  totalPages: number,\r\n  siblings: number,\r\n): (number | \"ellipsis\")[] {\r\n  const totalSlots = siblings * 2 + 5; \/\/ siblings + boundaries + ellipses + current\r\n  if (totalPages <= totalSlots) return range(1, totalPages);\r\n\r\n  const leftSibling = Math.max(page - siblings, 1);\r\n  const rightSibling = Math.min(page + siblings, totalPages);\r\n\r\n  const showLeftEllipsis = leftSibling > 2;\r\n  const showRightEllipsis = rightSibling < totalPages - 1;\r\n\r\n  if (!showLeftEllipsis && showRightEllipsis) {\r\n    const leftRange = range(1, 3 + siblings * 2);\r\n    return [...leftRange, \"ellipsis\", totalPages];\r\n  }\r\n\r\n  if (showLeftEllipsis && !showRightEllipsis) {\r\n    const rightRange = range(totalPages - (2 + siblings * 2), totalPages);\r\n    return [1, \"ellipsis\", ...rightRange];\r\n  }\r\n\r\n  return [\r\n    1,\r\n    \"ellipsis\",\r\n    ...range(leftSibling, rightSibling),\r\n    \"ellipsis\",\r\n    totalPages,\r\n  ];\r\n}\r\n\r\nexport function Pagination({\r\n  page,\r\n  onPageChange,\r\n  totalPages,\r\n  siblingCount = 1,\r\n  className,\r\n}: PaginationProps) {\r\n  const pages = useMemo(\r\n    () => getPages(page, totalPages, siblingCount),\r\n    [page, totalPages, siblingCount],\r\n  );\r\n\r\n  if (totalPages <= 1) return null;\r\n\r\n  const btnBase =\r\n    \"inline-flex h-9 min-w-9 items-center justify-center rounded-lg border text-sm transition-colors\";\r\n  const btnDefault =\r\n    \"border-zinc-200 bg-white hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:hover:bg-zinc-800\";\r\n  const btnActive =\r\n    \"border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900\";\r\n  const btnDisabled = \"cursor-not-allowed opacity-50\";\r\n\r\n  return (\r\n    <nav aria-label=\"Pagination\" data-react-fancy-pagination=\"\" className={cn(\"flex items-center gap-1\", className)}>\r\n      <button\r\n        type=\"button\"\r\n        disabled={page <= 1}\r\n        onClick={() => onPageChange(page - 1)}\r\n        className={cn(btnBase, btnDefault, page <= 1 && btnDisabled, \"px-2\")}\r\n        aria-label=\"Previous page\"\r\n      >\r\n        <ChevronLeft size={16} \/>\r\n      <\/button>\r\n\r\n      {pages.map((p, i) =>\r\n        p === \"ellipsis\" ? (\r\n          <span key={`e-${i}`} className=\"px-1 text-zinc-400\">\r\n            ...\r\n          <\/span>\r\n        ) : (\r\n          <button\r\n            key={p}\r\n            type=\"button\"\r\n            onClick={() => onPageChange(p)}\r\n            aria-current={p === page ? \"page\" : undefined}\r\n            className={cn(\r\n              btnBase,\r\n              p === page ? btnActive : btnDefault,\r\n              \"px-2\",\r\n            )}\r\n          >\r\n            {p}\r\n          <\/button>\r\n        ),\r\n      )}\r\n\r\n      <button\r\n        type=\"button\"\r\n        disabled={page >= totalPages}\r\n        onClick={() => onPageChange(page + 1)}\r\n        className={cn(\r\n          btnBase,\r\n          btnDefault,\r\n          page >= totalPages && btnDisabled,\r\n          \"px-2\",\r\n        )}\r\n        aria-label=\"Next page\"\r\n      >\r\n        <ChevronRight size={16} \/>\r\n      <\/button>\r\n    <\/nav>\r\n  );\r\n}\r\n\r\nPagination.displayName = \"Pagination\";\r\n","type":"registry:ui","target":"components\/fancy\/pagination\/Pagination.tsx"},{"path":"components\/fancy\/pagination\/Pagination.types.ts","content":"export interface PaginationProps {\r\n  page: number;\r\n  onPageChange: (page: number) => void;\r\n  totalPages: number;\r\n  siblingCount?: number;\r\n  className?: string;\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/pagination\/Pagination.types.ts"},{"path":"components\/fancy\/pagination\/index.ts","content":"export { Pagination } from \".\/Pagination\";\r\nexport type { PaginationProps } from \".\/Pagination.types\";\r\n","type":"registry:ui","target":"components\/fancy\/pagination\/index.ts"}]}