@primitiv-ui/react 0.1.29 → 0.1.31

package/src/usePagination/README.md

@@ -0,0 +1,170 @@
+# usePagination
+
+Headless pagination state: the page arithmetic every paged surface needs, with
+no opinion about where the data comes from or how the row is rendered.
+
+```tsx
+import { usePagination } from "@primitiv-ui/react";
+
+const { page, pageCount, items, next, previous, canNext, canPrevious } =
+  usePagination({ totalItems: 237, pageSize: 10 });
+```
+
+## Works with any data source
+
+The hook never fetches, holds or slices data — it hands back **indices**, which
+is what makes it source-agnostic.
+
+**Client-side** — slice an array you already have:
+
+```tsx
+const { startIndex, endIndex } = usePagination({
+  totalItems: rows.length,
+  pageSize: 10,
+});
+const visible = rows.slice(startIndex, endIndex);
+```
+
+**Server-side** — feed the same indices to a query. Here the server owns the
+total, so pass `totalItems` through as it arrives:
+
+```tsx
+const { page, startIndex, pageSize } = usePagination({
+  totalItems: data?.total,
+  pageSize: 10,
+});
+const { data } = useQuery(["rows", page], () =>
+  fetch(`/api/rows?offset=${startIndex}&limit=10`),
+);
+```
+
+If the server reports a page **count** rather than an item total, give
+`pageCount` directly and skip `totalItems` entirely.
+
+`startIndex`/`endIndex` are a **half-open** range — `[start, end)` — so they
+drop into `Array.slice` and into `LIMIT`/`OFFSET` with no off-by-one at the call
+site.
+
+## Controlled and uncontrolled
+
+Uncontrolled by default, holding its own page:
+
+```tsx
+const pagination = usePagination({ pageCount: 20, defaultPage: 3 });
+```
+
+Pass `page` to drive it yourself — from a URL query, say:
+
+```tsx
+const pagination = usePagination({
+  pageCount: 20,
+  page: Number(searchParams.get("page") ?? 1),
+  onPageChange: (next) => setSearchParams({ page: String(next) }),
+});
+```
+
+`onPageChange` always reports the **clamped** page, never a raw out-of-range
+request, and is not called when the page hasn't actually moved.
+
+## Out-of-range pages are clamped, not rejected
+
+A page index restored from a URL or `localStorage` can easily outlive the data
+it pointed at. Every route into the page — `defaultPage`, a controlled `page`,
+and `setPage` — is clamped to `1...pageCount`, so `page` is always safe to read
+and to index with.
+
+`pageCount` is never less than `1`: a 1-based page needs somewhere to stand, and
+reporting `0` pages would put `page` out of range the moment it was read.
+
+## Options
+
+| Option | Type | Default | Notes |
+|---|---|---|---|
+| `totalItems` | `number` | — | Total items across all pages. Pairs with `pageSize`. |
+| `pageSize` | `number` | — | Items per page. Pairs with `totalItems`. |
+| `pageCount` | `number` | — | Supply directly instead of deriving from the pair. |
+| `page` | `number` | — | Controlled current page, 1-based. |
+| `defaultPage` | `number` | `1` | Starting page when uncontrolled. |
+| `onPageChange` | `(page: number) => void` | — | Fired with the clamped page. |
+| `window` | `"paged" \| "sliding"` | `"paged"` | See Windowing below. |
+| `blockSize` | `number` | `5` | `paged` only — pages per block. |
+| `siblingCount` | `number` | `1` | `sliding` only — pages either side of the current one. |
+| `boundaryCount` | `number` | `1` | Pages pinned at each end, both strategies. |
+
+Given neither `pageCount` nor a complete `totalItems` + `pageSize` pair, the
+hook reports a single page.
+
+## Returns
+
+| Key | Type | Notes |
+|---|---|---|
+| `page` | `number` | Current page, always within `1...pageCount`. |
+| `pageCount` | `number` | Never less than 1. |
+| `setPage` | `(page: number) => void` | Out-of-range requests clamp. |
+| `next` / `previous` | `() => void` | No-ops at the respective end. |
+| `first` / `last` | `() => void` | Jump to either end. |
+| `canPrevious` / `canNext` | `boolean` | Wire to a control's `disabled`. |
+| `startIndex` / `endIndex` | `number` | Half-open slice bounds; `0` when no `pageSize`. |
+| `items` | `PaginationRangeItem[]` | The range to render — see below. |
+
+## Windowing — why the default is `paged`
+
+As the current page moves, something has to decide which numbers stay on screen.
+
+**`paged`** (the default) holds a fixed block and only advances when the current
+page steps outside it:
+
+```
+page 6:  1 ... 6 7 8 9 10 ... 20
+page 7:  1 ... 6 7 8 9 10 ... 20     ← identical; only the active cell moved
+page 10: 1 ... 6 7 8 9 10 ... 20
+page 11: 1 ... 11 12 13 14 15 ... 20 ← one deliberate jump
+```
+
+**`sliding`** follows the current page continuously:
+
+```
+page 6:  1 ... 5 6 7 ... 20
+page 7:  1 ... 6 7 8 ... 20          ← every cell re-labelled
+page 8:  1 ... 7 8 9 ... 20          ← again
+```
+
+Sliding is the more common default elsewhere, but it re-labels the numbers
+directly under the reader's cursor on every single step — the cell you are
+about to click has become a different page by the time you get there, and the
+whole row appears to flash. Paged trades that for one visible jump per block,
+which is both calmer and safer to click.
+
+Set `blockSize` to control how many pages a block holds (default 5). Choose
+`sliding` explicitly if you want the conventional behaviour:
+
+```tsx
+usePagination({ totalItems: 500, pageSize: 10, window: "sliding", siblingCount: 2 });
+```
+
+`siblingCount` applies only to `sliding`; `blockSize` only to `paged`.
+`boundaryCount` applies to both.
+
+## `items` and `paginationRange`
+
+`items` is the range to render: each entry is either a page or a `gap` carrying
+the pages it hides, so an overflow menu can offer them.
+
+```tsx
+items.map((item) =>
+  item.type === "page" ? renderPage(item.page) : renderGap(item.pages),
+);
+```
+
+A run of exactly **one** hidden page is returned as that page instead — hiding a
+single number behind a menu costs a click and saves no width.
+
+`paginationRange(page, pageCount, options?)` is exported separately and is
+pure, so a consumer holding its own page state can reuse the arithmetic without
+the hook. It takes the same `window` / `blockSize` / `siblingCount` /
+`boundaryCount` options.
+
+## Styled surface
+
+The `pagination` registry component composes this hook's output into a styled
+row. See `registry/components/pagination/README.md`.

package/src/usePagination/__tests__/usePagination.navigation.test.tsx

@@ -0,0 +1,109 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { usePagination } from "../usePagination.ts";
+import type { UsePaginationOptions } from "../usePagination.ts";
+
+function NavigationProbe(options: UsePaginationOptions) {
+  const { page, next, previous, first, last, canPrevious, canNext } = usePagination(options);
+  return (
+    <>
+      <span data-testid="page">{page}</span>
+      <span data-testid="flags">
+        {canPrevious ? "prev" : "-"}/{canNext ? "next" : "-"}
+      </span>
+      <button type="button" onClick={previous}>
+        previous
+      </button>
+      <button type="button" onClick={next}>
+        next
+      </button>
+      <button type="button" onClick={first}>
+        first
+      </button>
+      <button type="button" onClick={last}>
+        last
+      </button>
+    </>
+  );
+}
+
+describe("usePagination navigation", () => {
+  it("should step forward one page", async () => {
+    const user = userEvent.setup();
+    render(<NavigationProbe pageCount={10} defaultPage={3} />);
+
+    await user.click(screen.getByRole("button", { name: "next" }));
+
+    expect(screen.getByTestId("page")).toHaveTextContent("4");
+  });
+
+  it("should step back one page", async () => {
+    const user = userEvent.setup();
+    render(<NavigationProbe pageCount={10} defaultPage={3} />);
+
+    await user.click(screen.getByRole("button", { name: "previous" }));
+
+    expect(screen.getByTestId("page")).toHaveTextContent("2");
+  });
+
+  it("should stay on the last page when stepping forward from it", async () => {
+    const user = userEvent.setup();
+    render(<NavigationProbe pageCount={10} defaultPage={10} />);
+
+    await user.click(screen.getByRole("button", { name: "next" }));
+
+    expect(screen.getByTestId("page")).toHaveTextContent("10");
+  });
+
+  it("should stay on the first page when stepping back from it", async () => {
+    const user = userEvent.setup();
+    render(<NavigationProbe pageCount={10} defaultPage={1} />);
+
+    await user.click(screen.getByRole("button", { name: "previous" }));
+
+    expect(screen.getByTestId("page")).toHaveTextContent("1");
+  });
+
+  it("should jump to the first page", async () => {
+    const user = userEvent.setup();
+    render(<NavigationProbe pageCount={10} defaultPage={7} />);
+
+    await user.click(screen.getByRole("button", { name: "first" }));
+
+    expect(screen.getByTestId("page")).toHaveTextContent("1");
+  });
+
+  it("should jump to the last page", async () => {
+    const user = userEvent.setup();
+    render(<NavigationProbe pageCount={10} defaultPage={2} />);
+
+    await user.click(screen.getByRole("button", { name: "last" }));
+
+    expect(screen.getByTestId("page")).toHaveTextContent("10");
+  });
+
+  it("should report both directions available mid-range", () => {
+    render(<NavigationProbe pageCount={10} defaultPage={5} />);
+
+    expect(screen.getByTestId("flags")).toHaveTextContent("prev/next");
+  });
+
+  it("should report no previous on the first page", () => {
+    render(<NavigationProbe pageCount={10} defaultPage={1} />);
+
+    expect(screen.getByTestId("flags")).toHaveTextContent("-/next");
+  });
+
+  it("should report no next on the last page", () => {
+    render(<NavigationProbe pageCount={10} defaultPage={10} />);
+
+    expect(screen.getByTestId("flags")).toHaveTextContent("prev/-");
+  });
+
+  it("should report neither direction when there is only one page", () => {
+    render(<NavigationProbe pageCount={1} />);
+
+    expect(screen.getByTestId("flags")).toHaveTextContent("-/-");
+  });
+});

package/src/usePagination/__tests__/usePagination.page-count.test.tsx

@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { usePagination } from "../usePagination.ts";
+import type { UsePaginationOptions } from "../usePagination.ts";
+
+function PageCountProbe(options: UsePaginationOptions) {
+  const { page, pageCount } = usePagination(options);
+  return (
+    <span data-testid="result">
+      {page}/{pageCount}
+    </span>
+  );
+}
+
+describe("usePagination page count", () => {
+  it("should derive pageCount by dividing totalItems by pageSize", () => {
+    render(<PageCountProbe totalItems={200} pageSize={10} />);
+
+    expect(screen.getByTestId("result")).toHaveTextContent("1/20");
+  });
+
+  it("should round a partial last page up so its items stay reachable", () => {
+    render(<PageCountProbe totalItems={237} pageSize={10} />);
+
+    expect(screen.getByTestId("result")).toHaveTextContent("1/24");
+  });
+
+  it("should take pageCount directly when the consumer supplies it", () => {
+    render(<PageCountProbe pageCount={7} />);
+
+    expect(screen.getByTestId("result")).toHaveTextContent("1/7");
+  });
+
+  it("should fall back to one page when given no sizing information at all", () => {
+    // Neither an explicit pageCount nor a totalItems/pageSize pair — there is
+    // nothing to derive a count from, so the range collapses to a single page
+    // rather than reporting 0 (which `page` could never sit inside).
+    render(<PageCountProbe />);
+
+    expect(screen.getByTestId("result")).toHaveTextContent("1/1");
+  });
+
+  it("should fall back to one page when only half the sizing pair is given", () => {
+    render(<PageCountProbe totalItems={200} />);
+
+    expect(screen.getByTestId("result")).toHaveTextContent("1/1");
+  });
+
+  it("should report a single empty page when there are no items at all", () => {
+    // A range has to have somewhere to stand: reporting 0 pages would make
+    // `page` (1-based) immediately out of range for every consumer.
+    render(<PageCountProbe totalItems={0} pageSize={10} />);
+
+    expect(screen.getByTestId("result")).toHaveTextContent("1/1");
+  });
+});

package/src/usePagination/__tests__/usePagination.page-state.test.tsx

@@ -0,0 +1,87 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { usePagination } from "../usePagination.ts";
+import type { UsePaginationOptions } from "../usePagination.ts";
+
+function PageStateProbe(options: UsePaginationOptions & { goTo?: number }) {
+  const { goTo, ...rest } = options;
+  const { page, setPage } = usePagination(rest);
+  return (
+    <>
+      <span data-testid="page">{page}</span>
+      <button type="button" onClick={() => setPage(goTo ?? 1)}>
+        go
+      </button>
+    </>
+  );
+}
+
+describe("usePagination page state", () => {
+  it("should start on page 1 when no default is given", () => {
+    render(<PageStateProbe pageCount={10} />);
+
+    expect(screen.getByTestId("page")).toHaveTextContent("1");
+  });
+
+  it("should start on defaultPage when uncontrolled", () => {
+    render(<PageStateProbe pageCount={10} defaultPage={4} />);
+
+    expect(screen.getByTestId("page")).toHaveTextContent("4");
+  });
+
+  it("should move to the requested page", async () => {
+    const user = userEvent.setup();
+    render(<PageStateProbe pageCount={10} goTo={6} />);
+
+    await user.click(screen.getByRole("button", { name: "go" }));
+
+    expect(screen.getByTestId("page")).toHaveTextContent("6");
+  });
+
+  it("should clamp a request above the last page down to the last page", async () => {
+    const user = userEvent.setup();
+    render(<PageStateProbe pageCount={10} goTo={99} />);
+
+    await user.click(screen.getByRole("button", { name: "go" }));
+
+    expect(screen.getByTestId("page")).toHaveTextContent("10");
+  });
+
+  it("should clamp a request below the first page up to page 1", async () => {
+    const user = userEvent.setup();
+    render(<PageStateProbe pageCount={10} defaultPage={5} goTo={0} />);
+
+    await user.click(screen.getByRole("button", { name: "go" }));
+
+    expect(screen.getByTestId("page")).toHaveTextContent("1");
+  });
+
+  it("should clamp an out-of-range defaultPage", () => {
+    // A page index restored from a URL or localStorage can easily outlive the
+    // data it pointed at.
+    render(<PageStateProbe pageCount={10} defaultPage={999} />);
+
+    expect(screen.getByTestId("page")).toHaveTextContent("10");
+  });
+
+  it("should notify onPageChange with the clamped page, not the raw request", async () => {
+    const onPageChange = vi.fn();
+    const user = userEvent.setup();
+    render(<PageStateProbe pageCount={10} goTo={99} onPageChange={onPageChange} />);
+
+    await user.click(screen.getByRole("button", { name: "go" }));
+
+    expect(onPageChange).toHaveBeenCalledWith(10);
+  });
+
+  it("should not notify onPageChange when the page has not actually changed", async () => {
+    const onPageChange = vi.fn();
+    const user = userEvent.setup();
+    render(<PageStateProbe pageCount={10} defaultPage={3} goTo={3} onPageChange={onPageChange} />);
+
+    await user.click(screen.getByRole("button", { name: "go" }));
+
+    expect(onPageChange).not.toHaveBeenCalled();
+  });
+});

package/src/usePagination/__tests__/usePagination.range.test.tsx

@@ -0,0 +1,82 @@
+import { describe, expect, it } from "vitest";
+import { paginationRange } from "../usePagination.ts";
+
+/** Render a range compactly: pages as numbers, gaps as the pages they hide. */
+function shape(items: ReturnType<typeof paginationRange>): string {
+  return items
+    .map((item) => (item.type === "page" ? String(item.page) : `[${item.pages.join(",")}]`))
+    .join(" ");
+}
+
+describe("paginationRange", () => {
+  it("should list every page when the window is wide enough to cover the range", () => {
+    // Note the defaults do NOT show all 5: siblingCount 1 + boundaryCount 1
+    // leaves {1,2,5} visible, collapsing [3,4]. Covering a 5-page range takes a
+    // wider window — asserted below so the default's tighter shape is a
+    // deliberate, visible choice rather than an accident.
+    expect(shape(paginationRange(3, 5, { window: "sliding", siblingCount: 2 }))).toBe("1 2 3 4 5");
+  });
+
+  it("should collapse even a short range at the default window", () => {
+    expect(shape(paginationRange(1, 5, { window: "sliding" }))).toBe("1 2 [3,4] 5");
+  });
+
+  it("should collapse the tail when the current page is near the start", () => {
+    expect(shape(paginationRange(2, 10, { window: "sliding" }))).toBe("1 2 3 [4,5,6,7,8,9] 10");
+  });
+
+  it("should collapse the head when the current page is near the end", () => {
+    expect(shape(paginationRange(9, 10, { window: "sliding" }))).toBe("1 [2,3,4,5,6,7] 8 9 10");
+  });
+
+  it("should collapse both ends when the current page is mid-range", () => {
+    const items = paginationRange(50, 100, { window: "sliding" });
+
+    expect(items.map((i) => i.type)).toEqual([
+      "page", // 1
+      "gap", // 2-48
+      "page", // 49
+      "page", // 50 (current)
+      "page", // 51
+      "gap", // 52-99
+      "page", // 100
+    ]);
+  });
+
+  it("should hide exactly the pages between the two shown either side of a gap", () => {
+    const items = paginationRange(50, 100, { window: "sliding" });
+    const [leading] = items.filter((i) => i.type === "gap");
+
+    // The gap must be contiguous and abut its neighbours — an off-by-one here
+    // would silently drop a page from the menu, unreachable anywhere.
+    expect(leading).toEqual({
+      type: "gap",
+      pages: Array.from({ length: 47 }, (_, i) => i + 2),
+    });
+  });
+
+  it("should show a lone hidden page instead of collapsing it", () => {
+    // Hiding one number behind a menu costs a click and saves no width — the
+    // ellipsis cell is the same square as the number it would replace.
+    expect(shape(paginationRange(1, 5, { window: "sliding", siblingCount: 1, boundaryCount: 2 }))).toBe("1 2 3 4 5");
+  });
+
+  it("should widen the window around the current page with siblingCount", () => {
+    expect(shape(paginationRange(50, 100, { window: "sliding", siblingCount: 2 }))).toContain("48 49 50 51 52");
+  });
+
+  it("should pin more pages at each end with boundaryCount", () => {
+    const items = shape(paginationRange(50, 100, { window: "sliding", siblingCount: 1, boundaryCount: 2 }));
+
+    expect(items.startsWith("1 2 ")).toBe(true);
+    expect(items.endsWith(" 99 100")).toBe(true);
+  });
+
+  it("should handle a single page without emitting a gap", () => {
+    expect(shape(paginationRange(1, 1, { window: "sliding" }))).toBe("1");
+  });
+
+  it("should not emit pages beyond the range when the count is tiny", () => {
+    expect(shape(paginationRange(1, 2, { window: "sliding", siblingCount: 3, boundaryCount: 3 }))).toBe("1 2");
+  });
+});

package/src/usePagination/__tests__/usePagination.slice.test.tsx

@@ -0,0 +1,59 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { usePagination } from "../usePagination.ts";
+import type { UsePaginationOptions } from "../usePagination.ts";
+
+function SliceProbe(options: UsePaginationOptions) {
+  const { startIndex, endIndex } = usePagination(options);
+  return (
+    <span data-testid="slice">
+      {startIndex}..{endIndex}
+    </span>
+  );
+}
+
+describe("usePagination slice bounds", () => {
+  it("should give a zero-based half-open range for the first page", () => {
+    // Half-open so it drops straight into Array.slice and into a
+    // LIMIT/OFFSET query without an off-by-one at the call site.
+    render(<SliceProbe totalItems={200} pageSize={10} />);
+
+    expect(screen.getByTestId("slice")).toHaveTextContent("0..10");
+  });
+
+  it("should offset the range by the current page", () => {
+    render(<SliceProbe totalItems={200} pageSize={10} defaultPage={3} />);
+
+    expect(screen.getByTestId("slice")).toHaveTextContent("20..30");
+  });
+
+  it("should stop the last page's range at the item count, not the page size", () => {
+    // 237 items at 10/page: the last page holds 7, so endIndex must not run
+    // past the data.
+    render(<SliceProbe totalItems={237} pageSize={10} defaultPage={24} />);
+
+    expect(screen.getByTestId("slice")).toHaveTextContent("230..237");
+  });
+
+  it("should collapse to an empty range when there are no items", () => {
+    render(<SliceProbe totalItems={0} pageSize={10} />);
+
+    expect(screen.getByTestId("slice")).toHaveTextContent("0..0");
+  });
+
+  it("should not clamp the range when the total is unknown", () => {
+    // A server that reports pageCount but not an exact total is common. With
+    // no total to clamp against, the range is just a full page wide.
+    render(<SliceProbe pageCount={10} pageSize={10} defaultPage={3} />);
+
+    expect(screen.getByTestId("slice")).toHaveTextContent("20..30");
+  });
+
+  it("should report an empty range when the page size is unknown", () => {
+    // pageCount given directly — the hook has no idea how big a page is, so it
+    // cannot invent slice bounds.
+    render(<SliceProbe pageCount={10} defaultPage={3} />);
+
+    expect(screen.getByTestId("slice")).toHaveTextContent("0..0");
+  });
+});

package/src/usePagination/__tests__/usePagination.windowing.test.tsx

@@ -0,0 +1,68 @@
+import { describe, expect, it } from "vitest";
+import { paginationRange } from "../usePagination.ts";
+
+function shape(items: ReturnType<typeof paginationRange>): string {
+  return items
+    .map((item) => (item.type === "page" ? String(item.page) : `[${item.pages.join(",")}]`))
+    .join(" ");
+}
+
+describe("paginationRange paged windowing", () => {
+  it("should hold the same block of pages steady while the current page moves within it", () => {
+    // The whole point: stepping 6 -> 7 -> 8 must not re-label a single cell,
+    // only move which one is active. A sliding window re-renders the numbers
+    // under the reader's cursor on every step, which reads as a flash.
+    const at6 = shape(paginationRange(6, 20, { window: "paged", blockSize: 5 }));
+    const at7 = shape(paginationRange(7, 20, { window: "paged", blockSize: 5 }));
+    const at8 = shape(paginationRange(8, 20, { window: "paged", blockSize: 5 }));
+
+    expect(at7).toBe(at6);
+    expect(at8).toBe(at6);
+  });
+
+  it("should show the block containing the current page, plus the boundaries", () => {
+    expect(shape(paginationRange(7, 20, { window: "paged", blockSize: 5 }))).toBe(
+      "1 [2,3,4,5] 6 7 8 9 10 [11,...,19] 20".replace(
+        "11,...,19",
+        "11,12,13,14,15,16,17,18,19",
+      ),
+    );
+  });
+
+  it("should advance to the next block when stepping past the block's last page", () => {
+    const atLast = shape(paginationRange(10, 20, { window: "paged", blockSize: 5 }));
+    const atNext = shape(paginationRange(11, 20, { window: "paged", blockSize: 5 }));
+
+    expect(atLast).toContain("6 7 8 9 10");
+    expect(atNext).toContain("11 12 13 14 15");
+    expect(atNext).not.toBe(atLast);
+  });
+
+  it("should fall back to the previous block when stepping before the block's first page", () => {
+    const atFirst = shape(paginationRange(6, 20, { window: "paged", blockSize: 5 }));
+    const atPrevious = shape(paginationRange(5, 20, { window: "paged", blockSize: 5 }));
+
+    expect(atFirst).toContain("6 7 8 9 10");
+    expect(atPrevious).toContain("1 2 3 4 5");
+  });
+
+  it("should not run the final block past the last page", () => {
+    // 20 pages at blockSize 5 divides evenly; 22 does not, so the last block
+    // holds only 21 and 22.
+    expect(shape(paginationRange(21, 22, { window: "paged", blockSize: 5 }))).toContain("21 22");
+    expect(shape(paginationRange(21, 22, { window: "paged", blockSize: 5 }))).not.toContain("23");
+  });
+
+  it("should still collapse a lone hidden page into a plain page", () => {
+    // Block 2-6 with boundary 1: nothing hidden at the head, so no gap.
+    expect(shape(paginationRange(3, 12, { window: "paged", blockSize: 5 }))).toBe(
+      "1 2 3 4 5 [6,7,8,9,10,11] 12",
+    );
+  });
+
+  it("should keep sliding behaviour available for consumers who prefer it", () => {
+    expect(shape(paginationRange(7, 20, { window: "sliding" }))).toBe(
+      "1 [2,3,4,5] 6 7 8 [9,...,19] 20".replace("9,...,19", "9,10,11,12,13,14,15,16,17,18,19"),
+    );
+  });
+});

package/src/usePagination/index.ts

@@ -0,0 +1 @@
+export * from "./usePagination.ts";