@blakesteve/roster 5.5.0 → 5.6.0

package/README.md

@@ -1381,6 +1381,81 @@ submit button from sending its form twice. It no longer dims, since
 the spinner says it's busy. `loadingLabel` names the spinner ("loading" by
 default). `disabled` is unchanged and wins over `isLoading`.
 
+### Pagination
+
+Moves through pages of a list, built for a long list browsed on a phone.
+Controlled: you hold `page` and `pageCount`.
+
+```tsx
+import { Pagination } from "@blakesteve/roster";
+
+// Pages in your own state: every control is a button.
+<Pagination page={page} pageCount={79} onPageChange={setPage} />
+
+// Pages that are URLs: every control is a real link.
+<Pagination
+  page={page}
+  pageCount={79}
+  getPageHref={(p) => `/catalog?page=${p}`}
+  linkComponent={NextLink}   // from a "use client" wrapper
+  navigate={router.push}     // for the compact form's page picker
+/>
+```
+
+**Buttons or links.** Without `getPageHref`, controls are buttons and
+`onPageChange(page)` is the only thing that changes the page. With it, every
+control is an `<a href>` (crawlable, shareable, openable in a new tab) rendered
+through `linkComponent` (a plain `<a>` by default; it gets `href` and `to`, so
+`next/link` and React Router's `Link` both work). `onPageChange` is then called
+on a plain click before the link is followed. The compact form's page picker
+has no link to follow, so it calls `navigate(href)`, or loads the page.
+
+**Two forms, chosen by the pager's own width** (a container query, so it's
+right in a sidebar and needs no measuring):
+
+- **448px and up:** previous, the first page, the current page with a
+  neighbor each side, the last page, gaps between, and next. That's always
+  seven equal slots, so the buttons don't shift under the pointer as you page.
+  The words "Previous" and "Next" join the arrows from 576px.
+- **Under 448px:** previous, a page picker ("Page 40 of 79"), and next, with
+  the first and last pages joining from 384px. Any page is two taps away, and
+  on a phone the picker is the system's own list.
+
+`layout` picks one form (`"pages"`, `"compact"`), or `"arrows"` for first,
+previous, next and last beside a count the app shows itself, which is what
+DataTable uses.
+
+What it promises:
+
+- **Every control is a 44px target,** at every width.
+- **The current page is `aria-current="page"`,** the pager is a `nav` named by
+  `labels.nav`, and every control's name says the page it goes to ("Next page
+  (41)"). A new page is said in a polite live region ("Page 41 of 79").
+- **Focus stays on the control that was pressed.** A page number is the same
+  element afterwards, and an arrow that reaches the end stays focusable,
+  `aria-disabled` rather than `disabled`. To take a reader to the top of the
+  new page, focus your list's heading in `onPageChange`.
+- **Every word is a `labels` entry,** page numbers included (`labels.number`).
+- **No Font Awesome:** the chevrons are inline SVG.
+- **The picker waits for the keyboard.** A pick from its list goes at once.
+  Arrow keys on the closed picker (which step it on Windows and Linux) hold the
+  choice until Enter or leaving it; Escape puts it back.
+
+Things to know:
+
+- **Give the pager a width.** It sizes its form by the width it's given, so in
+  a slot that sizes to its content (an `ml-auto` box beside a heading, an `auto`
+  grid column) it falls back to 18rem, the compact form. For numbers there,
+  give the slot a width (`flex-1`, a `1fr` column) or pass `layout="pages"`.
+- **`siblings` above 1** needs more room than the 448px switch allows for;
+  force `layout` if you widen it.
+- **When you move focus yourself,** pass `announce={false}`: the heading you
+  focus says the new page, and the live region would say it again.
+- **In jsdom tests,** where no CSS applies, `layout="auto"` renders both forms;
+  pass a `layout`, or query inside `[data-pagination-layout="pages"]`.
+- **Wire it fully.** With neither `onPageChange` nor `getPageHref` nothing
+  pages, and in link mode without `navigate` the picker does a full page load.
+
 ### Carousel
 
 A sideways row: a row of cards, a selection strip, or a gallery of one per
@@ -1524,6 +1599,7 @@ function App() {
 | `MatchupCard`     | Head-to-head comparison card                                                |
 | `MediaPreview`    | Thumbnail that falls back to "Preview unavailable, open original" when it can't render |
 | `FileUpload`      | Picks files and uploads each through the app's `upload`, with per-file progress, retry and rules |
+| `Pagination`      | Page numbers with gaps, or a compact page picker on narrow screens; buttons or real links, 44px targets |
 | `Pullquote`       | A line lifted out of prose, as `<figure>` + `<blockquote>` + `<figcaption>` |
 | `RadioGroup`      | Radio set reporting one `string`; descriptions, error, 44px targets         |
 | `Toast`           | Transient floating notice; `Toaster` + the imperative `toast` handle        |
@@ -1534,7 +1610,7 @@ function App() {
 | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `ActionBar` | Sticky bottom action strip                                                                                                                                         |
 | `Countdown` | Live countdown timer                                                                                                                                               |
-| `DataTable` | Full-featured table with sorting and pagination via TanStack Table v9. Imported from `@blakesteve/roster/data-table` (see [DataTable columns](#datatable-columns)) |
+| `DataTable` | Full-featured table with sorting and pagination via TanStack Table v9; its pager is `Pagination`'s arrows, worded through `paginationLabels`. Imported from `@blakesteve/roster/data-table` (see [DataTable columns](#datatable-columns)) |
 | `Dialog`    | Modal dialog; `onAfterClose` runs once it has finished closing                                                                                                     |
 | `Footer`    | Site footer                                                                                                                                                        |
 | `ModerationQueue` | Items waiting for a decision: busy per action, confirm, reason and edit steps, focus after an item leaves, a live region. Never fetches (see [ModerationQueue](#moderationqueue)) |

package/dist/components/molecules/Pagination/Pagination.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),w=require("react"),v=require("../../../lib/utils.cjs"),ee=require("../../atoms/Button/Button.cjs"),te=require("../../atoms/Button/button-variants.cjs"),se=require("../../atoms/Select/select-variants.cjs"),Q=require("./page-items.cjs"),re={nav:"Pagination",page:t=>`Page ${t}`,number:t=>String(t),previous:"Previous",next:"Next",previousPage:t=>t===null?"Previous page":`Previous page (${t})`,nextPage:t=>t===null?"Next page":`Next page (${t})`,firstPage:t=>t===null?"First page":`First page (${t})`,lastPage:t=>t===null?"Last page":`Last page (${t})`,gap:"…",picker:"Page",of:t=>`of ${t}`,status:(t,i)=>`Page ${t} of ${i}`};function ae({href:t,className:i,children:c,onClick:o,...d}){return e.jsx("a",{href:t,className:i,onClick:o,"aria-label":d["aria-label"],"aria-current":d["aria-current"],"aria-disabled":d["aria-disabled"],children:c})}const ne="rst:h-11 rst:min-w-11 rst:px-2",ie="rst:cursor-not-allowed rst:opacity-50",le="rst:forced-colors:border-2 rst:forced-colors:underline rst:forced-colors:decoration-2 rst:forced-colors:underline-offset-4",X={width:18,height:18,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0},F=({dir:t,double:i=!1})=>e.jsx("svg",{...X,className:"rst:shrink-0",children:t==="left"?i?e.jsx("path",{d:"m11 17-5-5 5-5M18 17l-5-5 5-5"}):e.jsx("path",{d:"m15 18-6-6 6-6"}):i?e.jsx("path",{d:"m13 17 5-5-5-5M6 17l5-5-5-5"}):e.jsx("path",{d:"m9 18 6-6-6-6"})});function oe({id:t,describedBy:i,page:c,pageCount:o,number:d,onCommit:k}){const[u,j]=w.useState(null),p=w.useRef(!1),x=u&&u.page===c?u.value:null,b=l=>{j(null),l!==c&&k(l)},P=w.useMemo(()=>Array.from({length:o},(l,f)=>e.jsx("option",{value:f+1,children:d(f+1)},f+1)),[o,d]);return e.jsx("select",{id:t,value:x??c,"aria-describedby":i,disabled:o<1,onKeyDown:l=>{if(l.key==="Enter"){x!==null&&(l.preventDefault(),b(x));return}if(l.key==="Escape"){j(null);return}p.current=!0,setTimeout(()=>{p.current=!1},0)},onChange:l=>{const f=Number(l.currentTarget.value);p.current?j({page:c,value:f}):b(f)},onBlur:()=>{x!==null&&b(x)},className:v.cn(se.selectTriggerVariants({variant:"outline"}),"rst:h-11 rst:w-auto rst:min-w-16 rst:appearance-none rst:pl-3 rst:pr-8 rst:text-base rst:tabular-nums"),"data-pagination-picker":"",children:P})}function ce({page:t,pageCount:i,onPageChange:c,getPageHref:o,linkComponent:d,navigate:k,layout:u="auto",siblings:j=1,edges:p=!0,align:x="center",variant:b="ghost",announce:P=!0,labels:l,className:f}){const a={...re,...l},m=Number.isFinite(i)?Math.max(0,Math.floor(i)):0,n=Q.clampPage(t,m),C=w.useId(),Y=d??ae,[E,Z]=w.useState({page:n,text:""});E.page!==n&&Z({page:n,text:P?a.status(n,m):""});const L=s=>{s!==Math.floor(t)&&c?.(s)},y=(s,r,N,A)=>{const h=s==="page"&&r===n,$=r===null,U=v.cn(ne,$&&ie,h&&le,A.className),W=s==="page"?`page-${r}`:s;if(o){const J=o(r??n);return e.jsx(Y,{href:J,to:J,className:v.cn(te.buttonVariants({variant:h?"solid":b,colorScheme:h?"primary":"neutral"}),U),"aria-label":A.label,"aria-current":h?"page":void 0,"aria-disabled":$?!0:void 0,onClick:g=>{if($){g.preventDefault();return}!g.defaultPrevented&&g.button===0&&!g.metaKey&&!g.ctrlKey&&!g.shiftKey&&!g.altKey&&r!==null&&L(r)},children:N},W)}return e.jsx(ee.Button,{type:"button",variant:h?"solid":b,colorScheme:h?"primary":"neutral",className:U,"aria-label":A.label,"aria-current":h?"page":void 0,"aria-disabled":$||void 0,onClick:()=>{r!==null&&L(r)},children:N},W)},I=n>1?n-1:null,R=n<m?n+1:null,T=n>1?1:null,B=n<m?m:null,M=s=>y("previous",I,e.jsxs(e.Fragment,{children:[e.jsx(F,{dir:"left"}),s&&e.jsx("span",{className:"rst:hidden rst:pr-1 rst:@[36rem]:inline",children:a.previous})]}),{label:a.previousPage(I)}),S=s=>y("next",R,e.jsxs(e.Fragment,{children:[s&&e.jsx("span",{className:"rst:hidden rst:pl-1 rst:@[36rem]:inline",children:a.next}),e.jsx(F,{dir:"right"})]}),{label:a.nextPage(R)}),K=s=>y("first",T,e.jsx(F,{dir:"left",double:!0}),{label:a.firstPage(T),className:s?"rst:hidden rst:@[24rem]:inline-flex":void 0}),V=s=>y("last",B,e.jsx(F,{dir:"right",double:!0}),{label:a.lastPage(B),className:s?"rst:hidden rst:@[24rem]:inline-flex":void 0}),D="rst:flex rst:flex-wrap rst:items-center rst:gap-1",q={start:"rst:justify-start",center:"rst:justify-center",end:"rst:justify-end"}[x],O=s=>e.jsxs("div",{className:v.cn(D,q,s),"data-pagination-layout":"pages",children:[M(!0),Q.pageItems(n,m,j).map(r=>typeof r=="number"?y("page",r,a.number(r),{label:a.page(r)}):e.jsx("span",{"aria-hidden":"true",className:"rst:inline-flex rst:h-11 rst:w-11 rst:items-center rst:justify-center rst:text-sm rst:text-gray-500 rst:dark:text-gray-400",children:a.gap},r)),S(!0)]}),_=`${C}-picker`,z=`${C}-of`,G=s=>e.jsxs("div",{className:v.cn(D,q,s),"data-pagination-layout":"compact",children:[p&&K(!0),M(!1),e.jsxs("div",{className:"rst:flex rst:items-center rst:gap-2 rst:px-1 rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]",children:[e.jsx("label",{htmlFor:_,children:a.picker}),e.jsxs("span",{className:"rst:relative rst:inline-flex",children:[e.jsx(oe,{id:_,describedBy:z,page:n,pageCount:m,number:a.number,onCommit:r=>{if(o){c?.(r);const N=o(r);k?k(N):window.location.assign(N)}else L(r)}}),e.jsx("svg",{...X,width:16,height:16,className:"rst:pointer-events-none rst:absolute rst:right-2.5 rst:top-1/2 rst:-translate-y-1/2 rst:text-gray-500 rst:dark:text-gray-400",children:e.jsx("path",{d:"m6 9 6 6 6-6"})})]}),e.jsx("span",{id:z,className:"rst:tabular-nums",children:a.of(m)})]}),S(!1),p&&V(!0)]}),H=e.jsxs("div",{className:v.cn(D,q),"data-pagination-layout":"arrows",children:[p&&K(!1),M(!1),S(!1),p&&V(!1)]});return e.jsxs("nav",{"aria-label":a.nav,className:v.cn("rst:font-ui",u==="arrows"?"rst:w-fit":"rst:@container rst:w-full rst:[contain-intrinsic-inline-size:18rem]",f),"data-pagination":"",children:[u==="pages"&&O(),u==="compact"&&G(),u==="arrows"&&H,u==="auto"&&e.jsxs(e.Fragment,{children:[O("rst:hidden rst:@[28rem]:flex"),G("rst:@[28rem]:hidden")]}),P&&e.jsx("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:"rst:sr-only","data-pagination-live":"",children:E.text})]})}exports.Pagination=ce;

package/dist/components/molecules/Pagination/Pagination.d.ts

@@ -0,0 +1,116 @@
+import { ComponentType, MouseEvent, ReactNode } from 'react';
+/** Every word Pagination shows or says. Pass any of them in `labels` to replace it. */
+export interface PaginationLabels {
+    /** The landmark's name. A page with two pagers needs each named. */
+    nav: string;
+    /** A page number's accessible name: "Page 40". */
+    page: (page: number) => string;
+    /** A page number as shown. */
+    number: (page: number) => string;
+    /** Shown beside the arrows where there's room. */
+    previous: string;
+    next: string;
+    /** Each arrow's accessible name, given the page it goes to, or `null` at the end it can't pass. */
+    previousPage: (target: number | null) => string;
+    nextPage: (target: number | null) => string;
+    firstPage: (target: number | null) => string;
+    lastPage: (target: number | null) => string;
+    /** Where pages are skipped. Hidden from screen readers, which hear the numbers either side. */
+    gap: string;
+    /** The page picker's label in the compact form: "Page". */
+    picker: string;
+    /** After the picker: "of 79". */
+    of: (pageCount: number) => string;
+    /** Said politely when the page changes: "Page 41 of 79". */
+    status: (page: number, pageCount: number) => string;
+}
+/**
+ * The props every link is rendered with, in link mode.
+ *
+ * `href` and `to` carry the same value, so `next/link`, React Router's `Link`
+ * and a plain `<a>` all work without a wrapper.
+ */
+export interface PaginationLinkProps {
+    href: string;
+    to: string;
+    className: string;
+    children: ReactNode;
+    "aria-label": string;
+    "aria-current"?: "page";
+    "aria-disabled"?: true;
+    onClick: (event: MouseEvent<HTMLAnchorElement>) => void;
+}
+export interface PaginationProps {
+    /** The current page, from 1. */
+    page: number;
+    /** How many pages there are. */
+    pageCount: number;
+    /**
+     * Called with the page a control goes to.
+     *
+     * Without `getPageHref`, every control is a button and this is the only
+     * thing that changes the page: page in your own state.
+     *
+     * With `getPageHref`, the controls are links and navigate themselves; this
+     * is called first, on a plain left click (not one that opens a new tab),
+     * for an app that wants to do something as it goes.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Makes every control a real link to `getPageHref(page)`: crawlable,
+     * shareable, and openable in a new tab. Use it when your pages are URLs.
+     */
+    getPageHref?: (page: number) => string;
+    /**
+     * Renders each link in link mode. Defaults to a plain `<a>`, which is right
+     * for a static site and wrong inside a router, where every hop becomes a
+     * full page load.
+     *
+     * **Pass it from a client component.** Functions can not cross the React
+     * Server Component boundary. Bind it in a small `"use client"` wrapper.
+     */
+    linkComponent?: ComponentType<PaginationLinkProps>;
+    /**
+     * How the compact form's page picker goes to a page in link mode, where
+     * there's no link to follow. Defaults to a full page load
+     * (`location.assign`); pass your router's push to stay client-side.
+     */
+    navigate?: (href: string) => void;
+    /**
+     * - `"pages"`: previous, page numbers with gaps, next.
+     * - `"compact"`: previous, a page picker ("Page 40 of 79"), next, and the
+     *   first and last pages where there's room. Any page is two taps away.
+     * - `"arrows"`: first, previous, next, last, for a pager that shows its
+     *   own position.
+     * - `"auto"` (the default): `"pages"` where the pager has room, `"compact"`
+     *   where it doesn't. Decided by the pager's own width, not the screen's.
+     */
+    layout?: "auto" | "pages" | "compact" | "arrows";
+    /** Page numbers shown either side of the current one. */
+    siblings?: number;
+    /** Whether the compact and arrow forms offer the first and last pages. */
+    edges?: boolean;
+    /** Where the controls sit in the pager's width. */
+    align?: "start" | "center" | "end";
+    /** How the controls other than the current page are drawn. */
+    variant?: "ghost" | "outline";
+    /** Say the new page in a polite live region when it changes. */
+    announce?: boolean;
+    labels?: Partial<PaginationLabels>;
+    className?: string;
+}
+/**
+ * Moves through pages of a list.
+ *
+ * Controlled: you hold `page`, and the pager says which page a control goes
+ * to. Its controls are buttons that call `onPageChange`, or, with
+ * `getPageHref`, real links.
+ *
+ * **Focus.** A control keeps focus after the page changes: the number you
+ * pressed is the same element afterwards, and an arrow that reaches the end
+ * stays focusable, `aria-disabled`. Nothing moves focus for you. To take a
+ * reader to the top of the new page, focus your list's heading in
+ * `onPageChange`.
+ */
+declare function Pagination({ page: rawPage, pageCount: rawCount, onPageChange, getPageHref, linkComponent, navigate, layout, siblings, edges, align, variant, announce, labels: overrides, className, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export { Pagination };

package/dist/components/molecules/Pagination/Pagination.js

@@ -0,0 +1,247 @@
+"use client";
+import { jsxs as u, Fragment as I, jsx as e } from "react/jsx-runtime";
+import { useId as et, useState as X, useRef as rt, useMemo as st } from "react";
+import { cn as x } from "../../../lib/utils.js";
+import { Button as at } from "../../atoms/Button/Button.js";
+import { buttonVariants as nt } from "../../atoms/Button/button-variants.js";
+import { selectTriggerVariants as it } from "../../atoms/Select/select-variants.js";
+import { clampPage as lt, pageItems as ot } from "./page-items.js";
+const ct = {
+  nav: "Pagination",
+  page: (t) => `Page ${t}`,
+  number: (t) => String(t),
+  previous: "Previous",
+  next: "Next",
+  previousPage: (t) => t === null ? "Previous page" : `Previous page (${t})`,
+  nextPage: (t) => t === null ? "Next page" : `Next page (${t})`,
+  firstPage: (t) => t === null ? "First page" : `First page (${t})`,
+  lastPage: (t) => t === null ? "Last page" : `Last page (${t})`,
+  gap: "…",
+  picker: "Page",
+  of: (t) => `of ${t}`,
+  status: (t, i) => `Page ${t} of ${i}`
+};
+function dt({ href: t, className: i, children: c, onClick: o, ...p }) {
+  return /* @__PURE__ */ e(
+    "a",
+    {
+      href: t,
+      className: i,
+      onClick: o,
+      "aria-label": p["aria-label"],
+      "aria-current": p["aria-current"],
+      "aria-disabled": p["aria-disabled"],
+      children: c
+    }
+  );
+}
+const ut = "rst:h-11 rst:min-w-11 rst:px-2", pt = "rst:cursor-not-allowed rst:opacity-50", ft = "rst:forced-colors:border-2 rst:forced-colors:underline rst:forced-colors:decoration-2 rst:forced-colors:underline-offset-4", Y = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0 }, j = ({ dir: t, double: i = !1 }) => /* @__PURE__ */ e("svg", { ...Y, className: "rst:shrink-0", children: t === "left" ? i ? /* @__PURE__ */ e("path", { d: "m11 17-5-5 5-5M18 17l-5-5 5-5" }) : /* @__PURE__ */ e("path", { d: "m15 18-6-6 6-6" }) : i ? /* @__PURE__ */ e("path", { d: "m13 17 5-5-5-5M6 17l5-5-5-5" }) : /* @__PURE__ */ e("path", { d: "m9 18 6-6-6-6" }) });
+function mt({
+  id: t,
+  describedBy: i,
+  page: c,
+  pageCount: o,
+  number: p,
+  onCommit: P
+}) {
+  const [d, N] = X(null), f = rt(!1), v = d && d.page === c ? d.value : null, y = (l) => {
+    N(null), l !== c && P(l);
+  }, $ = st(
+    () => Array.from({ length: o }, (l, m) => /* @__PURE__ */ e("option", { value: m + 1, children: p(m + 1) }, m + 1)),
+    [o, p]
+  );
+  return /* @__PURE__ */ e(
+    "select",
+    {
+      id: t,
+      value: v ?? c,
+      "aria-describedby": i,
+      disabled: o < 1,
+      onKeyDown: (l) => {
+        if (l.key === "Enter") {
+          v !== null && (l.preventDefault(), y(v));
+          return;
+        }
+        if (l.key === "Escape") {
+          N(null);
+          return;
+        }
+        f.current = !0, setTimeout(() => {
+          f.current = !1;
+        }, 0);
+      },
+      onChange: (l) => {
+        const m = Number(l.currentTarget.value);
+        f.current ? N({ page: c, value: m }) : y(m);
+      },
+      onBlur: () => {
+        v !== null && y(v);
+      },
+      className: x(
+        it({ variant: "outline" }),
+        /* 16px: iOS zooms the page into a select whose text is smaller. */
+        "rst:h-11 rst:w-auto rst:min-w-16 rst:appearance-none rst:pl-3 rst:pr-8 rst:text-base rst:tabular-nums"
+      ),
+      "data-pagination-picker": "",
+      children: $
+    }
+  );
+}
+function kt({
+  page: t,
+  pageCount: i,
+  onPageChange: c,
+  getPageHref: o,
+  linkComponent: p,
+  navigate: P,
+  layout: d = "auto",
+  siblings: N = 1,
+  edges: f = !0,
+  align: v = "center",
+  variant: y = "ghost",
+  announce: $ = !0,
+  labels: l,
+  className: m
+}) {
+  const a = { ...ct, ...l }, h = Number.isFinite(i) ? Math.max(0, Math.floor(i)) : 0, n = lt(t, h), S = et(), Z = p ?? dt, [T, H] = X({ page: n, text: "" });
+  T.page !== n && H({ page: n, text: $ ? a.status(n, h) : "" });
+  const D = (r) => {
+    r !== Math.floor(t) && c?.(r);
+  }, w = (r, s, k, F) => {
+    const g = r === "page" && s === n, L = s === null, q = x(ut, L && pt, g && ft, F.className), J = r === "page" ? `page-${s}` : r;
+    if (o) {
+      const Q = o(s ?? n);
+      return /* @__PURE__ */ e(
+        Z,
+        {
+          href: Q,
+          to: Q,
+          className: x(nt({ variant: g ? "solid" : y, colorScheme: g ? "primary" : "neutral" }), q),
+          "aria-label": F.label,
+          "aria-current": g ? "page" : void 0,
+          "aria-disabled": L ? !0 : void 0,
+          onClick: (b) => {
+            if (L) {
+              b.preventDefault();
+              return;
+            }
+            !b.defaultPrevented && b.button === 0 && !b.metaKey && !b.ctrlKey && !b.shiftKey && !b.altKey && s !== null && D(s);
+          },
+          children: k
+        },
+        J
+      );
+    }
+    return /* @__PURE__ */ e(
+      at,
+      {
+        type: "button",
+        variant: g ? "solid" : y,
+        colorScheme: g ? "primary" : "neutral",
+        className: q,
+        "aria-label": F.label,
+        "aria-current": g ? "page" : void 0,
+        "aria-disabled": L || void 0,
+        onClick: () => {
+          s !== null && D(s);
+        },
+        children: k
+      },
+      J
+    );
+  }, B = n > 1 ? n - 1 : null, K = n < h ? n + 1 : null, R = n > 1 ? 1 : null, O = n < h ? h : null, M = (r) => w(
+    "previous",
+    B,
+    /* @__PURE__ */ u(I, { children: [
+      /* @__PURE__ */ e(j, { dir: "left" }),
+      r && /* @__PURE__ */ e("span", { className: "rst:hidden rst:pr-1 rst:@[36rem]:inline", children: a.previous })
+    ] }),
+    { label: a.previousPage(B) }
+  ), A = (r) => w(
+    "next",
+    K,
+    /* @__PURE__ */ u(I, { children: [
+      r && /* @__PURE__ */ e("span", { className: "rst:hidden rst:pl-1 rst:@[36rem]:inline", children: a.next }),
+      /* @__PURE__ */ e(j, { dir: "right" })
+    ] }),
+    { label: a.nextPage(K) }
+  ), V = (r) => w("first", R, /* @__PURE__ */ e(j, { dir: "left", double: !0 }), {
+    label: a.firstPage(R),
+    className: r ? "rst:hidden rst:@[24rem]:inline-flex" : void 0
+  }), _ = (r) => w("last", O, /* @__PURE__ */ e(j, { dir: "right", double: !0 }), {
+    label: a.lastPage(O),
+    className: r ? "rst:hidden rst:@[24rem]:inline-flex" : void 0
+  }), C = "rst:flex rst:flex-wrap rst:items-center rst:gap-1", E = { start: "rst:justify-start", center: "rst:justify-center", end: "rst:justify-end" }[v], z = (r) => /* @__PURE__ */ u("div", { className: x(C, E, r), "data-pagination-layout": "pages", children: [
+    M(!0),
+    ot(n, h, N).map(
+      (s) => typeof s == "number" ? w("page", s, a.number(s), { label: a.page(s) }) : /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "rst:inline-flex rst:h-11 rst:w-11 rst:items-center rst:justify-center rst:text-sm rst:text-gray-500 rst:dark:text-gray-400", children: a.gap }, s)
+    ),
+    A(!0)
+  ] }), G = `${S}-picker`, U = `${S}-of`, W = (r) => /* @__PURE__ */ u("div", { className: x(C, E, r), "data-pagination-layout": "compact", children: [
+    f && V(!0),
+    M(!1),
+    /* @__PURE__ */ u("div", { className: "rst:flex rst:items-center rst:gap-2 rst:px-1 rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]", children: [
+      /* @__PURE__ */ e("label", { htmlFor: G, children: a.picker }),
+      /* @__PURE__ */ u("span", { className: "rst:relative rst:inline-flex", children: [
+        /* @__PURE__ */ e(
+          mt,
+          {
+            id: G,
+            describedBy: U,
+            page: n,
+            pageCount: h,
+            number: a.number,
+            onCommit: (s) => {
+              if (o) {
+                c?.(s);
+                const k = o(s);
+                P ? P(k) : window.location.assign(k);
+              } else D(s);
+            }
+          }
+        ),
+        /* @__PURE__ */ e("svg", { ...Y, width: 16, height: 16, className: "rst:pointer-events-none rst:absolute rst:right-2.5 rst:top-1/2 rst:-translate-y-1/2 rst:text-gray-500 rst:dark:text-gray-400", children: /* @__PURE__ */ e("path", { d: "m6 9 6 6 6-6" }) })
+      ] }),
+      /* @__PURE__ */ e("span", { id: U, className: "rst:tabular-nums", children: a.of(h) })
+    ] }),
+    A(!1),
+    f && _(!0)
+  ] }), tt = /* @__PURE__ */ u("div", { className: x(C, E), "data-pagination-layout": "arrows", children: [
+    f && V(!1),
+    M(!1),
+    A(!1),
+    f && _(!1)
+  ] });
+  return (
+    /* A query container sizes itself as if it were empty across, so it takes
+       the full width it's given; in a slot that sizes to its content (an
+       `ml-auto` box, an `auto` grid column) it would be 0 wide. There it
+       falls back to 18rem, which is the compact form. The arrows need no
+       queries, and size to fit, to sit in a row beside something else. */
+    /* @__PURE__ */ u(
+      "nav",
+      {
+        "aria-label": a.nav,
+        className: x(
+          "rst:font-ui",
+          d === "arrows" ? "rst:w-fit" : "rst:@container rst:w-full rst:[contain-intrinsic-inline-size:18rem]",
+          m
+        ),
+        "data-pagination": "",
+        children: [
+          d === "pages" && z(),
+          d === "compact" && W(),
+          d === "arrows" && tt,
+          d === "auto" && /* @__PURE__ */ u(I, { children: [
+            z("rst:hidden rst:@[28rem]:flex"),
+            W("rst:@[28rem]:hidden")
+          ] }),
+          $ && /* @__PURE__ */ e("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "rst:sr-only", "data-pagination-live": "", children: T.text })
+        ]
+      }
+    )
+  );
+}
+export {
+  kt as Pagination
+};

package/dist/components/molecules/Pagination/page-items.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function p(e,a,s=1){const t=Number.isFinite(a)?Math.max(0,Math.floor(a)):0,n=Number.isFinite(s)?Math.max(0,Math.floor(s)):1,c=g(e,t),o=2*n+5,r=(h,u)=>Array.from({length:u-h+1},(d,f)=>h+f);if(t<=o)return r(1,t);const i=Math.max(c-n,1),m=Math.min(c+n,t),M=i>3,l=m<t-2;return M?l?[1,"gap-start",...r(i,m),"gap-end",t]:[1,"gap-start",...r(t-(o-3),t)]:[...r(1,o-2),"gap-end",t]}const g=(e,a)=>Math.min(Math.max(1,Math.floor(e)||1),Math.max(1,Number.isFinite(a)?Math.floor(a):1));exports.clampPage=g;exports.pageItems=p;

package/dist/components/molecules/Pagination/page-items.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Which page numbers a numbered pager shows, and where it skips.
+ *
+ * Always the same number of slots once there are more pages than fit: the
+ * first page, the last, the current one with `siblings` on each side, and a
+ * gap marker on each side, which becomes a page number itself near either
+ * end. A pager whose width doesn't change as you page through is one whose
+ * buttons don't move out from under the pointer.
+ */
+export type PageItem = number | "gap-start" | "gap-end";
+export declare function pageItems(page: number, pageCount: number, siblings?: number): PageItem[];
+/** `page` brought into 1 to `pageCount`. */
+export declare const clampPage: (page: number, pageCount: number) => number;

package/dist/components/molecules/Pagination/page-items.js

@@ -0,0 +1,11 @@
+function x(r, a, s = 1) {
+  const t = Number.isFinite(a) ? Math.max(0, Math.floor(a)) : 0, o = Number.isFinite(s) ? Math.max(0, Math.floor(s)) : 1, c = l(r, t), e = 2 * o + 5, n = (m, g) => Array.from({ length: g - m + 1 }, (p, u) => m + u);
+  if (t <= e) return n(1, t);
+  const i = Math.max(c - o, 1), h = Math.min(c + o, t), M = i > 3, f = h < t - 2;
+  return M ? f ? [1, "gap-start", ...n(i, h), "gap-end", t] : [1, "gap-start", ...n(t - (e - 3), t)] : [...n(1, e - 2), "gap-end", t];
+}
+const l = (r, a) => Math.min(Math.max(1, Math.floor(r) || 1), Math.max(1, Number.isFinite(a) ? Math.floor(a) : 1));
+export {
+  l as clampPage,
+  x as pageItems
+};

package/dist/components/organisms/DataTable/DataTable.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),w=require("react"),r=require("@tanstack/react-table"),n=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),o=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),c=require("../../../lib/utils.cjs"),i=require("../../atoms/Button/Button.cjs"),a=require("../Table/Table.cjs"),C=r.tableFeatures({rowSortingFeature:r.rowSortingFeature,rowPaginationFeature:r.rowPaginationFeature,sortedRowModel:r.createSortedRowModel(),paginatedRowModel:r.createPaginatedRowModel(),sortFns:r.sortFns});function S({columns:g,data:d,className:u,tableClassName:x,paginationClassName:m,variant:f="default",size:j="md",hoverable:p=!1}){const[b,h]=w.useState([]),t=r.useTable({features:C,data:d,columns:g,onSortingChange:h,state:{sorting:b},initialState:{pagination:{pageIndex:0,pageSize:10}}});return e.jsxs("div",{className:c.cn("rst:font-ui rst:flex rst:flex-col rst:gap-4",u),children:[e.jsxs(a.Table,{variant:f,size:j,hoverable:p,className:x,children:[e.jsx(a.TableHeader,{children:t.getHeaderGroups().map(l=>e.jsx(a.TableRow,{children:l.headers.map(s=>e.jsx(a.TableHead,{children:s.isPlaceholder?null:e.jsxs("div",{className:c.cn("rst:flex rst:items-center rst:gap-2 rst:transition-opacity",s.column.getCanSort()&&"rst:cursor-pointer rst:select-none rst:opacity-80 rst:hover:opacity-100"),onClick:s.column.getToggleSortingHandler(),children:[r.flexRender(s.column.columnDef.header,s.getContext()),s.column.getCanSort()&&e.jsx("span",{className:"rst:w-4 rst:flex rst:justify-center rst:text-primary-500",children:s.column.getIsSorted()==="asc"?e.jsx(n.FontAwesomeIcon,{icon:o.faCaretUp}):s.column.getIsSorted()==="desc"?e.jsx(n.FontAwesomeIcon,{icon:o.faCaretDown}):null})]})},s.id))},l.id))}),e.jsx(a.TableBody,{children:t.getRowModel().rows?.length?t.getRowModel().rows.map(l=>e.jsx(a.TableRow,{children:l.getAllCells().map(s=>e.jsx(a.TableCell,{children:r.flexRender(s.column.columnDef.cell,s.getContext())},s.id))},l.id)):e.jsx(a.TableRow,{children:e.jsx(a.TableCell,{colSpan:g.length,className:"rst:h-24 rst:text-center rst:text-gray-500 rst:dark:text-gray-400 rst:italic",children:"No results found."})})})]}),e.jsxs("div",{className:c.cn("rst:flex rst:flex-col rst:sm:flex-row rst:items-center rst:justify-between rst:gap-4 rst:px-2",m),children:[e.jsxs("div",{className:"rst:text-sm rst:font-medium rst:text-gray-500 rst:dark:text-gray-400",children:["Page"," ",e.jsx("strong",{className:"rst:text-gray-900 rst:dark:text-gray-100",children:t.state.pagination.pageIndex+1})," ","of"," ",e.jsx("strong",{className:"rst:text-gray-900 rst:dark:text-gray-100",children:t.getPageCount()})]}),e.jsxs("div",{className:"rst:flex rst:items-center rst:space-x-2",children:[e.jsx(i.Button,{variant:"outline",colorScheme:"neutral",size:"sm",onClick:()=>t.setPageIndex(0),disabled:!t.getCanPreviousPage(),"aria-label":"Go to first page",children:e.jsx(n.FontAwesomeIcon,{icon:o.faAnglesLeft})}),e.jsx(i.Button,{variant:"outline",colorScheme:"neutral",size:"sm",onClick:()=>t.previousPage(),disabled:!t.getCanPreviousPage(),"aria-label":"Go to previous page",children:e.jsx(n.FontAwesomeIcon,{icon:o.faAngleLeft})}),e.jsx(i.Button,{variant:"outline",colorScheme:"neutral",size:"sm",onClick:()=>t.nextPage(),disabled:!t.getCanNextPage(),"aria-label":"Go to next page",children:e.jsx(n.FontAwesomeIcon,{icon:o.faAngleRight})}),e.jsx(i.Button,{variant:"outline",colorScheme:"neutral",size:"sm",onClick:()=>t.setPageIndex(t.getPageCount()-1),disabled:!t.getCanNextPage(),"aria-label":"Go to last page",children:e.jsx(n.FontAwesomeIcon,{icon:o.faAnglesRight})})]})]})]})}exports.DataTable=S;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),a=require("@tanstack/react-table"),c=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),g=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),l=require("../../../lib/utils.cjs"),h=require("../../molecules/Pagination/Pagination.cjs"),r=require("../Table/Table.cjs"),T=a.tableFeatures({rowSortingFeature:a.rowSortingFeature,rowPaginationFeature:a.rowPaginationFeature,sortedRowModel:a.createSortedRowModel(),paginatedRowModel:a.createPaginatedRowModel(),sortFns:a.sortFns});function C({columns:i,data:d,className:u,tableClassName:x,paginationClassName:m,variant:p="default",size:f="md",hoverable:j=!1,paginationLabels:o}){const[w,b]=y.useState([]),s=a.useTable({features:T,data:d,columns:i,onSortingChange:b,state:{sorting:w},initialState:{pagination:{pageIndex:0,pageSize:10}}});return e.jsxs("div",{className:l.cn("rst:font-ui rst:flex rst:flex-col rst:gap-4",u),children:[e.jsxs(r.Table,{variant:p,size:f,hoverable:j,className:x,children:[e.jsx(r.TableHeader,{children:s.getHeaderGroups().map(n=>e.jsx(r.TableRow,{children:n.headers.map(t=>e.jsx(r.TableHead,{children:t.isPlaceholder?null:e.jsxs("div",{className:l.cn("rst:flex rst:items-center rst:gap-2 rst:transition-opacity",t.column.getCanSort()&&"rst:cursor-pointer rst:select-none rst:opacity-80 rst:hover:opacity-100"),onClick:t.column.getToggleSortingHandler(),children:[a.flexRender(t.column.columnDef.header,t.getContext()),t.column.getCanSort()&&e.jsx("span",{className:"rst:w-4 rst:flex rst:justify-center rst:text-primary-500",children:t.column.getIsSorted()==="asc"?e.jsx(c.FontAwesomeIcon,{icon:g.faCaretUp}):t.column.getIsSorted()==="desc"?e.jsx(c.FontAwesomeIcon,{icon:g.faCaretDown}):null})]})},t.id))},n.id))}),e.jsx(r.TableBody,{children:s.getRowModel().rows?.length?s.getRowModel().rows.map(n=>e.jsx(r.TableRow,{children:n.getAllCells().map(t=>e.jsx(r.TableCell,{children:a.flexRender(t.column.columnDef.cell,t.getContext())},t.id))},n.id)):e.jsx(r.TableRow,{children:e.jsx(r.TableCell,{colSpan:i.length,className:"rst:h-24 rst:text-center rst:text-gray-500 rst:dark:text-gray-400 rst:italic",children:"No results found."})})})]}),e.jsxs("div",{className:l.cn("rst:flex rst:flex-col rst:sm:flex-row rst:items-center rst:justify-between rst:gap-4 rst:px-2",m),children:[e.jsx("div",{className:"rst:text-sm rst:font-medium rst:text-gray-500 rst:dark:text-gray-400",children:o?.status?o.status(s.state.pagination.pageIndex+1,s.getPageCount()):e.jsxs(e.Fragment,{children:["Page"," ",e.jsx("strong",{className:"rst:text-gray-900 rst:dark:text-gray-100",children:s.state.pagination.pageIndex+1})," ","of"," ",e.jsx("strong",{className:"rst:text-gray-900 rst:dark:text-gray-100",children:s.getPageCount()})]})}),e.jsx(h.Pagination,{layout:"arrows",align:"end",variant:"outline",page:s.state.pagination.pageIndex+1,pageCount:s.getPageCount(),onPageChange:n=>s.setPageIndex(n-1),labels:o})]})]})}exports.DataTable=C;

package/dist/components/organisms/DataTable/DataTable.d.ts

@@ -1,4 +1,5 @@
 import { ColumnDef, RowData } from '@tanstack/react-table';
+import { PaginationLabels } from '../../molecules/Pagination/Pagination';
 import { TableProps } from '../Table/Table';
 /**
  * The feature set DataTable registers: sorting and pagination, plus the row
@@ -43,6 +44,12 @@ export interface DataTableProps<TData extends RowData> {
     variant?: TableProps["variant"];
     size?: TableProps["size"];
     hoverable?: boolean;
+    /**
+     * Replaces the pager's words; see Pagination's `labels`. `status` also
+     * replaces the "Page N of M" line beside it. ("No results found." is
+     * DataTable's own and isn't covered.)
+     */
+    paginationLabels?: Partial<PaginationLabels>;
 }
-export declare function DataTable<TData extends RowData>({ columns, data, className, tableClassName, paginationClassName, variant, size, hoverable, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData extends RowData>({ columns, data, className, tableClassName, paginationClassName, variant, size, hoverable, paginationLabels, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};