@smwb/ui-react 2.6.3 → 2.8.0

package/dist/headless/components/dataDisplay/kanban/kanban.js

@@ -0,0 +1,72 @@
+import { jsx as s, jsxs as _ } from "react/jsx-runtime";
+import i, { useId as h } from "react";
+import k from "clsx";
+const p = (a) => typeof a == "number" ? `${a}px` : a, m = (a) => a != null && a !== !1 && a !== !0 && a !== "", y = i.forwardRef(function({ className: b, style: t, columnWidth: l, children: n, "data-testid": e = "kanban", ...d }, r) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      "data-testid": e,
+      ...d,
+      ref: r,
+      className: k("smwb-kanban", b),
+      style: l === void 0 ? t : { ...t, "--smwb-kanban-column-width": p(l) },
+      children: n
+    }
+  );
+}), g = i.forwardRef(
+  function({
+    className: b,
+    style: t,
+    title: l,
+    count: n,
+    accent: e,
+    empty: d,
+    footer: r,
+    children: c,
+    "data-testid": o = "kanban-column",
+    ...u
+  }, f) {
+    const w = `${h()}-title`, N = i.Children.toArray(c).length > 0;
+    return /* @__PURE__ */ _(
+      "div",
+      {
+        "data-testid": o,
+        role: "group",
+        "aria-labelledby": w,
+        ...u,
+        ref: f,
+        className: k("smwb-kanban__column", b),
+        style: e === void 0 ? t : { ...t, "--smwb-kanban-accent": e },
+        children: [
+          /* @__PURE__ */ _("div", { className: "smwb-kanban__column-header", children: [
+            /* @__PURE__ */ s("div", { className: "smwb-kanban__column-title", id: w, children: l }),
+            n != null ? /* @__PURE__ */ s("span", { className: "smwb-kanban__count", children: n }) : null
+          ] }),
+          N ? /* @__PURE__ */ s("ul", { className: "smwb-kanban__cards", role: "list", children: c }) : m(d) ? /* @__PURE__ */ s("div", { className: "smwb-kanban__empty", children: d }) : null,
+          m(r) ? /* @__PURE__ */ s("div", { className: "smwb-kanban__column-footer", children: r }) : null
+        ]
+      }
+    );
+  }
+), x = i.forwardRef(function({ className: b, style: t, title: l, href: n, titleLines: e = 3, children: d, "data-testid": r = "kanban-card", ...c }, o) {
+  return /* @__PURE__ */ _(
+    "li",
+    {
+      "data-testid": r,
+      ...c,
+      ref: o,
+      className: k("smwb-kanban__card", { "smwb-kanban__card_link": !!n }, b),
+      style: { ...t, "--smwb-kanban-title-lines": String(e) },
+      children: [
+        m(l) ? n ? /* @__PURE__ */ s("a", { className: "smwb-kanban__card-title", href: n, children: l }) : /* @__PURE__ */ s("div", { className: "smwb-kanban__card-title", children: l }) : null,
+        m(d) ? /* @__PURE__ */ s("div", { className: "smwb-kanban__card-body", children: d }) : null
+      ]
+    }
+  );
+});
+export {
+  y as Kanban,
+  x as KanbanCard,
+  g as KanbanColumn
+};
+//# sourceMappingURL=kanban.js.map

package/dist/headless/components/dataDisplay/kanban/kanban.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kanban.js","sources":["../../../../../src/components/dataDisplay/kanban/kanban.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode, useId } from \"react\";\nimport cn from \"clsx\";\n\nexport interface KanbanProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /**\n   * The narrowest a column gets before the board scrolls sideways: a number of\n   * pixels or any CSS length. 15.5rem by default.\n   */\n  columnWidth?: number | string;\n  /** Test id of the root `<div>`; `kanban` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport interface KanbanColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  className?: string;\n  /** The column's name: text or a badge. It names the column for assistive technology. */\n  title: ReactNode;\n  /** How many cards the column holds (it may show fewer), beside the title. Nothing is shown for null. */\n  count?: number | string | null;\n  /** The column's colour, a stripe along its top: any CSS colour. */\n  accent?: string;\n  /** Shown in place of the cards when there are none, e.g. \"Empty\". */\n  empty?: ReactNode;\n  /** Under the cards, e.g. a link to the rest as a list. */\n  footer?: ReactNode;\n  /** Test id of the column's `<div>`; `kanban-column` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport interface KanbanCardProps extends Omit<HTMLAttributes<HTMLLIElement>, \"title\"> {\n  className?: string;\n  /** The card's title, clamped to `titleLines` lines. */\n  title?: ReactNode;\n  /** Makes the title a link, and the whole card open it. */\n  href?: string;\n  /** Lines the title is clamped to: 3 by default. */\n  titleLines?: number;\n  /** Test id of the card's `<li>`; `kanban-card` unless given. */\n  \"data-testid\"?: string;\n}\n\nconst cssLength = (value: number | string | undefined): string | undefined =>\n  typeof value === \"number\" ? `${value}px` : value;\n\nconst present = (value: ReactNode): boolean =>\n  value !== undefined && value !== null && value !== false && value !== true && value !== \"\";\n\n/** A board: KanbanColumn children side by side, scrolling sideways when they do not fit. */\nexport const Kanban = React.forwardRef<HTMLDivElement, PropsWithChildren<KanbanProps>>(function Kanban(\n  { className, style, columnWidth, children, \"data-testid\": dataTestId = \"kanban\", ...rest },\n  ref\n) {\n  return (\n    <div\n      data-testid={dataTestId}\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-kanban\", className)}\n      style={\n        columnWidth === undefined\n          ? style\n          : ({ ...style, \"--smwb-kanban-column-width\": cssLength(columnWidth) } as CSSProperties)\n      }\n    >\n      {children}\n    </div>\n  );\n});\n\n/** A column of the board: its title and count, then its KanbanCard children, or `empty` when it has none. */\nexport const KanbanColumn = React.forwardRef<HTMLDivElement, PropsWithChildren<KanbanColumnProps>>(\n  function KanbanColumn(\n    {\n      className,\n      style,\n      title,\n      count,\n      accent,\n      empty,\n      footer,\n      children,\n      \"data-testid\": dataTestId = \"kanban-column\",\n      ...rest\n    },\n    ref\n  ) {\n    const titleId = `${useId()}-title`;\n    const hasCards = React.Children.toArray(children).length > 0;\n    return (\n      <div\n        data-testid={dataTestId}\n        role=\"group\"\n        aria-labelledby={titleId}\n        {...rest}\n        ref={ref}\n        className={cn(\"smwb-kanban__column\", className)}\n        style={accent === undefined ? style : ({ ...style, \"--smwb-kanban-accent\": accent } as CSSProperties)}\n      >\n        <div className=\"smwb-kanban__column-header\">\n          <div className=\"smwb-kanban__column-title\" id={titleId}>\n            {title}\n          </div>\n          {count !== undefined && count !== null ? <span className=\"smwb-kanban__count\">{count}</span> : null}\n        </div>\n        {hasCards ? (\n          <ul className=\"smwb-kanban__cards\" role=\"list\">\n            {children}\n          </ul>\n        ) : present(empty) ? (\n          <div className=\"smwb-kanban__empty\">{empty}</div>\n        ) : null}\n        {present(footer) ? <div className=\"smwb-kanban__column-footer\">{footer}</div> : null}\n      </div>\n    );\n  }\n);\n\n/**\n * A card on the board: its title (a link with `href`, and then the whole card\n * opens it) and the children under it.\n */\nexport const KanbanCard = React.forwardRef<HTMLLIElement, PropsWithChildren<KanbanCardProps>>(function KanbanCard(\n  { className, style, title, href, titleLines = 3, children, \"data-testid\": dataTestId = \"kanban-card\", ...rest },\n  ref\n) {\n  return (\n    <li\n      data-testid={dataTestId}\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-kanban__card\", { \"smwb-kanban__card_link\": Boolean(href) }, className)}\n      style={{ ...style, \"--smwb-kanban-title-lines\": String(titleLines) } as CSSProperties}\n    >\n      {present(title) ? (\n        href ? (\n          <a className=\"smwb-kanban__card-title\" href={href}>\n            {title}\n          </a>\n        ) : (\n          <div className=\"smwb-kanban__card-title\">{title}</div>\n        )\n      ) : null}\n      {present(children) ? <div className=\"smwb-kanban__card-body\">{children}</div> : null}\n    </li>\n  );\n});\n\nexport default Kanban;\n"],"names":["cssLength","value","present","Kanban","React","className","style","columnWidth","children","dataTestId","rest","ref","jsx","cn","KanbanColumn","title","count","accent","empty","footer","titleId","useId","hasCards","jsxs","KanbanCard","href","titleLines"],"mappings":";;;AA0CA,MAAMA,IAAY,CAACC,MACjB,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,GAEvCC,IAAU,CAACD,MACQA,KAAU,QAAQA,MAAU,MAASA,MAAU,MAAQA,MAAU,IAG7EE,IAASC,EAAM,WAA2D,SACrF,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,UAAAC,GAAU,eAAeC,IAAa,UAAU,GAAGC,EAAA,GACpFC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAaH;AAAA,MACZ,GAAGC;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,eAAeR,CAAS;AAAA,MACtC,OACEE,MAAgB,SACZD,IACC,EAAE,GAAGA,GAAO,8BAA8BN,EAAUO,CAAW,EAAA;AAAA,MAGrE,UAAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC,GAGYM,IAAeV,EAAM;AAAA,EAChC,SACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAS;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAX;AAAA,IACA,eAAeC,IAAa;AAAA,IAC5B,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMS,IAAU,GAAGC,EAAA,CAAO,UACpBC,IAAWlB,EAAM,SAAS,QAAQI,CAAQ,EAAE,SAAS;AAC3D,WACE,gBAAAe;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAad;AAAA,QACb,MAAK;AAAA,QACL,mBAAiBW;AAAA,QAChB,GAAGV;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWE,EAAG,uBAAuBR,CAAS;AAAA,QAC9C,OAAOY,MAAW,SAAYX,IAAS,EAAE,GAAGA,GAAO,wBAAwBW,EAAA;AAAA,QAE3E,UAAA;AAAA,UAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,YAAA,gBAAAX,EAAC,OAAA,EAAI,WAAU,6BAA4B,IAAIQ,GAC5C,UAAAL,GACH;AAAA,YACwBC,KAAU,yBAAQ,QAAA,EAAK,WAAU,sBAAsB,UAAAA,EAAA,CAAM,IAAU;AAAA,UAAA,GACjG;AAAA,UACCM,IACC,gBAAAV,EAAC,MAAA,EAAG,WAAU,sBAAqB,MAAK,QACrC,UAAAJ,GACH,IACEN,EAAQgB,CAAK,IACf,gBAAAN,EAAC,SAAI,WAAU,sBAAsB,aAAM,IACzC;AAAA,UACHV,EAAQiB,CAAM,IAAI,gBAAAP,EAAC,SAAI,WAAU,8BAA8B,aAAO,IAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGtF;AACF,GAMaY,IAAapB,EAAM,WAA8D,SAC5F,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAS,GAAO,MAAAU,GAAM,YAAAC,IAAa,GAAG,UAAAlB,GAAU,eAAeC,IAAa,eAAe,GAAGC,EAAA,GACzGC,GACA;AACA,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAad;AAAA,MACZ,GAAGC;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,qBAAqB,EAAE,0BAA0B,EAAQY,EAAI,GAAKpB,CAAS;AAAA,MACzF,OAAO,EAAE,GAAGC,GAAO,6BAA6B,OAAOoB,CAAU,EAAA;AAAA,MAEhE,UAAA;AAAA,QAAAxB,EAAQa,CAAK,IACZU,IACE,gBAAAb,EAAC,OAAE,WAAU,2BAA0B,MAAAa,GACpC,UAAAV,GACH,IAEA,gBAAAH,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAM,IAEhD;AAAA,QACHV,EAAQM,CAAQ,IAAI,gBAAAI,EAAC,SAAI,WAAU,0BAA0B,UAAAJ,GAAS,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtF,CAAC;"}

package/dist/headless/components/dataDisplay/lazyImage/lazyImage.js

@@ -1,43 +1,44 @@
-import { jsxs as z, jsx as u } from "react/jsx-runtime";
-import { forwardRef as _, useState as d, useRef as x, useEffect as F } from "react";
-import N from "clsx";
-import { useForkRef as j } from "../../../hooks/useForkRef.js";
-const q = _(function({ src: c, alt: n, fallback: a, lazy: e = !0, aspectRatio: m, className: g, onError: t, ...b }, p) {
-  const [y, v] = d(!1), [i, l] = d(!e), f = x(null), w = j(p, f);
-  F(() => {
-    if (!e || i) return;
-    const s = f.current;
+import { jsxs as _, jsx as g } from "react/jsx-runtime";
+import { forwardRef as x, useState as b, useRef as F, useEffect as N } from "react";
+import j from "clsx";
+import { useForkRef as k } from "../../../hooks/useForkRef.js";
+const A = x(function({ src: a, alt: n, fallback: m, lazy: e = !0, aspectRatio: l, className: p, onError: i, ...t }, y) {
+  var d;
+  const [w, v] = b(!1), [r, f] = b(!e), u = F(null), I = k(y, u);
+  N(() => {
+    if (!e || r) return;
+    const s = u.current;
     if (!s) return;
     if (typeof IntersectionObserver == "undefined") {
-      l(!0);
+      f(!0);
       return;
     }
-    const o = new IntersectionObserver((R) => {
-      R.some((h) => h.isIntersecting) && (l(!0), o.disconnect());
+    const c = new IntersectionObserver((h) => {
+      h.some((z) => z.isIntersecting) && (f(!0), c.disconnect());
     });
-    return o.observe(s), () => o.disconnect();
-  }, [e, i]);
-  const r = y || !c, I = (s) => {
-    v(!0), t == null || t(s);
+    return c.observe(s), () => c.disconnect();
+  }, [e, r]);
+  const o = w || !a, R = (s) => {
+    v(!0), i == null || i(s);
   };
-  return /* @__PURE__ */ z(
+  return /* @__PURE__ */ _(
     "span",
     {
-      className: N("smwb-lazy-image", g, { "smwb-lazy-image--empty": r }),
-      style: m != null ? { aspectRatio: String(m) } : void 0,
+      className: j("smwb-lazy-image", p, { "smwb-lazy-image--empty": o }),
+      style: l != null ? { aspectRatio: String(l) } : void 0,
       children: [
-        r && a ? /* @__PURE__ */ u("span", { className: "smwb-lazy-image__fallback", children: a }) : null,
-        r ? null : /* @__PURE__ */ u(
+        o && m ? /* @__PURE__ */ g("span", { className: "smwb-lazy-image__fallback", children: m }) : null,
+        o ? null : /* @__PURE__ */ g(
           "img",
           {
-            ...b,
-            ref: w,
+            ...t,
+            ref: I,
             className: "smwb-lazy-image__img",
-            src: i ? c : void 0,
+            src: r ? a : void 0,
             alt: n != null ? n : "",
-            loading: e ? "lazy" : void 0,
-            decoding: "async",
-            onError: I
+            loading: e ? "lazy" : t.loading,
+            decoding: (d = t.decoding) != null ? d : "async",
+            onError: R
           }
         )
       ]
@@ -45,7 +46,7 @@ const q = _(function({ src: c, alt: n, fallback: a, lazy: e = !0, aspectRatio: m
   );
 });
 export {
-  q as LazyImage,
-  q as default
+  A as LazyImage,
+  A as default
 };
 //# sourceMappingURL=lazyImage.js.map

package/dist/headless/components/dataDisplay/lazyImage/lazyImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"lazyImage.js","sources":["../../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface LazyImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"onError\"> {\n  /** Image URL. When absent (or after a load error) the `fallback` is shown. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Rendered in place of the image when it is missing or fails to load. */\n  fallback?: React.ReactNode;\n  /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */\n  lazy?: boolean;\n  /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `\"4 / 3\"`) to reserve space before load. */\n  aspectRatio?: string | number;\n  /** Fires on a load error (after the fallback is swapped in). */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n}\n\n/**\n * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy\n * loading — the `<img decoding=async onError=…>` + fallback dance hand-rolled in\n * every gallery, in one primitive. SSR-safe: renders the image markup on the\n * server; the IntersectionObserver only runs in an effect on the client.\n */\nexport const LazyImage = forwardRef<HTMLImageElement, LazyImageProps>(function LazyImage(\n  { src, alt, fallback, lazy = true, aspectRatio, className, onError, ...rest },\n  ref\n) {\n  const [failed, setFailed] = useState(false);\n  const [visible, setVisible] = useState(!lazy);\n  const imgRef = useRef<HTMLImageElement | null>(null);\n  const setRefs = useForkRef(ref, imgRef);\n\n  useEffect(() => {\n    if (!lazy || visible) return;\n    const el = imgRef.current;\n    if (!el) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setVisible(true);\n      return;\n    }\n    const io = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setVisible(true);\n        io.disconnect();\n      }\n    });\n    io.observe(el);\n    return () => io.disconnect();\n  }, [lazy, visible]);\n\n  const showFallback = failed || !src;\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement>): void => {\n    setFailed(true);\n    onError?.(event);\n  };\n\n  return (\n    <span\n      className={cn(\"smwb-lazy-image\", className, { \"smwb-lazy-image--empty\": showFallback })}\n      style={aspectRatio != null ? { aspectRatio: String(aspectRatio) } : undefined}\n    >\n      {showFallback && fallback ? <span className=\"smwb-lazy-image__fallback\">{fallback}</span> : null}\n      {!showFallback ? (\n        <img\n          {...rest}\n          ref={setRefs}\n          className=\"smwb-lazy-image__img\"\n          src={visible ? src : undefined}\n          alt={alt ?? \"\"}\n          loading={lazy ? \"lazy\" : undefined}\n          decoding=\"async\"\n          onError={handleError}\n        />\n      ) : null}\n    </span>\n  );\n});\n\nexport default LazyImage;\n"],"names":["LazyImage","forwardRef","src","alt","fallback","lazy","aspectRatio","className","onError","rest","ref","failed","setFailed","useState","visible","setVisible","imgRef","useRef","setRefs","useForkRef","useEffect","el","io","entries","entry","showFallback","handleError","event","jsxs","cn","jsx"],"mappings":";;;;AAwBO,MAAMA,IAAYC,EAA6C,SACpE,EAAE,KAAAC,GAAK,KAAAC,GAAK,UAAAC,GAAU,MAAAC,IAAO,IAAM,aAAAC,GAAa,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GACvEC,GACA;AACA,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAASC,CAAU,IAAIF,EAAS,CAACR,CAAI,GACtCW,IAASC,EAAgC,IAAI,GAC7CC,IAAUC,EAAWT,GAAKM,CAAM;AAEtC,EAAAI,EAAU,MAAM;AACd,QAAI,CAACf,KAAQS,EAAS;AACtB,UAAMO,IAAKL,EAAO;AAClB,QAAI,CAACK,EAAI;AACT,QAAI,OAAO,wBAAyB,aAAa;AAC/C,MAAAN,EAAW,EAAI;AACf;AAAA,IACF;AACA,UAAMO,IAAK,IAAI,qBAAqB,CAACC,MAAY;AAC/C,MAAIA,EAAQ,KAAK,CAACC,MAAUA,EAAM,cAAc,MAC9CT,EAAW,EAAI,GACfO,EAAG,WAAA;AAAA,IAEP,CAAC;AACD,WAAAA,EAAG,QAAQD,CAAE,GACN,MAAMC,EAAG,WAAA;AAAA,EAClB,GAAG,CAACjB,GAAMS,CAAO,CAAC;AAElB,QAAMW,IAAed,KAAU,CAACT,GAC1BwB,IAAc,CAACC,MAAwD;AAC3E,IAAAf,EAAU,EAAI,GACdJ,KAAA,QAAAA,EAAUmB;AAAA,EACZ;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,mBAAmBtB,GAAW,EAAE,0BAA0BkB,GAAc;AAAA,MACtF,OAAOnB,KAAe,OAAO,EAAE,aAAa,OAAOA,CAAW,MAAM;AAAA,MAEnE,UAAA;AAAA,QAAAmB,KAAgBrB,IAAW,gBAAA0B,EAAC,QAAA,EAAK,WAAU,6BAA6B,aAAS,IAAU;AAAA,QAC1FL,IAWE,OAVF,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGrB;AAAA,YACJ,KAAKS;AAAA,YACL,WAAU;AAAA,YACV,KAAKJ,IAAUZ,IAAM;AAAA,YACrB,KAAKC,KAAA,OAAAA,IAAO;AAAA,YACZ,SAASE,IAAO,SAAS;AAAA,YACzB,UAAS;AAAA,YACT,SAASqB;AAAA,UAAA;AAAA,QAAA;AAAA,MAET;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"lazyImage.js","sources":["../../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface LazyImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"onError\"> {\n  /** Image URL. When absent (or after a load error) the `fallback` is shown. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Rendered in place of the image when it is missing or fails to load. */\n  fallback?: React.ReactNode;\n  /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */\n  lazy?: boolean;\n  /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `\"4 / 3\"`) to reserve space before load. */\n  aspectRatio?: string | number;\n  /** Fires on a load error (after the fallback is swapped in). */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n}\n\n/**\n * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy\n * loading — the `<img decoding=async onError=…>` + fallback dance hand-rolled in\n * every gallery, in one primitive. SSR-safe: renders the image markup on the\n * server; the IntersectionObserver only runs in an effect on the client.\n */\nexport const LazyImage = forwardRef<HTMLImageElement, LazyImageProps>(function LazyImage(\n  { src, alt, fallback, lazy = true, aspectRatio, className, onError, ...rest },\n  ref\n) {\n  const [failed, setFailed] = useState(false);\n  const [visible, setVisible] = useState(!lazy);\n  const imgRef = useRef<HTMLImageElement | null>(null);\n  const setRefs = useForkRef(ref, imgRef);\n\n  useEffect(() => {\n    if (!lazy || visible) return;\n    const el = imgRef.current;\n    if (!el) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setVisible(true);\n      return;\n    }\n    const io = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setVisible(true);\n        io.disconnect();\n      }\n    });\n    io.observe(el);\n    return () => io.disconnect();\n  }, [lazy, visible]);\n\n  const showFallback = failed || !src;\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement>): void => {\n    setFailed(true);\n    onError?.(event);\n  };\n\n  return (\n    <span\n      className={cn(\"smwb-lazy-image\", className, { \"smwb-lazy-image--empty\": showFallback })}\n      style={aspectRatio != null ? { aspectRatio: String(aspectRatio) } : undefined}\n    >\n      {showFallback && fallback ? <span className=\"smwb-lazy-image__fallback\">{fallback}</span> : null}\n      {!showFallback ? (\n        <img\n          {...rest}\n          ref={setRefs}\n          className=\"smwb-lazy-image__img\"\n          src={visible ? src : undefined}\n          alt={alt ?? \"\"}\n          // `lazy` wins over the caller's loading; without it, the caller's stays.\n          // decoding=\"async\" is a default: the caller's wins, and an explicit\n          // undefined keeps it.\n          loading={lazy ? \"lazy\" : rest.loading}\n          decoding={rest.decoding ?? \"async\"}\n          onError={handleError}\n        />\n      ) : null}\n    </span>\n  );\n});\n\nexport default LazyImage;\n"],"names":["LazyImage","forwardRef","src","alt","fallback","lazy","aspectRatio","className","onError","rest","ref","failed","setFailed","useState","visible","setVisible","imgRef","useRef","setRefs","useForkRef","useEffect","el","io","entries","entry","showFallback","handleError","event","jsxs","cn","jsx","_a"],"mappings":";;;;AAwBO,MAAMA,IAAYC,EAA6C,SACpE,EAAE,KAAAC,GAAK,KAAAC,GAAK,UAAAC,GAAU,MAAAC,IAAO,IAAM,aAAAC,GAAa,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GACvEC,GACA;;AACA,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAASC,CAAU,IAAIF,EAAS,CAACR,CAAI,GACtCW,IAASC,EAAgC,IAAI,GAC7CC,IAAUC,EAAWT,GAAKM,CAAM;AAEtC,EAAAI,EAAU,MAAM;AACd,QAAI,CAACf,KAAQS,EAAS;AACtB,UAAMO,IAAKL,EAAO;AAClB,QAAI,CAACK,EAAI;AACT,QAAI,OAAO,wBAAyB,aAAa;AAC/C,MAAAN,EAAW,EAAI;AACf;AAAA,IACF;AACA,UAAMO,IAAK,IAAI,qBAAqB,CAACC,MAAY;AAC/C,MAAIA,EAAQ,KAAK,CAACC,MAAUA,EAAM,cAAc,MAC9CT,EAAW,EAAI,GACfO,EAAG,WAAA;AAAA,IAEP,CAAC;AACD,WAAAA,EAAG,QAAQD,CAAE,GACN,MAAMC,EAAG,WAAA;AAAA,EAClB,GAAG,CAACjB,GAAMS,CAAO,CAAC;AAElB,QAAMW,IAAed,KAAU,CAACT,GAC1BwB,IAAc,CAACC,MAAwD;AAC3E,IAAAf,EAAU,EAAI,GACdJ,KAAA,QAAAA,EAAUmB;AAAA,EACZ;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,mBAAmBtB,GAAW,EAAE,0BAA0BkB,GAAc;AAAA,MACtF,OAAOnB,KAAe,OAAO,EAAE,aAAa,OAAOA,CAAW,MAAM;AAAA,MAEnE,UAAA;AAAA,QAAAmB,KAAgBrB,IAAW,gBAAA0B,EAAC,QAAA,EAAK,WAAU,6BAA6B,aAAS,IAAU;AAAA,QAC1FL,IAcE,OAbF,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGrB;AAAA,YACJ,KAAKS;AAAA,YACL,WAAU;AAAA,YACV,KAAKJ,IAAUZ,IAAM;AAAA,YACrB,KAAKC,KAAA,OAAAA,IAAO;AAAA,YAIZ,SAASE,IAAO,SAASI,EAAK;AAAA,YAC9B,WAAUsB,IAAAtB,EAAK,aAAL,OAAAsB,IAAiB;AAAA,YAC3B,SAASL;AAAA,UAAA;AAAA,QAAA;AAAA,MAET;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/headless/components/dataDisplay/list/list.js

@@ -1,24 +1,25 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { forwardRef as a } from "react";
-import n from "clsx";
-const p = a(function({ className: t, dense: i, subheader: s, children: l, ...r }, e) {
-  return /* @__PURE__ */ m(
+import { jsxs as o, jsx as d } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import c from "clsx";
+const x = n(function({ className: l, dense: e, subheader: s, children: r, "data-testid": a = "list", ...t }, m) {
+  var i;
+  return /* @__PURE__ */ o(
     "ul",
     {
-      ref: e,
-      "data-testid": "list",
-      role: "list",
-      className: n("smwb-list", { "smwb-list_dense": i }, t),
-      ...r,
+      ref: m,
+      "data-testid": a,
+      className: c("smwb-list", { "smwb-list_dense": e }, l),
+      ...t,
+      role: (i = t.role) != null ? i : "list",
       children: [
-        s ? /* @__PURE__ */ o("li", { className: "smwb-list__subheader", children: s }) : null,
-        l
+        s ? /* @__PURE__ */ d("li", { className: "smwb-list__subheader", children: s }) : null,
+        r
       ]
     }
   );
 });
 export {
-  p as List,
-  p as default
+  x as List,
+  x as default
 };
 //# sourceMappingURL=list.js.map

package/dist/headless/components/dataDisplay/list/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../../../src/components/dataDisplay/list/list.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface ListProps extends HTMLAttributes<HTMLUListElement> {\n  className?: string;\n  /** Compact vertical rhythm. */\n  dense?: boolean;\n  /** Section subheader rendered before the items. */\n  subheader?: ReactNode;\n}\n\nexport const List = forwardRef<HTMLUListElement, PropsWithChildren<ListProps>>(function List(\n  { className, dense, subheader, children, ...props },\n  ref\n) {\n  return (\n    <ul\n      ref={ref}\n      data-testid=\"list\"\n      role=\"list\"\n      className={cn(\"smwb-list\", { \"smwb-list_dense\": dense }, className)}\n      {...props}\n    >\n      {subheader ? <li className=\"smwb-list__subheader\">{subheader}</li> : null}\n      {children}\n    </ul>\n  );\n});\n\nexport default List;\n"],"names":["List","forwardRef","className","dense","subheader","children","props","ref","jsxs","cn","jsx"],"mappings":";;;AAWO,MAAMA,IAAOC,EAA2D,SAC7E,EAAE,WAAAC,GAAW,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAC5CC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,WAAWE,EAAG,aAAa,EAAE,mBAAmBN,EAAA,GAASD,CAAS;AAAA,MACjE,GAAGI;AAAA,MAEH,UAAA;AAAA,QAAAF,IAAY,gBAAAM,EAAC,MAAA,EAAG,WAAU,wBAAwB,aAAU,IAAQ;AAAA,QACpEL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"list.js","sources":["../../../../../src/components/dataDisplay/list/list.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface ListProps extends HTMLAttributes<HTMLUListElement> {\n  className?: string;\n  /** Compact vertical rhythm. */\n  dense?: boolean;\n  /** Section subheader rendered before the items. */\n  subheader?: ReactNode;\n  /** Test id of the root `<ul>`; `list` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const List = forwardRef<HTMLUListElement, PropsWithChildren<ListProps>>(function List(\n  { className, dense, subheader, children, \"data-testid\": dataTestId = \"list\", ...props },\n  ref\n) {\n  return (\n    <ul\n      ref={ref}\n      data-testid={dataTestId}\n      className={cn(\"smwb-list\", { \"smwb-list_dense\": dense }, className)}\n      {...props}\n      // A default: the caller's own wins, and an explicit undefined keeps it.\n      role={props.role ?? \"list\"}\n    >\n      {subheader ? <li className=\"smwb-list__subheader\">{subheader}</li> : null}\n      {children}\n    </ul>\n  );\n});\n\nexport default List;\n"],"names":["List","forwardRef","className","dense","subheader","children","dataTestId","props","ref","jsxs","cn","_a","jsx"],"mappings":";;;AAaO,MAAMA,IAAOC,EAA2D,SAC7E,EAAE,WAAAC,GAAW,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,eAAeC,IAAa,QAAQ,GAAGC,EAAA,GAChFC,GACA;;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,eAAaF;AAAA,MACb,WAAWI,EAAG,aAAa,EAAE,mBAAmBP,EAAA,GAASD,CAAS;AAAA,MACjE,GAAGK;AAAA,MAEJ,OAAMI,IAAAJ,EAAM,SAAN,OAAAI,IAAc;AAAA,MAEnB,UAAA;AAAA,QAAAP,IAAY,gBAAAQ,EAAC,MAAA,EAAG,WAAU,wBAAwB,aAAU,IAAQ;AAAA,QACpEP;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

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

@@ -0,0 +1,61 @@
+import { jsxs as o, jsx as s, Fragment as b } from "react/jsx-runtime";
+import p from "react";
+import N from "clsx";
+const M = [
+  { from: 0, color: "info" },
+  { from: 1, color: "success" }
+];
+function $(i, m) {
+  let r = "neutral", e = -1 / 0;
+  for (const t of m)
+    i >= t.from && t.from >= e && (r = t.color, e = t.from);
+  return r;
+}
+const v = p.forwardRef(function({
+  className: m,
+  value: r,
+  max: e,
+  label: t,
+  text: a,
+  ofLabel: l = "of",
+  thresholds: d = M,
+  color: n,
+  hideText: c,
+  "data-testid": _ = "meter",
+  ...h
+}, u) {
+  const f = e > 0 ? Math.min(1, Math.max(0, r / e)) : 0, w = n != null ? n : $(f, d);
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      ...h,
+      ref: u,
+      role: "meter",
+      "aria-label": t,
+      "aria-valuenow": r,
+      "aria-valuemin": 0,
+      "aria-valuemax": e,
+      "aria-valuetext": `${r} ${l} ${e}`,
+      "data-testid": _,
+      className: N("smwb-meter", `smwb-meter_color-${w}`, { "smwb-meter_bar-only": c }, m),
+      children: [
+        /* @__PURE__ */ s("span", { className: "smwb-meter__track", "aria-hidden": "true", children: /* @__PURE__ */ s("span", { className: "smwb-meter__fill", style: { width: `${f * 100}%` } }) }),
+        c ? null : /* @__PURE__ */ s("span", { className: "smwb-meter__text", "aria-hidden": "true", children: a === void 0 ? /* @__PURE__ */ o(b, { children: [
+          /* @__PURE__ */ s("b", { className: "smwb-meter__value", children: r }),
+          /* @__PURE__ */ o("span", { className: "smwb-meter__of", children: [
+            " ",
+            l,
+            " ",
+            e
+          ] })
+        ] }) : typeof a == "function" ? a(r, e) : a })
+      ]
+    }
+  );
+});
+export {
+  M as DEFAULT_METER_THRESHOLDS,
+  v as Meter,
+  $ as meterColor
+};
+//# sourceMappingURL=meter.js.map

package/dist/headless/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":";;;AAYO,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/headless/components/dataDisplay/personChip/personChip.js

@@ -0,0 +1,71 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+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 = (a) => {
+    var n;
+    return a && (n = Array.from(a)[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 a of t) i = i * 31 + ((s = a.codePointAt(0)) != null ? s : 0) >>> 0;
+  return `hsl(${i % 360} 42% 42%)`;
+}
+const P = _.forwardRef(function({
+  className: i,
+  name: s,
+  src: a,
+  href: n,
+  compact: r,
+  size: m = 24,
+  colorSeed: e,
+  color: p,
+  meta: h,
+  "data-testid": f = "person-chip",
+  ...l
+}, d) {
+  return /* @__PURE__ */ c(
+    n ? "a" : "span",
+    {
+      ...l,
+      ref: d,
+      ...n ? { href: n } : {},
+      title: r ? s : void 0,
+      role: r && !n ? "img" : l.role,
+      "aria-label": r ? s : l["aria-label"],
+      "data-testid": f,
+      className: b(
+        "smwb-person-chip",
+        { "smwb-person-chip_link": !!n, "smwb-person-chip_compact": r },
+        i
+      ),
+      children: [
+        /* @__PURE__ */ o(
+          u,
+          {
+            className: "smwb-person-chip__avatar",
+            size: m,
+            src: a,
+            color: p != null ? p : g(e != null ? e : s),
+            "aria-hidden": "true",
+            children: w(s)
+          }
+        ),
+        r ? null : /* @__PURE__ */ c("span", { className: "smwb-person-chip__text", children: [
+          /* @__PURE__ */ o("span", { className: "smwb-person-chip__name", children: s }),
+          h ? /* @__PURE__ */ o("span", { className: "smwb-person-chip__meta", children: h }) : null
+        ] })
+      ]
+    }
+  );
+});
+export {
+  P as PersonChip,
+  g as avatarColor,
+  w as initialsOf
+};
+//# sourceMappingURL=personChip.js.map

package/dist/headless/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":";;;;AAKO,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/headless/components/dataDisplay/stat/stat.js

@@ -0,0 +1,58 @@
+import { jsxs as _, jsx as s } from "react/jsx-runtime";
+import c from "react";
+import w from "clsx";
+import { Icon as f } from "../../base/icon/icon.js";
+const R = c.forwardRef(function({
+  className: l,
+  label: e,
+  value: a,
+  hint: n,
+  icon: t,
+  tone: o = "neutral",
+  variant: r = "tile",
+  href: m,
+  children: i,
+  "data-testid": p = "stat",
+  ...b
+}, u) {
+  return /* @__PURE__ */ _(
+    m ? "a" : "div",
+    {
+      ...b,
+      ref: u,
+      ...m ? { href: m } : {},
+      "data-testid": p,
+      className: w(
+        "smwb-stat",
+        `smwb-stat_${r}`,
+        `smwb-stat_tone-${o}`,
+        { "smwb-stat_link": !!m, "smwb-stat_with-icon": !!t },
+        l
+      ),
+      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: e }),
+        /* @__PURE__ */ s("span", { className: "smwb-stat__value", children: a }),
+        n ? /* @__PURE__ */ s("span", { className: "smwb-stat__hint", children: n }) : null,
+        i ? /* @__PURE__ */ s("div", { className: "smwb-stat__extra", children: i }) : null
+      ]
+    }
+  );
+}), $ = c.forwardRef(function({ className: l, style: e, minItemWidth: a, children: n, ...t }, o) {
+  const r = typeof a == "number" ? `${a}px` : a;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ...t,
+      ref: o,
+      className: w("smwb-stat-group", l),
+      style: r === void 0 ? e : { ...e, "--smwb-stat-min": r },
+      children: n
+    }
+  );
+});
+export {
+  R as Stat,
+  $ as StatGroup
+};
+//# sourceMappingURL=stat.js.map

package/dist/headless/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":";;;;AA8BO,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/headless/components/dataDisplay/table/table.js

@@ -1,37 +1,46 @@
-import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import { forwardRef as _, useState as p } from "react";
 import r from "clsx";
-import _ from "./tablePagination/tablePagination.js";
-const u = n(
-  ({ className: m, dense: b, hovered: o, children: t, paginationSettings: e, isLoading: c, stickyHeader: i, caption: s, ...w }, d) => /* @__PURE__ */ l(
-    "div",
-    {
-      ref: d,
-      className: r("smwb-table__wrapper", m, {
-        "smwb-table__wrapper_loading": c
-      }),
-      ...w,
-      children: [
-        /* @__PURE__ */ a("div", { className: r("smwb-table__container", { "smwb-withPagination": !!e }), children: /* @__PURE__ */ l(
-          "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 y = _(
+  ({ className: o, dense: t, hovered: m, children: n, paginationSettings: l, isLoading: i, stickyHeader: d, caption: s, stackBelow: a, ...c }, w) => {
+    const [u] = p(() => new v());
+    return /* @__PURE__ */ b(
+      "div",
+      {
+        ref: w,
+        className: r(
+          "smwb-table__wrapper",
+          o,
           {
-            className: r("smwb-table", {
-              "smwb-dense": b,
-              "smwb-hovered": o,
-              "smwb-table_sticky-header": i
-            }),
-            children: [
-              s != null && /* @__PURE__ */ a("caption", { className: "smwb-table__caption", children: s }),
-              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__ */ b(
+            "table",
+            {
+              className: r("smwb-table", {
+                "smwb-dense": t,
+                "smwb-hovered": m,
+                "smwb-table_sticky-header": d
+              }),
+              children: [
+                s != null && /* @__PURE__ */ e("caption", { className: "smwb-table__caption", children: s }),
+                /* @__PURE__ */ e(h.Provider, { value: a ? u : 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 {
-  u as default
+  y as default
 };
 //# sourceMappingURL=table.js.map

package/dist/headless/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":";;;;AAgBA,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":";;;;;AA6CA,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/headless/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