@smwb/ui-react 2.6.3 → 2.8.0

package/dist/components/dataDisplay/meter/meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.js","sources":["../../../../src/components/dataDisplay/meter/meter.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport type MeterColor = \"neutral\" | \"primary\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\n/** From this share of `max` (0–1) on, the meter takes `color`. */\nexport interface MeterThreshold {\n  from: number;\n  color: MeterColor;\n}\n\n/** Info while under way, success when complete. */\nexport const DEFAULT_METER_THRESHOLDS: readonly MeterThreshold[] = [\n  { from: 0, color: \"info\" },\n  { from: 1, color: \"success\" },\n];\n\nexport interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"role\"> {\n  className?: string;\n  /** How many are done (X of Y). */\n  value: number;\n  /** How many there are in all (X of Y). */\n  max: number;\n  /** What is measured — the accessible name, e.g. \"Requirements accepted\". */\n  label: string;\n  /** Visible text instead of \"X of Y\": markup, or a function of (value, max). */\n  text?: ReactNode | ((value: number, max: number) => ReactNode);\n  /** The word between the figures in the default text and in aria-valuetext. */\n  ofLabel?: string;\n  /** Colour by share of `max`: the last threshold the share reaches wins. */\n  thresholds?: readonly MeterThreshold[];\n  /** A fixed colour, instead of the thresholds. */\n  color?: MeterColor;\n  /** The bar only; the text stays available to assistive technology. */\n  hideText?: boolean;\n  /** Test id of the root `<div>`; `meter` unless given. */\n  \"data-testid\"?: string;\n}\n\n/** The colour for a share of the whole: the last threshold (by `from`) the share reaches. */\nexport function meterColor(share: number, thresholds: readonly MeterThreshold[]): MeterColor {\n  let color: MeterColor = \"neutral\";\n  let from = -Infinity;\n  for (const threshold of thresholds) {\n    if (share >= threshold.from && threshold.from >= from) {\n      color = threshold.color;\n      from = threshold.from;\n    }\n  }\n  return color;\n}\n\n/** A share of a whole, \"X of Y\": a bar and the figures beside it, coloured by thresholds. */\nexport const Meter = React.forwardRef<HTMLDivElement, MeterProps>(function Meter(\n  {\n    className,\n    value,\n    max,\n    label,\n    text,\n    ofLabel = \"of\",\n    thresholds = DEFAULT_METER_THRESHOLDS,\n    color,\n    hideText,\n    \"data-testid\": dataTestId = \"meter\",\n    ...rest\n  },\n  ref\n) {\n  const share = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;\n  const tone = color ?? meterColor(share, thresholds);\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      role=\"meter\"\n      aria-label={label}\n      aria-valuenow={value}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-valuetext={`${value} ${ofLabel} ${max}`}\n      data-testid={dataTestId}\n      className={cn(\"smwb-meter\", `smwb-meter_color-${tone}`, { \"smwb-meter_bar-only\": hideText }, className)}\n    >\n      <span className=\"smwb-meter__track\" aria-hidden=\"true\">\n        <span className=\"smwb-meter__fill\" style={{ width: `${share * 100}%` }} />\n      </span>\n      {hideText ? null : (\n        <span className=\"smwb-meter__text\" aria-hidden=\"true\">\n          {text === undefined ? (\n            <>\n              <b className=\"smwb-meter__value\">{value}</b>\n              <span className=\"smwb-meter__of\">\n                {\" \"}\n                {ofLabel} {max}\n              </span>\n            </>\n          ) : typeof text === \"function\" ? (\n            text(value, max)\n          ) : (\n            text\n          )}\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport default Meter;\n"],"names":["DEFAULT_METER_THRESHOLDS","meterColor","share","thresholds","color","from","threshold","Meter","React","className","value","max","label","text","ofLabel","hideText","dataTestId","rest","ref","tone","jsxs","cn","jsx","Fragment"],"mappings":";;;;;AAcO,MAAMA,IAAsD;AAAA,EACjE,EAAE,MAAM,GAAG,OAAO,OAAA;AAAA,EAClB,EAAE,MAAM,GAAG,OAAO,UAAA;AACpB;AAyBO,SAASC,EAAWC,GAAeC,GAAmD;AAC3F,MAAIC,IAAoB,WACpBC,IAAO;AACX,aAAWC,KAAaH;AACtB,IAAID,KAASI,EAAU,QAAQA,EAAU,QAAQD,MAC/CD,IAAQE,EAAU,OAClBD,IAAOC,EAAU;AAGrB,SAAOF;AACT;AAGO,MAAMG,IAAQC,EAAM,WAAuC,SAChE;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,YAAAX,IAAaH;AAAA,EACb,OAAAI;AAAA,EACA,UAAAW;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAMhB,IAAQS,IAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGD,IAAQC,CAAG,CAAC,IAAI,GAC1DQ,IAAOf,KAAA,OAAAA,IAASH,EAAWC,GAAOC,CAAU;AAClD,SACE,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,KAAAC;AAAA,MACA,MAAK;AAAA,MACL,cAAYN;AAAA,MACZ,iBAAeF;AAAA,MACf,iBAAe;AAAA,MACf,iBAAeC;AAAA,MACf,kBAAgB,GAAGD,CAAK,IAAII,CAAO,IAAIH,CAAG;AAAA,MAC1C,eAAaK;AAAA,MACb,WAAWK,EAAG,cAAc,oBAAoBF,CAAI,IAAI,EAAE,uBAAuBJ,EAAA,GAAYN,CAAS;AAAA,MAEtG,UAAA;AAAA,QAAA,gBAAAa,EAAC,UAAK,WAAU,qBAAoB,eAAY,QAC9C,4BAAC,QAAA,EAAK,WAAU,oBAAmB,OAAO,EAAE,OAAO,GAAGpB,IAAQ,GAAG,OAAO,GAC1E;AAAA,QACCa,IAAW,OACV,gBAAAO,EAAC,QAAA,EAAK,WAAU,oBAAmB,eAAY,QAC5C,UAAAT,MAAS,SACR,gBAAAO,EAAAG,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAD,EAAC,KAAA,EAAE,WAAU,qBAAqB,UAAAZ,GAAM;AAAA,UACxC,gBAAAU,EAAC,QAAA,EAAK,WAAU,kBACb,UAAA;AAAA,YAAA;AAAA,YACAN;AAAA,YAAQ;AAAA,YAAEH;AAAA,UAAA,EAAA,CACb;AAAA,QAAA,GACF,IACE,OAAOE,KAAS,aAClBA,EAAKH,GAAOC,CAAG,IAEfE,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/components/dataDisplay/personChip/index.d.ts

@@ -0,0 +1,2 @@
+export { PersonChip, initialsOf, avatarColor, default } from "./personChip";
+export type { PersonChipProps } from "./personChip";

package/dist/components/dataDisplay/personChip/personChip.d.ts

@@ -0,0 +1,33 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+import { type AvatarSize } from "../avatar";
+/** Up to two initials from a name: "Anna Petrova" → "AP", "anna" → "A". */
+export declare function initialsOf(name: string): string;
+/**
+ * A steady background colour for a person's avatar, derived from a seed (an id
+ * or the name): the same person always gets the same colour, on the server too.
+ */
+export declare function avatarColor(seed: string): string;
+export interface PersonChipProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    className?: string;
+    /** The person's name: shown beside the avatar, and the source of its initials. */
+    name: string;
+    /** Avatar image; initials on a colour without it or when it fails. */
+    src?: string;
+    /** Link to the person's card. */
+    href?: string;
+    /** The avatar only; the name becomes its tooltip and accessible name. */
+    compact?: boolean;
+    /** Avatar size: a preset or pixels. 24px by default. */
+    size?: AvatarSize | number;
+    /** Seed for the avatar colour (an id); the name by default. */
+    colorSeed?: string;
+    /** A fixed avatar colour instead of the derived one. */
+    color?: string;
+    /** A second line under the name: a role, a date. */
+    meta?: ReactNode;
+    /** Test id of the root; `person-chip` unless given. */
+    "data-testid"?: string;
+}
+/** A person: avatar and name, a link to their card when `href` is set. */
+export declare const PersonChip: React.ForwardRefExoticComponent<PersonChipProps & React.RefAttributes<HTMLElement>>;
+export default PersonChip;

package/dist/components/dataDisplay/personChip/personChip.js

@@ -0,0 +1,73 @@
+import { jsxs as h, jsx as l } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/personChip/personChip.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                               */
+import _ from "react";
+import b from "clsx";
+import { Avatar as u } from "../avatar/avatar.js";
+function w(t) {
+  const i = t.trim().split(/\s+/).filter(Boolean), s = (r) => {
+    var n;
+    return r && (n = Array.from(r)[0]) != null ? n : "";
+  };
+  return (s(i[0]) + (i.length > 1 ? s(i[i.length - 1]) : "")).toUpperCase();
+}
+function g(t) {
+  var s;
+  let i = 0;
+  for (const r of t) i = i * 31 + ((s = r.codePointAt(0)) != null ? s : 0) >>> 0;
+  return `hsl(${i % 360} 42% 42%)`;
+}
+const R = _.forwardRef(function({
+  className: i,
+  name: s,
+  src: r,
+  href: n,
+  compact: a,
+  size: c = 24,
+  colorSeed: p,
+  color: e,
+  meta: m,
+  "data-testid": f = "person-chip",
+  ...o
+}, d) {
+  return /* @__PURE__ */ h(
+    n ? "a" : "span",
+    {
+      ...o,
+      ref: d,
+      ...n ? { href: n } : {},
+      title: a ? s : void 0,
+      role: a && !n ? "img" : o.role,
+      "aria-label": a ? s : o["aria-label"],
+      "data-testid": f,
+      className: b(
+        "smwb-person-chip",
+        { "smwb-person-chip_link": !!n, "smwb-person-chip_compact": a },
+        i
+      ),
+      children: [
+        /* @__PURE__ */ l(
+          u,
+          {
+            className: "smwb-person-chip__avatar",
+            size: c,
+            src: r,
+            color: e != null ? e : g(p != null ? p : s),
+            "aria-hidden": "true",
+            children: w(s)
+          }
+        ),
+        a ? null : /* @__PURE__ */ h("span", { className: "smwb-person-chip__text", children: [
+          /* @__PURE__ */ l("span", { className: "smwb-person-chip__name", children: s }),
+          m ? /* @__PURE__ */ l("span", { className: "smwb-person-chip__meta", children: m }) : null
+        ] })
+      ]
+    }
+  );
+});
+export {
+  R as PersonChip,
+  g as avatarColor,
+  w as initialsOf
+};
+//# sourceMappingURL=personChip.js.map

package/dist/components/dataDisplay/personChip/personChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"personChip.js","sources":["../../../../src/components/dataDisplay/personChip/personChip.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport { Avatar, type AvatarSize } from \"../avatar\";\n\n/** Up to two initials from a name: \"Anna Petrova\" → \"AP\", \"anna\" → \"A\". */\nexport function initialsOf(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  const first = (word: string | undefined): string => (word ? (Array.from(word)[0] ?? \"\") : \"\");\n  return (first(words[0]) + (words.length > 1 ? first(words[words.length - 1]) : \"\")).toUpperCase();\n}\n\n/**\n * A steady background colour for a person's avatar, derived from a seed (an id\n * or the name): the same person always gets the same colour, on the server too.\n */\nexport function avatarColor(seed: string): string {\n  let hash = 0;\n  for (const char of seed) hash = (hash * 31 + (char.codePointAt(0) ?? 0)) >>> 0;\n  return `hsl(${hash % 360} 42% 42%)`;\n}\n\nexport interface PersonChipProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  className?: string;\n  /** The person's name: shown beside the avatar, and the source of its initials. */\n  name: string;\n  /** Avatar image; initials on a colour without it or when it fails. */\n  src?: string;\n  /** Link to the person's card. */\n  href?: string;\n  /** The avatar only; the name becomes its tooltip and accessible name. */\n  compact?: boolean;\n  /** Avatar size: a preset or pixels. 24px by default. */\n  size?: AvatarSize | number;\n  /** Seed for the avatar colour (an id); the name by default. */\n  colorSeed?: string;\n  /** A fixed avatar colour instead of the derived one. */\n  color?: string;\n  /** A second line under the name: a role, a date. */\n  meta?: ReactNode;\n  /** Test id of the root; `person-chip` unless given. */\n  \"data-testid\"?: string;\n}\n\n/** A person: avatar and name, a link to their card when `href` is set. */\nexport const PersonChip = React.forwardRef<HTMLElement, PersonChipProps>(function PersonChip(\n  {\n    className,\n    name,\n    src,\n    href,\n    compact,\n    size = 24,\n    colorSeed,\n    color,\n    meta,\n    \"data-testid\": dataTestId = \"person-chip\",\n    ...rest\n  },\n  ref\n) {\n  const Tag = (href ? \"a\" : \"span\") as \"span\";\n  return (\n    <Tag\n      {...rest}\n      ref={ref}\n      {...(href ? { href } : {})}\n      title={compact ? name : undefined}\n      // A compact chip is named by the person's name, as an image unless it is a\n      // link: these win over the caller's. Otherwise the caller's stay.\n      role={compact && !href ? \"img\" : rest.role}\n      aria-label={compact ? name : rest[\"aria-label\"]}\n      data-testid={dataTestId}\n      className={cn(\n        \"smwb-person-chip\",\n        { \"smwb-person-chip_link\": !!href, \"smwb-person-chip_compact\": compact },\n        className\n      )}\n    >\n      <Avatar\n        className=\"smwb-person-chip__avatar\"\n        size={size}\n        src={src}\n        color={color ?? avatarColor(colorSeed ?? name)}\n        aria-hidden=\"true\"\n      >\n        {initialsOf(name)}\n      </Avatar>\n      {compact ? null : (\n        <span className=\"smwb-person-chip__text\">\n          <span className=\"smwb-person-chip__name\">{name}</span>\n          {meta ? <span className=\"smwb-person-chip__meta\">{meta}</span> : null}\n        </span>\n      )}\n    </Tag>\n  );\n});\n\nexport default PersonChip;\n"],"names":["initialsOf","name","words","first","word","_a","avatarColor","seed","hash","char","PersonChip","React","className","src","href","compact","size","colorSeed","color","meta","dataTestId","rest","ref","jsxs","cn","jsx","Avatar"],"mappings":";;;;;;AAOO,SAASA,EAAWC,GAAsB;AAC/C,QAAMC,IAAQD,EAAK,KAAA,EAAO,MAAM,KAAK,EAAE,OAAO,OAAO,GAC/CE,IAAQ,CAACC,MAAA;;AAAsC,WAAAA,MAAQC,IAAA,MAAM,KAAKD,CAAI,EAAE,CAAC,MAAlB,OAAAC,IAA6B;AAAA;AAC1F,UAAQF,EAAMD,EAAM,CAAC,CAAC,KAAKA,EAAM,SAAS,IAAIC,EAAMD,EAAMA,EAAM,SAAS,CAAC,CAAC,IAAI,KAAK,YAAA;AACtF;AAMO,SAASI,EAAYC,GAAsB;;AAChD,MAAIC,IAAO;AACX,aAAWC,KAAQF,EAAM,CAAAC,IAAQA,IAAO,OAAMH,IAAAI,EAAK,YAAY,CAAC,MAAlB,OAAAJ,IAAuB,OAAQ;AAC7E,SAAO,OAAOG,IAAO,GAAG;AAC1B;AAyBO,MAAME,IAAaC,EAAM,WAAyC,SACvE;AAAA,EACE,WAAAC;AAAA,EACA,MAAAX;AAAA,EACA,KAAAY;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AAEA,SACE,gBAAAC;AAAA,IAFWT,IAAO,MAAM;AAAA,IAEvB;AAAA,MACE,GAAGO;AAAA,MACJ,KAAAC;AAAA,MACC,GAAIR,IAAO,EAAE,MAAAA,EAAA,IAAS,CAAA;AAAA,MACvB,OAAOC,IAAUd,IAAO;AAAA,MAGxB,MAAMc,KAAW,CAACD,IAAO,QAAQO,EAAK;AAAA,MACtC,cAAYN,IAAUd,IAAOoB,EAAK,YAAY;AAAA,MAC9C,eAAaD;AAAA,MACb,WAAWI;AAAA,QACT;AAAA,QACA,EAAE,yBAAyB,CAAC,CAACV,GAAM,4BAA4BC,EAAA;AAAA,QAC/DH;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAa;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAAV;AAAA,YACA,KAAAH;AAAA,YACA,OAAOK,KAAA,OAAAA,IAASZ,EAAYW,KAAA,OAAAA,IAAahB,CAAI;AAAA,YAC7C,eAAY;AAAA,YAEX,YAAWA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAEjBc,IAAU,OACT,gBAAAQ,EAAC,QAAA,EAAK,WAAU,0BACd,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAxB,GAAK;AAAA,UAC9CkB,IAAO,gBAAAM,EAAC,QAAA,EAAK,WAAU,0BAA0B,aAAK,IAAU;AAAA,QAAA,EAAA,CACnE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/components/dataDisplay/stat/index.d.ts

@@ -0,0 +1,2 @@
+export { Stat, StatGroup, default } from "./stat";
+export type { StatProps, StatGroupProps, StatTone } from "./stat";

package/dist/components/dataDisplay/stat/stat.d.ts

@@ -0,0 +1,38 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+export type StatTone = "neutral" | "info" | "success" | "warning" | "error";
+export interface StatProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    className?: string;
+    /** What the figure counts. */
+    label: ReactNode;
+    /** The figure — a number, or a short value such as "3 / 14". */
+    value: ReactNode;
+    /** A line under the value: a comparison, a period, a caveat. */
+    hint?: ReactNode;
+    /** An icon beside the figure: a Material Symbols name or an element. */
+    icon?: string | ReactNode;
+    /** Colour of the accent (a tile's edge, the icon). `warning` and `error` colour the figure too. */
+    tone?: StatTone;
+    /** `tile`: a bordered card with an accent edge, for KPIs. `plain`: text only, for rows of small figures. */
+    variant?: "tile" | "plain";
+    /** Make the whole stat a link to what the figure is made of. */
+    href?: string;
+    /** Test id of the root; `stat` unless given. */
+    "data-testid"?: string;
+}
+/**
+ * A figure with its label: a KPI tile on a dashboard, or a small stat in a row.
+ * Children go under it — a meter, a sparkline, a note.
+ */
+export declare const Stat: React.ForwardRefExoticComponent<StatProps & {
+    children?: ReactNode | undefined;
+} & React.RefAttributes<HTMLElement>>;
+export interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    /** Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default. */
+    minItemWidth?: number | string;
+}
+/** A responsive row of stats: as many columns as fit, each at least `minItemWidth` wide. */
+export declare const StatGroup: React.ForwardRefExoticComponent<StatGroupProps & {
+    children?: ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default Stat;

package/dist/components/dataDisplay/stat/stat.js

@@ -0,0 +1,60 @@
+import { jsxs as _, jsx as s } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/stat/stat.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                   */
+import c from "react";
+import p from "clsx";
+import { Icon as f } from "../../base/icon/icon.js";
+const h = c.forwardRef(function({
+  className: o,
+  label: r,
+  value: a,
+  hint: m,
+  icon: t,
+  tone: l = "neutral",
+  variant: e = "tile",
+  href: n,
+  children: i,
+  "data-testid": d = "stat",
+  ...b
+}, u) {
+  return /* @__PURE__ */ _(
+    n ? "a" : "div",
+    {
+      ...b,
+      ref: u,
+      ...n ? { href: n } : {},
+      "data-testid": d,
+      className: p(
+        "smwb-stat",
+        `smwb-stat_${e}`,
+        `smwb-stat_tone-${l}`,
+        { "smwb-stat_link": !!n, "smwb-stat_with-icon": !!t },
+        o
+      ),
+      children: [
+        t ? /* @__PURE__ */ s("span", { className: "smwb-stat__icon", "aria-hidden": "true", children: typeof t == "string" ? /* @__PURE__ */ s(f, { name: t, size: 20 }) : t }) : null,
+        /* @__PURE__ */ s("span", { className: "smwb-stat__label", children: r }),
+        /* @__PURE__ */ s("span", { className: "smwb-stat__value", children: a }),
+        m ? /* @__PURE__ */ s("span", { className: "smwb-stat__hint", children: m }) : null,
+        i ? /* @__PURE__ */ s("div", { className: "smwb-stat__extra", children: i }) : null
+      ]
+    }
+  );
+}), j = c.forwardRef(function({ className: o, style: r, minItemWidth: a, children: m, ...t }, l) {
+  const e = typeof a == "number" ? `${a}px` : a;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ...t,
+      ref: l,
+      className: p("smwb-stat-group", o),
+      style: e === void 0 ? r : { ...r, "--smwb-stat-min": e },
+      children: m
+    }
+  );
+});
+export {
+  h as Stat,
+  j as StatGroup
+};
+//# sourceMappingURL=stat.js.map

package/dist/components/dataDisplay/stat/stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.js","sources":["../../../../src/components/dataDisplay/stat/stat.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type StatTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface StatProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  className?: string;\n  /** What the figure counts. */\n  label: ReactNode;\n  /** The figure — a number, or a short value such as \"3 / 14\". */\n  value: ReactNode;\n  /** A line under the value: a comparison, a period, a caveat. */\n  hint?: ReactNode;\n  /** An icon beside the figure: a Material Symbols name or an element. */\n  icon?: string | ReactNode;\n  /** Colour of the accent (a tile's edge, the icon). `warning` and `error` colour the figure too. */\n  tone?: StatTone;\n  /** `tile`: a bordered card with an accent edge, for KPIs. `plain`: text only, for rows of small figures. */\n  variant?: \"tile\" | \"plain\";\n  /** Make the whole stat a link to what the figure is made of. */\n  href?: string;\n  /** Test id of the root; `stat` unless given. */\n  \"data-testid\"?: string;\n}\n\n/**\n * A figure with its label: a KPI tile on a dashboard, or a small stat in a row.\n * Children go under it — a meter, a sparkline, a note.\n */\nexport const Stat = React.forwardRef<HTMLElement, PropsWithChildren<StatProps>>(function Stat(\n  {\n    className,\n    label,\n    value,\n    hint,\n    icon,\n    tone = \"neutral\",\n    variant = \"tile\",\n    href,\n    children,\n    \"data-testid\": dataTestId = \"stat\",\n    ...rest\n  },\n  ref\n) {\n  const Tag = (href ? \"a\" : \"div\") as \"div\";\n  return (\n    <Tag\n      {...rest}\n      ref={ref as React.Ref<HTMLDivElement>}\n      {...(href ? { href } : {})}\n      data-testid={dataTestId}\n      className={cn(\n        \"smwb-stat\",\n        `smwb-stat_${variant}`,\n        `smwb-stat_tone-${tone}`,\n        { \"smwb-stat_link\": !!href, \"smwb-stat_with-icon\": !!icon },\n        className\n      )}\n    >\n      {icon ? (\n        <span className=\"smwb-stat__icon\" aria-hidden=\"true\">\n          {typeof icon === \"string\" ? <Icon name={icon} size={20} /> : icon}\n        </span>\n      ) : null}\n      <span className=\"smwb-stat__label\">{label}</span>\n      <span className=\"smwb-stat__value\">{value}</span>\n      {hint ? <span className=\"smwb-stat__hint\">{hint}</span> : null}\n      {children ? <div className=\"smwb-stat__extra\">{children}</div> : null}\n    </Tag>\n  );\n});\n\nexport interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default. */\n  minItemWidth?: number | string;\n}\n\n/** A responsive row of stats: as many columns as fit, each at least `minItemWidth` wide. */\nexport const StatGroup = React.forwardRef<HTMLDivElement, PropsWithChildren<StatGroupProps>>(function StatGroup(\n  { className, style, minItemWidth, children, ...rest },\n  ref\n) {\n  const width = typeof minItemWidth === \"number\" ? `${minItemWidth}px` : minItemWidth;\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-stat-group\", className)}\n      style={width === undefined ? style : ({ ...style, \"--smwb-stat-min\": width } as CSSProperties)}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport default Stat;\n"],"names":["Stat","React","className","label","value","hint","icon","tone","variant","href","children","dataTestId","rest","ref","jsxs","cn","jsx","Icon","StatGroup","style","minItemWidth","width"],"mappings":";;;;;;AAgCO,MAAMA,IAAOC,EAAM,WAAsD,SAC9E;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AAEA,SACE,gBAAAC;AAAA,IAFWL,IAAO,MAAM;AAAA,IAEvB;AAAA,MACE,GAAGG;AAAA,MACJ,KAAAC;AAAA,MACC,GAAIJ,IAAO,EAAE,MAAAA,EAAA,IAAS,CAAA;AAAA,MACvB,eAAaE;AAAA,MACb,WAAWI;AAAA,QACT;AAAA,QACA,aAAaP,CAAO;AAAA,QACpB,kBAAkBD,CAAI;AAAA,QACtB,EAAE,kBAAkB,CAAC,CAACE,GAAM,uBAAuB,CAAC,CAACH,EAAA;AAAA,QACrDJ;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAI,sBACE,QAAA,EAAK,WAAU,mBAAkB,eAAY,QAC3C,UAAA,OAAOA,KAAS,WAAW,gBAAAU,EAACC,KAAK,MAAMX,GAAM,MAAM,IAAI,IAAKA,GAC/D,IACE;AAAA,QACJ,gBAAAU,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAb,GAAM;AAAA,QAC1C,gBAAAa,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAZ,GAAM;AAAA,QACzCC,IAAO,gBAAAW,EAAC,QAAA,EAAK,WAAU,mBAAmB,aAAK,IAAU;AAAA,QACzDN,IAAW,gBAAAM,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAAN,GAAS,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvE,CAAC,GASYQ,IAAYjB,EAAM,WAA8D,SAC3F,EAAE,WAAAC,GAAW,OAAAiB,GAAO,cAAAC,GAAc,UAAAV,GAAU,GAAGE,EAAA,GAC/CC,GACA;AACA,QAAMQ,IAAQ,OAAOD,KAAiB,WAAW,GAAGA,CAAY,OAAOA;AACvE,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,mBAAmBb,CAAS;AAAA,MAC1C,OAAOmB,MAAU,SAAYF,IAAS,EAAE,GAAGA,GAAO,mBAAmBE,EAAA;AAAA,MAEpE,UAAAX;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/components/dataDisplay/table/table.d.ts

@@ -9,6 +9,28 @@ export interface TableProps extends HTMLAttributes<HTMLDivElement> {
     stickyHeader?: boolean;
     /** Optional accessible caption rendered for screen readers. */
     caption?: ReactNode;
+    /**
+     * Show each row as a card — cells one under another, each with its column's
+     * label — while the table's container is narrower than this breakpoint:
+     * `sm` (420px), `md` (768px) or `lg` (1024px). A container query: the space
+     * the table has decides, not the window.
+     *
+     * A cell's label is its `TableCell label`, or else the label of the head cell
+     * of its column: the head cell's `label`, or the text of its content. Columns
+     * count as in HTML: by position in the row, with `colSpan`, after the columns
+     * that `rowSpan` cells of the rows above take in the same head or body. A cell
+     * spanning several columns takes no label from the head and fills the card's
+     * width, and a head cell spanning several columns labels none of them. With
+     * several head rows, the lowest head cell over a column names it.
+     *
+     * The columns come from the elements written: rows written as `TableRow` in
+     * `TableHead` or `TableBody`, and cells in a row (arrays and fragments
+     * included). A component that renders a row counts as a row whose cells span
+     * no rows down, and a component that renders cells counts as one cell, with
+     * its own `colSpan` and `rowSpan`: give the cells after such a component, or
+     * the component's own cells, a `label`.
+     */
+    stackBelow?: "sm" | "md" | "lg";
     paginationSettings?: TablePaginationProps;
 }
 declare const Table: import("react").ForwardRefExoticComponent<TableProps & {

package/dist/components/dataDisplay/table/table.js

@@ -1,38 +1,48 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/table/table.entry.css';/* empty css                                                     */
-import { forwardRef as n } from "react";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/table/table.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                     */
+import { forwardRef as u, useState as _ } from "react";
 import r from "clsx";
-import _ from "./tablePagination/tablePagination.js";
-const v = n(
-  ({ className: l, dense: b, hovered: o, children: t, paginationSettings: e, isLoading: i, stickyHeader: c, caption: m, ...w }, d) => /* @__PURE__ */ s(
-    "div",
-    {
-      ref: d,
-      className: r("smwb-table__wrapper", l, {
-        "smwb-table__wrapper_loading": i
-      }),
-      ...w,
-      children: [
-        /* @__PURE__ */ a("div", { className: r("smwb-table__container", { "smwb-withPagination": !!e }), children: /* @__PURE__ */ s(
-          "table",
+import { ColumnLabels as v, TableLabelsContext as h, TableHeadContext as f, TableRowPlaceContext as x, TableColumnContext as P } from "./tableColumns.js";
+import C from "./tablePagination/tablePagination.js";
+const $ = u(
+  ({ className: m, dense: s, hovered: b, children: n, paginationSettings: l, isLoading: i, stickyHeader: d, caption: o, stackBelow: a, ...c }, w) => {
+    const [p] = _(() => new v());
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: w,
+        className: r(
+          "smwb-table__wrapper",
+          m,
           {
-            className: r("smwb-table", {
-              "smwb-dense": b,
-              "smwb-hovered": o,
-              "smwb-table_sticky-header": c
-            }),
-            children: [
-              m != null && /* @__PURE__ */ a("caption", { className: "smwb-table__caption", children: m }),
-              t
-            ]
-          }
-        ) }),
-        !!e && /* @__PURE__ */ a(_, { ...e })
-      ]
-    }
-  )
+            "smwb-table__wrapper_loading": i
+          },
+          a && `smwb-table__wrapper_stack-${a}`
+        ),
+        ...c,
+        children: [
+          /* @__PURE__ */ e("div", { className: r("smwb-table__container", { "smwb-withPagination": !!l }), children: /* @__PURE__ */ t(
+            "table",
+            {
+              className: r("smwb-table", {
+                "smwb-dense": s,
+                "smwb-hovered": b,
+                "smwb-table_sticky-header": d
+              }),
+              children: [
+                o != null && /* @__PURE__ */ e("caption", { className: "smwb-table__caption", children: o }),
+                /* @__PURE__ */ e(h.Provider, { value: a ? p : null, children: /* @__PURE__ */ e(f.Provider, { value: !1, children: /* @__PURE__ */ e(x.Provider, { value: null, children: /* @__PURE__ */ e(P.Provider, { value: null, children: n }) }) }) })
+              ]
+            }
+          ) }),
+          !!l && /* @__PURE__ */ e(C, { ...l })
+        ]
+      }
+    );
+  }
 );
 export {
-  v as default
+  $ as default
 };
 //# sourceMappingURL=table.js.map

package/dist/components/dataDisplay/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../../src/components/dataDisplay/table/table.tsx"],"sourcesContent":["import { HTMLAttributes, PropsWithChildren, ReactNode, forwardRef } from \"react\";\nimport cn from \"clsx\";\nimport { TablePagination, TablePaginationProps } from \"./index\";\n\nexport interface TableProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  dense?: boolean;\n  isLoading?: boolean;\n  hovered?: boolean;\n  /** Pins the table header while the body scrolls. */\n  stickyHeader?: boolean;\n  /** Optional accessible caption rendered for screen readers. */\n  caption?: ReactNode;\n  paginationSettings?: TablePaginationProps;\n}\n\nconst Table = forwardRef<HTMLDivElement, PropsWithChildren<TableProps>>(\n  ({ className, dense, hovered, children, paginationSettings, isLoading, stickyHeader, caption, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"smwb-table__wrapper\", className, {\n          [\"smwb-table__wrapper_loading\"]: isLoading,\n        })}\n        {...props}\n      >\n        <div className={cn(\"smwb-table__container\", { \"smwb-withPagination\": !!paginationSettings })}>\n          <table\n            className={cn(\"smwb-table\", {\n              \"smwb-dense\": dense,\n              [\"smwb-hovered\"]: hovered,\n              \"smwb-table_sticky-header\": stickyHeader,\n            })}\n          >\n            {caption != null && <caption className=\"smwb-table__caption\">{caption}</caption>}\n            {children}\n          </table>\n        </div>\n        {!!paginationSettings && <TablePagination {...paginationSettings} />}\n      </div>\n    );\n  }\n);\n\nexport default Table;\n"],"names":["Table","forwardRef","className","dense","hovered","children","paginationSettings","isLoading","stickyHeader","caption","props","ref","jsxs","cn","jsx","TablePagination"],"mappings":";;;;;AAiBA,MAAMA,IAAQC;AAAA,EACZ,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,oBAAAC,GAAoB,WAAAC,GAAW,cAAAC,GAAc,SAAAC,GAAS,GAAGC,EAAA,GAASC,MAEtG,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE,EAAG,uBAAuBX,GAAW;AAAA,QAC7C,+BAAgCK;AAAA,MAAA,CAClC;AAAA,MACA,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAG,yBAAyB,EAAE,uBAAuB,CAAC,CAACP,GAAoB,GACzF,UAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAG,cAAc;AAAA,cAC1B,cAAcV;AAAA,cACb,gBAAiBC;AAAA,cAClB,4BAA4BI;AAAA,YAAA,CAC7B;AAAA,YAEA,UAAA;AAAA,cAAAC,KAAW,QAAQ,gBAAAK,EAAC,WAAA,EAAQ,WAAU,uBAAuB,UAAAL,GAAQ;AAAA,cACrEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,QACC,CAAC,CAACC,KAAsB,gBAAAQ,EAACC,GAAA,EAAiB,GAAGT,EAAA,CAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI1E;"}
+{"version":3,"file":"table.js","sources":["../../../../src/components/dataDisplay/table/table.tsx"],"sourcesContent":["import { HTMLAttributes, PropsWithChildren, ReactNode, forwardRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { TablePagination, TablePaginationProps } from \"./index\";\nimport {\n  ColumnLabels,\n  TableColumnContext,\n  TableHeadContext,\n  TableLabelsContext,\n  TableRowPlaceContext,\n} from \"./tableColumns\";\n\nexport interface TableProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  dense?: boolean;\n  isLoading?: boolean;\n  hovered?: boolean;\n  /** Pins the table header while the body scrolls. */\n  stickyHeader?: boolean;\n  /** Optional accessible caption rendered for screen readers. */\n  caption?: ReactNode;\n  /**\n   * Show each row as a card — cells one under another, each with its column's\n   * label — while the table's container is narrower than this breakpoint:\n   * `sm` (420px), `md` (768px) or `lg` (1024px). A container query: the space\n   * the table has decides, not the window.\n   *\n   * A cell's label is its `TableCell label`, or else the label of the head cell\n   * of its column: the head cell's `label`, or the text of its content. Columns\n   * count as in HTML: by position in the row, with `colSpan`, after the columns\n   * that `rowSpan` cells of the rows above take in the same head or body. A cell\n   * spanning several columns takes no label from the head and fills the card's\n   * width, and a head cell spanning several columns labels none of them. With\n   * several head rows, the lowest head cell over a column names it.\n   *\n   * The columns come from the elements written: rows written as `TableRow` in\n   * `TableHead` or `TableBody`, and cells in a row (arrays and fragments\n   * included). A component that renders a row counts as a row whose cells span\n   * no rows down, and a component that renders cells counts as one cell, with\n   * its own `colSpan` and `rowSpan`: give the cells after such a component, or\n   * the component's own cells, a `label`.\n   */\n  stackBelow?: \"sm\" | \"md\" | \"lg\";\n  paginationSettings?: TablePaginationProps;\n}\n\nconst Table = forwardRef<HTMLDivElement, PropsWithChildren<TableProps>>(\n  (\n    { className, dense, hovered, children, paginationSettings, isLoading, stickyHeader, caption, stackBelow, ...props },\n    ref\n  ) => {\n    const [labels] = useState(() => new ColumnLabels());\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"smwb-table__wrapper\",\n          className,\n          {\n            [\"smwb-table__wrapper_loading\"]: isLoading,\n          },\n          stackBelow && `smwb-table__wrapper_stack-${stackBelow}`\n        )}\n        {...props}\n      >\n        <div className={cn(\"smwb-table__container\", { \"smwb-withPagination\": !!paginationSettings })}>\n          <table\n            className={cn(\"smwb-table\", {\n              \"smwb-dense\": dense,\n              [\"smwb-hovered\"]: hovered,\n              \"smwb-table_sticky-header\": stickyHeader,\n            })}\n          >\n            {caption != null && <caption className=\"smwb-table__caption\">{caption}</caption>}\n            {/* A table inside a cell of another counts its own rows and cells. */}\n            <TableLabelsContext.Provider value={stackBelow ? labels : null}>\n              <TableHeadContext.Provider value={false}>\n                <TableRowPlaceContext.Provider value={null}>\n                  <TableColumnContext.Provider value={null}>{children}</TableColumnContext.Provider>\n                </TableRowPlaceContext.Provider>\n              </TableHeadContext.Provider>\n            </TableLabelsContext.Provider>\n          </table>\n        </div>\n        {!!paginationSettings && <TablePagination {...paginationSettings} />}\n      </div>\n    );\n  }\n);\n\nexport default Table;\n"],"names":["Table","forwardRef","className","dense","hovered","children","paginationSettings","isLoading","stickyHeader","caption","stackBelow","props","ref","labels","useState","ColumnLabels","jsxs","cn","jsx","TableLabelsContext","TableHeadContext","TableRowPlaceContext","TableColumnContext","TablePagination"],"mappings":";;;;;;;AA+CA,MAAMA,IAAQC;AAAA,EACZ,CACE,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,oBAAAC,GAAoB,WAAAC,GAAW,cAAAC,GAAc,SAAAC,GAAS,YAAAC,GAAY,GAAGC,EAAA,GAC5GC,MACG;AACH,UAAM,CAACC,CAAM,IAAIC,EAAS,MAAM,IAAIC,GAAc;AAClD,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAJ;AAAA,QACA,WAAWK;AAAA,UACT;AAAA,UACAf;AAAA,UACA;AAAA,YACG,+BAAgCK;AAAA,UAAA;AAAA,UAEnCG,KAAc,6BAA6BA,CAAU;AAAA,QAAA;AAAA,QAEtD,GAAGC;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAG,yBAAyB,EAAE,uBAAuB,CAAC,CAACX,GAAoB,GACzF,UAAA,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,EAAG,cAAc;AAAA,gBAC1B,cAAcd;AAAA,gBACb,gBAAiBC;AAAA,gBAClB,4BAA4BI;AAAA,cAAA,CAC7B;AAAA,cAEA,UAAA;AAAA,gBAAAC,KAAW,QAAQ,gBAAAS,EAAC,WAAA,EAAQ,WAAU,uBAAuB,UAAAT,GAAQ;AAAA,gBAEtE,gBAAAS,EAACC,EAAmB,UAAnB,EAA4B,OAAOT,IAAaG,IAAS,MACxD,UAAA,gBAAAK,EAACE,EAAiB,UAAjB,EAA0B,OAAO,IAChC,UAAA,gBAAAF,EAACG,EAAqB,UAArB,EAA8B,OAAO,MACpC,UAAA,gBAAAH,EAACI,EAAmB,UAAnB,EAA4B,OAAO,MAAO,UAAAjB,EAAA,CAAS,EAAA,CACtD,GACF,EAAA,CACF;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,UACC,CAAC,CAACC,KAAsB,gBAAAY,EAACK,GAAA,EAAiB,GAAGjB,EAAA,CAAoB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxE;AACF;"}

package/dist/components/dataDisplay/table/tableBody.js

@@ -1,7 +1,13 @@
-import { jsx as a } from "react/jsx-runtime";
-import e from "clsx";
-const b = ({ children: o, className: t, ...r }) => /* @__PURE__ */ a("tbody", { ...r, className: e("smwb-table__body", t), children: o });
+import { jsx as m } from "react/jsx-runtime";
+import { useContext as a } from "react";
+import l from "clsx";
+import { TableLabelsContext as n, useRowPlaces as b, withRows as c } from "./tableColumns.js";
+import i from "./tableRow.js";
+const x = ({ children: o, className: t, ...e }) => {
+  const r = a(n) != null, s = b();
+  return /* @__PURE__ */ m("tbody", { ...e, className: l("smwb-table__body", t), children: c(o, r, i, s) });
+};
 export {
-  b as default
+  x as default
 };
 //# sourceMappingURL=tableBody.js.map

package/dist/components/dataDisplay/table/tableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableBody.js","sources":["../../../../src/components/dataDisplay/table/tableBody.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  className?: string;\n}\n\nconst TableBody = ({ children, className, ...props }: PropsWithChildren<TableBodyProps>) => {\n  return (\n    <tbody {...props} className={cn(\"smwb-table__body\", className)}>\n      {children}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n"],"names":["TableBody","children","className","props","jsx","cn"],"mappings":";;AAOA,MAAMA,IAAY,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,QAEzC,gBAAAC,EAAC,WAAO,GAAGD,GAAO,WAAWE,EAAG,oBAAoBH,CAAS,GAC1D,UAAAD,GACH;"}
+{"version":3,"file":"tableBody.js","sources":["../../../../src/components/dataDisplay/table/tableBody.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, useContext } from \"react\";\nimport cn from \"clsx\";\nimport { TableLabelsContext, useRowPlaces, withRows } from \"./tableColumns\";\nimport TableRow from \"./tableRow\";\n\nexport interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  className?: string;\n}\n\nconst TableBody = ({ children, className, ...props }: PropsWithChildren<TableBodyProps>) => {\n  // In a stacked table each row learns the columns that `rowSpan` cells above\n  // it take, so its cells find their columns' labels.\n  const stacked = useContext(TableLabelsContext) != null;\n  const keep = useRowPlaces();\n  return (\n    <tbody {...props} className={cn(\"smwb-table__body\", className)}>\n      {withRows(children, stacked, TableRow, keep)}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n"],"names":["TableBody","children","className","props","stacked","useContext","TableLabelsContext","keep","useRowPlaces","jsx","cn","withRows","TableRow"],"mappings":";;;;;AASA,MAAMA,IAAY,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,QAA+C;AAG1F,QAAMC,IAAUC,EAAWC,CAAkB,KAAK,MAC5CC,IAAOC,EAAA;AACb,SACE,gBAAAC,EAAC,SAAA,EAAO,GAAGN,GAAO,WAAWO,EAAG,oBAAoBR,CAAS,GAC1D,UAAAS,EAASV,GAAUG,GAASQ,GAAUL,CAAI,GAC7C;AAEJ;"}

package/dist/components/dataDisplay/table/tableCell.d.ts

@@ -2,6 +2,16 @@ import { PropsWithChildren, TdHTMLAttributes } from "react";
 export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
     className?: string;
     cellAlign?: "left" | "right" | "center";
+    /**
+     * The column's name, shown next to the value when the table stacks rows as
+     * cards (`Table stackBelow`). Without it, the cell takes the label of its
+     * column's head cell; `false` keeps the cell unlabelled, so it fills the
+     * card's width (an action, a sub-row). A caller's own `data-label` counts as a
+     * given label too.
+     */
+    label?: string | false;
+    /** The cell's label written by hand, as the attribute the stacked layout shows; `label` replaces it. */
+    "data-label"?: string;
 }
-declare const TableCell: ({ children, cellAlign, className, ...props }: PropsWithChildren<TableCellProps>) => import("react/jsx-runtime").JSX.Element;
+declare const TableCell: ({ children, cellAlign, className, label, ...props }: PropsWithChildren<TableCellProps>) => import("react/jsx-runtime").JSX.Element;
 export default TableCell;

package/dist/components/dataDisplay/table/tableCell.js

@@ -1,7 +1,23 @@
-import { jsx as r } from "react/jsx-runtime";
-import m from "clsx";
-const f = ({ children: l, cellAlign: e = "left", className: t, ...a }) => /* @__PURE__ */ r("td", { ...a, className: m("smwb-table__cell", t), align: e || "left", children: l });
+import { jsx as x } from "react/jsx-runtime";
+import { useContext as n, useSyncExternalStore as C } from "react";
+import S from "clsx";
+import { TableLabelsContext as p, TableColumnContext as v, TableHeadContext as L, cellSpan as T } from "./tableColumns.js";
+const H = () => () => {
+}, j = ({ children: m, cellAlign: i = "left", className: b, label: t, ...e }) => {
+  var d;
+  const o = e["data-label"], a = n(p), l = n(v), u = n(L), s = a != null && l != null && !u && t === void 0 && o === void 0 && T(e.colSpan) === 1, c = () => s ? a.get(l.column) : void 0, f = C(s ? a.subscribe : H, c, c), r = t === !1 ? o : (d = t != null ? t : o) != null ? d : f;
+  return /* @__PURE__ */ x(
+    "td",
+    {
+      ...e,
+      className: S("smwb-table__cell", b),
+      align: i || "left",
+      ...r !== void 0 && { "data-label": r },
+      children: m
+    }
+  );
+};
 export {
-  f as default
+  j as default
 };
 //# sourceMappingURL=tableCell.js.map

package/dist/components/dataDisplay/table/tableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableCell.js","sources":["../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, TdHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n}\n\nconst TableCell = ({ children, cellAlign = \"left\", className, ...props }: PropsWithChildren<TableCellProps>) => {\n  return (\n    <td {...props} className={cn(\"smwb-table__cell\", className)} align={cellAlign || \"left\"}>\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n"],"names":["TableCell","children","cellAlign","className","props","jsx","cn"],"mappings":";;AAQA,MAAMA,IAAY,CAAC,EAAE,UAAAC,GAAU,WAAAC,IAAY,QAAQ,WAAAC,GAAW,GAAGC,QAE7D,gBAAAC,EAAC,MAAA,EAAI,GAAGD,GAAO,WAAWE,EAAG,oBAAoBH,CAAS,GAAG,OAAOD,KAAa,QAC9E,UAAAD,EAAA,CACH;"}
+{"version":3,"file":"tableCell.js","sources":["../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, TdHTMLAttributes, useContext, useSyncExternalStore } from \"react\";\nimport cn from \"clsx\";\nimport { TableColumnContext, TableHeadContext, TableLabelsContext, cellSpan } from \"./tableColumns\";\n\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /**\n   * The column's name, shown next to the value when the table stacks rows as\n   * cards (`Table stackBelow`). Without it, the cell takes the label of its\n   * column's head cell; `false` keeps the cell unlabelled, so it fills the\n   * card's width (an action, a sub-row). A caller's own `data-label` counts as a\n   * given label too.\n   */\n  label?: string | false;\n  /** The cell's label written by hand, as the attribute the stacked layout shows; `label` replaces it. */\n  \"data-label\"?: string;\n}\n\nconst noSubscribe = () => () => {};\n\nconst TableCell = ({ children, cellAlign = \"left\", className, label, ...props }: PropsWithChildren<TableCellProps>) => {\n  const ownDataLabel = props[\"data-label\"];\n  const labels = useContext(TableLabelsContext);\n  const place = useContext(TableColumnContext);\n  const inHead = useContext(TableHeadContext);\n  // Only a body cell of a stacked table, with no label of its own and one column\n  // wide, looks its label up in the head.\n  const fromHead =\n    labels != null &&\n    place != null &&\n    !inHead &&\n    label === undefined &&\n    ownDataLabel === undefined &&\n    cellSpan(props.colSpan) === 1;\n  const read = () => (fromHead ? labels.get(place.column) : undefined);\n  const headLabel = useSyncExternalStore(fromHead ? labels.subscribe : noSubscribe, read, read);\n  const dataLabel = label === false ? ownDataLabel : (label ?? ownDataLabel ?? headLabel);\n\n  return (\n    <td\n      {...props}\n      className={cn(\"smwb-table__cell\", className)}\n      align={cellAlign || \"left\"}\n      // A caller's own data-label (the way to label cells by hand) survives\n      // unless a label replaces it, as in Solid.\n      {...(dataLabel !== undefined && { \"data-label\": dataLabel })}\n    >\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n"],"names":["noSubscribe","TableCell","children","cellAlign","className","label","props","ownDataLabel","labels","useContext","TableLabelsContext","place","TableColumnContext","inHead","TableHeadContext","fromHead","cellSpan","read","headLabel","useSyncExternalStore","dataLabel","_a","jsx","cn"],"mappings":";;;;AAmBA,MAAMA,IAAc,MAAM,MAAM;AAAC,GAE3BC,IAAY,CAAC,EAAE,UAAAC,GAAU,WAAAC,IAAY,QAAQ,WAAAC,GAAW,OAAAC,GAAO,GAAGC,QAA+C;;AACrH,QAAMC,IAAeD,EAAM,YAAY,GACjCE,IAASC,EAAWC,CAAkB,GACtCC,IAAQF,EAAWG,CAAkB,GACrCC,IAASJ,EAAWK,CAAgB,GAGpCC,IACJP,KAAU,QACVG,KAAS,QACT,CAACE,KACDR,MAAU,UACVE,MAAiB,UACjBS,EAASV,EAAM,OAAO,MAAM,GACxBW,IAAO,MAAOF,IAAWP,EAAO,IAAIG,EAAM,MAAM,IAAI,QACpDO,IAAYC,EAAqBJ,IAAWP,EAAO,YAAYR,GAAaiB,GAAMA,CAAI,GACtFG,IAAYf,MAAU,KAAQE,KAAgBc,IAAAhB,KAAA,OAAAA,IAASE,MAAT,OAAAc,IAAyBH;AAE7E,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGhB;AAAA,MACJ,WAAWiB,EAAG,oBAAoBnB,CAAS;AAAA,MAC3C,OAAOD,KAAa;AAAA,MAGnB,GAAIiB,MAAc,UAAa,EAAE,cAAcA,EAAA;AAAA,MAE/C,UAAAlB;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/dataDisplay/table/tableColumns.d.ts

@@ -0,0 +1,83 @@
+import { ComponentType, ReactNode } from "react";
+/**
+ * The column labels of a stacked table (`Table stackBelow`): its head cells
+ * publish them by column position, and the body cells of each column read them.
+ * A column may have a head cell in several head rows; the lowest row's wins,
+ * whatever order the cells wrote in, so each label is kept by its head row.
+ *
+ * Head cells write while they render, so cells rendered after them — the body
+ * follows the head in the markup — read the labels in the same pass: on the
+ * server too, and while hydrating, so the server markup has them and the client
+ * makes the same. A change after that reaches the body cells through `notify`,
+ * which head cells call from an effect.
+ *
+ * A render that never commits (an interrupted transition) leaves what it wrote
+ * until the head cell of that row and column writes again. That is the price of
+ * labels in the server markup. The next committed render of the head puts the
+ * committed labels back in the store, but notifies only if the committed label
+ * changed since its last commit: otherwise the body cells show it once they
+ * render on their own.
+ */
+export declare class ColumnLabels {
+    private readonly labels;
+    private readonly listeners;
+    private changed;
+    get(column: number): string | undefined;
+    set(column: number, row: number, owner: string, label: string | undefined): void;
+    /** Drops the label of the column's head cell in `row`, unless another head cell has taken that place since. */
+    remove(column: number, row: number, owner: string): void;
+    notify(): void;
+    subscribe: (listener: () => void) => (() => void);
+}
+/** The column labels of the table around, while it stacks rows (`stackBelow`); null otherwise. */
+export declare const TableLabelsContext: import("react").Context<ColumnLabels | null>;
+/** Whether the cells around are in the table's head. */
+export declare const TableHeadContext: import("react").Context<boolean>;
+/** Where a cell sits: the column it starts at and its row within the head or body, both from 0. */
+export interface CellPlace {
+    column: number;
+    row: number;
+}
+/** A row's place in its head or body: its index, and the columns that cells of the rows above span into. */
+export interface RowPlace {
+    row: number;
+    taken: ReadonlySet<number>;
+}
+/** The cell's place in a stacked table; null in a table that doesn't stack. */
+export declare const TableColumnContext: import("react").Context<CellPlace | null>;
+/** The row's place in its head or body, in a stacked table; null otherwise or outside a head or body. */
+export declare const TableRowPlaceContext: import("react").Context<RowPlace | null>;
+/** How many columns a cell spans, from its `colSpan`. */
+export declare const cellSpan: (colSpan: number | string | undefined) => number;
+/** How many rows a cell spans, from its `rowSpan`: `0` spans the rest of its head or body, as in HTML. */
+export declare const cellRowSpan: (rowSpan: number | string | undefined) => number;
+/** Keeps a place object of the last render while it is equal to this render's. */
+export type KeepPlace<T> = (index: number, place: T) => T;
+export declare const useRowPlaces: () => KeepPlace<RowPlace>;
+export declare const useCellPlaces: () => KeepPlace<CellPlace>;
+/**
+ * Gives each row of a head or body its place, so that its cells start after
+ * the columns that `rowSpan` cells of the rows above take. Rows count in the
+ * order they are written, the ones in arrays and fragments included. Only the
+ * cells of a `rowType` element written there are seen: a component that renders
+ * a row counts as a row whose cells span no further down.
+ *
+ * Every row is wrapped whether or not the table stacks, so a change of
+ * `stackBelow` keeps the rows and their state.
+ */
+export declare function withRows(children: ReactNode, stacked: boolean, rowType: ComponentType<never>, keep: KeepPlace<RowPlace>): ReactNode;
+/**
+ * Gives each cell of a row its place. Cells count in the order they are written,
+ * the ones in arrays and fragments included; any other element — a component
+ * that renders a cell — counts as one cell, with its own `colSpan` and `rowSpan`.
+ * Each cell is wrapped whether or not the table stacks, so a change of
+ * `stackBelow` keeps the cells' content and its state.
+ */
+export declare function withColumns(children: ReactNode, stacked: boolean, place: RowPlace | null, keep: KeepPlace<CellPlace>): ReactNode;
+/**
+ * The text of a header's content: its strings and numbers, those inside elements
+ * included, with white space collapsed. A component that makes its text itself
+ * (a translated message, an icon) gives none: name such a column by
+ * `TableHeadCell label`.
+ */
+export declare function textOf(node: ReactNode): string;