stream-chat-react 14.11.1 → 15.0.0-rc.1

package/dist/es/components/Avatar/Avatar.mjs

@@ -0,0 +1,62 @@
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Avatar/Avatar.tsx
+var getInitials = (name) => {
+	const regex = /(\p{L}{1})\p{L}+/gu;
+	if (!name || name.trim().length === 0) return "";
+	const initials = Array.from(name?.matchAll(regex) || []);
+	if (!initials.length) return "";
+	return `${initials.at(0)[1]}${initials.length > 1 ? initials.at(-1)[1] : ""}`;
+};
+/**
+* A round avatar image with fallback to username's first letter
+*/
+var Avatar = ({ className, FallbackIcon, imageUrl, initials: customInitials, isOnline, size, userName, ...rest }) => {
+	const { IconUser } = useComponentContextIcons();
+	const ResolvedFallbackIcon = FallbackIcon ?? IconUser;
+	const [error, setError] = useState(false);
+	useEffect(() => () => setError(false), [imageUrl]);
+	const nameString = userName?.toString().trim() || "";
+	const sizeAwareInitials = useMemo(() => {
+		const initials = customInitials || getInitials(nameString);
+		if (size === "sm" || size === "xs") return initials.charAt(0);
+		return initials;
+	}, [
+		nameString,
+		size,
+		customInitials
+	]);
+	const showImage = typeof imageUrl === "string" && imageUrl && !error;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(`str-chat__avatar`, className, {
+			"str-chat__avatar--multiple-letters": sizeAwareInitials.length > 1,
+			"str-chat__avatar--no-letters": !sizeAwareInitials.length,
+			"str-chat__avatar--one-letter": sizeAwareInitials.length === 1,
+			[`str-chat__avatar--size-${size}`]: typeof size === "string"
+		}),
+		"data-testid": "avatar",
+		role: "button",
+		title: userName,
+		...rest,
+		children: [typeof isOnline === "boolean" && /* @__PURE__ */ jsx("div", { className: clsx("str-chat__avatar-status-badge", {
+			"str-chat__avatar-status-badge--offline": !isOnline,
+			"str-chat__avatar-status-badge--online": isOnline
+		}) }), showImage ? /* @__PURE__ */ jsx("img", {
+			alt: nameString,
+			className: "str-chat__avatar-image",
+			"data-testid": "avatar-img",
+			onError: () => setError(true),
+			src: imageUrl
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [!!sizeAwareInitials.length && /* @__PURE__ */ jsx("div", {
+			className: "str-chat__avatar-initials",
+			"data-testid": "avatar-fallback",
+			children: sizeAwareInitials
+		}), !sizeAwareInitials.length && /* @__PURE__ */ jsx(ResolvedFallbackIcon, {})] })]
+	});
+};
+//#endregion
+export { Avatar };
+
+//# sourceMappingURL=Avatar.mjs.map

package/dist/es/components/Avatar/Avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.mjs","names":[],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { useComponentContextIcons } from '../../context';\n\nexport type AvatarProps = {\n  /** Custom icon rendered when there is no image and no initials */\n  FallbackIcon?: ComponentType<ComponentPropsWithoutRef<'svg'>>;\n  /** URL of the avatar image */\n  imageUrl?: string;\n  /** Name of the user (first and last name), used for avatar image alt text and title fallback */\n  userName?: string;\n  /**\n   * Initials that are used directly instead of generating intials from `userName` property.\n   * @note Providing more than two characters will break the default UI.\n   */\n  initials?: string;\n  /** Online status indicator, not rendered if not of type boolean */\n  isOnline?: boolean;\n  size: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | (string & {}) | null;\n} & ComponentPropsWithoutRef<'div'>;\n\nconst getInitials = (name?: string) => {\n  const regex = /(\\p{L}{1})\\p{L}+/gu;\n\n  if (!name || name.trim().length === 0) {\n    return '';\n  }\n\n  const initials = Array.from(name?.matchAll(regex) || []);\n\n  if (!initials.length) {\n    return '';\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  const startInitial = initials.at(0)![1];\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  const endInitial = initials.length > 1 ? initials.at(-1)![1] : '';\n\n  return `${startInitial}${endInitial}`;\n};\n\n/**\n * A round avatar image with fallback to username's first letter\n */\nexport const Avatar = ({\n  className,\n  FallbackIcon,\n  imageUrl,\n  initials: customInitials,\n  isOnline,\n  size,\n  userName,\n  ...rest\n}: AvatarProps) => {\n  const { IconUser } = useComponentContextIcons();\n  // The prop still wins over the context slot: it targets one avatar, the slot rebrands all of them.\n  const ResolvedFallbackIcon = FallbackIcon ?? IconUser;\n  const [error, setError] = useState(false);\n\n  useEffect(() => () => setError(false), [imageUrl]);\n\n  const nameString = userName?.toString().trim() || '';\n\n  const sizeAwareInitials = useMemo(() => {\n    const initials = customInitials || getInitials(nameString);\n\n    if (size === 'sm' || size === 'xs') {\n      return initials.charAt(0);\n    }\n\n    return initials;\n  }, [nameString, size, customInitials]);\n\n  const showImage = typeof imageUrl === 'string' && imageUrl && !error;\n\n  return (\n    <div\n      className={clsx(`str-chat__avatar`, className, {\n        'str-chat__avatar--multiple-letters': sizeAwareInitials.length > 1,\n        'str-chat__avatar--no-letters': !sizeAwareInitials.length,\n        'str-chat__avatar--one-letter': sizeAwareInitials.length === 1,\n        [`str-chat__avatar--size-${size}`]: typeof size === 'string',\n      })}\n      data-testid='avatar'\n      role='button'\n      title={userName}\n      {...rest}\n    >\n      {typeof isOnline === 'boolean' && (\n        <div\n          className={clsx('str-chat__avatar-status-badge', {\n            'str-chat__avatar-status-badge--offline': !isOnline,\n            'str-chat__avatar-status-badge--online': isOnline,\n          })}\n        />\n      )}\n      {showImage ? (\n        <img\n          alt={nameString}\n          className='str-chat__avatar-image'\n          data-testid='avatar-img'\n          onError={() => setError(true)}\n          src={imageUrl}\n        />\n      ) : (\n        <>\n          {!!sizeAwareInitials.length && (\n            <div className='str-chat__avatar-initials' data-testid='avatar-fallback'>\n              {sizeAwareInitials}\n            </div>\n          )}\n          {!sizeAwareInitials.length && <ResolvedFallbackIcon />}\n        </>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;AA2BA,IAAM,eAAe,SAAkB;CACrC,MAAM,QAAQ;CAEd,IAAI,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,WAAW,GAClC,OAAO;CAGT,MAAM,WAAW,MAAM,KAAK,MAAM,SAAS,KAAK,KAAK,CAAC,CAAC;CAEvD,IAAI,CAAC,SAAS,QACZ,OAAO;CAQT,OAAO,GAJc,SAAS,GAAG,CAAC,CAAC,CAAE,KAElB,SAAS,SAAS,IAAI,SAAS,GAAG,EAAE,CAAC,CAAE,KAAK;AAGjE;;;;AAKA,IAAa,UAAU,EACrB,WACA,cACA,UACA,UAAU,gBACV,UACA,MACA,UACA,GAAG,WACc;CACjB,MAAM,EAAE,aAAa,yBAAyB;CAE9C,MAAM,uBAAuB,gBAAgB;CAC7C,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CAExC,sBAAsB,SAAS,KAAK,GAAG,CAAC,QAAQ,CAAC;CAEjD,MAAM,aAAa,UAAU,SAAS,CAAC,CAAC,KAAK,KAAK;CAElD,MAAM,oBAAoB,cAAc;EACtC,MAAM,WAAW,kBAAkB,YAAY,UAAU;EAEzD,IAAI,SAAS,QAAQ,SAAS,MAC5B,OAAO,SAAS,OAAO,CAAC;EAG1B,OAAO;CACT,GAAG;EAAC;EAAY;EAAM;CAAc,CAAC;CAErC,MAAM,YAAY,OAAO,aAAa,YAAY,YAAY,CAAC;CAE/D,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,oBAAoB,WAAW;GAC7C,sCAAsC,kBAAkB,SAAS;GACjE,gCAAgC,CAAC,kBAAkB;GACnD,gCAAgC,kBAAkB,WAAW;IAC5D,0BAA0B,SAAS,OAAO,SAAS;EACtD,CAAC;EACD,eAAY;EACZ,MAAK;EACL,OAAO;EACP,GAAI;YAVN,CAYG,OAAO,aAAa,aACnB,oBAAC,OAAD,EACE,WAAW,KAAK,iCAAiC;GAC/C,0CAA0C,CAAC;GAC3C,yCAAyC;EAC3C,CAAC,EACF,CAAA,GAEF,YACC,oBAAC,OAAD;GACE,KAAK;GACL,WAAU;GACV,eAAY;GACZ,eAAe,SAAS,IAAI;GAC5B,KAAK;EACN,CAAA,IAED,qBAAA,YAAA,EAAA,UAAA,CACG,CAAC,CAAC,kBAAkB,UACnB,oBAAC,OAAD;GAAK,WAAU;GAA4B,eAAY;aACpD;EACE,CAAA,GAEN,CAAC,kBAAkB,UAAU,oBAAC,sBAAD,CAAuB,CAAA,CACrD,EAAA,CAAA,CAED;;AAET"}

package/dist/es/components/Avatar/AvatarStack.mjs

@@ -0,0 +1,32 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { Avatar } from "./Avatar.mjs";
+import { Badge } from "../Badge/Badge.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Avatar/AvatarStack.tsx
+function AvatarStack({ badgeSize, capLimit = 3, component: Component = "div", displayInfo = [], size }) {
+	const { Avatar: Avatar$1 = Avatar } = useComponentContext();
+	const displayInfoToRender = useMemo(() => displayInfo.length > capLimit ? displayInfo.slice(0, capLimit) : displayInfo, [displayInfo, capLimit]);
+	const overflowCount = displayInfo.length - displayInfoToRender.length;
+	if (!displayInfo.length) return null;
+	return /* @__PURE__ */ jsxs(Component, {
+		className: clsx("str-chat__avatar-stack", { [`str-chat__avatar-stack--size-${size}`]: typeof size === "string" }),
+		"data-testid": "avatar-stack",
+		children: [displayInfoToRender.map((info, index) => /* @__PURE__ */ jsx(Avatar$1, {
+			imageUrl: info.imageUrl,
+			size,
+			userName: info.userName
+		}, info.id ?? `${info.userName}-${info.imageUrl}-${index}`)), typeof overflowCount === "number" && overflowCount > 0 && /* @__PURE__ */ jsxs(Badge, {
+			className: "str-chat__avatar-stack__count-badge",
+			"data-testid": "avatar-stack-count-badge",
+			size: badgeSize ?? size,
+			variant: "counter",
+			children: ["+", overflowCount]
+		})]
+	});
+}
+//#endregion
+export { AvatarStack };
+
+//# sourceMappingURL=AvatarStack.mjs.map

package/dist/es/components/Avatar/AvatarStack.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarStack.mjs","names":[],"sources":["../../../../src/components/Avatar/AvatarStack.tsx"],"sourcesContent":["import React, { type ComponentProps, type ElementType, useMemo } from 'react';\nimport { useComponentContext } from '../../context';\nimport { type AvatarProps, Avatar as DefaultAvatar } from './Avatar';\nimport clsx from 'clsx';\nimport { Badge, type BadgeSize } from '../Badge';\n\nexport function AvatarStack({\n  badgeSize,\n  capLimit = 3,\n  component: Component = 'div',\n  displayInfo = [],\n  size,\n}: {\n  component?: ElementType;\n  displayInfo?: (Pick<AvatarProps, 'imageUrl' | 'userName'> & { id?: string })[];\n  size: 'md' | 'sm' | 'xs' | null;\n  badgeSize?: BadgeSize;\n  capLimit?: number;\n}) {\n  const { Avatar = DefaultAvatar } = useComponentContext();\n\n  const displayInfoToRender = useMemo(\n    () => (displayInfo.length > capLimit ? displayInfo.slice(0, capLimit) : displayInfo),\n    [displayInfo, capLimit],\n  );\n  const overflowCount = displayInfo.length - displayInfoToRender.length;\n\n  if (!displayInfo.length) {\n    return null;\n  }\n\n  return (\n    <Component\n      className={clsx('str-chat__avatar-stack', {\n        [`str-chat__avatar-stack--size-${size}`]: typeof size === 'string',\n      })}\n      data-testid='avatar-stack'\n    >\n      {displayInfoToRender.map((info, index) => (\n        <Avatar\n          imageUrl={info.imageUrl}\n          key={info.id ?? `${info.userName}-${info.imageUrl}-${index}`}\n          size={size}\n          userName={info.userName}\n        />\n      ))}\n      {typeof overflowCount === 'number' && overflowCount > 0 && (\n        <Badge\n          className='str-chat__avatar-stack__count-badge'\n          data-testid='avatar-stack-count-badge'\n          size={badgeSize ?? size}\n          variant='counter'\n        >\n          +{overflowCount}\n        </Badge>\n      )}\n    </Component>\n  );\n}\n\nexport type AvatarStackProps = ComponentProps<typeof AvatarStack>;\n"],"mappings":";;;;;;;AAMA,SAAgB,YAAY,EAC1B,WACA,WAAW,GACX,WAAW,YAAY,OACvB,cAAc,CAAC,GACf,QAOC;CACD,MAAM,EAAE,QAAA,WAAS,WAAkB,oBAAoB;CAEvD,MAAM,sBAAsB,cACnB,YAAY,SAAS,WAAW,YAAY,MAAM,GAAG,QAAQ,IAAI,aACxE,CAAC,aAAa,QAAQ,CACxB;CACA,MAAM,gBAAgB,YAAY,SAAS,oBAAoB;CAE/D,IAAI,CAAC,YAAY,QACf,OAAO;CAGT,OACE,qBAAC,WAAD;EACE,WAAW,KAAK,0BAA0B,GACvC,gCAAgC,SAAS,OAAO,SAAS,SAC5D,CAAC;EACD,eAAY;YAJd,CAMG,oBAAoB,KAAK,MAAM,UAC9B,oBAAC,UAAD;GACE,UAAU,KAAK;GAET;GACN,UAAU,KAAK;EAChB,GAHM,KAAK,MAAM,GAAG,KAAK,SAAS,GAAG,KAAK,SAAS,GAAG,OAGtD,CACF,GACA,OAAO,kBAAkB,YAAY,gBAAgB,KACpD,qBAAC,OAAD;GACE,WAAU;GACV,eAAY;GACZ,MAAM,aAAa;GACnB,SAAQ;aAJV,CAKC,KACG,aACG;IAEA;;AAEf"}

package/dist/es/components/Avatar/ChannelAvatar.mjs

@@ -0,0 +1,25 @@
+import { GroupAvatar } from "./GroupAvatar.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Avatar/ChannelAvatar.tsx
+var ChannelAvatar = ({ displayMembers, imageUrl, size, userName, ...sharedProps }) => {
+	return /* @__PURE__ */ jsx(GroupAvatar, {
+		displayMembers: useMemo(() => {
+			if (!imageUrl && displayMembers && displayMembers.length > 0) return displayMembers;
+			return [{
+				imageUrl,
+				userName
+			}];
+		}, [
+			displayMembers,
+			imageUrl,
+			userName
+		]),
+		size,
+		...sharedProps
+	});
+};
+//#endregion
+export { ChannelAvatar };
+
+//# sourceMappingURL=ChannelAvatar.mjs.map

package/dist/es/components/Avatar/ChannelAvatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelAvatar.mjs","names":[],"sources":["../../../../src/components/Avatar/ChannelAvatar.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { GroupAvatar } from './';\nimport type { AvatarProps, GroupAvatarProps } from './';\n\nexport type ChannelAvatarProps = Partial<Omit<GroupAvatarProps & AvatarProps, 'size'>> & {\n  size: GroupAvatarProps['size'] | AvatarProps['size'];\n};\n\nexport const ChannelAvatar = ({\n  displayMembers,\n  imageUrl,\n  size,\n  userName,\n  ...sharedProps\n}: ChannelAvatarProps) => {\n  const displayInfo = useMemo(() => {\n    // Prefer the channel's own image; only derive the avatar from members when\n    // there is no channel imageUrl to display.\n    if (!imageUrl && displayMembers && displayMembers.length > 0) {\n      return displayMembers;\n    }\n\n    return [\n      {\n        imageUrl,\n        userName,\n      },\n    ];\n  }, [displayMembers, imageUrl, userName]);\n\n  return <GroupAvatar displayMembers={displayInfo} size={size} {...sharedProps} />;\n};\n"],"mappings":";;;;AASA,IAAa,iBAAiB,EAC5B,gBACA,UACA,MACA,UACA,GAAG,kBACqB;CAgBxB,OAAO,oBAAC,aAAD;EAAa,gBAfA,cAAc;GAGhC,IAAI,CAAC,YAAY,kBAAkB,eAAe,SAAS,GACzD,OAAO;GAGT,OAAO,CACL;IACE;IACA;GACF,CACF;EACF,GAAG;GAAC;GAAgB;GAAU;EAAQ,CAEF;EAAmB;EAAM,GAAI;CAAc,CAAA;AACjF"}

package/dist/es/components/Avatar/GroupAvatar.mjs

@@ -0,0 +1,53 @@
+import { Avatar } from "./Avatar.mjs";
+import { Badge } from "../Badge/Badge.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Avatar/GroupAvatar.tsx
+/**
+* Avatar component to display multiple users' avatars in a group.
+* Renders a single Avatar if fewer than 2 members. Otherwise, renders up to 2 avatars (when overflowCount is set) or 4, plus an optional +N badge.
+*/
+var GroupAvatar = ({ badgeSize, className, displayMembers = [], isOnline, size, ...rest }) => {
+	const displayMembersToRender = useMemo(() => displayMembers.length > 4 ? displayMembers.slice(0, 2) : displayMembers, [displayMembers]);
+	const overflowCount = displayMembers.length - displayMembersToRender.length;
+	if (displayMembers.length < 2) {
+		const firstUser = displayMembers[0];
+		return /* @__PURE__ */ jsx(Avatar, {
+			imageUrl: firstUser?.imageUrl,
+			isOnline,
+			size,
+			userName: firstUser?.userName,
+			...rest
+		});
+	}
+	let avatarSize = null;
+	if (size === "2xl") avatarSize = "lg";
+	else if (size === "xl") avatarSize = "md";
+	else if (size === "lg") avatarSize = "sm";
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__avatar-group", {
+			"str-chat__avatar-group--offline": typeof isOnline === "boolean" && !isOnline,
+			"str-chat__avatar-group--online": typeof isOnline === "boolean" && isOnline,
+			[`str-chat__avatar-group--size-${size}`]: typeof size === "string"
+		}, className),
+		"data-testid": "group-avatar",
+		role: "button",
+		...rest,
+		children: [displayMembersToRender.map(({ id, imageUrl, userName }, index) => /* @__PURE__ */ jsx(Avatar, {
+			imageUrl,
+			size: avatarSize,
+			userName
+		}, id || `${userName}-${imageUrl}-${index}`)), typeof overflowCount === "number" && overflowCount > 0 && /* @__PURE__ */ jsxs(Badge, {
+			className: "str-chat__avatar-group__count-badge",
+			"data-testid": "group-avatar-count-badge",
+			size: badgeSize,
+			variant: "counter",
+			children: ["+", overflowCount]
+		})]
+	});
+};
+//#endregion
+export { GroupAvatar };
+
+//# sourceMappingURL=GroupAvatar.mjs.map

package/dist/es/components/Avatar/GroupAvatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupAvatar.mjs","names":[],"sources":["../../../../src/components/Avatar/GroupAvatar.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { type ComponentPropsWithoutRef, useMemo } from 'react';\nimport { Avatar, type AvatarProps } from './Avatar';\nimport { Badge, type BadgeSize } from '../Badge';\n\nexport type GroupAvatarMember = {\n  imageUrl?: string;\n  userName?: string;\n  id?: string;\n};\n\nexport type GroupAvatarProps = {\n  /** List of members to show as avatars; at most 2 when there's more than 4 members, otherwise 4. Defaults to [] when omitted. */\n  displayMembers?: GroupAvatarMember[];\n  size: '2xl' | 'xl' | 'lg' | (string & {}) | null;\n  badgeSize?: BadgeSize;\n  isOnline?: boolean;\n} & ComponentPropsWithoutRef<'div'>;\n\n/**\n * Avatar component to display multiple users' avatars in a group.\n * Renders a single Avatar if fewer than 2 members. Otherwise, renders up to 2 avatars (when overflowCount is set) or 4, plus an optional +N badge.\n */\nexport const GroupAvatar = ({\n  badgeSize,\n  className,\n  displayMembers = [],\n  isOnline,\n  size,\n  ...rest\n}: GroupAvatarProps) => {\n  const displayMembersToRender = useMemo(\n    () => (displayMembers.length > 4 ? displayMembers.slice(0, 2) : displayMembers),\n    [displayMembers],\n  );\n  const overflowCount = displayMembers.length - displayMembersToRender.length;\n\n  if (displayMembers.length < 2) {\n    const firstUser = displayMembers[0];\n\n    return (\n      <Avatar\n        imageUrl={firstUser?.imageUrl}\n        isOnline={isOnline}\n        size={size}\n        userName={firstUser?.userName}\n        {...rest}\n      />\n    );\n  }\n\n  let avatarSize: AvatarProps['size'] = null;\n  if (size === '2xl') {\n    avatarSize = 'lg';\n  } else if (size === 'xl') {\n    avatarSize = 'md';\n  } else if (size === 'lg') {\n    avatarSize = 'sm';\n  }\n\n  return (\n    <div\n      className={clsx(\n        'str-chat__avatar-group',\n        {\n          'str-chat__avatar-group--offline': typeof isOnline === 'boolean' && !isOnline,\n          'str-chat__avatar-group--online': typeof isOnline === 'boolean' && isOnline,\n          [`str-chat__avatar-group--size-${size}`]: typeof size === 'string',\n        },\n        className,\n      )}\n      data-testid='group-avatar'\n      role='button'\n      {...rest}\n    >\n      {displayMembersToRender.map(({ id, imageUrl, userName }, index) => (\n        <Avatar\n          imageUrl={imageUrl}\n          key={id || `${userName}-${imageUrl}-${index}`}\n          size={avatarSize}\n          userName={userName}\n        />\n      ))}\n      {typeof overflowCount === 'number' && overflowCount > 0 && (\n        <Badge\n          className='str-chat__avatar-group__count-badge'\n          data-testid='group-avatar-count-badge'\n          size={badgeSize}\n          variant='counter'\n        >\n          +{overflowCount}\n        </Badge>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAuBA,IAAa,eAAe,EAC1B,WACA,WACA,iBAAiB,CAAC,GAClB,UACA,MACA,GAAG,WACmB;CACtB,MAAM,yBAAyB,cACtB,eAAe,SAAS,IAAI,eAAe,MAAM,GAAG,CAAC,IAAI,gBAChE,CAAC,cAAc,CACjB;CACA,MAAM,gBAAgB,eAAe,SAAS,uBAAuB;CAErE,IAAI,eAAe,SAAS,GAAG;EAC7B,MAAM,YAAY,eAAe;EAEjC,OACE,oBAAC,QAAD;GACE,UAAU,WAAW;GACX;GACJ;GACN,UAAU,WAAW;GACrB,GAAI;EACL,CAAA;CAEL;CAEA,IAAI,aAAkC;CACtC,IAAI,SAAS,OACX,aAAa;MACR,IAAI,SAAS,MAClB,aAAa;MACR,IAAI,SAAS,MAClB,aAAa;CAGf,OACE,qBAAC,OAAD;EACE,WAAW,KACT,0BACA;GACE,mCAAmC,OAAO,aAAa,aAAa,CAAC;GACrE,kCAAkC,OAAO,aAAa,aAAa;IAClE,gCAAgC,SAAS,OAAO,SAAS;EAC5D,GACA,SACF;EACA,eAAY;EACZ,MAAK;EACL,GAAI;YAZN,CAcG,uBAAuB,KAAK,EAAE,IAAI,UAAU,YAAY,UACvD,oBAAC,QAAD;GACY;GAEV,MAAM;GACI;EACX,GAHM,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAGvC,CACF,GACA,OAAO,kBAAkB,YAAY,gBAAgB,KACpD,qBAAC,OAAD;GACE,WAAU;GACV,eAAY;GACZ,MAAM;GACN,SAAQ;aAJV,CAKC,KACG,aACG;IAEN;;AAET"}

package/dist/es/components/Avatar/utils.mjs

@@ -0,0 +1,10 @@
+//#region src/components/Avatar/utils.ts
+var extractDisplayInfo = ({ user }) => ({
+	id: user?.id,
+	imageUrl: user?.image,
+	userName: user?.name
+});
+//#endregion
+export { extractDisplayInfo };
+
+//# sourceMappingURL=utils.mjs.map

package/dist/es/components/Avatar/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../../src/components/Avatar/utils.ts"],"sourcesContent":["import type { ComponentContextValue } from '../../context';\n\nexport const extractDisplayInfo: NonNullable<\n  ComponentContextValue['extractDisplayInfo']\n> = ({ user }) => ({\n  id: user?.id,\n  imageUrl: user?.image,\n  userName: user?.name, // || user?.id,\n});\n"],"mappings":";AAEA,IAAa,sBAER,EAAE,YAAY;CACjB,IAAI,MAAM;CACV,UAAU,MAAM;CAChB,UAAU,MAAM;AAClB"}

package/dist/es/components/Badge/Badge.mjs

@@ -0,0 +1,28 @@
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Badge/Badge.tsx
+/**
+* Compact pill/circle badge for counts and labels.
+* Uses design tokens: --badge-bg-*, --badge-text-*, --badge-border.
+*/
+var Badge = ({ children, className, size = "md", variant = "default", ...spanProps }) => /* @__PURE__ */ jsx("div", {
+	...spanProps,
+	className: clsx("str-chat__badge", `str-chat__badge--variant-${variant}`, { [`str-chat__badge--size-${size}`]: size }, className),
+	children
+});
+var ErrorBadge = ({ className, size = "sm", ...rest }) => {
+	const { IconExclamationMarkFill } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(Badge, {
+		...rest,
+		className,
+		size,
+		variant: "error",
+		children: /* @__PURE__ */ jsx(IconExclamationMarkFill, {})
+	});
+};
+//#endregion
+export { Badge, ErrorBadge };
+
+//# sourceMappingURL=Badge.mjs.map

package/dist/es/components/Badge/Badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.mjs","names":[],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { type ComponentProps } from 'react';\nimport { useComponentContextIcons } from '../../context';\n\nexport type BadgeVariant =\n  | 'default'\n  | 'primary'\n  | 'error'\n  | 'neutral'\n  | 'counter'\n  | 'inverse';\n\nexport type BadgeSize = 'xs' | 'sm' | 'md' | 'lg' | null;\n\nexport type BadgeProps = ComponentProps<'div'> & {\n  /** Visual variant mapping to design tokens */\n  variant?: BadgeVariant;\n  /** Size preset (typography and padding) */\n  size?: BadgeSize;\n};\n\n/**\n * Compact pill/circle badge for counts and labels.\n * Uses design tokens: --badge-bg-*, --badge-text-*, --badge-border.\n */\nexport const Badge = ({\n  children,\n  className,\n  size = 'md',\n  variant = 'default',\n  ...spanProps\n}: BadgeProps) => (\n  <div\n    {...spanProps}\n    className={clsx(\n      'str-chat__badge',\n      `str-chat__badge--variant-${variant}`,\n      { [`str-chat__badge--size-${size}`]: size },\n      className,\n    )}\n  >\n    {children}\n  </div>\n);\n\nexport const ErrorBadge = ({\n  className,\n  size = 'sm',\n  ...rest\n}: Omit<BadgeProps, 'variant'>) => {\n  const { IconExclamationMarkFill } = useComponentContextIcons();\n\n  return (\n    <Badge {...rest} className={className} size={size} variant='error'>\n      <IconExclamationMarkFill />\n    </Badge>\n  );\n};\n"],"mappings":";;;;;;;;;AAyBA,IAAa,SAAS,EACpB,UACA,WACA,OAAO,MACP,UAAU,WACV,GAAG,gBAEH,oBAAC,OAAD;CACE,GAAI;CACJ,WAAW,KACT,mBACA,4BAA4B,WAC5B,GAAG,yBAAyB,SAAS,KAAK,GAC1C,SACF;CAEC;AACE,CAAA;AAGP,IAAa,cAAc,EACzB,WACA,OAAO,MACP,GAAG,WAC8B;CACjC,MAAM,EAAE,4BAA4B,yBAAyB;CAE7D,OACE,oBAAC,OAAD;EAAO,GAAI;EAAiB;EAAiB;EAAM,SAAQ;YACzD,oBAAC,yBAAD,CAA0B,CAAA;CACrB,CAAA;AAEX"}

package/dist/es/components/Badge/MediaBadge.mjs

@@ -0,0 +1,21 @@
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Badge/MediaBadge.tsx
+var MediaBadge = ({ attachment, variant }) => {
+	const { IconMicrophoneSolid, IconVideoFill } = useComponentContextIcons();
+	const Icon = {
+		video: IconVideoFill,
+		voiceRecording: IconMicrophoneSolid
+	}[variant];
+	const { duration } = attachment.custom ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__media-badge", { [`str-chat__media-badge--${variant}`]: variant }),
+		children: [Icon && /* @__PURE__ */ jsx(Icon, {}), duration ? /* @__PURE__ */ jsx("div", { children: duration }) : null]
+	});
+};
+//#endregion
+export { MediaBadge };
+
+//# sourceMappingURL=MediaBadge.mjs.map

package/dist/es/components/Badge/MediaBadge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaBadge.mjs","names":[],"sources":["../../../../src/components/Badge/MediaBadge.tsx"],"sourcesContent":["import { useComponentContextIcons } from '../../context';\nimport React, { type ComponentType } from 'react';\nimport type { LocalAttachment, LocalVoiceRecordingAttachment } from 'stream-chat';\nimport clsx from 'clsx';\n\nexport type MediaBadgeVariant = 'video' | 'voice-recording' | string;\n\nexport type MediaBadgeProps = {\n  attachment: LocalAttachment;\n  variant: 'video' | 'voice-recording' | string;\n};\n\nexport const MediaBadge = ({ attachment, variant }: MediaBadgeProps) => {\n  const { IconMicrophoneSolid, IconVideoFill } = useComponentContextIcons();\n\n  const MediaBadgeVariantToIcon: Record<MediaBadgeVariant, ComponentType> = {\n    video: IconVideoFill,\n    voiceRecording: IconMicrophoneSolid,\n  };\n\n  const Icon = MediaBadgeVariantToIcon[variant];\n  const { duration } = (attachment as LocalVoiceRecordingAttachment).custom ?? {};\n  return (\n    <div\n      className={clsx('str-chat__media-badge', {\n        [`str-chat__media-badge--${variant}`]: variant,\n      })}\n    >\n      {Icon && <Icon />}\n      {duration ? <div>{duration}</div> : null}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAYA,IAAa,cAAc,EAAE,YAAY,cAA+B;CACtE,MAAM,EAAE,qBAAqB,kBAAkB,yBAAyB;CAOxE,MAAM,OAAO;EAJX,OAAO;EACP,gBAAgB;CAGL,EAAwB;CACrC,MAAM,EAAE,aAAc,WAA6C,UAAU,CAAC;CAC9E,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,yBAAyB,GACtC,0BAA0B,YAAY,QACzC,CAAC;YAHH,CAKG,QAAQ,oBAAC,MAAD,CAAO,CAAA,GACf,WAAW,oBAAC,OAAD,EAAA,UAAM,SAAc,CAAA,IAAI,IACjC;;AAET"}

package/dist/es/components/BaseImage/BaseImage.mjs

@@ -0,0 +1,35 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { DownloadButton } from "../Attachment/components/DownloadButton.mjs";
+import { ImagePlaceholder } from "./ImagePlaceholder.mjs";
+import { forwardRef, useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { sanitizeUrl } from "@braintree/sanitize-url";
+//#region src/components/BaseImage/BaseImage.tsx
+var BaseImage = forwardRef(function BaseImage({ src, ...props }, ref) {
+	const { alt: propsAlt, className: propsClassName, onError: propsOnError, showDownloadButtonOnError = false, ...imgProps } = props;
+	const [failedSrc, setFailedSrc] = useState(null);
+	const { ImagePlaceholder: ImagePlaceholderComponent = ImagePlaceholder } = useComponentContext();
+	const sanitizedUrl = useMemo(() => sanitizeUrl(src), [src]);
+	const error = failedSrc === sanitizedUrl;
+	useEffect(() => () => {
+		setFailedSrc(null);
+	}, [sanitizedUrl]);
+	if (error) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ImagePlaceholderComponent, { className: clsx(propsClassName, "str-chat__base-image--load-failed") }), showDownloadButtonOnError && /* @__PURE__ */ jsx(DownloadButton, { assetUrl: sanitizedUrl })] });
+	return /* @__PURE__ */ jsx("img", {
+		"data-testid": "str-chat__base-image",
+		...imgProps,
+		alt: propsAlt ?? "",
+		className: clsx(propsClassName, "str-chat__base-image"),
+		onError: (e) => {
+			setFailedSrc(sanitizedUrl);
+			propsOnError?.(e);
+		},
+		ref,
+		src: sanitizedUrl
+	});
+});
+//#endregion
+export { BaseImage };
+
+//# sourceMappingURL=BaseImage.mjs.map

package/dist/es/components/BaseImage/BaseImage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseImage.mjs","names":[],"sources":["../../../../src/components/BaseImage/BaseImage.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useState } from 'react';\nimport clsx from 'clsx';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { DownloadButton } from '../Attachment';\nimport { ImagePlaceholder as DefaultImagePlaceholder } from './ImagePlaceholder';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\n\nexport type BaseImageProps = React.ComponentPropsWithRef<'img'> & {\n  showDownloadButtonOnError?: boolean;\n};\n\nexport const BaseImage = forwardRef<HTMLImageElement, BaseImageProps>(function BaseImage(\n  { src, ...props },\n  ref,\n) {\n  const {\n    alt: propsAlt,\n    className: propsClassName,\n    onError: propsOnError,\n    showDownloadButtonOnError = false,\n    ...imgProps\n  } = props;\n  // Store the failed URL rather than a boolean so that when src changes (e.g. retry\n  // with a cache-busting param), the error state clears synchronously via the derived\n  // `error` check below. A boolean would require a useEffect to reset, causing a\n  // 1-frame flash of the error placeholder before the loading state kicks in.\n  const [failedSrc, setFailedSrc] = useState<string | null>(null);\n  const { ImagePlaceholder: ImagePlaceholderComponent = DefaultImagePlaceholder } =\n    useComponentContext();\n\n  const sanitizedUrl = useMemo(() => sanitizeUrl(src), [src]);\n  const error = failedSrc === sanitizedUrl;\n\n  useEffect(\n    () => () => {\n      setFailedSrc(null);\n    },\n    [sanitizedUrl],\n  );\n\n  if (error) {\n    return (\n      <>\n        <ImagePlaceholderComponent\n          className={clsx(propsClassName, 'str-chat__base-image--load-failed')}\n        />\n        {showDownloadButtonOnError && <DownloadButton assetUrl={sanitizedUrl} />}\n      </>\n    );\n  }\n\n  return (\n    <img\n      data-testid='str-chat__base-image'\n      {...imgProps}\n      alt={propsAlt ?? ''}\n      className={clsx(propsClassName, 'str-chat__base-image')}\n      onError={(e) => {\n        setFailedSrc(sanitizedUrl);\n        propsOnError?.(e);\n      }}\n      ref={ref}\n      src={sanitizedUrl}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AAWA,IAAa,YAAY,WAA6C,SAAS,UAC7E,EAAE,KAAK,GAAG,SACV,KACA;CACA,MAAM,EACJ,KAAK,UACL,WAAW,gBACX,SAAS,cACT,4BAA4B,OAC5B,GAAG,aACD;CAKJ,MAAM,CAAC,WAAW,gBAAgB,SAAwB,IAAI;CAC9D,MAAM,EAAE,kBAAkB,4BAA4B,qBACpD,oBAAoB;CAEtB,MAAM,eAAe,cAAc,YAAY,GAAG,GAAG,CAAC,GAAG,CAAC;CAC1D,MAAM,QAAQ,cAAc;CAE5B,sBACc;EACV,aAAa,IAAI;CACnB,GACA,CAAC,YAAY,CACf;CAEA,IAAI,OACF,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,2BAAD,EACE,WAAW,KAAK,gBAAgB,mCAAmC,EACpE,CAAA,GACA,6BAA6B,oBAAC,gBAAD,EAAgB,UAAU,aAAe,CAAA,CACvE,EAAA,CAAA;CAIN,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,GAAI;EACJ,KAAK,YAAY;EACjB,WAAW,KAAK,gBAAgB,sBAAsB;EACtD,UAAU,MAAM;GACd,aAAa,YAAY;GACzB,eAAe,CAAC;EAClB;EACK;EACL,KAAK;CACN,CAAA;AAEL,CAAC"}

package/dist/es/components/BaseImage/ImagePlaceholder.mjs

@@ -0,0 +1,21 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/BaseImage/ImagePlaceholder.tsx
+var ImagePlaceholder = ({ className }) => {
+	const { t } = useTranslationContext();
+	const { IconImage } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": t("baseImage.imagePlaceholder.imageFailedLoad.ariaLabel", "Image failed to load"),
+		className: clsx("str-chat__image-placeholder", className),
+		"data-testid": "str-chat__base-image-placeholder",
+		role: "img",
+		children: /* @__PURE__ */ jsx(IconImage, {})
+	});
+};
+//#endregion
+export { ImagePlaceholder };
+
+//# sourceMappingURL=ImagePlaceholder.mjs.map

package/dist/es/components/BaseImage/ImagePlaceholder.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePlaceholder.mjs","names":[],"sources":["../../../../src/components/BaseImage/ImagePlaceholder.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useComponentContextIcons } from '../../context';\n\nexport type ImagePlaceholderProps = {\n  className?: string;\n};\n\nexport const ImagePlaceholder = ({ className }: ImagePlaceholderProps) => {\n  const { t } = useTranslationContext();\n  const { IconImage } = useComponentContextIcons();\n\n  return (\n    <div\n      aria-label={t(\n        'baseImage.imagePlaceholder.imageFailedLoad.ariaLabel',\n        'Image failed to load',\n      )}\n      className={clsx('str-chat__image-placeholder', className)}\n      data-testid='str-chat__base-image-placeholder'\n      role='img'\n    >\n      <IconImage />\n    </div>\n  );\n};\n"],"mappings":";;;;;;AASA,IAAa,oBAAoB,EAAE,gBAAuC;CACxE,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,cAAc,yBAAyB;CAE/C,OACE,oBAAC,OAAD;EACE,cAAY,EACV,wDACA,sBACF;EACA,WAAW,KAAK,+BAA+B,SAAS;EACxD,eAAY;EACZ,MAAK;YAEL,oBAAC,WAAD,CAAY,CAAA;CACT,CAAA;AAET"}

package/dist/es/components/BaseImage/toBaseImageDescriptors.mjs

@@ -0,0 +1,57 @@
+import { isGiphyAttachment, isImageAttachment, isLocalImageAttachment, isLocalVideoAttachment, isScrapedContent, isVideoAttachment } from "stream-chat";
+//#region src/components/BaseImage/toBaseImageDescriptors.ts
+/**
+* Maps an attachment (or link preview) to image/video URLs and metadata for {@link BaseImage} or the gallery.
+*/
+var toBaseImageDescriptors = (attachment, options = {}) => {
+	if (isGiphyAttachment(attachment)) {
+		const giphyVersion = options?.giphyVersionName && attachment.giphy ? attachment.giphy[options.giphyVersionName] : void 0;
+		return {
+			alt: giphyVersion?.url || attachment.thumb_url,
+			dimensions: giphyVersion ? {
+				height: giphyVersion.height,
+				width: giphyVersion.width
+			} : void 0,
+			imageUrl: attachment.thumb_url,
+			title: attachment.title || attachment.thumb_url
+		};
+	}
+	if (isScrapedContent(attachment)) {
+		const imageUrl = attachment.image_url || attachment.thumb_url;
+		return {
+			alt: attachment.title || imageUrl,
+			imageUrl,
+			title: attachment.title
+		};
+	}
+	if (isLocalVideoAttachment(attachment)) return {
+		title: attachment.title,
+		videoThumbnailUrl: attachment.thumb_url ?? attachment.localMetadata.previewUri,
+		videoUrl: attachment.asset_url ?? attachment.localMetadata.previewUri
+	};
+	if (isVideoAttachment(attachment)) return {
+		title: attachment.title,
+		videoThumbnailUrl: attachment.thumb_url,
+		videoUrl: attachment.asset_url
+	};
+	if (isLocalImageAttachment(attachment)) {
+		const imageUrl = attachment.image_url || attachment.localMetadata.previewUri;
+		return {
+			alt: attachment.title || imageUrl,
+			imageUrl,
+			title: attachment.title
+		};
+	}
+	if (isImageAttachment(attachment)) {
+		const imageUrl = attachment.image_url;
+		return {
+			alt: attachment.title || imageUrl,
+			imageUrl,
+			title: attachment.title
+		};
+	}
+};
+//#endregion
+export { toBaseImageDescriptors };
+
+//# sourceMappingURL=toBaseImageDescriptors.mjs.map

package/dist/es/components/BaseImage/toBaseImageDescriptors.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toBaseImageDescriptors.mjs","names":[],"sources":["../../../../src/components/BaseImage/toBaseImageDescriptors.ts"],"sourcesContent":["import {\n  type Attachment,\n  isGiphyAttachment,\n  isImageAttachment,\n  isLocalImageAttachment,\n  isLocalVideoAttachment,\n  isScrapedContent,\n  isVideoAttachment,\n  type LinkPreview,\n  type LocalImageAttachment,\n  type LocalVideoAttachment,\n} from 'stream-chat';\nimport type { Dimensions } from '../../types/types';\n\ntype AttachmentPreviewableInGallery =\n  | LocalImageAttachment\n  | LocalVideoAttachment\n  | LinkPreview\n  | Attachment;\n\n/** Fields shared with gallery items for image/video preview from an attachment. */\nexport type BaseImageDescriptor = {\n  alt?: string;\n  dimensions?: Dimensions;\n  imageUrl?: string;\n  title?: string;\n  videoThumbnailUrl?: string;\n  videoUrl?: string;\n};\n\n/**\n * Maps an attachment (or link preview) to image/video URLs and metadata for {@link BaseImage} or the gallery.\n */\nexport const toBaseImageDescriptors = (\n  attachment: AttachmentPreviewableInGallery,\n  options: { giphyVersionName?: string } = {},\n): BaseImageDescriptor | undefined => {\n  if (isGiphyAttachment(attachment)) {\n    const giphyVersion =\n      options?.giphyVersionName && attachment.giphy\n        ? attachment.giphy[\n            options.giphyVersionName as keyof NonNullable<Attachment['giphy']>\n          ]\n        : undefined;\n\n    return {\n      alt: giphyVersion?.url || attachment.thumb_url,\n      dimensions: giphyVersion\n        ? {\n            height: giphyVersion.height,\n            width: giphyVersion.width,\n          }\n        : undefined,\n      imageUrl: attachment.thumb_url,\n      title: attachment.title || attachment.thumb_url,\n    };\n  }\n\n  if (isScrapedContent(attachment)) {\n    const imageUrl = attachment.image_url || attachment.thumb_url;\n    return {\n      alt: attachment.title || imageUrl,\n      imageUrl,\n      title: attachment.title,\n    };\n  }\n\n  if (isLocalVideoAttachment(attachment)) {\n    return {\n      title: attachment.title,\n      videoThumbnailUrl: attachment.thumb_url ?? attachment.localMetadata.previewUri,\n      videoUrl: attachment.asset_url ?? attachment.localMetadata.previewUri,\n    };\n  }\n\n  if (isVideoAttachment(attachment)) {\n    return {\n      title: attachment.title,\n      videoThumbnailUrl: attachment.thumb_url,\n      videoUrl: attachment.asset_url,\n    };\n  }\n\n  if (isLocalImageAttachment(attachment)) {\n    const imageUrl = attachment.image_url || attachment.localMetadata.previewUri;\n    return {\n      alt: attachment.title || imageUrl,\n      imageUrl,\n      title: attachment.title,\n    };\n  }\n\n  if (isImageAttachment(attachment)) {\n    const imageUrl = attachment.image_url;\n    return {\n      alt: attachment.title || imageUrl,\n      imageUrl,\n      title: attachment.title,\n    };\n  }\n\n  return undefined;\n};\n"],"mappings":";;;;;AAiCA,IAAa,0BACX,YACA,UAAyC,CAAC,MACN;CACpC,IAAI,kBAAkB,UAAU,GAAG;EACjC,MAAM,eACJ,SAAS,oBAAoB,WAAW,QACpC,WAAW,MACT,QAAQ,oBAEV,KAAA;EAEN,OAAO;GACL,KAAK,cAAc,OAAO,WAAW;GACrC,YAAY,eACR;IACE,QAAQ,aAAa;IACrB,OAAO,aAAa;GACtB,IACA,KAAA;GACJ,UAAU,WAAW;GACrB,OAAO,WAAW,SAAS,WAAW;EACxC;CACF;CAEA,IAAI,iBAAiB,UAAU,GAAG;EAChC,MAAM,WAAW,WAAW,aAAa,WAAW;EACpD,OAAO;GACL,KAAK,WAAW,SAAS;GACzB;GACA,OAAO,WAAW;EACpB;CACF;CAEA,IAAI,uBAAuB,UAAU,GACnC,OAAO;EACL,OAAO,WAAW;EAClB,mBAAmB,WAAW,aAAa,WAAW,cAAc;EACpE,UAAU,WAAW,aAAa,WAAW,cAAc;CAC7D;CAGF,IAAI,kBAAkB,UAAU,GAC9B,OAAO;EACL,OAAO,WAAW;EAClB,mBAAmB,WAAW;EAC9B,UAAU,WAAW;CACvB;CAGF,IAAI,uBAAuB,UAAU,GAAG;EACtC,MAAM,WAAW,WAAW,aAAa,WAAW,cAAc;EAClE,OAAO;GACL,KAAK,WAAW,SAAS;GACzB;GACA,OAAO,WAAW;EACpB;CACF;CAEA,IAAI,kBAAkB,UAAU,GAAG;EACjC,MAAM,WAAW,WAAW;EAC5B,OAAO;GACL,KAAK,WAAW,SAAS;GACzB;GACA,OAAO,WAAW;EACpB;CACF;AAGF"}

package/dist/es/components/Button/Button.mjs

@@ -0,0 +1,36 @@
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Button/Button.tsx
+var variantToClass = {
+	danger: "str-chat__button--destructive",
+	primary: "str-chat__button--primary",
+	secondary: "str-chat__button--secondary"
+};
+var appearanceToClass = {
+	ghost: "str-chat__button--ghost",
+	outline: "str-chat__button--outline",
+	solid: "str-chat__button--solid"
+};
+var sizeToClass = {
+	lg: "str-chat__button--size-lg",
+	md: "str-chat__button--size-md",
+	sm: "str-chat__button--size-sm",
+	xs: "str-chat__button--size-xs"
+};
+var Button = forwardRef(function Button({ appearance, children, circular, className, inverseTheme, size, variant, ...props }, ref) {
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		...props,
+		className: clsx("str-chat__button", variant != null && variantToClass[variant], appearance != null && appearanceToClass[appearance], circular && "str-chat__button--circular", inverseTheme && "str-chat__theme-inverse", size != null && sizeToClass[size], className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "str-chat__button__content",
+			children
+		})
+	});
+});
+//#endregion
+export { Button };
+
+//# sourceMappingURL=Button.mjs.map

package/dist/es/components/Button/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","names":[],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { type ComponentProps, forwardRef } from 'react';\nimport clsx from 'clsx';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'danger';\nexport type ButtonAppearance = 'solid' | 'outline' | 'ghost';\nexport type ButtonSize = 'lg' | 'md' | 'sm' | 'xs';\n\nexport type ButtonProps = ComponentProps<'button'> & {\n  /** Semantic variant: primary, secondary, or danger (maps to destructive in styles). */\n  variant?: ButtonVariant;\n  /** Visual style: solid, outline, or ghost. */\n  appearance?: ButtonAppearance;\n  /** When true, uses full border-radius for icon-only/pill shape. */\n  circular?: boolean;\n  /** When true, button uses inverse theme (e.g. on dark surface in light theme). */\n  inverseTheme?: boolean;\n  /** Size: lg, md, or sm. */\n  size?: ButtonSize;\n};\n\nconst variantToClass: Record<ButtonVariant, string> = {\n  danger: 'str-chat__button--destructive',\n  primary: 'str-chat__button--primary',\n  secondary: 'str-chat__button--secondary',\n};\n\nconst appearanceToClass: Record<ButtonAppearance, string> = {\n  ghost: 'str-chat__button--ghost',\n  outline: 'str-chat__button--outline',\n  solid: 'str-chat__button--solid',\n};\n\nconst sizeToClass: Record<ButtonSize, string> = {\n  lg: 'str-chat__button--size-lg',\n  md: 'str-chat__button--size-md',\n  sm: 'str-chat__button--size-sm',\n  xs: 'str-chat__button--size-xs',\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { appearance, children, circular, className, inverseTheme, size, variant, ...props },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      type='button'\n      {...props}\n      className={clsx(\n        'str-chat__button',\n        variant != null && variantToClass[variant],\n        appearance != null && appearanceToClass[appearance],\n        circular && 'str-chat__button--circular',\n        inverseTheme && 'str-chat__theme-inverse',\n        size != null && sizeToClass[size],\n        className,\n      )}\n    >\n      <div className='str-chat__button__content'>{children}</div>\n    </button>\n  );\n});\n"],"mappings":";;;;AAoBA,IAAM,iBAAgD;CACpD,QAAQ;CACR,SAAS;CACT,WAAW;AACb;AAEA,IAAM,oBAAsD;CAC1D,OAAO;CACP,SAAS;CACT,OAAO;AACT;AAEA,IAAM,cAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,SAAS,WAA2C,SAAS,OACxE,EAAE,YAAY,UAAU,UAAU,WAAW,cAAc,MAAM,SAAS,GAAG,SAC7E,KACA;CACA,OACE,oBAAC,UAAD;EACO;EACL,MAAK;EACL,GAAI;EACJ,WAAW,KACT,oBACA,WAAW,QAAQ,eAAe,UAClC,cAAc,QAAQ,kBAAkB,aACxC,YAAY,8BACZ,gBAAgB,2BAChB,QAAQ,QAAQ,YAAY,OAC5B,SACF;YAEA,oBAAC,OAAD;GAAK,WAAU;GAA6B;EAAc,CAAA;CACpD,CAAA;AAEZ,CAAC"}

package/dist/es/components/Button/PlayButton.mjs

@@ -0,0 +1,26 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "./Button.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Button/PlayButton.tsx
+var PlayButton = ({ className, isPlaying, ...props }) => {
+	const { t } = useTranslationContext();
+	const { IconPauseFill, IconPlayFill } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(Button, {
+		appearance: "outline",
+		"aria-label": isPlaying ? t("common.pause.ariaLabel", "Pause") : t("common.play.ariaLabel", "Play"),
+		circular: true,
+		className: clsx("str-chat__button-play", className),
+		"data-testid": isPlaying ? "pause-audio" : "play-audio",
+		size: "sm",
+		variant: "secondary",
+		...props,
+		children: isPlaying ? /* @__PURE__ */ jsx(IconPauseFill, {}) : /* @__PURE__ */ jsx(IconPlayFill, {})
+	});
+};
+//#endregion
+export { PlayButton };
+
+//# sourceMappingURL=PlayButton.mjs.map

package/dist/es/components/Button/PlayButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayButton.mjs","names":[],"sources":["../../../../src/components/Button/PlayButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from './Button';\nimport type { ComponentProps } from 'react';\nimport clsx from 'clsx';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\n\nexport type PlayButtonProps = ComponentProps<'button'> & {\n  isPlaying: boolean;\n};\n\nexport const PlayButton = ({ className, isPlaying, ...props }: PlayButtonProps) => {\n  const { t } = useTranslationContext();\n  const { IconPauseFill, IconPlayFill } = useComponentContextIcons();\n\n  return (\n    <Button\n      appearance='outline'\n      aria-label={\n        isPlaying\n          ? t('common.pause.ariaLabel', 'Pause')\n          : t('common.play.ariaLabel', 'Play')\n      }\n      circular\n      className={clsx('str-chat__button-play', className)}\n      data-testid={isPlaying ? 'pause-audio' : 'play-audio'}\n      size='sm'\n      variant='secondary'\n      {...props}\n    >\n      {isPlaying ? <IconPauseFill /> : <IconPlayFill />}\n    </Button>\n  );\n};\n"],"mappings":";;;;;;;AAUA,IAAa,cAAc,EAAE,WAAW,WAAW,GAAG,YAA6B;CACjF,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,eAAe,iBAAiB,yBAAyB;CAEjE,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cACE,YACI,EAAE,0BAA0B,OAAO,IACnC,EAAE,yBAAyB,MAAM;EAEvC,UAAA;EACA,WAAW,KAAK,yBAAyB,SAAS;EAClD,eAAa,YAAY,gBAAgB;EACzC,MAAK;EACL,SAAQ;EACR,GAAI;YAEH,YAAY,oBAAC,eAAD,CAAgB,CAAA,IAAI,oBAAC,cAAD,CAAe,CAAA;CAC1C,CAAA;AAEZ"}

package/dist/es/components/Button/WorkspaceNavigationButtons.mjs

@@ -0,0 +1,94 @@
+import { useChannelInstanceContext } from "../../context/ChannelInstanceContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import { useCloseThread } from "../Threads/hooks/useCloseThread.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "./Button.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useWorkspaceNavigation, useWorkspacePanel } from "../../context/WorkspaceNavigationContext.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Button/WorkspaceNavigationButtons.tsx
+/**
+* Steps back from the channel or thread whose header renders it: removes it from its panel,
+* revealing what it is stacked over. Renders nothing when there is nothing beneath.
+*/
+var WorkspaceNavigationBackButton = () => {
+	const { IconArrowLeft } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { canGoBack, goBack } = useWorkspaceNavigation();
+	const panel = useWorkspacePanel();
+	const thread = useThreadContext();
+	const { channel } = useChannelInstanceContext();
+	const key = thread ? thread.id : channel?.cid;
+	if (key === void 0 || !canGoBack(key, panel)) return null;
+	return /* @__PURE__ */ jsx(Button, {
+		appearance: "ghost",
+		"aria-label": t("common.back.label", "Back"),
+		circular: true,
+		className: thread ? "str-chat__thread-header__back-button" : "str-chat__channel-header__back-button",
+		"data-testid": thread ? "thread-header-back-button" : "channel-header-back-button",
+		onClick: (event) => goBack(key, {
+			event,
+			panel
+		}),
+		size: "md",
+		variant: "secondary",
+		children: /* @__PURE__ */ jsx(IconArrowLeft, {})
+	});
+};
+var CloseThreadButton = () => {
+	const { IconXmark } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { isThreadDismissable } = useWorkspaceNavigation();
+	const panel = useWorkspacePanel();
+	const thread = useThreadContext();
+	const closeThread = useCloseThread();
+	if (!isThreadDismissable(thread?.id, panel)) return null;
+	return /* @__PURE__ */ jsx(Button, {
+		appearance: "ghost",
+		"aria-label": t("thread.header.closeThread.ariaLabel", "Close thread"),
+		circular: true,
+		className: "str-chat__close-thread-button",
+		"data-testid": "close-thread-button",
+		onClick: (event) => closeThread({ event }),
+		size: "md",
+		variant: "secondary",
+		children: /* @__PURE__ */ jsx(IconXmark, {})
+	});
+};
+var CloseChannelButton = ({ cid }) => {
+	const { IconXmark } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { closeChannel, isChannelDismissable } = useWorkspaceNavigation();
+	const panel = useWorkspacePanel();
+	if (!isChannelDismissable(cid, panel)) return null;
+	return /* @__PURE__ */ jsx(Button, {
+		appearance: "ghost",
+		"aria-label": t("channelHeader.closeChannel.ariaLabel", "Close channel"),
+		circular: true,
+		className: "str-chat__close-channel-button",
+		"data-testid": "close-channel-button",
+		onClick: (event) => closeChannel(cid, {
+			event,
+			panel
+		}),
+		size: "md",
+		variant: "secondary",
+		children: /* @__PURE__ */ jsx(IconXmark, {})
+	});
+};
+/**
+* Closes the whole panel of the channel or thread whose header renders it, with everything stacked
+* in it. Renders nothing for a panel that cannot be dismissed, such as the primary channel.
+*/
+var WorkspaceNavigationCloseButton = () => {
+	const thread = useThreadContext();
+	const { channel } = useChannelInstanceContext();
+	if (thread) return /* @__PURE__ */ jsx(CloseThreadButton, {});
+	if (channel?.cid) return /* @__PURE__ */ jsx(CloseChannelButton, { cid: channel.cid });
+	return null;
+};
+//#endregion
+export { WorkspaceNavigationBackButton, WorkspaceNavigationCloseButton };
+
+//# sourceMappingURL=WorkspaceNavigationButtons.mjs.map

package/dist/es/components/Button/WorkspaceNavigationButtons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspaceNavigationButtons.mjs","names":[],"sources":["../../../../src/components/Button/WorkspaceNavigationButtons.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n  useChannelInstanceContext,\n  useComponentContextIcons,\n  useTranslationContext,\n  useWorkspaceNavigation,\n  useWorkspacePanel,\n} from '../../context';\nimport { Button } from './Button';\nimport { useThreadContext } from '../Threads/ThreadContext';\nimport { useCloseThread } from '../Threads/hooks/useCloseThread';\n\n// The header these buttons sit in belongs to the thread in context when there is one (a thread\n// panel), otherwise to the channel in context. The list headers share the slots too and have\n// neither, so there the buttons render nothing.\n\n/**\n * Steps back from the channel or thread whose header renders it: removes it from its panel,\n * revealing what it is stacked over. Renders nothing when there is nothing beneath.\n */\nexport const WorkspaceNavigationBackButton = () => {\n  const { IconArrowLeft } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { canGoBack, goBack } = useWorkspaceNavigation();\n  const panel = useWorkspacePanel();\n  const thread = useThreadContext();\n  const { channel } = useChannelInstanceContext();\n  const key = thread ? thread.id : channel?.cid;\n\n  if (key === undefined || !canGoBack(key, panel)) return null;\n\n  return (\n    <Button\n      appearance='ghost'\n      aria-label={t('common.back.label', 'Back')}\n      circular\n      className={\n        thread\n          ? 'str-chat__thread-header__back-button'\n          : 'str-chat__channel-header__back-button'\n      }\n      data-testid={thread ? 'thread-header-back-button' : 'channel-header-back-button'}\n      onClick={(event) => goBack(key, { event, panel })}\n      size='md'\n      variant='secondary'\n    >\n      <IconArrowLeft />\n    </Button>\n  );\n};\n\nconst CloseThreadButton = () => {\n  const { IconXmark } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { isThreadDismissable } = useWorkspaceNavigation();\n  const panel = useWorkspacePanel();\n  const thread = useThreadContext();\n  // Closes in the panel it renders in; `useCloseThread` passes that panel along.\n  const closeThread = useCloseThread();\n\n  // Hidden for the threads view's primary thread, which is the main panel — you switch views\n  // rather than close it.\n  if (!isThreadDismissable(thread?.id, panel)) return null;\n\n  return (\n    <Button\n      appearance='ghost'\n      aria-label={t('thread.header.closeThread.ariaLabel', 'Close thread')}\n      circular\n      className='str-chat__close-thread-button'\n      data-testid='close-thread-button'\n      onClick={(event) => closeThread({ event })}\n      size='md'\n      variant='secondary'\n    >\n      <IconXmark />\n    </Button>\n  );\n};\n\nconst CloseChannelButton = ({ cid }: { cid: string }) => {\n  const { IconXmark } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { closeChannel, isChannelDismissable } = useWorkspaceNavigation();\n  const panel = useWorkspacePanel();\n\n  // Shown for a channel opened beside another one; the primary channel panel stays open.\n  if (!isChannelDismissable(cid, panel)) return null;\n\n  return (\n    <Button\n      appearance='ghost'\n      aria-label={t('channelHeader.closeChannel.ariaLabel', 'Close channel')}\n      circular\n      className='str-chat__close-channel-button'\n      data-testid='close-channel-button'\n      onClick={(event) => closeChannel(cid, { event, panel })}\n      size='md'\n      variant='secondary'\n    >\n      <IconXmark />\n    </Button>\n  );\n};\n\n/**\n * Closes the whole panel of the channel or thread whose header renders it, with everything stacked\n * in it. Renders nothing for a panel that cannot be dismissed, such as the primary channel.\n */\nexport const WorkspaceNavigationCloseButton = () => {\n  const thread = useThreadContext();\n  const { channel } = useChannelInstanceContext();\n\n  if (thread) return <CloseThreadButton />;\n  if (channel?.cid) return <CloseChannelButton cid={channel.cid} />;\n  return null;\n};\n"],"mappings":";;;;;;;;;;;;;;AAqBA,IAAa,sCAAsC;CACjD,MAAM,EAAE,kBAAkB,yBAAyB;CACnD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,WAAW,WAAW,uBAAuB;CACrD,MAAM,QAAQ,kBAAkB;CAChC,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,YAAY,0BAA0B;CAC9C,MAAM,MAAM,SAAS,OAAO,KAAK,SAAS;CAE1C,IAAI,QAAQ,KAAA,KAAa,CAAC,UAAU,KAAK,KAAK,GAAG,OAAO;CAExD,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cAAY,EAAE,qBAAqB,MAAM;EACzC,UAAA;EACA,WACE,SACI,yCACA;EAEN,eAAa,SAAS,8BAA8B;EACpD,UAAU,UAAU,OAAO,KAAK;GAAE;GAAO;EAAM,CAAC;EAChD,MAAK;EACL,SAAQ;YAER,oBAAC,eAAD,CAAgB,CAAA;CACV,CAAA;AAEZ;AAEA,IAAM,0BAA0B;CAC9B,MAAM,EAAE,cAAc,yBAAyB;CAC/C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,wBAAwB,uBAAuB;CACvD,MAAM,QAAQ,kBAAkB;CAChC,MAAM,SAAS,iBAAiB;CAEhC,MAAM,cAAc,eAAe;CAInC,IAAI,CAAC,oBAAoB,QAAQ,IAAI,KAAK,GAAG,OAAO;CAEpD,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cAAY,EAAE,uCAAuC,cAAc;EACnE,UAAA;EACA,WAAU;EACV,eAAY;EACZ,UAAU,UAAU,YAAY,EAAE,MAAM,CAAC;EACzC,MAAK;EACL,SAAQ;YAER,oBAAC,WAAD,CAAY,CAAA;CACN,CAAA;AAEZ;AAEA,IAAM,sBAAsB,EAAE,UAA2B;CACvD,MAAM,EAAE,cAAc,yBAAyB;CAC/C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,cAAc,yBAAyB,uBAAuB;CACtE,MAAM,QAAQ,kBAAkB;CAGhC,IAAI,CAAC,qBAAqB,KAAK,KAAK,GAAG,OAAO;CAE9C,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cAAY,EAAE,wCAAwC,eAAe;EACrE,UAAA;EACA,WAAU;EACV,eAAY;EACZ,UAAU,UAAU,aAAa,KAAK;GAAE;GAAO;EAAM,CAAC;EACtD,MAAK;EACL,SAAQ;YAER,oBAAC,WAAD,CAAY,CAAA;CACN,CAAA;AAEZ;;;;;AAMA,IAAa,uCAAuC;CAClD,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,YAAY,0BAA0B;CAE9C,IAAI,QAAQ,OAAO,oBAAC,mBAAD,CAAoB,CAAA;CACvC,IAAI,SAAS,KAAK,OAAO,oBAAC,oBAAD,EAAoB,KAAK,QAAQ,IAAM,CAAA;CAChE,OAAO;AACT"}