@smwb/ui-react 2.6.2 → 2.7.0

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

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

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}\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, PropsWithChildren<AvatarGroupProps>>(function AvatarGroup(\n  { className, max = 5, total, onSurplusClick, children, ...props },\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    <div ref={ref} {...props} data-testid=\"avatar-group\" className={cn(\"smwb-avatar-group\", className)}>\n      {surplus > 0 ? (\n        <Avatar\n          className=\"smwb-avatar-group__surplus\"\n          onClick={onSurplusClick}\n          style={onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus}`}\n        </Avatar>\n      ) : null}\n      {visible}\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","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,GAYYa,IAAcrB,EAAgE,SACzF,EAAE,WAAAC,GAAW,KAAAqB,IAAM,GAAG,OAAAC,GAAO,gBAAAC,GAAgB,UAAAhB,GAAU,GAAGC,EAAA,GAC1DC,GACA;AACA,QAAMe,IAAQC,EAAS,QAAQlB,CAAQ,EAAE,OAAOmB,CAAc,GACxDC,IAAaL,KAAA,OAAAA,IAASE,EAAM,QAC5BI,IAAa,KAAK,IAAIP,GAAK,CAAC,GAC5BQ,IAAuBL,EAAM,MAAM,GAAGI,CAAU,GAChDE,IAAUH,IAAaE,EAAQ;AAErC,SACE,gBAAAE,EAAC,OAAA,EAAI,KAAAtB,GAAW,GAAGD,GAAO,eAAY,gBAAe,WAAWO,EAAG,qBAAqBf,CAAS,GAC9F,UAAA;AAAA,IAAA8B,IAAU,IACT,gBAAAb;AAAA,MAACnB;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,SAASyB;AAAA,QACT,OAAOA,IAAiB,EAAE,QAAQ,cAAc;AAAA,QAE/C,cAAIO,CAAO;AAAA,MAAA;AAAA,IAAA,IAEZ;AAAA,IACHD;AAAA,EAAA,GACH;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}\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;"}

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

@@ -0,0 +1,41 @@
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import m from "react";
+import l from "clsx";
+const x = m.forwardRef(
+  function({ className: t, term: r, children: s, ...e }, i) {
+    return /* @__PURE__ */ p("div", { ...e, ref: i, className: l("smwb-description-list__item", t), children: [
+      /* @__PURE__ */ n("dt", { className: "smwb-description-list__term", children: r }),
+      /* @__PURE__ */ n("dd", { className: "smwb-description-list__details", children: s })
+    ] });
+  }
+), R = m.forwardRef(
+  function({ className: t, style: r, items: s, layout: e = "auto", termWidth: i, dense: f, children: w, ...b }, _) {
+    const c = typeof i == "number" ? `${i}px` : i;
+    return /* @__PURE__ */ p(
+      "dl",
+      {
+        ...b,
+        ref: _,
+        className: l(
+          "smwb-description-list",
+          `smwb-description-list_${e}`,
+          { "smwb-description-list_dense": f },
+          t
+        ),
+        style: c === void 0 ? r : { ...r, "--smwb-description-term": c },
+        children: [
+          s == null ? void 0 : s.map((o, u) => {
+            var d;
+            return /* @__PURE__ */ n(x, { term: o.term, children: o.description }, (d = o.key) != null ? d : u);
+          }),
+          w
+        ]
+      }
+    );
+  }
+);
+export {
+  x as DescriptionItem,
+  R as DescriptionList
+};
+//# sourceMappingURL=descriptionList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"descriptionList.js","sources":["../../../../../src/components/dataDisplay/descriptionList/descriptionList.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface DescriptionListEntry {\n  term: ReactNode;\n  description: ReactNode;\n  /** React key; the index is used without it. */\n  key?: React.Key;\n}\n\n/**\n * `auto`: the term beside its description while the list's container is at\n * least 420px wide, above it when narrower (a container query). `row` and\n * `stacked` fix one layout.\n */\nexport type DescriptionListLayout = \"auto\" | \"row\" | \"stacked\";\n\nexport interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {\n  className?: string;\n  /** The pairs as data; `DescriptionItem` children work too, and come after them. */\n  items?: DescriptionListEntry[];\n  layout?: DescriptionListLayout;\n  /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */\n  termWidth?: number | string;\n  /** Tighter spacing, for side panels. */\n  dense?: boolean;\n}\n\nexport interface DescriptionItemProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** The field's name. */\n  term: ReactNode;\n}\n\n/** One pair: the term and, as children, its description. */\nexport const DescriptionItem = React.forwardRef<HTMLDivElement, PropsWithChildren<DescriptionItemProps>>(\n  function DescriptionItem({ className, term, children, ...rest }, ref) {\n    return (\n      <div {...rest} ref={ref} className={cn(\"smwb-description-list__item\", className)}>\n        <dt className=\"smwb-description-list__term\">{term}</dt>\n        <dd className=\"smwb-description-list__details\">{children}</dd>\n      </div>\n    );\n  }\n);\n\n/** Field–value pairs (a `<dl>`): side by side, stacking on a narrow container. */\nexport const DescriptionList = React.forwardRef<HTMLDListElement, PropsWithChildren<DescriptionListProps>>(\n  function DescriptionList({ className, style, items, layout = \"auto\", termWidth, dense, children, ...rest }, ref) {\n    const width = typeof termWidth === \"number\" ? `${termWidth}px` : termWidth;\n    return (\n      <dl\n        {...rest}\n        ref={ref}\n        className={cn(\n          \"smwb-description-list\",\n          `smwb-description-list_${layout}`,\n          { \"smwb-description-list_dense\": dense },\n          className\n        )}\n        style={width === undefined ? style : ({ ...style, \"--smwb-description-term\": width } as CSSProperties)}\n      >\n        {items?.map((item, index) => (\n          <DescriptionItem key={item.key ?? index} term={item.term}>\n            {item.description}\n          </DescriptionItem>\n        ))}\n        {children}\n      </dl>\n    );\n  }\n);\n\nexport default DescriptionList;\n"],"names":["DescriptionItem","React","className","term","children","rest","ref","jsxs","cn","jsx","DescriptionList","style","items","layout","termWidth","dense","width","item","index","_a"],"mappings":";;;AAmCO,MAAMA,IAAkBC,EAAM;AAAA,EACnC,SAAyB,EAAE,WAAAC,GAAW,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GAAQC,GAAK;AACpE,WACE,gBAAAC,EAAC,SAAK,GAAGF,GAAM,KAAAC,GAAU,WAAWE,EAAG,+BAA+BN,CAAS,GAC7E,UAAA;AAAA,MAAA,gBAAAO,EAAC,MAAA,EAAG,WAAU,+BAA+B,UAAAN,GAAK;AAAA,MAClD,gBAAAM,EAAC,MAAA,EAAG,WAAU,kCAAkC,UAAAL,EAAA,CAAS;AAAA,IAAA,GAC3D;AAAA,EAEJ;AACF,GAGaM,IAAkBT,EAAM;AAAA,EACnC,SAAyB,EAAE,WAAAC,GAAW,OAAAS,GAAO,OAAAC,GAAO,QAAAC,IAAS,QAAQ,WAAAC,GAAW,OAAAC,GAAO,UAAAX,GAAU,GAAGC,EAAA,GAAQC,GAAK;AAC/G,UAAMU,IAAQ,OAAOF,KAAc,WAAW,GAAGA,CAAS,OAAOA;AACjE,WACE,gBAAAP;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGF;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWE;AAAA,UACT;AAAA,UACA,yBAAyBK,CAAM;AAAA,UAC/B,EAAE,+BAA+BE,EAAA;AAAA,UACjCb;AAAA,QAAA;AAAA,QAEF,OAAOc,MAAU,SAAYL,IAAS,EAAE,GAAGA,GAAO,2BAA2BK,EAAA;AAAA,QAE5E,UAAA;AAAA,UAAAJ,KAAA,gBAAAA,EAAO,IAAI,CAACK,GAAMC,MAAA;;qCAChBlB,GAAA,EAAwC,MAAMiB,EAAK,MACjD,UAAAA,EAAK,YAAA,IADcE,IAAAF,EAAK,QAAL,OAAAE,IAAYD,CAElC;AAAA;AAAA,UAEDd;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/headless/components/dataDisplay/imagesList/imagesListItem/imagesListItem.js

@@ -1,54 +1,60 @@
-import { jsxs as n, Fragment as _, jsx as e } from "react/jsx-runtime";
-import { useContext as y, useEffect as u } from "react";
-import t from "clsx";
-import { useModalState as h } from "../../../../hooks/useModalState.js";
-import { ImagesListContext as v } from "../imagesListContext.js";
-import x from "./imagesListItemModal.js";
-const j = ({
+import { jsxs as n, Fragment as y, jsx as e } from "react/jsx-runtime";
+import { useContext as _, useEffect as h } from "react";
+import m from "clsx";
+import { useModalState as v } from "../../../../hooks/useModalState.js";
+import { ImagesListContext as x } from "../imagesListContext.js";
+import I from "./imagesListItemModal.js";
+const M = ({
   className: s,
   src: i,
   rounded: o,
-  itemBarContent: l,
+  itemBarContent: r,
   cols: d = 1,
-  rows: a = 1,
+  rows: l = 1,
   itemBarPlacement: g = "bottom",
   alt: c = "image"
 }) => {
-  const { isOpen: m, onClose: b, onOpen: p } = h(), { rowsHeight: r, variant: w } = y(v);
-  u(() => {
-    m ? document.body.style.overflow = "hidden" : document.body.style.overflow = "auto";
-  }, [m]);
+  const { isOpen: t, onClose: b, onOpen: p } = v(), { rowsHeight: a, variant: w } = _(x);
+  h(() => {
+    if (!t) return;
+    const u = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = u;
+    };
+  }, [t]);
   const f = {
-    height: r ? `${r * a}px` : "",
-    gridRowEnd: `span ${a}`,
+    // No height is undefined, not "": React writes an empty value on the client
+    // but not on the server, and hydration reports the style as mismatched.
+    height: a ? `${a * l}px` : void 0,
+    gridRowEnd: `span ${l}`,
     gridColumnEnd: `span ${d}`
   };
-  return /* @__PURE__ */ n(_, { children: [
+  return /* @__PURE__ */ n(y, { children: [
     /* @__PURE__ */ e(
       "li",
       {
         "data-testid": "images-list-item",
-        className: t("smwb-gallery__list__item", s, "smwb-gallery-item", `smwb-${w}`),
+        className: m("smwb-gallery__list__item", s, "smwb-gallery-item", `smwb-${w}`),
         onClick: p,
         style: f,
         children: /* @__PURE__ */ n("div", { className: "smwb-gallery-item__inner", children: [
-          /* @__PURE__ */ e("div", { className: "smwb-gallery-item__img-wrapper", children: /* @__PURE__ */ e("img", { src: i, alt: c || "image", className: t("smwb-gallery-item__img", { "smwb-rounded": o }) }) }),
-          l && /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "smwb-gallery-item__img-wrapper", children: /* @__PURE__ */ e("img", { src: i, alt: c || "image", className: m("smwb-gallery-item__img", { "smwb-rounded": o }) }) }),
+          r && /* @__PURE__ */ e(
             "div",
             {
-              className: t("smwb-gallery-item__bar", s, `smwb-${g}`, {
+              className: m("smwb-gallery-item__bar", s, `smwb-${g}`, {
                 "smwb-rounded": o
               }),
-              children: l
+              children: r
             }
           )
         ] })
       }
     ),
-    /* @__PURE__ */ e(x, { src: i, onClose: b, isOpen: m })
+    /* @__PURE__ */ e(I, { src: i, onClose: b, isOpen: t })
   ] });
 };
 export {
-  j as default
+  M as default
 };
 //# sourceMappingURL=imagesListItem.js.map

package/dist/headless/components/dataDisplay/imagesList/imagesListItem/imagesListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"imagesListItem.js","sources":["../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItem.tsx"],"sourcesContent":["import React, { CSSProperties, useContext, useEffect } from \"react\";\nimport cn from \"clsx\";\nimport { useModalState } from \"../../../../hooks/useModalState\";\nimport { ImagesListItemModal } from \"../index\";\nimport { ImagesListContext } from \"../imagesListContext\";\n\nexport interface ImagesListItemProps {\n  className?: string;\n  src: string;\n  rowsHeight?: number;\n  cols: number;\n  rows: number;\n  rounded?: boolean;\n  itemBarPlacement?: \"top\" | \"bottom\" | \"under\";\n  itemBarContent?: React.ReactNode;\n  alt?: string;\n}\n\nconst ImagesListItem = ({\n  className,\n  src,\n  rounded,\n  itemBarContent,\n  cols = 1,\n  rows = 1,\n  itemBarPlacement = \"bottom\",\n  alt = \"image\",\n}: ImagesListItemProps) => {\n  const { isOpen, onClose, onOpen } = useModalState();\n  const { rowsHeight, variant } = useContext(ImagesListContext);\n\n  useEffect(() => {\n    if (isOpen) {\n      document.body.style.overflow = \"hidden\";\n    } else {\n      document.body.style.overflow = \"auto\";\n    }\n  }, [isOpen]);\n\n  const style: CSSProperties = {\n    height: rowsHeight ? `${rowsHeight * rows}px` : \"\",\n    gridRowEnd: `span ${rows}`,\n    gridColumnEnd: `span ${cols}`,\n  };\n\n  return (\n    <>\n      <li\n        data-testid=\"images-list-item\"\n        className={cn(\"smwb-gallery__list__item\", className, \"smwb-gallery-item\", `smwb-${variant}`)}\n        onClick={onOpen}\n        style={style}\n      >\n        <div className=\"smwb-gallery-item__inner\">\n          <div className=\"smwb-gallery-item__img-wrapper\">\n            <img src={src} alt={alt || \"image\"} className={cn(\"smwb-gallery-item__img\", { \"smwb-rounded\": rounded })} />\n          </div>\n          {itemBarContent && (\n            <div\n              className={cn(\"smwb-gallery-item__bar\", className, `smwb-${itemBarPlacement}`, {\n                \"smwb-rounded\": rounded,\n              })}\n            >\n              {itemBarContent}\n            </div>\n          )}\n        </div>\n      </li>\n      <ImagesListItemModal src={src} onClose={onClose} isOpen={isOpen} />\n    </>\n  );\n};\n\nexport default ImagesListItem;\n"],"names":["ImagesListItem","className","src","rounded","itemBarContent","cols","rows","itemBarPlacement","alt","isOpen","onClose","onOpen","useModalState","rowsHeight","variant","useContext","ImagesListContext","useEffect","style","jsxs","Fragment","jsx","cn","ImagesListItemModal"],"mappings":";;;;;;AAkBA,MAAMA,IAAiB,CAAC;AAAA,EACtB,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,kBAAAC,IAAmB;AAAA,EACnB,KAAAC,IAAM;AACR,MAA2B;AACzB,QAAM,EAAE,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IAAWC,EAAA,GAC9B,EAAE,YAAAC,GAAY,SAAAC,MAAYC,EAAWC,CAAiB;AAE5D,EAAAC,EAAU,MAAM;AACd,IAAIR,IACF,SAAS,KAAK,MAAM,WAAW,WAE/B,SAAS,KAAK,MAAM,WAAW;AAAA,EAEnC,GAAG,CAACA,CAAM,CAAC;AAEX,QAAMS,IAAuB;AAAA,IAC3B,QAAQL,IAAa,GAAGA,IAAaP,CAAI,OAAO;AAAA,IAChD,YAAY,QAAQA,CAAI;AAAA,IACxB,eAAe,QAAQD,CAAI;AAAA,EAAA;AAG7B,SACE,gBAAAc,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAWC,EAAG,4BAA4BrB,GAAW,qBAAqB,QAAQa,CAAO,EAAE;AAAA,QAC3F,SAASH;AAAA,QACT,OAAAO;AAAA,QAEA,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,4BACb,UAAA;AAAA,UAAA,gBAAAE,EAAC,SAAI,WAAU,kCACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,KAAAnB,GAAU,KAAKM,KAAO,SAAS,WAAWc,EAAG,0BAA0B,EAAE,gBAAgBnB,EAAA,CAAS,GAAG,GAC5G;AAAA,UACCC,KACC,gBAAAiB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,EAAG,0BAA0BrB,GAAW,QAAQM,CAAgB,IAAI;AAAA,gBAC7E,gBAAgBJ;AAAA,cAAA,CACjB;AAAA,cAEA,UAAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAiB,EAACE,GAAA,EAAoB,KAAArB,GAAU,SAAAQ,GAAkB,QAAAD,EAAA,CAAgB;AAAA,EAAA,GACnE;AAEJ;"}
+{"version":3,"file":"imagesListItem.js","sources":["../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItem.tsx"],"sourcesContent":["import React, { CSSProperties, useContext, useEffect } from \"react\";\nimport cn from \"clsx\";\nimport { useModalState } from \"../../../../hooks/useModalState\";\nimport { ImagesListItemModal } from \"../index\";\nimport { ImagesListContext } from \"../imagesListContext\";\n\nexport interface ImagesListItemProps {\n  className?: string;\n  src: string;\n  rowsHeight?: number;\n  cols: number;\n  rows: number;\n  rounded?: boolean;\n  itemBarPlacement?: \"top\" | \"bottom\" | \"under\";\n  itemBarContent?: React.ReactNode;\n  alt?: string;\n}\n\nconst ImagesListItem = ({\n  className,\n  src,\n  rounded,\n  itemBarContent,\n  cols = 1,\n  rows = 1,\n  itemBarPlacement = \"bottom\",\n  alt = \"image\",\n}: ImagesListItemProps) => {\n  const { isOpen, onClose, onOpen } = useModalState();\n  const { rowsHeight, variant } = useContext(ImagesListContext);\n\n  // Lock the page's scroll while the viewer is open, and give it back as it was.\n  // (Every item used to set it to \"auto\" when it mounted, undoing another lock.)\n  useEffect(() => {\n    if (!isOpen) return;\n    const previous = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = previous;\n    };\n  }, [isOpen]);\n\n  const style: CSSProperties = {\n    // No height is undefined, not \"\": React writes an empty value on the client\n    // but not on the server, and hydration reports the style as mismatched.\n    height: rowsHeight ? `${rowsHeight * rows}px` : undefined,\n    gridRowEnd: `span ${rows}`,\n    gridColumnEnd: `span ${cols}`,\n  };\n\n  return (\n    <>\n      <li\n        data-testid=\"images-list-item\"\n        className={cn(\"smwb-gallery__list__item\", className, \"smwb-gallery-item\", `smwb-${variant}`)}\n        onClick={onOpen}\n        style={style}\n      >\n        <div className=\"smwb-gallery-item__inner\">\n          <div className=\"smwb-gallery-item__img-wrapper\">\n            <img src={src} alt={alt || \"image\"} className={cn(\"smwb-gallery-item__img\", { \"smwb-rounded\": rounded })} />\n          </div>\n          {itemBarContent && (\n            <div\n              className={cn(\"smwb-gallery-item__bar\", className, `smwb-${itemBarPlacement}`, {\n                \"smwb-rounded\": rounded,\n              })}\n            >\n              {itemBarContent}\n            </div>\n          )}\n        </div>\n      </li>\n      <ImagesListItemModal src={src} onClose={onClose} isOpen={isOpen} />\n    </>\n  );\n};\n\nexport default ImagesListItem;\n"],"names":["ImagesListItem","className","src","rounded","itemBarContent","cols","rows","itemBarPlacement","alt","isOpen","onClose","onOpen","useModalState","rowsHeight","variant","useContext","ImagesListContext","useEffect","previous","style","jsxs","Fragment","jsx","cn","ImagesListItemModal"],"mappings":";;;;;;AAkBA,MAAMA,IAAiB,CAAC;AAAA,EACtB,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,kBAAAC,IAAmB;AAAA,EACnB,KAAAC,IAAM;AACR,MAA2B;AACzB,QAAM,EAAE,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IAAWC,EAAA,GAC9B,EAAE,YAAAC,GAAY,SAAAC,MAAYC,EAAWC,CAAiB;AAI5D,EAAAC,EAAU,MAAM;AACd,QAAI,CAACR,EAAQ;AACb,UAAMS,IAAW,SAAS,KAAK,MAAM;AACrC,oBAAS,KAAK,MAAM,WAAW,UACxB,MAAM;AACX,eAAS,KAAK,MAAM,WAAWA;AAAA,IACjC;AAAA,EACF,GAAG,CAACT,CAAM,CAAC;AAEX,QAAMU,IAAuB;AAAA;AAAA;AAAA,IAG3B,QAAQN,IAAa,GAAGA,IAAaP,CAAI,OAAO;AAAA,IAChD,YAAY,QAAQA,CAAI;AAAA,IACxB,eAAe,QAAQD,CAAI;AAAA,EAAA;AAG7B,SACE,gBAAAe,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAWC,EAAG,4BAA4BtB,GAAW,qBAAqB,QAAQa,CAAO,EAAE;AAAA,QAC3F,SAASH;AAAA,QACT,OAAAQ;AAAA,QAEA,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,4BACb,UAAA;AAAA,UAAA,gBAAAE,EAAC,SAAI,WAAU,kCACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,KAAApB,GAAU,KAAKM,KAAO,SAAS,WAAWe,EAAG,0BAA0B,EAAE,gBAAgBpB,EAAA,CAAS,GAAG,GAC5G;AAAA,UACCC,KACC,gBAAAkB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,EAAG,0BAA0BtB,GAAW,QAAQM,CAAgB,IAAI;AAAA,gBAC7E,gBAAgBJ;AAAA,cAAA,CACjB;AAAA,cAEA,UAAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAkB,EAACE,GAAA,EAAoB,KAAAtB,GAAU,SAAAQ,GAAkB,QAAAD,EAAA,CAAgB;AAAA,EAAA,GACnE;AAEJ;"}

package/dist/headless/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.js

@@ -1,29 +1,32 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useRef as i } from "react";
-import { createPortal as n } from "react-dom";
-import { CSSTransition as l } from "react-transition-group";
-const g = ({ src: o, onClose: a, isOpen: t }) => {
-  const m = i(null);
-  return n(
+import { useRef as l, useState as s } from "react";
+import { createPortal as c } from "react-dom";
+import { useSafeLayoutEffect as d } from "../../../../hooks/useSafeLayoutEffect.js";
+import { CSSTransition as u } from "react-transition-group";
+const b = ({ src: a, onClose: m, isOpen: r }) => {
+  const o = l(null), [t, n] = s();
+  return d(() => {
+    n(document.body);
+  }, []), t ? c(
     /* @__PURE__ */ e(
-      l,
+      u,
       {
         timeout: 100,
-        in: t,
+        in: r,
         classNames: {
           enterActive: "smwb-image-modal__overlay-enter-active",
           enterDone: "smwb-image-modal__overlay-enter-done"
         },
         mountOnEnter: !0,
         unmountOnExit: !0,
-        nodeRef: m,
-        children: /* @__PURE__ */ e("div", { className: "smwb-image-modal__overlay", onClick: a, ref: m, children: /* @__PURE__ */ e("div", { className: "smwb-image-modal", onClick: (r) => r.stopPropagation(), children: /* @__PURE__ */ e("img", { src: o, alt: "", className: "smwb-image-modal__img" }) }) })
+        nodeRef: o,
+        children: /* @__PURE__ */ e("div", { className: "smwb-image-modal__overlay", onClick: m, ref: o, children: /* @__PURE__ */ e("div", { className: "smwb-image-modal", onClick: (i) => i.stopPropagation(), children: /* @__PURE__ */ e("img", { src: a, alt: "", className: "smwb-image-modal__img" }) }) })
       }
     ),
-    document.body
-  );
+    t
+  ) : null;
 };
 export {
-  g as default
+  b as default
 };
 //# sourceMappingURL=imagesListItemModal.js.map

package/dist/headless/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"imagesListItemModal.js","sources":["../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport interface ImagesListItemModalProps {\n  src: string;\n  onClose: () => void;\n  isOpen: boolean;\n}\n\nconst ImagesListItemModal = ({ src, onClose, isOpen }: ImagesListItemModalProps) => {\n  const nodeRef = useRef<HTMLDivElement>(null);\n  return createPortal(\n    <CSSTransition\n      timeout={100}\n      in={isOpen}\n      classNames={{\n        enterActive: \"smwb-image-modal__overlay-enter-active\",\n        enterDone: \"smwb-image-modal__overlay-enter-done\",\n      }}\n      mountOnEnter\n      unmountOnExit\n      nodeRef={nodeRef}\n    >\n      <div className=\"smwb-image-modal__overlay\" onClick={onClose} ref={nodeRef}>\n        <div className=\"smwb-image-modal\" onClick={(e) => e.stopPropagation()}>\n          <img src={src} alt=\"\" className=\"smwb-image-modal__img\" />\n        </div>\n      </div>\n    </CSSTransition>,\n    document.body\n  );\n};\n\nexport default ImagesListItemModal;\n"],"names":["ImagesListItemModal","src","onClose","isOpen","nodeRef","useRef","createPortal","jsx","CSSTransition","e"],"mappings":";;;;AAUA,MAAMA,IAAsB,CAAC,EAAE,KAAAC,GAAK,SAAAC,GAAS,QAAAC,QAAuC;AAClF,QAAMC,IAAUC,EAAuB,IAAI;AAC3C,SAAOC;AAAA,IACL,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,IAAIL;AAAA,QACJ,YAAY;AAAA,UACV,aAAa;AAAA,UACb,WAAW;AAAA,QAAA;AAAA,QAEb,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,SAAAC;AAAA,QAEA,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,6BAA4B,SAASL,GAAS,KAAKE,GAChE,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,oBAAmB,SAAS,CAACE,MAAMA,EAAE,gBAAA,GAClD,UAAA,gBAAAF,EAAC,OAAA,EAAI,KAAAN,GAAU,KAAI,IAAG,WAAU,wBAAA,CAAwB,EAAA,CAC1D,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,SAAS;AAAA,EAAA;AAEb;"}
+{"version":3,"file":"imagesListItemModal.js","sources":["../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useSafeLayoutEffect } from \"../../../../hooks/useSafeLayoutEffect\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport interface ImagesListItemModalProps {\n  src: string;\n  onClose: () => void;\n  isOpen: boolean;\n}\n\nconst ImagesListItemModal = ({ src, onClose, isOpen }: ImagesListItemModalProps) => {\n  const nodeRef = useRef<HTMLDivElement>(null);\n  // The viewer is portalled: its target is resolved in the browser only, so the\n  // image list renders on the server and hydrates.\n  const [portalRoot, setPortalRoot] = useState<HTMLElement>();\n  useSafeLayoutEffect(() => {\n    setPortalRoot(document.body);\n  }, []);\n  if (!portalRoot) return null;\n  return createPortal(\n    <CSSTransition\n      timeout={100}\n      in={isOpen}\n      classNames={{\n        enterActive: \"smwb-image-modal__overlay-enter-active\",\n        enterDone: \"smwb-image-modal__overlay-enter-done\",\n      }}\n      mountOnEnter\n      unmountOnExit\n      nodeRef={nodeRef}\n    >\n      <div className=\"smwb-image-modal__overlay\" onClick={onClose} ref={nodeRef}>\n        <div className=\"smwb-image-modal\" onClick={(e) => e.stopPropagation()}>\n          <img src={src} alt=\"\" className=\"smwb-image-modal__img\" />\n        </div>\n      </div>\n    </CSSTransition>,\n    portalRoot\n  );\n};\n\nexport default ImagesListItemModal;\n"],"names":["ImagesListItemModal","src","onClose","isOpen","nodeRef","useRef","portalRoot","setPortalRoot","useState","useSafeLayoutEffect","createPortal","jsx","CSSTransition","e"],"mappings":";;;;;AAWA,MAAMA,IAAsB,CAAC,EAAE,KAAAC,GAAK,SAAAC,GAAS,QAAAC,QAAuC;AAClF,QAAMC,IAAUC,EAAuB,IAAI,GAGrC,CAACC,GAAYC,CAAa,IAAIC,EAAA;AAIpC,SAHAC,EAAoB,MAAM;AACxB,IAAAF,EAAc,SAAS,IAAI;AAAA,EAC7B,GAAG,CAAA,CAAE,GACAD,IACEI;AAAA,IACL,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,IAAIT;AAAA,QACJ,YAAY;AAAA,UACV,aAAa;AAAA,UACb,WAAW;AAAA,QAAA;AAAA,QAEb,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,SAAAC;AAAA,QAEA,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,6BAA4B,SAAST,GAAS,KAAKE,GAChE,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,oBAAmB,SAAS,CAACE,MAAMA,EAAE,gBAAA,GAClD,UAAA,gBAAAF,EAAC,OAAA,EAAI,KAAAV,GAAU,KAAI,IAAG,WAAU,wBAAA,CAAwB,EAAA,CAC1D,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEFK;AAAA,EAAA,IAnBsB;AAqB1B;"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"meter.js","sources":["../../../../../src/components/dataDisplay/meter/meter.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport type MeterColor = \"neutral\" | \"primary\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\n/** From this share of `max` (0–1) on, the meter takes `color`. */\nexport interface MeterThreshold {\n  from: number;\n  color: MeterColor;\n}\n\n/** Info while under way, success when complete. */\nexport const DEFAULT_METER_THRESHOLDS: readonly MeterThreshold[] = [\n  { from: 0, color: \"info\" },\n  { from: 1, color: \"success\" },\n];\n\nexport interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"role\"> {\n  className?: string;\n  /** How many are done (X of Y). */\n  value: number;\n  /** How many there are in all (X of Y). */\n  max: number;\n  /** What is measured — the accessible name, e.g. \"Requirements accepted\". */\n  label: string;\n  /** Visible text instead of \"X of Y\": markup, or a function of (value, max). */\n  text?: ReactNode | ((value: number, max: number) => ReactNode);\n  /** The word between the figures in the default text and in aria-valuetext. */\n  ofLabel?: string;\n  /** Colour by share of `max`: the last threshold the share reaches wins. */\n  thresholds?: readonly MeterThreshold[];\n  /** A fixed colour, instead of the thresholds. */\n  color?: MeterColor;\n  /** The bar only; the text stays available to assistive technology. */\n  hideText?: boolean;\n}\n\n/** The colour for a share of the whole: the last threshold (by `from`) the share reaches. */\nexport function meterColor(share: number, thresholds: readonly MeterThreshold[]): MeterColor {\n  let color: MeterColor = \"neutral\";\n  let from = -Infinity;\n  for (const threshold of thresholds) {\n    if (share >= threshold.from && threshold.from >= from) {\n      color = threshold.color;\n      from = threshold.from;\n    }\n  }\n  return color;\n}\n\n/** A share of a whole, \"X of Y\": a bar and the figures beside it, coloured by thresholds. */\nexport const Meter = React.forwardRef<HTMLDivElement, MeterProps>(function Meter(\n  {\n    className,\n    value,\n    max,\n    label,\n    text,\n    ofLabel = \"of\",\n    thresholds = DEFAULT_METER_THRESHOLDS,\n    color,\n    hideText,\n    ...rest\n  },\n  ref\n) {\n  const share = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;\n  const tone = color ?? meterColor(share, thresholds);\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      role=\"meter\"\n      aria-label={label}\n      aria-valuenow={value}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-valuetext={`${value} ${ofLabel} ${max}`}\n      data-testid=\"meter\"\n      className={cn(\"smwb-meter\", `smwb-meter_color-${tone}`, { \"smwb-meter_bar-only\": hideText }, className)}\n    >\n      <span className=\"smwb-meter__track\" aria-hidden=\"true\">\n        <span className=\"smwb-meter__fill\" style={{ width: `${share * 100}%` }} />\n      </span>\n      {hideText ? null : (\n        <span className=\"smwb-meter__text\" aria-hidden=\"true\">\n          {text === undefined ? (\n            <>\n              <b className=\"smwb-meter__value\">{value}</b>\n              <span className=\"smwb-meter__of\">\n                {\" \"}\n                {ofLabel} {max}\n              </span>\n            </>\n          ) : typeof text === \"function\" ? (\n            text(value, max)\n          ) : (\n            text\n          )}\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport default Meter;\n"],"names":["DEFAULT_METER_THRESHOLDS","meterColor","share","thresholds","color","from","threshold","Meter","React","className","value","max","label","text","ofLabel","hideText","rest","ref","tone","jsxs","cn","jsx","Fragment"],"mappings":";;;AAYO,MAAMA,IAAsD;AAAA,EACjE,EAAE,MAAM,GAAG,OAAO,OAAA;AAAA,EAClB,EAAE,MAAM,GAAG,OAAO,UAAA;AACpB;AAuBO,SAASC,EAAWC,GAAeC,GAAmD;AAC3F,MAAIC,IAAoB,WACpBC,IAAO;AACX,aAAWC,KAAaH;AACtB,IAAID,KAASI,EAAU,QAAQA,EAAU,QAAQD,MAC/CD,IAAQE,EAAU,OAClBD,IAAOC,EAAU;AAGrB,SAAOF;AACT;AAGO,MAAMG,IAAQC,EAAM,WAAuC,SAChE;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,YAAAX,IAAaH;AAAA,EACb,OAAAI;AAAA,EACA,UAAAW;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMf,IAAQS,IAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGD,IAAQC,CAAG,CAAC,IAAI,GAC1DO,IAAOd,KAAA,OAAAA,IAASH,EAAWC,GAAOC,CAAU;AAClD,SACE,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,KAAAC;AAAA,MACA,MAAK;AAAA,MACL,cAAYL;AAAA,MACZ,iBAAeF;AAAA,MACf,iBAAe;AAAA,MACf,iBAAeC;AAAA,MACf,kBAAgB,GAAGD,CAAK,IAAII,CAAO,IAAIH,CAAG;AAAA,MAC1C,eAAY;AAAA,MACZ,WAAWS,EAAG,cAAc,oBAAoBF,CAAI,IAAI,EAAE,uBAAuBH,EAAA,GAAYN,CAAS;AAAA,MAEtG,UAAA;AAAA,QAAA,gBAAAY,EAAC,UAAK,WAAU,qBAAoB,eAAY,QAC9C,4BAAC,QAAA,EAAK,WAAU,oBAAmB,OAAO,EAAE,OAAO,GAAGnB,IAAQ,GAAG,OAAO,GAC1E;AAAA,QACCa,IAAW,OACV,gBAAAM,EAAC,QAAA,EAAK,WAAU,oBAAmB,eAAY,QAC5C,UAAAR,MAAS,SACR,gBAAAM,EAAAG,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAD,EAAC,KAAA,EAAE,WAAU,qBAAqB,UAAAX,GAAM;AAAA,UACxC,gBAAAS,EAAC,QAAA,EAAK,WAAU,kBACb,UAAA;AAAA,YAAA;AAAA,YACAL;AAAA,YAAQ;AAAA,YAAEH;AAAA,UAAA,EAAA,CACb;AAAA,QAAA,GACF,IACE,OAAOE,KAAS,aAClBA,EAAKH,GAAOC,CAAG,IAEfE,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"personChip.js","sources":["../../../../../src/components/dataDisplay/personChip/personChip.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport { Avatar, type AvatarSize } from \"../avatar\";\n\n/** Up to two initials from a name: \"Anna Petrova\" → \"AP\", \"anna\" → \"A\". */\nexport function initialsOf(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  const first = (word: string | undefined): string => (word ? (Array.from(word)[0] ?? \"\") : \"\");\n  return (first(words[0]) + (words.length > 1 ? first(words[words.length - 1]) : \"\")).toUpperCase();\n}\n\n/**\n * A steady background colour for a person's avatar, derived from a seed (an id\n * or the name): the same person always gets the same colour, on the server too.\n */\nexport function avatarColor(seed: string): string {\n  let hash = 0;\n  for (const char of seed) hash = (hash * 31 + (char.codePointAt(0) ?? 0)) >>> 0;\n  return `hsl(${hash % 360} 42% 42%)`;\n}\n\nexport interface PersonChipProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  className?: string;\n  /** The person's name: shown beside the avatar, and the source of its initials. */\n  name: string;\n  /** Avatar image; initials on a colour without it or when it fails. */\n  src?: string;\n  /** Link to the person's card. */\n  href?: string;\n  /** The avatar only; the name becomes its tooltip and accessible name. */\n  compact?: boolean;\n  /** Avatar size: a preset or pixels. 24px by default. */\n  size?: AvatarSize | number;\n  /** Seed for the avatar colour (an id); the name by default. */\n  colorSeed?: string;\n  /** A fixed avatar colour instead of the derived one. */\n  color?: string;\n  /** A second line under the name: a role, a date. */\n  meta?: ReactNode;\n}\n\n/** A person: avatar and name, a link to their card when `href` is set. */\nexport const PersonChip = React.forwardRef<HTMLElement, PersonChipProps>(function PersonChip(\n  { className, name, src, href, compact, size = 24, colorSeed, color, meta, ...rest },\n  ref\n) {\n  const Tag = (href ? \"a\" : \"span\") as \"span\";\n  return (\n    <Tag\n      {...rest}\n      ref={ref}\n      {...(href ? { href } : {})}\n      title={compact ? name : undefined}\n      role={compact && !href ? \"img\" : undefined}\n      aria-label={compact ? name : undefined}\n      data-testid=\"person-chip\"\n      className={cn(\n        \"smwb-person-chip\",\n        { \"smwb-person-chip_link\": !!href, \"smwb-person-chip_compact\": compact },\n        className\n      )}\n    >\n      <Avatar\n        className=\"smwb-person-chip__avatar\"\n        size={size}\n        src={src}\n        color={color ?? avatarColor(colorSeed ?? name)}\n        aria-hidden=\"true\"\n      >\n        {initialsOf(name)}\n      </Avatar>\n      {compact ? null : (\n        <span className=\"smwb-person-chip__text\">\n          <span className=\"smwb-person-chip__name\">{name}</span>\n          {meta ? <span className=\"smwb-person-chip__meta\">{meta}</span> : null}\n        </span>\n      )}\n    </Tag>\n  );\n});\n\nexport default PersonChip;\n"],"names":["initialsOf","name","words","first","word","_a","avatarColor","seed","hash","char","PersonChip","React","className","src","href","compact","size","colorSeed","color","meta","rest","ref","jsxs","cn","jsx","Avatar"],"mappings":";;;;AAKO,SAASA,EAAWC,GAAsB;AAC/C,QAAMC,IAAQD,EAAK,KAAA,EAAO,MAAM,KAAK,EAAE,OAAO,OAAO,GAC/CE,IAAQ,CAACC,MAAA;;AAAsC,WAAAA,MAAQC,IAAA,MAAM,KAAKD,CAAI,EAAE,CAAC,MAAlB,OAAAC,IAA6B;AAAA;AAC1F,UAAQF,EAAMD,EAAM,CAAC,CAAC,KAAKA,EAAM,SAAS,IAAIC,EAAMD,EAAMA,EAAM,SAAS,CAAC,CAAC,IAAI,KAAK,YAAA;AACtF;AAMO,SAASI,EAAYC,GAAsB;;AAChD,MAAIC,IAAO;AACX,aAAWC,KAAQF,EAAM,CAAAC,IAAQA,IAAO,OAAMH,IAAAI,EAAK,YAAY,CAAC,MAAlB,OAAAJ,IAAuB,OAAQ;AAC7E,SAAO,OAAOG,IAAO,GAAG;AAC1B;AAuBO,MAAME,IAAaC,EAAM,WAAyC,SACvE,EAAE,WAAAC,GAAW,MAAAX,GAAM,KAAAY,GAAK,MAAAC,GAAM,SAAAC,GAAS,MAAAC,IAAO,IAAI,WAAAC,GAAW,OAAAC,GAAO,MAAAC,GAAM,GAAGC,EAAA,GAC7EC,GACA;AAEA,SACE,gBAAAC;AAAA,IAFWR,IAAO,MAAM;AAAA,IAEvB;AAAA,MACE,GAAGM;AAAA,MACJ,KAAAC;AAAA,MACC,GAAIP,IAAO,EAAE,MAAAA,EAAA,IAAS,CAAA;AAAA,MACvB,OAAOC,IAAUd,IAAO;AAAA,MACxB,MAAMc,KAAW,CAACD,IAAO,QAAQ;AAAA,MACjC,cAAYC,IAAUd,IAAO;AAAA,MAC7B,eAAY;AAAA,MACZ,WAAWsB;AAAA,QACT;AAAA,QACA,EAAE,yBAAyB,CAAC,CAACT,GAAM,4BAA4BC,EAAA;AAAA,QAC/DH;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAAT;AAAA,YACA,KAAAH;AAAA,YACA,OAAOK,KAAA,OAAAA,IAASZ,EAAYW,KAAA,OAAAA,IAAahB,CAAI;AAAA,YAC7C,eAAY;AAAA,YAEX,YAAWA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAEjBc,IAAU,OACT,gBAAAO,EAAC,QAAA,EAAK,WAAU,0BACd,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAvB,GAAK;AAAA,UAC9CkB,IAAO,gBAAAK,EAAC,QAAA,EAAK,WAAU,0BAA0B,aAAK,IAAU;AAAA,QAAA,EAAA,CACnE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}