@liveblocks/react-ui 3.18.0-rc1 → 3.18.0

package/dist/_private/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var Avatar = require('../components/internal/Avatar.cjs');
+var Avatar = require('../components/Avatar.cjs');
 var Button = require('../components/internal/Button.cjs');
 var Group = require('../components/internal/Group.cjs');
 var GroupDescription = require('../components/internal/GroupDescription.cjs');
@@ -81,7 +81,8 @@ var Warning = require('../icons/Warning.cjs');
 
 
 
-exports.Avatar = Avatar.Avatar;
+exports.GroupAvatar = Avatar.GroupAvatar;
+exports.UserAvatar = Avatar.UserAvatar;
 exports.Button = Button.Button;
 exports.SelectButton = Button.SelectButton;
 exports.Group = Group.Group;

package/dist/_private/index.cjs.map

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

package/dist/_private/index.d.cts

@@ -1,24 +1,30 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as _liveblocks_core from '@liveblocks/core';
-import { Relax, AiTextPart, AiReasoningPart, AiChatMessage } from '@liveblocks/core';
 import * as react from 'react';
 import { ComponentProps, ReactNode, ComponentPropsWithoutRef, ElementType, ComponentType, Ref, RefCallback, FormEvent } from 'react';
+import * as _liveblocks_core from '@liveblocks/core';
+import { Relax, AiTextPart, AiReasoningPart, AiChatMessage } from '@liveblocks/core';
 import { Tooltip as Tooltip$1 } from 'radix-ui';
 
-type AvatarProps = ComponentProps<"div"> & {
+interface UserAvatarProps extends ComponentProps<"div"> {
+    userId?: string;
     icon?: ReactNode;
-} & Relax<{
-    /**
-     * The user ID to display the avatar for.
-     */
-    userId: string;
-} | {
-    /**
-     * The group ID to display the avatar for.
-     */
-    groupId: string;
-}>;
-declare function Avatar({ userId, groupId, icon, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+    tooltip?: ReactNode;
+    variant?: "default" | "outline";
+}
+interface GroupAvatarProps extends ComponentProps<"div"> {
+    groupId?: string;
+    icon?: ReactNode;
+    tooltip?: ReactNode;
+    variant?: "default" | "outline";
+}
+/**
+ * @private
+ */
+declare function UserAvatar({ userId, icon, variant, ...props }: UserAvatarProps): react_jsx_runtime.JSX.Element;
+/**
+ * @private
+ */
+declare function GroupAvatar({ groupId, icon, variant, ...props }: GroupAvatarProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends ComponentProps<"button"> {
     variant?: "default" | "toolbar" | "outline" | "ghost" | "primary" | "secondary" | "destructive";
@@ -360,13 +366,13 @@ interface UserProps extends ComponentProps<"span"> {
     /**
      * The user ID to display the user name for.
      */
-    userId: string;
+    userId?: string;
     /**
      * Whether to replace the user name with "you" ($.USER_SELF) for the current user.
      */
     replaceSelf?: boolean;
 }
-declare function User({ userId, replaceSelf, className, children, ...props }: UserProps): react_jsx_runtime.JSX.Element;
+declare function User({ userId, ...props }: UserProps): react_jsx_runtime.JSX.Element;
 
 interface LiveblocksUiConfigContext {
     portalContainer?: HTMLElement;
@@ -738,4 +744,4 @@ declare namespace index {
   };
 }
 
-export { index$2 as AiComposer, AiComposerEditorProps, AiComposerFormProps, AiComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, GlobeIcon, Group, GroupDescription, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsInlineProps, MarkdownComponentsLinkProps, MarkdownComponentsListProps, MarkdownComponentsParagraphProps, MarkdownComponentsTableProps, MarkdownProps, MentionIcon, MinusCircleIcon, PlusIcon, Portal, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TooltipProvider, TranslateIcon, UnderlineIcon, UndoIcon, User, UserIcon, UsersIcon, WarningIcon, capitalize, cn, makeCursorSpring, useAiComposer, useInitial, useLiveblocksUiConfig, useRefs, useStableComponent };
+export { index$2 as AiComposer, AiComposerEditorProps, AiComposerFormProps, AiComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, GlobeIcon, Group, GroupAvatar, GroupDescription, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsInlineProps, MarkdownComponentsLinkProps, MarkdownComponentsListProps, MarkdownComponentsParagraphProps, MarkdownComponentsTableProps, MarkdownProps, MentionIcon, MinusCircleIcon, PlusIcon, Portal, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TooltipProvider, TranslateIcon, UnderlineIcon, UndoIcon, User, UserAvatar, UserIcon, UsersIcon, WarningIcon, capitalize, cn, makeCursorSpring, useAiComposer, useInitial, useLiveblocksUiConfig, useRefs, useStableComponent };

package/dist/_private/index.d.ts

@@ -1,24 +1,30 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as _liveblocks_core from '@liveblocks/core';
-import { Relax, AiTextPart, AiReasoningPart, AiChatMessage } from '@liveblocks/core';
 import * as react from 'react';
 import { ComponentProps, ReactNode, ComponentPropsWithoutRef, ElementType, ComponentType, Ref, RefCallback, FormEvent } from 'react';
+import * as _liveblocks_core from '@liveblocks/core';
+import { Relax, AiTextPart, AiReasoningPart, AiChatMessage } from '@liveblocks/core';
 import { Tooltip as Tooltip$1 } from 'radix-ui';
 
-type AvatarProps = ComponentProps<"div"> & {
+interface UserAvatarProps extends ComponentProps<"div"> {
+    userId?: string;
     icon?: ReactNode;
-} & Relax<{
-    /**
-     * The user ID to display the avatar for.
-     */
-    userId: string;
-} | {
-    /**
-     * The group ID to display the avatar for.
-     */
-    groupId: string;
-}>;
-declare function Avatar({ userId, groupId, icon, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+    tooltip?: ReactNode;
+    variant?: "default" | "outline";
+}
+interface GroupAvatarProps extends ComponentProps<"div"> {
+    groupId?: string;
+    icon?: ReactNode;
+    tooltip?: ReactNode;
+    variant?: "default" | "outline";
+}
+/**
+ * @private
+ */
+declare function UserAvatar({ userId, icon, variant, ...props }: UserAvatarProps): react_jsx_runtime.JSX.Element;
+/**
+ * @private
+ */
+declare function GroupAvatar({ groupId, icon, variant, ...props }: GroupAvatarProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends ComponentProps<"button"> {
     variant?: "default" | "toolbar" | "outline" | "ghost" | "primary" | "secondary" | "destructive";
@@ -360,13 +366,13 @@ interface UserProps extends ComponentProps<"span"> {
     /**
      * The user ID to display the user name for.
      */
-    userId: string;
+    userId?: string;
     /**
      * Whether to replace the user name with "you" ($.USER_SELF) for the current user.
      */
     replaceSelf?: boolean;
 }
-declare function User({ userId, replaceSelf, className, children, ...props }: UserProps): react_jsx_runtime.JSX.Element;
+declare function User({ userId, ...props }: UserProps): react_jsx_runtime.JSX.Element;
 
 interface LiveblocksUiConfigContext {
     portalContainer?: HTMLElement;
@@ -738,4 +744,4 @@ declare namespace index {
   };
 }
 
-export { index$2 as AiComposer, AiComposerEditorProps, AiComposerFormProps, AiComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, GlobeIcon, Group, GroupDescription, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsInlineProps, MarkdownComponentsLinkProps, MarkdownComponentsListProps, MarkdownComponentsParagraphProps, MarkdownComponentsTableProps, MarkdownProps, MentionIcon, MinusCircleIcon, PlusIcon, Portal, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TooltipProvider, TranslateIcon, UnderlineIcon, UndoIcon, User, UserIcon, UsersIcon, WarningIcon, capitalize, cn, makeCursorSpring, useAiComposer, useInitial, useLiveblocksUiConfig, useRefs, useStableComponent };
+export { index$2 as AiComposer, AiComposerEditorProps, AiComposerFormProps, AiComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, GlobeIcon, Group, GroupAvatar, GroupDescription, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsInlineProps, MarkdownComponentsLinkProps, MarkdownComponentsListProps, MarkdownComponentsParagraphProps, MarkdownComponentsTableProps, MarkdownProps, MentionIcon, MinusCircleIcon, PlusIcon, Portal, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TooltipProvider, TranslateIcon, UnderlineIcon, UndoIcon, User, UserAvatar, UserIcon, UsersIcon, WarningIcon, capitalize, cn, makeCursorSpring, useAiComposer, useInitial, useLiveblocksUiConfig, useRefs, useStableComponent };

package/dist/_private/index.js

@@ -1,4 +1,4 @@
-export { Avatar } from '../components/internal/Avatar.js';
+export { GroupAvatar, UserAvatar } from '../components/Avatar.js';
 export { Button, SelectButton } from '../components/internal/Button.js';
 export { Group } from '../components/internal/Group.js';
 export { GroupDescription } from '../components/internal/GroupDescription.js';

package/dist/components/Avatar.cjs

@@ -0,0 +1,142 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@liveblocks/react');
+var react = require('react');
+var constants = require('../constants.cjs');
+var overrides = require('../overrides.cjs');
+var cn = require('../utils/cn.cjs');
+var getInitials = require('../utils/get-initials.cjs');
+var px = require('../utils/px.cjs');
+var Tooltip = require('./internal/Tooltip.cjs');
+
+
+function Avatar({
+  src,
+  name,
+  className,
+  children,
+  tooltip,
+  outline,
+  style,
+  ...props
+}) {
+  const initials = react.useMemo(
+    () => name ? getInitials.getInitials(name) : void 0,
+    [name]
+  );
+  const resolvedOutline = typeof outline === "object" ? outline : typeof outline === "string" ? { color: outline } : outline === true ? {} : void 0;
+  const avatar = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn.cn("lb-avatar", className),
+      "data-variant": resolvedOutline ? "outline" : "default",
+      style: {
+        "--lb-avatar-outline-color": resolvedOutline?.color,
+        "--lb-avatar-outline-width": px.px(resolvedOutline?.width),
+        "--lb-avatar-outline-gap": px.px(resolvedOutline?.gap),
+        ...style
+      },
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-avatar-content", children: children ?? (src ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: "lb-avatar-image", src, alt: name }) : initials ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-avatar-fallback", "aria-label": name, title: name, children: initials }) : null) })
+    }
+  );
+  return tooltip ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    Tooltip.Tooltip,
+    {
+      content: tooltip,
+      sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
+      collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
+      side: "top",
+      align: "center",
+      children: avatar
+    }
+  ) }) : avatar;
+}
+function ResolvedUserAvatar({
+  userId,
+  icon,
+  variant = "default",
+  tooltip,
+  ...props
+}) {
+  const { user, isLoading } = react$1.useUser(userId);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Avatar,
+    {
+      src: user?.avatar,
+      name: isLoading ? void 0 : user?.name ?? userId,
+      outline: variant === "outline" ? typeof user?.color === "string" ? user.color : void 0 : void 0,
+      "data-loading": isLoading ? "" : void 0,
+      tooltip,
+      ...props,
+      children: icon && (isLoading || !user?.avatar) ? icon : null
+    }
+  );
+}
+function ResolvedGroupAvatar({
+  groupId,
+  icon,
+  variant = "default",
+  tooltip,
+  ...props
+}) {
+  const { info, isLoading } = react$1.useGroupInfo(groupId);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Avatar,
+    {
+      src: info?.avatar,
+      name: isLoading ? void 0 : info?.name ?? groupId,
+      outline: variant === "outline" ? typeof info?.color === "string" ? info.color : void 0 : void 0,
+      "data-loading": isLoading ? "" : void 0,
+      tooltip,
+      ...props,
+      children: icon && (isLoading || !info?.avatar) ? icon : null
+    }
+  );
+}
+function UserAvatar({
+  userId,
+  icon,
+  variant = "default",
+  ...props
+}) {
+  const $ = overrides.useOverrides();
+  if (!userId) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Avatar, { name: $.USER_UNKNOWN, outline: variant === "outline", ...props, children: icon });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ResolvedUserAvatar,
+    {
+      userId,
+      icon,
+      variant,
+      ...props
+    }
+  );
+}
+function GroupAvatar({
+  groupId,
+  icon,
+  variant = "default",
+  ...props
+}) {
+  if (!groupId) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Avatar, { outline: variant === "outline", ...props, children: icon });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ResolvedGroupAvatar,
+    {
+      groupId,
+      icon,
+      variant,
+      ...props
+    }
+  );
+}
+
+exports.Avatar = Avatar;
+exports.GroupAvatar = GroupAvatar;
+exports.UserAvatar = UserAvatar;
+//# sourceMappingURL=Avatar.cjs.map

package/dist/components/Avatar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.cjs","sources":["../../src/components/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useGroupInfo, useUser } from \"@liveblocks/react\";\nimport {\n  type ComponentProps,\n  type CSSProperties,\n  type ReactNode,\n  useMemo,\n} from \"react\";\n\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { getInitials } from \"../utils/get-initials\";\nimport { px } from \"../utils/px\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\n\nexport interface AvatarProps extends ComponentProps<\"div\"> {\n  /**\n   * The URL of the avatar's image.\n   */\n  src?: string;\n\n  /**\n   * The name of the avatar.\n   */\n  name?: string;\n\n  /**\n   * The content to display in the avatar's tooltip.\n   */\n  tooltip?: ReactNode;\n\n  /**\n   * Whether and how the avatar should have an outline.\n   */\n  outline?:\n    | string\n    | boolean\n    | { color?: string; width?: string | number; gap?: string | number };\n\n  /**\n   * Override the avatar's content.\n   */\n  children?: ReactNode;\n}\n\nexport interface UserAvatarProps extends ComponentProps<\"div\"> {\n  userId?: string;\n  icon?: ReactNode;\n  tooltip?: ReactNode;\n  variant?: \"default\" | \"outline\";\n}\n\nexport interface GroupAvatarProps extends ComponentProps<\"div\"> {\n  groupId?: string;\n  icon?: ReactNode;\n  tooltip?: ReactNode;\n  variant?: \"default\" | \"outline\";\n}\n\ntype MakeRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;\n\nexport function Avatar({\n  src,\n  name,\n  className,\n  children,\n  tooltip,\n  outline,\n  style,\n  ...props\n}: AvatarProps) {\n  const initials = useMemo(\n    () => (name ? getInitials(name) : undefined),\n    [name]\n  );\n  const resolvedOutline =\n    typeof outline === \"object\"\n      ? outline\n      : typeof outline === \"string\"\n        ? { color: outline }\n        : outline === true\n          ? {}\n          : undefined;\n\n  const avatar = (\n    <div\n      className={cn(\"lb-avatar\", className)}\n      data-variant={resolvedOutline ? \"outline\" : \"default\"}\n      style={\n        {\n          \"--lb-avatar-outline-color\": resolvedOutline?.color,\n          \"--lb-avatar-outline-width\": px(resolvedOutline?.width),\n          \"--lb-avatar-outline-gap\": px(resolvedOutline?.gap),\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      <div className=\"lb-avatar-content\">\n        {children ??\n          (src ? (\n            <img className=\"lb-avatar-image\" src={src} alt={name} />\n          ) : initials ? (\n            <span className=\"lb-avatar-fallback\" aria-label={name} title={name}>\n              {initials}\n            </span>\n          ) : null)}\n      </div>\n    </div>\n  );\n\n  return tooltip ? (\n    <TooltipProvider>\n      <Tooltip\n        content={tooltip}\n        sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n        collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n        side=\"top\"\n        align=\"center\"\n      >\n        {avatar}\n      </Tooltip>\n    </TooltipProvider>\n  ) : (\n    avatar\n  );\n}\n\nfunction ResolvedUserAvatar({\n  userId,\n  icon,\n  variant = \"default\",\n  tooltip,\n  ...props\n}: MakeRequired<UserAvatarProps, \"userId\">) {\n  const { user, isLoading } = useUser(userId);\n\n  return (\n    <Avatar\n      src={user?.avatar}\n      name={isLoading ? undefined : (user?.name ?? userId)}\n      outline={\n        variant === \"outline\"\n          ? typeof user?.color === \"string\"\n            ? user.color\n            : undefined\n          : undefined\n      }\n      data-loading={isLoading ? \"\" : undefined}\n      tooltip={tooltip}\n      {...props}\n    >\n      {icon && (isLoading || !user?.avatar) ? icon : null}\n    </Avatar>\n  );\n}\n\nfunction ResolvedGroupAvatar({\n  groupId,\n  icon,\n  variant = \"default\",\n  tooltip,\n  ...props\n}: MakeRequired<GroupAvatarProps, \"groupId\">) {\n  const { info, isLoading } = useGroupInfo(groupId);\n\n  return (\n    <Avatar\n      src={info?.avatar}\n      name={isLoading ? undefined : (info?.name ?? groupId)}\n      outline={\n        variant === \"outline\"\n          ? typeof info?.color === \"string\"\n            ? info.color\n            : undefined\n          : undefined\n      }\n      data-loading={isLoading ? \"\" : undefined}\n      tooltip={tooltip}\n      {...props}\n    >\n      {icon && (isLoading || !info?.avatar) ? icon : null}\n    </Avatar>\n  );\n}\n\n/**\n * @private\n */\nexport function UserAvatar({\n  userId,\n  icon,\n  variant = \"default\",\n  ...props\n}: UserAvatarProps) {\n  const $ = useOverrides();\n\n  if (!userId) {\n    return (\n      <Avatar name={$.USER_UNKNOWN} outline={variant === \"outline\"} {...props}>\n        {icon}\n      </Avatar>\n    );\n  }\n\n  return (\n    <ResolvedUserAvatar\n      userId={userId}\n      icon={icon}\n      variant={variant}\n      {...props}\n    />\n  );\n}\n\n/**\n * @private\n */\nexport function GroupAvatar({\n  groupId,\n  icon,\n  variant = \"default\",\n  ...props\n}: GroupAvatarProps) {\n  if (!groupId) {\n    return (\n      <Avatar outline={variant === \"outline\"} {...props}>\n        {icon}\n      </Avatar>\n    );\n  }\n\n  return (\n    <ResolvedGroupAvatar\n      groupId={groupId}\n      icon={icon}\n      variant={variant}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAkEO;AAAgB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AAAiB;AACmB;AAC7B;AAEP;AASA;AACE;AAAC;AAAA;AACqC;AACQ;AAE1C;AACgD;AACQ;AACJ;AAC/C;AACL;AAEE;AAWJ;AAAA;AAIJ;AAEI;AAAC;AAAA;AACU;AACG;AACM;AACb;AACC;AAEL;AAAA;AAMT;AAEA;AAA4B;AAC1B;AACA;AACU;AACV;AAEF;AACE;AAEA;AACE;AAAC;AAAA;AACY;AACkC;AAMvC;AAEyB;AAC/B;AACI;AAE2C;AAAA;AAGrD;AAEA;AAA6B;AAC3B;AACA;AACU;AACV;AAEF;AACE;AAEA;AACE;AAAC;AAAA;AACY;AACkC;AAMvC;AAEyB;AAC/B;AACI;AAE2C;AAAA;AAGrD;AAKO;AAAoB;AACzB;AACA;AACU;AAEZ;AACE;AAEA;AACE;AAGE;AAIJ;AACE;AAAC;AAAA;AACC;AACA;AACA;AACI;AAAA;AAGV;AAKO;AAAqB;AAC1B;AACA;AACU;AAEZ;AACE;AACE;AAGE;AAIJ;AACE;AAAC;AAAA;AACC;AACA;AACA;AACI;AAAA;AAGV;;;;"}

package/dist/components/Avatar.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useUser, useGroupInfo } from '@liveblocks/react';
+import { useMemo } from 'react';
+import { FLOATING_ELEMENT_SIDE_OFFSET, FLOATING_ELEMENT_COLLISION_PADDING } from '../constants.js';
+import { useOverrides } from '../overrides.js';
+import { cn } from '../utils/cn.js';
+import { getInitials } from '../utils/get-initials.js';
+import { px } from '../utils/px.js';
+import { TooltipProvider, Tooltip } from './internal/Tooltip.js';
+
+
+function Avatar({
+  src,
+  name,
+  className,
+  children,
+  tooltip,
+  outline,
+  style,
+  ...props
+}) {
+  const initials = useMemo(
+    () => name ? getInitials(name) : void 0,
+    [name]
+  );
+  const resolvedOutline = typeof outline === "object" ? outline : typeof outline === "string" ? { color: outline } : outline === true ? {} : void 0;
+  const avatar = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("lb-avatar", className),
+      "data-variant": resolvedOutline ? "outline" : "default",
+      style: {
+        "--lb-avatar-outline-color": resolvedOutline?.color,
+        "--lb-avatar-outline-width": px(resolvedOutline?.width),
+        "--lb-avatar-outline-gap": px(resolvedOutline?.gap),
+        ...style
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "lb-avatar-content", children: children ?? (src ? /* @__PURE__ */ jsx("img", { className: "lb-avatar-image", src, alt: name }) : initials ? /* @__PURE__ */ jsx("span", { className: "lb-avatar-fallback", "aria-label": name, title: name, children: initials }) : null) })
+    }
+  );
+  return tooltip ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      content: tooltip,
+      sideOffset: FLOATING_ELEMENT_SIDE_OFFSET,
+      collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
+      side: "top",
+      align: "center",
+      children: avatar
+    }
+  ) }) : avatar;
+}
+function ResolvedUserAvatar({
+  userId,
+  icon,
+  variant = "default",
+  tooltip,
+  ...props
+}) {
+  const { user, isLoading } = useUser(userId);
+  return /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      src: user?.avatar,
+      name: isLoading ? void 0 : user?.name ?? userId,
+      outline: variant === "outline" ? typeof user?.color === "string" ? user.color : void 0 : void 0,
+      "data-loading": isLoading ? "" : void 0,
+      tooltip,
+      ...props,
+      children: icon && (isLoading || !user?.avatar) ? icon : null
+    }
+  );
+}
+function ResolvedGroupAvatar({
+  groupId,
+  icon,
+  variant = "default",
+  tooltip,
+  ...props
+}) {
+  const { info, isLoading } = useGroupInfo(groupId);
+  return /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      src: info?.avatar,
+      name: isLoading ? void 0 : info?.name ?? groupId,
+      outline: variant === "outline" ? typeof info?.color === "string" ? info.color : void 0 : void 0,
+      "data-loading": isLoading ? "" : void 0,
+      tooltip,
+      ...props,
+      children: icon && (isLoading || !info?.avatar) ? icon : null
+    }
+  );
+}
+function UserAvatar({
+  userId,
+  icon,
+  variant = "default",
+  ...props
+}) {
+  const $ = useOverrides();
+  if (!userId) {
+    return /* @__PURE__ */ jsx(Avatar, { name: $.USER_UNKNOWN, outline: variant === "outline", ...props, children: icon });
+  }
+  return /* @__PURE__ */ jsx(
+    ResolvedUserAvatar,
+    {
+      userId,
+      icon,
+      variant,
+      ...props
+    }
+  );
+}
+function GroupAvatar({
+  groupId,
+  icon,
+  variant = "default",
+  ...props
+}) {
+  if (!groupId) {
+    return /* @__PURE__ */ jsx(Avatar, { outline: variant === "outline", ...props, children: icon });
+  }
+  return /* @__PURE__ */ jsx(
+    ResolvedGroupAvatar,
+    {
+      groupId,
+      icon,
+      variant,
+      ...props
+    }
+  );
+}
+
+export { Avatar, GroupAvatar, UserAvatar };
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../src/components/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useGroupInfo, useUser } from \"@liveblocks/react\";\nimport {\n  type ComponentProps,\n  type CSSProperties,\n  type ReactNode,\n  useMemo,\n} from \"react\";\n\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { getInitials } from \"../utils/get-initials\";\nimport { px } from \"../utils/px\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\n\nexport interface AvatarProps extends ComponentProps<\"div\"> {\n  /**\n   * The URL of the avatar's image.\n   */\n  src?: string;\n\n  /**\n   * The name of the avatar.\n   */\n  name?: string;\n\n  /**\n   * The content to display in the avatar's tooltip.\n   */\n  tooltip?: ReactNode;\n\n  /**\n   * Whether and how the avatar should have an outline.\n   */\n  outline?:\n    | string\n    | boolean\n    | { color?: string; width?: string | number; gap?: string | number };\n\n  /**\n   * Override the avatar's content.\n   */\n  children?: ReactNode;\n}\n\nexport interface UserAvatarProps extends ComponentProps<\"div\"> {\n  userId?: string;\n  icon?: ReactNode;\n  tooltip?: ReactNode;\n  variant?: \"default\" | \"outline\";\n}\n\nexport interface GroupAvatarProps extends ComponentProps<\"div\"> {\n  groupId?: string;\n  icon?: ReactNode;\n  tooltip?: ReactNode;\n  variant?: \"default\" | \"outline\";\n}\n\ntype MakeRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;\n\nexport function Avatar({\n  src,\n  name,\n  className,\n  children,\n  tooltip,\n  outline,\n  style,\n  ...props\n}: AvatarProps) {\n  const initials = useMemo(\n    () => (name ? getInitials(name) : undefined),\n    [name]\n  );\n  const resolvedOutline =\n    typeof outline === \"object\"\n      ? outline\n      : typeof outline === \"string\"\n        ? { color: outline }\n        : outline === true\n          ? {}\n          : undefined;\n\n  const avatar = (\n    <div\n      className={cn(\"lb-avatar\", className)}\n      data-variant={resolvedOutline ? \"outline\" : \"default\"}\n      style={\n        {\n          \"--lb-avatar-outline-color\": resolvedOutline?.color,\n          \"--lb-avatar-outline-width\": px(resolvedOutline?.width),\n          \"--lb-avatar-outline-gap\": px(resolvedOutline?.gap),\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      <div className=\"lb-avatar-content\">\n        {children ??\n          (src ? (\n            <img className=\"lb-avatar-image\" src={src} alt={name} />\n          ) : initials ? (\n            <span className=\"lb-avatar-fallback\" aria-label={name} title={name}>\n              {initials}\n            </span>\n          ) : null)}\n      </div>\n    </div>\n  );\n\n  return tooltip ? (\n    <TooltipProvider>\n      <Tooltip\n        content={tooltip}\n        sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n        collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n        side=\"top\"\n        align=\"center\"\n      >\n        {avatar}\n      </Tooltip>\n    </TooltipProvider>\n  ) : (\n    avatar\n  );\n}\n\nfunction ResolvedUserAvatar({\n  userId,\n  icon,\n  variant = \"default\",\n  tooltip,\n  ...props\n}: MakeRequired<UserAvatarProps, \"userId\">) {\n  const { user, isLoading } = useUser(userId);\n\n  return (\n    <Avatar\n      src={user?.avatar}\n      name={isLoading ? undefined : (user?.name ?? userId)}\n      outline={\n        variant === \"outline\"\n          ? typeof user?.color === \"string\"\n            ? user.color\n            : undefined\n          : undefined\n      }\n      data-loading={isLoading ? \"\" : undefined}\n      tooltip={tooltip}\n      {...props}\n    >\n      {icon && (isLoading || !user?.avatar) ? icon : null}\n    </Avatar>\n  );\n}\n\nfunction ResolvedGroupAvatar({\n  groupId,\n  icon,\n  variant = \"default\",\n  tooltip,\n  ...props\n}: MakeRequired<GroupAvatarProps, \"groupId\">) {\n  const { info, isLoading } = useGroupInfo(groupId);\n\n  return (\n    <Avatar\n      src={info?.avatar}\n      name={isLoading ? undefined : (info?.name ?? groupId)}\n      outline={\n        variant === \"outline\"\n          ? typeof info?.color === \"string\"\n            ? info.color\n            : undefined\n          : undefined\n      }\n      data-loading={isLoading ? \"\" : undefined}\n      tooltip={tooltip}\n      {...props}\n    >\n      {icon && (isLoading || !info?.avatar) ? icon : null}\n    </Avatar>\n  );\n}\n\n/**\n * @private\n */\nexport function UserAvatar({\n  userId,\n  icon,\n  variant = \"default\",\n  ...props\n}: UserAvatarProps) {\n  const $ = useOverrides();\n\n  if (!userId) {\n    return (\n      <Avatar name={$.USER_UNKNOWN} outline={variant === \"outline\"} {...props}>\n        {icon}\n      </Avatar>\n    );\n  }\n\n  return (\n    <ResolvedUserAvatar\n      userId={userId}\n      icon={icon}\n      variant={variant}\n      {...props}\n    />\n  );\n}\n\n/**\n * @private\n */\nexport function GroupAvatar({\n  groupId,\n  icon,\n  variant = \"default\",\n  ...props\n}: GroupAvatarProps) {\n  if (!groupId) {\n    return (\n      <Avatar outline={variant === \"outline\"} {...props}>\n        {icon}\n      </Avatar>\n    );\n  }\n\n  return (\n    <ResolvedGroupAvatar\n      groupId={groupId}\n      icon={icon}\n      variant={variant}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAkEO;AAAgB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AAAiB;AACmB;AAC7B;AAEP;AASA;AACE;AAAC;AAAA;AACqC;AACQ;AAE1C;AACgD;AACQ;AACJ;AAC/C;AACL;AAEE;AAWJ;AAAA;AAIJ;AAEI;AAAC;AAAA;AACU;AACG;AACM;AACb;AACC;AAEL;AAAA;AAMT;AAEA;AAA4B;AAC1B;AACA;AACU;AACV;AAEF;AACE;AAEA;AACE;AAAC;AAAA;AACY;AACkC;AAMvC;AAEyB;AAC/B;AACI;AAE2C;AAAA;AAGrD;AAEA;AAA6B;AAC3B;AACA;AACU;AACV;AAEF;AACE;AAEA;AACE;AAAC;AAAA;AACY;AACkC;AAMvC;AAEyB;AAC/B;AACI;AAE2C;AAAA;AAGrD;AAKO;AAAoB;AACzB;AACA;AACU;AAEZ;AACE;AAEA;AACE;AAGE;AAIJ;AACE;AAAC;AAAA;AACC;AACA;AACA;AACI;AAAA;AAGV;AAKO;AAAqB;AAC1B;AACA;AACU;AAEZ;AACE;AACE;AAGE;AAIJ;AACE;AAAC;AAAA;AACC;AACA;AACA;AACI;AAAA;AAGV;;"}

package/dist/components/AvatarStack.cjs

@@ -8,7 +8,7 @@ var constants = require('../constants.cjs');
 var overrides = require('../overrides.cjs');
 var cn = require('../utils/cn.cjs');
 var px = require('../utils/px.cjs');
-var Avatar = require('./internal/Avatar.cjs');
+var Avatar = require('./Avatar.cjs');
 var Tooltip = require('./internal/Tooltip.cjs');
 var User = require('./internal/User.cjs');
 
@@ -19,32 +19,59 @@ const AvatarStack = react.forwardRef(
     max = 3,
     size,
     gap,
+    variant = "default",
     overrides: overrides$1,
     className,
     style,
     ...props
   }, forwardedRef) => {
     const $ = overrides.useOverrides(overrides$1);
-    const otherIds = react$1.useOthers(
-      (others) => [...others].sort((a, b) => b.connectionId - a.connectionId).map((user) => user.id)
+    const otherUsers = react$1.useOthers(
+      (others) => [...others].sort((a, b) => b.connectionId - a.connectionId).map((user) => ({
+        connectionId: user.connectionId,
+        userId: user.id
+      }))
     );
-    const selfId = react$1.useSelf((self) => self.id);
-    const userIds = react.useMemo(() => {
-      const uniqueUserIds = new Set(
-        [selfId, ...otherIds, ...additionalUserIds].filter(
-          (userId) => userId !== null && userId !== void 0
-        )
-      );
-      return [...uniqueUserIds];
-    }, [selfId, otherIds, additionalUserIds]);
+    const selfUser = react$1.useSelf((self) => ({
+      connectionId: self.connectionId,
+      userId: self.id
+    }));
+    const users = react.useMemo(() => {
+      const uniqueUsers = /* @__PURE__ */ new Map();
+      const addUser = ({
+        connectionId,
+        userId
+      }) => {
+        if (userId !== null && userId !== void 0) {
+          const key = `user:${userId}`;
+          uniqueUsers.set(key, { key, userId });
+        } else {
+          const key = `connection:${connectionId}`;
+          uniqueUsers.set(key, { key, userId: null });
+        }
+      };
+      if (selfUser) {
+        addUser(selfUser);
+      }
+      for (const otherUser of otherUsers) {
+        addUser(otherUser);
+      }
+      for (const additionalUserId of additionalUserIds) {
+        if (additionalUserId !== null && additionalUserId !== void 0) {
+          const key = `user:${additionalUserId}`;
+          uniqueUsers.set(key, { key, userId: additionalUserId });
+        }
+      }
+      return [...uniqueUsers.values()];
+    }, [selfUser, otherUsers, additionalUserIds]);
     const maxItems = max === null ? Infinity : Math.max(2, Math.floor(max));
-    const shouldShowMore = userIds.length > maxItems;
+    const shouldShowMore = users.length > maxItems;
     const visibleAvatarsCount = shouldShowMore ? maxItems - 1 : maxItems;
-    const visibleUserIds = userIds.slice(0, visibleAvatarsCount);
-    const hiddenUserIds = userIds.slice(visibleUserIds.length);
-    const remainingUsersCount = hiddenUserIds.length;
-    const visibleItemsCount = visibleUserIds.length + Number(remainingUsersCount > 0);
-    if (userIds.length === 0) {
+    const visibleUsers = users.slice(0, visibleAvatarsCount);
+    const hiddenUsers = users.slice(visibleUsers.length);
+    const remainingUsersCount = hiddenUsers.length;
+    const visibleItemsCount = visibleUsers.length + Number(remainingUsersCount > 0);
+    if (users.length === 0) {
       return null;
     }
     return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -61,39 +88,26 @@ const AvatarStack = react.forwardRef(
         ...props,
         ref: forwardedRef,
         children: [
-          visibleUserIds.map((userId, index) => {
-            if (!userId) {
-              return null;
-            }
+          visibleUsers.map((user, index) => {
             return /* @__PURE__ */ jsxRuntime.jsx(
-              Tooltip.Tooltip,
+              Avatar.UserAvatar,
               {
-                content: /* @__PURE__ */ jsxRuntime.jsx(User.User, { userId }),
-                sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
-                collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
-                side: "top",
-                align: "center",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Avatar.Avatar,
-                  {
-                    userId,
-                    className: "lb-avatar-stack-avatar",
-                    style: { "--lb-avatar-stack-index": index }
-                  }
-                )
+                userId: user.userId ?? void 0,
+                variant,
+                className: "lb-avatar-stack-avatar",
+                style: { "--lb-avatar-stack-index": index },
+                tooltip: /* @__PURE__ */ jsxRuntime.jsx(User.User, { userId: user.userId ?? void 0 })
               },
-              userId
+              user.key
             );
           }),
           remainingUsersCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
             Tooltip.Tooltip,
             {
-              content: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "lb-users-tooltip-list", children: hiddenUserIds.map(
-                (userId) => userId ? /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "lb-users-tooltip-list-item", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { userId }),
-                  /* @__PURE__ */ jsxRuntime.jsx(User.User, { userId })
-                ] }, userId) : null
-              ) }),
+              content: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "lb-users-tooltip-list", children: hiddenUsers.map((user) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "lb-users-tooltip-list-item", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Avatar.UserAvatar, { userId: user.userId ?? void 0 }),
+                /* @__PURE__ */ jsxRuntime.jsx(User.User, { userId: user.userId ?? void 0 })
+              ] }, user.key)) }),
               sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
               collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
               side: "top",
@@ -104,7 +118,7 @@ const AvatarStack = react.forwardRef(
                 {
                   className: "lb-avatar lb-avatar-stack-avatar lb-avatar-stack-more",
                   style: {
-                    "--lb-avatar-stack-index": visibleUserIds.length
+                    "--lb-avatar-stack-index": visibleUsers.length
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "lb-avatar-fallback", children: [
                     "+",