@smwb/ui-react 2.7.0 → 2.9.0

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

@@ -1,41 +1,56 @@
 import { jsx as R } from "react/jsx-runtime";
-import u, { forwardRef as N } from "react";
-import b from "clsx";
-const B = 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 k = S(function({ actionRef: b, className: T, classes: e, center: u, duration: m = 600, color: l, "data-testid": y = "ripple", ...C }, E) {
+  const [o, 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(d) {
-        const t = d.currentTarget.getBoundingClientRect(), h = Math.max(t.width, t.height), p = h / 2;
-        let o, m;
-        g ? (o = t.width > t.height ? 0 : t.width / 2 - p, m = t.height > t.width ? 0 : t.height / 2 - p) : (o = d.clientX - t.left - p, m = d.clientY - t.top - p), c([
-          ...n,
+      onRipple(i) {
+        const t = i.currentTarget.getBoundingClientRect(), d = Math.max(t.width, t.height), n = d / 2;
+        let h, c;
+        u ? (h = t.width > t.height ? 0 : t.width / 2 - n, c = t.height > t.width ? 0 : t.height / 2 - n) : (h = i.clientX - t.left - n, c = i.clientY - t.top - n), a([
+          ...o,
           /* @__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: o,
-                top: m,
-                width: h,
-                height: h,
-                backgroundColor: r != null ? r : e == null ? void 0 : e.backgroundColor
-              },
-              ...a
+                left: h,
+                top: c,
+                width: d,
+                height: d,
+                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, o, 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: o
+    }
+  );
 });
 export {
-  B as Ripple
+  k as Ripple
 };
 //# sourceMappingURL=ripple.js.map

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

@@ -1,62 +1,75 @@
-import { jsx as o, jsxs as C } from "react/jsx-runtime";
-import { forwardRef as N, useState as $, Children as E, isValidElement as S } from "react";
-import h from "clsx";
-const _ = (u) => typeof u == "string", j = N(function({ className: d, src: s, alt: e, size: t = "medium", variant: i = "circular", color: l, style: m, imgProps: a, children: v, ...r }, f) {
-  const [b, c] = $(!1), n = !!s && !b, x = h(
+import { jsx as d, jsxs as $ } from "react/jsx-runtime";
+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: v = "circular",
+  color: s,
+  style: i,
+  imgProps: a,
+  children: m,
+  "data-testid": f = "avatar",
+  ...n
+}, b) {
+  const [h, c] = E(!1), r = !!l && !h, y = w(
     "smwb-avatar",
-    `smwb-avatar_${i}`,
-    _(t) ? `smwb-avatar_${t}` : null,
-    d
-  ), y = {
-    ...m,
-    ..._(t) ? {} : { width: t, height: t, fontSize: t / 2.5 },
-    ...l && !n ? { backgroundColor: l } : {}
+    `smwb-avatar_${v}`,
+    N(t) ? `smwb-avatar_${t}` : null,
+    u
+  ), A = {
+    ...i,
+    ...N(t) ? {} : { width: t, height: t, fontSize: t / 2.5 },
+    ...s && !r ? { 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, ...n, "data-testid": f, className: y, style: A, children: r ? /* @__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 }) });
-}), I = N(function({
-  className: d,
-  max: s = 5,
+  ) : /* @__PURE__ */ d("span", { className: "smwb-avatar__fallback", role: "img", "aria-label": e, children: m }) });
+}), M = x(function({
+  className: u,
+  max: l = 5,
   total: e,
   onSurplusClick: t,
-  surplusAriaLabel: i = (r) => `${r} more`,
-  size: l,
-  children: m,
-  ...a
-}, v) {
-  const r = E.toArray(m).filter(S), f = e != null ? e : r.length, b = Math.max(s, 1), c = r.slice(0, b), n = f - c.length;
+  surplusAriaLabel: v = (n) => `${n} more`,
+  size: s,
+  children: i,
+  "data-testid": a = "avatar-group",
+  ...m
+}, f) {
+  const n = S.toArray(i).filter(j), b = e != null ? e : n.length, h = Math.max(l, 1), c = n.slice(0, h), r = 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", d), children: [
+    /* @__PURE__ */ $("div", { ref: f, ...m, "data-testid": a, className: w("smwb-avatar-group", u), children: [
       c,
-      n > 0 ? /* @__PURE__ */ o(
-        j,
+      r > 0 ? /* @__PURE__ */ d(
+        k,
         {
           className: "smwb-avatar-group__surplus",
-          size: l,
-          alt: i(n),
+          size: s,
+          alt: v(r),
           onClick: t,
           style: t ? { cursor: "pointer" } : void 0,
-          children: `+${n}`
+          children: `+${r}`
         }
       ) : null
     ] })
   );
 });
 export {
-  j as Avatar,
-  I as AvatarGroup,
-  j as default
+  k as Avatar,
+  M as AvatarGroup,
+  k as default
 };
 //# sourceMappingURL=avatar.js.map

package/dist/headless/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":";;;AA6BA,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":";;;AA+BA,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/headless/components/dataDisplay/badge/badge.js

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

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

@@ -1,35 +1,62 @@
-import { jsxs as _, jsx as i } from "react/jsx-runtime";
-import l from "react";
-import p from "clsx";
-const N = l.forwardRef(function({ className: m, variant: v = "elevated", children: f, disabled: t, title: s, footer: c, onClick: a, onKeyDown: e, ...o }, b) {
-  const r = !!a && !t, n = (d) => {
-    e == null || e(d), r && (d.key === "Enter" || d.key === " ") && (d.preventDefault(), a == null || a(d));
+import { jsxs as o, jsx as v } from "react/jsx-runtime";
+import N, { useRef as R } from "react";
+import j from "clsx";
+import { isOwnClick as I } from "../../../utils/ownClick.js";
+import { splitControlProps as g } from "../../../utils/controlProps.js";
+const z = N.forwardRef(function({
+  className: b,
+  variant: l = "elevated",
+  children: u,
+  disabled: a,
+  title: c,
+  footer: m,
+  onClick: r,
+  onKeyDown: e,
+  "data-testid": p = "card",
+  ..._
+}, h) {
+  var n;
+  const d = !!r && !a, [s, f] = g(_, !!r), i = R(null), w = (t) => {
+    e == null || e(t), !(!d || t.target !== i.current) && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), r == null || r(t));
+  }, x = (t) => {
+    I(t, i.current) && (r == null || r(t));
   };
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ o(
     "div",
     {
-      ref: b,
-      "data-testid": "card",
-      className: p("smwb-card", `smwb-card_${v}`, m, {
-        card_disabled: t,
-        "smwb-card_interactive": r
+      ref: h,
+      "data-testid": p,
+      className: j("smwb-card", `smwb-card_${l}`, b, {
+        card_disabled: a,
+        "smwb-card_interactive": d
       }),
-      role: r ? "button" : void 0,
-      tabIndex: r ? 0 : void 0,
-      "aria-disabled": t || void 0,
-      onClick: r ? a : void 0,
-      onKeyDown: n,
-      ...o,
+      ...f,
+      "aria-disabled": r ? void 0 : a || f["aria-disabled"],
+      onClick: d ? x : void 0,
+      onKeyDown: w,
       children: [
-        s && /* @__PURE__ */ i("div", { className: "smwb-card__title", children: s }),
-        f,
-        c && /* @__PURE__ */ i("div", { className: "smwb-card__footer", children: c })
+        /* @__PURE__ */ o(
+          "div",
+          {
+            ...s,
+            ref: i,
+            className: "smwb-card__content",
+            role: r ? "button" : void 0,
+            tabIndex: (n = s.tabIndex) != null ? n : d ? 0 : void 0,
+            "aria-disabled": r ? a || s["aria-disabled"] : void 0,
+            children: [
+              c && /* @__PURE__ */ v("div", { className: "smwb-card__title", children: c }),
+              u
+            ]
+          }
+        ),
+        m && /* @__PURE__ */ v("div", { className: "smwb-card__footer", children: m })
       ]
     }
   );
 });
 export {
-  N as Card,
-  N as default
+  z as Card,
+  z as default
 };
 //# sourceMappingURL=card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  variant?: \"filled\" | \"elevated\" | \"outlined\";\n  disabled?: boolean;\n  title?: string;\n  /** Footer slot rendered after the content. */\n  footer?: ReactNode;\n  /** Makes the card interactive (role=button, keyboard, focus ring). */\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, PropsWithChildren<CardProps>>(function Card(\n  { className, variant = \"elevated\", children, disabled, title, footer, onClick, onKeyDown, ...rest },\n  ref\n) {\n  const interactive = !!onClick && !disabled;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (interactive && (e.key === \"Enter\" || e.key === \" \")) {\n      e.preventDefault();\n      onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      data-testid=\"card\"\n      className={cn(\"smwb-card\", `smwb-card_${variant}`, className, {\n        card_disabled: disabled,\n        \"smwb-card_interactive\": interactive,\n      })}\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      onClick={interactive ? onClick : undefined}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      {title && <div className=\"smwb-card__title\">{title}</div>}\n      {children}\n      {footer && <div className=\"smwb-card__footer\">{footer}</div>}\n    </div>\n  );\n});\n\nexport default Card;\n"],"names":["Card","React","className","variant","children","disabled","title","footer","onClick","onKeyDown","rest","ref","interactive","handleKeyDown","e","jsxs","cn","jsx"],"mappings":";;;AAcO,MAAMA,IAAOC,EAAM,WAAyD,SACjF,EAAE,WAAAC,GAAW,SAAAC,IAAU,YAAY,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW,GAAGC,EAAA,GAC7FC,GACA;AACA,QAAMC,IAAc,CAAC,CAACJ,KAAW,CAACH,GAE5BQ,IAAgB,CAACC,MAA2C;AAChE,IAAAL,KAAA,QAAAA,EAAYK,IACRF,MAAgBE,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjDA,EAAE,eAAA,GACFN,KAAA,QAAAA,EAAUM;AAAA,EAEd;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,eAAY;AAAA,MACZ,WAAWK,EAAG,aAAa,aAAab,CAAO,IAAID,GAAW;AAAA,QAC5D,eAAeG;AAAA,QACf,yBAAyBO;AAAA,MAAA,CAC1B;AAAA,MACD,MAAMA,IAAc,WAAW;AAAA,MAC/B,UAAUA,IAAc,IAAI;AAAA,MAC5B,iBAAeP,KAAY;AAAA,MAC3B,SAASO,IAAcJ,IAAU;AAAA,MACjC,WAAWK;AAAA,MACV,GAAGH;AAAA,MAEH,UAAA;AAAA,QAAAJ,KAAS,gBAAAW,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAAX,GAAM;AAAA,QAClDF;AAAA,QACAG,KAAU,gBAAAU,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAAV,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5D,CAAC;"}
+{"version":3,"file":"card.js","sources":["../../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, ReactNode, useRef } from \"react\";\nimport cn from \"clsx\";\nimport { isOwnClick } from \"../../../utils/ownClick\";\nimport { splitControlProps } from \"../../../utils/controlProps\";\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Class name(s) for the root `<div>`, the card's box. `style`, `id`, `data-*`, `aria-hidden`, `ref` and event\n   * handlers go to the root too. With `onClick`, `role`, `tabIndex`, `onFocus`, `onBlur` and the other `aria-*`\n   * attributes go to the card's button, `.smwb-card__content` (the title and the children), which is also the element\n   * to focus. Without `onClick` the card is not a control, and they stay on the root, which holds the footer too.\n   */\n  className?: string;\n  variant?: \"filled\" | \"elevated\" | \"outlined\";\n  /**\n   * Disables the card: it says `aria-disabled`, and neither clicks nor keys run `onClick`. With `onClick` the card is\n   * still a button, out of the tab order.\n   */\n  disabled?: boolean;\n  /**\n   * A heading drawn at the top of the card, not the `title` attribute. With `onClick` it is part of the card's button,\n   * and the button's name starts with it.\n   */\n  title?: string;\n  /**\n   * Footer slot rendered after the content. With `onClick` it sits beside the card's button, not inside it, so\n   * controls here keep their own names, clicks and keys; see `onClick`.\n   */\n  footer?: ReactNode;\n  /**\n   * Makes the card interactive: its content (the title and the children) becomes a button, named by that content, with\n   * a focus ring around the whole card. The footer is not part of that button but its sibling, so the card's controls\n   * go there: a control in the children would sit inside the button, and its name would join the card's.\n   *\n   * Runs when the card is activated: a click on it, or Enter / Space while its button has focus. A click on a control\n   * (button, link, input, anything focusable), in the footer or the children, or in a portal opened from the card does\n   * not run it, and neither do Enter / Space pressed on such a control. Content that is not a control keeps its click\n   * from activating the card by calling `preventDefault()` on it.\n   */\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  /** Test id of the root `<div>`; `card` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, PropsWithChildren<CardProps>>(function Card(\n  {\n    className,\n    variant = \"elevated\",\n    children,\n    disabled,\n    title,\n    footer,\n    onClick,\n    onKeyDown,\n    \"data-testid\": dataTestId = \"card\",\n    ...rest\n  },\n  ref\n) {\n  const interactive = !!onClick && !disabled;\n  // With onClick the card's content is its button, and what the card is to the\n  // keyboard and to assistive tech goes there. Without it the card is not a\n  // control: the caller's role and ARIA attributes stay on the root, around\n  // the footer too.\n  const [control, box] = splitControlProps(rest, !!onClick);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n\n  // Keys pressed in the footer or on a control inside bubble up here too; only\n  // the keys of the card's button activate it. The caller's onKeyDown still\n  // sees them all.\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (!interactive || e.target !== contentRef.current) return;\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\n    }\n  };\n\n  // A click on the card's button, or on what is not a control beside it (the\n  // footer's text, the padding), activates the card: not one on a control, nor\n  // one in a portal rendered inside (React delivers it here, though it landed\n  // outside), nor one whose default a handler inside has prevented.\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (isOwnClick(e, contentRef.current)) onClick?.(e);\n  };\n\n  return (\n    <div\n      ref={ref}\n      data-testid={dataTestId}\n      className={cn(\"smwb-card\", `smwb-card_${variant}`, className, {\n        card_disabled: disabled,\n        \"smwb-card_interactive\": interactive,\n      })}\n      {...box}\n      // A disabled card says so where the caller's ARIA attributes are: on its\n      // button with onClick, on the root without.\n      aria-disabled={onClick ? undefined : disabled || box[\"aria-disabled\"]}\n      onClick={interactive ? handleClick : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        {...control}\n        ref={contentRef}\n        className=\"smwb-card__content\"\n        // With onClick the content is the card's button, and a disabled card\n        // says so: these win over the caller's, and where the card sets none,\n        // the caller's stay. Its tabIndex is a default: the caller's wins, e.g.\n        // for roving focus.\n        role={onClick ? \"button\" : undefined}\n        tabIndex={control.tabIndex ?? (interactive ? 0 : undefined)}\n        aria-disabled={onClick ? disabled || control[\"aria-disabled\"] : undefined}\n      >\n        {title && <div className=\"smwb-card__title\">{title}</div>}\n        {children}\n      </div>\n      {/* Beside the button, not in it: controls here keep their names and input. */}\n      {footer && <div className=\"smwb-card__footer\">{footer}</div>}\n    </div>\n  );\n});\n\nexport default Card;\n"],"names":["Card","React","className","variant","children","disabled","title","footer","onClick","onKeyDown","dataTestId","rest","ref","interactive","control","box","splitControlProps","contentRef","useRef","handleKeyDown","e","handleClick","isOwnClick","jsxs","cn","_a","jsx"],"mappings":";;;;;AA4CO,MAAMA,IAAOC,EAAM,WAAyD,SACjF;AAAA,EACE,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;;AACA,QAAMC,IAAc,CAAC,CAACL,KAAW,CAACH,GAK5B,CAACS,GAASC,CAAG,IAAIC,EAAkBL,GAAM,CAAC,CAACH,CAAO,GAClDS,IAAaC,EAA8B,IAAI,GAK/CC,IAAgB,CAACC,MAA2C;AAEhE,IADAX,KAAA,QAAAA,EAAYW,IACR,GAACP,KAAeO,EAAE,WAAWH,EAAW,aACxCG,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACFZ,KAAA,QAAAA,EAAUY;AAAA,EAEd,GAMMC,IAAc,CAACD,MAAwC;AAC3D,IAAIE,EAAWF,GAAGH,EAAW,OAAO,qBAAaG;AAAA,EACnD;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAX;AAAA,MACA,eAAaF;AAAA,MACb,WAAWc,EAAG,aAAa,aAAarB,CAAO,IAAID,GAAW;AAAA,QAC5D,eAAeG;AAAA,QACf,yBAAyBQ;AAAA,MAAA,CAC1B;AAAA,MACA,GAAGE;AAAA,MAGJ,iBAAeP,IAAU,SAAYH,KAAYU,EAAI,eAAe;AAAA,MACpE,SAASF,IAAcQ,IAAc;AAAA,MACrC,WAAWF;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGT;AAAA,YACJ,KAAKG;AAAA,YACL,WAAU;AAAA,YAKV,MAAMT,IAAU,WAAW;AAAA,YAC3B,WAAUiB,IAAAX,EAAQ,aAAR,OAAAW,IAAqBZ,IAAc,IAAI;AAAA,YACjD,iBAAeL,IAAUH,KAAYS,EAAQ,eAAe,IAAI;AAAA,YAE/D,UAAA;AAAA,cAAAR,KAAS,gBAAAoB,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAApB,GAAM;AAAA,cAClDF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFG,KAAU,gBAAAmB,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAAnB,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5D,CAAC;"}