@liveblocks/react-ui 3.15.0 → 3.15.1-rc2

package/dist/icon.cjs.map

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

package/dist/icon.js

@@ -30,6 +30,7 @@ export { LengthenIcon as Lengthen } from './icons/Lengthen.js';
 export { ListOrderedIcon as ListOrdered } from './icons/ListOrdered.js';
 export { ListUnorderedIcon as ListUnordered } from './icons/ListUnordered.js';
 export { MentionIcon as Mention } from './icons/Mention.js';
+export { PlusIcon as Plus } from './icons/Plus.js';
 export { QuestionMarkIcon as QuestionMark } from './icons/QuestionMark.js';
 export { RedoIcon as Redo } from './icons/Redo.js';
 export { RetryIcon as Retry } from './icons/Retry.js';

package/dist/icon.js.map

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

package/dist/icons/Plus.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Icon = require('../components/internal/Icon.cjs');
+
+function PlusIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 10h12M10 4v12" }) });
+}
+
+exports.PlusIcon = PlusIcon;
+//# sourceMappingURL=Plus.cjs.map

package/dist/icons/Plus.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Plus.cjs","sources":["../../src/icons/Plus.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { Icon } from \"../components/internal/Icon\";\n\nexport function PlusIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <Icon {...props}>\n      <path d=\"M4 10h12M10 4v12\" />\n    </Icon>\n  );\n}\n"],"names":["jsx","Icon"],"mappings":";;;;;AAIO,SAAS,SAAS,KAA8B,EAAA;AACrD,EACE,uBAAAA,cAAA,CAACC,aAAM,GAAG,KAAA,EACR,yCAAC,MAAK,EAAA,EAAA,CAAA,EAAE,oBAAmB,CAC7B,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/dist/icons/Plus.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { Icon } from '../components/internal/Icon.js';
+
+function PlusIcon(props) {
+  return /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 10h12M10 4v12" }) });
+}
+
+export { PlusIcon };
+//# sourceMappingURL=Plus.js.map

package/dist/icons/Plus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Plus.js","sources":["../../src/icons/Plus.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { Icon } from \"../components/internal/Icon\";\n\nexport function PlusIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <Icon {...props}>\n      <path d=\"M4 10h12M10 4v12\" />\n    </Icon>\n  );\n}\n"],"names":[],"mappings":";;;AAIO,SAAS,SAAS,KAA8B,EAAA;AACrD,EACE,uBAAA,GAAA,CAAC,QAAM,GAAG,KAAA,EACR,8BAAC,MAAK,EAAA,EAAA,CAAA,EAAE,oBAAmB,CAC7B,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/dist/icons/index.cjs

@@ -36,6 +36,7 @@ var ListOrdered = require('./ListOrdered.cjs');
 var ListUnordered = require('./ListUnordered.cjs');
 var Mention = require('./Mention.cjs');
 var MinusCircle = require('./MinusCircle.cjs');
+var Plus = require('./Plus.cjs');
 var QuestionMark = require('./QuestionMark.cjs');
 var Redo = require('./Redo.cjs');
 var Restore = require('./Restore.cjs');
@@ -94,6 +95,7 @@ exports.ListOrderedIcon = ListOrdered.ListOrderedIcon;
 exports.ListUnorderedIcon = ListUnordered.ListUnorderedIcon;
 exports.MentionIcon = Mention.MentionIcon;
 exports.MinusCircleIcon = MinusCircle.MinusCircleIcon;
+exports.PlusIcon = Plus.PlusIcon;
 exports.QuestionMarkIcon = QuestionMark.QuestionMarkIcon;
 exports.RedoIcon = Redo.RedoIcon;
 exports.RestoreIcon = Restore.RestoreIcon;

package/dist/icons/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/icons/index.js

@@ -34,6 +34,7 @@ export { ListOrderedIcon } from './ListOrdered.js';
 export { ListUnorderedIcon } from './ListUnordered.js';
 export { MentionIcon } from './Mention.js';
 export { MinusCircleIcon } from './MinusCircle.js';
+export { PlusIcon } from './Plus.js';
 export { QuestionMarkIcon } from './QuestionMark.js';
 export { RedoIcon } from './Redo.js';
 export { RestoreIcon } from './Restore.js';

package/dist/icons/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/index.d.cts

@@ -816,10 +816,10 @@ interface AvatarStackProps extends ComponentPropsWithoutRef<"div"> {
      */
     userIds?: string[];
     /**
-     * The maximum number of visible avatars.
-     * Defaults to 3, set to `undefined` to show all avatars.
+     * The maximum number of items in the stack (at least 2).
+     * Defaults to 3, set to `null` to show all avatars.
      */
-    max?: number;
+    max?: number | null;
     /**
      * The size of the avatars.
      */
@@ -1224,6 +1224,11 @@ interface CommentPinProps extends ComponentPropsWithoutRef<"button"> {
      * The size of the pin.
      */
     size?: string | number;
+    /**
+     * The content shown in the pin.
+     * If provided, the `userId` prop is ignored.
+     */
+    children?: ReactNode;
 }
 /**
  * Displays a comment pin that can be used as a trigger
@@ -1720,6 +1725,8 @@ declare function ListUnorderedIcon(props: ComponentProps<"svg">): react_jsx_runt
 
 declare function MentionIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
+declare function PlusIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
+
 declare function QuestionMarkIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
 declare function RedoIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
@@ -1787,6 +1794,7 @@ declare namespace icon {
     ListOrderedIcon as ListOrdered,
     ListUnorderedIcon as ListUnordered,
     MentionIcon as Mention,
+    PlusIcon as Plus,
     QuestionMarkIcon as QuestionMark,
     RedoIcon as Redo,
     RetryIcon as Retry,

package/dist/index.d.ts

@@ -816,10 +816,10 @@ interface AvatarStackProps extends ComponentPropsWithoutRef<"div"> {
      */
     userIds?: string[];
     /**
-     * The maximum number of visible avatars.
-     * Defaults to 3, set to `undefined` to show all avatars.
+     * The maximum number of items in the stack (at least 2).
+     * Defaults to 3, set to `null` to show all avatars.
      */
-    max?: number;
+    max?: number | null;
     /**
      * The size of the avatars.
      */
@@ -1224,6 +1224,11 @@ interface CommentPinProps extends ComponentPropsWithoutRef<"button"> {
      * The size of the pin.
      */
     size?: string | number;
+    /**
+     * The content shown in the pin.
+     * If provided, the `userId` prop is ignored.
+     */
+    children?: ReactNode;
 }
 /**
  * Displays a comment pin that can be used as a trigger
@@ -1720,6 +1725,8 @@ declare function ListUnorderedIcon(props: ComponentProps<"svg">): react_jsx_runt
 
 declare function MentionIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
+declare function PlusIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
+
 declare function QuestionMarkIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
 declare function RedoIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
@@ -1787,6 +1794,7 @@ declare namespace icon {
     ListOrderedIcon as ListOrdered,
     ListUnorderedIcon as ListUnordered,
     MentionIcon as Mention,
+    PlusIcon as Plus,
     QuestionMarkIcon as QuestionMark,
     RedoIcon as Redo,
     RetryIcon as Retry,

package/dist/utils/px.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+function px(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  if (typeof value === "number") {
+    return `${value}px`;
+  }
+  return value;
+}
+
+exports.px = px;
+//# sourceMappingURL=px.cjs.map

package/dist/utils/px.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"px.cjs","sources":["../../src/utils/px.ts"],"sourcesContent":["export function px(value: number | string | undefined): string | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  if (typeof value === \"number\") {\n    return `${value}px`;\n  }\n\n  return value;\n}\n"],"names":[],"mappings":";;AAAO,SAAS,GAAG,KAAwD,EAAA;AACzE,EAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACT;AAEA,EAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC7B,IAAA,OAAO,GAAG,KAAK,CAAA,EAAA,CAAA,CAAA;AAAA,GACjB;AAEA,EAAO,OAAA,KAAA,CAAA;AACT;;;;"}

package/dist/utils/px.js

@@ -0,0 +1,12 @@
+function px(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  if (typeof value === "number") {
+    return `${value}px`;
+  }
+  return value;
+}
+
+export { px };
+//# sourceMappingURL=px.js.map

package/dist/utils/px.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"px.js","sources":["../../src/utils/px.ts"],"sourcesContent":["export function px(value: number | string | undefined): string | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  if (typeof value === \"number\") {\n    return `${value}px`;\n  }\n\n  return value;\n}\n"],"names":[],"mappings":"AAAO,SAAS,GAAG,KAAwD,EAAA;AACzE,EAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACT;AAEA,EAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC7B,IAAA,OAAO,GAAG,KAAK,CAAA,EAAA,CAAA,CAAA;AAAA,GACjB;AAEA,EAAO,OAAA,KAAA,CAAA;AACT;;;;"}

package/dist/version.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = typeof "3.15.0" === "string" && "3.15.0";
+const PKG_VERSION = typeof "3.15.1-rc2" === "string" && "3.15.1-rc2";
 const PKG_FORMAT = typeof "cjs" === "string" && "cjs";
 
 exports.PKG_FORMAT = PKG_FORMAT;

package/dist/version.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"version.cjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,QAAA,KAAgB,QAAY,IAAA,SAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;;;"}
+{"version":3,"file":"version.cjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,YAAA,KAAgB,QAAY,IAAA,aAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;;;"}

package/dist/version.js

@@ -1,5 +1,5 @@
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = typeof "3.15.0" === "string" && "3.15.0";
+const PKG_VERSION = typeof "3.15.1-rc2" === "string" && "3.15.1-rc2";
 const PKG_FORMAT = typeof "esm" === "string" && "esm";
 
 export { PKG_FORMAT, PKG_NAME, PKG_VERSION };

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,QAAA,KAAgB,QAAY,IAAA,SAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;"}
+{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,YAAA,KAAgB,QAAY,IAAA,aAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react-ui",
-  "version": "3.15.0",
+  "version": "3.15.1-rc2",
   "description": "A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
   "license": "Apache-2.0",
   "author": "Liveblocks Inc.",
@@ -78,9 +78,9 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.0",
-    "@liveblocks/client": "3.15.0",
-    "@liveblocks/core": "3.15.0",
-    "@liveblocks/react": "3.15.0",
+    "@liveblocks/client": "3.15.1-rc2",
+    "@liveblocks/core": "3.15.1-rc2",
+    "@liveblocks/react": "3.15.1-rc2",
     "frimousse": "^0.2.0",
     "marked": "^15.0.11",
     "radix-ui": "^1.4.0",

package/src/styles/index.css

@@ -1056,6 +1056,8 @@
   font-weight: 500;
   font-size: 35cqi;
   white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
 
   /**
    * Progressive enhancement: Only show the fallback when container queries are supported
@@ -1171,6 +1173,7 @@
   position: relative;
   background: var(--lb-dynamic-background);
   color: var(--lb-foreground);
+  outline: none;
   transition-property: background;
 }
 
@@ -1737,6 +1740,10 @@
     border-end-start-radius: 2px;
     transform: translate(0, -100%);
   }
+
+  :where(.lb-icon) {
+    color: var(--lb-foreground-moderate);
+  }
 }
 
 .lb-comment-pin-avatar {
@@ -1761,7 +1768,7 @@
 .lb-avatar-stack-avatar {
   position: relative;
   z-index: calc(
-    var(--lb-avatar-stack-count) - var(--lb-avatar-stack-avatar-index)
+    var(--lb-avatar-stack-count) - 1 - var(--lb-avatar-stack-avatar-index)
   );
   inline-size: var(--lb-avatar-stack-size);
   block-size: var(--lb-avatar-stack-size);