@eifi1/ui-kit 0.33.1 → 0.34.0

package/dist/components/data-table-mobile.d.ts

@@ -0,0 +1,106 @@
+import type { ReactNode } from "react";
+import { type Direction } from "../lib/direction.js";
+import type { FilterValue } from "./data-table-filters.js";
+import type { SortCycle, SortState } from "./data-table-sort.js";
+import type { DataTableLabels } from "./data-table-labels.js";
+import type { DataTableColumn, DataTableProps, FilterState, MobileSwipeActions } from "./data-table.js";
+/**
+ * Columns as label-above-value pairs: the phone card's fields at Large (§4), and the
+ * opened row's `mobileDetailsInRow` at every size. Each pair is a `<div>` in the
+ * `<dl>` — the grouping HTML allows — so a pair keeps together and the gap falls
+ * BETWEEN facts rather than between a label and its own value. `relative` holds a
+ * header's `sr-only` text (an actions column's), as every kit container must.
+ */
+export declare function StackedFields<T>({ columns, row, compact }: {
+    columns: DataTableColumn<T>[];
+    row: T;
+    compact: boolean;
+}): import("react").JSX.Element;
+/**
+ * The card list's sort control: a "Sort by" select and a direction button.
+ *
+ * keksdose K10 (inputs audit 2026-10-02 §5; its aggregated report tables, #258): a
+ * table is sorted by its header row and the phone card list has none, so the two
+ * decisions the header carries — which column, which direction — were unreachable
+ * below the breakpoint. keksdose hand-built this row over its DataTable to answer
+ * "who did I pay the most" on the device it was asked on; this is that row, driven by
+ * the SAME sort state as the headers (controlled `sorts` included), so turning the
+ * phone sideways keeps the order and a sort chosen here is the one the URL and the
+ * storage key hold.
+ *
+ * The rules are the header's: a newly picked column starts in its `firstSort`, the
+ * direction button flips the primary sort (secondary ones stay), and "Default order"
+ * — the third click of a `"tri"` cycle — is offered only under `"tri"`, since a
+ * `"toggle"` table promises it is always ranked by something. The select's label is
+ * a real `<label>` beside it, and the button sits outside that label: a click inside
+ * a label is forwarded to the control it names, so a nested button would flip AND
+ * open the select.
+ */
+export declare function MobileSort<T>({ columns, sorts, sortCycle, compact, labels, onPick, onFlip, }: {
+    columns: DataTableColumn<T>[];
+    sorts: SortState[];
+    sortCycle: SortCycle;
+    compact: boolean;
+    labels: DataTableLabels;
+    onPick: (key: string | null) => void;
+    onFlip: () => void;
+}): import("react").JSX.Element | null;
+/** One phone card: what DataTable's card list draws for a row. */
+export interface MobileRowProps<T> {
+    row: T;
+    isExpanded: DataTableProps<T>["isExpanded"];
+    /** What the row shows when opened — DataTable's `openedRowContent`. */
+    openedRowContent: (row: T) => ReactNode;
+    /** Whether an opened row has anything to show at all. */
+    opensRow: boolean;
+    rowClassName: DataTableProps<T>["rowClassName"];
+    rowAttributes: DataTableProps<T>["rowAttributes"];
+    onRowClick: DataTableProps<T>["onRowClick"];
+    rowHref: DataTableProps<T>["rowHref"];
+    /** `mobileSwipeActions`, or the swipes derived from `rowActions`. */
+    swipeActionsFor: ((row: T) => MobileSwipeActions | null) | undefined;
+    /** The card list's reading direction, for which physical drag a swipe side means. */
+    mobileDir: Direction;
+    /** No column the card renders owns a link, so the card itself may be one. */
+    mobileCardLinkable: boolean;
+    mobileCard: DataTableProps<T>["mobileCard"];
+    mobilePrimaryCol: DataTableColumn<T> | null;
+    mobileSecondaryColumns: DataTableColumn<T>[];
+    mobileExpandAsDialog: boolean;
+    compact: boolean;
+    /** The text size is Large or Extra large (§4). */
+    large: boolean;
+}
+/** One mobile card. Shared by the flat list and the grouped list, so both draw
+ *  identical row markup. */
+export declare function MobileRow<T>({ row, isExpanded, openedRowContent, opensRow, rowClassName, rowAttributes, onRowClick, rowHref, swipeActionsFor, mobileDir, mobileCardLinkable, mobileCard, mobilePrimaryCol, mobileSecondaryColumns, mobileExpandAsDialog, compact, large, }: MobileRowProps<T>): import("react").JSX.Element;
+/**
+ * Filter access for the mobile card list (feedback #299). The desktop table
+ * houses per-column filters in its header; the card list has no header, so the
+ * same filters were unreachable on phones. This renders a compact "Filters" bar
+ * that opens a bottom sheet listing each filterable column as a collapsible
+ * section, reusing the very same {@link FilterPopover} and filter state the
+ * desktop table drives — so it filters identically and stays URL-synced.
+ *
+ * The sheet is a {@link DialogFrame} (round 0.34 BUG-7b = DUP-6). It was the last
+ * hand-rolled modal in the kit: `role="dialog" aria-modal="true"` on the backdrop, with
+ * copies of the scroll lock, the backdrop close and the Back entry — and no name, no
+ * focus moved in, no trap and no Escape, so a reader was told the page was hidden while
+ * focus stayed on it. On a phone `Modal` is a bottom sheet already; it now brings all
+ * of that, and the exit motion, from the one place every other dialog gets it.
+ */
+export declare function MobileFilters<T>({ columns, filters, selectOptionsByKey, isServer, hasFilterCallback, onSetFilter, onClearFilter, onClearAll, labels, locale, }: {
+    columns: DataTableColumn<T>[];
+    filters: FilterState;
+    selectOptionsByKey: Record<string, {
+        value: string;
+        label: string;
+    }[]>;
+    isServer: boolean;
+    hasFilterCallback: boolean;
+    onSetFilter: (key: string, value: FilterValue) => void;
+    onClearFilter: (key: string) => void;
+    onClearAll: () => void;
+    labels: DataTableLabels;
+    locale?: string;
+}): import("react").JSX.Element | null;

package/dist/components/data-table-mobile.js

@@ -0,0 +1,412 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, useId, useMemo, useState } from "react";
+import { ArrowDownWideNarrow, ArrowUpNarrowWide, ChevronDown, ChevronRight, Filter } from "lucide-react";
+import { FOCUS_RING } from "./focus-ring.js";
+import { IconButton } from "./icon-button.js";
+import { Select } from "./select.js";
+import { cn } from "../lib/cn.js";
+import { dirOf } from "../lib/direction.js";
+import { defaultFilterState, isFilterActive, resolveFilter } from "./data-table-filters.js";
+import { FilterPopover } from "./data-table-filter-popover.js";
+import { SwipeableRow } from "./swipeable-row.js";
+import { DialogFrame } from "./dialog-frame.js";
+import { RowLink, cleanAttrs, columnLabel, fromOutside } from "./data-table-shared.js";
+function dataAttrsOf(props) {
+  if (!props) return void 0;
+  const out = {};
+  for (const [k, v] of Object.entries(props)) if (k.startsWith("data-") && k !== "data-col") out[k] = v;
+  return out;
+}
+function physicalSwipe(actions, dir) {
+  const rtl = dir === "rtl";
+  return {
+    left: (rtl ? actions.end : actions.start) ?? actions.left,
+    right: (rtl ? actions.start : actions.end) ?? actions.right
+  };
+}
+const CARD_NO_TRUNCATE = "large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]";
+function StackedFields({ columns, row, compact }) {
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      "data-card-fields": "stacked",
+      className: cn("relative flex min-w-0 flex-col", compact ? "gap-1.5 text-xs" : "gap-2.5 text-sm", CARD_NO_TRUNCATE),
+      children: columns.map((col) => /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-muted", children: col.header }),
+        /* @__PURE__ */ jsx(
+          "dd",
+          {
+            ...dataAttrsOf(col.cellProps?.(row)),
+            className: "mt-0.5 min-w-0 break-words text-secondary",
+            children: col.cell(row)
+          }
+        )
+      ] }, col.key))
+    }
+  );
+}
+function MobileSort({
+  columns,
+  sorts,
+  sortCycle,
+  compact,
+  labels,
+  onPick,
+  onFlip
+}) {
+  const selectId = useId();
+  const sortLabels = labels;
+  if (columns.length === 0) return null;
+  const primary = sorts[0] && columns.some((c) => c.key === sorts[0].key) ? sorts[0] : null;
+  const offerDefault = sortCycle === "tri" || primary === null;
+  const desc = primary?.dir === "desc";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-table-mobile-sort": "",
+      className: cn(
+        // At Large the direction button shows its words (IconButton's label, §4); the
+        // row wraps so the select keeps a usable width on a 240 px card.
+        "flex flex-wrap items-center gap-2 border-b border-subtle",
+        compact ? "px-3 py-1.5" : "px-4 py-2"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: "shrink-0 text-xs text-muted", children: sortLabels.sortBy }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            id: selectId,
+            size: compact ? "sm" : "md",
+            className: "min-w-0 flex-1 large:basis-40",
+            value: primary?.key ?? "",
+            onChange: (e) => onPick(e.target.value || null),
+            children: [
+              offerDefault && /* @__PURE__ */ jsx("option", { value: "", children: sortLabels.sortDefault }),
+              columns.map((col) => /* @__PURE__ */ jsx("option", { value: col.key, children: columnLabel(col, labels) }, col.key))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: compact ? "xs" : "md",
+            variant: "secondary",
+            label: desc ? sortLabels.sortDescending : sortLabels.sortAscending,
+            disabled: primary === null,
+            onClick: onFlip,
+            children: desc ? /* @__PURE__ */ jsx(ArrowDownWideNarrow, {}) : /* @__PURE__ */ jsx(ArrowUpNarrowWide, {})
+          }
+        )
+      ]
+    }
+  );
+}
+function MobileRow({
+  row,
+  isExpanded,
+  openedRowContent,
+  opensRow,
+  rowClassName,
+  rowAttributes,
+  onRowClick,
+  rowHref,
+  swipeActionsFor,
+  mobileDir,
+  mobileCardLinkable,
+  mobileCard,
+  mobilePrimaryCol,
+  mobileSecondaryColumns,
+  mobileExpandAsDialog,
+  compact,
+  large
+}) {
+  const expanded = isExpanded?.(row) ?? false;
+  const expansion = expanded ? openedRowContent(row) : null;
+  const tint = rowClassName?.(row);
+  const interactive = !!onRowClick;
+  const opensDetail = interactive && opensRow;
+  const swipeActions = swipeActionsFor?.(row);
+  const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;
+  const swipeEnabled = !!swipe && !expanded;
+  const href = mobileCardLinkable ? rowHref?.(row) : void 0;
+  const cardClass = cn(
+    "w-full text-start flex items-center",
+    // §4: more room per row at Large — a taller row is a bigger tap target too.
+    compact ? "px-3 py-2 gap-2 text-sm large:py-3" : "px-4 py-3 gap-3 large:py-4",
+    // Live #320's other half: the card acknowledges the touch before the sheet
+    // arrives. On a cold route the data can take a beat, and an unacknowledged tap
+    // reads as "did that register?" — which is most of what "abrupt" means here.
+    // `origin-center` + a 0.5% squeeze is deliberately almost subliminal: this fires
+    // on every row of a long list, so anything larger becomes the list's personality
+    // rather than feedback. `transition-transform` alone, so the existing background
+    // flip stays instant.
+    interactive && "cursor-pointer transition-transform duration-100 active:scale-[0.995] active:bg-active motion-reduce:transition-none motion-reduce:active:scale-100",
+    // The keyboard's frame drawn INSIDE the card, as the desktop row's is (keksdose live
+    // #394): the browser's own ring and tap highlight sit on the card's outer edge, and
+    // three ancestors clip it — SwipeableRow's `overflow-hidden`, the card list, and
+    // AppShell main's `overflow-x-clip` — so the frame went missing on one side. A press
+    // keeps the fill and the squeeze above; an outline on every tap of a long list would
+    // be louder than the acknowledgement it replaces.
+    interactive && cn("[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset", FOCUS_RING)
+  );
+  const cardInner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex min-w-0 flex-1 flex-col",
+          compact ? "gap-1 large:gap-2" : "gap-2 large:gap-3",
+          // §4 "nothing truncates": at Large a cell's own `truncate` wraps instead —
+          // the reader who chose bigger type is the one an ellipsis fails. A caller's
+          // `mobileCard` is its own layout and keeps what it chose.
+          !mobileCard && CARD_NO_TRUNCATE
+        ),
+        children: mobileCard ? mobileCard(row) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          mobilePrimaryCol && /* @__PURE__ */ jsx("div", { ...dataAttrsOf(mobilePrimaryCol.cellProps?.(row)), className: "min-w-0 break-words font-medium", children: mobilePrimaryCol.cell(row) }),
+          mobileSecondaryColumns.length > 0 && large ? (
+            // §4: each label ABOVE its value at Large. Side by side, a label column
+            // sized to the widest label leaves a value a sliver of a 240 px card.
+            /* @__PURE__ */ jsx(StackedFields, { columns: mobileSecondaryColumns, row, compact })
+          ) : mobileSecondaryColumns.length > 0 && /* @__PURE__ */ jsx(
+            "dl",
+            {
+              className: cn(
+                "grid grid-cols-[auto_1fr] gap-x-3",
+                compact ? "gap-y-0.5 text-xs" : "gap-y-1 text-sm"
+              ),
+              children: mobileSecondaryColumns.map((col) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+                /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-muted self-center", children: col.header }),
+                /* @__PURE__ */ jsx(
+                  "dd",
+                  {
+                    ...dataAttrsOf(col.cellProps?.(row)),
+                    className: "min-w-0 text-secondary self-center",
+                    children: col.cell(row)
+                  }
+                )
+              ] }, col.key))
+            }
+          )
+        ] })
+      }
+    ),
+    opensDetail && // `aria-hidden`: the row already announces itself as a button with
+    // `aria-expanded`, so the icon would only add a second, wordless stop.
+    (mobileExpandAsDialog ? (
+      // Points INTO the sheet, which is the reading-forward direction.
+      /* @__PURE__ */ jsx(
+        ChevronRight,
+        {
+          "aria-hidden": true,
+          className: "size-4 shrink-0 text-placeholder rtl:-scale-x-100"
+        }
+      )
+    ) : /* @__PURE__ */ jsx(
+      ChevronDown,
+      {
+        "aria-hidden": true,
+        className: cn(
+          "size-4 shrink-0 text-placeholder transition-transform",
+          expanded && "rotate-180"
+        )
+      }
+    ))
+  ] });
+  const body = interactive && href ? (
+    // A card with a URL of its own is a LINK, not a div wearing role="button"
+    // (feedback #451): the phone's long-press "open in new tab" and a screen
+    // reader's link semantics both come free, and the fake role goes away.
+    /* @__PURE__ */ jsx(
+      RowLink,
+      {
+        href,
+        onActivate: () => onRowClick(row),
+        "aria-expanded": opensRow ? expanded : void 0,
+        className: cardClass,
+        onKeyDown: (e) => {
+          if (e.key !== " ") return;
+          e.preventDefault();
+          onRowClick(row);
+        },
+        children: cardInner
+      }
+    )
+  ) : (
+    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are
+       only attached when `interactive`, and then so are role="button", tabIndex 0 and the
+       Enter/Space handler below; the rule cannot follow the conditional role. */
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: interactive ? "button" : void 0,
+        tabIndex: interactive ? 0 : void 0,
+        onClick: interactive ? (e) => {
+          if (fromOutside(e.target, e.currentTarget)) return;
+          onRowClick(row);
+        } : void 0,
+        onKeyDown: interactive ? (e) => {
+          if (e.target !== e.currentTarget) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onRowClick(row);
+          }
+        } : void 0,
+        "aria-expanded": opensRow ? expanded : void 0,
+        className: cardClass,
+        children: cardInner
+      }
+    )
+  );
+  return /* @__PURE__ */ jsxs("li", { className: cn(tint), ...cleanAttrs(rowAttributes?.(row)), children: [
+    swipeEnabled ? /* @__PURE__ */ jsx(SwipeableRow, { enabled: true, left: swipe.left, right: swipe.right, children: body }) : body,
+    expansion && !mobileExpandAsDialog && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "bg-surface-2 border-t border-subtle",
+          compact ? "px-3 py-2" : "px-4 py-3"
+        ),
+        children: expansion
+      }
+    )
+  ] });
+}
+function MobileFilters({
+  columns,
+  filters,
+  selectOptionsByKey,
+  isServer,
+  hasFilterCallback,
+  onSetFilter,
+  onClearFilter,
+  onClearAll,
+  labels,
+  locale
+}) {
+  const [open, setOpen] = useState(false);
+  const [dir, setDir] = useState("ltr");
+  const [expanded, setExpanded] = useState(null);
+  const filterable = useMemo(
+    () => columns.map((col) => ({ col, filter: !isServer || hasFilterCallback ? resolveFilter(col) : null })).filter((x) => !!x.filter),
+    [columns, isServer, hasFilterCallback]
+  );
+  if (filterable.length === 0) return null;
+  const activeCount = filterable.filter(({ col }) => {
+    const s = filters[col.key];
+    return s && isFilterActive(s);
+  }).length;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-subtle px-4 py-2", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          setDir(dirOf(e.currentTarget));
+          setOpen(true);
+        },
+        className: "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium text-secondary hover:bg-hover",
+        children: [
+          /* @__PURE__ */ jsx(Filter, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { children: labels.filters }),
+          activeCount > 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-4 items-center justify-center rounded-full bg-info-soft px-1 text-caption font-semibold text-info", children: activeCount })
+        ]
+      }
+    ),
+    activeCount > 0 && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onClearAll,
+        className: "text-xs text-muted hover:text-secondary",
+        children: labels.clearAll
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DialogFrame,
+      {
+        open,
+        onClose: () => setOpen(false),
+        title: labels.filters,
+        closeButton: true,
+        closeLabel: labels.close,
+        headerDivider: true,
+        fullBleed: true,
+        dir,
+        className: "max-h-[85vh] rounded-b-none md:rounded-b-lg",
+        bodyClassName: "space-y-0 divide-y divide-subtle px-0 pt-0 pb-0",
+        actions: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClearAll,
+              disabled: activeCount === 0,
+              className: "me-auto text-sm text-muted hover:text-secondary disabled:opacity-40",
+              children: labels.clearAll
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: close,
+              className: "rounded-md bg-inverse px-4 py-2 text-sm font-medium text-inverse",
+              children: labels.done
+            }
+          )
+        ] }),
+        children: filterable.map(({ col, filter }) => {
+          const state = filters[col.key];
+          const active = !!state && isFilterActive(state);
+          const isItemOpen = expanded === col.key;
+          return /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setExpanded(isItemOpen ? null : col.key),
+                "aria-expanded": isItemOpen,
+                className: "flex w-full items-center justify-between gap-2 px-4 py-3 text-start",
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-sm font-medium text-secondary", children: [
+                    col.header,
+                    active && /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-brand" })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    ChevronDown,
+                    {
+                      className: cn(
+                        "size-4 shrink-0 text-placeholder transition-transform",
+                        isItemOpen && "rotate-180"
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            isItemOpen && /* @__PURE__ */ jsx("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsx(
+              FilterPopover,
+              {
+                column: col,
+                state: state ?? defaultFilterState(filter),
+                onChange: (next) => onSetFilter(col.key, next),
+                onClear: () => onClearFilter(col.key),
+                selectOptions: selectOptionsByKey[col.key] ?? [],
+                labels,
+                locale
+              }
+            ) })
+          ] }, col.key);
+        })
+      }
+    )
+  ] });
+}
+export {
+  MobileFilters,
+  MobileRow,
+  MobileSort,
+  StackedFields
+};
+//# sourceMappingURL=data-table-mobile.js.map

package/dist/components/data-table-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/data-table-mobile.tsx"],"sourcesContent":["import { Fragment, useId, useMemo, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { ArrowDownWideNarrow, ArrowUpNarrowWide, ChevronDown, ChevronRight, Filter } from \"lucide-react\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { IconButton } from \"./icon-button\";\nimport { Select } from \"./select\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { defaultFilterState, isFilterActive, resolveFilter } from \"./data-table-filters\";\nimport type { ColumnFilter, FilterValue } from \"./data-table-filters\";\nimport type { SortCycle, SortState } from \"./data-table-sort\";\nimport { FilterPopover } from \"./data-table-filter-popover\";\nimport { SwipeableRow, type SwipeAction } from \"./swipeable-row\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { RowLink, cleanAttrs, columnLabel, fromOutside } from \"./data-table-shared\";\nimport type {\n  DataTableCellProps,\n  DataTableColumn,\n  DataTableProps,\n  DataTableSortLabels,\n  FilterState,\n  MobileSwipeActions,\n} from \"./data-table\";\n\n// DataTable's phone layout: the card a row becomes, the fields inside it, and the sort\n// and filter controls above the card list. Moved out of data-table.tsx whole (refactor\n// audit 2026-10, MOD-3 step 4); the list itself, its pager and its row dialog stay in\n// DataTable, which owns the state they share with the wide-screen table.\n\n/** Only the `data-*` attributes of a cell's props — what a phone card field takes. */\nfunction dataAttrsOf(props: DataTableCellProps | undefined): Record<string, unknown> | undefined {\n  if (!props) return undefined;\n  const out: Record<string, unknown> = {};\n  for (const [k, v] of Object.entries(props)) if (k.startsWith(\"data-\") && k !== \"data-col\") out[k] = v;\n  return out;\n}\n\n/** The logical sides onto the physical drag directions {@link SwipeableRow} takes. */\nfunction physicalSwipe(\n  actions: MobileSwipeActions,\n  dir: Direction,\n): { left?: SwipeAction[]; right?: SwipeAction[] } {\n  const rtl = dir === \"rtl\";\n  return {\n    left: (rtl ? actions.end : actions.start) ?? actions.left,\n    right: (rtl ? actions.start : actions.end) ?? actions.right,\n  };\n}\n\n// ---------- Phone card at Large (0.32) ----------\n\n/**\n * §4 \"nothing truncates\" in a phone card at Large and Extra large: a cell's own\n * `truncate` (a kit cell, a chip, the app's span) wraps instead — and breaks inside a\n * word too long for the card rather than running out of it. A descendant rule, so it\n * reaches the cells without the table knowing what they render; `large:`, so Normal\n * keeps every ellipsis it had.\n */\nconst CARD_NO_TRUNCATE =\n  \"large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]\";\n\n/**\n * Columns as label-above-value pairs: the phone card's fields at Large (§4), and the\n * opened row's `mobileDetailsInRow` at every size. Each pair is a `<div>` in the\n * `<dl>` — the grouping HTML allows — so a pair keeps together and the gap falls\n * BETWEEN facts rather than between a label and its own value. `relative` holds a\n * header's `sr-only` text (an actions column's), as every kit container must.\n */\nexport function StackedFields<T>({ columns, row, compact }: { columns: DataTableColumn<T>[]; row: T; compact: boolean }) {\n  return (\n    <dl\n      data-card-fields=\"stacked\"\n      className={cn(\"relative flex min-w-0 flex-col\", compact ? \"gap-1.5 text-xs\" : \"gap-2.5 text-sm\", CARD_NO_TRUNCATE)}\n    >\n      {columns.map((col) => (\n        <div key={col.key} className=\"min-w-0\">\n          <dt className=\"text-xs uppercase tracking-wide text-muted\">{col.header}</dt>\n          <dd\n            {...dataAttrsOf(col.cellProps?.(row))}\n            className=\"mt-0.5 min-w-0 break-words text-secondary\"\n          >\n            {col.cell(row)}\n          </dd>\n        </div>\n      ))}\n    </dl>\n  );\n}\n\n// ---------- Phone sort control (keksdose K10) ----------\n\n/**\n * The card list's sort control: a \"Sort by\" select and a direction button.\n *\n * keksdose K10 (inputs audit 2026-10-02 §5; its aggregated report tables, #258): a\n * table is sorted by its header row and the phone card list has none, so the two\n * decisions the header carries — which column, which direction — were unreachable\n * below the breakpoint. keksdose hand-built this row over its DataTable to answer\n * \"who did I pay the most\" on the device it was asked on; this is that row, driven by\n * the SAME sort state as the headers (controlled `sorts` included), so turning the\n * phone sideways keeps the order and a sort chosen here is the one the URL and the\n * storage key hold.\n *\n * The rules are the header's: a newly picked column starts in its `firstSort`, the\n * direction button flips the primary sort (secondary ones stay), and \"Default order\"\n * — the third click of a `\"tri\"` cycle — is offered only under `\"tri\"`, since a\n * `\"toggle\"` table promises it is always ranked by something. The select's label is\n * a real `<label>` beside it, and the button sits outside that label: a click inside\n * a label is forwarded to the control it names, so a nested button would flip AND\n * open the select.\n */\nexport function MobileSort<T>({\n  columns,\n  sorts,\n  sortCycle,\n  compact,\n  labels,\n  onPick,\n  onFlip,\n}: {\n  columns: DataTableColumn<T>[];\n  sorts: SortState[];\n  sortCycle: SortCycle;\n  compact: boolean;\n  labels: DataTableLabels;\n  onPick: (key: string | null) => void;\n  onFlip: () => void;\n}) {\n  const selectId = useId();\n  const sortLabels: DataTableSortLabels = labels;\n  if (columns.length === 0) return null;\n  // A persisted or URL sort can name a column with no `sortBy` (or a hidden one): the\n  // sort chain drops it, and so does the control rather than claiming it.\n  const primary = sorts[0] && columns.some((c) => c.key === sorts[0].key) ? sorts[0] : null;\n  const offerDefault = sortCycle === \"tri\" || primary === null;\n  const desc = primary?.dir === \"desc\";\n  return (\n    <div\n      data-table-mobile-sort=\"\"\n      className={cn(\n        // At Large the direction button shows its words (IconButton's label, §4); the\n        // row wraps so the select keeps a usable width on a 240 px card.\n        \"flex flex-wrap items-center gap-2 border-b border-subtle\",\n        compact ? \"px-3 py-1.5\" : \"px-4 py-2\",\n      )}\n    >\n      <label htmlFor={selectId} className=\"shrink-0 text-xs text-muted\">\n        {sortLabels.sortBy}\n      </label>\n      <Select\n        id={selectId}\n        size={compact ? \"sm\" : \"md\"}\n        className=\"min-w-0 flex-1 large:basis-40\"\n        value={primary?.key ?? \"\"}\n        onChange={(e) => onPick(e.target.value || null)}\n      >\n        {offerDefault && <option value=\"\">{sortLabels.sortDefault}</option>}\n        {columns.map((col) => (\n          <option key={col.key} value={col.key}>\n            {columnLabel(col, labels)}\n          </option>\n        ))}\n      </Select>\n      <IconButton\n        size={compact ? \"xs\" : \"md\"}\n        variant=\"secondary\"\n        label={desc ? sortLabels.sortDescending : sortLabels.sortAscending}\n        disabled={primary === null}\n        onClick={onFlip}\n      >\n        {desc ? <ArrowDownWideNarrow /> : <ArrowUpNarrowWide />}\n      </IconButton>\n    </div>\n  );\n}\n\n// ---------- Phone card ----------\n\n/** One phone card: what DataTable's card list draws for a row. */\nexport interface MobileRowProps<T> {\n  row: T;\n  isExpanded: DataTableProps<T>[\"isExpanded\"];\n  /** What the row shows when opened — DataTable's `openedRowContent`. */\n  openedRowContent: (row: T) => ReactNode;\n  /** Whether an opened row has anything to show at all. */\n  opensRow: boolean;\n  rowClassName: DataTableProps<T>[\"rowClassName\"];\n  rowAttributes: DataTableProps<T>[\"rowAttributes\"];\n  onRowClick: DataTableProps<T>[\"onRowClick\"];\n  rowHref: DataTableProps<T>[\"rowHref\"];\n  /** `mobileSwipeActions`, or the swipes derived from `rowActions`. */\n  swipeActionsFor: ((row: T) => MobileSwipeActions | null) | undefined;\n  /** The card list's reading direction, for which physical drag a swipe side means. */\n  mobileDir: Direction;\n  /** No column the card renders owns a link, so the card itself may be one. */\n  mobileCardLinkable: boolean;\n  mobileCard: DataTableProps<T>[\"mobileCard\"];\n  mobilePrimaryCol: DataTableColumn<T> | null;\n  mobileSecondaryColumns: DataTableColumn<T>[];\n  mobileExpandAsDialog: boolean;\n  compact: boolean;\n  /** The text size is Large or Extra large (§4). */\n  large: boolean;\n}\n\n/** One mobile card. Shared by the flat list and the grouped list, so both draw\n *  identical row markup. */\nexport function MobileRow<T>({\n  row,\n  isExpanded,\n  openedRowContent,\n  opensRow,\n  rowClassName,\n  rowAttributes,\n  onRowClick,\n  rowHref,\n  swipeActionsFor,\n  mobileDir,\n  mobileCardLinkable,\n  mobileCard,\n  mobilePrimaryCol,\n  mobileSecondaryColumns,\n  mobileExpandAsDialog,\n  compact,\n  large,\n}: MobileRowProps<T>) {\n  const expanded = isExpanded?.(row) ?? false;\n  const expansion = expanded ? openedRowContent(row) : null;\n  const tint = rowClassName?.(row);\n  // Use div+role=\"button\" rather than a real <button> so cells that\n  // contain their own interactive controls (status toggles, action\n  // icons) don't end up as illegal nested buttons.\n  const interactive = !!onRowClick;\n  // Say that the card OPENS something (Keksdose feedback #163). A phone card had\n  // only a cursor and a tap-tint to advertise its editor — on the invoice review\n  // screen, whose entire purpose is correcting mis-read lines, that read as \"these\n  // values are not editable\". A chevron is the affordance every list on a phone\n  // uses for exactly this, and it points the way the row actually opens: right into\n  // a sheet, or down into an inline panel that flips it when expanded.\n  const opensDetail = interactive && opensRow;\n  const swipeActions = swipeActionsFor?.(row);\n  const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;\n  // An expanded row never swipes: the editor below it owns the horizontal space,\n  // and dragging the header away from its own form reads as a glitch.\n  const swipeEnabled = !!swipe && !expanded;\n  const href = mobileCardLinkable ? rowHref?.(row) : undefined;\n  const cardClass = cn(\n    \"w-full text-start flex items-center\",\n    // §4: more room per row at Large — a taller row is a bigger tap target too.\n    compact ? \"px-3 py-2 gap-2 text-sm large:py-3\" : \"px-4 py-3 gap-3 large:py-4\",\n    // Live #320's other half: the card acknowledges the touch before the sheet\n    // arrives. On a cold route the data can take a beat, and an unacknowledged tap\n    // reads as \"did that register?\" — which is most of what \"abrupt\" means here.\n    // `origin-center` + a 0.5% squeeze is deliberately almost subliminal: this fires\n    // on every row of a long list, so anything larger becomes the list's personality\n    // rather than feedback. `transition-transform` alone, so the existing background\n    // flip stays instant.\n    interactive &&\n      \"cursor-pointer transition-transform duration-100 active:scale-[0.995] active:bg-active motion-reduce:transition-none motion-reduce:active:scale-100\",\n    // The keyboard's frame drawn INSIDE the card, as the desktop row's is (keksdose live\n    // #394): the browser's own ring and tap highlight sit on the card's outer edge, and\n    // three ancestors clip it — SwipeableRow's `overflow-hidden`, the card list, and\n    // AppShell main's `overflow-x-clip` — so the frame went missing on one side. A press\n    // keeps the fill and the squeeze above; an outline on every tap of a long list would\n    // be louder than the acknowledgement it replaces.\n    interactive && cn(\"[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset\", FOCUS_RING),\n  );\n  // The card's content is written once and worn by either tag below. Note that\n  // the primary cell is rendered RAW here, never through `linkColumn` — the card\n  // itself is the anchor, and routing it through `linkColumn` too would nest an\n  // <a> inside an <a>. Desktop and mobile are mutually exclusive (`isMdUp`), so\n  // exactly one anchor exists per row.\n  const cardInner = (\n    <>\n      {/* The card's own content keeps the column it always had; the chevron sits\n          beside it rather than inside, so a caller's `mobileCard` is untouched. */}\n      <div\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col\",\n          compact ? \"gap-1 large:gap-2\" : \"gap-2 large:gap-3\",\n          // §4 \"nothing truncates\": at Large a cell's own `truncate` wraps instead —\n          // the reader who chose bigger type is the one an ellipsis fails. A caller's\n          // `mobileCard` is its own layout and keeps what it chose.\n          !mobileCard && CARD_NO_TRUNCATE,\n        )}\n      >\n        {mobileCard ? (\n          mobileCard(row)\n        ) : (\n          <>\n            {/* Only the `data-*` half of `cellProps` — see its note. */}\n            {mobilePrimaryCol && (\n              <div {...dataAttrsOf(mobilePrimaryCol.cellProps?.(row))} className=\"min-w-0 break-words font-medium\">\n                {mobilePrimaryCol.cell(row)}\n              </div>\n            )}\n            {mobileSecondaryColumns.length > 0 && large ? (\n              // §4: each label ABOVE its value at Large. Side by side, a label column\n              // sized to the widest label leaves a value a sliver of a 240 px card.\n              <StackedFields columns={mobileSecondaryColumns} row={row} compact={compact} />\n            ) : mobileSecondaryColumns.length > 0 && (\n              <dl\n                className={cn(\n                  \"grid grid-cols-[auto_1fr] gap-x-3\",\n                  compact ? \"gap-y-0.5 text-xs\" : \"gap-y-1 text-sm\",\n                )}\n              >\n                {mobileSecondaryColumns.map((col) => (\n                  <Fragment key={col.key}>\n                    <dt className=\"text-xs uppercase tracking-wide text-muted self-center\">\n                      {col.header}\n                    </dt>\n                    <dd\n                      {...dataAttrsOf(col.cellProps?.(row))}\n                      className=\"min-w-0 text-secondary self-center\"\n                    >\n                      {col.cell(row)}\n                    </dd>\n                  </Fragment>\n                ))}\n              </dl>\n            )}\n          </>\n        )}\n      </div>\n      {opensDetail &&\n        // `aria-hidden`: the row already announces itself as a button with\n        // `aria-expanded`, so the icon would only add a second, wordless stop.\n        (mobileExpandAsDialog ? (\n          // Points INTO the sheet, which is the reading-forward direction.\n          <ChevronRight\n            aria-hidden\n            className=\"size-4 shrink-0 text-placeholder rtl:-scale-x-100\"\n          />\n        ) : (\n          <ChevronDown\n            aria-hidden\n            className={cn(\n              \"size-4 shrink-0 text-placeholder transition-transform\",\n              expanded && \"rotate-180\",\n            )}\n          />\n        ))}\n    </>\n  );\n  const body =\n    interactive && href ? (\n      // A card with a URL of its own is a LINK, not a div wearing role=\"button\"\n      // (feedback #451): the phone's long-press \"open in new tab\" and a screen\n      // reader's link semantics both come free, and the fake role goes away.\n      <RowLink\n        href={href}\n        onActivate={() => onRowClick!(row)}\n        aria-expanded={opensRow ? expanded : undefined}\n        className={cardClass}\n        // Enter already activates a link natively, and that routes through\n        // RowLink's own onClick — handling it here too would open the row twice.\n        // Space is the only key left, and only so it opens the row instead of\n        // scrolling the list.\n        onKeyDown={(e) => {\n          if (e.key !== \" \") return;\n          e.preventDefault();\n          onRowClick!(row);\n        }}\n      >\n        {cardInner}\n      </RowLink>\n    ) : (\n      /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are\n         only attached when `interactive`, and then so are role=\"button\", tabIndex 0 and the\n         Enter/Space handler below; the rule cannot follow the conditional role. */\n      <div\n        role={interactive ? \"button\" : undefined}\n        tabIndex={interactive ? 0 : undefined}\n        onClick={\n          interactive\n            ? (e) => {\n                if (fromOutside(e.target, e.currentTarget)) return;\n                onRowClick!(row);\n              }\n            : undefined\n        }\n        onKeyDown={\n          interactive\n            ? (e) => {\n                // A key press inside a nested control is that control's.\n                if (e.target !== e.currentTarget) return;\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  e.preventDefault();\n                  onRowClick!(row);\n                }\n              }\n            : undefined\n        }\n        aria-expanded={opensRow ? expanded : undefined}\n        className={cardClass}\n      >\n        {cardInner}\n      </div>\n    );\n  return (\n    <li className={cn(tint)} {...cleanAttrs(rowAttributes?.(row))}>\n      {swipeEnabled ? (\n        <SwipeableRow enabled left={swipe!.left} right={swipe!.right}>\n          {body}\n        </SwipeableRow>\n      ) : (\n        body\n      )}\n      {expansion && !mobileExpandAsDialog && (\n        <div\n          className={cn(\n            \"bg-surface-2 border-t border-subtle\",\n            compact ? \"px-3 py-2\" : \"px-4 py-3\",\n          )}\n        >\n          {expansion}\n        </div>\n      )}\n    </li>\n  );\n}\n\n// ---------- Mobile filter sheet ----------\n\n/**\n * Filter access for the mobile card list (feedback #299). The desktop table\n * houses per-column filters in its header; the card list has no header, so the\n * same filters were unreachable on phones. This renders a compact \"Filters\" bar\n * that opens a bottom sheet listing each filterable column as a collapsible\n * section, reusing the very same {@link FilterPopover} and filter state the\n * desktop table drives — so it filters identically and stays URL-synced.\n *\n * The sheet is a {@link DialogFrame} (round 0.34 BUG-7b = DUP-6). It was the last\n * hand-rolled modal in the kit: `role=\"dialog\" aria-modal=\"true\"` on the backdrop, with\n * copies of the scroll lock, the backdrop close and the Back entry — and no name, no\n * focus moved in, no trap and no Escape, so a reader was told the page was hidden while\n * focus stayed on it. On a phone `Modal` is a bottom sheet already; it now brings all\n * of that, and the exit motion, from the one place every other dialog gets it.\n */\nexport function MobileFilters<T>({\n  columns,\n  filters,\n  selectOptionsByKey,\n  isServer,\n  hasFilterCallback,\n  onSetFilter,\n  onClearFilter,\n  onClearAll,\n  labels,\n  locale,\n}: {\n  columns: DataTableColumn<T>[];\n  filters: FilterState;\n  selectOptionsByKey: Record<string, { value: string; label: string }[]>;\n  isServer: boolean;\n  hasFilterCallback: boolean;\n  onSetFilter: (key: string, value: FilterValue) => void;\n  onClearFilter: (key: string) => void;\n  onClearAll: () => void;\n  labels: DataTableLabels;\n  locale?: string;\n}) {\n  const [open, setOpen] = useState(false);\n  // The sheet is portalled to <body>, out from under whatever `dir` the table sits\n  // in, so it carries the trigger's direction with it — read at the moment of opening,\n  // from the element the user actually pressed.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const [expanded, setExpanded] = useState<string | null>(null);\n\n  const filterable = useMemo(\n    () =>\n      columns\n        .map((col) => ({ col, filter: !isServer || hasFilterCallback ? resolveFilter(col) : null }))\n        .filter((x): x is { col: DataTableColumn<T>; filter: ColumnFilter<T> } => !!x.filter),\n    [columns, isServer, hasFilterCallback],\n  );\n\n  if (filterable.length === 0) return null;\n\n  const activeCount = filterable.filter(({ col }) => {\n    const s = filters[col.key];\n    return s && isFilterActive(s);\n  }).length;\n\n  return (\n    <div className=\"flex items-center justify-between gap-2 border-b border-subtle px-4 py-2\">\n      <button\n        type=\"button\"\n        onClick={(e) => {\n          setDir(dirOf(e.currentTarget));\n          setOpen(true);\n        }}\n        className=\"inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium text-secondary hover:bg-hover\"\n      >\n        <Filter className=\"size-4\" />\n        <span>{labels.filters}</span>\n        {activeCount > 0 && (\n          <span className=\"inline-flex min-w-4 items-center justify-center rounded-full bg-info-soft px-1 text-caption font-semibold text-info\">\n            {activeCount}\n          </span>\n        )}\n      </button>\n      {activeCount > 0 && (\n        <button\n          type=\"button\"\n          onClick={onClearAll}\n          className=\"text-xs text-muted hover:text-secondary\"\n        >\n          {labels.clearAll}\n        </button>\n      )}\n      {/* Escape, the backdrop, Back (Keksdose feedback #172: the filters are already\n          in the URL, so closing never loses anything), the scroll lock, focus in and\n          back to this bar's button — all `Modal`'s. `fullBleed` lets the sheet meet the\n          screen's edges on a phone, as it always did. */}\n      <DialogFrame\n        open={open}\n        onClose={() => setOpen(false)}\n        title={labels.filters}\n        closeButton\n        closeLabel={labels.close}\n        headerDivider\n        fullBleed\n        // Portalled to <body>, so the direction read from the button goes with it.\n        dir={dir}\n        className=\"max-h-[85vh] rounded-b-none md:rounded-b-lg\"\n        // The sections run edge to edge with a rule between them, as before.\n        bodyClassName=\"space-y-0 divide-y divide-subtle px-0 pt-0 pb-0\"\n        actions={(close) => (\n          <>\n            <button\n              type=\"button\"\n              onClick={onClearAll}\n              disabled={activeCount === 0}\n              // `me-auto` keeps Clear all at the start and Done at the end.\n              className=\"me-auto text-sm text-muted hover:text-secondary disabled:opacity-40\"\n            >\n              {labels.clearAll}\n            </button>\n            <button\n              type=\"button\"\n              onClick={close}\n              className=\"rounded-md bg-inverse px-4 py-2 text-sm font-medium text-inverse\"\n            >\n              {labels.done}\n            </button>\n          </>\n        )}\n      >\n        {filterable.map(({ col, filter }) => {\n          const state = filters[col.key];\n          const active = !!state && isFilterActive(state);\n          const isItemOpen = expanded === col.key;\n          return (\n            <div key={col.key}>\n              <button\n                type=\"button\"\n                onClick={() => setExpanded(isItemOpen ? null : col.key)}\n                aria-expanded={isItemOpen}\n                className=\"flex w-full items-center justify-between gap-2 px-4 py-3 text-start\"\n              >\n                <span className=\"flex items-center gap-2 text-sm font-medium text-secondary\">\n                  {col.header}\n                  {active && <span className=\"size-1.5 rounded-full bg-brand\" />}\n                </span>\n                <ChevronDown\n                  className={cn(\n                    \"size-4 shrink-0 text-placeholder transition-transform\",\n                    isItemOpen && \"rotate-180\",\n                  )}\n                />\n              </button>\n              {isItemOpen && (\n                <div className=\"px-4 pb-3\">\n                  <FilterPopover\n                    column={col}\n                    state={state ?? defaultFilterState(filter)}\n                    onChange={(next) => onSetFilter(col.key, next)}\n                    onClear={() => onClearFilter(col.key)}\n                    selectOptions={selectOptionsByKey[col.key] ?? []}\n                    labels={labels}\n                    locale={locale}\n                  />\n                </div>\n              )}\n            </div>\n          );\n        })}\n      </DialogFrame>\n    </div>\n  );\n}\n"],"mappings":"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","names":["Fragment"]}

package/dist/components/data-table-pagination.d.ts

@@ -1,20 +1,6 @@
-import * as react from 'react';
-import { f as DataTableLabels } from '../data-table-labels-BJ5JE_X2.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import './write-lock.js';
-
-declare const PAGE_SIZE_OPTIONS: readonly [10, 25, 50, 100, 200];
+import { type DataTableLabels } from "./data-table-labels.js";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+export declare const PAGE_SIZE_OPTIONS: readonly [10, 25, 50, 100, 200];
 interface PaginationProps {
     page: number;
     totalPages: number;
@@ -25,7 +11,7 @@ interface PaginationProps {
      *  the select is then not rendered at all, rather than rendered and inert. */
     onPageSize?: (n: number) => void;
     /** Over `dataTable` from `<UiKitProvider labels>`, over the English defaults. */
-    labels?: Partial<DataTableLabels>;
+    labels?: LabelOverride<DataTableLabels>;
     /** For the page numbers and page-size options; falls back to the provider's. */
     locale?: string;
     /** `"compact"` for a pager under a compact {@link DataTable} (lenkbank's in-card
@@ -36,6 +22,5 @@ interface PaginationProps {
 /** Footer for {@link DataTable}: range summary, page-size select, and a
  *  windowed page-number strip (first/last + ±2 around the current page, ±1 on a phone
  *  at Large — see {@link PAGE_WINDOW}). */
-declare function Pagination({ page, totalPages, pageSize, total, onPage, onPageSize, labels: labelsProp, locale: localeProp, density, }: PaginationProps): react.JSX.Element;
-
-export { PAGE_SIZE_OPTIONS, Pagination };
+export declare function Pagination({ page, totalPages, pageSize, total, onPage, onPageSize, labels: labelsProp, locale: localeProp, density, }: PaginationProps): import("react").JSX.Element;
+export {};