@mattermost/compass-ui 0.1.0-alpha.12 → 0.1.0-alpha.13

package/dist/components/user-avatar-group/UserAvatarGroup.css

@@ -1 +1 @@
-._user-avatar-group_sgxpf_2{display:inline-flex;align-items:center;padding-right:var(--spacing-xxxxs)}._user-avatar-group__item_sgxpf_7{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin-right:-2px;border-radius:var(--radius-full);outline:1px solid var(--center-channel-bg, var(--color-neutral-0));transform:scale(1);transition:transform var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._user-avatar-group__item_sgxpf_7:hover{z-index:10;transform:scale(1.04);box-shadow:var(--elevation-2)}._user-avatar-group__item_sgxpf_7:hover ._user-avatar-group__tooltip-layer_sgxpf_26{opacity:1;visibility:visible;transition:opacity var(--duration-quick) var(--ease-entrance),visibility 0s linear 0s}._user-avatar-group__trigger_sgxpf_31{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:inherit;overflow:hidden}._user-avatar-group__tooltip-layer_sgxpf_26{position:absolute;left:50%;bottom:100%;z-index:20;margin-bottom:var(--spacing-xxxxs);transform:translate(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-exit),visibility 0s linear var(--duration-quick)}._user-avatar-group__tooltip_sgxpf_26{flex-shrink:0}._user-avatar-group__overflow_sgxpf_55{display:inline-flex;align-items:center;justify-content:center;background-color:var(--center-channel-bg);background-image:linear-gradient(rgba(var(--center-channel-color-rgb),.08),rgba(var(--center-channel-color-rgb),.08));color:rgba(var(--center-channel-color-rgb),.56);font-size:var(--font-size-25);font-weight:var(--font-weight-semibold);letter-spacing:.01em;border-radius:var(--radius-full)}._user-avatar-group--size-24_sgxpf_67{padding-right:3px}._user-avatar-group--size-24_sgxpf_67 ._user-avatar-group__item_sgxpf_7{width:24px;height:24px;margin-right:-3px;outline-width:1px}._user-avatar-group--size-24_sgxpf_67 ._user-avatar-group__overflow_sgxpf_55{font-size:var(--font-size-50)}._user-avatar-group--size-28_sgxpf_79{padding-right:3px}._user-avatar-group--size-28_sgxpf_79 ._user-avatar-group__item_sgxpf_7{width:28px;height:28px;margin-right:-3px;outline-width:2px}._user-avatar-group--size-28_sgxpf_79 ._user-avatar-group__overflow_sgxpf_55{font-size:var(--font-size-75)}._user-avatar-group--size-32_sgxpf_91{padding-right:3px}._user-avatar-group--size-32_sgxpf_91 ._user-avatar-group__item_sgxpf_7{width:32px;height:32px;margin-right:-3px;outline-width:2px}._user-avatar-group--size-32_sgxpf_91 ._user-avatar-group__overflow_sgxpf_55{font-size:var(--font-size-75)}._user-avatar-group--size-40_sgxpf_103{padding-right:5px}._user-avatar-group--size-40_sgxpf_103 ._user-avatar-group__item_sgxpf_7{width:40px;height:40px;margin-right:-5px;outline-width:2px}._user-avatar-group--size-40_sgxpf_103 ._user-avatar-group__overflow_sgxpf_55{font-size:var(--font-size-100)}._user-avatar-group--size-48_sgxpf_115{padding-right:7px}._user-avatar-group--size-48_sgxpf_115 ._user-avatar-group__item_sgxpf_7{width:48px;height:48px;margin-right:-7px;outline-width:2px}._user-avatar-group--size-48_sgxpf_115 ._user-avatar-group__overflow_sgxpf_55{font-size:var(--font-size-200)}._user-avatar-group--size-56_sgxpf_127{padding-right:8px}._user-avatar-group--size-56_sgxpf_127 ._user-avatar-group__item_sgxpf_7{width:56px;height:56px;margin-right:-8px;outline-width:2px}._user-avatar-group--size-56_sgxpf_127 ._user-avatar-group__overflow_sgxpf_55{font-size:var(--font-size-300)}._user-avatar-group--size-64_sgxpf_139{padding-right:9px}._user-avatar-group--size-64_sgxpf_139 ._user-avatar-group__item_sgxpf_7{width:64px;height:64px;margin-right:-9px;outline-width:2px}._user-avatar-group--size-64_sgxpf_139 ._user-avatar-group__overflow_sgxpf_55{font-size:var(--font-size-400)}._user-avatar-group--size-72_sgxpf_151{padding-right:10px}._user-avatar-group--size-72_sgxpf_151 ._user-avatar-group__item_sgxpf_7{width:72px;height:72px;margin-right:-10px;outline-width:2px}._user-avatar-group--size-72_sgxpf_151 ._user-avatar-group__overflow_sgxpf_55{font-size:var(--font-size-500)}
+._user-avatar-group_17zfx_2{display:inline-flex;align-items:center;padding-right:var(--spacing-xxxxs)}._user-avatar-group__item_17zfx_7{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin-right:-2px;border-radius:var(--radius-pill);outline:1px solid var(--center-channel-bg, var(--color-neutral-0));transform:scale(1);transition:transform var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._user-avatar-group__item_17zfx_7:hover{z-index:10;transform:scale(1.04);box-shadow:var(--elevation-2)}._user-avatar-group__item_17zfx_7:hover ._user-avatar-group__tooltip-layer_17zfx_26{opacity:1;visibility:visible;transition:opacity var(--duration-quick) var(--ease-entrance),visibility 0s linear 0s}._user-avatar-group__trigger_17zfx_31{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:inherit;overflow:hidden}._user-avatar-group__tooltip-layer_17zfx_26{position:absolute;left:50%;bottom:100%;z-index:20;margin-bottom:var(--spacing-xxxxs);transform:translate(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-exit),visibility 0s linear var(--duration-quick)}._user-avatar-group__tooltip_17zfx_26{flex-shrink:0}._user-avatar-group__overflow_17zfx_55{display:inline-flex;align-items:center;justify-content:center;background-color:var(--center-channel-bg);background-image:linear-gradient(rgba(var(--center-channel-color-rgb),.08),rgba(var(--center-channel-color-rgb),.08));color:rgba(var(--center-channel-color-rgb),.56);font-size:var(--font-size-25);font-weight:var(--font-weight-semibold);letter-spacing:.01em;border-radius:var(--radius-pill)}._user-avatar-group--size-24_17zfx_67{padding-right:3px}._user-avatar-group--size-24_17zfx_67 ._user-avatar-group__item_17zfx_7{width:24px;height:24px;margin-right:-3px;outline-width:1px}._user-avatar-group--size-24_17zfx_67 ._user-avatar-group__overflow_17zfx_55{font-size:var(--font-size-50)}._user-avatar-group--size-28_17zfx_79{padding-right:3px}._user-avatar-group--size-28_17zfx_79 ._user-avatar-group__item_17zfx_7{width:28px;height:28px;margin-right:-3px;outline-width:2px}._user-avatar-group--size-28_17zfx_79 ._user-avatar-group__overflow_17zfx_55{font-size:var(--font-size-75)}._user-avatar-group--size-32_17zfx_91{padding-right:3px}._user-avatar-group--size-32_17zfx_91 ._user-avatar-group__item_17zfx_7{width:32px;height:32px;margin-right:-3px;outline-width:2px}._user-avatar-group--size-32_17zfx_91 ._user-avatar-group__overflow_17zfx_55{font-size:var(--font-size-75)}._user-avatar-group--size-40_17zfx_103{padding-right:5px}._user-avatar-group--size-40_17zfx_103 ._user-avatar-group__item_17zfx_7{width:40px;height:40px;margin-right:-5px;outline-width:2px}._user-avatar-group--size-40_17zfx_103 ._user-avatar-group__overflow_17zfx_55{font-size:var(--font-size-100)}._user-avatar-group--size-48_17zfx_115{padding-right:7px}._user-avatar-group--size-48_17zfx_115 ._user-avatar-group__item_17zfx_7{width:48px;height:48px;margin-right:-7px;outline-width:2px}._user-avatar-group--size-48_17zfx_115 ._user-avatar-group__overflow_17zfx_55{font-size:var(--font-size-200)}._user-avatar-group--size-56_17zfx_127{padding-right:8px}._user-avatar-group--size-56_17zfx_127 ._user-avatar-group__item_17zfx_7{width:56px;height:56px;margin-right:-8px;outline-width:2px}._user-avatar-group--size-56_17zfx_127 ._user-avatar-group__overflow_17zfx_55{font-size:var(--font-size-300)}._user-avatar-group--size-64_17zfx_139{padding-right:9px}._user-avatar-group--size-64_17zfx_139 ._user-avatar-group__item_17zfx_7{width:64px;height:64px;margin-right:-9px;outline-width:2px}._user-avatar-group--size-64_17zfx_139 ._user-avatar-group__overflow_17zfx_55{font-size:var(--font-size-400)}._user-avatar-group--size-72_17zfx_151{padding-right:10px}._user-avatar-group--size-72_17zfx_151 ._user-avatar-group__item_17zfx_7{width:72px;height:72px;margin-right:-10px;outline-width:2px}._user-avatar-group--size-72_17zfx_151 ._user-avatar-group__overflow_17zfx_55{font-size:var(--font-size-500)}

package/dist/components/user-avatar-group/UserAvatarGroup.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 export type UserAvatarGroupSize = '20' | '24' | '28' | '32' | '40' | '48' | '56' | '64' | '72';
 export interface UserAvatarGroupItem {
     /** Unique key for the list item. */
@@ -16,11 +17,17 @@ export interface UserAvatarGroupProps {
     size?: UserAvatarGroupSize;
     /** Optional CSS class name. */
     className?: string;
+    /** Accessible name for the group. Default: `{count} participants`. */
+    formatGroupLabel?: (count: number) => string;
+    /** Accessible name for the +N overflow. Default: `{count} more participants`. */
+    formatOverflowLabel?: (count: number) => string;
+    /** Overflow tooltip text. Default: up to three names, then `A, B, +N more`. */
+    formatOverflowNames?: (hidden: UserAvatarGroupItem[]) => ReactNode;
 }
 /**
  * A User Avatar Group displays multiple participants as a stack of overlapping avatars. It's
  * a compact way to show "who's involved" — thread participants, channel members, call
  * attendees — without a list.
  */
-export default function UserAvatarGroup({ avatars, className, max, size, }: UserAvatarGroupProps): import("react/jsx-runtime").JSX.Element;
+export default function UserAvatarGroup({ avatars, className, max, size, formatGroupLabel, formatOverflowLabel, formatOverflowNames, }: UserAvatarGroupProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=UserAvatarGroup.d.ts.map

package/dist/components/user-avatar-group/UserAvatarGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserAvatarGroup.d.ts","sourceRoot":"","sources":["../../../src/components/user-avatar-group/UserAvatarGroup.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,mBAAmB,GAC3B,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,CAAC;AAET,MAAM,WAAW,mBAAmB;IAClC,oCAAoC;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,gFAAgF;IAChF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAoB;IACnC,wCAAwC;IACxC,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,uFAAuF;IACvF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iFAAiF;IACjF,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,OAAO,EACP,SAAc,EACd,GAAO,EACP,IAAW,GACZ,EAAE,oBAAoB,2CAkEtB"}
+{"version":3,"file":"UserAvatarGroup.d.ts","sourceRoot":"","sources":["../../../src/components/user-avatar-group/UserAvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,mBAAmB,GAC3B,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,CAAC;AAET,MAAM,WAAW,mBAAmB;IAClC,oCAAoC;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,gFAAgF;IAChF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAoB;IACnC,wCAAwC;IACxC,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,uFAAuF;IACvF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iFAAiF;IACjF,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,iFAAiF;IACjF,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAChD,+EAA+E;IAC/E,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,EAAE,KAAK,SAAS,CAAC;CACpE;AAgBD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,OAAO,EACP,SAAc,EACd,GAAO,EACP,IAAW,EACX,gBAA0C,EAC1C,mBAAgD,EAChD,mBAAwC,GACzC,EAAE,oBAAoB,2CAkEtB"}

package/dist/components/user-avatar-group/UserAvatarGroup.js

@@ -1,36 +1,40 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import m from "../tooltip/Tooltip.js";
-import g from "../user-avatar/UserAvatar.js";
+import v from "../user-avatar/UserAvatar.js";
 import a from "./UserAvatarGroup.module.scss.js";
-function _(r) {
+const b = (r) => `${r} participants`, N = (r) => `${r} more participants`;
+function h(r) {
   return r.length === 0 ? "" : r.length === 1 ? r[0].name : r.length <= 3 ? r.map((o) => o.name).join(", ") : `${r.slice(0, 2).map((o) => o.name).join(", ")}, +${r.length - 2} more`;
 }
-function h({
+function d({
   avatars: r,
   className: o = "",
   max: i = 3,
-  size: l = "20"
+  size: s = "20",
+  formatGroupLabel: u = b,
+  formatOverflowLabel: c = N,
+  formatOverflowNames: g = h
 }) {
-  const u = r.slice(0, i), p = r.slice(i), n = p.length, c = [
+  const _ = r.slice(0, i), p = r.slice(i), n = p.length, f = [
     a["user-avatar-group"],
-    l !== "20" ? a[`user-avatar-group--size-${l}`] : "",
+    s !== "20" ? a[`user-avatar-group--size-${s}`] : "",
     o
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(
     "div",
     {
-      className: c,
+      className: f,
       role: "group",
-      "aria-label": `${r.length} participants`,
+      "aria-label": u(r.length),
       children: [
-        u.map((t) => /* @__PURE__ */ s("span", { className: a["user-avatar-group__item"], children: [
+        _.map((t) => /* @__PURE__ */ l("span", { className: a["user-avatar-group__item"], children: [
           /* @__PURE__ */ e("span", { className: a["user-avatar-group__trigger"], children: /* @__PURE__ */ e(
-            g,
+            v,
             {
               src: t.src,
               alt: t.name,
               name: t.name,
-              size: l
+              size: s
             }
           ) }),
           /* @__PURE__ */ e(
@@ -49,16 +53,16 @@ function h({
             }
           )
         ] }, t.key)),
-        n > 0 && /* @__PURE__ */ s(
+        n > 0 && /* @__PURE__ */ l(
           "span",
           {
             className: [
               a["user-avatar-group__item"],
               a["user-avatar-group__overflow"]
             ].join(" "),
-            "aria-label": `${n} more participants`,
+            "aria-label": c(n),
             children: [
-              /* @__PURE__ */ s("span", { className: a["user-avatar-group__trigger"], children: [
+              /* @__PURE__ */ l("span", { className: a["user-avatar-group__trigger"], children: [
                 "+",
                 n
               ] }),
@@ -72,7 +76,7 @@ function h({
                     {
                       arrow: "bottom",
                       className: a["user-avatar-group__tooltip"],
-                      label: _(p)
+                      label: g(p)
                     }
                   )
                 }
@@ -85,6 +89,6 @@ function h({
   );
 }
 export {
-  h as default
+  d as default
 };
 //# sourceMappingURL=UserAvatarGroup.js.map

package/dist/components/user-avatar-group/UserAvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserAvatarGroup.js","sources":["../../../src/components/user-avatar-group/UserAvatarGroup.tsx"],"sourcesContent":["import Tooltip from '@/components/tooltip/Tooltip';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport styles from './UserAvatarGroup.module.scss';\n\nexport type UserAvatarGroupSize =\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '48'\n  | '56'\n  | '64'\n  | '72';\n\nexport interface UserAvatarGroupItem {\n  /** Unique key for the list item. */\n  key: string;\n  /** Image URL for the avatar. Omit to render the Fallback (initials) variant. */\n  src?: string;\n  /** Alt text / display name for the avatar. Drives initials and fallback colour. */\n  name: string;\n}\n\nexport interface UserAvatarGroupProps {\n  /** Array of avatar items to display. */\n  avatars: UserAvatarGroupItem[];\n  /** Maximum number of avatars to show before showing the overflow count. Default: 3. */\n  max?: number;\n  /** Avatar size in px. Matches Figma Avatar Group size options. Default: '20'. */\n  size?: UserAvatarGroupSize;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\nfunction overflowNamesLabel(hidden: UserAvatarGroupItem[]): string {\n  if (hidden.length === 0) return '';\n  if (hidden.length === 1) return hidden[0].name;\n  if (hidden.length <= 3) return hidden.map((a) => a.name).join(', ');\n  return `${hidden\n    .slice(0, 2)\n    .map((a) => a.name)\n    .join(', ')}, +${hidden.length - 2} more`;\n}\n\n/**\n * A User Avatar Group displays multiple participants as a stack of overlapping avatars. It's\n * a compact way to show \"who's involved\" — thread participants, channel members, call\n * attendees — without a list.\n */\nexport default function UserAvatarGroup({\n  avatars,\n  className = '',\n  max = 3,\n  size = '20',\n}: UserAvatarGroupProps) {\n  const visible = avatars.slice(0, max);\n  const hidden = avatars.slice(max);\n  const overflow = hidden.length;\n\n  const rootClass = [\n    styles['user-avatar-group'],\n    size !== '20' ? styles[`user-avatar-group--size-${size}`] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      className={rootClass}\n      role=\"group\"\n      aria-label={`${avatars.length} participants`}\n    >\n      {visible.map((avatar) => (\n        <span key={avatar.key} className={styles['user-avatar-group__item']}>\n          <span className={styles['user-avatar-group__trigger']}>\n            <UserAvatar\n              src={avatar.src}\n              alt={avatar.name}\n              name={avatar.name}\n              size={size}\n            />\n          </span>\n          <div\n            className={styles['user-avatar-group__tooltip-layer']}\n            role=\"presentation\"\n          >\n            <Tooltip\n              arrow=\"bottom\"\n              className={styles['user-avatar-group__tooltip']}\n              label={avatar.name}\n            />\n          </div>\n        </span>\n      ))}\n      {overflow > 0 && (\n        <span\n          className={[\n            styles['user-avatar-group__item'],\n            styles['user-avatar-group__overflow'],\n          ].join(' ')}\n          aria-label={`${overflow} more participants`}\n        >\n          <span className={styles['user-avatar-group__trigger']}>\n            +{overflow}\n          </span>\n          <div\n            className={styles['user-avatar-group__tooltip-layer']}\n            role=\"presentation\"\n          >\n            <Tooltip\n              arrow=\"bottom\"\n              className={styles['user-avatar-group__tooltip']}\n              label={overflowNamesLabel(hidden)}\n            />\n          </div>\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["overflowNamesLabel","hidden","a","UserAvatarGroup","avatars","className","max","size","visible","overflow","rootClass","styles","jsxs","avatar","jsx","UserAvatar","Tooltip"],"mappings":";;;;AAmCA,SAASA,EAAmBC,GAAuC;AACjE,SAAIA,EAAO,WAAW,IAAU,KAC5BA,EAAO,WAAW,IAAUA,EAAO,CAAC,EAAE,OACtCA,EAAO,UAAU,IAAUA,EAAO,IAAI,CAACC,MAAMA,EAAE,IAAI,EAAE,KAAK,IAAI,IAC3D,GAAGD,EACP,MAAM,GAAG,CAAC,EACV,IAAI,CAACC,MAAMA,EAAE,IAAI,EACjB,KAAK,IAAI,CAAC,MAAMD,EAAO,SAAS,CAAC;AACtC;AAOA,SAAwBE,EAAgB;AAAA,EACtC,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,KAAAC,IAAM;AAAA,EACN,MAAAC,IAAO;AACT,GAAyB;AACvB,QAAMC,IAAUJ,EAAQ,MAAM,GAAGE,CAAG,GAC9BL,IAASG,EAAQ,MAAME,CAAG,GAC1BG,IAAWR,EAAO,QAElBS,IAAY;AAAA,IAChBC,EAAO,mBAAmB;AAAA,IAC1BJ,MAAS,OAAOI,EAAO,2BAA2BJ,CAAI,EAAE,IAAI;AAAA,IAC5DF;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,MAAK;AAAA,MACL,cAAY,GAAGN,EAAQ,MAAM;AAAA,MAE5B,UAAA;AAAA,QAAAI,EAAQ,IAAI,CAACK,MACZ,gBAAAD,EAAC,UAAsB,WAAWD,EAAO,yBAAyB,GAChE,UAAA;AAAA,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWH,EAAO,4BAA4B,GAClD,UAAA,gBAAAG;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,KAAKF,EAAO;AAAA,cACZ,KAAKA,EAAO;AAAA,cACZ,MAAMA,EAAO;AAAA,cACb,MAAAN;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,UACA,gBAAAO;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWH,EAAO,kCAAkC;AAAA,cACpD,MAAK;AAAA,cAEL,UAAA,gBAAAG;AAAA,gBAACE;AAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,WAAWL,EAAO,4BAA4B;AAAA,kBAC9C,OAAOE,EAAO;AAAA,gBAAA;AAAA,cAAA;AAAA,YAChB;AAAA,UAAA;AAAA,QACF,KAlBSA,EAAO,GAmBlB,CACD;AAAA,QACAJ,IAAW,KACV,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACTD,EAAO,yBAAyB;AAAA,cAChCA,EAAO,6BAA6B;AAAA,YAAA,EACpC,KAAK,GAAG;AAAA,YACV,cAAY,GAAGF,CAAQ;AAAA,YAEvB,UAAA;AAAA,cAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWD,EAAO,4BAA4B,GAAG,UAAA;AAAA,gBAAA;AAAA,gBACnDF;AAAA,cAAA,GACJ;AAAA,cACA,gBAAAK;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWH,EAAO,kCAAkC;AAAA,kBACpD,MAAK;AAAA,kBAEL,UAAA,gBAAAG;AAAA,oBAACE;AAAA,oBAAA;AAAA,sBACC,OAAM;AAAA,sBACN,WAAWL,EAAO,4BAA4B;AAAA,sBAC9C,OAAOX,EAAmBC,CAAM;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAClC;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"UserAvatarGroup.js","sources":["../../../src/components/user-avatar-group/UserAvatarGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Tooltip from '@/components/tooltip/Tooltip';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport styles from './UserAvatarGroup.module.scss';\n\nexport type UserAvatarGroupSize =\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '48'\n  | '56'\n  | '64'\n  | '72';\n\nexport interface UserAvatarGroupItem {\n  /** Unique key for the list item. */\n  key: string;\n  /** Image URL for the avatar. Omit to render the Fallback (initials) variant. */\n  src?: string;\n  /** Alt text / display name for the avatar. Drives initials and fallback colour. */\n  name: string;\n}\n\nexport interface UserAvatarGroupProps {\n  /** Array of avatar items to display. */\n  avatars: UserAvatarGroupItem[];\n  /** Maximum number of avatars to show before showing the overflow count. Default: 3. */\n  max?: number;\n  /** Avatar size in px. Matches Figma Avatar Group size options. Default: '20'. */\n  size?: UserAvatarGroupSize;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Accessible name for the group. Default: `{count} participants`. */\n  formatGroupLabel?: (count: number) => string;\n  /** Accessible name for the +N overflow. Default: `{count} more participants`. */\n  formatOverflowLabel?: (count: number) => string;\n  /** Overflow tooltip text. Default: up to three names, then `A, B, +N more`. */\n  formatOverflowNames?: (hidden: UserAvatarGroupItem[]) => ReactNode;\n}\n\nconst defaultFormatGroupLabel = (count: number) => `${count} participants`;\nconst defaultFormatOverflowLabel = (count: number) =>\n  `${count} more participants`;\n\nfunction overflowNamesLabel(hidden: UserAvatarGroupItem[]): string {\n  if (hidden.length === 0) return '';\n  if (hidden.length === 1) return hidden[0].name;\n  if (hidden.length <= 3) return hidden.map((a) => a.name).join(', ');\n  return `${hidden\n    .slice(0, 2)\n    .map((a) => a.name)\n    .join(', ')}, +${hidden.length - 2} more`;\n}\n\n/**\n * A User Avatar Group displays multiple participants as a stack of overlapping avatars. It's\n * a compact way to show \"who's involved\" — thread participants, channel members, call\n * attendees — without a list.\n */\nexport default function UserAvatarGroup({\n  avatars,\n  className = '',\n  max = 3,\n  size = '20',\n  formatGroupLabel = defaultFormatGroupLabel,\n  formatOverflowLabel = defaultFormatOverflowLabel,\n  formatOverflowNames = overflowNamesLabel,\n}: UserAvatarGroupProps) {\n  const visible = avatars.slice(0, max);\n  const hidden = avatars.slice(max);\n  const overflow = hidden.length;\n\n  const rootClass = [\n    styles['user-avatar-group'],\n    size !== '20' ? styles[`user-avatar-group--size-${size}`] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      className={rootClass}\n      role=\"group\"\n      aria-label={formatGroupLabel(avatars.length)}\n    >\n      {visible.map((avatar) => (\n        <span key={avatar.key} className={styles['user-avatar-group__item']}>\n          <span className={styles['user-avatar-group__trigger']}>\n            <UserAvatar\n              src={avatar.src}\n              alt={avatar.name}\n              name={avatar.name}\n              size={size}\n            />\n          </span>\n          <div\n            className={styles['user-avatar-group__tooltip-layer']}\n            role=\"presentation\"\n          >\n            <Tooltip\n              arrow=\"bottom\"\n              className={styles['user-avatar-group__tooltip']}\n              label={avatar.name}\n            />\n          </div>\n        </span>\n      ))}\n      {overflow > 0 && (\n        <span\n          className={[\n            styles['user-avatar-group__item'],\n            styles['user-avatar-group__overflow'],\n          ].join(' ')}\n          aria-label={formatOverflowLabel(overflow)}\n        >\n          <span className={styles['user-avatar-group__trigger']}>\n            +{overflow}\n          </span>\n          <div\n            className={styles['user-avatar-group__tooltip-layer']}\n            role=\"presentation\"\n          >\n            <Tooltip\n              arrow=\"bottom\"\n              className={styles['user-avatar-group__tooltip']}\n              label={formatOverflowNames(hidden)}\n            />\n          </div>\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["defaultFormatGroupLabel","count","defaultFormatOverflowLabel","overflowNamesLabel","hidden","a","UserAvatarGroup","avatars","className","max","size","formatGroupLabel","formatOverflowLabel","formatOverflowNames","visible","overflow","rootClass","styles","jsxs","avatar","jsx","UserAvatar","Tooltip"],"mappings":"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"}

package/dist/components/user-avatar-group/UserAvatarGroup.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./UserAvatarGroup.css');const r={"user-avatar-group":"_user-avatar-group_sgxpf_2","user-avatar-group__item":"_user-avatar-group__item_sgxpf_7","user-avatar-group__tooltip-layer":"_user-avatar-group__tooltip-layer_sgxpf_26","user-avatar-group__trigger":"_user-avatar-group__trigger_sgxpf_31","user-avatar-group__tooltip":"_user-avatar-group__tooltip_sgxpf_26","user-avatar-group__overflow":"_user-avatar-group__overflow_sgxpf_55","user-avatar-group--size-24":"_user-avatar-group--size-24_sgxpf_67","user-avatar-group--size-28":"_user-avatar-group--size-28_sgxpf_79","user-avatar-group--size-32":"_user-avatar-group--size-32_sgxpf_91","user-avatar-group--size-40":"_user-avatar-group--size-40_sgxpf_103","user-avatar-group--size-48":"_user-avatar-group--size-48_sgxpf_115","user-avatar-group--size-56":"_user-avatar-group--size-56_sgxpf_127","user-avatar-group--size-64":"_user-avatar-group--size-64_sgxpf_139","user-avatar-group--size-72":"_user-avatar-group--size-72_sgxpf_151"};exports.default=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./UserAvatarGroup.css');const r={"user-avatar-group":"_user-avatar-group_17zfx_2","user-avatar-group__item":"_user-avatar-group__item_17zfx_7","user-avatar-group__tooltip-layer":"_user-avatar-group__tooltip-layer_17zfx_26","user-avatar-group__trigger":"_user-avatar-group__trigger_17zfx_31","user-avatar-group__tooltip":"_user-avatar-group__tooltip_17zfx_26","user-avatar-group__overflow":"_user-avatar-group__overflow_17zfx_55","user-avatar-group--size-24":"_user-avatar-group--size-24_17zfx_67","user-avatar-group--size-28":"_user-avatar-group--size-28_17zfx_79","user-avatar-group--size-32":"_user-avatar-group--size-32_17zfx_91","user-avatar-group--size-40":"_user-avatar-group--size-40_17zfx_103","user-avatar-group--size-48":"_user-avatar-group--size-48_17zfx_115","user-avatar-group--size-56":"_user-avatar-group--size-56_17zfx_127","user-avatar-group--size-64":"_user-avatar-group--size-64_17zfx_139","user-avatar-group--size-72":"_user-avatar-group--size-72_17zfx_151"};exports.default=r;
 //# sourceMappingURL=UserAvatarGroup.module.scss.cjs.map

package/dist/components/user-avatar-group/UserAvatarGroup.module.scss.js

@@ -1,18 +1,18 @@
 import './UserAvatarGroup.css';const r = {
-  "user-avatar-group": "_user-avatar-group_sgxpf_2",
-  "user-avatar-group__item": "_user-avatar-group__item_sgxpf_7",
-  "user-avatar-group__tooltip-layer": "_user-avatar-group__tooltip-layer_sgxpf_26",
-  "user-avatar-group__trigger": "_user-avatar-group__trigger_sgxpf_31",
-  "user-avatar-group__tooltip": "_user-avatar-group__tooltip_sgxpf_26",
-  "user-avatar-group__overflow": "_user-avatar-group__overflow_sgxpf_55",
-  "user-avatar-group--size-24": "_user-avatar-group--size-24_sgxpf_67",
-  "user-avatar-group--size-28": "_user-avatar-group--size-28_sgxpf_79",
-  "user-avatar-group--size-32": "_user-avatar-group--size-32_sgxpf_91",
-  "user-avatar-group--size-40": "_user-avatar-group--size-40_sgxpf_103",
-  "user-avatar-group--size-48": "_user-avatar-group--size-48_sgxpf_115",
-  "user-avatar-group--size-56": "_user-avatar-group--size-56_sgxpf_127",
-  "user-avatar-group--size-64": "_user-avatar-group--size-64_sgxpf_139",
-  "user-avatar-group--size-72": "_user-avatar-group--size-72_sgxpf_151"
+  "user-avatar-group": "_user-avatar-group_17zfx_2",
+  "user-avatar-group__item": "_user-avatar-group__item_17zfx_7",
+  "user-avatar-group__tooltip-layer": "_user-avatar-group__tooltip-layer_17zfx_26",
+  "user-avatar-group__trigger": "_user-avatar-group__trigger_17zfx_31",
+  "user-avatar-group__tooltip": "_user-avatar-group__tooltip_17zfx_26",
+  "user-avatar-group__overflow": "_user-avatar-group__overflow_17zfx_55",
+  "user-avatar-group--size-24": "_user-avatar-group--size-24_17zfx_67",
+  "user-avatar-group--size-28": "_user-avatar-group--size-28_17zfx_79",
+  "user-avatar-group--size-32": "_user-avatar-group--size-32_17zfx_91",
+  "user-avatar-group--size-40": "_user-avatar-group--size-40_17zfx_103",
+  "user-avatar-group--size-48": "_user-avatar-group--size-48_17zfx_115",
+  "user-avatar-group--size-56": "_user-avatar-group--size-56_17zfx_127",
+  "user-avatar-group--size-64": "_user-avatar-group--size-64_17zfx_139",
+  "user-avatar-group--size-72": "_user-avatar-group--size-72_17zfx_151"
 };
 export {
   r as default

package/dist/index.d.ts

@@ -80,5 +80,6 @@ export * from './hooks/use-exit-animation';
 export * from './hooks/use-outside-close';
 export * from './hooks/use-popover-transition';
 export { toKebab } from './utils/string';
+export type { BuiltInButtonProps, DataAttributes } from './utils/props';
 export { default as btnStyles } from './components/button/Button.module.scss';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/utils/props.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function r(...e){return e.filter(Boolean).join(" ")}exports.mergeClassNames=r;
+//# sourceMappingURL=props.cjs.map

package/dist/utils/props.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.cjs","sources":["../../src/utils/props.ts"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\n\n/** `data-*` attributes, so object literals like `{ 'data-testid': 'x' }` type-check. */\nexport type DataAttributes = {\n  [key: `data-${string}`]: string | number | boolean | undefined;\n};\n\n/**\n * Extra attributes for a component's built-in button (close, dismiss, back,\n * clear). The component's own `onClick`, `aria-label`, and variant props take\n * precedence; `className` is merged.\n */\nexport type BuiltInButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'children' | 'style'\n> &\n  DataAttributes;\n\nexport function mergeClassNames(\n  ...names: Array<string | false | null | undefined>\n): string {\n  return names.filter(Boolean).join(' ');\n}\n"],"names":["mergeClassNames","names"],"mappings":"gFAkBO,SAASA,KACXC,EACK,CACR,OAAOA,EAAM,OAAO,OAAO,EAAE,KAAK,GAAG,CACvC"}

package/dist/utils/props.d.ts

@@ -0,0 +1,13 @@
+import { ButtonHTMLAttributes } from 'react';
+/** `data-*` attributes, so object literals like `{ 'data-testid': 'x' }` type-check. */
+export type DataAttributes = {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
+/**
+ * Extra attributes for a component's built-in button (close, dismiss, back,
+ * clear). The component's own `onClick`, `aria-label`, and variant props take
+ * precedence; `className` is merged.
+ */
+export type BuiltInButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'style'> & DataAttributes;
+export declare function mergeClassNames(...names: Array<string | false | null | undefined>): string;
+//# sourceMappingURL=props.d.ts.map

package/dist/utils/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/utils/props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,wFAAwF;AACxF,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CAChE,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,CACrB,GACC,cAAc,CAAC;AAEjB,wBAAgB,eAAe,CAC7B,GAAG,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,GACjD,MAAM,CAER"}

package/dist/utils/props.js

@@ -0,0 +1,7 @@
+function n(...e) {
+  return e.filter(Boolean).join(" ");
+}
+export {
+  n as mergeClassNames
+};
+//# sourceMappingURL=props.js.map

package/dist/utils/props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.js","sources":["../../src/utils/props.ts"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\n\n/** `data-*` attributes, so object literals like `{ 'data-testid': 'x' }` type-check. */\nexport type DataAttributes = {\n  [key: `data-${string}`]: string | number | boolean | undefined;\n};\n\n/**\n * Extra attributes for a component's built-in button (close, dismiss, back,\n * clear). The component's own `onClick`, `aria-label`, and variant props take\n * precedence; `className` is merged.\n */\nexport type BuiltInButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'children' | 'style'\n> &\n  DataAttributes;\n\nexport function mergeClassNames(\n  ...names: Array<string | false | null | undefined>\n): string {\n  return names.filter(Boolean).join(' ');\n}\n"],"names":["mergeClassNames","names"],"mappings":"AAkBO,SAASA,KACXC,GACK;AACR,SAAOA,EAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AACvC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mattermost/compass-ui",
-  "version": "0.1.0-alpha.12",
+  "version": "0.1.0-alpha.13",
   "description": "Compass design system UI components for Mattermost products",
   "repository": {
     "type": "git",
@@ -67,11 +67,6 @@
     "react-dom": "^18.2.0 || ^19.0.0",
     "simplebar-react": "^3.3.2"
   },
-  "peerDependenciesMeta": {
-    "simplebar-react": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@fontsource/metropolis": "^5.2.5",
     "@fontsource/open-sans": "^5.2.7",

package/dist/node_modules/simplebar-react/dist/simplebar.min.css

@@ -1 +0,0 @@
-[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto!important;height:auto!important;z-index:0}.simplebar-offset{direction:inherit!important;box-sizing:inherit!important;resize:none!important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch}.simplebar-content-wrapper{direction:inherit;box-sizing:border-box!important;position:relative;display:block;height:100%;width:auto;max-width:100%;max-height:100%;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.simplebar-content-wrapper::-webkit-scrollbar,.simplebar-hide-scrollbar::-webkit-scrollbar{display:none;width:0;height:0}.simplebar-content:after,.simplebar-content:before{content:" ";display:table}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none}.simplebar-height-auto-observer-wrapper{box-sizing:inherit!important;height:100%;width:100%;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0}.simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden}[data-simplebar].simplebar-dragging,[data-simplebar].simplebar-dragging .simplebar-content{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all}.simplebar-scrollbar{position:absolute;left:0;right:0;min-height:10px}.simplebar-scrollbar:before{position:absolute;content:"";background:#000;border-radius:7px;left:2px;right:2px;opacity:0;transition:opacity .2s .5s linear}.simplebar-scrollbar.simplebar-visible:before{opacity:.5;transition-delay:0s;transition-duration:0s}.simplebar-track.simplebar-vertical{top:0;width:11px}.simplebar-scrollbar:before{top:2px;bottom:2px;left:2px;right:2px}.simplebar-track.simplebar-horizontal{left:0;height:11px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:0;bottom:0;min-height:0;min-width:10px;width:auto}[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical{right:auto;left:0}.simplebar-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll;-ms-overflow-style:scrollbar!important}.simplebar-dummy-scrollbar-size>div{width:200%;height:200%;margin:10px 0}.simplebar-hide-scrollbar{position:fixed;left:0;visibility:hidden;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}