@liveblocks/react-ui 3.15.0-thread2 → 3.15.0

package/README.md

@@ -1,24 +1,14 @@
-<p align="center">
-  <a href="https://liveblocks.io#gh-light-mode-only">
-    <img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-light.svg" alt="Liveblocks" />
-  </a>
-  <a href="https://liveblocks.io#gh-dark-mode-only">
-    <img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-dark.svg" alt="Liveblocks" />
-  </a>
+<p>
+  <a href="https://liveblocks.io#gh-light-mode-only"><img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-light.svg" alt="Liveblocks" /></a>
+  <a href="https://liveblocks.io#gh-dark-mode-only"><img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-dark.svg" alt="Liveblocks" /></a>
 </p>
 
 # `@liveblocks/react-ui`
 
 <p>
-  <a href="https://npmjs.org/package/@liveblocks/react-ui">
-    <img src="https://img.shields.io/npm/v/@liveblocks/react-ui?style=flat&label=npm&color=c33" alt="NPM" />
-  </a>
-  <a href="https://bundlephobia.com/package/@liveblocks/react-ui">
-    <img src="https://img.shields.io/bundlephobia/minzip/@liveblocks/react-ui?style=flat&label=size&color=09f" alt="Size" />
-  </a>
-  <a href="https://github.com/liveblocks/liveblocks/blob/main/LICENSE">
-    <img src="https://img.shields.io/github/license/liveblocks/liveblocks?style=flat&label=license&color=f80" alt="License" />
-  </a>
+  <a href="https://npmjs.org/package/@liveblocks/react-ui"><img src="https://img.shields.io/npm/v/@liveblocks/react-ui?style=flat&label=npm&color=c33" alt="NPM" /></a>
+  <a href="https://bundlephobia.com/package/@liveblocks/react-ui"><img src="https://img.shields.io/bundlephobia/minzip/@liveblocks/react-ui?style=flat&label=size&color=09f" alt="Size" /></a>
+  <a href="https://github.com/liveblocks/liveblocks/blob/main/licenses/LICENSE-APACHE-2.0"><img src="https://img.shields.io/badge/license-Apache--2.0-green" alt="License" /></a>
 </p>
 
 `@liveblocks/react-ui` provides [React](https://reactjs.org/) pre-built

package/dist/_private/index.cjs

@@ -21,7 +21,6 @@ var contexts = require('../primitives/AiComposer/contexts.cjs');
 var index$1 = require('../primitives/AiMessage/index.cjs');
 var index$2 = require('../primitives/Collapsible/index.cjs');
 var Markdown = require('../primitives/Markdown.cjs');
-var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var ArrowCornerDownRight = require('../icons/ArrowCornerDownRight.cjs');
 var ArrowCornerUpRight = require('../icons/ArrowCornerUpRight.cjs');
 var ArrowDown = require('../icons/ArrowDown.cjs');
@@ -89,6 +88,7 @@ exports.List = List.List;
 exports.Prose = Prose.Prose;
 exports.ShortcutTooltip = Tooltip.ShortcutTooltip;
 exports.Tooltip = Tooltip.Tooltip;
+exports.TooltipProvider = Tooltip.TooltipProvider;
 exports.User = User.User;
 exports.useLiveblocksUiConfig = config.useLiveblocksUiConfig;
 exports.capitalize = capitalize.capitalize;
@@ -102,10 +102,6 @@ exports.useAiComposer = contexts.useAiComposer;
 exports.AiMessage = index$1;
 exports.Collapsible = index$2;
 exports.Markdown = Markdown.Markdown;
-Object.defineProperty(exports, 'TooltipProvider', {
-  enumerable: true,
-  get: function () { return TooltipPrimitive.TooltipProvider; }
-});
 exports.ArrowCornerDownRightIcon = ArrowCornerDownRight.ArrowCornerDownRightIcon;
 exports.ArrowCornerUpRightIcon = ArrowCornerUpRight.ArrowCornerUpRightIcon;
 exports.ArrowDownIcon = ArrowDown.ArrowDownIcon;

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

@@ -2,8 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 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 TooltipPrimitive from '@radix-ui/react-tooltip';
-export { TooltipProvider } from '@radix-ui/react-tooltip';
+import { Tooltip as Tooltip$1 } from 'radix-ui';
 
 type AvatarProps = ComponentProps<"div"> & {
     icon?: ReactNode;
@@ -345,7 +344,7 @@ interface ProseProps extends ComponentProps<"div"> {
  */
 declare function Prose({ content, partial, components, className, ...props }: ProseProps): react_jsx_runtime.JSX.Element;
 
-interface TooltipProps extends Pick<TooltipPrimitive.TooltipTriggerProps, "children">, Omit<TooltipPrimitive.TooltipContentProps, "content"> {
+interface TooltipProps extends Pick<Tooltip$1.TooltipTriggerProps, "children">, Omit<Tooltip$1.TooltipContentProps, "content"> {
     content: ReactNode;
     multiline?: boolean;
 }
@@ -354,6 +353,7 @@ interface ShortcutTooltipProps extends TooltipProps {
 }
 declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLButtonElement>>;
 declare const ShortcutTooltip: react.ForwardRefExoticComponent<ShortcutTooltipProps & react.RefAttributes<HTMLButtonElement>>;
+declare const TooltipProvider: react.FC<Tooltip$1.TooltipProviderProps>;
 
 interface UserProps extends ComponentProps<"span"> {
     /**
@@ -724,4 +724,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, Portal, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, UserIcon, UsersIcon, WarningIcon, capitalize, cn, 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, 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, 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, useAiComposer, useInitial, useLiveblocksUiConfig, useRefs, useStableComponent };

package/dist/_private/index.d.ts

@@ -2,8 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 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 TooltipPrimitive from '@radix-ui/react-tooltip';
-export { TooltipProvider } from '@radix-ui/react-tooltip';
+import { Tooltip as Tooltip$1 } from 'radix-ui';
 
 type AvatarProps = ComponentProps<"div"> & {
     icon?: ReactNode;
@@ -345,7 +344,7 @@ interface ProseProps extends ComponentProps<"div"> {
  */
 declare function Prose({ content, partial, components, className, ...props }: ProseProps): react_jsx_runtime.JSX.Element;
 
-interface TooltipProps extends Pick<TooltipPrimitive.TooltipTriggerProps, "children">, Omit<TooltipPrimitive.TooltipContentProps, "content"> {
+interface TooltipProps extends Pick<Tooltip$1.TooltipTriggerProps, "children">, Omit<Tooltip$1.TooltipContentProps, "content"> {
     content: ReactNode;
     multiline?: boolean;
 }
@@ -354,6 +353,7 @@ interface ShortcutTooltipProps extends TooltipProps {
 }
 declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLButtonElement>>;
 declare const ShortcutTooltip: react.ForwardRefExoticComponent<ShortcutTooltipProps & react.RefAttributes<HTMLButtonElement>>;
+declare const TooltipProvider: react.FC<Tooltip$1.TooltipProviderProps>;
 
 interface UserProps extends ComponentProps<"span"> {
     /**
@@ -724,4 +724,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, Portal, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, UserIcon, UsersIcon, WarningIcon, capitalize, cn, 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, 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, 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, useAiComposer, useInitial, useLiveblocksUiConfig, useRefs, useStableComponent };

package/dist/_private/index.js

@@ -4,7 +4,7 @@ export { Group } from '../components/internal/Group.js';
 export { GroupDescription } from '../components/internal/GroupDescription.js';
 export { List } from '../components/internal/List.js';
 export { Prose } from '../components/internal/Prose.js';
-export { ShortcutTooltip, Tooltip } from '../components/internal/Tooltip.js';
+export { ShortcutTooltip, Tooltip, TooltipProvider } from '../components/internal/Tooltip.js';
 export { User } from '../components/internal/User.js';
 export { useLiveblocksUiConfig } from '../config.js';
 import '../icons/index.js';
@@ -22,7 +22,6 @@ export { index$1 as AiMessage };
 import * as index$2 from '../primitives/Collapsible/index.js';
 export { index$2 as Collapsible };
 export { Markdown } from '../primitives/Markdown.js';
-export { TooltipProvider } from '@radix-ui/react-tooltip';
 export { ArrowCornerDownRightIcon } from '../icons/ArrowCornerDownRight.js';
 export { ArrowCornerUpRightIcon } from '../icons/ArrowCornerUpRight.js';
 export { ArrowDownIcon } from '../icons/ArrowDown.js';

package/dist/_private/index.js.map

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

package/dist/components/AvatarStack.cjs

@@ -0,0 +1,117 @@
+"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 Avatar = require('./internal/Avatar.cjs');
+var Tooltip = require('./internal/Tooltip.cjs');
+var User = require('./internal/User.cjs');
+
+
+const AvatarStack = react.forwardRef(
+  ({
+    userIds: additionalUserIds = [],
+    max = 3,
+    size,
+    overrides: overrides$1,
+    className,
+    style,
+    ...props
+  }, forwardedRef) => {
+    const $ = overrides.useOverrides(overrides$1);
+    const otherIds = react$1.useOthers((others) => others.map((user) => user.id));
+    const selfId = react$1.useSelf((self) => self.id);
+    const userIds = react.useMemo(() => {
+      const uniqueUserIds = /* @__PURE__ */ new Set([
+        selfId,
+        ...otherIds,
+        ...additionalUserIds
+      ]);
+      return [...uniqueUserIds];
+    }, [selfId, otherIds, additionalUserIds]);
+    const maxAvatars = Math.max(1, Math.floor(max));
+    const visibleUserIds = userIds.slice(0, maxAvatars);
+    const hiddenUserIds = userIds.slice(visibleUserIds.length);
+    const remainingUsersCount = hiddenUserIds.length;
+    const visibleItemsCount = visibleUserIds.length + Number(remainingUsersCount > 0);
+    if (userIds.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn.cn("lb-root lb-avatar-stack", className),
+        dir: $.dir,
+        style: {
+          "--lb-avatar-stack-count": visibleItemsCount - 1,
+          "--lb-avatar-stack-size": size,
+          ...style
+        },
+        ...props,
+        ref: forwardedRef,
+        children: [
+          visibleUserIds.map((userId, index) => {
+            if (!userId) {
+              return null;
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Tooltip.Tooltip,
+              {
+                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
+            );
+          }),
+          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
+              ) }),
+              sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
+              collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
+              side: "top",
+              align: "center",
+              className: "lb-users-tooltip",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "lb-avatar lb-avatar-stack-avatar lb-avatar-stack-more",
+                  style: {
+                    "--lb-avatar-stack-index": visibleUserIds.length
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "lb-avatar-fallback", children: [
+                    "+",
+                    remainingUsersCount
+                  ] })
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    ) });
+  }
+);
+
+exports.AvatarStack = AvatarStack;
+//# sourceMappingURL=AvatarStack.cjs.map

package/dist/components/AvatarStack.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarStack.cjs","sources":["../../src/components/AvatarStack.tsx"],"sourcesContent":["\"use client\";\n\nimport { useOthers, useSelf } from \"@liveblocks/react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport type { GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\nexport interface AvatarStackProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Optional additional user IDs to include in the stack.\n   */\n  userIds?: string[];\n\n  /**\n   * The maximum number of visible avatars.\n   * Defaults to 3, set to `undefined` to show all avatars.\n   */\n  max?: number;\n\n  /**\n   * The size of the avatars.\n   */\n  size?: string | number;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides>;\n}\n\n/**\n * Displays a stack of avatars for the users currently present in the room.\n */\nexport const AvatarStack = forwardRef<HTMLDivElement, AvatarStackProps>(\n  (\n    {\n      userIds: additionalUserIds = [],\n      max = 3,\n      size,\n      overrides,\n      className,\n      style,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const otherIds = useOthers((others) => others.map((user) => user.id));\n    const selfId = useSelf((self) => self.id);\n    const userIds = useMemo(() => {\n      const uniqueUserIds = new Set([\n        selfId,\n        ...otherIds,\n        ...additionalUserIds,\n      ]);\n\n      return [...uniqueUserIds];\n    }, [selfId, otherIds, additionalUserIds]);\n    const maxAvatars = Math.max(1, Math.floor(max));\n    const visibleUserIds = userIds.slice(0, maxAvatars);\n    const hiddenUserIds = userIds.slice(visibleUserIds.length);\n    const remainingUsersCount = hiddenUserIds.length;\n    const visibleItemsCount =\n      visibleUserIds.length + Number(remainingUsersCount > 0);\n\n    if (userIds.length === 0) {\n      return null;\n    }\n\n    return (\n      <TooltipProvider>\n        <div\n          className={cn(\"lb-root lb-avatar-stack\", className)}\n          dir={$.dir}\n          style={\n            {\n              \"--lb-avatar-stack-count\": visibleItemsCount - 1,\n              \"--lb-avatar-stack-size\": size,\n              ...style,\n            } as CSSProperties\n          }\n          {...props}\n          ref={forwardedRef}\n        >\n          {visibleUserIds.map((userId, index) => {\n            if (!userId) {\n              return null;\n            }\n\n            return (\n              <Tooltip\n                key={userId}\n                content={<User userId={userId} />}\n                sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n                collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n                side=\"top\"\n                align=\"center\"\n              >\n                <Avatar\n                  userId={userId}\n                  className=\"lb-avatar-stack-avatar\"\n                  style={{ \"--lb-avatar-stack-index\": index } as CSSProperties}\n                />\n              </Tooltip>\n            );\n          })}\n          {remainingUsersCount > 0 ? (\n            <Tooltip\n              content={\n                <ul className=\"lb-users-tooltip-list\">\n                  {hiddenUserIds.map((userId) =>\n                    userId ? (\n                      <li key={userId} className=\"lb-users-tooltip-list-item\">\n                        <Avatar userId={userId} />\n                        <User userId={userId} />\n                      </li>\n                    ) : null\n                  )}\n                </ul>\n              }\n              sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n              collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n              side=\"top\"\n              align=\"center\"\n              className=\"lb-users-tooltip\"\n            >\n              <div\n                className=\"lb-avatar lb-avatar-stack-avatar lb-avatar-stack-more\"\n                style={\n                  {\n                    \"--lb-avatar-stack-index\": visibleUserIds.length,\n                  } as CSSProperties\n                }\n              >\n                <span className=\"lb-avatar-fallback\">\n                  +{remainingUsersCount}\n                </span>\n              </div>\n            </Tooltip>\n          ) : null}\n        </div>\n      </TooltipProvider>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA2CO;AAAoB;AAEvB;AACgC;AACxB;AACN;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACE;AAA8B;AAC5B;AACG;AACA;AAGL;AAAwB;AAE1B;AACA;AACA;AACA;AACA;AAGA;AACE;AAAO;AAGT;AAEI;AAAC;AAAA;AACmD;AAC3C;AAEL;AACiD;AACrB;AACvB;AACL;AAEE;AACC;AAEJ;AACC;AACE;AAAO;AAGT;AACE;AAAC;AAAA;AAEgC;AACnB;AACM;AACb;AACC;AAEN;AAAC;AAAA;AACC;AACU;AACgC;AAAA;AAC5C;AAAA;AAXK;AAYP;AAEH;AAEC;AAAC;AAAA;AAGoB;AAGT;AAAwB;AACF;AAEtB;AAER;AAEU;AACM;AACb;AACC;AACI;AAEV;AAAC;AAAA;AACW;AAER;AAC4C;AAC5C;AAGmC;AAAA;AACjC;AACJ;AAAA;AACF;AAAA;AAEA;AAAA;AAAA;AAER;AAGN;;"}

package/dist/components/AvatarStack.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useOthers, useSelf } from '@liveblocks/react';
+import { forwardRef, 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 { Avatar } from './internal/Avatar.js';
+import { TooltipProvider, Tooltip } from './internal/Tooltip.js';
+import { User } from './internal/User.js';
+
+
+const AvatarStack = forwardRef(
+  ({
+    userIds: additionalUserIds = [],
+    max = 3,
+    size,
+    overrides,
+    className,
+    style,
+    ...props
+  }, forwardedRef) => {
+    const $ = useOverrides(overrides);
+    const otherIds = useOthers((others) => others.map((user) => user.id));
+    const selfId = useSelf((self) => self.id);
+    const userIds = useMemo(() => {
+      const uniqueUserIds = /* @__PURE__ */ new Set([
+        selfId,
+        ...otherIds,
+        ...additionalUserIds
+      ]);
+      return [...uniqueUserIds];
+    }, [selfId, otherIds, additionalUserIds]);
+    const maxAvatars = Math.max(1, Math.floor(max));
+    const visibleUserIds = userIds.slice(0, maxAvatars);
+    const hiddenUserIds = userIds.slice(visibleUserIds.length);
+    const remainingUsersCount = hiddenUserIds.length;
+    const visibleItemsCount = visibleUserIds.length + Number(remainingUsersCount > 0);
+    if (userIds.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("lb-root lb-avatar-stack", className),
+        dir: $.dir,
+        style: {
+          "--lb-avatar-stack-count": visibleItemsCount - 1,
+          "--lb-avatar-stack-size": size,
+          ...style
+        },
+        ...props,
+        ref: forwardedRef,
+        children: [
+          visibleUserIds.map((userId, index) => {
+            if (!userId) {
+              return null;
+            }
+            return /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                content: /* @__PURE__ */ jsx(User, { userId }),
+                sideOffset: FLOATING_ELEMENT_SIDE_OFFSET,
+                collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
+                side: "top",
+                align: "center",
+                children: /* @__PURE__ */ jsx(
+                  Avatar,
+                  {
+                    userId,
+                    className: "lb-avatar-stack-avatar",
+                    style: { "--lb-avatar-stack-index": index }
+                  }
+                )
+              },
+              userId
+            );
+          }),
+          remainingUsersCount > 0 ? /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: /* @__PURE__ */ jsx("ul", { className: "lb-users-tooltip-list", children: hiddenUserIds.map(
+                (userId) => userId ? /* @__PURE__ */ jsxs("li", { className: "lb-users-tooltip-list-item", children: [
+                  /* @__PURE__ */ jsx(Avatar, { userId }),
+                  /* @__PURE__ */ jsx(User, { userId })
+                ] }, userId) : null
+              ) }),
+              sideOffset: FLOATING_ELEMENT_SIDE_OFFSET,
+              collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
+              side: "top",
+              align: "center",
+              className: "lb-users-tooltip",
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "lb-avatar lb-avatar-stack-avatar lb-avatar-stack-more",
+                  style: {
+                    "--lb-avatar-stack-index": visibleUserIds.length
+                  },
+                  children: /* @__PURE__ */ jsxs("span", { className: "lb-avatar-fallback", children: [
+                    "+",
+                    remainingUsersCount
+                  ] })
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    ) });
+  }
+);
+
+export { AvatarStack };
+//# sourceMappingURL=AvatarStack.js.map

package/dist/components/AvatarStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarStack.js","sources":["../../src/components/AvatarStack.tsx"],"sourcesContent":["\"use client\";\n\nimport { useOthers, useSelf } from \"@liveblocks/react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport type { GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\nexport interface AvatarStackProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Optional additional user IDs to include in the stack.\n   */\n  userIds?: string[];\n\n  /**\n   * The maximum number of visible avatars.\n   * Defaults to 3, set to `undefined` to show all avatars.\n   */\n  max?: number;\n\n  /**\n   * The size of the avatars.\n   */\n  size?: string | number;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides>;\n}\n\n/**\n * Displays a stack of avatars for the users currently present in the room.\n */\nexport const AvatarStack = forwardRef<HTMLDivElement, AvatarStackProps>(\n  (\n    {\n      userIds: additionalUserIds = [],\n      max = 3,\n      size,\n      overrides,\n      className,\n      style,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const otherIds = useOthers((others) => others.map((user) => user.id));\n    const selfId = useSelf((self) => self.id);\n    const userIds = useMemo(() => {\n      const uniqueUserIds = new Set([\n        selfId,\n        ...otherIds,\n        ...additionalUserIds,\n      ]);\n\n      return [...uniqueUserIds];\n    }, [selfId, otherIds, additionalUserIds]);\n    const maxAvatars = Math.max(1, Math.floor(max));\n    const visibleUserIds = userIds.slice(0, maxAvatars);\n    const hiddenUserIds = userIds.slice(visibleUserIds.length);\n    const remainingUsersCount = hiddenUserIds.length;\n    const visibleItemsCount =\n      visibleUserIds.length + Number(remainingUsersCount > 0);\n\n    if (userIds.length === 0) {\n      return null;\n    }\n\n    return (\n      <TooltipProvider>\n        <div\n          className={cn(\"lb-root lb-avatar-stack\", className)}\n          dir={$.dir}\n          style={\n            {\n              \"--lb-avatar-stack-count\": visibleItemsCount - 1,\n              \"--lb-avatar-stack-size\": size,\n              ...style,\n            } as CSSProperties\n          }\n          {...props}\n          ref={forwardedRef}\n        >\n          {visibleUserIds.map((userId, index) => {\n            if (!userId) {\n              return null;\n            }\n\n            return (\n              <Tooltip\n                key={userId}\n                content={<User userId={userId} />}\n                sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n                collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n                side=\"top\"\n                align=\"center\"\n              >\n                <Avatar\n                  userId={userId}\n                  className=\"lb-avatar-stack-avatar\"\n                  style={{ \"--lb-avatar-stack-index\": index } as CSSProperties}\n                />\n              </Tooltip>\n            );\n          })}\n          {remainingUsersCount > 0 ? (\n            <Tooltip\n              content={\n                <ul className=\"lb-users-tooltip-list\">\n                  {hiddenUserIds.map((userId) =>\n                    userId ? (\n                      <li key={userId} className=\"lb-users-tooltip-list-item\">\n                        <Avatar userId={userId} />\n                        <User userId={userId} />\n                      </li>\n                    ) : null\n                  )}\n                </ul>\n              }\n              sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n              collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n              side=\"top\"\n              align=\"center\"\n              className=\"lb-users-tooltip\"\n            >\n              <div\n                className=\"lb-avatar lb-avatar-stack-avatar lb-avatar-stack-more\"\n                style={\n                  {\n                    \"--lb-avatar-stack-index\": visibleUserIds.length,\n                  } as CSSProperties\n                }\n              >\n                <span className=\"lb-avatar-fallback\">\n                  +{remainingUsersCount}\n                </span>\n              </div>\n            </Tooltip>\n          ) : null}\n        </div>\n      </TooltipProvider>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;AA2CO;AAAoB;AAEvB;AACgC;AACxB;AACN;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACE;AAA8B;AAC5B;AACG;AACA;AAGL;AAAwB;AAE1B;AACA;AACA;AACA;AACA;AAGA;AACE;AAAO;AAGT;AAEI;AAAC;AAAA;AACmD;AAC3C;AAEL;AACiD;AACrB;AACvB;AACL;AAEE;AACC;AAEJ;AACC;AACE;AAAO;AAGT;AACE;AAAC;AAAA;AAEgC;AACnB;AACM;AACb;AACC;AAEN;AAAC;AAAA;AACC;AACU;AACgC;AAAA;AAC5C;AAAA;AAXK;AAYP;AAEH;AAEC;AAAC;AAAA;AAGoB;AAGT;AAAwB;AACF;AAEtB;AAER;AAEU;AACM;AACb;AACC;AACI;AAEV;AAAC;AAAA;AACW;AAER;AAC4C;AAC5C;AAGmC;AAAA;AACjC;AACJ;AAAA;AACF;AAAA;AAEA;AAAA;AAAA;AAER;AAGN;;"}

package/dist/components/Comment.cjs

@@ -4,7 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@liveblocks/core');
 var _private = require('@liveblocks/react/_private');
-var TogglePrimitive = require('@radix-ui/react-toggle');
+var radixUi = require('radix-ui');
 var react = require('react');
 var components = require('../components.cjs');
 var Check = require('../icons/Check.cjs');
@@ -33,28 +33,6 @@ var Group = require('./internal/Group.cjs');
 var List = require('./internal/List.cjs');
 var Tooltip = require('./internal/Tooltip.cjs');
 var User = require('./internal/User.cjs');
-var PopoverPrimitive = require('@radix-ui/react-popover');
-var TooltipPrimitive = require('@radix-ui/react-tooltip');
-var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
-
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TogglePrimitive);
 
 
 const REACTIONS_TRUNCATE = 5;
@@ -221,7 +199,7 @@ const CommentReaction = react.forwardRef(({ comment, reaction, overrides: overri
       multiline: true,
       className: "lb-comment-reaction-tooltip",
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        TogglePrimitive__namespace.Root,
+        radixUi.Toggle.Root,
         {
           asChild: true,
           pressed: isActive,
@@ -401,6 +379,7 @@ const Comment = Object.assign(
       children,
       ...props
     }, forwardedRef) => {
+      const bodyId = `${comment.id}:body`;
       const ref = react.useRef(null);
       const mergedRefs = useRefs.useRefs(forwardedRef, ref);
       const currentUserId = shared.useCurrentUserId();
@@ -576,6 +555,7 @@ const Comment = Object.assign(
             index.Body,
             {
               className: "lb-comment-body",
+              id: bodyId,
               body: comment.body,
               components: {
                 Mention: ({ mention }) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -624,7 +604,7 @@ const Comment = Object.assign(
               },
               reaction.emoji
             )),
-            canComment ? /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPicker, { onEmojiSelect: handleReactionSelect, children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            canComment ? /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPicker, { onEmojiSelect: handleReactionSelect, children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPickerTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
               Button.Button,
               {
                 className: "lb-comment-reaction lb-comment-reaction-add",
@@ -638,9 +618,10 @@ const Comment = Object.assign(
         ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-comment-body", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "lb-comment-deleted", children: $.COMMENT_DELETED }) });
         content = typeof children === "function" ? children({ comment, children: content }) : children ?? content;
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(components.ComponentsProvider, { components: components$1, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(components.ComponentsProvider, { components: components$1, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
+          role: "article",
           id: comment.id,
           className: cn.cn(
             "lb-root lb-comment",
@@ -652,6 +633,7 @@ const Comment = Object.assign(
           "data-deleted": !comment.body ? "" : void 0,
           "data-editing": isEditing ? "" : void 0,
           "data-target": isTarget ? "" : void 0,
+          "aria-labelledby": bodyId,
           dir: $.dir,
           ...props,
           ref: mergedRefs,
@@ -712,7 +694,7 @@ const Comment = Object.assign(
                   {
                     onEmojiSelect: handleReactionSelect,
                     onOpenChange: setReactionActionOpen,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPickerTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                       Button.Button,
                       {
                         className: "lb-comment-action",
@@ -730,7 +712,7 @@ const Comment = Object.assign(
                     onOpenChange: setMoreActionOpen,
                     align: "end",
                     content: dropdownContent,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: $.COMMENT_MORE, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: $.COMMENT_MORE, children: /* @__PURE__ */ jsxRuntime.jsx(Dropdown.DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                       Button.Button,
                       {
                         className: "lb-comment-action",