@smwb/ui-react 2.7.0 → 2.9.0

package/dist/components/base/icon/icon.js

@@ -1,62 +1,74 @@
-import { jsx as l } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/icon/icon.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                   */
-import { forwardRef as L, useSyncExternalStore as C } from "react";
-import N from "clsx";
-import { getIcon as O } from "../../../icons/registry.js";
-import { getIconConfig as R } from "../../../icons/config.js";
-import { subscribeIcons as j } from "../../../icons/store.js";
-import { useIconSource as B } from "./iconProvider.js";
-const E = ["primary", "secondary", "error", "success", "warning", "info", "disabled"], y = /* @__PURE__ */ new Set();
-function T(r) {
-  !R().warnOnMissing || y.has(r) || (y.add(r), console.warn(
+import { forwardRef as N, useSyncExternalStore as O } from "react";
+import R from "clsx";
+import { getIcon as j } from "../../../icons/registry.js";
+import { getIconConfig as B } from "../../../icons/config.js";
+import { subscribeIcons as E } from "../../../icons/store.js";
+import { useIconSource as T } from "./iconProvider.js";
+const z = ["primary", "secondary", "error", "success", "warning", "info", "disabled"], S = /* @__PURE__ */ new Set();
+function A(r) {
+  !B().warnOnMissing || S.has(r) || (S.add(r), console.warn(
     `[smwb] Icon "${r}" is not registered. Register it (import { ${r} } from "@smwb/ui-react/icons") or use source="auto" to fall back to Material Symbols.`
   ));
 }
-const q = L(function({ className: S, weight: a = 400, fill: v = 0, size: n = 20, grade: I = 100, name: o, color: e = "inherit", title: i, source: _, ...u }, x) {
-  var w, b;
-  const m = B(_), d = typeof o == "string" ? o : null, g = () => {
-    var h;
-    return d === null ? null : (h = O(d)) != null ? h : null;
-  }, M = C(j, g, g), s = typeof o == "object" ? o : M, p = typeof o == "string" ? o : o.name, t = m === "google" ? "google" : s ? "smwb" : m === "smwb" ? "missing" : "google";
-  t === "missing" && T(p);
-  const f = i === void 0, $ = e && E.includes(e) ? `smwb-icon_color-${e}` : null, c = typeof n == "number" ? `${n}px` : n, k = Math.round(Math.min(3, Math.max(1, a / 200)) * 100) / 100;
-  return /* @__PURE__ */ l(
+const P = N(function({
+  className: I,
+  weight: d = 400,
+  fill: _ = 0,
+  size: n = 20,
+  grade: v = 100,
+  name: o,
+  color: i = "inherit",
+  title: a,
+  source: x,
+  "data-testid": M = "icon",
+  ...t
+}, $) {
+  var w, h, y;
+  const u = T(x), m = typeof o == "string" ? o : null, g = () => {
+    var p;
+    return m === null ? null : (p = j(m)) != null ? p : null;
+  }, k = O(E, g, g), e = typeof o == "object" ? o : k, f = typeof o == "string" ? o : o.name, s = u === "google" ? "google" : e ? "smwb" : u === "smwb" ? "missing" : "google";
+  s === "missing" && A(f);
+  const b = !(a || t["aria-label"] || t["aria-labelledby"]), L = i && z.includes(i) ? `smwb-icon_color-${i}` : null, l = typeof n == "number" ? `${n}px` : n, C = Math.round(Math.min(3, Math.max(1, d / 200)) * 100) / 100;
+  return /* @__PURE__ */ c(
     "span",
     {
-      ...u,
-      ref: x,
-      "data-testid": "icon",
-      "data-icon-source": t,
-      role: f ? void 0 : "img",
-      "aria-hidden": f ? !0 : void 0,
-      "aria-label": i,
-      title: i,
+      ...t,
+      ref: $,
+      "data-testid": M,
+      "data-icon-source": s,
+      role: (w = t.role) != null ? w : b ? void 0 : "img",
+      "aria-hidden": b ? !0 : t["aria-hidden"],
+      "aria-label": a || t["aria-label"],
+      title: a,
       style: {
-        ...u.style,
-        ...t === "google" ? { fontVariationSettings: `'FILL' ${v}, 'wght' ${a}, 'GRAD' ${I}, 'opsz' 48` } : null
+        ...t.style,
+        ...s === "google" ? { fontVariationSettings: `'FILL' ${_}, 'wght' ${d}, 'GRAD' ${v}, 'opsz' 48` } : null
       },
-      className: N("smwb-icon__wrapper", $, S),
-      children: t === "google" ? /* @__PURE__ */ l("span", { className: "material-symbols-outlined", style: { fontSize: c }, children: p }) : /* @__PURE__ */ l(
+      className: R("smwb-icon__wrapper", L, I),
+      children: s === "google" ? /* @__PURE__ */ c("span", { className: "material-symbols-outlined", style: { fontSize: l }, children: f }) : /* @__PURE__ */ c(
         "svg",
         {
           className: "smwb-icon__svg",
-          viewBox: (w = s == null ? void 0 : s.viewBox) != null ? w : "0 0 24 24",
-          style: { width: c, height: c },
+          viewBox: (h = e == null ? void 0 : e.viewBox) != null ? h : "0 0 24 24",
+          style: { width: l, height: l },
           fill: "none",
           stroke: "currentColor",
-          strokeWidth: k,
+          strokeWidth: C,
           strokeLinecap: "round",
           strokeLinejoin: "round",
           "aria-hidden": "true",
-          dangerouslySetInnerHTML: { __html: (b = s == null ? void 0 : s.body) != null ? b : "" }
+          dangerouslySetInnerHTML: { __html: (y = e == null ? void 0 : e.body) != null ? y : "" }
         }
       )
     }
   );
 });
 export {
-  q as Icon,
-  q as default
+  P as Icon,
+  P as default
 };
 //# sourceMappingURL=icon.js.map

package/dist/components/base/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useSyncExternalStore } from \"react\";\nimport cn from \"clsx\";\nimport { getIcon } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport { subscribeIcons } from \"../../../icons/store\";\nimport type { IconDefinition, IconSource } from \"../../../icons/types\";\nimport { useIconSource } from \"./iconProvider\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nconst COLOR_TOKENS = [\"primary\", \"secondary\", \"error\", \"success\", \"warning\", \"info\", \"disabled\"];\n\nconst warned = new Set<string>();\n\nfunction warnMissing(name: string): void {\n  if (!getIconConfig().warnOnMissing || warned.has(name)) return;\n  warned.add(name);\n  // eslint-disable-next-line no-console -- a missing icon is silent otherwise\n  console.warn(\n    `[smwb] Icon \"${name}\" is not registered. Register it (import { ${name} } from \"@smwb/ui-react/icons\") ` +\n      `or use source=\"auto\" to fall back to Material Symbols.`\n  );\n}\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name — the Google Material Symbols name, e.g. `\"arrow_right_alt\"`.\n   * Lookup is forgiving: `arrowRightAlt` and `arrow-right-alt` resolve too, as\n   * do an icon's aliases.\n   *\n   * An {@link IconDefinition} may be passed instead, which skips the registry\n   * entirely and is the most bundle-friendly form:\n   *\n   * ```tsx\n   * import { arrowRightAlt } from \"@smwb/ui-react/icons\";\n   * <Icon name={arrowRightAlt} />\n   * ```\n   */\n  name: string | IconDefinition;\n  className?: string;\n  /**\n   * Material Symbols weight axis (100-700). For the smwb SVG set it maps to the\n   * stroke width: 400 → 2px, 700 → 3px, 100 → 1px.\n   */\n  weight?: number;\n  /** Material Symbols FILL axis. Not used by the smwb SVG set (it is a contour set). */\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\n  /** Material Symbols GRAD axis. Not used by the smwb SVG set. */\n  grade?: number;\n  /**\n   * Semantic color token; `inherit` (default) keeps the text color.\n   * Any string is accepted for backward compatibility, but only known\n   * {@link IconColor} tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name. When provided the icon is exposed as\n   * `role=\"img\"`; otherwise it is `aria-hidden` (decorative).\n   */\n  title?: string;\n  /** Overrides the icon source for this icon only. See {@link IconSource}. */\n  source?: IconSource;\n}\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n  { className, weight = 400, fill = 0, size = 20, grade = 100, name, color = \"inherit\", title, source, ...props },\n  ref\n) {\n  const resolvedSource = useIconSource(source);\n  const lookup = typeof name === \"string\" ? name : null;\n  // Subscribing keeps late registrations (lazy chunks, Storybook HMR) from\n  // leaving a mounted icon blank. getIcon returns the same object for the same\n  // registration, so the snapshot is stable.\n  const getSnapshot = () => (lookup === null ? null : (getIcon(lookup) ?? null));\n  const registered = useSyncExternalStore(subscribeIcons, getSnapshot, getSnapshot);\n  const definition = typeof name === \"object\" ? name : registered;\n  const glyph = typeof name === \"string\" ? name : name.name;\n\n  const mode =\n    resolvedSource === \"google\" ? \"google\" : definition ? \"smwb\" : resolvedSource === \"smwb\" ? \"missing\" : \"google\";\n  if (mode === \"missing\") warnMissing(glyph);\n\n  const decorative = title === undefined;\n  const colorClass = color && COLOR_TOKENS.includes(color) ? `smwb-icon_color-${color}` : null;\n  const cssSize = typeof size === \"number\" ? `${size}px` : size;\n  const strokeWidth = Math.round(Math.min(3, Math.max(1, weight / 200)) * 100) / 100;\n\n  return (\n    <span\n      {...props}\n      ref={ref}\n      data-testid=\"icon\"\n      data-icon-source={mode}\n      role={decorative ? undefined : \"img\"}\n      aria-hidden={decorative ? true : undefined}\n      aria-label={title}\n      title={title}\n      style={{\n        ...props.style,\n        ...(mode === \"google\"\n          ? { fontVariationSettings: `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' 48` }\n          : null),\n      }}\n      className={cn(\"smwb-icon__wrapper\", colorClass, className)}\n    >\n      {mode === \"google\" ? (\n        <span className=\"material-symbols-outlined\" style={{ fontSize: cssSize }}>\n          {glyph}\n        </span>\n      ) : (\n        <svg\n          className=\"smwb-icon__svg\"\n          viewBox={definition?.viewBox ?? \"0 0 24 24\"}\n          style={{ width: cssSize, height: cssSize }}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n          dangerouslySetInnerHTML={{ __html: definition?.body ?? \"\" }}\n        />\n      )}\n    </span>\n  );\n});\n\nexport default Icon;\n"],"names":["COLOR_TOKENS","warned","warnMissing","name","getIconConfig","Icon","forwardRef","className","weight","fill","size","grade","color","title","source","props","ref","resolvedSource","useIconSource","lookup","getSnapshot","_a","getIcon","registered","useSyncExternalStore","subscribeIcons","definition","glyph","mode","decorative","colorClass","cssSize","strokeWidth","jsx","cn","_b"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAe,CAAC,WAAW,aAAa,SAAS,WAAW,WAAW,QAAQ,UAAU,GAEzFC,wBAAa,IAAA;AAEnB,SAASC,EAAYC,GAAoB;AACvC,EAAI,CAACC,EAAA,EAAgB,iBAAiBH,EAAO,IAAIE,CAAI,MACrDF,EAAO,IAAIE,CAAI,GAEf,QAAQ;AAAA,IACN,gBAAgBA,CAAI,8CAA8CA,CAAI;AAAA,EAAA;AAG1E;AA4CO,MAAME,IAAOC,EAAuC,SACzD,EAAE,WAAAC,GAAW,QAAAC,IAAS,KAAK,MAAAC,IAAO,GAAG,MAAAC,IAAO,IAAI,OAAAC,IAAQ,KAAK,MAAAR,GAAM,OAAAS,IAAQ,WAAW,OAAAC,GAAO,QAAAC,GAAQ,GAAGC,EAAA,GACxGC,GACA;;AACA,QAAMC,IAAiBC,EAAcJ,CAAM,GACrCK,IAAS,OAAOhB,KAAS,WAAWA,IAAO,MAI3CiB,IAAc,MAAA;;AAAO,WAAAD,MAAW,OAAO,QAAQE,IAAAC,EAAQH,CAAM,MAAd,OAAAE,IAAmB;AAAA,KAClEE,IAAaC,EAAqBC,GAAgBL,GAAaA,CAAW,GAC1EM,IAAa,OAAOvB,KAAS,WAAWA,IAAOoB,GAC/CI,IAAQ,OAAOxB,KAAS,WAAWA,IAAOA,EAAK,MAE/CyB,IACJX,MAAmB,WAAW,WAAWS,IAAa,SAAST,MAAmB,SAAS,YAAY;AACzG,EAAIW,MAAS,aAAW1B,EAAYyB,CAAK;AAEzC,QAAME,IAAahB,MAAU,QACvBiB,IAAalB,KAASZ,EAAa,SAASY,CAAK,IAAI,mBAAmBA,CAAK,KAAK,MAClFmB,IAAU,OAAOrB,KAAS,WAAW,GAAGA,CAAI,OAAOA,GACnDsB,IAAc,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGxB,IAAS,GAAG,CAAC,IAAI,GAAG,IAAI;AAE/E,SACE,gBAAAyB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGlB;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,oBAAkBY;AAAA,MAClB,MAAMC,IAAa,SAAY;AAAA,MAC/B,eAAaA,IAAa,KAAO;AAAA,MACjC,cAAYhB;AAAA,MACZ,OAAAA;AAAA,MACA,OAAO;AAAA,QACL,GAAGE,EAAM;AAAA,QACT,GAAIa,MAAS,WACT,EAAE,uBAAuB,UAAUnB,CAAI,YAAYD,CAAM,YAAYG,CAAK,cAAA,IAC1E;AAAA,MAAA;AAAA,MAEN,WAAWuB,EAAG,sBAAsBJ,GAAYvB,CAAS;AAAA,MAExD,UAAAqB,MAAS,WACR,gBAAAK,EAAC,QAAA,EAAK,WAAU,6BAA4B,OAAO,EAAE,UAAUF,EAAA,GAC5D,UAAAJ,EAAA,CACH,IAEA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,UAASZ,IAAAK,KAAA,gBAAAA,EAAY,YAAZ,OAAAL,IAAuB;AAAA,UAChC,OAAO,EAAE,OAAOU,GAAS,QAAQA,EAAA;AAAA,UACjC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAAC;AAAA,UACA,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,eAAY;AAAA,UACZ,yBAAyB,EAAE,SAAQG,IAAAT,KAAA,gBAAAA,EAAY,SAAZ,OAAAS,IAAoB,GAAA;AAAA,QAAG;AAAA,MAAA;AAAA,IAC5D;AAAA,EAAA;AAIR,CAAC;"}
+{"version":3,"file":"icon.js","sources":["../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useSyncExternalStore } from \"react\";\nimport cn from \"clsx\";\nimport { getIcon } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport { subscribeIcons } from \"../../../icons/store\";\nimport type { IconDefinition, IconSource } from \"../../../icons/types\";\nimport { useIconSource } from \"./iconProvider\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nconst COLOR_TOKENS = [\"primary\", \"secondary\", \"error\", \"success\", \"warning\", \"info\", \"disabled\"];\n\nconst warned = new Set<string>();\n\nfunction warnMissing(name: string): void {\n  if (!getIconConfig().warnOnMissing || warned.has(name)) return;\n  warned.add(name);\n  // eslint-disable-next-line no-console -- a missing icon is silent otherwise\n  console.warn(\n    `[smwb] Icon \"${name}\" is not registered. Register it (import { ${name} } from \"@smwb/ui-react/icons\") ` +\n      `or use source=\"auto\" to fall back to Material Symbols.`\n  );\n}\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name — the Google Material Symbols name, e.g. `\"arrow_right_alt\"`.\n   * Lookup is forgiving: `arrowRightAlt` and `arrow-right-alt` resolve too, as\n   * do an icon's aliases.\n   *\n   * An {@link IconDefinition} may be passed instead, which skips the registry\n   * entirely and is the most bundle-friendly form:\n   *\n   * ```tsx\n   * import { arrowRightAlt } from \"@smwb/ui-react/icons\";\n   * <Icon name={arrowRightAlt} />\n   * ```\n   */\n  name: string | IconDefinition;\n  className?: string;\n  /**\n   * Material Symbols weight axis (100-700). For the smwb SVG set it maps to the\n   * stroke width: 400 → 2px, 700 → 3px, 100 → 1px.\n   */\n  weight?: number;\n  /** Material Symbols FILL axis. Not used by the smwb SVG set (it is a contour set). */\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\n  /** Material Symbols GRAD axis. Not used by the smwb SVG set. */\n  grade?: number;\n  /**\n   * Semantic color token; `inherit` (default) keeps the text color.\n   * Any string is accepted for backward compatibility, but only known\n   * {@link IconColor} tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name, also shown as a tooltip. A non-empty `title`,\n   * `aria-label` or `aria-labelledby` names the icon: it is exposed as\n   * `role=\"img\"`, or with the `role` you pass. Without any of them the icon is\n   * decorative and `aria-hidden`.\n   */\n  title?: string;\n  /** Overrides the icon source for this icon only. See {@link IconSource}. */\n  source?: IconSource;\n  /** Test id of the root `<span>`; `icon` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n  {\n    className,\n    weight = 400,\n    fill = 0,\n    size = 20,\n    grade = 100,\n    name,\n    color = \"inherit\",\n    title,\n    source,\n    \"data-testid\": dataTestId = \"icon\",\n    ...props\n  },\n  ref\n) {\n  const resolvedSource = useIconSource(source);\n  const lookup = typeof name === \"string\" ? name : null;\n  // Subscribing keeps late registrations (lazy chunks, Storybook HMR) from\n  // leaving a mounted icon blank. getIcon returns the same object for the same\n  // registration, so the snapshot is stable.\n  const getSnapshot = () => (lookup === null ? null : (getIcon(lookup) ?? null));\n  const registered = useSyncExternalStore(subscribeIcons, getSnapshot, getSnapshot);\n  const definition = typeof name === \"object\" ? name : registered;\n  const glyph = typeof name === \"string\" ? name : name.name;\n\n  const mode =\n    resolvedSource === \"google\" ? \"google\" : definition ? \"smwb\" : resolvedSource === \"smwb\" ? \"missing\" : \"google\";\n  if (mode === \"missing\") warnMissing(glyph);\n\n  const decorative = !(title || props[\"aria-label\"] || props[\"aria-labelledby\"]);\n  const colorClass = color && COLOR_TOKENS.includes(color) ? `smwb-icon_color-${color}` : null;\n  const cssSize = typeof size === \"number\" ? `${size}px` : size;\n  const strokeWidth = Math.round(Math.min(3, Math.max(1, weight / 200)) * 100) / 100;\n\n  return (\n    <span\n      {...props}\n      ref={ref}\n      data-testid={dataTestId}\n      data-icon-source={mode}\n      // An unnamed icon is hidden over the caller's aria-hidden. A named one is\n      // an image unless the caller gives it a role, and a title names it over\n      // the caller's aria-label.\n      role={props.role ?? (decorative ? undefined : \"img\")}\n      aria-hidden={decorative ? true : props[\"aria-hidden\"]}\n      aria-label={title || props[\"aria-label\"]}\n      title={title}\n      style={{\n        ...props.style,\n        ...(mode === \"google\"\n          ? { fontVariationSettings: `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' 48` }\n          : null),\n      }}\n      className={cn(\"smwb-icon__wrapper\", colorClass, className)}\n    >\n      {mode === \"google\" ? (\n        <span className=\"material-symbols-outlined\" style={{ fontSize: cssSize }}>\n          {glyph}\n        </span>\n      ) : (\n        <svg\n          className=\"smwb-icon__svg\"\n          viewBox={definition?.viewBox ?? \"0 0 24 24\"}\n          style={{ width: cssSize, height: cssSize }}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n          dangerouslySetInnerHTML={{ __html: definition?.body ?? \"\" }}\n        />\n      )}\n    </span>\n  );\n});\n\nexport default Icon;\n"],"names":["COLOR_TOKENS","warned","warnMissing","name","getIconConfig","Icon","forwardRef","className","weight","fill","size","grade","color","title","source","dataTestId","props","ref","resolvedSource","useIconSource","lookup","getSnapshot","_a","getIcon","registered","useSyncExternalStore","subscribeIcons","definition","glyph","mode","decorative","colorClass","cssSize","strokeWidth","jsx","cn","_b","_c"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAe,CAAC,WAAW,aAAa,SAAS,WAAW,WAAW,QAAQ,UAAU,GAEzFC,wBAAa,IAAA;AAEnB,SAASC,EAAYC,GAAoB;AACvC,EAAI,CAACC,EAAA,EAAgB,iBAAiBH,EAAO,IAAIE,CAAI,MACrDF,EAAO,IAAIE,CAAI,GAEf,QAAQ;AAAA,IACN,gBAAgBA,CAAI,8CAA8CA,CAAI;AAAA,EAAA;AAG1E;AAgDO,MAAME,IAAOC,EAAuC,SACzD;AAAA,EACE,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,MAAAR;AAAA,EACA,OAAAS,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;;AACA,QAAMC,IAAiBC,EAAcL,CAAM,GACrCM,IAAS,OAAOjB,KAAS,WAAWA,IAAO,MAI3CkB,IAAc,MAAA;;AAAO,WAAAD,MAAW,OAAO,QAAQE,IAAAC,EAAQH,CAAM,MAAd,OAAAE,IAAmB;AAAA,KAClEE,IAAaC,EAAqBC,GAAgBL,GAAaA,CAAW,GAC1EM,IAAa,OAAOxB,KAAS,WAAWA,IAAOqB,GAC/CI,IAAQ,OAAOzB,KAAS,WAAWA,IAAOA,EAAK,MAE/C0B,IACJX,MAAmB,WAAW,WAAWS,IAAa,SAAST,MAAmB,SAAS,YAAY;AACzG,EAAIW,MAAS,aAAW3B,EAAY0B,CAAK;AAEzC,QAAME,IAAa,EAAEjB,KAASG,EAAM,YAAY,KAAKA,EAAM,iBAAiB,IACtEe,IAAanB,KAASZ,EAAa,SAASY,CAAK,IAAI,mBAAmBA,CAAK,KAAK,MAClFoB,IAAU,OAAOtB,KAAS,WAAW,GAAGA,CAAI,OAAOA,GACnDuB,IAAc,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGzB,IAAS,GAAG,CAAC,IAAI,GAAG,IAAI;AAE/E,SACE,gBAAA0B;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGlB;AAAA,MACJ,KAAAC;AAAA,MACA,eAAaF;AAAA,MACb,oBAAkBc;AAAA,MAIlB,OAAMP,IAAAN,EAAM,SAAN,OAAAM,IAAeQ,IAAa,SAAY;AAAA,MAC9C,eAAaA,IAAa,KAAOd,EAAM,aAAa;AAAA,MACpD,cAAYH,KAASG,EAAM,YAAY;AAAA,MACvC,OAAAH;AAAA,MACA,OAAO;AAAA,QACL,GAAGG,EAAM;AAAA,QACT,GAAIa,MAAS,WACT,EAAE,uBAAuB,UAAUpB,CAAI,YAAYD,CAAM,YAAYG,CAAK,cAAA,IAC1E;AAAA,MAAA;AAAA,MAEN,WAAWwB,EAAG,sBAAsBJ,GAAYxB,CAAS;AAAA,MAExD,UAAAsB,MAAS,WACR,gBAAAK,EAAC,QAAA,EAAK,WAAU,6BAA4B,OAAO,EAAE,UAAUF,EAAA,GAC5D,UAAAJ,EAAA,CACH,IAEA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,UAASE,IAAAT,KAAA,gBAAAA,EAAY,YAAZ,OAAAS,IAAuB;AAAA,UAChC,OAAO,EAAE,OAAOJ,GAAS,QAAQA,EAAA;AAAA,UACjC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAAC;AAAA,UACA,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,eAAY;AAAA,UACZ,yBAAyB,EAAE,SAAQI,IAAAV,KAAA,gBAAAA,EAAY,SAAZ,OAAAU,IAAoB,GAAA;AAAA,QAAG;AAAA,MAAA;AAAA,IAC5D;AAAA,EAAA;AAIR,CAAC;"}

package/dist/components/base/ripple/ripple.d.ts

@@ -8,12 +8,15 @@ export interface RippleClasses {
 }
 export interface RippleProps extends React.HTMLAttributes<HTMLSpanElement> {
     actionRef: React.Ref<RippleActionsRef>;
+    /** Extra classes: `ripple` for the root, `child` for each ripple. */
     classes?: RippleClasses;
     center?: boolean;
     /** Ripple lifetime in ms. */
     duration?: number;
     /** Ripple color (any CSS color). Defaults to inherited currentColor. */
     color?: string;
+    /** Test id of the root `<span>`; `ripple` unless given. */
+    "data-testid"?: string;
 }
 /**
  * ⚠️ Для правильной работы этого эффекта, установите у компонента родителя CSS: **position: relative;**

package/dist/components/base/ripple/ripple.js

@@ -1,43 +1,58 @@
 import { jsx as R } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/ripple/ripple.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                       */
-import u, { forwardRef as N } from "react";
-import b from "clsx";
-const I = N(function({ actionRef: x, className: l, classes: i, center: g, style: e, duration: f = 600, color: r, ...a }, C) {
-  const [n, c] = u.useState([]), w = u.useRef(0);
-  return u.useImperativeHandle(
-    x,
+import r, { forwardRef as S } from "react";
+import x from "clsx";
+const H = S(function({ actionRef: b, className: T, classes: e, center: u, duration: m = 600, color: l, "data-testid": y = "ripple", ...C }, E) {
+  const [n, a] = r.useState([]), f = r.useRef(0), p = r.useRef(/* @__PURE__ */ new Set());
+  return r.useEffect(() => {
+    const i = p.current;
+    return () => {
+      i.forEach((g) => clearTimeout(g)), i.clear();
+    };
+  }, []), r.useImperativeHandle(
+    b,
     () => ({
-      onRipple(o) {
-        const t = o.currentTarget.getBoundingClientRect(), d = Math.max(t.width, t.height), p = d / 2;
-        let h, m;
-        g ? (h = t.width > t.height ? 0 : t.width / 2 - p, m = t.height > t.width ? 0 : t.height / 2 - p) : (h = o.clientX - t.left - p, m = o.clientY - t.top - p), c([
+      onRipple(i) {
+        const t = i.currentTarget.getBoundingClientRect(), d = Math.max(t.width, t.height), o = d / 2;
+        let h, c;
+        u ? (h = t.width > t.height ? 0 : t.width / 2 - o, c = t.height > t.width ? 0 : t.height / 2 - o) : (h = i.clientX - t.left - o, c = i.clientY - t.top - o), a([
           ...n,
           /* @__PURE__ */ R(
             "span",
             {
-              className: b("smwb-ripple__child", i == null ? void 0 : i.child),
+              className: x("smwb-ripple__child", e == null ? void 0 : e.child),
               style: {
-                ...e,
                 left: h,
-                top: m,
+                top: c,
                 width: d,
                 height: d,
-                backgroundColor: r != null ? r : e == null ? void 0 : e.backgroundColor
-              },
-              ...a
+                backgroundColor: l
+              }
             },
-            w.current
+            f.current
           )
-        ]), w.current += 1, setTimeout(() => {
-          c((k) => k.slice(1));
-        }, f);
+        ]), f.current += 1;
+        const w = setTimeout(() => {
+          p.current.delete(w), a((N) => N.slice(1));
+        }, m);
+        p.current.add(w);
       }
     }),
-    [a, g, n, i == null ? void 0 : i.child, e, f, r]
-  ), /* @__PURE__ */ R("span", { ref: C, className: b("smwb-ripple", l, i == null ? void 0 : i.ripple), "data-testid": "ripple", "aria-hidden": "true", children: n });
+    [u, n, e == null ? void 0 : e.child, m, l]
+  ), /* @__PURE__ */ R(
+    "span",
+    {
+      ...C,
+      ref: E,
+      className: x("smwb-ripple", T, e == null ? void 0 : e.ripple),
+      "data-testid": y,
+      "aria-hidden": "true",
+      children: n
+    }
+  );
 });
 export {
-  I as Ripple
+  H as Ripple
 };
 //# sourceMappingURL=ripple.js.map

package/dist/components/base/ripple/ripple.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","sources":["../../../../src/components/base/ripple/ripple.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport cn from \"clsx\";\n\nexport interface RippleActionsRef {\n  onRipple: (event: React.MouseEvent) => void;\n}\n\nexport interface RippleClasses {\n  ripple?: string;\n  child?: string;\n}\n\nexport interface RippleProps extends React.HTMLAttributes<HTMLSpanElement> {\n  actionRef: React.Ref<RippleActionsRef>;\n  classes?: RippleClasses;\n  center?: boolean;\n  /** Ripple lifetime in ms. */\n  duration?: number;\n  /** Ripple color (any CSS color). Defaults to inherited currentColor. */\n  color?: string;\n}\n\n/**\n * ⚠️ Для правильной работы этого эффекта, установите у компонента родителя CSS: **position: relative;**\n */\n\nexport const Ripple = forwardRef<HTMLSpanElement, RippleProps>(function Ripple(\n  { actionRef, className, classes, center, style, duration = 600, color, ...rest },\n  ref\n) {\n  const [ripples, setRipples] = React.useState<React.ReactNode[]>([]);\n  const nextKey = React.useRef<number>(0);\n\n  React.useImperativeHandle(\n    actionRef,\n    () => ({\n      onRipple(event: React.MouseEvent) {\n        const target = event.currentTarget as HTMLElement;\n        const rect = target.getBoundingClientRect();\n        const diameter = Math.max(rect.width, rect.height);\n        const radius = diameter / 2;\n\n        let coordX;\n        let coordY;\n\n        if (center) {\n          coordX = rect.width > rect.height ? 0 : rect.width / 2 - radius;\n          coordY = rect.height > rect.width ? 0 : rect.height / 2 - radius;\n        } else {\n          coordX = event.clientX - rect.left - radius;\n          coordY = event.clientY - rect.top - radius;\n        }\n\n        setRipples([\n          ...ripples,\n          <span\n            key={nextKey.current}\n            className={cn(\"smwb-ripple__child\", classes?.child)}\n            style={{\n              ...style,\n              left: coordX,\n              top: coordY,\n              width: diameter,\n              height: diameter,\n              backgroundColor: color ?? style?.backgroundColor,\n            }}\n            {...rest}\n          />,\n        ]);\n\n        nextKey.current += 1;\n\n        setTimeout(() => {\n          setRipples((prevRipples) => prevRipples.slice(1));\n        }, duration);\n      },\n    }),\n    [rest, center, ripples, classes?.child, style, duration, color]\n  );\n\n  return (\n    <span ref={ref} className={cn(\"smwb-ripple\", className, classes?.ripple)} data-testid=\"ripple\" aria-hidden=\"true\">\n      {ripples}\n    </span>\n  );\n});\n"],"names":["Ripple","forwardRef","actionRef","className","classes","center","style","duration","color","rest","ref","ripples","setRipples","React","nextKey","event","rect","diameter","radius","coordX","coordY","jsx","cn","prevRipples"],"mappings":";;;;;AA4BO,MAAMA,IAASC,EAAyC,SAC7D,EAAE,WAAAC,GAAW,WAAAC,GAAW,SAAAC,GAAS,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,IAAW,KAAK,OAAAC,GAAO,GAAGC,EAAA,GAC1EC,GACA;AACA,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAA4B,CAAA,CAAE,GAC5DC,IAAUD,EAAM,OAAe,CAAC;AAEtC,SAAAA,EAAM;AAAA,IACJX;AAAA,IACA,OAAO;AAAA,MACL,SAASa,GAAyB;AAEhC,cAAMC,IADSD,EAAM,cACD,sBAAA,GACdE,IAAW,KAAK,IAAID,EAAK,OAAOA,EAAK,MAAM,GAC3CE,IAASD,IAAW;AAE1B,YAAIE,GACAC;AAEJ,QAAIf,KACFc,IAASH,EAAK,QAAQA,EAAK,SAAS,IAAIA,EAAK,QAAQ,IAAIE,GACzDE,IAASJ,EAAK,SAASA,EAAK,QAAQ,IAAIA,EAAK,SAAS,IAAIE,MAE1DC,IAASJ,EAAM,UAAUC,EAAK,OAAOE,GACrCE,IAASL,EAAM,UAAUC,EAAK,MAAME,IAGtCN,EAAW;AAAA,UACT,GAAGD;AAAA,UACH,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAWC,EAAG,sBAAsBlB,KAAA,gBAAAA,EAAS,KAAK;AAAA,cAClD,OAAO;AAAA,gBACL,GAAGE;AAAA,gBACH,MAAMa;AAAA,gBACN,KAAKC;AAAA,gBACL,OAAOH;AAAA,gBACP,QAAQA;AAAA,gBACR,iBAAiBT,KAAA,OAAAA,IAASF,KAAA,gBAAAA,EAAO;AAAA,cAAA;AAAA,cAElC,GAAGG;AAAA,YAAA;AAAA,YAVCK,EAAQ;AAAA,UAAA;AAAA,QAWf,CACD,GAEDA,EAAQ,WAAW,GAEnB,WAAW,MAAM;AACf,UAAAF,EAAW,CAACW,MAAgBA,EAAY,MAAM,CAAC,CAAC;AAAA,QAClD,GAAGhB,CAAQ;AAAA,MACb;AAAA,IAAA;AAAA,IAEF,CAACE,GAAMJ,GAAQM,GAASP,KAAA,gBAAAA,EAAS,OAAOE,GAAOC,GAAUC,CAAK;AAAA,EAAA,GAI9D,gBAAAa,EAAC,QAAA,EAAK,KAAAX,GAAU,WAAWY,EAAG,eAAenB,GAAWC,KAAA,gBAAAA,EAAS,MAAM,GAAG,eAAY,UAAS,eAAY,QACxG,UAAAO,GACH;AAEJ,CAAC;"}
+{"version":3,"file":"ripple.js","sources":["../../../../src/components/base/ripple/ripple.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport cn from \"clsx\";\n\nexport interface RippleActionsRef {\n  onRipple: (event: React.MouseEvent) => void;\n}\n\nexport interface RippleClasses {\n  ripple?: string;\n  child?: string;\n}\n\nexport interface RippleProps extends React.HTMLAttributes<HTMLSpanElement> {\n  actionRef: React.Ref<RippleActionsRef>;\n  /** Extra classes: `ripple` for the root, `child` for each ripple. */\n  classes?: RippleClasses;\n  center?: boolean;\n  /** Ripple lifetime in ms. */\n  duration?: number;\n  /** Ripple color (any CSS color). Defaults to inherited currentColor. */\n  color?: string;\n  /** Test id of the root `<span>`; `ripple` unless given. */\n  \"data-testid\"?: string;\n}\n\n/**\n * ⚠️ Для правильной работы этого эффекта, установите у компонента родителя CSS: **position: relative;**\n */\n\nexport const Ripple = forwardRef<HTMLSpanElement, RippleProps>(function Ripple(\n  { actionRef, className, classes, center, duration = 600, color, \"data-testid\": dataTestId = \"ripple\", ...rest },\n  ref\n) {\n  const [ripples, setRipples] = React.useState<React.ReactNode[]>([]);\n  const nextKey = React.useRef<number>(0);\n  // Removal timers still pending. Unmounting clears them: one left running would\n  // set state on the unmounted Ripple, and in a test that ends first it fires\n  // after jsdom's teardown, where React's setState throws \"window is not defined\".\n  const timeouts = React.useRef(new Set<ReturnType<typeof setTimeout>>());\n\n  React.useEffect(() => {\n    const pending = timeouts.current;\n    return () => {\n      pending.forEach((timeout) => clearTimeout(timeout));\n      pending.clear();\n    };\n  }, []);\n\n  React.useImperativeHandle(\n    actionRef,\n    () => ({\n      onRipple(event: React.MouseEvent) {\n        const target = event.currentTarget as HTMLElement;\n        const rect = target.getBoundingClientRect();\n        const diameter = Math.max(rect.width, rect.height);\n        const radius = diameter / 2;\n\n        let coordX;\n        let coordY;\n\n        if (center) {\n          coordX = rect.width > rect.height ? 0 : rect.width / 2 - radius;\n          coordY = rect.height > rect.width ? 0 : rect.height / 2 - radius;\n        } else {\n          coordX = event.clientX - rect.left - radius;\n          coordY = event.clientY - rect.top - radius;\n        }\n\n        setRipples([\n          ...ripples,\n          <span\n            key={nextKey.current}\n            className={cn(\"smwb-ripple__child\", classes?.child)}\n            style={{\n              left: coordX,\n              top: coordY,\n              width: diameter,\n              height: diameter,\n              backgroundColor: color,\n            }}\n          />,\n        ]);\n\n        nextKey.current += 1;\n\n        const timeout = setTimeout(() => {\n          timeouts.current.delete(timeout);\n          setRipples((prevRipples) => prevRipples.slice(1));\n        }, duration);\n        timeouts.current.add(timeout);\n      },\n    }),\n    [center, ripples, classes?.child, duration, color]\n  );\n\n  return (\n    <span\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-ripple\", className, classes?.ripple)}\n      data-testid={dataTestId}\n      aria-hidden=\"true\"\n    >\n      {ripples}\n    </span>\n  );\n});\n"],"names":["Ripple","forwardRef","actionRef","className","classes","center","duration","color","dataTestId","rest","ref","ripples","setRipples","React","nextKey","timeouts","pending","timeout","event","rect","diameter","radius","coordX","coordY","jsx","cn","prevRipples"],"mappings":";;;;;AA+BO,MAAMA,IAASC,EAAyC,SAC7D,EAAE,WAAAC,GAAW,WAAAC,GAAW,SAAAC,GAAS,QAAAC,GAAQ,UAAAC,IAAW,KAAK,OAAAC,GAAO,eAAeC,IAAa,UAAU,GAAGC,EAAA,GACzGC,GACA;AACA,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAA4B,CAAA,CAAE,GAC5DC,IAAUD,EAAM,OAAe,CAAC,GAIhCE,IAAWF,EAAM,OAAO,oBAAI,KAAoC;AAEtE,SAAAA,EAAM,UAAU,MAAM;AACpB,UAAMG,IAAUD,EAAS;AACzB,WAAO,MAAM;AACX,MAAAC,EAAQ,QAAQ,CAACC,MAAY,aAAaA,CAAO,CAAC,GAClDD,EAAQ,MAAA;AAAA,IACV;AAAA,EACF,GAAG,CAAA,CAAE,GAELH,EAAM;AAAA,IACJX;AAAA,IACA,OAAO;AAAA,MACL,SAASgB,GAAyB;AAEhC,cAAMC,IADSD,EAAM,cACD,sBAAA,GACdE,IAAW,KAAK,IAAID,EAAK,OAAOA,EAAK,MAAM,GAC3CE,IAASD,IAAW;AAE1B,YAAIE,GACAC;AAEJ,QAAIlB,KACFiB,IAASH,EAAK,QAAQA,EAAK,SAAS,IAAIA,EAAK,QAAQ,IAAIE,GACzDE,IAASJ,EAAK,SAASA,EAAK,QAAQ,IAAIA,EAAK,SAAS,IAAIE,MAE1DC,IAASJ,EAAM,UAAUC,EAAK,OAAOE,GACrCE,IAASL,EAAM,UAAUC,EAAK,MAAME,IAGtCT,EAAW;AAAA,UACT,GAAGD;AAAA,UACH,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAWC,EAAG,sBAAsBrB,KAAA,gBAAAA,EAAS,KAAK;AAAA,cAClD,OAAO;AAAA,gBACL,MAAMkB;AAAA,gBACN,KAAKC;AAAA,gBACL,OAAOH;AAAA,gBACP,QAAQA;AAAA,gBACR,iBAAiBb;AAAA,cAAA;AAAA,YACnB;AAAA,YARKO,EAAQ;AAAA,UAAA;AAAA,QASf,CACD,GAEDA,EAAQ,WAAW;AAEnB,cAAMG,IAAU,WAAW,MAAM;AAC/B,UAAAF,EAAS,QAAQ,OAAOE,CAAO,GAC/BL,EAAW,CAACc,MAAgBA,EAAY,MAAM,CAAC,CAAC;AAAA,QAClD,GAAGpB,CAAQ;AACX,QAAAS,EAAS,QAAQ,IAAIE,CAAO;AAAA,MAC9B;AAAA,IAAA;AAAA,IAEF,CAACZ,GAAQM,GAASP,KAAA,gBAAAA,EAAS,OAAOE,GAAUC,CAAK;AAAA,EAAA,GAIjD,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGf;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWe,EAAG,eAAetB,GAAWC,KAAA,gBAAAA,EAAS,MAAM;AAAA,MACvD,eAAaI;AAAA,MACb,eAAY;AAAA,MAEX,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

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

@@ -12,6 +12,8 @@ export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
     color?: string;
     /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */
     imgProps?: ImgHTMLAttributes<HTMLImageElement>;
+    /** Test id of the root `<div>`; `avatar` unless given. */
+    "data-testid"?: string;
 }
 export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & {
     children?: ReactNode | undefined;
@@ -28,6 +30,8 @@ export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
     surplusAriaLabel?: (count: number) => string;
     /** Size of the "+N" surplus chip: match the avatars in the group. */
     size?: AvatarSize | number;
+    /** Test id of the root `<div>`; `avatar-group` unless given. */
+    "data-testid"?: string;
 }
 export declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & {
     children?: ReactNode | undefined;

package/dist/components/dataDisplay/avatar/avatar.js

@@ -1,53 +1,66 @@
-import { jsx as o, jsxs as C } from "react/jsx-runtime";
+import { jsx as d, jsxs as $ } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/avatar/avatar.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                       */
-import { forwardRef as N, useState as $, Children as E, isValidElement as S } from "react";
-import h from "clsx";
-const _ = (i) => typeof i == "string", j = N(function({ className: m, src: s, alt: e, size: t = "medium", variant: u = "circular", color: l, style: d, imgProps: a, children: v, ...r }, f) {
-  const [b, c] = $(!1), n = !!s && !b, x = h(
+import { forwardRef as x, useState as E, Children as S, isValidElement as j } from "react";
+import w from "clsx";
+const N = (o) => typeof o == "string", k = x(function({
+  className: u,
+  src: l,
+  alt: e,
+  size: t = "medium",
+  variant: i = "circular",
+  color: s,
+  style: v,
+  imgProps: a,
+  children: m,
+  "data-testid": f = "avatar",
+  ...r
+}, b) {
+  const [h, c] = E(!1), n = !!l && !h, y = w(
     "smwb-avatar",
-    `smwb-avatar_${u}`,
-    _(t) ? `smwb-avatar_${t}` : null,
-    m
-  ), y = {
-    ...d,
-    ..._(t) ? {} : { width: t, height: t, fontSize: t / 2.5 },
-    ...l && !n ? { backgroundColor: l } : {}
+    `smwb-avatar_${i}`,
+    N(t) ? `smwb-avatar_${t}` : null,
+    u
+  ), A = {
+    ...v,
+    ...N(t) ? {} : { width: t, height: t, fontSize: t / 2.5 },
+    ...s && !n ? { backgroundColor: s } : {}
   };
-  return /* @__PURE__ */ o("div", { ref: f, ...r, "data-testid": "avatar", className: x, style: y, children: n ? /* @__PURE__ */ o(
+  return /* @__PURE__ */ d("div", { ref: b, ...r, "data-testid": f, className: y, style: A, children: n ? /* @__PURE__ */ d(
     "img",
     {
       ...a,
-      className: h("smwb-avatar__img", a == null ? void 0 : a.className),
-      src: s,
-      alt: e,
-      onError: (A) => {
-        var w;
-        c(!0), (w = a == null ? void 0 : a.onError) == null || w.call(a, A);
+      className: w("smwb-avatar__img", a == null ? void 0 : a.className),
+      src: l,
+      alt: e != null ? e : a == null ? void 0 : a.alt,
+      onError: (C) => {
+        var _;
+        c(!0), (_ = a == null ? void 0 : a.onError) == null || _.call(a, C);
       }
     }
-  ) : /* @__PURE__ */ o("span", { className: "smwb-avatar__fallback", role: "img", "aria-label": e, children: v }) });
-}), M = N(function({
-  className: m,
-  max: s = 5,
+  ) : /* @__PURE__ */ d("span", { className: "smwb-avatar__fallback", role: "img", "aria-label": e, children: m }) });
+}), R = x(function({
+  className: u,
+  max: l = 5,
   total: e,
   onSurplusClick: t,
-  surplusAriaLabel: u = (r) => `${r} more`,
-  size: l,
-  children: d,
-  ...a
-}, v) {
-  const r = E.toArray(d).filter(S), f = e != null ? e : r.length, b = Math.max(s, 1), c = r.slice(0, b), n = f - c.length;
+  surplusAriaLabel: i = (r) => `${r} more`,
+  size: s,
+  children: v,
+  "data-testid": a = "avatar-group",
+  ...m
+}, f) {
+  const r = S.toArray(v).filter(j), b = e != null ? e : r.length, h = Math.max(l, 1), c = r.slice(0, h), n = b - c.length;
   return (
     // In order, the first avatar first; the "+N" chip ends the row.
-    /* @__PURE__ */ C("div", { ref: v, ...a, "data-testid": "avatar-group", className: h("smwb-avatar-group", m), children: [
+    /* @__PURE__ */ $("div", { ref: f, ...m, "data-testid": a, className: w("smwb-avatar-group", u), children: [
       c,
-      n > 0 ? /* @__PURE__ */ o(
-        j,
+      n > 0 ? /* @__PURE__ */ d(
+        k,
         {
           className: "smwb-avatar-group__surplus",
-          size: l,
-          alt: u(n),
+          size: s,
+          alt: i(n),
           onClick: t,
           style: t ? { cursor: "pointer" } : void 0,
           children: `+${n}`
@@ -57,8 +70,8 @@ const _ = (i) => typeof i == "string", j = N(function({ className: m, src: s, al
   );
 });
 export {
-  j as Avatar,
-  M as AvatarGroup,
-  j as default
+  k as Avatar,
+  R as AvatarGroup,
+  k as default
 };
 //# sourceMappingURL=avatar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../../src/components/dataDisplay/avatar/avatar.tsx"],"sourcesContent":["import {\n  Children,\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ImgHTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  useState,\n} from \"react\";\nimport cn from \"clsx\";\n\nexport type AvatarSize = \"small\" | \"medium\" | \"large\";\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Image source. Falls back to children (initials / icon) on error or when absent. */\n  src?: string;\n  alt?: string;\n  /** Preset size or an explicit pixel value. */\n  size?: AvatarSize | number;\n  variant?: \"circular\" | \"rounded\" | \"square\";\n  /** Background color for the fallback (initials / icon). */\n  color?: string;\n  /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */\n  imgProps?: ImgHTMLAttributes<HTMLImageElement>;\n}\n\nconst isPresetSize = (size: AvatarSize | number): size is AvatarSize => typeof size === \"string\";\n\nexport const Avatar = forwardRef<HTMLDivElement, PropsWithChildren<AvatarProps>>(function Avatar(\n  { className, src, alt, size = \"medium\", variant = \"circular\", color, style, imgProps, children, ...props },\n  ref\n) {\n  const [imgFailed, setImgFailed] = useState(false);\n  const showImage = Boolean(src) && !imgFailed;\n\n  const avatarClassName = cn(\n    \"smwb-avatar\",\n    `smwb-avatar_${variant}`,\n    isPresetSize(size) ? `smwb-avatar_${size}` : null,\n    className\n  );\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n    ...(isPresetSize(size) ? {} : { width: size, height: size, fontSize: size / 2.5 }),\n    ...(color && !showImage ? { backgroundColor: color } : {}),\n  };\n\n  return (\n    <div ref={ref} {...props} data-testid=\"avatar\" className={avatarClassName} style={inlineStyle}>\n      {showImage ? (\n        <img\n          {...imgProps}\n          className={cn(\"smwb-avatar__img\", imgProps?.className)}\n          src={src}\n          alt={alt}\n          onError={(e) => {\n            setImgFailed(true);\n            imgProps?.onError?.(e);\n          }}\n        />\n      ) : (\n        <span className=\"smwb-avatar__fallback\" role=\"img\" aria-label={alt}>\n          {children}\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Maximum avatars to show before collapsing the rest into a \"+N\" surplus. */\n  max?: number;\n  /** Override the total count used for the surplus label (defaults to children count). */\n  total?: number;\n  /** Click handler for the \"+N\" surplus chip. */\n  onSurplusClick?: () => void;\n  /** Accessible name of the \"+N\" surplus chip. */\n  surplusAriaLabel?: (count: number) => string;\n  /** Size of the \"+N\" surplus chip: match the avatars in the group. */\n  size?: AvatarSize | number;\n}\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, PropsWithChildren<AvatarGroupProps>>(function AvatarGroup(\n  {\n    className,\n    max = 5,\n    total,\n    onSurplusClick,\n    surplusAriaLabel = (count: number) => `${count} more`,\n    size,\n    children,\n    ...props\n  },\n  ref\n) {\n  const items = Children.toArray(children).filter(isValidElement);\n  const totalCount = total ?? items.length;\n  const clampedMax = Math.max(max, 1);\n  const visible: ReactNode[] = items.slice(0, clampedMax);\n  const surplus = totalCount - visible.length;\n\n  return (\n    // In order, the first avatar first; the \"+N\" chip ends the row.\n    <div ref={ref} {...props} data-testid=\"avatar-group\" className={cn(\"smwb-avatar-group\", className)}>\n      {visible}\n      {surplus > 0 ? (\n        <Avatar\n          className=\"smwb-avatar-group__surplus\"\n          size={size}\n          alt={surplusAriaLabel(surplus)}\n          onClick={onSurplusClick}\n          style={onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus}`}\n        </Avatar>\n      ) : null}\n    </div>\n  );\n});\n\nexport default Avatar;\n"],"names":["isPresetSize","size","Avatar","forwardRef","className","src","alt","variant","color","style","imgProps","children","props","ref","imgFailed","setImgFailed","useState","showImage","avatarClassName","cn","inlineStyle","jsx","e","_a","AvatarGroup","max","total","onSurplusClick","surplusAriaLabel","count","items","Children","isValidElement","totalCount","clampedMax","visible","surplus","jsxs"],"mappings":";;;;;AA+BA,MAAMA,IAAe,CAACC,MAAkD,OAAOA,KAAS,UAE3EC,IAASC,EAA2D,SAC/E,EAAE,WAAAC,GAAW,KAAAC,GAAK,KAAAC,GAAK,MAAAL,IAAO,UAAU,SAAAM,IAAU,YAAY,OAAAC,GAAO,OAAAC,GAAO,UAAAC,GAAU,UAAAC,GAAU,GAAGC,EAAA,GACnGC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAY,EAAQZ,KAAQ,CAACS,GAE7BI,IAAkBC;AAAA,IACtB;AAAA,IACA,eAAeZ,CAAO;AAAA,IACtBP,EAAaC,CAAI,IAAI,eAAeA,CAAI,KAAK;AAAA,IAC7CG;AAAA,EAAA,GAGIgB,IAA6B;AAAA,IACjC,GAAGX;AAAA,IACH,GAAIT,EAAaC,CAAI,IAAI,CAAA,IAAK,EAAE,OAAOA,GAAM,QAAQA,GAAM,UAAUA,IAAO,IAAA;AAAA,IAC5E,GAAIO,KAAS,CAACS,IAAY,EAAE,iBAAiBT,EAAA,IAAU,CAAA;AAAA,EAAC;AAG1D,SACE,gBAAAa,EAAC,OAAA,EAAI,KAAAR,GAAW,GAAGD,GAAO,eAAY,UAAS,WAAWM,GAAiB,OAAOE,GAC/E,UAAAH,IACC,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGX;AAAA,MACJ,WAAWS,EAAG,oBAAoBT,KAAA,gBAAAA,EAAU,SAAS;AAAA,MACrD,KAAAL;AAAA,MACA,KAAAC;AAAA,MACA,SAAS,CAACgB,MAAM;;AACd,QAAAP,EAAa,EAAI,IACjBQ,IAAAb,KAAA,gBAAAA,EAAU,YAAV,QAAAa,EAAA,KAAAb,GAAoBY;AAAA,MACtB;AAAA,IAAA;AAAA,EAAA,IAGF,gBAAAD,EAAC,QAAA,EAAK,WAAU,yBAAwB,MAAK,OAAM,cAAYf,GAC5D,UAAAK,EAAA,CACH,EAAA,CAEJ;AAEJ,CAAC,GAgBYa,IAAcrB,EAAgE,SACzF;AAAA,EACE,WAAAC;AAAA,EACA,KAAAqB,IAAM;AAAA,EACN,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC,IAAmB,CAACC,MAAkB,GAAGA,CAAK;AAAA,EAC9C,MAAA5B;AAAA,EACA,UAAAU;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMiB,IAAQC,EAAS,QAAQpB,CAAQ,EAAE,OAAOqB,CAAc,GACxDC,IAAaP,KAAA,OAAAA,IAASI,EAAM,QAC5BI,IAAa,KAAK,IAAIT,GAAK,CAAC,GAC5BU,IAAuBL,EAAM,MAAM,GAAGI,CAAU,GAChDE,IAAUH,IAAaE,EAAQ;AAErC;AAAA;AAAA,IAEE,gBAAAE,EAAC,OAAA,EAAI,KAAAxB,GAAW,GAAGD,GAAO,eAAY,gBAAe,WAAWO,EAAG,qBAAqBf,CAAS,GAC9F,UAAA;AAAA,MAAA+B;AAAA,MACAC,IAAU,IACT,gBAAAf;AAAA,QAACnB;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAAD;AAAA,UACA,KAAK2B,EAAiBQ,CAAO;AAAA,UAC7B,SAAST;AAAA,UACT,OAAOA,IAAiB,EAAE,QAAQ,cAAc;AAAA,UAE/C,cAAIS,CAAO;AAAA,QAAA;AAAA,MAAA,IAEZ;AAAA,IAAA,EAAA,CACN;AAAA;AAEJ,CAAC;"}
+{"version":3,"file":"avatar.js","sources":["../../../../src/components/dataDisplay/avatar/avatar.tsx"],"sourcesContent":["import {\n  Children,\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ImgHTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  useState,\n} from \"react\";\nimport cn from \"clsx\";\n\nexport type AvatarSize = \"small\" | \"medium\" | \"large\";\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Image source. Falls back to children (initials / icon) on error or when absent. */\n  src?: string;\n  alt?: string;\n  /** Preset size or an explicit pixel value. */\n  size?: AvatarSize | number;\n  variant?: \"circular\" | \"rounded\" | \"square\";\n  /** Background color for the fallback (initials / icon). */\n  color?: string;\n  /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */\n  imgProps?: ImgHTMLAttributes<HTMLImageElement>;\n  /** Test id of the root `<div>`; `avatar` unless given. */\n  \"data-testid\"?: string;\n}\n\nconst isPresetSize = (size: AvatarSize | number): size is AvatarSize => typeof size === \"string\";\n\nexport const Avatar = forwardRef<HTMLDivElement, PropsWithChildren<AvatarProps>>(function Avatar(\n  {\n    className,\n    src,\n    alt,\n    size = \"medium\",\n    variant = \"circular\",\n    color,\n    style,\n    imgProps,\n    children,\n    \"data-testid\": dataTestId = \"avatar\",\n    ...props\n  },\n  ref\n) {\n  const [imgFailed, setImgFailed] = useState(false);\n  const showImage = Boolean(src) && !imgFailed;\n\n  const avatarClassName = cn(\n    \"smwb-avatar\",\n    `smwb-avatar_${variant}`,\n    isPresetSize(size) ? `smwb-avatar_${size}` : null,\n    className\n  );\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n    ...(isPresetSize(size) ? {} : { width: size, height: size, fontSize: size / 2.5 }),\n    ...(color && !showImage ? { backgroundColor: color } : {}),\n  };\n\n  return (\n    <div ref={ref} {...props} data-testid={dataTestId} className={avatarClassName} style={inlineStyle}>\n      {showImage ? (\n        <img\n          {...imgProps}\n          className={cn(\"smwb-avatar__img\", imgProps?.className)}\n          src={src}\n          // Avatar's own alt wins; without it, the one in imgProps stays.\n          alt={alt ?? imgProps?.alt}\n          onError={(e) => {\n            setImgFailed(true);\n            imgProps?.onError?.(e);\n          }}\n        />\n      ) : (\n        <span className=\"smwb-avatar__fallback\" role=\"img\" aria-label={alt}>\n          {children}\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Maximum avatars to show before collapsing the rest into a \"+N\" surplus. */\n  max?: number;\n  /** Override the total count used for the surplus label (defaults to children count). */\n  total?: number;\n  /** Click handler for the \"+N\" surplus chip. */\n  onSurplusClick?: () => void;\n  /** Accessible name of the \"+N\" surplus chip. */\n  surplusAriaLabel?: (count: number) => string;\n  /** Size of the \"+N\" surplus chip: match the avatars in the group. */\n  size?: AvatarSize | number;\n  /** Test id of the root `<div>`; `avatar-group` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, PropsWithChildren<AvatarGroupProps>>(function AvatarGroup(\n  {\n    className,\n    max = 5,\n    total,\n    onSurplusClick,\n    surplusAriaLabel = (count: number) => `${count} more`,\n    size,\n    children,\n    \"data-testid\": dataTestId = \"avatar-group\",\n    ...props\n  },\n  ref\n) {\n  const items = Children.toArray(children).filter(isValidElement);\n  const totalCount = total ?? items.length;\n  const clampedMax = Math.max(max, 1);\n  const visible: ReactNode[] = items.slice(0, clampedMax);\n  const surplus = totalCount - visible.length;\n\n  return (\n    // In order, the first avatar first; the \"+N\" chip ends the row.\n    <div ref={ref} {...props} data-testid={dataTestId} className={cn(\"smwb-avatar-group\", className)}>\n      {visible}\n      {surplus > 0 ? (\n        <Avatar\n          className=\"smwb-avatar-group__surplus\"\n          size={size}\n          alt={surplusAriaLabel(surplus)}\n          onClick={onSurplusClick}\n          style={onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus}`}\n        </Avatar>\n      ) : null}\n    </div>\n  );\n});\n\nexport default Avatar;\n"],"names":["isPresetSize","size","Avatar","forwardRef","className","src","alt","variant","color","style","imgProps","children","dataTestId","props","ref","imgFailed","setImgFailed","useState","showImage","avatarClassName","cn","inlineStyle","jsx","e","_a","AvatarGroup","max","total","onSurplusClick","surplusAriaLabel","count","items","Children","isValidElement","totalCount","clampedMax","visible","surplus","jsxs"],"mappings":";;;;;AAiCA,MAAMA,IAAe,CAACC,MAAkD,OAAOA,KAAS,UAE3EC,IAASC,EAA2D,SAC/E;AAAA,EACE,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,MAAAL,IAAO;AAAA,EACP,SAAAM,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAY,EAAQb,KAAQ,CAACU,GAE7BI,IAAkBC;AAAA,IACtB;AAAA,IACA,eAAeb,CAAO;AAAA,IACtBP,EAAaC,CAAI,IAAI,eAAeA,CAAI,KAAK;AAAA,IAC7CG;AAAA,EAAA,GAGIiB,IAA6B;AAAA,IACjC,GAAGZ;AAAA,IACH,GAAIT,EAAaC,CAAI,IAAI,CAAA,IAAK,EAAE,OAAOA,GAAM,QAAQA,GAAM,UAAUA,IAAO,IAAA;AAAA,IAC5E,GAAIO,KAAS,CAACU,IAAY,EAAE,iBAAiBV,EAAA,IAAU,CAAA;AAAA,EAAC;AAG1D,SACE,gBAAAc,EAAC,OAAA,EAAI,KAAAR,GAAW,GAAGD,GAAO,eAAaD,GAAY,WAAWO,GAAiB,OAAOE,GACnF,UAAAH,IACC,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGZ;AAAA,MACJ,WAAWU,EAAG,oBAAoBV,KAAA,gBAAAA,EAAU,SAAS;AAAA,MACrD,KAAAL;AAAA,MAEA,KAAKC,KAAA,OAAAA,IAAOI,KAAA,gBAAAA,EAAU;AAAA,MACtB,SAAS,CAACa,MAAM;;AACd,QAAAP,EAAa,EAAI,IACjBQ,IAAAd,KAAA,gBAAAA,EAAU,YAAV,QAAAc,EAAA,KAAAd,GAAoBa;AAAA,MACtB;AAAA,IAAA;AAAA,EAAA,IAGF,gBAAAD,EAAC,QAAA,EAAK,WAAU,yBAAwB,MAAK,OAAM,cAAYhB,GAC5D,UAAAK,EAAA,CACH,EAAA,CAEJ;AAEJ,CAAC,GAkBYc,IAActB,EAAgE,SACzF;AAAA,EACE,WAAAC;AAAA,EACA,KAAAsB,IAAM;AAAA,EACN,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC,IAAmB,CAACC,MAAkB,GAAGA,CAAK;AAAA,EAC9C,MAAA7B;AAAA,EACA,UAAAU;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAMiB,IAAQC,EAAS,QAAQrB,CAAQ,EAAE,OAAOsB,CAAc,GACxDC,IAAaP,KAAA,OAAAA,IAASI,EAAM,QAC5BI,IAAa,KAAK,IAAIT,GAAK,CAAC,GAC5BU,IAAuBL,EAAM,MAAM,GAAGI,CAAU,GAChDE,IAAUH,IAAaE,EAAQ;AAErC;AAAA;AAAA,IAEE,gBAAAE,EAAC,OAAA,EAAI,KAAAxB,GAAW,GAAGD,GAAO,eAAaD,GAAY,WAAWQ,EAAG,qBAAqBhB,CAAS,GAC5F,UAAA;AAAA,MAAAgC;AAAA,MACAC,IAAU,IACT,gBAAAf;AAAA,QAACpB;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAAD;AAAA,UACA,KAAK4B,EAAiBQ,CAAO;AAAA,UAC7B,SAAST;AAAA,UACT,OAAOA,IAAiB,EAAE,QAAQ,cAAc;AAAA,UAE/C,cAAIS,CAAO;AAAA,QAAA;AAAA,MAAA,IAEZ;AAAA,IAAA,EAAA,CACN;AAAA;AAEJ,CAAC;"}

package/dist/components/dataDisplay/badge/badge.js

@@ -1,36 +1,45 @@
-import { jsxs as u, jsx as $ } from "react/jsx-runtime";
+import { jsxs as $, jsx as n } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/badge/badge.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                     */
-import { forwardRef as g } from "react";
-import n from "clsx";
-const R = g(function({
-  className: o,
-  color: i = "primary",
+import { forwardRef as b } from "react";
+import h from "clsx";
+const R = b(function({
+  className: e,
+  color: c = "primary",
   badgeContent: s,
-  variant: r = "outside",
-  vertical: a = "top",
-  horizontal: l = "right",
-  max: e,
-  showZero: p = !1,
-  badgeAriaLabel: b,
-  children: c,
-  ...f
-}, _) {
-  const t = s === 0 || s === "0", m = (s == null || t && !p) === !0;
-  let d = s;
-  typeof s == "number" && e !== void 0 && s > e && (d = `${e}+`);
-  const w = n(
+  variant: m = "outside",
+  vertical: p = "top",
+  horizontal: f = "right",
+  max: o,
+  showZero: _ = !1,
+  badgeAriaLabel: r,
+  children: a,
+  ...d
+}, w) {
+  const t = s === 0 || s === "0", i = (s == null || t && !_) === !0;
+  let l = s;
+  typeof s == "number" && o !== void 0 && s > o && (l = `${o}+`);
+  const u = h(
     "smwb-badge",
-    `smwb-badge_${i}`,
-    `smwb-badge_${r}`,
-    `smwb-badge_${r}_${a}`,
-    `smwb-badge_${r}_${a}_${l}`,
-    o,
-    { "smwb-badge_no-content": m }
+    `smwb-badge_${c}`,
+    `smwb-badge_${m}`,
+    `smwb-badge_${m}_${p}`,
+    `smwb-badge_${m}_${p}_${f}`,
+    e,
+    { "smwb-badge_no-content": i }
   );
-  return /* @__PURE__ */ u("span", { className: "smwb-badge__wrapper", "data-testid": "badge", children: [
-    c,
-    /* @__PURE__ */ $("span", { ref: _, className: w, "aria-label": b, ...f, children: m ? null : d })
+  return /* @__PURE__ */ $("span", { className: "smwb-badge__wrapper", "data-testid": "badge", children: [
+    a,
+    /* @__PURE__ */ n(
+      "span",
+      {
+        ...d,
+        ref: w,
+        className: u,
+        "aria-label": r != null ? r : d["aria-label"],
+        children: i ? null : l
+      }
+    )
   ] });
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../../src/components/dataDisplay/badge/badge.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  className?: string;\n  badgeContent?: React.ReactNode;\n  color?: \"primary\" | \"success\" | \"danger\";\n  variant?: \"inside\" | \"outside\";\n  vertical?: \"top\" | \"bottom\";\n  horizontal?: \"right\" | \"left\";\n  /** Cap numeric content, rendering `{max}+` when exceeded. */\n  max?: number;\n  /** Render the badge even when content is 0. */\n  showZero?: boolean;\n  /** Accessible label for the badge value. */\n  badgeAriaLabel?: string;\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, PropsWithChildren<BadgeProps>>(function Badge(\n  {\n    className,\n    color = \"primary\",\n    badgeContent,\n    variant = \"outside\",\n    vertical = \"top\",\n    horizontal = \"right\",\n    max,\n    showZero = false,\n    badgeAriaLabel,\n    children,\n    ...rest\n  },\n  ref\n) {\n  const isZero = badgeContent === 0 || badgeContent === \"0\";\n  const hidden = (badgeContent === undefined || badgeContent === null || (isZero && !showZero)) === true;\n\n  let display: React.ReactNode = badgeContent;\n  if (typeof badgeContent === \"number\" && max !== undefined && badgeContent > max) {\n    display = `${max}+`;\n  }\n\n  const badgeClassname = cn(\n    \"smwb-badge\",\n    `smwb-badge_${color}`,\n    `smwb-badge_${variant}`,\n    `smwb-badge_${variant}_${vertical}`,\n    `smwb-badge_${variant}_${vertical}_${horizontal}`,\n    className,\n    { \"smwb-badge_no-content\": hidden }\n  );\n\n  return (\n    <span className=\"smwb-badge__wrapper\" data-testid=\"badge\">\n      {children}\n      <span ref={ref} className={badgeClassname} aria-label={badgeAriaLabel} {...rest}>\n        {hidden ? null : display}\n      </span>\n    </span>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge","forwardRef","className","color","badgeContent","variant","vertical","horizontal","max","showZero","badgeAriaLabel","children","rest","ref","isZero","hidden","display","badgeClassname","cn","jsxs","jsx"],"mappings":";;;;;AAoBO,MAAMA,IAAQC,EAA2D,SAC9E;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,cAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,KAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASV,MAAiB,KAAKA,MAAiB,KAChDW,KAAwCX,KAAiB,QAASU,KAAU,CAACL,OAAe;AAElG,MAAIO,IAA2BZ;AAC/B,EAAI,OAAOA,KAAiB,YAAYI,MAAQ,UAAaJ,IAAeI,MAC1EQ,IAAU,GAAGR,CAAG;AAGlB,QAAMS,IAAiBC;AAAA,IACrB;AAAA,IACA,cAAcf,CAAK;AAAA,IACnB,cAAcE,CAAO;AAAA,IACrB,cAAcA,CAAO,IAAIC,CAAQ;AAAA,IACjC,cAAcD,CAAO,IAAIC,CAAQ,IAAIC,CAAU;AAAA,IAC/CL;AAAA,IACA,EAAE,yBAAyBa,EAAA;AAAA,EAAO;AAGpC,SACE,gBAAAI,EAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,SAC/C,UAAA;AAAA,IAAAR;AAAA,IACD,gBAAAS,EAAC,QAAA,EAAK,KAAAP,GAAU,WAAWI,GAAgB,cAAYP,GAAiB,GAAGE,GACxE,UAAAG,IAAS,OAAOC,EAAA,CACnB;AAAA,EAAA,GACF;AAEJ,CAAC;"}
+{"version":3,"file":"badge.js","sources":["../../../../src/components/dataDisplay/badge/badge.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  className?: string;\n  badgeContent?: React.ReactNode;\n  color?: \"primary\" | \"success\" | \"danger\";\n  variant?: \"inside\" | \"outside\";\n  vertical?: \"top\" | \"bottom\";\n  horizontal?: \"right\" | \"left\";\n  /** Cap numeric content, rendering `{max}+` when exceeded. */\n  max?: number;\n  /** Render the badge even when content is 0. */\n  showZero?: boolean;\n  /** Accessible label for the badge value. */\n  badgeAriaLabel?: string;\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, PropsWithChildren<BadgeProps>>(function Badge(\n  {\n    className,\n    color = \"primary\",\n    badgeContent,\n    variant = \"outside\",\n    vertical = \"top\",\n    horizontal = \"right\",\n    max,\n    showZero = false,\n    badgeAriaLabel,\n    children,\n    ...rest\n  },\n  ref\n) {\n  const isZero = badgeContent === 0 || badgeContent === \"0\";\n  const hidden = (badgeContent === undefined || badgeContent === null || (isZero && !showZero)) === true;\n\n  let display: React.ReactNode = badgeContent;\n  if (typeof badgeContent === \"number\" && max !== undefined && badgeContent > max) {\n    display = `${max}+`;\n  }\n\n  const badgeClassname = cn(\n    \"smwb-badge\",\n    `smwb-badge_${color}`,\n    `smwb-badge_${variant}`,\n    `smwb-badge_${variant}_${vertical}`,\n    `smwb-badge_${variant}_${vertical}_${horizontal}`,\n    className,\n    { \"smwb-badge_no-content\": hidden }\n  );\n\n  return (\n    <span className=\"smwb-badge__wrapper\" data-testid=\"badge\">\n      {children}\n      <span\n        {...rest}\n        ref={ref}\n        className={badgeClassname}\n        // `badgeAriaLabel` wins over the caller's aria-label; without it, the caller's stays.\n        aria-label={badgeAriaLabel ?? rest[\"aria-label\"]}\n      >\n        {hidden ? null : display}\n      </span>\n    </span>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge","forwardRef","className","color","badgeContent","variant","vertical","horizontal","max","showZero","badgeAriaLabel","children","rest","ref","isZero","hidden","display","badgeClassname","cn","jsxs","jsx"],"mappings":";;;;;AAoBO,MAAMA,IAAQC,EAA2D,SAC9E;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,cAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,KAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASV,MAAiB,KAAKA,MAAiB,KAChDW,KAAwCX,KAAiB,QAASU,KAAU,CAACL,OAAe;AAElG,MAAIO,IAA2BZ;AAC/B,EAAI,OAAOA,KAAiB,YAAYI,MAAQ,UAAaJ,IAAeI,MAC1EQ,IAAU,GAAGR,CAAG;AAGlB,QAAMS,IAAiBC;AAAA,IACrB;AAAA,IACA,cAAcf,CAAK;AAAA,IACnB,cAAcE,CAAO;AAAA,IACrB,cAAcA,CAAO,IAAIC,CAAQ;AAAA,IACjC,cAAcD,CAAO,IAAIC,CAAQ,IAAIC,CAAU;AAAA,IAC/CL;AAAA,IACA,EAAE,yBAAyBa,EAAA;AAAA,EAAO;AAGpC,SACE,gBAAAI,EAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,SAC/C,UAAA;AAAA,IAAAR;AAAA,IACD,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGR;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWI;AAAA,QAEX,cAAYP,KAAA,OAAAA,IAAkBE,EAAK,YAAY;AAAA,QAE9C,cAAS,OAAOI;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB,GACF;AAEJ,CAAC;"}

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

@@ -1,13 +1,41 @@
 import React, { HTMLAttributes, ReactNode } from "react";
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Class name(s) for the root `<div>`, the card's box. `style`, `id`, `data-*`, `aria-hidden`, `ref` and event
+     * handlers go to the root too. With `onClick`, `role`, `tabIndex`, `onFocus`, `onBlur` and the other `aria-*`
+     * attributes go to the card's button, `.smwb-card__content` (the title and the children), which is also the element
+     * to focus. Without `onClick` the card is not a control, and they stay on the root, which holds the footer too.
+     */
     className?: string;
     variant?: "filled" | "elevated" | "outlined";
+    /**
+     * Disables the card: it says `aria-disabled`, and neither clicks nor keys run `onClick`. With `onClick` the card is
+     * still a button, out of the tab order.
+     */
     disabled?: boolean;
+    /**
+     * A heading drawn at the top of the card, not the `title` attribute. With `onClick` it is part of the card's button,
+     * and the button's name starts with it.
+     */
     title?: string;
-    /** Footer slot rendered after the content. */
+    /**
+     * Footer slot rendered after the content. With `onClick` it sits beside the card's button, not inside it, so
+     * controls here keep their own names, clicks and keys; see `onClick`.
+     */
     footer?: ReactNode;
-    /** Makes the card interactive (role=button, keyboard, focus ring). */
+    /**
+     * Makes the card interactive: its content (the title and the children) becomes a button, named by that content, with
+     * a focus ring around the whole card. The footer is not part of that button but its sibling, so the card's controls
+     * go there: a control in the children would sit inside the button, and its name would join the card's.
+     *
+     * Runs when the card is activated: a click on it, or Enter / Space while its button has focus. A click on a control
+     * (button, link, input, anything focusable), in the footer or the children, or in a portal opened from the card does
+     * not run it, and neither do Enter / Space pressed on such a control. Content that is not a control keeps its click
+     * from activating the card by calling `preventDefault()` on it.
+     */
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /** Test id of the root `<div>`; `card` unless given. */
+    "data-testid"?: string;
 }
 export declare const Card: React.ForwardRefExoticComponent<CardProps & {
     children?: ReactNode | undefined;