@blakesteve/roster 5.5.0 → 5.7.0

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/molecules/ProgressField/ProgressField.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),f=require("../../../lib/utils.cjs"),j=require("../../atoms/Progress/Progress.cjs"),h=require("../../atoms/Progress/progress-values.cjs"),y=s=>`${s}%`,N=(s,r)=>`${s} of ${r}`;function w({label:s,valueText:r,detail:n,labels:e,className:c,...a}){const{value:u,max:d,variant:o="continuous",segments:l,announce:m=!0}=a,{known:g,percent:x,done:p,applicable:v}=h.progressValues({value:u,max:d,variant:o,segments:l}),i=r??(o==="segmented"?(e?.count??N)(p,v):g?(e?.percent??y)(x):void 0);return t.jsxs("div",{className:f.cn("rst:font-ui rst:w-full rst:min-w-0",c),"data-progress-field":"",children:[t.jsxs("div",{"aria-hidden":m?!0:void 0,className:"rst:mb-1.5 rst:flex rst:items-baseline rst:justify-between rst:gap-3 rst:text-sm",children:[t.jsx("span",{className:"rst:min-w-0 rst:truncate rst:font-medium rst:text-[var(--roster-control-text)]","data-progress-label":"",children:s}),i!==void 0&&t.jsx("span",{className:"rst:shrink-0 rst:tabular-nums rst:text-gray-600 rst:dark:text-gray-400","data-progress-value":"",children:i})]}),t.jsx(j.Progress,{...a,label:s,valueText:r,labels:e}),n!==void 0&&t.jsx("p",{className:"rst:mt-1.5 rst:text-xs rst:text-gray-600 rst:dark:text-gray-400","data-progress-detail":"",children:n})]})}exports.ProgressField=w;

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

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { ProgressLabels, ProgressProps } from '../../atoms/Progress/Progress';
+export interface ProgressFieldProps extends Pick<ProgressProps, "value" | "max" | "variant" | "segments" | "status" | "size" | "rounded" | "busy" | "announce" | "announceEvery"> {
+    /** What's progressing: "Uploading photos". Shown, and said with the value. */
+    label: string;
+    /** The value as shown and said, in place of the percent or the count: "3 of 8 files". */
+    valueText?: string;
+    /** A line under the bar: bytes, a step counter, a time left. */
+    detail?: ReactNode;
+    labels?: Partial<ProgressLabels>;
+    className?: string;
+}
+/**
+ * A progress bar with its label and value above it and an optional detail
+ * line below: the form to reach for when showing progress. Label left and
+ * value right, on one baseline, so a column of them lines up down a page.
+ *
+ * A screen reader hears the label and value together, politely, as they
+ * change (no more than once every 1.5 seconds); the visible pair is hidden
+ * from it so it isn't read twice.
+ */
+declare function ProgressField({ label, valueText, detail, labels, className, ...progress }: ProgressFieldProps): import("react/jsx-runtime").JSX.Element;
+export { ProgressField };

package/dist/components/molecules/ProgressField/ProgressField.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { cn as h } from "../../../lib/utils.js";
+import { Progress as N } from "../../atoms/Progress/Progress.js";
+import { progressValues as w } from "../../atoms/Progress/progress-values.js";
+const y = (t) => `${t}%`, k = (t, r) => `${t} of ${r}`;
+function C({
+  label: t,
+  valueText: r,
+  detail: n,
+  labels: e,
+  className: m,
+  ...a
+}) {
+  const { value: d, max: l, variant: o = "continuous", segments: u, announce: p = !0 } = a, { known: g, percent: x, done: f, applicable: v } = w({ value: d, max: l, variant: o, segments: u }), i = r ?? (o === "segmented" ? (e?.count ?? k)(f, v) : g ? (e?.percent ?? y)(x) : void 0);
+  return (
+    /* min-w-0: in a grid or flex column, a field otherwise refuses to be
+       narrower than its label on one line, and a long label pushes it out of
+       the column instead of truncating. */
+    /* @__PURE__ */ c("div", { className: h("rst:font-ui rst:w-full rst:min-w-0", m), "data-progress-field": "", children: [
+      /* @__PURE__ */ c("div", { "aria-hidden": p ? !0 : void 0, className: "rst:mb-1.5 rst:flex rst:items-baseline rst:justify-between rst:gap-3 rst:text-sm", children: [
+        /* @__PURE__ */ s("span", { className: "rst:min-w-0 rst:truncate rst:font-medium rst:text-[var(--roster-control-text)]", "data-progress-label": "", children: t }),
+        i !== void 0 && /* @__PURE__ */ s("span", { className: "rst:shrink-0 rst:tabular-nums rst:text-gray-600 rst:dark:text-gray-400", "data-progress-value": "", children: i })
+      ] }),
+      /* @__PURE__ */ s(N, { ...a, label: t, valueText: r, labels: e }),
+      n !== void 0 && /* @__PURE__ */ s("p", { className: "rst:mt-1.5 rst:text-xs rst:text-gray-600 rst:dark:text-gray-400", "data-progress-detail": "", children: n })
+    ] })
+  );
+}
+export {
+  C as ProgressField
+};

package/dist/components/molecules/SkeletonPresets/SkeletonPresets.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../lib/utils.cjs"),m=require("../../atoms/Card/Card.cjs"),j=require("../../atoms/Eyebrow/Eyebrow.cjs"),c=require("../../atoms/Stat/stat-variants.cjs"),h=require("../../organisms/Table/Table.cjs"),t=require("../../atoms/Skeleton/Skeleton.cjs");function k({media:r,lines:a=3,variant:s,padding:i,className:n}){return e.jsxs(m.Card,{variant:s,padding:i,className:n,"aria-hidden":"true","data-skeleton":"card",children:[r!==void 0&&e.jsx(t.Skeleton,{shape:"block",height:r,className:"rst:mb-4"}),e.jsx(t.Skeleton,{size:"lg",width:"45%"}),a>0&&e.jsx(t.Skeleton,{size:"md",lines:a,className:"rst:mt-2"})]})}function S({columns:r,className:a}){const s=["70%","50%","60%","40%"];return e.jsx(h.TableRow,{"aria-hidden":"true",className:a,"data-skeleton":"table-row",children:Array.from({length:Math.max(1,r)},(i,n)=>e.jsx(h.TableCell,{children:e.jsx(t.Skeleton,{size:"inherit",width:s[n%s.length]})},n))})}function w({size:r="md",withName:a=!1,className:s}){return a?e.jsxs("span",{"aria-hidden":"true",className:l.cn("rst:flex rst:items-center rst:gap-3",s),"data-skeleton":"avatar",children:[e.jsx(t.Skeleton,{shape:"circle",size:r}),e.jsx(t.Skeleton,{size:"md",width:"8rem"})]}):e.jsx(t.Skeleton,{shape:"circle",size:r,className:s})}function b({size:r="md",semantics:a="definition",source:s=!1,className:i}){const n=c.statValueVariants({size:r,colorScheme:"neutral"}),o=e.jsx(t.Skeleton,{size:"inherit",width:"2.5em"}),d=x=>e.jsx(j.Eyebrow,{size:"xs",children:e.jsx(t.Skeleton,{size:"inherit",width:"9em",className:x?"rst:inline-block rst:align-baseline":void 0})}),u=e.jsx("span",{className:c.statSourceClass,children:e.jsx(t.Skeleton,{size:"inherit",width:"12em"})});return a==="standalone"?e.jsxs("span",{"aria-hidden":"true",className:l.cn("rst:flex rst:flex-col rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("span",{className:n,children:o}),d(!1),s&&u]}):e.jsxs("div",{"aria-hidden":"true",className:l.cn("rst:grid rst:content-start rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("dt",{className:"rst:relative rst:col-start-1 rst:row-start-2",children:d(!0)}),s?e.jsxs("dd",{className:l.cn("rst:m-0",n,"rst:col-start-1 rst:row-span-3 rst:row-start-1 rst:grid rst:grid-rows-subgrid"),children:[e.jsx("span",{className:"rst:row-start-1",children:o}),e.jsx("span",{className:l.cn(c.statSourceClass,"rst:row-start-3"),children:e.jsx(t.Skeleton,{size:"inherit",width:"12em"})})]}):e.jsx("dd",{className:l.cn("rst:m-0 rst:col-start-1 rst:row-start-1",n),children:o})]})}exports.SkeletonAvatar=w;exports.SkeletonCard=k;exports.SkeletonStat=b;exports.SkeletonTableRow=S;

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

@@ -0,0 +1,55 @@
+import { CSSProperties } from 'react';
+import { CardProps } from '../../atoms/Card/Card';
+export interface SkeletonCardProps extends Pick<CardProps, "variant" | "padding"> {
+    /** A media block above the text, at this height (an image, a chart). */
+    media?: CSSProperties["height"];
+    /** Body lines under the title. */
+    lines?: number;
+    className?: string;
+}
+/**
+ * A Card loading. Stands in for a Card holding an optional media block (with
+ * 16px below it), a `text-base` title, and `text-sm` body lines 8px under it.
+ */
+declare function SkeletonCard({ media, lines, variant, padding, className }: SkeletonCardProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonTableRowProps {
+    /** How many cells. */
+    columns: number;
+    className?: string;
+}
+/**
+ * A table row loading, inside Roster's Table: its own cells, at the table's
+ * size, each holding one line in the cell's text size. Stands in for a row of
+ * one-line cells.
+ */
+declare function SkeletonTableRow({ columns, className }: SkeletonTableRowProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonAvatarProps {
+    /** Avatar's sizes. */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    /** A name line beside it, in `text-sm`. */
+    withName?: boolean;
+    className?: string;
+}
+/** An Avatar loading, and optionally the name beside it. */
+declare function SkeletonAvatar({ size, withName, className }: SkeletonAvatarProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonStatProps {
+    /** Stat's sizes. */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Stat's two markups, mirrored. `definition` (Stat's default) is a `dt` and
+     * `dd` pair for a `<dl>`: put this preset in the same `<dl>`. `standalone`
+     * is spans.
+     */
+    semantics?: "definition" | "standalone";
+    /** A source line under the figure, as a Stat with `source` has. */
+    source?: boolean;
+    className?: string;
+}
+/**
+ * A Stat loading. Stat's own markup in each of its forms, with lines in place
+ * of its words, so the figure that arrives is the height of what held it:
+ * the label is the real Eyebrow, inline in a `dt` where Stat's is, so it
+ * takes the same line box.
+ */
+declare function SkeletonStat({ size, semantics, source, className }: SkeletonStatProps): import("react/jsx-runtime").JSX.Element;
+export { SkeletonCard, SkeletonTableRow, SkeletonAvatar, SkeletonStat };

package/dist/components/molecules/SkeletonPresets/SkeletonPresets.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { cn as n } from "../../../lib/utils.js";
+import { Card as u } from "../../atoms/Card/Card.js";
+import { Eyebrow as f } from "../../atoms/Eyebrow/Eyebrow.js";
+import { statValueVariants as w, statSourceClass as h } from "../../atoms/Stat/stat-variants.js";
+import { TableRow as g, TableCell as k } from "../../organisms/Table/Table.js";
+import { Skeleton as r } from "../../atoms/Skeleton/Skeleton.js";
+function T({ media: s, lines: a = 3, variant: e, padding: l, className: i }) {
+  return /* @__PURE__ */ o(u, { variant: e, padding: l, className: i, "aria-hidden": "true", "data-skeleton": "card", children: [
+    s !== void 0 && /* @__PURE__ */ t(r, { shape: "block", height: s, className: "rst:mb-4" }),
+    /* @__PURE__ */ t(r, { size: "lg", width: "45%" }),
+    a > 0 && /* @__PURE__ */ t(r, { size: "md", lines: a, className: "rst:mt-2" })
+  ] });
+}
+function j({ columns: s, className: a }) {
+  const e = ["70%", "50%", "60%", "40%"];
+  return /* @__PURE__ */ t(g, { "aria-hidden": "true", className: a, "data-skeleton": "table-row", children: Array.from({ length: Math.max(1, s) }, (l, i) => /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(r, { size: "inherit", width: e[i % e.length] }) }, i)) });
+}
+function y({ size: s = "md", withName: a = !1, className: e }) {
+  return a ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: n("rst:flex rst:items-center rst:gap-3", e), "data-skeleton": "avatar", children: [
+    /* @__PURE__ */ t(r, { shape: "circle", size: s }),
+    /* @__PURE__ */ t(r, { size: "md", width: "8rem" })
+  ] }) : /* @__PURE__ */ t(r, { shape: "circle", size: s, className: e });
+}
+function A({ size: s = "md", semantics: a = "definition", source: e = !1, className: l }) {
+  const i = w({ size: s, colorScheme: "neutral" }), d = /* @__PURE__ */ t(r, { size: "inherit", width: "2.5em" }), c = (p) => /* @__PURE__ */ t(f, { size: "xs", children: /* @__PURE__ */ t(r, { size: "inherit", width: "9em", className: p ? "rst:inline-block rst:align-baseline" : void 0 }) }), m = /* @__PURE__ */ t("span", { className: h, children: /* @__PURE__ */ t(r, { size: "inherit", width: "12em" }) });
+  return a === "standalone" ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: n("rst:flex rst:flex-col rst:gap-[3px]", l), "data-skeleton": "stat", children: [
+    /* @__PURE__ */ t("span", { className: i, children: d }),
+    c(!1),
+    e && m
+  ] }) : /* @__PURE__ */ o("div", { "aria-hidden": "true", className: n("rst:grid rst:content-start rst:gap-[3px]", l), "data-skeleton": "stat", children: [
+    /* @__PURE__ */ t("dt", { className: "rst:relative rst:col-start-1 rst:row-start-2", children: c(!0) }),
+    e ? /* @__PURE__ */ o("dd", { className: n("rst:m-0", i, "rst:col-start-1 rst:row-span-3 rst:row-start-1 rst:grid rst:grid-rows-subgrid"), children: [
+      /* @__PURE__ */ t("span", { className: "rst:row-start-1", children: d }),
+      /* @__PURE__ */ t("span", { className: n(h, "rst:row-start-3"), children: /* @__PURE__ */ t(r, { size: "inherit", width: "12em" }) })
+    ] }) : /* @__PURE__ */ t("dd", { className: n("rst:m-0 rst:col-start-1 rst:row-start-1", i), children: d })
+  ] });
+}
+export {
+  y as SkeletonAvatar,
+  T as SkeletonCard,
+  A as SkeletonStat,
+  j as SkeletonTableRow
+};

package/dist/components/molecules/StepProgress/StepProgress.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),l=require("../../../lib/utils.cjs"),h=require("../../atoms/Progress/Progress.cjs"),b={nav:"Progress",position:(s,c)=>`Step ${s} of ${c}`,done:"done",number:s=>String(s)},y=()=>r.jsx("svg",{viewBox:"0 0 24 24",width:"16",height:"16",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:r.jsx("path",{d:"M20 6 9 17l-5-5"})});function j({steps:s,current:c,variant:g="stepper",labels:f,className:p}){const o={...b,...f},n=s.length;if(n===0)return null;const t=Math.min(Math.max(1,Math.floor(Number.isFinite(c)?c:1)),n+1),d=t>n,u=d?o.position(n,n):o.position(t,n),x=d?u:`${u}: ${s[t-1]}`;return g==="segmented"?r.jsxs("div",{className:l.cn("rst:font-ui rst:w-full rst:min-w-0",p),"data-step-progress":"segmented",children:[r.jsxs("div",{className:"rst:mb-1.5 rst:flex rst:items-baseline rst:justify-between rst:gap-3 rst:text-sm","aria-hidden":"true",children:[r.jsx("span",{className:"rst:font-medium rst:text-[var(--roster-control-text)]","data-step-position":"",children:u}),!d&&r.jsx("span",{className:"rst:min-w-0 rst:truncate rst:text-gray-600 rst:dark:text-gray-400","data-step-name":"",children:s[t-1]})]}),r.jsx(h.Progress,{variant:"segmented",segments:s.map((m,i)=>i+1<t?"done":i+1===t?"current":"remaining"),announce:!1}),r.jsx("span",{role:"status",className:"rst:sr-only","data-step-status":"",children:x})]}):r.jsxs("div",{className:l.cn("rst:font-ui rst:w-full",p),"data-step-progress":"stepper",children:[r.jsx("ol",{"aria-label":o.nav,className:"rst:m-0 rst:flex rst:w-full rst:list-none rst:p-0",children:s.map((m,i)=>{const a=i+1,e=a<t?"done":a===t?"current":"upcoming";return r.jsxs("li",{"aria-current":e==="current"?"step":void 0,className:"rst:relative rst:flex rst:min-w-0 rst:flex-1 rst:flex-col rst:items-center rst:gap-1.5 rst:text-center","data-step":e,children:[i>0&&r.jsx("span",{"aria-hidden":"true",className:l.cn("rst:absolute rst:right-1/2 rst:top-4 rst:h-0.5 rst:w-full rst:-translate-y-1/2",a<=t?"rst:bg-primary-600 rst:dark:bg-primary-400 rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[Highlight]":"rst:bg-[var(--roster-skeleton)] rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[GrayText]"),"data-step-connector":a<=t?"filled":"empty"}),r.jsx("span",{"aria-hidden":"true",className:l.cn("rst:relative rst:z-10 rst:flex rst:h-8 rst:w-8 rst:items-center rst:justify-center rst:rounded-full rst:text-sm rst:font-semibold rst:tabular-nums",e==="done"&&"rst:bg-primary-600 rst:text-primary-600-ink rst:dark:bg-primary-400 rst:dark:text-gray-950 rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[Highlight] rst:forced-colors:text-[HighlightText]",e==="current"&&"rst:border-2 rst:border-primary-600 rst:bg-[var(--roster-card-bg)] rst:text-primary-600 rst:dark:border-primary-400 rst:dark:text-primary-400",e==="upcoming"&&"rst:bg-[var(--roster-skeleton)] rst:text-gray-600 rst:dark:text-gray-300 rst:forced-colors:border"),"data-step-marker":"",children:e==="done"?r.jsx(y,{}):o.number(a)}),r.jsxs("span",{className:l.cn("rst:w-full rst:px-1 rst:text-xs rst:leading-4 rst:break-words",e==="current"?"rst:font-semibold rst:text-[var(--roster-control-text)]":"rst:text-gray-600 rst:dark:text-gray-400"),children:[m,e==="done"&&r.jsx("span",{className:"rst:sr-only",children:`, ${o.done}`})]})]},`${a}-${m}`)})}),r.jsx("span",{role:"status",className:"rst:sr-only","data-step-status":"",children:x})]})}exports.StepProgress=j;

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

@@ -0,0 +1,36 @@
+/** Every word StepProgress shows or says. Pass any of them in `labels` to replace it. */
+export interface StepProgressLabels {
+    /** The list's name. */
+    nav: string;
+    /** Where you are: "Step 2 of 5". */
+    position: (current: number, total: number) => string;
+    /** Said after a finished step's name. */
+    done: string;
+    /** A step's number as shown. */
+    number: (step: number) => string;
+}
+export interface StepProgressProps {
+    /** Each step's name, in order. */
+    steps: string[];
+    /** The step you're on, from 1. Past the last means every step is done. */
+    current: number;
+    /**
+     * - `"stepper"`: every step named, with a numbered marker and connectors
+     *   that fill behind the current one. For a flow with room to show its map.
+     * - `"segmented"`: a segmented bar and "Step 2 of 5", for a card or a side
+     *   panel. The segments alone don't say where you are, so the words always
+     *   come with them.
+     */
+    variant?: "stepper" | "segmented";
+    labels?: Partial<StepProgressLabels>;
+    className?: string;
+}
+/**
+ * Discrete progress through named steps: a join flow, a setup, a checkout.
+ *
+ * The current step is `aria-current="step"`, each finished one says so, and
+ * a polite status says the new position ("Step 3 of 5: Shelf") when it
+ * changes.
+ */
+declare function StepProgress({ steps, current: rawCurrent, variant, labels: overrides, className }: StepProgressProps): import("react/jsx-runtime").JSX.Element | null;
+export { StepProgress };

package/dist/components/molecules/StepProgress/StepProgress.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { cn as d } from "../../../lib/utils.js";
+import { Progress as b } from "../../atoms/Progress/Progress.js";
+const y = {
+  nav: "Progress",
+  position: (s, c) => `Step ${s} of ${c}`,
+  done: "done",
+  number: (s) => String(s)
+}, k = () => /* @__PURE__ */ r("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ r("path", { d: "M20 6 9 17l-5-5" }) });
+function j({ steps: s, current: c, variant: h = "stepper", labels: x, className: g }) {
+  const n = { ...y, ...x }, a = s.length;
+  if (a === 0) return null;
+  const t = Math.min(Math.max(1, Math.floor(Number.isFinite(c) ? c : 1)), a + 1), m = t > a, p = m ? n.position(a, a) : n.position(t, a), f = m ? p : `${p}: ${s[t - 1]}`;
+  return h === "segmented" ? /* @__PURE__ */ l("div", { className: d("rst:font-ui rst:w-full rst:min-w-0", g), "data-step-progress": "segmented", children: [
+    /* @__PURE__ */ l("div", { className: "rst:mb-1.5 rst:flex rst:items-baseline rst:justify-between rst:gap-3 rst:text-sm", "aria-hidden": "true", children: [
+      /* @__PURE__ */ r("span", { className: "rst:font-medium rst:text-[var(--roster-control-text)]", "data-step-position": "", children: p }),
+      !m && /* @__PURE__ */ r("span", { className: "rst:min-w-0 rst:truncate rst:text-gray-600 rst:dark:text-gray-400", "data-step-name": "", children: s[t - 1] })
+    ] }),
+    /* @__PURE__ */ r(
+      b,
+      {
+        variant: "segmented",
+        segments: s.map((u, i) => i + 1 < t ? "done" : i + 1 === t ? "current" : "remaining"),
+        announce: !1
+      }
+    ),
+    /* @__PURE__ */ r("span", { role: "status", className: "rst:sr-only", "data-step-status": "", children: f })
+  ] }) : /* @__PURE__ */ l("div", { className: d("rst:font-ui rst:w-full", g), "data-step-progress": "stepper", children: [
+    /* @__PURE__ */ r("ol", { "aria-label": n.nav, className: "rst:m-0 rst:flex rst:w-full rst:list-none rst:p-0", children: s.map((u, i) => {
+      const o = i + 1, e = o < t ? "done" : o === t ? "current" : "upcoming";
+      return /* @__PURE__ */ l(
+        "li",
+        {
+          "aria-current": e === "current" ? "step" : void 0,
+          className: "rst:relative rst:flex rst:min-w-0 rst:flex-1 rst:flex-col rst:items-center rst:gap-1.5 rst:text-center",
+          "data-step": e,
+          children: [
+            i > 0 && /* @__PURE__ */ r(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: d(
+                  "rst:absolute rst:right-1/2 rst:top-4 rst:h-0.5 rst:w-full rst:-translate-y-1/2",
+                  o <= t ? "rst:bg-primary-600 rst:dark:bg-primary-400 rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[Highlight]" : "rst:bg-[var(--roster-skeleton)] rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[GrayText]"
+                ),
+                "data-step-connector": o <= t ? "filled" : "empty"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: d(
+                  "rst:relative rst:z-10 rst:flex rst:h-8 rst:w-8 rst:items-center rst:justify-center rst:rounded-full rst:text-sm rst:font-semibold rst:tabular-nums",
+                  e === "done" && "rst:bg-primary-600 rst:text-primary-600-ink rst:dark:bg-primary-400 rst:dark:text-gray-950 rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[Highlight] rst:forced-colors:text-[HighlightText]",
+                  /* A border, not a ring: forced colors keep a border and drop
+                     the shadow a ring is drawn with. */
+                  e === "current" && "rst:border-2 rst:border-primary-600 rst:bg-[var(--roster-card-bg)] rst:text-primary-600 rst:dark:border-primary-400 rst:dark:text-primary-400",
+                  e === "upcoming" && "rst:bg-[var(--roster-skeleton)] rst:text-gray-600 rst:dark:text-gray-300 rst:forced-colors:border"
+                ),
+                "data-step-marker": "",
+                children: e === "done" ? /* @__PURE__ */ r(k, {}) : n.number(o)
+              }
+            ),
+            /* @__PURE__ */ l(
+              "span",
+              {
+                className: d(
+                  "rst:w-full rst:px-1 rst:text-xs rst:leading-4 rst:break-words",
+                  e === "current" ? "rst:font-semibold rst:text-[var(--roster-control-text)]" : "rst:text-gray-600 rst:dark:text-gray-400"
+                ),
+                children: [
+                  u,
+                  e === "done" && /* @__PURE__ */ r("span", { className: "rst:sr-only", children: `, ${n.done}` })
+                ]
+              }
+            )
+          ]
+        },
+        `${o}-${u}`
+      );
+    }) }),
+    /* @__PURE__ */ r("span", { role: "status", className: "rst:sr-only", "data-step-status": "", children: f })
+  ] });
+}
+export {
+  j as StepProgress
+};

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 {};