@mattermost/compass-ui 0.1.0-alpha.1 → 0.1.0-alpha.11

package/dist/components/unread-badge/UnreadBadge.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./UnreadBadge.css');const e={"unread-badge":"_unread-badge_1a64l_2","unread-badge--size-6":"_unread-badge--size-6_1a64l_7","unread-badge--size-8":"_unread-badge--size-8_1a64l_11","unread-badge--context-team-icon":"_unread-badge--context-team-icon_1a64l_15","unread-badge--context-icon-button":"_unread-badge--context-icon-button_1a64l_18"};exports.default=e;
+//# sourceMappingURL=UnreadBadge.module.scss.cjs.map

package/dist/components/unread-badge/UnreadBadge.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnreadBadge.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/unread-badge/UnreadBadge.module.scss.js

@@ -0,0 +1,11 @@
+import './UnreadBadge.css';const e = {
+  "unread-badge": "_unread-badge_1a64l_2",
+  "unread-badge--size-6": "_unread-badge--size-6_1a64l_7",
+  "unread-badge--size-8": "_unread-badge--size-8_1a64l_11",
+  "unread-badge--context-team-icon": "_unread-badge--context-team-icon_1a64l_15",
+  "unread-badge--context-icon-button": "_unread-badge--context-icon-button_1a64l_18"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=UnreadBadge.module.scss.js.map

package/dist/components/unread-badge/UnreadBadge.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnreadBadge.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/unread-badge/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./UnreadBadge.cjs");exports.UnreadBadge=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/unread-badge/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/unread-badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/unread-badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/unread-badge/index.js

@@ -0,0 +1,5 @@
+import { default as d } from "./UnreadBadge.js";
+export {
+  d as UnreadBadge
+};
+//# sourceMappingURL=index.js.map

package/dist/components/unread-badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/user-avatar/UserAvatar.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),v=require("../status-badge/StatusBadge.cjs"),u=require("../../utils/string.cjs"),t=require("./UserAvatar.module.scss.cjs"),c=["red","purple","neutral","blue","cyan","yellow","green","orange"],C={12:"xx-small",16:"xx-small",20:"x-small",24:"x-small",28:"x-small",32:"small",40:"small",48:"small",56:"medium",64:"medium",72:"medium",80:"medium",96:"large",120:"large"};function j(e){let l=0;for(let a=0;a<e.length;a++)l=l*31+e.charCodeAt(a)|0;return c[Math.abs(l)%c.length]}function p(e){var o;const l=e.trim();if(!l)return"";const a=l.split(/\s+/)[0];return a[0].toUpperCase()+(((o=a[1])==null?void 0:o.toLowerCase())??"")}function A({alt:e,className:l="",src:a,name:o,fallbackColor:m,size:s="48",status:d=!1,...f}){const _=t.default[`user-avatar--size-${u.toKebab(s)}`],b=[t.default["user-avatar"],_,l].filter(Boolean).join(" "),n=!a,i=o??e,g=n?p(i):"",h=m??j(i),x=n?t.default[`user-avatar__fallback--${u.toKebab(h)}`]:"";return r.jsxs("div",{className:b,"data-size":s,children:[n?r.jsx("span",{className:[t.default["user-avatar__fallback"],x].filter(Boolean).join(" "),role:"img","aria-label":e,children:g}):r.jsx("img",{...f,alt:e,className:t.default["user-avatar__image"],src:a,width:Number(s),height:Number(s)}),d&&r.jsx("span",{className:t.default["user-avatar__status"],children:r.jsx(v.default,{status:"online",size:C[s]})})]})}exports.default=A;
+//# sourceMappingURL=UserAvatar.cjs.map

package/dist/components/user-avatar/UserAvatar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserAvatar.cjs","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import type { ImgHTMLAttributes } from 'react';\nimport StatusBadge from '@/components/status-badge/StatusBadge';\nimport type { StatusBadgeSize } from '@/components/status-badge/StatusBadge';\nimport { toKebab } from '@/utils/string';\nimport styles from './UserAvatar.module.scss';\n\n/** Figma User Avatar sizes. */\nexport type UserAvatarSize =\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '48'\n  | '56'\n  | '64'\n  | '72'\n  | '80'\n  | '96'\n  | '120';\n\n/** Figma User Avatar Fallback colour variants. */\nexport type UserAvatarFallbackColor =\n  | 'red'\n  | 'purple'\n  | 'neutral'\n  | 'blue'\n  | 'cyan'\n  | 'yellow'\n  | 'green'\n  | 'orange';\n\nexport interface UserAvatarProps extends Omit<\n  ImgHTMLAttributes<HTMLImageElement>,\n  'src' | 'alt' | 'width' | 'height'\n> {\n  /** Alt text for the avatar image. */\n  alt: string;\n  /** Optional CSS class name. */\n  className?: string;\n  /**\n   * Image URL for the avatar. When omitted, the avatar renders as Fallback\n   * (initials on a deterministic colour background).\n   */\n  src?: string;\n  /**\n   * Display name used to derive initials and the fallback colour. Defaults\n   * to `alt` when not provided.\n   */\n  name?: string;\n  /** Force a specific fallback colour. Hashed from `name`/`alt` if omitted. */\n  fallbackColor?: UserAvatarFallbackColor;\n  /** Size variant. Figma: Size. Default: 48. */\n  size?: UserAvatarSize;\n  /** When true, shows online status badge (green dot with check). Figma: Status = On. */\n  status?: boolean;\n}\n\nconst FALLBACK_COLORS: readonly UserAvatarFallbackColor[] = [\n  'red',\n  'purple',\n  'neutral',\n  'blue',\n  'cyan',\n  'yellow',\n  'green',\n  'orange',\n];\n\n/** Map UserAvatar size to StatusBadge size (Figma scale). */\nconst USER_AVATAR_TO_BADGE_SIZE: Record<UserAvatarSize, StatusBadgeSize> = {\n  '12': 'xx-small',\n  '16': 'xx-small',\n  '20': 'x-small',\n  '24': 'x-small',\n  '28': 'x-small',\n  '32': 'small',\n  '40': 'small',\n  '48': 'small',\n  '56': 'medium',\n  '64': 'medium',\n  '72': 'medium',\n  '80': 'medium',\n  '96': 'large',\n  '120': 'large',\n};\n\nfunction hashFallbackColor(s: string): UserAvatarFallbackColor {\n  let h = 0;\n  for (let i = 0; i < s.length; i++) {\n    h = (h * 31 + s.charCodeAt(i)) | 0;\n  }\n  return FALLBACK_COLORS[Math.abs(h) % FALLBACK_COLORS.length];\n}\n\nfunction getInitials(name: string): string {\n  const trimmed = name.trim();\n  if (!trimmed) return '';\n  const firstName = trimmed.split(/\\s+/)[0]!;\n  return firstName[0]!.toUpperCase() + (firstName[1]?.toLowerCase() ?? '');\n}\n\n/**\n * User Avatars represent a person — usually their uploaded photo, with initials on a colour\n * background as a fallback. Their circular shape distinguishes them from rounded-square Team\n * Avatars at a glance.\n */\nexport default function UserAvatar({\n  alt,\n  className = '',\n  src,\n  name,\n  fallbackColor,\n  size = '48',\n  status = false,\n  ...imgProps\n}: UserAvatarProps) {\n  const sizeClass = styles[`user-avatar--size-${toKebab(size)}`];\n  const rootClass = [styles['user-avatar'], sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const isFallback = !src;\n  const displayName = name ?? alt;\n  const initials = isFallback ? getInitials(displayName) : '';\n  const color = fallbackColor ?? hashFallbackColor(displayName);\n  const fallbackColorClass = isFallback\n    ? styles[`user-avatar__fallback--${toKebab(color)}`]\n    : '';\n\n  return (\n    <div className={rootClass} data-size={size}>\n      {isFallback ? (\n        <span\n          className={[styles['user-avatar__fallback'], fallbackColorClass]\n            .filter(Boolean)\n            .join(' ')}\n          role=\"img\"\n          aria-label={alt}\n        >\n          {initials}\n        </span>\n      ) : (\n        <img\n          {...imgProps}\n          alt={alt}\n          className={styles['user-avatar__image']}\n          src={src}\n          width={Number(size)}\n          height={Number(size)}\n        />\n      )}\n      {status && (\n        <span className={styles['user-avatar__status']}>\n          <StatusBadge status=\"online\" size={USER_AVATAR_TO_BADGE_SIZE[size]} />\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["FALLBACK_COLORS","USER_AVATAR_TO_BADGE_SIZE","hashFallbackColor","s","h","i","getInitials","name","trimmed","firstName","_a","UserAvatar","alt","className","src","fallbackColor","size","status","imgProps","sizeClass","styles","toKebab","rootClass","isFallback","displayName","initials","color","fallbackColorClass","jsxs","jsx","StatusBadge"],"mappings":"2QA4DMA,EAAsD,CAC1D,MACA,SACA,UACA,OACA,OACA,SACA,QACA,QACF,EAGMC,EAAqE,CACzE,GAAM,WACN,GAAM,WACN,GAAM,UACN,GAAM,UACN,GAAM,UACN,GAAM,QACN,GAAM,QACN,GAAM,QACN,GAAM,SACN,GAAM,SACN,GAAM,SACN,GAAM,SACN,GAAM,QACN,IAAO,OACT,EAEA,SAASC,EAAkBC,EAAoC,CAC7D,IAAIC,EAAI,EACR,QAASC,EAAI,EAAGA,EAAIF,EAAE,OAAQE,IAC5BD,EAAKA,EAAI,GAAKD,EAAE,WAAWE,CAAC,EAAK,EAEnC,OAAOL,EAAgB,KAAK,IAAII,CAAC,EAAIJ,EAAgB,MAAM,CAC7D,CAEA,SAASM,EAAYC,EAAsB,OACzC,MAAMC,EAAUD,EAAK,KAAA,EACrB,GAAI,CAACC,EAAS,MAAO,GACrB,MAAMC,EAAYD,EAAQ,MAAM,KAAK,EAAE,CAAC,EACxC,OAAOC,EAAU,CAAC,EAAG,YAAA,KAAiBC,EAAAD,EAAU,CAAC,IAAX,YAAAC,EAAc,gBAAiB,GACvE,CAOA,SAAwBC,EAAW,CACjC,IAAAC,EACA,UAAAC,EAAY,GACZ,IAAAC,EACA,KAAAP,EACA,cAAAQ,EACA,KAAAC,EAAO,KACP,OAAAC,EAAS,GACT,GAAGC,CACL,EAAoB,CAClB,MAAMC,EAAYC,EAAAA,QAAO,qBAAqBC,EAAAA,QAAQL,CAAI,CAAC,EAAE,EACvDM,EAAY,CAACF,UAAO,aAAa,EAAGD,EAAWN,CAAS,EAC3D,OAAO,OAAO,EACd,KAAK,GAAG,EAELU,EAAa,CAACT,EACdU,EAAcjB,GAAQK,EACtBa,EAAWF,EAAajB,EAAYkB,CAAW,EAAI,GACnDE,EAAQX,GAAiBb,EAAkBsB,CAAW,EACtDG,EAAqBJ,EACvBH,EAAAA,QAAO,0BAA0BC,EAAAA,QAAQK,CAAK,CAAC,EAAE,EACjD,GAEJ,OACEE,EAAAA,KAAC,MAAA,CAAI,UAAWN,EAAW,YAAWN,EACnC,SAAA,CAAAO,EACCM,EAAAA,IAAC,OAAA,CACC,UAAW,CAACT,UAAO,uBAAuB,EAAGO,CAAkB,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG,EACX,KAAK,MACL,aAAYf,EAEX,SAAAa,CAAA,CAAA,EAGHI,EAAAA,IAAC,MAAA,CACE,GAAGX,EACJ,IAAAN,EACA,UAAWQ,EAAAA,QAAO,oBAAoB,EACtC,IAAAN,EACA,MAAO,OAAOE,CAAI,EAClB,OAAQ,OAAOA,CAAI,CAAA,CAAA,EAGtBC,GACCY,EAAAA,IAAC,OAAA,CAAK,UAAWT,EAAAA,QAAO,qBAAqB,EAC3C,SAAAS,EAAAA,IAACC,EAAAA,QAAA,CAAY,OAAO,SAAS,KAAM7B,EAA0Be,CAAI,EAAG,CAAA,CACtE,CAAA,EAEJ,CAEJ"}

package/dist/components/user-avatar/UserAvatar.css

@@ -0,0 +1 @@
+._user-avatar_e79tw_2{position:relative;flex-shrink:0;border-radius:var(--radius-full);display:inline-block}._user-avatar__image_e79tw_8{display:block;width:100%;height:100%;object-fit:cover;vertical-align:middle;border-radius:var(--radius-full)}._user-avatar__fallback_e79tw_16{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--radius-full);color:#ffffffeb;font-family:Metropolis,var(--font-family-body),sans-serif;font-weight:var(--font-weight-semibold);line-height:1;-webkit-user-select:none;user-select:none}._user-avatar__fallback--red_e79tw_29{background-color:var(--color-red-500)}._user-avatar__fallback--purple_e79tw_32{background-color:var(--color-purple-500)}._user-avatar__fallback--neutral_e79tw_35{background-color:var(--color-neutral-500)}._user-avatar__fallback--blue_e79tw_38{background-color:var(--color-blue-500)}._user-avatar__fallback--cyan_e79tw_41{background-color:var(--color-cyan-500)}._user-avatar__fallback--yellow_e79tw_44{background-color:var(--color-yellow-500)}._user-avatar__fallback--green_e79tw_47{background-color:var(--color-green-500)}._user-avatar__fallback--orange_e79tw_50{background-color:var(--color-orange-500)}._user-avatar__status_e79tw_53{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:center;box-sizing:content-box}._user-avatar--size-12_e79tw_62{width:12px;height:12px}._user-avatar--size-12_e79tw_62 ._user-avatar__fallback_e79tw_16{font-size:5.604px}._user-avatar--size-12_e79tw_62 ._user-avatar__status_e79tw_53{right:-1px;bottom:-1px}._user-avatar--size-16_e79tw_73{width:16px;height:16px}._user-avatar--size-16_e79tw_73 ._user-avatar__fallback_e79tw_16{font-size:7.472px}._user-avatar--size-16_e79tw_73 ._user-avatar__status_e79tw_53{right:-1px;bottom:-1px}._user-avatar--size-20_e79tw_84{width:20px;height:20px}._user-avatar--size-20_e79tw_84 ._user-avatar__fallback_e79tw_16{font-size:9.34px}._user-avatar--size-20_e79tw_84 ._user-avatar__status_e79tw_53{right:-1px;bottom:-1px}._user-avatar--size-24_e79tw_95{width:24px;height:24px}._user-avatar--size-24_e79tw_95 ._user-avatar__fallback_e79tw_16{font-size:11.208px}._user-avatar--size-24_e79tw_95 ._user-avatar__status_e79tw_53{right:-1px;bottom:-1px}._user-avatar--size-28_e79tw_106{width:28px;height:28px}._user-avatar--size-28_e79tw_106 ._user-avatar__fallback_e79tw_16{font-size:13.076px}._user-avatar--size-28_e79tw_106 ._user-avatar__status_e79tw_53{right:-1px;bottom:-1px}._user-avatar--size-32_e79tw_117{width:32px;height:32px}._user-avatar--size-32_e79tw_117 ._user-avatar__fallback_e79tw_16{font-size:14.944px}._user-avatar--size-32_e79tw_117 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}._user-avatar--size-40_e79tw_128{width:40px;height:40px}._user-avatar--size-40_e79tw_128 ._user-avatar__fallback_e79tw_16{font-size:18.68px}._user-avatar--size-40_e79tw_128 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}._user-avatar--size-48_e79tw_139{width:48px;height:48px}._user-avatar--size-48_e79tw_139 ._user-avatar__fallback_e79tw_16{font-size:22.416px}._user-avatar--size-48_e79tw_139 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}._user-avatar--size-56_e79tw_150{width:56px;height:56px}._user-avatar--size-56_e79tw_150 ._user-avatar__fallback_e79tw_16{font-size:26.152px}._user-avatar--size-56_e79tw_150 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}._user-avatar--size-64_e79tw_161{width:64px;height:64px}._user-avatar--size-64_e79tw_161 ._user-avatar__fallback_e79tw_16{font-size:29.888px}._user-avatar--size-64_e79tw_161 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}._user-avatar--size-72_e79tw_172{width:72px;height:72px}._user-avatar--size-72_e79tw_172 ._user-avatar__fallback_e79tw_16{font-size:33.624px}._user-avatar--size-72_e79tw_172 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}._user-avatar--size-80_e79tw_183{width:80px;height:80px}._user-avatar--size-80_e79tw_183 ._user-avatar__fallback_e79tw_16{font-size:37.36px}._user-avatar--size-80_e79tw_183 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}._user-avatar--size-96_e79tw_194{width:96px;height:96px}._user-avatar--size-96_e79tw_194 ._user-avatar__fallback_e79tw_16{font-size:44.832px}._user-avatar--size-96_e79tw_194 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}._user-avatar--size-120_e79tw_205{width:120px;height:120px}._user-avatar--size-120_e79tw_205 ._user-avatar__fallback_e79tw_16{font-size:56.04px}._user-avatar--size-120_e79tw_205 ._user-avatar__status_e79tw_53{right:-2px;bottom:-2px}

package/dist/components/user-avatar/UserAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM/C,+BAA+B;AAC/B,MAAM,MAAM,cAAc,GACtB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,CAAC;AAEV,kDAAkD;AAClD,MAAM,MAAM,uBAAuB,GAC/B,KAAK,GACL,QAAQ,GACR,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AAEb,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,iBAAiB,CAAC,gBAAgB,CAAC,EACnC,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CACnC;IACC,qCAAqC;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,8CAA8C;IAC9C,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,uFAAuF;IACvF,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA8CD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,GAAG,EACH,SAAc,EACd,GAAG,EACH,IAAI,EACJ,aAAa,EACb,IAAW,EACX,MAAc,EACd,GAAG,QAAQ,EACZ,EAAE,eAAe,2CA2CjB"}

package/dist/components/user-avatar/UserAvatar.js

@@ -0,0 +1,80 @@
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import C from "../status-badge/StatusBadge.js";
+import { toKebab as m } from "../../utils/string.js";
+import e from "./UserAvatar.module.scss.js";
+const c = [
+  "red",
+  "purple",
+  "neutral",
+  "blue",
+  "cyan",
+  "yellow",
+  "green",
+  "orange"
+], v = {
+  12: "xx-small",
+  16: "xx-small",
+  20: "x-small",
+  24: "x-small",
+  28: "x-small",
+  32: "small",
+  40: "small",
+  48: "small",
+  56: "medium",
+  64: "medium",
+  72: "medium",
+  80: "medium",
+  96: "large",
+  120: "large"
+};
+function A(l) {
+  let s = 0;
+  for (let a = 0; a < l.length; a++)
+    s = s * 31 + l.charCodeAt(a) | 0;
+  return c[Math.abs(s) % c.length];
+}
+function N(l) {
+  var r;
+  const s = l.trim();
+  if (!s) return "";
+  const a = s.split(/\s+/)[0];
+  return a[0].toUpperCase() + (((r = a[1]) == null ? void 0 : r.toLowerCase()) ?? "");
+}
+function L({
+  alt: l,
+  className: s = "",
+  src: a,
+  name: r,
+  fallbackColor: u,
+  size: t = "48",
+  status: f = !1,
+  ...d
+}) {
+  const h = e[`user-avatar--size-${m(t)}`], p = [e["user-avatar"], h, s].filter(Boolean).join(" "), n = !a, i = r ?? l, _ = n ? N(i) : "", b = u ?? A(i), g = n ? e[`user-avatar__fallback--${m(b)}`] : "";
+  return /* @__PURE__ */ x("div", { className: p, "data-size": t, children: [
+    n ? /* @__PURE__ */ o(
+      "span",
+      {
+        className: [e["user-avatar__fallback"], g].filter(Boolean).join(" "),
+        role: "img",
+        "aria-label": l,
+        children: _
+      }
+    ) : /* @__PURE__ */ o(
+      "img",
+      {
+        ...d,
+        alt: l,
+        className: e["user-avatar__image"],
+        src: a,
+        width: Number(t),
+        height: Number(t)
+      }
+    ),
+    f && /* @__PURE__ */ o("span", { className: e["user-avatar__status"], children: /* @__PURE__ */ o(C, { status: "online", size: v[t] }) })
+  ] });
+}
+export {
+  L as default
+};
+//# sourceMappingURL=UserAvatar.js.map

package/dist/components/user-avatar/UserAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserAvatar.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import type { ImgHTMLAttributes } from 'react';\nimport StatusBadge from '@/components/status-badge/StatusBadge';\nimport type { StatusBadgeSize } from '@/components/status-badge/StatusBadge';\nimport { toKebab } from '@/utils/string';\nimport styles from './UserAvatar.module.scss';\n\n/** Figma User Avatar sizes. */\nexport type UserAvatarSize =\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '48'\n  | '56'\n  | '64'\n  | '72'\n  | '80'\n  | '96'\n  | '120';\n\n/** Figma User Avatar Fallback colour variants. */\nexport type UserAvatarFallbackColor =\n  | 'red'\n  | 'purple'\n  | 'neutral'\n  | 'blue'\n  | 'cyan'\n  | 'yellow'\n  | 'green'\n  | 'orange';\n\nexport interface UserAvatarProps extends Omit<\n  ImgHTMLAttributes<HTMLImageElement>,\n  'src' | 'alt' | 'width' | 'height'\n> {\n  /** Alt text for the avatar image. */\n  alt: string;\n  /** Optional CSS class name. */\n  className?: string;\n  /**\n   * Image URL for the avatar. When omitted, the avatar renders as Fallback\n   * (initials on a deterministic colour background).\n   */\n  src?: string;\n  /**\n   * Display name used to derive initials and the fallback colour. Defaults\n   * to `alt` when not provided.\n   */\n  name?: string;\n  /** Force a specific fallback colour. Hashed from `name`/`alt` if omitted. */\n  fallbackColor?: UserAvatarFallbackColor;\n  /** Size variant. Figma: Size. Default: 48. */\n  size?: UserAvatarSize;\n  /** When true, shows online status badge (green dot with check). Figma: Status = On. */\n  status?: boolean;\n}\n\nconst FALLBACK_COLORS: readonly UserAvatarFallbackColor[] = [\n  'red',\n  'purple',\n  'neutral',\n  'blue',\n  'cyan',\n  'yellow',\n  'green',\n  'orange',\n];\n\n/** Map UserAvatar size to StatusBadge size (Figma scale). */\nconst USER_AVATAR_TO_BADGE_SIZE: Record<UserAvatarSize, StatusBadgeSize> = {\n  '12': 'xx-small',\n  '16': 'xx-small',\n  '20': 'x-small',\n  '24': 'x-small',\n  '28': 'x-small',\n  '32': 'small',\n  '40': 'small',\n  '48': 'small',\n  '56': 'medium',\n  '64': 'medium',\n  '72': 'medium',\n  '80': 'medium',\n  '96': 'large',\n  '120': 'large',\n};\n\nfunction hashFallbackColor(s: string): UserAvatarFallbackColor {\n  let h = 0;\n  for (let i = 0; i < s.length; i++) {\n    h = (h * 31 + s.charCodeAt(i)) | 0;\n  }\n  return FALLBACK_COLORS[Math.abs(h) % FALLBACK_COLORS.length];\n}\n\nfunction getInitials(name: string): string {\n  const trimmed = name.trim();\n  if (!trimmed) return '';\n  const firstName = trimmed.split(/\\s+/)[0]!;\n  return firstName[0]!.toUpperCase() + (firstName[1]?.toLowerCase() ?? '');\n}\n\n/**\n * User Avatars represent a person — usually their uploaded photo, with initials on a colour\n * background as a fallback. Their circular shape distinguishes them from rounded-square Team\n * Avatars at a glance.\n */\nexport default function UserAvatar({\n  alt,\n  className = '',\n  src,\n  name,\n  fallbackColor,\n  size = '48',\n  status = false,\n  ...imgProps\n}: UserAvatarProps) {\n  const sizeClass = styles[`user-avatar--size-${toKebab(size)}`];\n  const rootClass = [styles['user-avatar'], sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const isFallback = !src;\n  const displayName = name ?? alt;\n  const initials = isFallback ? getInitials(displayName) : '';\n  const color = fallbackColor ?? hashFallbackColor(displayName);\n  const fallbackColorClass = isFallback\n    ? styles[`user-avatar__fallback--${toKebab(color)}`]\n    : '';\n\n  return (\n    <div className={rootClass} data-size={size}>\n      {isFallback ? (\n        <span\n          className={[styles['user-avatar__fallback'], fallbackColorClass]\n            .filter(Boolean)\n            .join(' ')}\n          role=\"img\"\n          aria-label={alt}\n        >\n          {initials}\n        </span>\n      ) : (\n        <img\n          {...imgProps}\n          alt={alt}\n          className={styles['user-avatar__image']}\n          src={src}\n          width={Number(size)}\n          height={Number(size)}\n        />\n      )}\n      {status && (\n        <span className={styles['user-avatar__status']}>\n          <StatusBadge status=\"online\" size={USER_AVATAR_TO_BADGE_SIZE[size]} />\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["FALLBACK_COLORS","USER_AVATAR_TO_BADGE_SIZE","hashFallbackColor","s","h","i","getInitials","name","trimmed","firstName","_a","UserAvatar","alt","className","src","fallbackColor","size","status","imgProps","sizeClass","styles","toKebab","rootClass","isFallback","displayName","initials","color","fallbackColorClass","jsxs","jsx","StatusBadge"],"mappings":";;;;AA4DA,MAAMA,IAAsD;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGMC,IAAqE;AAAA,EACzE,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,KAAO;AACT;AAEA,SAASC,EAAkBC,GAAoC;AAC7D,MAAIC,IAAI;AACR,WAASC,IAAI,GAAGA,IAAIF,EAAE,QAAQE;AAC5B,IAAAD,IAAKA,IAAI,KAAKD,EAAE,WAAWE,CAAC,IAAK;AAEnC,SAAOL,EAAgB,KAAK,IAAII,CAAC,IAAIJ,EAAgB,MAAM;AAC7D;AAEA,SAASM,EAAYC,GAAsB;;AACzC,QAAMC,IAAUD,EAAK,KAAA;AACrB,MAAI,CAACC,EAAS,QAAO;AACrB,QAAMC,IAAYD,EAAQ,MAAM,KAAK,EAAE,CAAC;AACxC,SAAOC,EAAU,CAAC,EAAG,YAAA,OAAiBC,IAAAD,EAAU,CAAC,MAAX,gBAAAC,EAAc,kBAAiB;AACvE;AAOA,SAAwBC,EAAW;AAAA,EACjC,KAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,KAAAC;AAAA,EACA,MAAAP;AAAA,EACA,eAAAQ;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,GAAGC;AACL,GAAoB;AAClB,QAAMC,IAAYC,EAAO,qBAAqBC,EAAQL,CAAI,CAAC,EAAE,GACvDM,IAAY,CAACF,EAAO,aAAa,GAAGD,GAAWN,CAAS,EAC3D,OAAO,OAAO,EACd,KAAK,GAAG,GAELU,IAAa,CAACT,GACdU,IAAcjB,KAAQK,GACtBa,IAAWF,IAAajB,EAAYkB,CAAW,IAAI,IACnDE,IAAQX,KAAiBb,EAAkBsB,CAAW,GACtDG,IAAqBJ,IACvBH,EAAO,0BAA0BC,EAAQK,CAAK,CAAC,EAAE,IACjD;AAEJ,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAWN,GAAW,aAAWN,GACnC,UAAA;AAAA,IAAAO,IACC,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,CAACT,EAAO,uBAAuB,GAAGO,CAAkB,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACX,MAAK;AAAA,QACL,cAAYf;AAAA,QAEX,UAAAa;AAAA,MAAA;AAAA,IAAA,IAGH,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGX;AAAA,QACJ,KAAAN;AAAA,QACA,WAAWQ,EAAO,oBAAoB;AAAA,QACtC,KAAAN;AAAA,QACA,OAAO,OAAOE,CAAI;AAAA,QAClB,QAAQ,OAAOA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAGtBC,KACC,gBAAAY,EAAC,QAAA,EAAK,WAAWT,EAAO,qBAAqB,GAC3C,UAAA,gBAAAS,EAACC,GAAA,EAAY,QAAO,UAAS,MAAM7B,EAA0Be,CAAI,GAAG,EAAA,CACtE;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/user-avatar/UserAvatar.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./UserAvatar.css');const a={"user-avatar":"_user-avatar_e79tw_2","user-avatar__image":"_user-avatar__image_e79tw_8","user-avatar__fallback":"_user-avatar__fallback_e79tw_16","user-avatar__fallback--red":"_user-avatar__fallback--red_e79tw_29","user-avatar__fallback--purple":"_user-avatar__fallback--purple_e79tw_32","user-avatar__fallback--neutral":"_user-avatar__fallback--neutral_e79tw_35","user-avatar__fallback--blue":"_user-avatar__fallback--blue_e79tw_38","user-avatar__fallback--cyan":"_user-avatar__fallback--cyan_e79tw_41","user-avatar__fallback--yellow":"_user-avatar__fallback--yellow_e79tw_44","user-avatar__fallback--green":"_user-avatar__fallback--green_e79tw_47","user-avatar__fallback--orange":"_user-avatar__fallback--orange_e79tw_50","user-avatar__status":"_user-avatar__status_e79tw_53","user-avatar--size-12":"_user-avatar--size-12_e79tw_62","user-avatar--size-16":"_user-avatar--size-16_e79tw_73","user-avatar--size-20":"_user-avatar--size-20_e79tw_84","user-avatar--size-24":"_user-avatar--size-24_e79tw_95","user-avatar--size-28":"_user-avatar--size-28_e79tw_106","user-avatar--size-32":"_user-avatar--size-32_e79tw_117","user-avatar--size-40":"_user-avatar--size-40_e79tw_128","user-avatar--size-48":"_user-avatar--size-48_e79tw_139","user-avatar--size-56":"_user-avatar--size-56_e79tw_150","user-avatar--size-64":"_user-avatar--size-64_e79tw_161","user-avatar--size-72":"_user-avatar--size-72_e79tw_172","user-avatar--size-80":"_user-avatar--size-80_e79tw_183","user-avatar--size-96":"_user-avatar--size-96_e79tw_194","user-avatar--size-120":"_user-avatar--size-120_e79tw_205"};exports.default=a;
+//# sourceMappingURL=UserAvatar.module.scss.cjs.map

package/dist/components/user-avatar/UserAvatar.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserAvatar.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/user-avatar/UserAvatar.module.scss.js

@@ -0,0 +1,32 @@
+import './UserAvatar.css';const a = {
+  "user-avatar": "_user-avatar_e79tw_2",
+  "user-avatar__image": "_user-avatar__image_e79tw_8",
+  "user-avatar__fallback": "_user-avatar__fallback_e79tw_16",
+  "user-avatar__fallback--red": "_user-avatar__fallback--red_e79tw_29",
+  "user-avatar__fallback--purple": "_user-avatar__fallback--purple_e79tw_32",
+  "user-avatar__fallback--neutral": "_user-avatar__fallback--neutral_e79tw_35",
+  "user-avatar__fallback--blue": "_user-avatar__fallback--blue_e79tw_38",
+  "user-avatar__fallback--cyan": "_user-avatar__fallback--cyan_e79tw_41",
+  "user-avatar__fallback--yellow": "_user-avatar__fallback--yellow_e79tw_44",
+  "user-avatar__fallback--green": "_user-avatar__fallback--green_e79tw_47",
+  "user-avatar__fallback--orange": "_user-avatar__fallback--orange_e79tw_50",
+  "user-avatar__status": "_user-avatar__status_e79tw_53",
+  "user-avatar--size-12": "_user-avatar--size-12_e79tw_62",
+  "user-avatar--size-16": "_user-avatar--size-16_e79tw_73",
+  "user-avatar--size-20": "_user-avatar--size-20_e79tw_84",
+  "user-avatar--size-24": "_user-avatar--size-24_e79tw_95",
+  "user-avatar--size-28": "_user-avatar--size-28_e79tw_106",
+  "user-avatar--size-32": "_user-avatar--size-32_e79tw_117",
+  "user-avatar--size-40": "_user-avatar--size-40_e79tw_128",
+  "user-avatar--size-48": "_user-avatar--size-48_e79tw_139",
+  "user-avatar--size-56": "_user-avatar--size-56_e79tw_150",
+  "user-avatar--size-64": "_user-avatar--size-64_e79tw_161",
+  "user-avatar--size-72": "_user-avatar--size-72_e79tw_172",
+  "user-avatar--size-80": "_user-avatar--size-80_e79tw_183",
+  "user-avatar--size-96": "_user-avatar--size-96_e79tw_194",
+  "user-avatar--size-120": "_user-avatar--size-120_e79tw_205"
+};
+export {
+  a as default
+};
+//# sourceMappingURL=UserAvatar.module.scss.js.map

package/dist/components/user-avatar/UserAvatar.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserAvatar.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/user-avatar/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./UserAvatar.cjs");exports.UserAvatar=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/user-avatar/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/user-avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/user-avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/user-avatar/index.js

@@ -0,0 +1,5 @@
+import { default as e } from "./UserAvatar.js";
+export {
+  e as UserAvatar
+};
+//# sourceMappingURL=index.js.map

package/dist/components/user-avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),i=require("../tooltip/Tooltip.cjs"),m=require("../user-avatar/UserAvatar.cjs"),r=require("./UserAvatarGroup.module.scss.cjs");function f(e){return e.length===0?"":e.length===1?e[0].name:e.length<=3?e.map(t=>t.name).join(", "):`${e.slice(0,2).map(t=>t.name).join(", ")}, +${e.length-2} more`}function g({avatars:e,className:t="",max:u=3,size:s="20"}){const c=e.slice(0,u),n=e.slice(u),o=n.length,p=[r.default["user-avatar-group"],s!=="20"?r.default[`user-avatar-group--size-${s}`]:"",t].filter(Boolean).join(" ");return a.jsxs("div",{className:p,role:"group","aria-label":`${e.length} participants`,children:[c.map(l=>a.jsxs("span",{className:r.default["user-avatar-group__item"],children:[a.jsx("span",{className:r.default["user-avatar-group__trigger"],children:a.jsx(m.default,{src:l.src,alt:l.name,name:l.name,size:s})}),a.jsx("div",{className:r.default["user-avatar-group__tooltip-layer"],role:"presentation",children:a.jsx(i.default,{arrow:"bottom",className:r.default["user-avatar-group__tooltip"],label:l.name})})]},l.key)),o>0&&a.jsxs("span",{className:[r.default["user-avatar-group__item"],r.default["user-avatar-group__overflow"]].join(" "),"aria-label":`${o} more participants`,children:[a.jsxs("span",{className:r.default["user-avatar-group__trigger"],children:["+",o]}),a.jsx("div",{className:r.default["user-avatar-group__tooltip-layer"],role:"presentation",children:a.jsx(i.default,{arrow:"bottom",className:r.default["user-avatar-group__tooltip"],label:f(n)})})]})]})}exports.default=g;
+//# sourceMappingURL=UserAvatarGroup.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserAvatarGroup.cjs","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":"8QAmCA,SAASA,EAAmBC,EAAuC,CACjE,OAAIA,EAAO,SAAW,EAAU,GAC5BA,EAAO,SAAW,EAAUA,EAAO,CAAC,EAAE,KACtCA,EAAO,QAAU,EAAUA,EAAO,IAAKC,GAAMA,EAAE,IAAI,EAAE,KAAK,IAAI,EAC3D,GAAGD,EACP,MAAM,EAAG,CAAC,EACV,IAAKC,GAAMA,EAAE,IAAI,EACjB,KAAK,IAAI,CAAC,MAAMD,EAAO,OAAS,CAAC,OACtC,CAOA,SAAwBE,EAAgB,CACtC,QAAAC,EACA,UAAAC,EAAY,GACZ,IAAAC,EAAM,EACN,KAAAC,EAAO,IACT,EAAyB,CACvB,MAAMC,EAAUJ,EAAQ,MAAM,EAAGE,CAAG,EAC9BL,EAASG,EAAQ,MAAME,CAAG,EAC1BG,EAAWR,EAAO,OAElBS,EAAY,CAChBC,EAAAA,QAAO,mBAAmB,EAC1BJ,IAAS,KAAOI,UAAO,2BAA2BJ,CAAI,EAAE,EAAI,GAC5DF,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEO,EAAAA,KAAC,MAAA,CACC,UAAWF,EACX,KAAK,QACL,aAAY,GAAGN,EAAQ,MAAM,gBAE5B,SAAA,CAAAI,EAAQ,IAAKK,GACZD,OAAC,QAAsB,UAAWD,EAAAA,QAAO,yBAAyB,EAChE,SAAA,CAAAG,EAAAA,IAAC,OAAA,CAAK,UAAWH,EAAAA,QAAO,4BAA4B,EAClD,SAAAG,EAAAA,IAACC,EAAAA,QAAA,CACC,IAAKF,EAAO,IACZ,IAAKA,EAAO,KACZ,KAAMA,EAAO,KACb,KAAAN,CAAA,CAAA,EAEJ,EACAO,EAAAA,IAAC,MAAA,CACC,UAAWH,EAAAA,QAAO,kCAAkC,EACpD,KAAK,eAEL,SAAAG,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAM,SACN,UAAWL,EAAAA,QAAO,4BAA4B,EAC9C,MAAOE,EAAO,IAAA,CAAA,CAChB,CAAA,CACF,GAlBSA,EAAO,GAmBlB,CACD,EACAJ,EAAW,GACVG,EAAAA,KAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,yBAAyB,EAChCA,EAAAA,QAAO,6BAA6B,CAAA,EACpC,KAAK,GAAG,EACV,aAAY,GAAGF,CAAQ,qBAEvB,SAAA,CAAAG,EAAAA,KAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,4BAA4B,EAAG,SAAA,CAAA,IACnDF,CAAA,EACJ,EACAK,EAAAA,IAAC,MAAA,CACC,UAAWH,EAAAA,QAAO,kCAAkC,EACpD,KAAK,eAEL,SAAAG,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAM,SACN,UAAWL,EAAAA,QAAO,4BAA4B,EAC9C,MAAOX,EAAmBC,CAAM,CAAA,CAAA,CAClC,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CAAA,CAIR"}

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

@@ -0,0 +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)}

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

@@ -0,0 +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"}

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

@@ -0,0 +1,90 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import m from "../tooltip/Tooltip.js";
+import g from "../user-avatar/UserAvatar.js";
+import a from "./UserAvatarGroup.module.scss.js";
+function _(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({
+  avatars: r,
+  className: o = "",
+  max: i = 3,
+  size: l = "20"
+}) {
+  const u = r.slice(0, i), p = r.slice(i), n = p.length, c = [
+    a["user-avatar-group"],
+    l !== "20" ? a[`user-avatar-group--size-${l}`] : "",
+    o
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: c,
+      role: "group",
+      "aria-label": `${r.length} participants`,
+      children: [
+        u.map((t) => /* @__PURE__ */ s("span", { className: a["user-avatar-group__item"], children: [
+          /* @__PURE__ */ e("span", { className: a["user-avatar-group__trigger"], children: /* @__PURE__ */ e(
+            g,
+            {
+              src: t.src,
+              alt: t.name,
+              name: t.name,
+              size: l
+            }
+          ) }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: a["user-avatar-group__tooltip-layer"],
+              role: "presentation",
+              children: /* @__PURE__ */ e(
+                m,
+                {
+                  arrow: "bottom",
+                  className: a["user-avatar-group__tooltip"],
+                  label: t.name
+                }
+              )
+            }
+          )
+        ] }, t.key)),
+        n > 0 && /* @__PURE__ */ s(
+          "span",
+          {
+            className: [
+              a["user-avatar-group__item"],
+              a["user-avatar-group__overflow"]
+            ].join(" "),
+            "aria-label": `${n} more participants`,
+            children: [
+              /* @__PURE__ */ s("span", { className: a["user-avatar-group__trigger"], children: [
+                "+",
+                n
+              ] }),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: a["user-avatar-group__tooltip-layer"],
+                  role: "presentation",
+                  children: /* @__PURE__ */ e(
+                    m,
+                    {
+                      arrow: "bottom",
+                      className: a["user-avatar-group__tooltip"],
+                      label: _(p)
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  h as default
+};
+//# sourceMappingURL=UserAvatarGroup.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +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;
+//# sourceMappingURL=UserAvatarGroup.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserAvatarGroup.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,20 @@
+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"
+};
+export {
+  r as default
+};
+//# sourceMappingURL=UserAvatarGroup.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserAvatarGroup.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/components/user-avatar-group/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./UserAvatarGroup.cjs");exports.UserAvatarGroup=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/user-avatar-group/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/user-avatar-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EACV,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,mBAAmB,CAAC"}

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

@@ -0,0 +1,5 @@
+import { default as e } from "./UserAvatarGroup.js";
+export {
+  e as UserAvatarGroup
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/hooks/use-anchored-popup-portal.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),I=require("react-dom"),c=require("../utils/anchoredPopupPlacement.cjs"),N="below";function E(r){return typeof document>"u"?null:r??document.body}function O(r){return r===document.body}function R(r,s,y){const{preferredHeight:p,maxHeightCap:f,contentRef:o,portalContainer:d=null,zIndex:h=c.ANCHORED_POPUP_Z_INDEX,matchWidth:l=!0,gap:m=c.ANCHORED_POPUP_GAP}=y,P=n.useRef(null),[A,C]=n.useState(N),[L,z]=n.useState(f??p),[F,S]=n.useState({position:"fixed",top:0,left:0,width:l?0:void 0,zIndex:h}),i=n.useCallback(()=>{var x,H;const e=r.current;if(!e)return;const t=E(d);if(!t)return;const g=e.getBoundingClientRect(),v=window.innerHeight,a=O(t)?void 0:c.getAnchoredPopupContainerFrame(t),b=((x=o==null?void 0:o.current)==null?void 0:x.offsetHeight)??((H=P.current)==null?void 0:H.offsetHeight)??0,D=b>0?b:p,{placement:w,maxHeight:M}=c.computeAnchoredPopupPlacement(g,v,{gap:m,preferredHeight:D,maxHeightCap:f,bounds:a==null?void 0:a.bounds}),u=c.computeAnchoredPopupFixedStyle(g,w,{gap:m,zIndex:h,width:l?g.width:void 0,viewportHeight:v,containerFrame:a});C(w),z(M),S({position:u.position,left:u.left,zIndex:u.zIndex,...l?{width:u.width}:null,...w==="below"?{top:u.top,bottom:"auto"}:{bottom:u.bottom,top:"auto"}})},[r,o,m,l,f,d,p,h]);n.useLayoutEffect(()=>{if(!s)return;i();function e(){i()}return window.addEventListener("resize",e),document.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),document.removeEventListener("scroll",e,!0)}},[s,i]),n.useLayoutEffect(()=>{if(!s)return;const e=(o==null?void 0:o.current)??P.current;if(!e||typeof ResizeObserver>"u")return;const t=new ResizeObserver(()=>i());return t.observe(e),()=>t.disconnect()},[s,o,i]);const _=n.useCallback(e=>{const t=E(d);return t?I.createPortal(e,t):null},[d]);return{placement:A,maxHeight:L,style:F,portalRef:P,renderPortal:_}}exports.useAnchoredPopupPortal=R;
+//# sourceMappingURL=use-anchored-popup-portal.cjs.map

package/dist/hooks/use-anchored-popup-portal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-anchored-popup-portal.cjs","sources":["../../src/hooks/use-anchored-popup-portal.ts"],"sourcesContent":["import {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type RefObject,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  ANCHORED_POPUP_GAP,\n  ANCHORED_POPUP_Z_INDEX,\n  computeAnchoredPopupFixedStyle,\n  computeAnchoredPopupPlacement,\n  getAnchoredPopupContainerFrame,\n  type PopupPlacement,\n} from '@/utils/anchoredPopupPlacement';\n\nexport interface UseAnchoredPopupPortalOptions {\n  /** Height used for the flip decision when content isn’t measured yet. */\n  preferredHeight: number;\n  /** Cap for scrollable menus (Select/Combobox). Omit for intrinsic panels. */\n  maxHeightCap?: number;\n  /** Ref to the portaled panel for measuring intrinsic height (DateRangePicker). */\n  contentRef?: RefObject<HTMLElement | null>;\n  /**\n   * Portal mount node; defaults to `document.body` with viewport-fixed coords.\n   * Custom containers must establish a positioning context (`position` other\n   * than `static`); coords are converted to that container’s space.\n   */\n  portalContainer?: HTMLElement | null;\n  zIndex?: number;\n  /**\n   * When true (default), fixed width matches the trigger.\n   * DateRangePicker sets false and keeps its CSS width.\n   */\n  matchWidth?: boolean;\n  gap?: number;\n}\n\nexport interface UseAnchoredPopupPortalResult {\n  placement: PopupPlacement;\n  maxHeight: number;\n  style: CSSProperties;\n  /** Ref for the portaled surface — pass to `useOutsideClose` as a second root. */\n  portalRef: RefObject<HTMLDivElement | null>;\n  /** Wraps children in a portal to `portalContainer` or `document.body`. */\n  renderPortal: (children: ReactNode) => ReactNode;\n}\n\nconst DEFAULT_PLACEMENT: PopupPlacement = 'below';\n\nfunction resolvePortalMount(\n  portalContainer: HTMLElement | null | undefined,\n): HTMLElement | null {\n  if (typeof document === 'undefined') return null;\n  return portalContainer ?? document.body;\n}\n\nfunction usesViewportFixedCoords(mount: HTMLElement): boolean {\n  return mount === document.body;\n}\n\n/**\n * Positions a form-widget popup in a portal with viewport-aware above/below flip.\n * Internal to compass-ui form widgets — not a general overlay positioning API.\n */\nexport function useAnchoredPopupPortal(\n  anchorRef: RefObject<HTMLElement | null>,\n  isOpen: boolean,\n  options: UseAnchoredPopupPortalOptions,\n): UseAnchoredPopupPortalResult {\n  const {\n    preferredHeight,\n    maxHeightCap,\n    contentRef,\n    portalContainer = null,\n    zIndex = ANCHORED_POPUP_Z_INDEX,\n    matchWidth = true,\n    gap = ANCHORED_POPUP_GAP,\n  } = options;\n\n  const portalRef = useRef<HTMLDivElement | null>(null);\n  const [placement, setPlacement] = useState<PopupPlacement>(DEFAULT_PLACEMENT);\n  const [maxHeight, setMaxHeight] = useState(maxHeightCap ?? preferredHeight);\n  const [style, setStyle] = useState<CSSProperties>({\n    position: 'fixed',\n    top: 0,\n    left: 0,\n    width: matchWidth ? 0 : undefined,\n    zIndex,\n  });\n\n  const update = useCallback(() => {\n    const anchor = anchorRef.current;\n    if (!anchor) return;\n\n    const mount = resolvePortalMount(portalContainer);\n    if (!mount) return;\n\n    const rect = anchor.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n    const viewportFixed = usesViewportFixedCoords(mount);\n    const containerFrame = viewportFixed\n      ? undefined\n      : getAnchoredPopupContainerFrame(mount);\n\n    const measured =\n      contentRef?.current?.offsetHeight ?? portalRef.current?.offsetHeight ?? 0;\n    const heightForFlip = measured > 0 ? measured : preferredHeight;\n\n    const { placement: nextPlacement, maxHeight: nextMaxHeight } =\n      computeAnchoredPopupPlacement(rect, viewportHeight, {\n        gap,\n        preferredHeight: heightForFlip,\n        maxHeightCap,\n        bounds: containerFrame?.bounds,\n      });\n\n    const fixed = computeAnchoredPopupFixedStyle(rect, nextPlacement, {\n      gap,\n      zIndex,\n      width: matchWidth ? rect.width : undefined,\n      viewportHeight,\n      containerFrame,\n    });\n\n    setPlacement(nextPlacement);\n    setMaxHeight(nextMaxHeight);\n    setStyle({\n      position: fixed.position,\n      left: fixed.left,\n      zIndex: fixed.zIndex,\n      ...(matchWidth ? { width: fixed.width } : null),\n      ...(nextPlacement === 'below'\n        ? { top: fixed.top, bottom: 'auto' }\n        : { bottom: fixed.bottom, top: 'auto' }),\n    });\n  }, [\n    anchorRef,\n    contentRef,\n    gap,\n    matchWidth,\n    maxHeightCap,\n    portalContainer,\n    preferredHeight,\n    zIndex,\n  ]);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    update();\n\n    function handle() {\n      update();\n    }\n\n    window.addEventListener('resize', handle);\n    // Capture phase so nested scroll containers (modals, RHS) are covered.\n    document.addEventListener('scroll', handle, true);\n    return () => {\n      window.removeEventListener('resize', handle);\n      document.removeEventListener('scroll', handle, true);\n    };\n  }, [isOpen, update]);\n\n  // Re-measure after content mounts / changes size (calendar, long lists).\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n    const el = contentRef?.current ?? portalRef.current;\n    if (!el || typeof ResizeObserver === 'undefined') return;\n\n    const ro = new ResizeObserver(() => update());\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [isOpen, contentRef, update]);\n\n  const renderPortal = useCallback(\n    (children: ReactNode) => {\n      const mount = resolvePortalMount(portalContainer);\n      if (!mount) return null;\n      return createPortal(children, mount);\n    },\n    [portalContainer],\n  );\n\n  return {\n    placement,\n    maxHeight,\n    style,\n    portalRef,\n    renderPortal,\n  };\n}\n"],"names":["DEFAULT_PLACEMENT","resolvePortalMount","portalContainer","usesViewportFixedCoords","mount","useAnchoredPopupPortal","anchorRef","isOpen","options","preferredHeight","maxHeightCap","contentRef","zIndex","ANCHORED_POPUP_Z_INDEX","matchWidth","gap","ANCHORED_POPUP_GAP","portalRef","useRef","placement","setPlacement","useState","maxHeight","setMaxHeight","style","setStyle","update","useCallback","anchor","rect","viewportHeight","containerFrame","getAnchoredPopupContainerFrame","measured","_a","_b","heightForFlip","nextPlacement","nextMaxHeight","computeAnchoredPopupPlacement","fixed","computeAnchoredPopupFixedStyle","useLayoutEffect","handle","el","ro","renderPortal","children","createPortal"],"mappings":"iLAmDMA,EAAoC,QAE1C,SAASC,EACPC,EACoB,CACpB,OAAI,OAAO,SAAa,IAAoB,KACrCA,GAAmB,SAAS,IACrC,CAEA,SAASC,EAAwBC,EAA6B,CAC5D,OAAOA,IAAU,SAAS,IAC5B,CAMO,SAASC,EACdC,EACAC,EACAC,EAC8B,CAC9B,KAAM,CACJ,gBAAAC,EACA,aAAAC,EACA,WAAAC,EACA,gBAAAT,EAAkB,KAClB,OAAAU,EAASC,EAAAA,uBACT,WAAAC,EAAa,GACb,IAAAC,EAAMC,EAAAA,kBAAA,EACJR,EAEES,EAAYC,EAAAA,OAA8B,IAAI,EAC9C,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAyBrB,CAAiB,EACtE,CAACsB,EAAWC,CAAY,EAAIF,EAAAA,SAASX,GAAgBD,CAAe,EACpE,CAACe,EAAOC,CAAQ,EAAIJ,WAAwB,CAChD,SAAU,QACV,IAAK,EACL,KAAM,EACN,MAAOP,EAAa,EAAI,OACxB,OAAAF,CAAA,CACD,EAEKc,EAASC,EAAAA,YAAY,IAAM,SAC/B,MAAMC,EAAStB,EAAU,QACzB,GAAI,CAACsB,EAAQ,OAEb,MAAMxB,EAAQH,EAAmBC,CAAe,EAChD,GAAI,CAACE,EAAO,OAEZ,MAAMyB,EAAOD,EAAO,sBAAA,EACdE,EAAiB,OAAO,YAExBC,EADgB5B,EAAwBC,CAAK,EAE/C,OACA4B,EAAAA,+BAA+B5B,CAAK,EAElC6B,IACJC,EAAAvB,GAAA,YAAAA,EAAY,UAAZ,YAAAuB,EAAqB,iBAAgBC,EAAAlB,EAAU,UAAV,YAAAkB,EAAmB,eAAgB,EACpEC,EAAgBH,EAAW,EAAIA,EAAWxB,EAE1C,CAAE,UAAW4B,EAAe,UAAWC,GAC3CC,EAAAA,8BAA8BV,EAAMC,EAAgB,CAClD,IAAAf,EACA,gBAAiBqB,EACjB,aAAA1B,EACA,OAAQqB,GAAA,YAAAA,EAAgB,MAAA,CACzB,EAEGS,EAAQC,EAAAA,+BAA+BZ,EAAMQ,EAAe,CAChE,IAAAtB,EACA,OAAAH,EACA,MAAOE,EAAae,EAAK,MAAQ,OACjC,eAAAC,EACA,eAAAC,CAAA,CACD,EAEDX,EAAaiB,CAAa,EAC1Bd,EAAae,CAAa,EAC1Bb,EAAS,CACP,SAAUe,EAAM,SAChB,KAAMA,EAAM,KACZ,OAAQA,EAAM,OACd,GAAI1B,EAAa,CAAE,MAAO0B,EAAM,OAAU,KAC1C,GAAIH,IAAkB,QAClB,CAAE,IAAKG,EAAM,IAAK,OAAQ,MAAA,EAC1B,CAAE,OAAQA,EAAM,OAAQ,IAAK,MAAA,CAAO,CACzC,CACH,EAAG,CACDlC,EACAK,EACAI,EACAD,EACAJ,EACAR,EACAO,EACAG,CAAA,CACD,EAED8B,EAAAA,gBAAgB,IAAM,CACpB,GAAI,CAACnC,EAAQ,OAEbmB,EAAA,EAEA,SAASiB,GAAS,CAChBjB,EAAA,CACF,CAEA,cAAO,iBAAiB,SAAUiB,CAAM,EAExC,SAAS,iBAAiB,SAAUA,EAAQ,EAAI,EACzC,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAM,EAC3C,SAAS,oBAAoB,SAAUA,EAAQ,EAAI,CACrD,CACF,EAAG,CAACpC,EAAQmB,CAAM,CAAC,EAGnBgB,EAAAA,gBAAgB,IAAM,CACpB,GAAI,CAACnC,EAAQ,OACb,MAAMqC,GAAKjC,GAAA,YAAAA,EAAY,UAAWM,EAAU,QAC5C,GAAI,CAAC2B,GAAM,OAAO,eAAmB,IAAa,OAElD,MAAMC,EAAK,IAAI,eAAe,IAAMnB,GAAQ,EAC5C,OAAAmB,EAAG,QAAQD,CAAE,EACN,IAAMC,EAAG,WAAA,CAClB,EAAG,CAACtC,EAAQI,EAAYe,CAAM,CAAC,EAE/B,MAAMoB,EAAenB,EAAAA,YAClBoB,GAAwB,CACvB,MAAM3C,EAAQH,EAAmBC,CAAe,EAChD,OAAKE,EACE4C,EAAAA,aAAaD,EAAU3C,CAAK,EADhB,IAErB,EACA,CAACF,CAAe,CAAA,EAGlB,MAAO,CACL,UAAAiB,EACA,UAAAG,EACA,MAAAE,EACA,UAAAP,EACA,aAAA6B,CAAA,CAEJ"}

package/dist/hooks/use-anchored-popup-portal.d.ts

@@ -0,0 +1,38 @@
+import { CSSProperties, ReactNode, RefObject } from 'react';
+import { PopupPlacement } from '../utils/anchoredPopupPlacement';
+export interface UseAnchoredPopupPortalOptions {
+    /** Height used for the flip decision when content isn’t measured yet. */
+    preferredHeight: number;
+    /** Cap for scrollable menus (Select/Combobox). Omit for intrinsic panels. */
+    maxHeightCap?: number;
+    /** Ref to the portaled panel for measuring intrinsic height (DateRangePicker). */
+    contentRef?: RefObject<HTMLElement | null>;
+    /**
+     * Portal mount node; defaults to `document.body` with viewport-fixed coords.
+     * Custom containers must establish a positioning context (`position` other
+     * than `static`); coords are converted to that container’s space.
+     */
+    portalContainer?: HTMLElement | null;
+    zIndex?: number;
+    /**
+     * When true (default), fixed width matches the trigger.
+     * DateRangePicker sets false and keeps its CSS width.
+     */
+    matchWidth?: boolean;
+    gap?: number;
+}
+export interface UseAnchoredPopupPortalResult {
+    placement: PopupPlacement;
+    maxHeight: number;
+    style: CSSProperties;
+    /** Ref for the portaled surface — pass to `useOutsideClose` as a second root. */
+    portalRef: RefObject<HTMLDivElement | null>;
+    /** Wraps children in a portal to `portalContainer` or `document.body`. */
+    renderPortal: (children: ReactNode) => ReactNode;
+}
+/**
+ * Positions a form-widget popup in a portal with viewport-aware above/below flip.
+ * Internal to compass-ui form widgets — not a general overlay positioning API.
+ */
+export declare function useAnchoredPopupPortal(anchorRef: RefObject<HTMLElement | null>, isOpen: boolean, options: UseAnchoredPopupPortalOptions): UseAnchoredPopupPortalResult;
+//# sourceMappingURL=use-anchored-popup-portal.d.ts.map

package/dist/hooks/use-anchored-popup-portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-anchored-popup-portal.d.ts","sourceRoot":"","sources":["../../src/hooks/use-anchored-popup-portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,gCAAgC,CAAC;AAExC,MAAM,WAAW,6BAA6B;IAC5C,yEAAyE;IACzE,eAAe,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kFAAkF;IAClF,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C;;;;OAIG;IACH,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,4BAA4B;IAC3C,SAAS,EAAE,cAAc,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,aAAa,CAAC;IACrB,iFAAiF;IACjF,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C,0EAA0E;IAC1E,YAAY,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,SAAS,CAAC;CAClD;AAeD;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,6BAA6B,GACrC,4BAA4B,CA2H9B"}