@apliteni/apliteni-ui 0.25.3 → 0.27.0

package/react/dist/index.js

@@ -170,117 +170,375 @@ function Modal({ open, title, onClose, footer, children }) {
 }
 
 // src/DataTable.tsx
-import { useMemo, useState } from "react";
-import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function DataTable({
-  columns,
-  rows,
-  pageSize = 4,
-  selected,
-  onToggle,
-  onTogglePage
+import { useMemo, useState as useState2 } from "react";
+import { DEFAULT_PAGE_SIZE as DEFAULT_PAGE_SIZE2 } from "@apliteni/apliteni-ui";
+
+// src/Pagination.tsx
+import { useEffect as useEffect2, useId, useRef as useRef2, useState } from "react";
+import { DEFAULT_PAGE_SIZE } from "@apliteni/apliteni-ui";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var GHOST_SM = "ui-btn ui-btn--ghost ui-btn--sm";
+var VARIANTS = ["steps", "numbered", "jump"];
+var cx2 = (...a) => a.filter(Boolean).join(" ");
+var CAP = Number.MAX_SAFE_INTEGER;
+var int = (v, fallback) => {
+  const raw = typeof v === "number" ? v : typeof v === "string" && v.trim() !== "" ? Number(v) : NaN;
+  if (!Number.isFinite(raw)) return fallback;
+  return Math.min(Math.max(Math.trunc(raw), -CAP), CAP);
+};
+var sizeOf = (v, fallback) => {
+  const asked = int(v, fallback);
+  return asked > 0 ? asked : fallback;
+};
+var fmt = (n) => n.toLocaleString("en-US");
+function slotsFor(page, pageCount) {
+  const wanted = [1, pageCount, page - 1, page, page + 1].filter((n) => n >= 1 && n <= pageCount);
+  const shown = [...new Set(wanted)].sort((a, b) => a - b);
+  const out = [];
+  for (const n of shown) {
+    const prev = out.length ? out[out.length - 1] : null;
+    if (prev != null) {
+      if (n - prev === 2) out.push(prev + 1);
+      else if (n - prev > 2) out.push(null);
+    }
+    out.push(n);
+  }
+  return out;
+}
+function Pagination({
+  page = 1,
+  pageSize,
+  total = null,
+  hasMore = false,
+  pageSizes = null,
+  variant = "steps",
+  label = "Pagination",
+  loading = false,
+  id,
+  onPageChange,
+  onPageSizeChange
 }) {
-  const [sort, setSort] = useState(
-    { key: columns.find((c) => c.sortable)?.key, dir: -1 }
+  const auto = useId();
+  const [draft, setDraft] = useState("");
+  const [drafting, setDrafting] = useState(false);
+  const nav = useRef2(null);
+  const pressed = useRef2(null);
+  const uid = id ?? auto;
+  const kind = VARIANTS.includes(variant) ? variant : "steps";
+  const size = sizeOf(pageSize, DEFAULT_PAGE_SIZE);
+  const asRows = int(total, null);
+  const counted = total != null && asRows !== null;
+  const rows = counted ? Math.max(0, asRows) : null;
+  const last = counted ? Math.max(1, Math.ceil(rows / size)) : null;
+  const at = counted ? Math.min(Math.max(1, int(page, 1)), last) : Math.min(Math.max(1, int(page, 1)), CAP - 1);
+  const [draftFor, setDraftFor] = useState(at);
+  if (draftFor !== at) {
+    setDraftFor(at);
+    setDraft("");
+    setDrafting(false);
+  }
+  const offered = (Array.isArray(pageSizes) ? pageSizes : []).slice(0, 12).map((s) => int(s, 0)).filter((s) => s > 0);
+  const sizes = offered.length ? [.../* @__PURE__ */ new Set([...offered, size])].sort((a, b) => a - b) : [];
+  useEffect2(() => {
+    const was = pressed.current;
+    if (!was || loading) return;
+    pressed.current = null;
+    const lost = document.activeElement === document.body || document.activeElement === was;
+    if (!lost || !nav.current?.contains(was)) return;
+    if (!was.disabled) {
+      was.focus();
+      return;
+    }
+    const strip = [...nav.current.querySelectorAll(".ui-pager__step")];
+    const from2 = strip.indexOf(was);
+    for (let d = 1; d < strip.length; d += 1) {
+      const near = [strip[from2 - d], strip[from2 + d]].find((el) => el && !el.disabled);
+      if (near) {
+        near.focus();
+        return;
+      }
+    }
+  }, [at, loading]);
+  const single = counted && last === 1;
+  if (single && !sizes.length) return null;
+  const from = (at - 1) * size + 1;
+  const to = counted ? Math.min(at * size, rows) : null;
+  const status = !counted ? `Page ${fmt(at)}` : rows === 0 ? "0 of 0" : from === to ? `${fmt(from)} of ${fmt(rows)}` : `${fmt(from)}\u2013${fmt(to)} of ${fmt(rows)}`;
+  const go = (n) => onPageChange?.(n);
+  const step = (label_, target, disabled) => (
+    // A control at an end is disabled and stays where it is: removing it slides
+    // the next control under a pointer already travelling toward it.
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        className: `${GHOST_SM} ui-pager__step`,
+        "data-page": target,
+        disabled: loading || disabled,
+        "aria-disabled": loading || disabled ? true : void 0,
+        onClick: (e) => {
+          pressed.current = e.currentTarget;
+          go(target);
+        },
+        children: label_
+      },
+      label_
+    )
   );
-  const [page, setPage] = useState(0);
-  const sorted = useMemo(() => {
-    if (!sort.key) return rows;
-    const k = sort.key;
-    return [...rows].sort((a, b) => (a[k] > b[k] ? 1 : a[k] < b[k] ? -1 : 0) * sort.dir);
-  }, [rows, sort]);
-  const pages = Math.max(1, Math.ceil(sorted.length / pageSize));
-  const safePage = Math.min(page, pages - 1);
-  const slice = sorted.slice(safePage * pageSize, safePage * pageSize + pageSize);
-  const onSort = (k) => {
-    setSort((s) => s.key === k ? { key: k, dir: s.dir === 1 ? -1 : 1 } : { key: k, dir: -1 });
-    setPage(0);
+  const atStart = at === 1;
+  const atEnd = counted && at === last;
+  const ends = kind !== "numbered";
+  const commitJump = () => {
+    setDrafting(false);
+    const typed = draft.trim();
+    if (typed === "") return;
+    const n = Math.min(Math.max(1, int(typed, at)), last);
+    if (n !== at) go(n);
   };
-  const caret = (k) => sort.key === k ? sort.dir === 1 ? " \u25B2" : " \u25BC" : " \u2195";
-  const pageAllOn = slice.length > 0 && slice.every((r) => selected.has(r.name));
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
-    /* @__PURE__ */ jsxs4("table", { className: "ui-table ui-table--hover ui-table--zebra", children: [
-      /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsxs4("tr", { children: [
-        /* @__PURE__ */ jsx6("th", { scope: "col", children: /* @__PURE__ */ jsx6(
+  const leaveJump = (to2) => {
+    if (to2 && nav.current?.contains(to2)) {
+      setDrafting(false);
+      setDraft("");
+      return;
+    }
+    commitJump();
+  };
+  let steps = null;
+  if (single) {
+    steps = null;
+  } else if (!counted) {
+    steps = /* @__PURE__ */ jsxs4("div", { className: "ui-pager__steps", children: [
+      step("Prev", Math.max(1, at - 1), atStart),
+      step("Next", at + 1, !hasMore)
+    ] });
+  } else {
+    let middle = null;
+    if (kind === "numbered") {
+      middle = slotsFor(at, last).map((n, i) => n == null ? /* @__PURE__ */ jsx6("span", { className: "ui-pager__gap", "aria-hidden": "true", children: "\u2026" }, `gap${i}`) : /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          "data-page": n,
+          className: cx2(`${GHOST_SM} ui-pager__page`, n === at && "is-current"),
+          "aria-current": n === at ? "page" : void 0,
+          disabled: loading,
+          "aria-disabled": loading ? true : void 0,
+          onClick: () => go(n),
+          children: fmt(n)
+        },
+        n
+      ));
+    } else if (kind === "jump") {
+      middle = /* @__PURE__ */ jsxs4("span", { className: "ui-pager__jump", children: [
+        /* @__PURE__ */ jsx6("label", { htmlFor: `${uid}-jump`, children: "Page" }),
+        /* @__PURE__ */ jsx6(
           "input",
           {
-            type: "checkbox",
-            checked: pageAllOn,
-            "aria-label": "Select all rows on this page",
-            onChange: () => onTogglePage(slice.map((r) => r.name))
+            className: "ui-input ui-pager__jump-input",
+            id: `${uid}-jump`,
+            type: "number",
+            min: 1,
+            max: last,
+            disabled: loading,
+            value: drafting ? draft : String(at),
+            onChange: (e) => {
+              setDrafting(true);
+              setDraft(e.target.value);
+            },
+            onBlur: (e) => leaveJump(e.relatedTarget),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                commitJump();
+              }
+            }
           }
-        ) }),
-        columns.map((c) => (
-          // The sort control is a real <button> inside the header cell. It used to be
-          // role="button" ON the <th>, which threw away the columnheader role and put
-          // aria-sort on a role that forbids it.
+        ),
+        /* @__PURE__ */ jsxs4("span", { className: "ui-pager__jump-of", children: [
+          "of ",
+          fmt(last)
+        ] })
+      ] });
+    }
+    steps = /* @__PURE__ */ jsxs4("div", { className: "ui-pager__steps", children: [
+      ends ? step("First", 1, atStart) : null,
+      step("Prev", Math.max(1, at - 1), atStart),
+      middle,
+      step("Next", Math.min(last, at + 1), atEnd),
+      ends ? step("Last", last, atEnd) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4(
+    "nav",
+    {
+      ref: nav,
+      className: cx2("ui-pager", `ui-pager--${kind}`, !counted && "ui-pager--open", single && "ui-pager--single"),
+      "aria-label": label,
+      "aria-busy": loading ? true : void 0,
+      children: [
+        /* @__PURE__ */ jsx6("p", { className: "ui-pager__status", "aria-live": "polite", "aria-atomic": "true", children: status }),
+        sizes.length ? /* @__PURE__ */ jsxs4("div", { className: "ui-pager__size", children: [
+          /* @__PURE__ */ jsx6("label", { className: "ui-pager__size-label", htmlFor: `${uid}-size`, children: "Rows" }),
           /* @__PURE__ */ jsx6(
-            "th",
+            "select",
             {
-              scope: "col",
-              className: [c.num && "ui-table__num", c.sortable && "rx-sortable"].filter(Boolean).join(" "),
-              "aria-sort": c.sortable ? sort.key === c.key ? sort.dir === 1 ? "ascending" : "descending" : "none" : void 0,
-              children: c.sortable ? /* @__PURE__ */ jsxs4("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
-                c.label,
-                /* @__PURE__ */ jsx6("span", { className: "rx-caret", "aria-hidden": "true", children: caret(c.key) })
-              ] }) : c.label
-            },
-            c.key
+              className: "ui-select ui-pager__size-select",
+              id: `${uid}-size`,
+              disabled: loading,
+              value: size,
+              onChange: (e) => onPageSizeChange?.(Number(e.target.value)),
+              children: sizes.map((s) => /* @__PURE__ */ jsx6("option", { value: s, children: fmt(s) }, s))
+            }
           )
-        ))
-      ] }) }),
-      /* @__PURE__ */ jsx6("tbody", { children: slice.map((r) => /* @__PURE__ */ jsxs4("tr", { children: [
-        /* @__PURE__ */ jsx6("td", { children: /* @__PURE__ */ jsx6(
-          "input",
-          {
-            type: "checkbox",
-            checked: selected.has(r.name),
-            "aria-label": `Select ${r.name}`,
-            onChange: () => onToggle(r.name)
-          }
-        ) }),
-        columns.map((c) => /* @__PURE__ */ jsx6("td", { className: c.num ? "ui-table__num" : void 0, children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
-      ] }, r.name)) })
-    ] }),
-    /* @__PURE__ */ jsxs4("div", { className: "rx-pager", children: [
-      /* @__PURE__ */ jsxs4("span", { className: "rx-pager__info", children: [
-        "Page ",
-        safePage + 1,
-        " of ",
-        pages,
-        " \xB7 ",
-        sorted.length,
-        " rows"
-      ] }),
-      /* @__PURE__ */ jsx6(
-        Button,
-        {
-          variant: "ghost",
-          size: "sm",
-          icon: "chevronLeft",
-          disabled: safePage === 0,
-          onClick: () => setPage(safePage - 1),
-          children: "Prev"
-        }
-      ),
-      /* @__PURE__ */ jsx6(
-        Button,
-        {
-          variant: "ghost",
-          size: "sm",
-          iconRight: "chevronRight",
-          disabled: safePage >= pages - 1,
-          onClick: () => setPage(safePage + 1),
-          children: "Next"
+        ] }) : null,
+        steps
+      ]
+    }
+  );
+}
+
+// src/DataTable.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var NO_SORT = { key: void 0, dir: -1 };
+function sortTableRows(rows, sort) {
+  if (sort.key === void 0) return [...rows];
+  const key = sort.key;
+  return [...rows].sort((a, b) => (a[key] > b[key] ? 1 : a[key] < b[key] ? -1 : 0) * sort.dir);
+}
+function DataTable({
+  columns,
+  rows,
+  pageSize,
+  pageSizes = null,
+  onPageSizeChange,
+  pager = true,
+  pagerLabel,
+  loading = false,
+  selectable = true,
+  selected = /* @__PURE__ */ new Set(),
+  onToggle = () => {
+  },
+  onTogglePage = () => {
+  },
+  sort: controlledSort,
+  onSortChange,
+  page: controlledPage,
+  onPageChange,
+  total,
+  hasMore = false
+}) {
+  const [localSort, setLocalSort] = useState2(
+    { key: columns.find((c) => c.sortable)?.key, dir: -1 }
+  );
+  const owned = controlledPage === void 0;
+  const sort = controlledSort ?? (owned ? localSort : NO_SORT);
+  const sortIsKnown = owned || controlledSort !== void 0;
+  const [localPage, setLocalPage] = useState2(1);
+  const [localSize, setLocalSize] = useState2(DEFAULT_PAGE_SIZE2);
+  const size = sizeOf(pageSize, owned ? localSize : rows.length || DEFAULT_PAGE_SIZE2);
+  const [pagedSort, setPagedSort] = useState2(sort);
+  if (pagedSort.key !== sort.key || pagedSort.dir !== sort.dir) {
+    setPagedSort(sort);
+    setLocalPage(1);
+  }
+  const ordered = useMemo(
+    () => owned ? sortTableRows(rows, sort) : rows,
+    [owned, rows, sort.key, sort.dir]
+  );
+  const pages = Math.max(1, Math.ceil(ordered.length / size));
+  const page = owned ? Math.min(Math.max(1, localPage), pages) : controlledPage;
+  const slice = owned ? ordered.slice((page - 1) * size, page * size) : ordered;
+  const goTo = (n) => owned ? setLocalPage(n) : onPageChange?.(n);
+  const toFirstPage = () => {
+    if (owned) setLocalPage(1);
+    else if (page !== 1) onPageChange?.(1);
+  };
+  const onSort = (key) => {
+    const next = sort.key === key ? { key, dir: sort.dir === 1 ? -1 : 1 } : { key, dir: -1 };
+    if (controlledSort === void 0) setLocalSort(next);
+    onSortChange?.(next);
+    toFirstPage();
+  };
+  const caret = (k) => sort.key === k ? sort.dir === 1 ? " \u25B2" : " \u25BC" : " \u2195";
+  const pageAllOn = selectable && slice.length > 0 && slice.every((r) => selected.has(r.name));
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsxs5(
+      "table",
+      {
+        className: "ui-table ui-table--hover ui-table--zebra",
+        "aria-busy": loading || void 0,
+        children: [
+          /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
+            selectable ? /* @__PURE__ */ jsx7("th", { scope: "col", children: /* @__PURE__ */ jsx7(
+              "input",
+              {
+                type: "checkbox",
+                checked: pageAllOn,
+                "aria-label": "Select all rows on this page",
+                onChange: () => onTogglePage(slice.map((r) => r.name))
+              }
+            ) }) : null,
+            columns.map((c) => (
+              // The sort control is a real <button> inside the header cell. It used to be
+              // role="button" ON the <th>, which threw away the columnheader role and put
+              // aria-sort on a role that forbids it.
+              /* @__PURE__ */ jsx7(
+                "th",
+                {
+                  scope: "col",
+                  className: [c.num && "ui-table__num", c.sortable && "rx-sortable"].filter(Boolean).join(" "),
+                  "aria-sort": sort.key === c.key ? sort.dir === 1 ? "ascending" : "descending" : c.sortable && sortIsKnown ? "none" : void 0,
+                  children: c.sortable ? /* @__PURE__ */ jsxs5("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
+                    c.label,
+                    /* @__PURE__ */ jsx7("span", { className: "rx-caret", "aria-hidden": "true", children: caret(c.key) })
+                  ] }) : c.label
+                },
+                c.key
+              )
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsx7("tbody", { children: slice.map((r) => /* @__PURE__ */ jsxs5("tr", { children: [
+            selectable ? /* @__PURE__ */ jsx7("td", { children: /* @__PURE__ */ jsx7(
+              "input",
+              {
+                type: "checkbox",
+                checked: selected.has(r.name),
+                "aria-label": `Select ${r.name}`,
+                onChange: () => onToggle(r.name)
+              }
+            ) }) : null,
+            columns.map((c) => /* @__PURE__ */ jsx7("td", { className: c.num ? "ui-table__num" : void 0, children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
+          ] }, r.name)) })
+        ]
+      }
+    ),
+    pager ? /* @__PURE__ */ jsx7(
+      Pagination,
+      {
+        page,
+        pageSize: size,
+        total: owned ? ordered.length : total ?? null,
+        hasMore,
+        pageSizes,
+        loading,
+        ...pagerLabel === void 0 ? {} : { label: pagerLabel },
+        onPageChange: goTo,
+        onPageSizeChange: (s) => {
+          if (pageSize === void 0) setLocalSize(s);
+          onPageSizeChange?.(s);
+          if (owned) setLocalPage(1);
         }
-      )
-    ] })
+      }
+    ) : null
   ] });
 }
 
+// src/index.ts
+import { PAGE_SIZES as KIT_PAGE_SIZES, DEFAULT_PAGE_SIZE as KIT_DEFAULT_PAGE_SIZE } from "@apliteni/apliteni-ui";
+
 // src/Loading.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var cx2 = (...a) => a.filter(Boolean).join(" ");
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var cx3 = (...a) => a.filter(Boolean).join(" ");
 function Skeleton({ lines = 3, width, height, radius, className }) {
   const widths = Array.isArray(lines) ? lines : null;
   const n = widths ? widths.length : Math.max(1, lines);
@@ -289,19 +547,19 @@ function Skeleton({ lines = 3, width, height, radius, className }) {
     if (!w && !height && !radius) return void 0;
     return { ...w && { width: w }, ...height && { height }, ...radius && { borderRadius: radius } };
   };
-  return /* @__PURE__ */ jsx7("div", { className: cx2("ui-skel", className), "aria-hidden": "true", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx7("span", { className: "ui-skel__bar m-skeleton", style: styleFor(i) }, i)) });
+  return /* @__PURE__ */ jsx8("div", { className: cx3("ui-skel", className), "aria-hidden": "true", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx8("span", { className: "ui-skel__bar m-skeleton", style: styleFor(i) }, i)) });
 }
 function SkeletonTable({ rows = 5, cols = 4, head = true }) {
-  const cells = Array.from({ length: Math.max(1, cols) }, (_, i) => /* @__PURE__ */ jsx7("span", { className: "ui-skel__bar m-skeleton" }, i));
-  return /* @__PURE__ */ jsxs5(
+  const cells = Array.from({ length: Math.max(1, cols) }, (_, i) => /* @__PURE__ */ jsx8("span", { className: "ui-skel__bar m-skeleton" }, i));
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: "ui-skel ui-skel--table",
       style: { "--skel-cols": Math.max(1, cols) },
       "aria-hidden": "true",
       children: [
-        head && /* @__PURE__ */ jsx7("div", { className: "ui-skel__row ui-skel__row--head", children: cells }),
-        Array.from({ length: Math.max(1, rows) }, (_, i) => /* @__PURE__ */ jsx7("div", { className: "ui-skel__row", children: cells }, i))
+        head && /* @__PURE__ */ jsx8("div", { className: "ui-skel__row ui-skel__row--head", children: cells }),
+        Array.from({ length: Math.max(1, rows) }, (_, i) => /* @__PURE__ */ jsx8("div", { className: "ui-skel__row", children: cells }, i))
       ]
     }
   );
@@ -314,16 +572,16 @@ function BusyRegion({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
-      className: cx2("ui-busy", className),
+      className: cx3("ui-busy", className),
       role: "status",
       "aria-live": "polite",
       "aria-busy": busy,
       children: [
-        /* @__PURE__ */ jsx7("span", { className: "ui-sr", children: busy ? label : message }),
-        /* @__PURE__ */ jsx7("div", { className: "ui-busy__body", children: busy ? placeholder ?? /* @__PURE__ */ jsx7(Skeleton, { lines: 3 }) : children })
+        /* @__PURE__ */ jsx8("span", { className: "ui-sr", children: busy ? label : message }),
+        /* @__PURE__ */ jsx8("div", { className: "ui-busy__body", children: busy ? placeholder ?? /* @__PURE__ */ jsx8(Skeleton, { lines: 3 }) : children })
       ]
     }
   );
@@ -336,26 +594,34 @@ function Denied({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs5("div", { className: cx2("ui-denied", className), children: [
-    /* @__PURE__ */ jsx7("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx7(Icon, { name: icon2 }) }),
-    /* @__PURE__ */ jsx7("div", { className: "ui-denied__title", children: title }),
-    sub && /* @__PURE__ */ jsx7("div", { className: "ui-denied__sub", children: sub }),
-    need && /* @__PURE__ */ jsxs5("div", { className: "ui-denied__need", children: [
+  return /* @__PURE__ */ jsxs6("div", { className: cx3("ui-denied", className), children: [
+    /* @__PURE__ */ jsx8("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx8(Icon, { name: icon2 }) }),
+    /* @__PURE__ */ jsx8("div", { className: "ui-denied__title", children: title }),
+    sub && /* @__PURE__ */ jsx8("div", { className: "ui-denied__sub", children: sub }),
+    need && /* @__PURE__ */ jsxs6("div", { className: "ui-denied__need", children: [
       "Needs ",
-      /* @__PURE__ */ jsx7("code", { className: "ui-code", children: need })
+      /* @__PURE__ */ jsx8("code", { className: "ui-code", children: need })
     ] }),
-    children && /* @__PURE__ */ jsx7("div", { className: "ui-denied__actions", children })
+    children && /* @__PURE__ */ jsx8("div", { className: "ui-denied__actions", children })
   ] });
 }
+
+// src/index.ts
+var PAGE_SIZES = KIT_PAGE_SIZES;
+var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
 export {
   Badge,
   BusyRegion,
   Button,
   Card,
+  DEFAULT_PAGE_SIZE3 as DEFAULT_PAGE_SIZE,
   DataTable,
   Denied,
   Icon,
   Modal,
+  PAGE_SIZES,
+  Pagination,
   Skeleton,
-  SkeletonTable
+  SkeletonTable,
+  sortTableRows
 };