@liveblocks/react-ui 3.14.0-types2 → 3.15.0-components1

package/README.md

@@ -62,4 +62,4 @@ learn more about
 Licensed under the Apache License 2.0, Copyright © 2021-present
 [Liveblocks](https://liveblocks.io).
 
-See [LICENSE](../../LICENSE) for more information.
+See [LICENSE](../../licenses/LICENSE-APACHE-2.0) for more information.

package/dist/_private/index.cjs

@@ -8,9 +8,11 @@ var List = require('../components/internal/List.cjs');
 var Prose = require('../components/internal/Prose.cjs');
 var Tooltip = require('../components/internal/Tooltip.cjs');
 var User = require('../components/internal/User.cjs');
+var config = require('../config.cjs');
 require('../icons/index.cjs');
 var capitalize = require('../utils/capitalize.cjs');
 var cn = require('../utils/cn.cjs');
+var Portal = require('../utils/Portal.cjs');
 var useInitial = require('../utils/use-initial.cjs');
 var useRefs = require('../utils/use-refs.cjs');
 var index = require('../primitives/AiComposer/index.cjs');
@@ -18,7 +20,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');
@@ -86,9 +87,12 @@ 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;
 exports.cn = cn.cn;
+exports.Portal = Portal.Portal;
 exports.useInitial = useInitial.useInitial;
 exports.useRefs = useRefs.useRefs;
 exports.AiComposer = index;
@@ -96,10 +100,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.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"> {
     /**
@@ -367,6 +367,14 @@ interface UserProps extends ComponentProps<"span"> {
 }
 declare function User({ userId, replaceSelf, className, children, ...props }: UserProps): react_jsx_runtime.JSX.Element;
 
+interface LiveblocksUiConfigContext {
+    portalContainer?: HTMLElement;
+    preventUnsavedComposerChanges?: boolean;
+    emojibaseUrl?: string;
+}
+declare const LiveblocksUiConfigContext: react.Context<LiveblocksUiConfigContext>;
+declare function useLiveblocksUiConfig(): LiveblocksUiConfigContext;
+
 declare function ArrowCornerDownRightIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
 declare function ArrowCornerUpRightIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
@@ -484,6 +492,8 @@ declare function capitalize(string: string): string;
  */
 declare function cn(...args: (string | number | boolean | undefined | null)[]): string;
 
+declare const Portal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SlotProp & react.RefAttributes<HTMLDivElement>>;
+
 /**
  * "Freezes" a given value, so that it will return the same value/instance on
  * each subsequent render. This can be used to freeze "initial" values for
@@ -708,4 +718,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, 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, useRefs };
+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 };

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"> {
     /**
@@ -367,6 +367,14 @@ interface UserProps extends ComponentProps<"span"> {
 }
 declare function User({ userId, replaceSelf, className, children, ...props }: UserProps): react_jsx_runtime.JSX.Element;
 
+interface LiveblocksUiConfigContext {
+    portalContainer?: HTMLElement;
+    preventUnsavedComposerChanges?: boolean;
+    emojibaseUrl?: string;
+}
+declare const LiveblocksUiConfigContext: react.Context<LiveblocksUiConfigContext>;
+declare function useLiveblocksUiConfig(): LiveblocksUiConfigContext;
+
 declare function ArrowCornerDownRightIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
 declare function ArrowCornerUpRightIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
@@ -484,6 +492,8 @@ declare function capitalize(string: string): string;
  */
 declare function cn(...args: (string | number | boolean | undefined | null)[]): string;
 
+declare const Portal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SlotProp & react.RefAttributes<HTMLDivElement>>;
+
 /**
  * "Freezes" a given value, so that it will return the same value/instance on
  * each subsequent render. This can be used to freeze "initial" values for
@@ -708,4 +718,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, 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, useRefs };
+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 };

package/dist/_private/index.js

@@ -4,11 +4,13 @@ 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';
 export { capitalize } from '../utils/capitalize.js';
 export { cn } from '../utils/cn.js';
+export { Portal } from '../utils/Portal.js';
 export { useInitial } from '../utils/use-initial.js';
 export { useRefs } from '../utils/use-refs.js';
 import * as index from '../primitives/AiComposer/index.js';
@@ -19,7 +21,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,115 @@
+"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,
+    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,
+          ...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   */\n  max?: 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      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              ...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":";;;;;;;;;;;;;;AAqCO;AAAoB;AAEvB;AACgC;AACxB;AACN;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;AAC5C;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,113 @@
+"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,
+    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,
+          ...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   */\n  max?: 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      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              ...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":";;;;;;;;;;;;AAqCO;AAAoB;AAEvB;AACgC;AACxB;AACN;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;AAC5C;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');
@@ -35,28 +35,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 TooltipPrimitive = require('@radix-ui/react-tooltip');
-var PopoverPrimitive = require('@radix-ui/react-popover');
-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;
@@ -206,7 +184,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,
@@ -402,6 +380,7 @@ const Comment = Object.assign(
       autoMarkReadThreadId,
       ...props
     }, forwardedRef) => {
+      const bodyId = `${comment.id}:body`;
       const ref = react.useRef(null);
       const mergedRefs = useRefs.useRefs(forwardedRef, ref);
       const currentUserId = shared.useCurrentUserId();
@@ -514,7 +493,7 @@ const Comment = Object.assign(
         defaultDropdownItems,
         dropdownItems
       ] });
-      return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(components.ComponentsProvider, { components: components$1, children: [
+      return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(components.ComponentsProvider, { components: components$1, children: [
         autoMarkReadThreadId && /* @__PURE__ */ jsxRuntime.jsx(
           AutoMarkReadThreadIdHandler,
           {
@@ -526,6 +505,7 @@ const Comment = Object.assign(
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
+            role: "article",
             id: comment.id,
             className: cn.cn(
               "lb-root lb-comment",
@@ -537,6 +517,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,
@@ -583,7 +564,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",
@@ -601,7 +582,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",
@@ -670,6 +651,7 @@ const Comment = Object.assign(
                   index.Body,
                   {
                     className: "lb-comment-body",
+                    id: bodyId,
                     body: comment.body,
                     components: {
                       Mention: ({ mention }) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -717,7 +699,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",