@smwb/ui-react 2.8.0 → 2.9.0

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

@@ -0,0 +1,40 @@
+import React, { type HTMLAttributes } from "react";
+import { type KbdPlatform } from "./kbdKeys";
+export interface KbdProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    className?: string;
+    /**
+     * The keys of the shortcut in order, e.g. `["Mod", "K"]` or `["Shift", "Enter"]`. `Mod` is the
+     * Command key on macOS and Ctrl elsewhere. On macOS, `Shift`, `Alt`/`Option`, `Ctrl`/`Control`,
+     * `Meta`/`Cmd`/`Command`, `Enter`, `Escape`, `Tab`, `Backspace` and `Delete` are drawn as the
+     * symbols of the Mac keyboard; elsewhere the same names are drawn as Ctrl, Alt, Shift, Meta, Enter,
+     * Esc, Tab, Backspace and Del, whatever their case. `" "` and `Space` are the Space key, `+` and
+     * `Plus` the plus key.
+     * Arrow names (`ArrowUp` or `Up`, …) are arrows everywhere; any other key is drawn as given
+     * (a single letter in upper case).
+     */
+    keys: string[];
+    /**
+     * The platform whose keys are drawn. Without it the browser's own is used: `other` on the
+     * server and in the first client render (so that hydration matches), `mac` right after on a Mac.
+     * Set it for a fixed look, in stories and in tests.
+     */
+    platform?: KbdPlatform;
+    /**
+     * Drawn between the key caps. By default `+` on `other` and nothing on `mac`, where the symbols
+     * stand side by side; `""` draws none. It is for the eye only; assistive technology reads `label`.
+     */
+    separator?: string;
+    /**
+     * What assistive technology reads instead of the key caps. By default the key names, joined
+     * with `+` on `other` ("Ctrl+K") and with a space on `mac` ("Command K").
+     */
+    label?: string;
+    /** Test id of the root `<kbd>`; `kbd` unless given. */
+    "data-testid"?: string;
+}
+/**
+ * A keyboard shortcut as key caps, for a tooltip, a menu item or a command palette. The root and
+ * every cap are `<kbd>`; assistive technology reads one text ("Ctrl+K", "Command K") and skips the caps.
+ */
+export declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
+export default Kbd;

package/dist/components/dataDisplay/kbd/kbd.js

@@ -0,0 +1,27 @@
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/kbd/kbd.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                 */
+import f, { useState as _ } from "react";
+import l from "clsx";
+import { useSafeLayoutEffect as K } from "../../../hooks/useSafeLayoutEffect.js";
+import { kbdKeyLabel as x, detectKbdPlatform as N } from "./kbdKeys.js";
+function j(t) {
+  const [s, n] = _("other");
+  return K(() => {
+    t === void 0 && n(N());
+  }, [t]), t != null ? t : s;
+}
+const D = f.forwardRef(function({ className: s, keys: n, platform: u, separator: m, label: c, "data-testid": k = "kbd", ...h }, p) {
+  const d = j(u), o = n.map((e) => x(e, d)), r = m != null ? m : d === "mac" ? "" : "+", w = c != null ? c : o.map((e) => e.name).join(d === "mac" ? " " : "+");
+  return /* @__PURE__ */ b("kbd", { ...h, ref: p, "data-testid": k, "data-platform": d, className: l("smwb-kbd", s), children: [
+    /* @__PURE__ */ a("span", { className: "smwb-kbd__text", children: w }),
+    o.map((e, i) => /* @__PURE__ */ b(f.Fragment, { children: [
+      i > 0 && r !== "" ? /* @__PURE__ */ a("span", { className: "smwb-kbd__separator", "aria-hidden": "true", children: r }) : null,
+      /* @__PURE__ */ a("kbd", { className: "smwb-kbd__key", "aria-hidden": "true", children: e.text })
+    ] }, i))
+  ] });
+});
+export {
+  D as Kbd
+};
+//# sourceMappingURL=kbd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","sources":["../../../../src/components/dataDisplay/kbd/kbd.tsx"],"sourcesContent":["import React, { type HTMLAttributes, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { detectKbdPlatform, kbdKeyLabel, type KbdPlatform } from \"./kbdKeys\";\n\nexport interface KbdProps extends Omit<HTMLAttributes<HTMLElement>, \"children\"> {\n  className?: string;\n  /**\n   * The keys of the shortcut in order, e.g. `[\"Mod\", \"K\"]` or `[\"Shift\", \"Enter\"]`. `Mod` is the\n   * Command key on macOS and Ctrl elsewhere. On macOS, `Shift`, `Alt`/`Option`, `Ctrl`/`Control`,\n   * `Meta`/`Cmd`/`Command`, `Enter`, `Escape`, `Tab`, `Backspace` and `Delete` are drawn as the\n   * symbols of the Mac keyboard; elsewhere the same names are drawn as Ctrl, Alt, Shift, Meta, Enter,\n   * Esc, Tab, Backspace and Del, whatever their case. `\" \"` and `Space` are the Space key, `+` and\n   * `Plus` the plus key.\n   * Arrow names (`ArrowUp` or `Up`, …) are arrows everywhere; any other key is drawn as given\n   * (a single letter in upper case).\n   */\n  keys: string[];\n  /**\n   * The platform whose keys are drawn. Without it the browser's own is used: `other` on the\n   * server and in the first client render (so that hydration matches), `mac` right after on a Mac.\n   * Set it for a fixed look, in stories and in tests.\n   */\n  platform?: KbdPlatform;\n  /**\n   * Drawn between the key caps. By default `+` on `other` and nothing on `mac`, where the symbols\n   * stand side by side; `\"\"` draws none. It is for the eye only; assistive technology reads `label`.\n   */\n  separator?: string;\n  /**\n   * What assistive technology reads instead of the key caps. By default the key names, joined\n   * with `+` on `other` (\"Ctrl+K\") and with a space on `mac` (\"Command K\").\n   */\n  label?: string;\n  /** Test id of the root `<kbd>`; `kbd` unless given. */\n  \"data-testid\"?: string;\n}\n\n/** The platform asked for, or the browser's: `other` until the client has mounted. */\nfunction useKbdPlatform(platform: KbdPlatform | undefined): KbdPlatform {\n  const [detected, setDetected] = useState<KbdPlatform>(\"other\");\n  useSafeLayoutEffect(() => {\n    if (platform === undefined) {\n      setDetected(detectKbdPlatform());\n    }\n  }, [platform]);\n  return platform ?? detected;\n}\n\n/**\n * A keyboard shortcut as key caps, for a tooltip, a menu item or a command palette. The root and\n * every cap are `<kbd>`; assistive technology reads one text (\"Ctrl+K\", \"Command K\") and skips the caps.\n */\nexport const Kbd = React.forwardRef<HTMLElement, KbdProps>(function Kbd(\n  { className, keys, platform: platformProp, separator, label, \"data-testid\": dataTestId = \"kbd\", ...rest },\n  ref\n) {\n  const platform = useKbdPlatform(platformProp);\n  const labels = keys.map((key) => kbdKeyLabel(key, platform));\n  const between = separator ?? (platform === \"mac\" ? \"\" : \"+\");\n  const spoken = label ?? labels.map((item) => item.name).join(platform === \"mac\" ? \" \" : \"+\");\n\n  return (\n    <kbd {...rest} ref={ref} data-testid={dataTestId} data-platform={platform} className={cn(\"smwb-kbd\", className)}>\n      <span className=\"smwb-kbd__text\">{spoken}</span>\n      {labels.map((item, index) => (\n        <React.Fragment key={index}>\n          {index > 0 && between !== \"\" ? (\n            <span className=\"smwb-kbd__separator\" aria-hidden=\"true\">\n              {between}\n            </span>\n          ) : null}\n          <kbd className=\"smwb-kbd__key\" aria-hidden=\"true\">\n            {item.text}\n          </kbd>\n        </React.Fragment>\n      ))}\n    </kbd>\n  );\n});\n\nexport default Kbd;\n"],"names":["useKbdPlatform","platform","detected","setDetected","useState","useSafeLayoutEffect","detectKbdPlatform","Kbd","React","className","keys","platformProp","separator","label","dataTestId","rest","ref","labels","key","kbdKeyLabel","between","spoken","item","jsxs","cn","jsx","index"],"mappings":";;;;;;;AAyCA,SAASA,EAAeC,GAAgD;AACtE,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAsB,OAAO;AAC7D,SAAAC,EAAoB,MAAM;AACxB,IAAIJ,MAAa,UACfE,EAAYG,GAAmB;AAAA,EAEnC,GAAG,CAACL,CAAQ,CAAC,GACNA,KAAA,OAAAA,IAAYC;AACrB;AAMO,MAAMK,IAAMC,EAAM,WAAkC,SACzD,EAAE,WAAAC,GAAW,MAAAC,GAAM,UAAUC,GAAc,WAAAC,GAAW,OAAAC,GAAO,eAAeC,IAAa,OAAO,GAAGC,EAAA,GACnGC,GACA;AACA,QAAMf,IAAWD,EAAeW,CAAY,GACtCM,IAASP,EAAK,IAAI,CAACQ,MAAQC,EAAYD,GAAKjB,CAAQ,CAAC,GACrDmB,IAAUR,KAAA,OAAAA,IAAcX,MAAa,QAAQ,KAAK,KAClDoB,IAASR,KAAA,OAAAA,IAASI,EAAO,IAAI,CAACK,MAASA,EAAK,IAAI,EAAE,KAAKrB,MAAa,QAAQ,MAAM,GAAG;AAE3F,SACE,gBAAAsB,EAAC,OAAA,EAAK,GAAGR,GAAM,KAAAC,GAAU,eAAaF,GAAY,iBAAeb,GAAU,WAAWuB,EAAG,YAAYf,CAAS,GAC5G,UAAA;AAAA,IAAA,gBAAAgB,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAJ,GAAO;AAAA,IACxCJ,EAAO,IAAI,CAACK,GAAMI,MACjB,gBAAAH,EAACf,EAAM,UAAN,EACE,UAAA;AAAA,MAAAkB,IAAQ,KAAKN,MAAY,KACxB,gBAAAK,EAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAAL,EAAA,CACH,IACE;AAAA,wBACH,OAAA,EAAI,WAAU,iBAAgB,eAAY,QACxC,YAAK,KAAA,CACR;AAAA,IAAA,EAAA,GARmBM,CASrB,CACD;AAAA,EAAA,GACH;AAEJ,CAAC;"}

package/dist/components/dataDisplay/kbd/kbdKeys.d.ts

@@ -0,0 +1,18 @@
+export type KbdPlatform = "mac" | "other";
+/** How one key is drawn, and how it is read out. */
+export interface KbdKeyLabel {
+    /** What is drawn on the key cap. */
+    text: string;
+    /** What assistive technology reads. */
+    name: string;
+}
+/**
+ * The platform of the running browser: `mac` for macOS (and iPadOS, which reports itself
+ * so), `other` everywhere else and without a `navigator` (on the server).
+ */
+export declare function detectKbdPlatform(): KbdPlatform;
+/**
+ * The cap and the spoken name of a key. `Mod` is Command on `mac` and Ctrl on `other`; see the
+ * tables above for the rest. A single letter is drawn in upper case; any other key as given.
+ */
+export declare function kbdKeyLabel(key: string, platform: KbdPlatform): KbdKeyLabel;

package/dist/components/dataDisplay/kbd/kbdKeys.js

@@ -0,0 +1,72 @@
+const n = (e, a) => ({ text: e, name: a }), s = {
+  up: n("↑", "Up arrow"),
+  arrowup: n("↑", "Up arrow"),
+  down: n("↓", "Down arrow"),
+  arrowdown: n("↓", "Down arrow"),
+  left: n("←", "Left arrow"),
+  arrowleft: n("←", "Left arrow"),
+  right: n("→", "Right arrow"),
+  arrowright: n("→", "Right arrow"),
+  // `KeyboardEvent.key` is " " for the space bar, and a bare "+" would read "Ctrl++".
+  " ": { text: "Space", name: "Space" },
+  space: { text: "Space", name: "Space" },
+  spacebar: { text: "Space", name: "Space" },
+  "+": { text: "+", name: "Plus" },
+  plus: { text: "+", name: "Plus" }
+}, r = { text: "⌘", name: "Command" }, d = {
+  mod: r,
+  meta: r,
+  cmd: r,
+  command: r,
+  shift: { text: "⇧", name: "Shift" },
+  alt: { text: "⌥", name: "Option" },
+  option: { text: "⌥", name: "Option" },
+  ctrl: { text: "⌃", name: "Control" },
+  control: { text: "⌃", name: "Control" },
+  enter: { text: "↩", name: "Return" },
+  return: { text: "↩", name: "Return" },
+  escape: { text: "⎋", name: "Escape" },
+  esc: { text: "⎋", name: "Escape" },
+  tab: { text: "⇥", name: "Tab" },
+  backspace: { text: "⌫", name: "Delete" },
+  delete: { text: "⌦", name: "Forward delete" },
+  del: { text: "⌦", name: "Forward delete" }
+}, o = { text: "Meta", name: "Meta" }, t = (e, a = e) => ({ text: e, name: a }), i = {
+  mod: t("Ctrl"),
+  ctrl: t("Ctrl"),
+  control: t("Ctrl"),
+  alt: t("Alt"),
+  option: t("Alt"),
+  shift: t("Shift"),
+  meta: o,
+  cmd: o,
+  command: o,
+  enter: t("Enter"),
+  return: t("Enter"),
+  escape: t("Esc", "Escape"),
+  esc: t("Esc", "Escape"),
+  tab: t("Tab"),
+  backspace: t("Backspace"),
+  delete: t("Del", "Delete"),
+  del: t("Del", "Delete")
+};
+function w() {
+  var a;
+  if (typeof navigator == "undefined")
+    return "other";
+  const e = (a = navigator.userAgentData) == null ? void 0 : a.platform;
+  return /mac|iphone|ipad|ipod/i.test(e || navigator.platform || "") ? "mac" : "other";
+}
+function x(e, a) {
+  var p;
+  const c = e.trim().toLowerCase() || e, m = (p = (a === "mac" ? d : i)[c]) != null ? p : s[c];
+  if (m)
+    return m;
+  const l = e.length === 1 ? e.toUpperCase() : e;
+  return { text: l, name: l };
+}
+export {
+  w as detectKbdPlatform,
+  x as kbdKeyLabel
+};
+//# sourceMappingURL=kbdKeys.js.map

package/dist/components/dataDisplay/kbd/kbdKeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbdKeys.js","sources":["../../../../src/components/dataDisplay/kbd/kbdKeys.ts"],"sourcesContent":["export type KbdPlatform = \"mac\" | \"other\";\n\n/** How one key is drawn, and how it is read out. */\nexport interface KbdKeyLabel {\n  /** What is drawn on the key cap. */\n  text: string;\n  /** What assistive technology reads. */\n  name: string;\n}\n\nconst arrow = (text: string, name: string): KbdKeyLabel => ({ text, name });\n\n// Names, in lower case, the same on every platform.\nconst COMMON: Record<string, KbdKeyLabel> = {\n  up: arrow(\"↑\", \"Up arrow\"),\n  arrowup: arrow(\"↑\", \"Up arrow\"),\n  down: arrow(\"↓\", \"Down arrow\"),\n  arrowdown: arrow(\"↓\", \"Down arrow\"),\n  left: arrow(\"←\", \"Left arrow\"),\n  arrowleft: arrow(\"←\", \"Left arrow\"),\n  right: arrow(\"→\", \"Right arrow\"),\n  arrowright: arrow(\"→\", \"Right arrow\"),\n  // `KeyboardEvent.key` is \" \" for the space bar, and a bare \"+\" would read \"Ctrl++\".\n  \" \": { text: \"Space\", name: \"Space\" },\n  space: { text: \"Space\", name: \"Space\" },\n  spacebar: { text: \"Space\", name: \"Space\" },\n  \"+\": { text: \"+\", name: \"Plus\" },\n  plus: { text: \"+\", name: \"Plus\" },\n};\n\nconst COMMAND: KbdKeyLabel = { text: \"⌘\", name: \"Command\" };\n\n// On macOS the modifiers and the editing keys are drawn as the symbols the Mac\n// keyboard and its menus use.\nconst MAC: Record<string, KbdKeyLabel> = {\n  mod: COMMAND,\n  meta: COMMAND,\n  cmd: COMMAND,\n  command: COMMAND,\n  shift: { text: \"⇧\", name: \"Shift\" },\n  alt: { text: \"⌥\", name: \"Option\" },\n  option: { text: \"⌥\", name: \"Option\" },\n  ctrl: { text: \"⌃\", name: \"Control\" },\n  control: { text: \"⌃\", name: \"Control\" },\n  enter: { text: \"↩\", name: \"Return\" },\n  return: { text: \"↩\", name: \"Return\" },\n  escape: { text: \"⎋\", name: \"Escape\" },\n  esc: { text: \"⎋\", name: \"Escape\" },\n  tab: { text: \"⇥\", name: \"Tab\" },\n  backspace: { text: \"⌫\", name: \"Delete\" },\n  delete: { text: \"⌦\", name: \"Forward delete\" },\n  del: { text: \"⌦\", name: \"Forward delete\" },\n};\n\n// Elsewhere the same names are written in their usual capitalisation, so one `keys` array\n// looks alike on every platform. `Meta`, `Cmd` and `Command` have no key of their own here\n// and are drawn as `Meta`.\nconst META: KbdKeyLabel = { text: \"Meta\", name: \"Meta\" };\nconst named = (text: string, name = text): KbdKeyLabel => ({ text, name });\nconst OTHER: Record<string, KbdKeyLabel> = {\n  mod: named(\"Ctrl\"),\n  ctrl: named(\"Ctrl\"),\n  control: named(\"Ctrl\"),\n  alt: named(\"Alt\"),\n  option: named(\"Alt\"),\n  shift: named(\"Shift\"),\n  meta: META,\n  cmd: META,\n  command: META,\n  enter: named(\"Enter\"),\n  return: named(\"Enter\"),\n  escape: named(\"Esc\", \"Escape\"),\n  esc: named(\"Esc\", \"Escape\"),\n  tab: named(\"Tab\"),\n  backspace: named(\"Backspace\"),\n  delete: named(\"Del\", \"Delete\"),\n  del: named(\"Del\", \"Delete\"),\n};\n\n/**\n * The platform of the running browser: `mac` for macOS (and iPadOS, which reports itself\n * so), `other` everywhere else and without a `navigator` (on the server).\n */\nexport function detectKbdPlatform(): KbdPlatform {\n  if (typeof navigator === \"undefined\") {\n    return \"other\";\n  }\n  const hinted = (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData?.platform;\n  return /mac|iphone|ipad|ipod/i.test(hinted || navigator.platform || \"\") ? \"mac\" : \"other\";\n}\n\n/**\n * The cap and the spoken name of a key. `Mod` is Command on `mac` and Ctrl on `other`; see the\n * tables above for the rest. A single letter is drawn in upper case; any other key as given.\n */\nexport function kbdKeyLabel(key: string, platform: KbdPlatform): KbdKeyLabel {\n  const lower = key.trim().toLowerCase() || key; // a lone \" \" is the space bar\n  const known = (platform === \"mac\" ? MAC : OTHER)[lower] ?? COMMON[lower];\n  if (known) {\n    return known;\n  }\n  const text = key.length === 1 ? key.toUpperCase() : key;\n  return { text, name: text };\n}\n"],"names":["arrow","text","name","COMMON","COMMAND","MAC","META","named","OTHER","detectKbdPlatform","_a","hinted","kbdKeyLabel","key","platform","lower","known"],"mappings":"AAUA,MAAMA,IAAQ,CAACC,GAAcC,OAA+B,EAAE,MAAAD,GAAM,MAAAC,EAAA,IAG9DC,IAAsC;AAAA,EAC1C,IAAIH,EAAM,KAAK,UAAU;AAAA,EACzB,SAASA,EAAM,KAAK,UAAU;AAAA,EAC9B,MAAMA,EAAM,KAAK,YAAY;AAAA,EAC7B,WAAWA,EAAM,KAAK,YAAY;AAAA,EAClC,MAAMA,EAAM,KAAK,YAAY;AAAA,EAC7B,WAAWA,EAAM,KAAK,YAAY;AAAA,EAClC,OAAOA,EAAM,KAAK,aAAa;AAAA,EAC/B,YAAYA,EAAM,KAAK,aAAa;AAAA;AAAA,EAEpC,KAAK,EAAE,MAAM,SAAS,MAAM,QAAA;AAAA,EAC5B,OAAO,EAAE,MAAM,SAAS,MAAM,QAAA;AAAA,EAC9B,UAAU,EAAE,MAAM,SAAS,MAAM,QAAA;AAAA,EACjC,KAAK,EAAE,MAAM,KAAK,MAAM,OAAA;AAAA,EACxB,MAAM,EAAE,MAAM,KAAK,MAAM,OAAA;AAC3B,GAEMI,IAAuB,EAAE,MAAM,KAAK,MAAM,UAAA,GAI1CC,IAAmC;AAAA,EACvC,KAAKD;AAAA,EACL,MAAMA;AAAA,EACN,KAAKA;AAAA,EACL,SAASA;AAAA,EACT,OAAO,EAAE,MAAM,KAAK,MAAM,QAAA;AAAA,EAC1B,KAAK,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EACxB,QAAQ,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EAC3B,MAAM,EAAE,MAAM,KAAK,MAAM,UAAA;AAAA,EACzB,SAAS,EAAE,MAAM,KAAK,MAAM,UAAA;AAAA,EAC5B,OAAO,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EAC1B,QAAQ,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EAC3B,QAAQ,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EAC3B,KAAK,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EACxB,KAAK,EAAE,MAAM,KAAK,MAAM,MAAA;AAAA,EACxB,WAAW,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EAC9B,QAAQ,EAAE,MAAM,KAAK,MAAM,iBAAA;AAAA,EAC3B,KAAK,EAAE,MAAM,KAAK,MAAM,iBAAA;AAC1B,GAKME,IAAoB,EAAE,MAAM,QAAQ,MAAM,OAAA,GAC1CC,IAAQ,CAACN,GAAcC,IAAOD,OAAuB,EAAE,MAAAA,GAAM,MAAAC,MAC7DM,IAAqC;AAAA,EACzC,KAAKD,EAAM,MAAM;AAAA,EACjB,MAAMA,EAAM,MAAM;AAAA,EAClB,SAASA,EAAM,MAAM;AAAA,EACrB,KAAKA,EAAM,KAAK;AAAA,EAChB,QAAQA,EAAM,KAAK;AAAA,EACnB,OAAOA,EAAM,OAAO;AAAA,EACpB,MAAMD;AAAA,EACN,KAAKA;AAAA,EACL,SAASA;AAAA,EACT,OAAOC,EAAM,OAAO;AAAA,EACpB,QAAQA,EAAM,OAAO;AAAA,EACrB,QAAQA,EAAM,OAAO,QAAQ;AAAA,EAC7B,KAAKA,EAAM,OAAO,QAAQ;AAAA,EAC1B,KAAKA,EAAM,KAAK;AAAA,EAChB,WAAWA,EAAM,WAAW;AAAA,EAC5B,QAAQA,EAAM,OAAO,QAAQ;AAAA,EAC7B,KAAKA,EAAM,OAAO,QAAQ;AAC5B;AAMO,SAASE,IAAiC;AAzEjD,MAAAC;AA0EE,MAAI,OAAO,aAAc;AACvB,WAAO;AAET,QAAMC,KAAUD,IAAA,UAAoE,kBAApE,gBAAAA,EAAmF;AACnG,SAAO,wBAAwB,KAAKC,KAAU,UAAU,YAAY,EAAE,IAAI,QAAQ;AACpF;AAMO,SAASC,EAAYC,GAAaC,GAAoC;AArF7E,MAAAJ;AAsFE,QAAMK,IAAQF,EAAI,KAAA,EAAO,iBAAiBA,GACpCG,KAASN,KAAAI,MAAa,QAAQT,IAAMG,GAAOO,CAAK,MAAvC,OAAAL,IAA4CP,EAAOY,CAAK;AACvE,MAAIC;AACF,WAAOA;AAET,QAAMf,IAAOY,EAAI,WAAW,IAAIA,EAAI,gBAAgBA;AACpD,SAAO,EAAE,MAAAZ,GAAM,MAAMA,EAAA;AACvB;"}

package/dist/components/dataDisplay/list/listItem.d.ts

@@ -2,13 +2,47 @@ import React from "react";
 export interface ListItemProps {
     disabled?: boolean;
     className?: string;
+    /**
+     * Paints the row as the current one. On a link row (with `href`) it also marks the link as the current page
+     * with `aria-current="page"`, because `aria-selected` is not a state a list item can have; on another row it
+     * stays `aria-selected`.
+     */
     selected?: boolean;
     /** Compact row. */
     dense?: boolean;
     /** Render a bottom divider. */
     divider?: boolean;
     startAdornment?: React.ReactNode;
+    /**
+     * Trailing content. On a link row (with `href`) it sits beside the link, not inside it, so it can hold a control
+     * (a pin button, a toggle) without nesting it in the `<a>`; a click on it does not reach `onClick`.
+     */
     endAdornment?: React.ReactNode;
+    /**
+     * Makes the row a link: the `startAdornment` and the children sit in an `<a href>` that fills the row, so it can be
+     * focused with Tab, opened with middle click or copied. Keep the `startAdornment` non-interactive; a control
+     * belongs in the `endAdornment`. A disabled row has no `href`. A router takes the
+     * plain click in `onClick` with `event.preventDefault()`, and leaves a modified one (Ctrl, Meta, Shift,
+     * Alt, or a button other than the main one) to the browser, as a router's `Link` does.
+     */
+    href?: string;
+    /**
+     * Where the link (with `href`) opens. By default `"_blank"`: a new tab, as for `Button`. Pass `null` for an
+     * internal link: the `target` attribute is left out and the link opens in place. An empty string does the same; any other
+     * string is used as is.
+     */
+    target?: string | null;
+    /**
+     * The `rel` of the link (with `href`). By default `"noreferrer"` for a link that opens another tab or window,
+     * and none for one that opens in place. Your own value replaces the default, so add `noreferrer` yourself
+     * if you still want it; an empty string drops the attribute.
+     */
+    rel?: string;
+    /**
+     * Click handler of the row. With an `href` it runs for a click on the link (not on the `endAdornment`), before the
+     * browser follows it, so `event.preventDefault()` cancels the navigation; the row then is not a Tab stop of its
+     * own, the link is.
+     */
     onClick?: React.MouseEventHandler<HTMLLIElement>;
 }
 export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & {

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

@@ -1,37 +1,60 @@
-import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import c from "clsx";
-const N = b(function({ className: r, children: _, disabled: s, selected: m, dense: d, divider: n, startAdornment: l, endAdornment: o, onClick: t }, w) {
-  const a = !!t && !s;
-  return /* @__PURE__ */ f(
+import { jsx as n, jsxs as a, Fragment as w } from "react/jsx-runtime";
+import { forwardRef as R, useRef as y } from "react";
+import I from "clsx";
+import { resolveLinkRel as j, resolveLinkTarget as D } from "../../../utils/linkAttrs.js";
+const A = R(function({ className: p, children: b, disabled: i, selected: r, dense: h, divider: u, startAdornment: g, endAdornment: k, href: m, target: N, rel: x, onClick: t }, L) {
+  const s = !!m, l = !!t && !i && !s, _ = D(N), o = y(null), d = /* @__PURE__ */ n("span", { className: "smwb-list__item__start", children: g }), c = /* @__PURE__ */ n("span", { className: "smwb-list__item__main", children: b }), f = /* @__PURE__ */ n("span", { className: "smwb-list__item__end", children: k });
+  return /* @__PURE__ */ n(
     "li",
     {
-      ref: w,
+      ref: L,
       role: "listitem",
-      tabIndex: a ? 0 : void 0,
-      "aria-disabled": s || void 0,
-      "aria-selected": m || void 0,
-      onClick: s ? void 0 : t,
-      onKeyDown: a ? (e) => {
+      tabIndex: l ? 0 : void 0,
+      "aria-disabled": i || void 0,
+      "aria-selected": !s && r || void 0,
+      onClick: i || !t ? void 0 : s ? (e) => {
+        var v;
+        (v = o.current) != null && v.contains(e.target) && t(e);
+      } : t,
+      onKeyDown: l ? (e) => {
         (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t == null || t(e));
       } : void 0,
-      className: c("smwb-list__item", r, {
-        "smwb-disabled": s,
-        "smwb-selected": m,
-        "smwb-list__item_dense": d,
-        "smwb-list__item_divider": n
+      className: I("smwb-list__item", p, {
+        "smwb-disabled": i,
+        "smwb-selected": r,
+        "smwb-list__item_link": s,
+        "smwb-list__item_dense": h,
+        "smwb-list__item_divider": u
       }),
       "data-testid": "list-item",
-      children: [
-        /* @__PURE__ */ i("span", { className: "smwb-list__item__start", children: l }),
-        /* @__PURE__ */ i("span", { className: "smwb-list__item__main", children: _ }),
-        /* @__PURE__ */ i("span", { className: "smwb-list__item__end", children: o })
-      ]
+      children: s ? /* @__PURE__ */ a(w, { children: [
+        /* @__PURE__ */ a(
+          "a",
+          {
+            ref: o,
+            className: "smwb-list__item__link",
+            "data-testid": "list-item-link",
+            "aria-current": r ? "page" : void 0,
+            href: i ? void 0 : m,
+            target: _,
+            rel: j(x, _),
+            children: [
+              d,
+              c
+            ]
+          }
+        ),
+        f
+      ] }) : /* @__PURE__ */ a(w, { children: [
+        d,
+        c,
+        f
+      ] })
     }
   );
 });
 export {
-  N as ListItem,
-  N as default
+  A as ListItem,
+  A as default
 };
 //# sourceMappingURL=listItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"listItem.js","sources":["../../../../src/components/dataDisplay/list/listItem.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport interface ListItemProps {\n  disabled?: boolean;\n  className?: string;\n  selected?: boolean;\n  /** Compact row. */\n  dense?: boolean;\n  /** Render a bottom divider. */\n  divider?: boolean;\n  startAdornment?: React.ReactNode;\n  endAdornment?: React.ReactNode;\n  onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nexport const ListItem = forwardRef<HTMLLIElement, PropsWithChildren<ListItemProps>>(function ListItem(\n  { className, children, disabled, selected, dense, divider, startAdornment, endAdornment, onClick },\n  ref\n) {\n  const interactive = !!onClick && !disabled;\n\n  return (\n    <li\n      ref={ref}\n      role=\"listitem\"\n      tabIndex={interactive ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      aria-selected={selected || undefined}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick?.(e as unknown as React.MouseEvent<HTMLLIElement>);\n              }\n            }\n          : undefined\n      }\n      className={cn(\"smwb-list__item\", className, {\n        \"smwb-disabled\": disabled,\n        \"smwb-selected\": selected,\n        \"smwb-list__item_dense\": dense,\n        \"smwb-list__item_divider\": divider,\n      })}\n      data-testid=\"list-item\"\n    >\n      <span className=\"smwb-list__item__start\">{startAdornment}</span>\n      <span className=\"smwb-list__item__main\">{children}</span>\n      <span className=\"smwb-list__item__end\">{endAdornment}</span>\n    </li>\n  );\n});\n\nexport default ListItem;\n"],"names":["ListItem","forwardRef","className","children","disabled","selected","dense","divider","startAdornment","endAdornment","onClick","ref","interactive","jsxs","cn","jsx"],"mappings":";;;AAgBO,MAAMA,IAAWC,EAA4D,SAClF,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,SAAAC,GAAS,gBAAAC,GAAgB,cAAAC,GAAc,SAAAC,EAAA,GACzFC,GACA;AACA,QAAMC,IAAc,CAAC,CAACF,KAAW,CAACN;AAElC,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,MAAK;AAAA,MACL,UAAUC,IAAc,IAAI;AAAA,MAC5B,iBAAeR,KAAY;AAAA,MAC3B,iBAAeC,KAAY;AAAA,MAC3B,SAASD,IAAW,SAAYM;AAAA,MAChC,WACEE,IACI,CAAC,MAAM;AACL,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAA,GACFF,KAAA,QAAAA,EAAU;AAAA,MAEd,IACA;AAAA,MAEN,WAAWI,EAAG,mBAAmBZ,GAAW;AAAA,QAC1C,iBAAiBE;AAAA,QACjB,iBAAiBC;AAAA,QACjB,yBAAyBC;AAAA,QACzB,2BAA2BC;AAAA,MAAA,CAC5B;AAAA,MACD,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAP,GAAe;AAAA,QACzD,gBAAAO,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAZ,EAAA,CAAS;AAAA,QAClD,gBAAAY,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAN,EAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3D,CAAC;"}
+{"version":3,"file":"listItem.js","sources":["../../../../src/components/dataDisplay/list/listItem.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useRef } from \"react\";\nimport cn from \"clsx\";\nimport { resolveLinkRel, resolveLinkTarget } from \"../../../utils/linkAttrs\";\n\nexport interface ListItemProps {\n  disabled?: boolean;\n  className?: string;\n  /**\n   * Paints the row as the current one. On a link row (with `href`) it also marks the link as the current page\n   * with `aria-current=\"page\"`, because `aria-selected` is not a state a list item can have; on another row it\n   * stays `aria-selected`.\n   */\n  selected?: boolean;\n  /** Compact row. */\n  dense?: boolean;\n  /** Render a bottom divider. */\n  divider?: boolean;\n  startAdornment?: React.ReactNode;\n  /**\n   * Trailing content. On a link row (with `href`) it sits beside the link, not inside it, so it can hold a control\n   * (a pin button, a toggle) without nesting it in the `<a>`; a click on it does not reach `onClick`.\n   */\n  endAdornment?: React.ReactNode;\n  /**\n   * Makes the row a link: the `startAdornment` and the children sit in an `<a href>` that fills the row, so it can be\n   * focused with Tab, opened with middle click or copied. Keep the `startAdornment` non-interactive; a control\n   * belongs in the `endAdornment`. A disabled row has no `href`. A router takes the\n   * plain click in `onClick` with `event.preventDefault()`, and leaves a modified one (Ctrl, Meta, Shift,\n   * Alt, or a button other than the main one) to the browser, as a router's `Link` does.\n   */\n  href?: string;\n  /**\n   * Where the link (with `href`) opens. By default `\"_blank\"`: a new tab, as for `Button`. Pass `null` for an\n   * internal link: the `target` attribute is left out and the link opens in place. An empty string does the same; any other\n   * string is used as is.\n   */\n  target?: string | null;\n  /**\n   * The `rel` of the link (with `href`). By default `\"noreferrer\"` for a link that opens another tab or window,\n   * and none for one that opens in place. Your own value replaces the default, so add `noreferrer` yourself\n   * if you still want it; an empty string drops the attribute.\n   */\n  rel?: string;\n  /**\n   * Click handler of the row. With an `href` it runs for a click on the link (not on the `endAdornment`), before the\n   * browser follows it, so `event.preventDefault()` cancels the navigation; the row then is not a Tab stop of its\n   * own, the link is.\n   */\n  onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nexport const ListItem = forwardRef<HTMLLIElement, PropsWithChildren<ListItemProps>>(function ListItem(\n  { className, children, disabled, selected, dense, divider, startAdornment, endAdornment, href, target, rel, onClick },\n  ref\n) {\n  const link = !!href;\n  // A link row is focused through its anchor, which Enter follows by itself.\n  const interactive = !!onClick && !disabled && !link;\n  const linkTarget = resolveLinkTarget(target);\n  const linkRef = useRef<HTMLAnchorElement>(null);\n  const start = <span className=\"smwb-list__item__start\">{startAdornment}</span>;\n  const main = <span className=\"smwb-list__item__main\">{children}</span>;\n  const end = <span className=\"smwb-list__item__end\">{endAdornment}</span>;\n  const handleClick: React.MouseEventHandler<HTMLLIElement> | undefined =\n    disabled || !onClick\n      ? undefined\n      : link\n        ? (e) => {\n            // The end adornment is beside the link, and its own clicks are not the row's.\n            if (linkRef.current?.contains(e.target as Node)) onClick(e);\n          }\n        : onClick;\n\n  return (\n    <li\n      ref={ref}\n      role=\"listitem\"\n      tabIndex={interactive ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      aria-selected={(!link && selected) || undefined}\n      onClick={handleClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick?.(e as unknown as React.MouseEvent<HTMLLIElement>);\n              }\n            }\n          : undefined\n      }\n      className={cn(\"smwb-list__item\", className, {\n        \"smwb-disabled\": disabled,\n        \"smwb-selected\": selected,\n        \"smwb-list__item_link\": link,\n        \"smwb-list__item_dense\": dense,\n        \"smwb-list__item_divider\": divider,\n      })}\n      data-testid=\"list-item\"\n    >\n      {link ? (\n        <>\n          <a\n            ref={linkRef}\n            className=\"smwb-list__item__link\"\n            data-testid=\"list-item-link\"\n            aria-current={selected ? \"page\" : undefined}\n            // A disabled link has no href, so it is no link to follow or to focus.\n            href={disabled ? undefined : href}\n            target={linkTarget}\n            rel={resolveLinkRel(rel, linkTarget)}\n          >\n            {start}\n            {main}\n          </a>\n          {end}\n        </>\n      ) : (\n        <>\n          {start}\n          {main}\n          {end}\n        </>\n      )}\n    </li>\n  );\n});\n\nexport default ListItem;\n"],"names":["ListItem","forwardRef","className","children","disabled","selected","dense","divider","startAdornment","endAdornment","href","target","rel","onClick","ref","link","interactive","linkTarget","resolveLinkTarget","linkRef","useRef","start","jsx","main","end","_a","cn","jsxs","Fragment","resolveLinkRel"],"mappings":";;;;AAmDO,MAAMA,IAAWC,EAA4D,SAClF,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,SAAAC,GAAS,gBAAAC,GAAgB,cAAAC,GAAc,MAAAC,GAAM,QAAAC,GAAQ,KAAAC,GAAK,SAAAC,EAAA,GAC5GC,GACA;AACA,QAAMC,IAAO,CAAC,CAACL,GAETM,IAAc,CAAC,CAACH,KAAW,CAACT,KAAY,CAACW,GACzCE,IAAaC,EAAkBP,CAAM,GACrCQ,IAAUC,EAA0B,IAAI,GACxCC,IAAQ,gBAAAC,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAd,GAAe,GACjEe,IAAO,gBAAAD,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAnB,GAAS,GACzDqB,IAAM,gBAAAF,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAb,GAAa;AAWjE,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,MAAK;AAAA,MACL,UAAUE,IAAc,IAAI;AAAA,MAC5B,iBAAeZ,KAAY;AAAA,MAC3B,iBAAgB,CAACW,KAAQV,KAAa;AAAA,MACtC,SAhBFD,KAAY,CAACS,IACT,SACAE,IACE,CAAC,MAAM;;AAEL,SAAIU,IAAAN,EAAQ,YAAR,QAAAM,EAAiB,SAAS,EAAE,aAAyB,CAAC;AAAA,MAC5D,IACAZ;AAAA,MAUJ,WACEG,IACI,CAAC,MAAM;AACL,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAA,GACFH,KAAA,QAAAA,EAAU;AAAA,MAEd,IACA;AAAA,MAEN,WAAWa,EAAG,mBAAmBxB,GAAW;AAAA,QAC1C,iBAAiBE;AAAA,QACjB,iBAAiBC;AAAA,QACjB,wBAAwBU;AAAA,QACxB,yBAAyBT;AAAA,QACzB,2BAA2BC;AAAA,MAAA,CAC5B;AAAA,MACD,eAAY;AAAA,MAEX,cACC,gBAAAoB,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKR;AAAA,YACL,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,gBAAcd,IAAW,SAAS;AAAA,YAElC,MAAMD,IAAW,SAAYM;AAAA,YAC7B,QAAQO;AAAA,YACR,KAAKY,EAAejB,GAAKK,CAAU;AAAA,YAElC,UAAA;AAAA,cAAAI;AAAA,cACAE;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFC;AAAA,MAAA,EAAA,CACH,IAEA,gBAAAG,EAAAC,GAAA,EACG,UAAA;AAAA,QAAAP;AAAA,QACAE;AAAA,QACAC;AAAA,MAAA,EAAA,CACH;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/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;"}

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

@@ -0,0 +1,2 @@
+export { Swimlanes, SWIMLANES_DEFAULT_ROW_HEIGHT, SWIMLANES_DEFAULT_HEIGHT, SWIMLANES_DEFAULT_OVERSCAN, } from "./swimlanes";
+export type { SwimlanesProps, SwimlanesLane } from "./swimlanes";