@smwb/ui-react 2.7.0 → 2.9.0

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

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

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

@@ -1 +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}\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    ...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=\"meter\"\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","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;AAuBO,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,GAAGC;AACL,GACAC,GACA;AACA,QAAMf,IAAQS,IAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGD,IAAQC,CAAG,CAAC,IAAI,GAC1DO,IAAOd,KAAA,OAAAA,IAASH,EAAWC,GAAOC,CAAU;AAClD,SACE,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,KAAAC;AAAA,MACA,MAAK;AAAA,MACL,cAAYL;AAAA,MACZ,iBAAeF;AAAA,MACf,iBAAe;AAAA,MACf,iBAAeC;AAAA,MACf,kBAAgB,GAAGD,CAAK,IAAII,CAAO,IAAIH,CAAG;AAAA,MAC1C,eAAY;AAAA,MACZ,WAAWS,EAAG,cAAc,oBAAoBF,CAAI,IAAI,EAAE,uBAAuBH,EAAA,GAAYN,CAAS;AAAA,MAEtG,UAAA;AAAA,QAAA,gBAAAY,EAAC,UAAK,WAAU,qBAAoB,eAAY,QAC9C,4BAAC,QAAA,EAAK,WAAU,oBAAmB,OAAO,EAAE,OAAO,GAAGnB,IAAQ,GAAG,OAAO,GAC1E;AAAA,QACCa,IAAW,OACV,gBAAAM,EAAC,QAAA,EAAK,WAAU,oBAAmB,eAAY,QAC5C,UAAAR,MAAS,SACR,gBAAAM,EAAAG,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAD,EAAC,KAAA,EAAE,WAAU,qBAAqB,UAAAX,GAAM;AAAA,UACxC,gBAAAS,EAAC,QAAA,EAAK,WAAU,kBACb,UAAA;AAAA,YAAA;AAAA,YACAL;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;"}
+{"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/personChip.d.ts

@@ -25,6 +25,8 @@ export interface PersonChipProps extends Omit<HTMLAttributes<HTMLElement>, "titl
     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>>;

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

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

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

@@ -1 +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}\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  { className, name, src, href, compact, size = 24, colorSeed, color, meta, ...rest },\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      role={compact && !href ? \"img\" : undefined}\n      aria-label={compact ? name : undefined}\n      data-testid=\"person-chip\"\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","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;AAuBO,MAAME,IAAaC,EAAM,WAAyC,SACvE,EAAE,WAAAC,GAAW,MAAAX,GAAM,KAAAY,GAAK,MAAAC,GAAM,SAAAC,GAAS,MAAAC,IAAO,IAAI,WAAAC,GAAW,OAAAC,GAAO,MAAAC,GAAM,GAAGC,EAAA,GAC7EC,GACA;AAEA,SACE,gBAAAC;AAAA,IAFWR,IAAO,MAAM;AAAA,IAEvB;AAAA,MACE,GAAGM;AAAA,MACJ,KAAAC;AAAA,MACC,GAAIP,IAAO,EAAE,MAAAA,EAAA,IAAS,CAAA;AAAA,MACvB,OAAOC,IAAUd,IAAO;AAAA,MACxB,MAAMc,KAAW,CAACD,IAAO,QAAQ;AAAA,MACjC,cAAYC,IAAUd,IAAO;AAAA,MAC7B,eAAY;AAAA,MACZ,WAAWsB;AAAA,QACT;AAAA,QACA,EAAE,yBAAyB,CAAC,CAACT,GAAM,4BAA4BC,EAAA;AAAA,QAC/DH;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAAT;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,gBAAAO,EAAC,QAAA,EAAK,WAAU,0BACd,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAvB,GAAK;AAAA,UAC9CkB,IAAO,gBAAAK,EAAC,QAAA,EAAK,WAAU,0BAA0B,aAAK,IAAU;AAAA,QAAA,EAAA,CACnE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
+{"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/qrCode/index.d.ts

@@ -0,0 +1,2 @@
+export { QrCode, default } from "./qrCode";
+export type { QrCodeProps, QrCodeErrorCorrection } from "./qrCode";

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

@@ -0,0 +1,28 @@
+import React from "react";
+/** Error-correction level: L 7%, M 15%, Q 25%, H 30% of the code may be damaged or covered. */
+export type QrCodeErrorCorrection = "L" | "M" | "Q" | "H";
+export interface QrCodeProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "role"> {
+    /** Text encoded in the code (a URL, a pairing token). Encoded as UTF-8 bytes. */
+    value: string;
+    /** Side of the code, quiet zone included, in pixels. Default 192. */
+    size?: number | undefined;
+    /** Shown under the code (a `<figcaption>`), e.g. "Scan with the phone app". */
+    caption?: React.ReactNode;
+    /** Accessible name of the image. Default "QR code". */
+    label?: string | undefined;
+    /** Error-correction level: L 7%, M 15% (default), Q 25%, H 30% of the code may be damaged or covered. */
+    errorCorrection?: QrCodeErrorCorrection | undefined;
+    /** Light margin around the code in modules. Default 4, the minimum the QR spec asks for; smaller values hurt scanning. */
+    quietZone?: number | undefined;
+    /** Test id of the root; `qr-code` unless given. */
+    "data-testid"?: string | undefined;
+}
+/**
+ * A QR code of `value` as an SVG image (role=img): dark modules on a white square —
+ * including the quiet zone — in every theme, so a phone camera reads it in dark mode
+ * too. With `caption` the code sits in a `<figure>` named by the caption. A `value`
+ * past the QR capacity renders an empty white square with `data-error="too-long"`,
+ * any other encode failure with `data-error="encode-failed"`, instead of throwing.
+ */
+export declare const QrCode: React.ForwardRefExoticComponent<QrCodeProps & React.RefAttributes<HTMLElement>>;
+export default QrCode;

package/dist/components/dataDisplay/qrCode/qrCode.js

@@ -0,0 +1,78 @@
+import { jsxs as f, jsx as d } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/qrCode/qrCode.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                       */
+import { forwardRef as A, useMemo as E } from "react";
+import N from "clsx";
+import { encode as q } from "uqr";
+import { qrCodePath as v } from "./qrCodePath.js";
+const x = {
+  "too-long": "QR code: value too long",
+  "encode-failed": "QR code: value could not be encoded"
+}, M = 32, w = 256;
+var p;
+const r = (p = globalThis.__smwbQrCodeWarnings) != null ? p : globalThis.__smwbQrCodeWarnings = /* @__PURE__ */ new Set(), b = (e, o) => {
+  r.has(e) || r.size >= M || (r.add(e), console.error(`[smwb] QrCode: ${o}`));
+}, S = (e, o) => {
+  if (e instanceof RangeError && /too long/i.test(e.message)) {
+    const s = Math.ceil(o.length / w);
+    return b(
+      `too-long:${s}`,
+      `value is too long to encode as a QR code (${o.length} characters; this notice is once per ${w}-character band)`
+    ), "too-long";
+  }
+  const t = e instanceof Error ? `${e.name}: ${e.message}` : String(e);
+  return b(`failed:${t}`, `value could not be encoded as a QR code (${t})`), "encode-failed";
+}, U = A(function({
+  className: o,
+  value: t,
+  size: s = 192,
+  caption: l,
+  label: _ = "QR code",
+  errorCorrection: i = "M",
+  quietZone: m = 4,
+  "data-testid": C = "qr-code",
+  ...R
+}, $) {
+  var u, h;
+  const a = E(() => {
+    try {
+      return { modules: q(t, { ecc: i, border: 0 }).data, failure: null };
+    } catch (Q) {
+      return { modules: null, failure: S(Q, t) };
+    }
+  }, [t, i]), c = ((h = (u = a.modules) == null ? void 0 : u.length) != null ? h : 0) + 2 * m, g = a.modules ? v(a.modules, m) : "", n = a.failure;
+  return /* @__PURE__ */ f(
+    "figure",
+    {
+      ...R,
+      ref: $,
+      "data-testid": C,
+      "data-error": n != null ? n : void 0,
+      className: N("smwb-qr-code", o),
+      children: [
+        /* @__PURE__ */ f(
+          "svg",
+          {
+            className: "smwb-qr-code__image",
+            role: "img",
+            "aria-label": n === null ? _ : x[n],
+            viewBox: `0 0 ${c} ${c}`,
+            width: s,
+            height: s,
+            shapeRendering: "crispEdges",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ d("rect", { className: "smwb-qr-code__light", width: c, height: c, fill: "rgb(255,255,255)" }),
+              g && /* @__PURE__ */ d("path", { className: "smwb-qr-code__dark", d: g, fill: "rgb(0,0,0)" })
+            ]
+          }
+        ),
+        l ? /* @__PURE__ */ d("figcaption", { className: "smwb-qr-code__caption", children: l }) : null
+      ]
+    }
+  );
+});
+export {
+  U as QrCode
+};
+//# sourceMappingURL=qrCode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"qrCode.js","sources":["../../../../src/components/dataDisplay/qrCode/qrCode.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport cn from \"clsx\";\nimport { encode } from \"uqr\";\nimport { qrCodePath } from \"./qrCodePath\";\n\n/** Error-correction level: L 7%, M 15%, Q 25%, H 30% of the code may be damaged or covered. */\nexport type QrCodeErrorCorrection = \"L\" | \"M\" | \"Q\" | \"H\";\n\nexport interface QrCodeProps extends Omit<React.HTMLAttributes<HTMLElement>, \"children\" | \"role\"> {\n  /** Text encoded in the code (a URL, a pairing token). Encoded as UTF-8 bytes. */\n  value: string;\n  /** Side of the code, quiet zone included, in pixels. Default 192. */\n  size?: number | undefined;\n  /** Shown under the code (a `<figcaption>`), e.g. \"Scan with the phone app\". */\n  caption?: React.ReactNode;\n  /** Accessible name of the image. Default \"QR code\". */\n  label?: string | undefined;\n  /** Error-correction level: L 7%, M 15% (default), Q 25%, H 30% of the code may be damaged or covered. */\n  errorCorrection?: QrCodeErrorCorrection | undefined;\n  /** Light margin around the code in modules. Default 4, the minimum the QR spec asks for; smaller values hurt scanning. */\n  quietZone?: number | undefined;\n  /** Test id of the root; `qr-code` unless given. */\n  \"data-testid\"?: string | undefined;\n}\n\n// Why the encoding failed, as the root's `data-error`, and the name the image takes then.\ntype QrCodeFailure = \"too-long\" | \"encode-failed\";\nconst FAILURE_LABEL: Record<QrCodeFailure, string> = {\n  \"too-long\": \"QR code: value too long\",\n  \"encode-failed\": \"QR code: value could not be encoded\",\n};\n\n// Warns once per distinct cause, never per value: the registry keys on the cause the\n// message reports — a capacity band, or the error text — not on the value, so a\n// `QrCode` bound to a text field neither keeps a multi-KB string alive per keystroke nor\n// logs a new line for every character typed. The cap bounds the registry itself: past it\n// the warning stays quiet instead of growing. It lives on globalThis so the server bundle\n// and the client module of one SSR runtime share it: the cause logs once per runtime, not\n// once per bundle. A process.env guard is deliberately not used — like dagView.tsx it\n// would silence only dev SSR.\nconst MAX_WARNED_CAUSES = 32;\nconst CAPACITY_BAND = 256; // characters: one notice per band, not per length\nconst warnedCauses = ((globalThis as { __smwbQrCodeWarnings?: Set<string> }).__smwbQrCodeWarnings ??= new Set());\nconst warnOnce = (cause: string, message: string): void => {\n  if (warnedCauses.has(cause) || warnedCauses.size >= MAX_WARNED_CAUSES) {\n    return;\n  }\n  warnedCauses.add(cause);\n  // eslint-disable-next-line no-console\n  console.error(`[smwb] QrCode: ${message}`);\n};\n\n// `uqr` reports a value past the QR capacity as a RangeError(\"Data too long\"); it throws\n// other errors for other inputs (a lone surrogate fails in `encodeURI`, an untyped\n// `errorCorrection` fails in its own lookup). Only the first of those is \"too long\", so\n// the failure is read off the error instead of assumed, and the rest are named as what\n// they are.\nconst noteEncodeFailure = (error: unknown, value: string): QrCodeFailure => {\n  if (error instanceof RangeError && /too long/i.test(error.message)) {\n    const band = Math.ceil(value.length / CAPACITY_BAND);\n    warnOnce(\n      `too-long:${band}`,\n      `value is too long to encode as a QR code (${value.length} characters; this notice is once per ` +\n        `${CAPACITY_BAND}-character band)`\n    );\n    return \"too-long\";\n  }\n  const reason = error instanceof Error ? `${error.name}: ${error.message}` : String(error);\n  warnOnce(`failed:${reason}`, `value could not be encoded as a QR code (${reason})`);\n  return \"encode-failed\";\n};\n\n/**\n * A QR code of `value` as an SVG image (role=img): dark modules on a white square —\n * including the quiet zone — in every theme, so a phone camera reads it in dark mode\n * too. With `caption` the code sits in a `<figure>` named by the caption. A `value`\n * past the QR capacity renders an empty white square with `data-error=\"too-long\"`,\n * any other encode failure with `data-error=\"encode-failed\"`, instead of throwing.\n */\nexport const QrCode = forwardRef<HTMLElement, QrCodeProps>(function QrCode(\n  {\n    className,\n    value,\n    size = 192,\n    caption,\n    label = \"QR code\",\n    errorCorrection = \"M\",\n    quietZone = 4,\n    \"data-testid\": dataTestId = \"qr-code\",\n    ...rest\n  },\n  ref\n) {\n  const encoded = useMemo(() => {\n    try {\n      return { modules: encode(value, { ecc: errorCorrection, border: 0 }).data, failure: null };\n    } catch (error) {\n      return { modules: null, failure: noteEncodeFailure(error, value) };\n    }\n  }, [value, errorCorrection]);\n\n  // N: the whole canvas in modules — matrix plus the quiet zone on every side.\n  const moduleCount = encoded.modules?.length ?? 0;\n  const canvas = moduleCount + 2 * quietZone;\n  const path = encoded.modules ? qrCodePath(encoded.modules, quietZone) : \"\";\n  const failure = encoded.failure;\n\n  return (\n    <figure\n      {...rest}\n      ref={ref}\n      data-testid={dataTestId}\n      data-error={failure ?? undefined}\n      className={cn(\"smwb-qr-code\", className)}\n    >\n      <svg\n        className=\"smwb-qr-code__image\"\n        role=\"img\"\n        aria-label={failure === null ? label : FAILURE_LABEL[failure]}\n        viewBox={`0 0 ${canvas} ${canvas}`}\n        width={size}\n        height={size}\n        shapeRendering=\"crispEdges\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect className=\"smwb-qr-code__light\" width={canvas} height={canvas} fill=\"rgb(255,255,255)\" />\n        {path && <path className=\"smwb-qr-code__dark\" d={path} fill=\"rgb(0,0,0)\" />}\n      </svg>\n      {caption ? <figcaption className=\"smwb-qr-code__caption\">{caption}</figcaption> : null}\n    </figure>\n  );\n});\n\nexport default QrCode;\n"],"names":["FAILURE_LABEL","MAX_WARNED_CAUSES","CAPACITY_BAND","warnedCauses","_a","warnOnce","cause","message","noteEncodeFailure","error","value","band","reason","QrCode","forwardRef","className","size","caption","label","errorCorrection","quietZone","dataTestId","rest","ref","encoded","useMemo","encode","canvas","_b","path","qrCodePath","failure","jsxs","cn","jsx"],"mappings":";;;;;;;AA6BA,MAAMA,IAA+C;AAAA,EACnD,YAAY;AAAA,EACZ,iBAAiB;AACnB,GAUMC,IAAoB,IACpBC,IAAgB;;AACtB,MAAMC,KAAiBC,IAAA,WAAsD,yBAAtD,OAAAA,IAAA,WAAsD,uBAAyB,oBAAI,IAAA,GACpGC,IAAW,CAACC,GAAeC,MAA0B;AACzD,EAAIJ,EAAa,IAAIG,CAAK,KAAKH,EAAa,QAAQF,MAGpDE,EAAa,IAAIG,CAAK,GAEtB,QAAQ,MAAM,kBAAkBC,CAAO,EAAE;AAC3C,GAOMC,IAAoB,CAACC,GAAgBC,MAAiC;AAC1E,MAAID,aAAiB,cAAc,YAAY,KAAKA,EAAM,OAAO,GAAG;AAClE,UAAME,IAAO,KAAK,KAAKD,EAAM,SAASR,CAAa;AACnD,WAAAG;AAAA,MACE,YAAYM,CAAI;AAAA,MAChB,6CAA6CD,EAAM,MAAM,wCACpDR,CAAa;AAAA,IAAA,GAEb;AAAA,EACT;AACA,QAAMU,IAASH,aAAiB,QAAQ,GAAGA,EAAM,IAAI,KAAKA,EAAM,OAAO,KAAK,OAAOA,CAAK;AACxF,SAAAJ,EAAS,UAAUO,CAAM,IAAI,4CAA4CA,CAAM,GAAG,GAC3E;AACT,GASaC,IAASC,EAAqC,SACzD;AAAA,EACE,WAAAC;AAAA,EACA,OAAAL;AAAA,EACA,MAAAM,IAAO;AAAA,EACP,SAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,iBAAAC,IAAkB;AAAA,EAClB,WAAAC,IAAY;AAAA,EACZ,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;;AACA,QAAMC,IAAUC,EAAQ,MAAM;AAC5B,QAAI;AACF,aAAO,EAAE,SAASC,EAAOhB,GAAO,EAAE,KAAKS,GAAiB,QAAQ,EAAA,CAAG,EAAE,MAAM,SAAS,KAAA;AAAA,IACtF,SAASV,GAAO;AACd,aAAO,EAAE,SAAS,MAAM,SAASD,EAAkBC,GAAOC,CAAK,EAAA;AAAA,IACjE;AAAA,EACF,GAAG,CAACA,GAAOS,CAAe,CAAC,GAIrBQ,MADcC,KAAAxB,IAAAoB,EAAQ,YAAR,gBAAApB,EAAiB,WAAjB,OAAAwB,IAA2B,KAClB,IAAIR,GAC3BS,IAAOL,EAAQ,UAAUM,EAAWN,EAAQ,SAASJ,CAAS,IAAI,IAClEW,IAAUP,EAAQ;AAExB,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGV;AAAA,MACJ,KAAAC;AAAA,MACA,eAAaF;AAAA,MACb,cAAYU,KAAA,OAAAA,IAAW;AAAA,MACvB,WAAWE,EAAG,gBAAgBlB,CAAS;AAAA,MAEvC,UAAA;AAAA,QAAA,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAYD,MAAY,OAAOb,IAAQlB,EAAc+B,CAAO;AAAA,YAC5D,SAAS,OAAOJ,CAAM,IAAIA,CAAM;AAAA,YAChC,OAAOX;AAAA,YACP,QAAQA;AAAA,YACR,gBAAe;AAAA,YACf,OAAM;AAAA,YAEN,UAAA;AAAA,cAAA,gBAAAkB,EAAC,QAAA,EAAK,WAAU,uBAAsB,OAAOP,GAAQ,QAAQA,GAAQ,MAAK,mBAAA,CAAmB;AAAA,cAC5FE,uBAAS,QAAA,EAAK,WAAU,sBAAqB,GAAGA,GAAM,MAAK,aAAA,CAAa;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAE1EZ,IAAU,gBAAAiB,EAAC,cAAA,EAAW,WAAU,yBAAyB,aAAQ,IAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxF,CAAC;"}

package/dist/components/dataDisplay/qrCode/qrCodePath.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The `d` string of the QR code's dark modules: one run-length subpath per horizontal
+ * run of dark modules (`M{x} {y}h{n}v1h-{n}z`), in row order and offset by the quiet
+ * zone. Pure and deterministic — the same matrix always yields the same string, on the
+ * server and in the browser, in ui-react and ui-solid.
+ */
+export declare function qrCodePath(data: readonly (readonly boolean[])[], quietZone: number): string;

package/dist/components/dataDisplay/qrCode/qrCodePath.js

@@ -0,0 +1,20 @@
+function i(n, o) {
+  const r = [];
+  for (let l = 0; l < n.length; l += 1) {
+    const h = n[l];
+    let e = 0;
+    for (; h !== void 0 && e < h.length; )
+      if (h[e]) {
+        let t = 1;
+        for (; e + t < h.length && h[e + t]; )
+          t += 1;
+        r.push(`M${e + o} ${l + o}h${t}v1h-${t}z`), e += t;
+      } else
+        e += 1;
+  }
+  return r.join("");
+}
+export {
+  i as qrCodePath
+};
+//# sourceMappingURL=qrCodePath.js.map

package/dist/components/dataDisplay/qrCode/qrCodePath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qrCodePath.js","sources":["../../../../src/components/dataDisplay/qrCode/qrCodePath.ts"],"sourcesContent":["/**\n * The `d` string of the QR code's dark modules: one run-length subpath per horizontal\n * run of dark modules (`M{x} {y}h{n}v1h-{n}z`), in row order and offset by the quiet\n * zone. Pure and deterministic — the same matrix always yields the same string, on the\n * server and in the browser, in ui-react and ui-solid.\n */\nexport function qrCodePath(data: readonly (readonly boolean[])[], quietZone: number): string {\n  const parts: string[] = [];\n  for (let y = 0; y < data.length; y += 1) {\n    const row = data[y];\n    let x = 0;\n    while (row !== undefined && x < row.length) {\n      if (row[x]) {\n        let run = 1;\n        while (x + run < row.length && row[x + run]) {\n          run += 1;\n        }\n        parts.push(`M${x + quietZone} ${y + quietZone}h${run}v1h-${run}z`);\n        x += run;\n      } else {\n        x += 1;\n      }\n    }\n  }\n  return parts.join(\"\");\n}\n"],"names":["qrCodePath","data","quietZone","parts","y","row","x","run"],"mappings":"AAMO,SAASA,EAAWC,GAAuCC,GAA2B;AAC3F,QAAMC,IAAkB,CAAA;AACxB,WAASC,IAAI,GAAGA,IAAIH,EAAK,QAAQG,KAAK,GAAG;AACvC,UAAMC,IAAMJ,EAAKG,CAAC;AAClB,QAAIE,IAAI;AACR,WAAOD,MAAQ,UAAaC,IAAID,EAAI;AAClC,UAAIA,EAAIC,CAAC,GAAG;AACV,YAAIC,IAAM;AACV,eAAOD,IAAIC,IAAMF,EAAI,UAAUA,EAAIC,IAAIC,CAAG;AACxC,UAAAA,KAAO;AAET,QAAAJ,EAAM,KAAK,IAAIG,IAAIJ,CAAS,IAAIE,IAAIF,CAAS,IAAIK,CAAG,OAAOA,CAAG,GAAG,GACjED,KAAKC;AAAA,MACP;AACE,QAAAD,KAAK;AAAA,EAGX;AACA,SAAOH,EAAM,KAAK,EAAE;AACtB;"}

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

@@ -16,6 +16,8 @@ export interface StatProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
     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.

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

@@ -3,24 +3,36 @@ import '../../../assets/styles/less/components/stat/stat.entry.css';import '../.
 /* empty css                                                   */
 import c from "react";
 import p from "clsx";
-import { Icon as d } from "../../base/icon/icon.js";
-const $ = c.forwardRef(function({ className: o, label: r, value: a, hint: m, icon: t, tone: l = "neutral", variant: n = "tile", href: e, children: i, ...b }, u) {
+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__ */ _(
-    e ? "a" : "div",
+    n ? "a" : "div",
     {
       ...b,
       ref: u,
-      ...e ? { href: e } : {},
-      "data-testid": "stat",
+      ...n ? { href: n } : {},
+      "data-testid": d,
       className: p(
         "smwb-stat",
-        `smwb-stat_${n}`,
+        `smwb-stat_${e}`,
         `smwb-stat_tone-${l}`,
-        { "smwb-stat_link": !!e, "smwb-stat_with-icon": !!t },
+        { "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(d, { name: t, size: 20 }) : t }) : null,
+        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,
@@ -28,21 +40,21 @@ const $ = c.forwardRef(function({ className: o, label: r, value: a, hint: m, ico
       ]
     }
   );
-}), h = c.forwardRef(function({ className: o, style: r, minItemWidth: a, children: m, ...t }, l) {
-  const n = typeof a == "number" ? `${a}px` : a;
+}), 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: n === void 0 ? r : { ...r, "--smwb-stat-min": n },
+      style: e === void 0 ? r : { ...r, "--smwb-stat-min": e },
       children: m
     }
   );
 });
 export {
-  $ as Stat,
-  h as StatGroup
+  h as Stat,
+  j as StatGroup
 };
 //# sourceMappingURL=stat.js.map

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

@@ -1 +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}\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  { className, label, value, hint, icon, tone = \"neutral\", variant = \"tile\", href, children, ...rest },\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=\"stat\"\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","rest","ref","jsxs","cn","jsx","Icon","StatGroup","style","minItemWidth","width"],"mappings":";;;;;;AA8BO,MAAMA,IAAOC,EAAM,WAAsD,SAC9E,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAC,GAAO,MAAAC,GAAM,MAAAC,GAAM,MAAAC,IAAO,WAAW,SAAAC,IAAU,QAAQ,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GAC9FC,GACA;AAEA,SACE,gBAAAC;AAAA,IAFWJ,IAAO,MAAM;AAAA,IAEvB;AAAA,MACE,GAAGE;AAAA,MACJ,KAAAC;AAAA,MACC,GAAIH,IAAO,EAAE,MAAAA,EAAA,IAAS,CAAA;AAAA,MACvB,eAAY;AAAA,MACZ,WAAWK;AAAA,QACT;AAAA,QACA,aAAaN,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,gBAAAS,EAACC,KAAK,MAAMV,GAAM,MAAM,IAAI,IAAKA,GAC/D,IACE;AAAA,QACJ,gBAAAS,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAZ,GAAM;AAAA,QAC1C,gBAAAY,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAX,GAAM;AAAA,QACzCC,IAAO,gBAAAU,EAAC,QAAA,EAAK,WAAU,mBAAmB,aAAK,IAAU;AAAA,QACzDL,IAAW,gBAAAK,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAAL,GAAS,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvE,CAAC,GASYO,IAAYhB,EAAM,WAA8D,SAC3F,EAAE,WAAAC,GAAW,OAAAgB,GAAO,cAAAC,GAAc,UAAAT,GAAU,GAAGC,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,mBAAmBZ,CAAS;AAAA,MAC1C,OAAOkB,MAAU,SAAYF,IAAS,EAAE,GAAGA,GAAO,mBAAmBE,EAAA;AAAA,MAEpE,UAAAV;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"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/statusDot/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusDot, default } from "./statusDot";
+export type { StatusDotProps, StatusDotStatus, StatusDotColor, StatusDotSize } from "./statusDot";

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

@@ -0,0 +1,35 @@
+import React, { HTMLAttributes } from "react";
+/** What the marker says: `active` is under way, `attention` waits for someone, `idle` rests, `done` is finished. */
+export type StatusDotStatus = "active" | "attention" | "idle" | "done" | "error" | "unknown";
+/** The theme colour names `Chip` takes; `default` is the neutral on-surface colour. */
+export type StatusDotColor = "default" | "primary" | "secondary" | "error" | "success" | "warning" | "info";
+export type StatusDotSize = "sm" | "md";
+export interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, "role" | "children" | "aria-label"> {
+    /** Class name(s) for the dot's root `<span>`. */
+    className?: string;
+    /**
+     * What the dot says, and so its colour: `active` info, `attention` warning, `idle` neutral, `done` success,
+     * `error` error. `unknown` is a ring in the outline colour. Without `status` (and without `color`) the dot is
+     * `unknown`.
+     */
+    status?: StatusDotStatus | undefined;
+    /**
+     * A theme colour instead of the status's own, or on its own with no `status` (a plain disc). Given with a
+     * `status`, the status still sets the shape.
+     */
+    color?: StatusDotColor | undefined;
+    /** `md` (12px) unless given; `sm` is 8px. */
+    size?: StatusDotSize | undefined;
+    /**
+     * A ring spreads from the dot. On unless given for `active`, off for every other status. Never drawn while the
+     * user prefers reduced motion.
+     */
+    pulse?: boolean | undefined;
+    /** What the dot means in words, e.g. "Working": the accessible name, read by assistive technology. */
+    label: string;
+    /** Test id of the root; `status-dot` unless given. */
+    "data-testid"?: string | undefined;
+}
+/** A small status marker: a dot coloured and shaped by `status`, named by `label`. */
+export declare const StatusDot: React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLSpanElement>>;
+export default StatusDot;

package/dist/components/dataDisplay/statusDot/statusDot.js

@@ -0,0 +1,30 @@
+import { jsx as e } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/statusDot/statusDot.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                             */
+import { forwardRef as b } from "react";
+import f from "clsx";
+const x = b(function({ className: m, status: t, color: o, size: d = "md", pulse: s, label: i, "data-testid": r = "status-dot", ...n }, w) {
+  const a = t != null ? t : o === void 0 ? "unknown" : void 0;
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      ...n,
+      ref: w,
+      role: "img",
+      "aria-label": i,
+      "data-testid": r,
+      className: f(
+        "smwb-status-dot",
+        `smwb-status-dot_size-${d}`,
+        a && `smwb-status-dot_status-${a}`,
+        o && `smwb-status-dot_color-${o}`,
+        { "smwb-status-dot_pulse": s != null ? s : t === "active" },
+        m
+      )
+    }
+  );
+});
+export {
+  x as StatusDot
+};
+//# sourceMappingURL=statusDot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"statusDot.js","sources":["../../../../src/components/dataDisplay/statusDot/statusDot.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\n/** What the marker says: `active` is under way, `attention` waits for someone, `idle` rests, `done` is finished. */\nexport type StatusDotStatus = \"active\" | \"attention\" | \"idle\" | \"done\" | \"error\" | \"unknown\";\n\n/** The theme colour names `Chip` takes; `default` is the neutral on-surface colour. */\nexport type StatusDotColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport type StatusDotSize = \"sm\" | \"md\";\n\nexport interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"role\" | \"children\" | \"aria-label\"> {\n  /** Class name(s) for the dot's root `<span>`. */\n  className?: string;\n  /**\n   * What the dot says, and so its colour: `active` info, `attention` warning, `idle` neutral, `done` success,\n   * `error` error. `unknown` is a ring in the outline colour. Without `status` (and without `color`) the dot is\n   * `unknown`.\n   */\n  status?: StatusDotStatus | undefined;\n  /**\n   * A theme colour instead of the status's own, or on its own with no `status` (a plain disc). Given with a\n   * `status`, the status still sets the shape.\n   */\n  color?: StatusDotColor | undefined;\n  /** `md` (12px) unless given; `sm` is 8px. */\n  size?: StatusDotSize | undefined;\n  /**\n   * A ring spreads from the dot. On unless given for `active`, off for every other status. Never drawn while the\n   * user prefers reduced motion.\n   */\n  pulse?: boolean | undefined;\n  /** What the dot means in words, e.g. \"Working\": the accessible name, read by assistive technology. */\n  label: string;\n  /** Test id of the root; `status-dot` unless given. */\n  \"data-testid\"?: string | undefined;\n}\n\n/** A small status marker: a dot coloured and shaped by `status`, named by `label`. */\nexport const StatusDot = forwardRef<HTMLSpanElement, StatusDotProps>(function StatusDot(\n  { className, status, color, size = \"md\", pulse, label, \"data-testid\": dataTestId = \"status-dot\", ...rest },\n  ref\n) {\n  // A bare colour is a plain disc; with neither, the dot is \"unknown\".\n  const shown = status ?? (color === undefined ? \"unknown\" : undefined);\n  return (\n    <span\n      {...rest}\n      ref={ref}\n      role=\"img\"\n      aria-label={label}\n      data-testid={dataTestId}\n      className={cn(\n        \"smwb-status-dot\",\n        `smwb-status-dot_size-${size}`,\n        shown && `smwb-status-dot_status-${shown}`,\n        color && `smwb-status-dot_color-${color}`,\n        { \"smwb-status-dot_pulse\": pulse ?? status === \"active\" },\n        className\n      )}\n    />\n  );\n});\n\nexport default StatusDot;\n"],"names":["StatusDot","forwardRef","className","status","color","size","pulse","label","dataTestId","rest","ref","shown","jsx","cn"],"mappings":";;;;;AAyCO,MAAMA,IAAYC,EAA4C,SACnE,EAAE,WAAAC,GAAW,QAAAC,GAAQ,OAAAC,GAAO,MAAAC,IAAO,MAAM,OAAAC,GAAO,OAAAC,GAAO,eAAeC,IAAa,cAAc,GAAGC,EAAA,GACpGC,GACA;AAEA,QAAMC,IAAQR,KAAA,OAAAA,IAAWC,MAAU,SAAY,YAAY;AAC3D,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,KAAAC;AAAA,MACA,MAAK;AAAA,MACL,cAAYH;AAAA,MACZ,eAAaC;AAAA,MACb,WAAWK;AAAA,QACT;AAAA,QACA,wBAAwBR,CAAI;AAAA,QAC5BM,KAAS,0BAA0BA,CAAK;AAAA,QACxCP,KAAS,yBAAyBA,CAAK;AAAA,QACvC,EAAE,yBAAyBE,KAAA,OAAAA,IAASH,MAAW,SAAA;AAAA,QAC/CD;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,CAAC;"}