hide siblings on mobile pagination

packages/react-pagination/hooks/usePagination.test.ts

@@ -60,6 +60,27 @@ describe("usePagination ", () => {
 
       expect(result.current.page).toBe(1);
     });
+
+    it("should handle siblings on mobile", () => {
+      const { result } = renderHook(() =>
+        usePagination({
+          pages: 20,
+          initialPage: 1,
+          siblings: 1,
+          boundaries: 1,
+          isMobile: true,
+        }),
+      );
+
+      expect(result.current.range).toEqual([[1, 2, 3], [20]]);
+
+      act(() => {
+        result.current.setPage(2);
+      });
+
+      // // The layout of the segments should still be the same.
+      expect(result.current.range).toEqual([[1, 2, 3], [20]]);
+    });
   });
 
   describe("Array-based pagination", () => {

packages/react-pagination/hooks/usePagination.ts

@@ -20,6 +20,7 @@ interface UsePaginationBaseProps {
   boundaries: number;
 
   gapSize?: number;
+  isMobile?: boolean;
 }
 
 export interface UsePaginationWithPagesProps extends UsePaginationBaseProps {
@@ -103,10 +104,12 @@ export function usePagination<T>(
 
   const { boundaries = 1, siblings = 1, gapSize = 1 } = props;
 
+  const responsiveSiblings = props.isMobile ? 0 : siblings;
+
   const range = useMemo(() => {
     const segments: [number[], number[], number[]] = [
       boundaries ? clampedSequence(1, boundaries) : [],
-      clampedSequence(page - siblings, page + siblings),
+      clampedSequence(page - responsiveSiblings, page + responsiveSiblings),
       boundaries
         ? clampedSequence(computedPages + 1 - boundaries, computedPages)
         : [],
@@ -115,11 +118,18 @@ export function usePagination<T>(
     return formatSegments(
       segments,
       computedPages,
-      siblings,
+      responsiveSiblings,
       boundaries,
       gapSize,
     );
-  }, [page, boundaries, siblings, clampedSequence, computedPages, gapSize]);
+  }, [
+    page,
+    boundaries,
+    responsiveSiblings,
+    clampedSequence,
+    computedPages,
+    gapSize,
+  ]);
 
   const currentItems = useMemo(
     () =>