1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:T1241,"use client"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { focusRing } from "@/registry/tier-2-primitives/lib/cva"; import { Button } from "@/registry/tier-3-components/button"; import { ChevronRightGlyph } from "@/registry/tier-2-primitives/glyphs"; /** * Pagination. * * `

` wrapping a list, with the current page * marked `aria-current="page"`. Without that, a screen reader hears "1 2 3 4 5" * and has no way to know which one it is on. * * The ellipsis is `aria-hidden`. It is a visual shorthand for "there are more", * and reading "ellipsis" aloud between two numbers helps nobody — the * page-count summary carries that information instead. */ export type PaginationProps = { page: number; totalPages: number; onPageChange: (page: number) => void; /** Windowed page numbers either side of the current one. */ siblings?: number; className?: string; }; /** * The window of pages to show: always the first and last, always `siblings` * either side of the current page, with a gap marker where numbers are * skipped. */ function pageWindow(page: number, total: number, siblings: number): (number | "gap")[] { const totalSlots = siblings * 2 + 5; // first, last, current, 2 gaps if (total <= totalSlots) { return Array.from({ length: total }, (_, index) => index + 1); } const left = Math.max(page - siblings, 1); const right = Math.min(page + siblings, total); const showLeftGap = left > 2; const showRightGap = right < total - 1; const pages: (number | "gap")[] = [1]; if (showLeftGap) pages.push("gap"); for (let index = Math.max(left, 2); index <= Math.min(right, total - 1); index += 1) { pages.push(index); } if (showRightGap) pages.push("gap"); pages.push(total); return pages; } export function Pagination({ page, totalPages, onPageChange, siblings = 1, className, }: PaginationProps) { if (totalPages <= 1) return null; const pages = pageWindow(page, totalPages, siblings); return (

), )}

); } /** * "Showing 1–24 of 412" — the line that belongs beside every paginated list. * * A page number alone doesn't answer "how much is there", which is the question * somebody scrolling a category listing is actually asking. */ export function PaginationSummary({ page, perPage, total, unit = "items", className, }: { page: number; perPage: number; total: number; unit?: string; className?: string; }) { const from = total === 0 ? 0 : (page - 1) * perPage + 1; const to = Math.min(page * perPage, total); return (

Showing {from.toLocaleString("en-IN")}–{to.toLocaleString("en-IN")} of{" "} {total.toLocaleString("en-IN")} {unit}

); } 24:Tadbd,

"use client";

import { cn } from "@/registry/tier-2-primitives/lib/cn";
import { focusRing } from "@/registry/tier-2-primitives/lib/cva";
import { Button } from "@/registry/tier-3-components/button";
import { ChevronRightGlyph } from "@/registry/tier-2-primitives/glyphs";

/**
 * Pagination.
 *
 * `<nav aria-label="Pagination">` wrapping a list, with the current page
 * marked `aria-current="page"`. Without that, a screen reader hears "1 2 3 4 5"
 * and has no way to know which one it is on.
 *
 * The ellipsis is `aria-hidden`. It is a visual shorthand for "there are more",
 * and reading "ellipsis" aloud between two numbers helps nobody — the
 * page-count summary carries that information instead.
 */
export type PaginationProps = {
  page: number;
  totalPages: number;
  onPageChange: (page: number) => void;
  /** Windowed page numbers either side of the current one. */
  siblings?: number;
  className?: string;
};

/**
 * The window of pages to show: always the first and last, always `siblings`
 * either side of the current page, with a gap marker where numbers are
 * skipped.
 */
function pageWindow(page: number, total: number, siblings: number): (number | "gap")[] {
  const totalSlots = siblings * 2 + 5; // first, last, current, 2 gaps
  if (total <= totalSlots) {
    return Array.from({ length: total }, (_, index) => index + 1);
  }

  const left = Math.max(page - siblings, 1);
  const right = Math.min(page + siblings, total);
  const showLeftGap = left > 2;
  const showRightGap = right < total - 1;

  const pages: (number | "gap")[] = [1];
  if (showLeftGap) pages.push("gap");
  for (let index = Math.max(left, 2); index <= Math.min(right, total - 1); index += 1) {
    pages.push(index);
  }
  if (showRightGap) pages.push("gap");
  pages.push(total);
  return pages;
}

export function Pagination({
  page,
  totalPages,
  onPageChange,
  siblings = 1,
  className,
}: PaginationProps) {
  if (totalPages <= 1) return null;
  const pages = pageWindow(page, totalPages, siblings);

  return (
    <nav
      data-slot="pagination"
      aria-label="Pagination"
      className={cn("flex items-center gap-1.5 font-ui", className)}
    >
      <Button
        variant="ghost"
        size="icon-sm"
        icon={<ChevronRightGlyph className="rotate-180" />}
        aria-label="Previous page"
        disabled={page <= 1}
        onClick={() => onPageChange(page - 1)}
      />

      <ol className="flex items-center gap-1">
        {pages.map((entry, index) =>
          entry === "gap" ? (
            <li key={`gap-${index}`} aria-hidden className="px-1.5 text-text-muted">
              …
            </li>
          ) : (
            <li key={entry}>
              <button
                type="button"
                aria-current={entry === page ? "page" : undefined}
                aria-label={`Page ${entry}`}
                onClick={() => onPageChange(entry)}
                className={cn(
                  "grid h-[var(--control-h-sm)] min-w-[var(--control-h-sm)] place-items-center rounded-sm px-2",
                  "text-label font-bold transition-colors motion-instant",
                  entry === page
                    ? "bg-surface-inverse text-text-inverse"
                    : "text-text-secondary hover:bg-surface-sunken hover:text-text-primary",
                  focusRing,
                )}
              >
                {entry}
              </button>
            </li>
          ),
        )}
      </ol>

      <Button
        variant="ghost"
        size="icon-sm"
        icon={<ChevronRightGlyph />}
        aria-label="Next page"
        disabled={page >= totalPages}
        onClick={() => onPageChange(page + 1)}
      />

      {/* The count in words, for the people the ellipsis doesn't serve. */}
      <span className="sr-only" aria-live="polite">
        Page {page} of {totalPages}
      </span>
    </nav>
  );
}

/**
 * "Showing 1–24 of 412" — the line that belongs beside every paginated list.
 *
 * A page number alone doesn't answer "how much is there", which is the question
 * somebody scrolling a category listing is actually asking.
 */
export function PaginationSummary({
  page,
  perPage,
  total,
  unit = "items",
  className,
}: {
  page: number;
  perPage: number;
  total: number;
  unit?: string;
  className?: string;
}) {
  const from = total === 0 ? 0 : (page - 1) * perPage + 1;
  const to = Math.min(page * perPage, total);
  return (
    <p className={cn("font-ui text-caption text-text-muted", className)}>
      Showing {from.toLocaleString("en-IN")}–{to.toLocaleString("en-IN")} of{" "}
      {total.toLocaleString("en-IN")} {unit}
    </p>
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Composites"}],["$","$L1e",null,{"children":"Pagination"}],["$","$L1f",null,{"children":"A windowed page list and the range summary beside it."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"pagination"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/pagination","source":"$23","highlighted":"$24","npm":[],"registry":["@woohl/button","@woohl/cva","@woohl/glyphs","@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]