@liveblocks/react-ui 1.12.0-initial1

package/dist/components/internal/InboxNotificationThread.mjs

@@ -0,0 +1,112 @@
+import { getMentionedIdsFromCommentBody } from '@liveblocks/core';
+import React__default from 'react';
+import { useOverrides } from '../../overrides.mjs';
+import { Body as CommentBody } from '../../primitives/Comment/index.mjs';
+import { classNames } from '../../utils/class-names.mjs';
+import { CommentMention, CommentNonInteractiveLink, CommentNonInteractiveReaction } from '../Comment.mjs';
+import { User } from './User.mjs';
+
+const INBOX_NOTIFICATION_THREAD_MAX_COMMENTS = 3;
+function InboxNotificationComment({
+  comment,
+  showHeader = true,
+  overrides,
+  className,
+  ...props
+}) {
+  const $ = useOverrides(overrides);
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: classNames(
+      "lb-root lb-inbox-notification-comment lb-comment",
+      className
+    ),
+    ...props
+  }, showHeader && /* @__PURE__ */ React__default.createElement("div", {
+    className: "lb-comment-header"
+  }, /* @__PURE__ */ React__default.createElement(User, {
+    className: "lb-comment-author",
+    userId: comment.userId
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "lb-comment-content"
+  }, comment.body ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(CommentBody, {
+    className: "lb-comment-body",
+    body: comment.body,
+    components: {
+      Mention: CommentMention,
+      Link: CommentNonInteractiveLink
+    }
+  }), comment.reactions.length > 0 && /* @__PURE__ */ React__default.createElement("div", {
+    className: "lb-comment-reactions"
+  }, comment.reactions.map((reaction) => /* @__PURE__ */ React__default.createElement(CommentNonInteractiveReaction, {
+    key: reaction.emoji,
+    reaction,
+    overrides,
+    disabled: true
+  })))) : /* @__PURE__ */ React__default.createElement("div", {
+    className: "lb-comment-body"
+  }, /* @__PURE__ */ React__default.createElement("p", {
+    className: "lb-comment-deleted"
+  }, $.COMMENT_DELETED))));
+}
+function findLastCommentWithMentionedId(comments, mentionedId) {
+  for (let i = comments.length - 1; i >= 0; i--) {
+    const comment = comments[i];
+    if (comment.userId === mentionedId) {
+      continue;
+    }
+    if (comment.body) {
+      const mentionedIds = getMentionedIdsFromCommentBody(comment.body);
+      if (mentionedIds.includes(mentionedId)) {
+        return comment;
+      }
+    }
+  }
+  return;
+}
+function getUserIdsFromComments(comments) {
+  return Array.from(new Set(comments.map((comment) => comment.userId)));
+}
+function generateInboxNotificationThreadContents(inboxNotification, thread, userId) {
+  const unreadComments = thread.comments.filter((comment) => {
+    if (!comment.body) {
+      return false;
+    }
+    return inboxNotification.readAt ? comment.createdAt > inboxNotification.readAt && comment.createdAt <= inboxNotification.notifiedAt : comment.createdAt <= inboxNotification.notifiedAt;
+  });
+  if (unreadComments.length === 0) {
+    const lastComments = thread.comments.filter((comment) => comment.body).slice(-INBOX_NOTIFICATION_THREAD_MAX_COMMENTS);
+    return {
+      type: "comments",
+      unread: false,
+      comments: lastComments,
+      userIds: getUserIdsFromComments(lastComments),
+      date: inboxNotification.notifiedAt
+    };
+  }
+  const commentWithMention = findLastCommentWithMentionedId(
+    unreadComments,
+    userId
+  );
+  if (commentWithMention) {
+    return {
+      type: "mention",
+      unread: true,
+      comments: [commentWithMention],
+      userIds: [commentWithMention.userId],
+      date: commentWithMention.createdAt
+    };
+  }
+  const lastUnreadComments = unreadComments.slice(
+    -INBOX_NOTIFICATION_THREAD_MAX_COMMENTS
+  );
+  return {
+    type: "comments",
+    unread: true,
+    comments: lastUnreadComments,
+    userIds: getUserIdsFromComments(unreadComments),
+    date: inboxNotification.notifiedAt
+  };
+}
+
+export { INBOX_NOTIFICATION_THREAD_MAX_COMMENTS, InboxNotificationComment, generateInboxNotificationThreadContents };
+//# sourceMappingURL=InboxNotificationThread.mjs.map

package/dist/components/internal/InboxNotificationThread.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InboxNotificationThread.mjs","sources":["../../../src/components/internal/InboxNotificationThread.tsx"],"sourcesContent":["import type {\n  BaseMetadata,\n  CommentData,\n  InboxNotificationThreadData,\n  ThreadData,\n} from \"@liveblocks/core\";\nimport { getMentionedIdsFromCommentBody } from \"@liveblocks/core\";\nimport type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport {\n  type CommentOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../../overrides\";\nimport * as CommentPrimitive from \"../../primitives/Comment\";\nimport { classNames } from \"../../utils/class-names\";\nimport {\n  CommentMention,\n  CommentNonInteractiveLink,\n  CommentNonInteractiveReaction,\n} from \"../Comment\";\nimport { User } from \"./User\";\n\ntype InboxNotificationThreadCommentsContents = {\n  type: \"comments\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\ntype InboxNotificationThreadMentionContents = {\n  type: \"mention\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\nexport const INBOX_NOTIFICATION_THREAD_MAX_COMMENTS = 3;\n\ntype InboxNotificationThreadContents =\n  | InboxNotificationThreadCommentsContents\n  | InboxNotificationThreadMentionContents;\n\ninterface InboxNotificationCommentProps extends ComponentProps<\"div\"> {\n  comment: CommentData;\n  showHeader?: boolean;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\nexport function InboxNotificationComment({\n  comment,\n  showHeader = true,\n  overrides,\n  className,\n  ...props\n}: InboxNotificationCommentProps) {\n  const $ = useOverrides(overrides);\n\n  return (\n    <div\n      className={classNames(\n        \"lb-root lb-inbox-notification-comment lb-comment\",\n        className\n      )}\n      {...props}\n    >\n      {showHeader && (\n        <div className=\"lb-comment-header\">\n          <User className=\"lb-comment-author\" userId={comment.userId} />\n        </div>\n      )}\n      <div className=\"lb-comment-content\">\n        {comment.body ? (\n          <>\n            <CommentPrimitive.Body\n              className=\"lb-comment-body\"\n              body={comment.body}\n              components={{\n                Mention: CommentMention,\n                Link: CommentNonInteractiveLink,\n              }}\n            />\n            {comment.reactions.length > 0 && (\n              <div className=\"lb-comment-reactions\">\n                {comment.reactions.map((reaction) => (\n                  <CommentNonInteractiveReaction\n                    key={reaction.emoji}\n                    reaction={reaction}\n                    overrides={overrides}\n                    disabled\n                  />\n                ))}\n              </div>\n            )}\n          </>\n        ) : (\n          <div className=\"lb-comment-body\">\n            <p className=\"lb-comment-deleted\">{$.COMMENT_DELETED}</p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Find the last comment with a mention for the given user ID,\n * unless the comment was created by the user themselves.\n */\nfunction findLastCommentWithMentionedId(\n  comments: CommentData[],\n  mentionedId: string\n) {\n  for (let i = comments.length - 1; i >= 0; i--) {\n    const comment = comments[i];\n\n    if (comment.userId === mentionedId) {\n      continue;\n    }\n\n    if (comment.body) {\n      const mentionedIds = getMentionedIdsFromCommentBody(comment.body);\n\n      if (mentionedIds.includes(mentionedId)) {\n        return comment;\n      }\n    }\n  }\n\n  return;\n}\n\nfunction getUserIdsFromComments(comments: CommentData[]) {\n  return Array.from(new Set(comments.map((comment) => comment.userId)));\n}\n\nexport function generateInboxNotificationThreadContents(\n  inboxNotification: InboxNotificationThreadData,\n  thread: ThreadData<BaseMetadata>,\n  userId: string\n): InboxNotificationThreadContents {\n  const unreadComments = thread.comments.filter((comment) => {\n    if (!comment.body) {\n      return false;\n    }\n\n    return inboxNotification.readAt\n      ? comment.createdAt > inboxNotification.readAt &&\n          comment.createdAt <= inboxNotification.notifiedAt\n      : comment.createdAt <= inboxNotification.notifiedAt;\n  });\n\n  // If the thread is read, show the last comments.\n  if (unreadComments.length === 0) {\n    const lastComments = thread.comments\n      .filter((comment) => comment.body)\n      .slice(-INBOX_NOTIFICATION_THREAD_MAX_COMMENTS);\n\n    return {\n      type: \"comments\",\n      unread: false,\n      comments: lastComments,\n      userIds: getUserIdsFromComments(lastComments),\n      date: inboxNotification.notifiedAt,\n    };\n  }\n\n  const commentWithMention = findLastCommentWithMentionedId(\n    unreadComments,\n    userId\n  );\n\n  // If the thread contains one or more mentions for the current user, show the last comment with a mention.\n  if (commentWithMention) {\n    return {\n      type: \"mention\",\n      unread: true,\n      comments: [commentWithMention],\n      userIds: [commentWithMention.userId],\n      date: commentWithMention.createdAt,\n    };\n  }\n\n  const lastUnreadComments = unreadComments.slice(\n    -INBOX_NOTIFICATION_THREAD_MAX_COMMENTS\n  );\n\n  // Otherwise, show the last unread comments.\n  return {\n    type: \"comments\",\n    unread: true,\n    comments: lastUnreadComments,\n    userIds: getUserIdsFromComments(unreadComments),\n    date: inboxNotification.notifiedAt,\n  };\n}\n"],"names":["React","CommentPrimitive.Body"],"mappings":"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"}

package/dist/components/internal/List.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var reactSlot = require('@radix-ui/react-slot');
+var React = require('react');
+var overrides = require('../../overrides.js');
+var classNames = require('../../utils/class-names.js');
+var intl = require('../../utils/intl.js');
+
+const List = React.forwardRef(
+  ({ values, formatRemaining, truncate, locale, className, asChild, ...props }, forwardedRef) => {
+    const Component = asChild ? reactSlot.Slot : "span";
+    const $ = overrides.useOverrides();
+    const formatRemainingWithDefault = formatRemaining ?? $.LIST_REMAINING;
+    const formattedList = React.useMemo(() => {
+      const elements = truncate && truncate < values.length - 1 ? [
+        ...values.slice(0, truncate),
+        formatRemainingWithDefault(values.length - truncate)
+      ] : [...values];
+      const placeholders = Array(elements.length).fill(".");
+      const parts = intl.listFormat(locale).formatToParts(placeholders);
+      return parts.map(
+        (part) => part.type === "element" ? elements.shift() : part.value
+      );
+    }, [formatRemainingWithDefault, locale, truncate, values]);
+    return /* @__PURE__ */ React.createElement(Component, {
+      className: classNames.classNames("lb-list", className),
+      ...props,
+      ref: forwardedRef
+    }, formattedList);
+  }
+);
+
+exports.List = List;
+//# sourceMappingURL=List.js.map

package/dist/components/internal/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sources":["../../../src/components/internal/List.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport React, { forwardRef, useMemo } from \"react\";\n\nimport { useOverrides } from \"../../overrides\";\nimport type { ComponentPropsWithSlot } from \"../../types\";\nimport { classNames } from \"../../utils/class-names\";\nimport { listFormat } from \"../../utils/intl\";\n\nexport interface ListProps extends ComponentPropsWithSlot<\"span\"> {\n  values: ReactNode[];\n  formatRemaining?: (amount: number) => string;\n  truncate?: number;\n  locale?: string;\n}\n\nexport const List = forwardRef<HTMLSpanElement, ListProps>(\n  (\n    { values, formatRemaining, truncate, locale, className, asChild, ...props },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"span\";\n    const $ = useOverrides();\n    const formatRemainingWithDefault = formatRemaining ?? $.LIST_REMAINING;\n    const formattedList = useMemo(() => {\n      const elements =\n        truncate && truncate < values.length - 1\n          ? [\n              ...values.slice(0, truncate),\n              formatRemainingWithDefault(values.length - truncate),\n            ]\n          : [...values];\n      const placeholders = Array(elements.length).fill(\".\");\n      const parts = listFormat(locale).formatToParts(placeholders);\n\n      return parts.map((part) =>\n        part.type === \"element\" ? elements.shift() : part.value\n      );\n    }, [formatRemainingWithDefault, locale, truncate, values]);\n\n    return (\n      <Component\n        className={classNames(\"lb-list\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {formattedList}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","Slot","useOverrides","useMemo","listFormat","classNames"],"mappings":";;;;;;;;AAgBO,MAAM,IAAO,GAAAA,gBAAA;AAAA,EAClB,CACE,EAAE,MAAA,EAAQ,eAAiB,EAAA,QAAA,EAAU,QAAQ,SAAW,EAAA,OAAA,EAAA,GAAY,KAAM,EAAA,EAC1E,YACG,KAAA;AACH,IAAM,MAAA,SAAA,GAAY,UAAUC,cAAO,GAAA,MAAA,CAAA;AACnC,IAAA,MAAM,IAAIC,sBAAa,EAAA,CAAA;AACvB,IAAM,MAAA,0BAAA,GAA6B,mBAAmB,CAAE,CAAA,cAAA,CAAA;AACxD,IAAM,MAAA,aAAA,GAAgBC,cAAQ,MAAM;AAClC,MAAA,MAAM,QACJ,GAAA,QAAA,IAAY,QAAW,GAAA,MAAA,CAAO,SAAS,CACnC,GAAA;AAAA,QACE,GAAG,MAAA,CAAO,KAAM,CAAA,CAAA,EAAG,QAAQ,CAAA;AAAA,QAC3B,0BAAA,CAA2B,MAAO,CAAA,MAAA,GAAS,QAAQ,CAAA;AAAA,OACrD,GACA,CAAC,GAAG,MAAM,CAAA,CAAA;AAChB,MAAA,MAAM,eAAe,KAAM,CAAA,QAAA,CAAS,MAAM,CAAA,CAAE,KAAK,GAAG,CAAA,CAAA;AACpD,MAAA,MAAM,KAAQ,GAAAC,eAAA,CAAW,MAAM,CAAA,CAAE,cAAc,YAAY,CAAA,CAAA;AAE3D,MAAA,OAAO,KAAM,CAAA,GAAA;AAAA,QAAI,CAAC,SAChB,IAAK,CAAA,IAAA,KAAS,YAAY,QAAS,CAAA,KAAA,KAAU,IAAK,CAAA,KAAA;AAAA,OACpD,CAAA;AAAA,OACC,CAAC,0BAAA,EAA4B,MAAQ,EAAA,QAAA,EAAU,MAAM,CAAC,CAAA,CAAA;AAEzD,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAA,EAAWC,qBAAW,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MACzC,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,KAAA,EAEJ,aACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/components/internal/List.mjs

@@ -0,0 +1,32 @@
+import { Slot } from '@radix-ui/react-slot';
+import React__default, { forwardRef, useMemo } from 'react';
+import { useOverrides } from '../../overrides.mjs';
+import { classNames } from '../../utils/class-names.mjs';
+import { listFormat } from '../../utils/intl.mjs';
+
+const List = forwardRef(
+  ({ values, formatRemaining, truncate, locale, className, asChild, ...props }, forwardedRef) => {
+    const Component = asChild ? Slot : "span";
+    const $ = useOverrides();
+    const formatRemainingWithDefault = formatRemaining ?? $.LIST_REMAINING;
+    const formattedList = useMemo(() => {
+      const elements = truncate && truncate < values.length - 1 ? [
+        ...values.slice(0, truncate),
+        formatRemainingWithDefault(values.length - truncate)
+      ] : [...values];
+      const placeholders = Array(elements.length).fill(".");
+      const parts = listFormat(locale).formatToParts(placeholders);
+      return parts.map(
+        (part) => part.type === "element" ? elements.shift() : part.value
+      );
+    }, [formatRemainingWithDefault, locale, truncate, values]);
+    return /* @__PURE__ */ React__default.createElement(Component, {
+      className: classNames("lb-list", className),
+      ...props,
+      ref: forwardedRef
+    }, formattedList);
+  }
+);
+
+export { List };
+//# sourceMappingURL=List.mjs.map

package/dist/components/internal/List.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.mjs","sources":["../../../src/components/internal/List.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport React, { forwardRef, useMemo } from \"react\";\n\nimport { useOverrides } from \"../../overrides\";\nimport type { ComponentPropsWithSlot } from \"../../types\";\nimport { classNames } from \"../../utils/class-names\";\nimport { listFormat } from \"../../utils/intl\";\n\nexport interface ListProps extends ComponentPropsWithSlot<\"span\"> {\n  values: ReactNode[];\n  formatRemaining?: (amount: number) => string;\n  truncate?: number;\n  locale?: string;\n}\n\nexport const List = forwardRef<HTMLSpanElement, ListProps>(\n  (\n    { values, formatRemaining, truncate, locale, className, asChild, ...props },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"span\";\n    const $ = useOverrides();\n    const formatRemainingWithDefault = formatRemaining ?? $.LIST_REMAINING;\n    const formattedList = useMemo(() => {\n      const elements =\n        truncate && truncate < values.length - 1\n          ? [\n              ...values.slice(0, truncate),\n              formatRemainingWithDefault(values.length - truncate),\n            ]\n          : [...values];\n      const placeholders = Array(elements.length).fill(\".\");\n      const parts = listFormat(locale).formatToParts(placeholders);\n\n      return parts.map((part) =>\n        part.type === \"element\" ? elements.shift() : part.value\n      );\n    }, [formatRemainingWithDefault, locale, truncate, values]);\n\n    return (\n      <Component\n        className={classNames(\"lb-list\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {formattedList}\n      </Component>\n    );\n  }\n);\n"],"names":["React"],"mappings":";;;;;;AAgBO,MAAM,IAAO,GAAA,UAAA;AAAA,EAClB,CACE,EAAE,MAAA,EAAQ,eAAiB,EAAA,QAAA,EAAU,QAAQ,SAAW,EAAA,OAAA,EAAA,GAAY,KAAM,EAAA,EAC1E,YACG,KAAA;AACH,IAAM,MAAA,SAAA,GAAY,UAAU,IAAO,GAAA,MAAA,CAAA;AACnC,IAAA,MAAM,IAAI,YAAa,EAAA,CAAA;AACvB,IAAM,MAAA,0BAAA,GAA6B,mBAAmB,CAAE,CAAA,cAAA,CAAA;AACxD,IAAM,MAAA,aAAA,GAAgB,QAAQ,MAAM;AAClC,MAAA,MAAM,QACJ,GAAA,QAAA,IAAY,QAAW,GAAA,MAAA,CAAO,SAAS,CACnC,GAAA;AAAA,QACE,GAAG,MAAA,CAAO,KAAM,CAAA,CAAA,EAAG,QAAQ,CAAA;AAAA,QAC3B,0BAAA,CAA2B,MAAO,CAAA,MAAA,GAAS,QAAQ,CAAA;AAAA,OACrD,GACA,CAAC,GAAG,MAAM,CAAA,CAAA;AAChB,MAAA,MAAM,eAAe,KAAM,CAAA,QAAA,CAAS,MAAM,CAAA,CAAE,KAAK,GAAG,CAAA,CAAA;AACpD,MAAA,MAAM,KAAQ,GAAA,UAAA,CAAW,MAAM,CAAA,CAAE,cAAc,YAAY,CAAA,CAAA;AAE3D,MAAA,OAAO,KAAM,CAAA,GAAA;AAAA,QAAI,CAAC,SAChB,IAAK,CAAA,IAAA,KAAS,YAAY,QAAS,CAAA,KAAA,KAAU,IAAK,CAAA,KAAA;AAAA,OACpD,CAAA;AAAA,OACC,CAAC,0BAAA,EAA4B,MAAQ,EAAA,QAAA,EAAU,MAAM,CAAC,CAAA,CAAA;AAEzD,IAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAA,EAAW,UAAW,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MACzC,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,KAAA,EAEJ,aACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/components/internal/Room.js

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+var react = require('@liveblocks/react');
+var React = require('react');
+var classNames = require('../../utils/class-names.js');
+
+function Room({ roomId, className, ...props }) {
+  const { useRoomInfo } = react.useLiveblocksContextBundle();
+  const { info, isLoading } = useRoomInfo(roomId);
+  const resolvedRoomName = React.useMemo(() => {
+    return info?.name ?? roomId;
+  }, [info?.name, roomId]);
+  return /* @__PURE__ */ React.createElement("span", {
+    className: classNames.classNames("lb-name lb-room", className),
+    "data-loading": isLoading ? "" : void 0,
+    ...props
+  }, isLoading ? null : resolvedRoomName);
+}
+
+exports.Room = Room;
+//# sourceMappingURL=Room.js.map

package/dist/components/internal/Room.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Room.js","sources":["../../../src/components/internal/Room.tsx"],"sourcesContent":["\"use client\";\n\nimport { useLiveblocksContextBundle } from \"@liveblocks/react\";\nimport type { ComponentProps } from \"react\";\nimport React, { useMemo } from \"react\";\n\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface RoomProps extends ComponentProps<\"span\"> {\n  roomId: string;\n}\n\nexport function Room({ roomId, className, ...props }: RoomProps) {\n  const { useRoomInfo } = useLiveblocksContextBundle();\n  const { info, isLoading } = useRoomInfo(roomId);\n  const resolvedRoomName = useMemo(() => {\n    return info?.name ?? roomId;\n  }, [info?.name, roomId]);\n\n  return (\n    <span\n      className={classNames(\"lb-name lb-room\", className)}\n      data-loading={isLoading ? \"\" : undefined}\n      {...props}\n    >\n      {isLoading ? null : resolvedRoomName}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAYO;AACL;AACA;AACA;AACE;AAAqB;AAGvB;AACG;AACmD;AACnB;AAC3B;AAKV;;"}

package/dist/components/internal/Room.mjs

@@ -0,0 +1,20 @@
+'use client';
+import { useLiveblocksContextBundle } from '@liveblocks/react';
+import React__default, { useMemo } from 'react';
+import { classNames } from '../../utils/class-names.mjs';
+
+function Room({ roomId, className, ...props }) {
+  const { useRoomInfo } = useLiveblocksContextBundle();
+  const { info, isLoading } = useRoomInfo(roomId);
+  const resolvedRoomName = useMemo(() => {
+    return info?.name ?? roomId;
+  }, [info?.name, roomId]);
+  return /* @__PURE__ */ React__default.createElement("span", {
+    className: classNames("lb-name lb-room", className),
+    "data-loading": isLoading ? "" : void 0,
+    ...props
+  }, isLoading ? null : resolvedRoomName);
+}
+
+export { Room };
+//# sourceMappingURL=Room.mjs.map

package/dist/components/internal/Room.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Room.mjs","sources":["../../../src/components/internal/Room.tsx"],"sourcesContent":["\"use client\";\n\nimport { useLiveblocksContextBundle } from \"@liveblocks/react\";\nimport type { ComponentProps } from \"react\";\nimport React, { useMemo } from \"react\";\n\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface RoomProps extends ComponentProps<\"span\"> {\n  roomId: string;\n}\n\nexport function Room({ roomId, className, ...props }: RoomProps) {\n  const { useRoomInfo } = useLiveblocksContextBundle();\n  const { info, isLoading } = useRoomInfo(roomId);\n  const resolvedRoomName = useMemo(() => {\n    return info?.name ?? roomId;\n  }, [info?.name, roomId]);\n\n  return (\n    <span\n      className={classNames(\"lb-name lb-room\", className)}\n      data-loading={isLoading ? \"\" : undefined}\n      {...props}\n    >\n      {isLoading ? null : resolvedRoomName}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;;;AAYO;AACL;AACA;AACA;AACE;AAAqB;AAGvB;AACG;AACmD;AACnB;AAC3B;AAKV;;"}

package/dist/components/internal/Tooltip.js

@@ -0,0 +1,91 @@
+'use client';
+'use strict';
+
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
+var React = require('react');
+var config = require('../../config.js');
+var constants = require('../../constants.js');
+var classNames = require('../../utils/class-names.js');
+var isApple = require('../../utils/is-apple.js');
+
+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 TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TooltipPrimitive);
+
+const KEYS = {
+  alt: () => ({ title: "Alt", key: "\u2325" }),
+  mod: () => isApple.isApple() ? { title: "Command", key: "\u2318" } : { title: "Ctrl", key: "\u2303" },
+  shift: () => {
+    return { title: "Shift", key: "\u21E7" };
+  },
+  enter: () => {
+    return { title: "Enter", key: "\u23CE" };
+  }
+};
+const Tooltip = React.forwardRef(
+  ({ children, content, multiline, className, ...props }, forwardedRef) => {
+    const { portalContainer } = config.useLiveblocksUIConfig();
+    return /* @__PURE__ */ React.createElement(TooltipPrimitive__namespace.Root, {
+      disableHoverableContent: true
+    }, /* @__PURE__ */ React.createElement(TooltipPrimitive__namespace.Trigger, {
+      asChild: true,
+      ref: forwardedRef
+    }, children), /* @__PURE__ */ React.createElement(TooltipPrimitive__namespace.Portal, {
+      container: portalContainer
+    }, /* @__PURE__ */ React.createElement(TooltipPrimitive__namespace.Content, {
+      className: classNames.classNames(
+        "lb-root lb-portal lb-tooltip",
+        multiline && "lb-tooltip:multiline",
+        className
+      ),
+      side: "top",
+      align: "center",
+      sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
+      collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
+      ...props
+    }, content)));
+  }
+);
+const ShortcutTooltip = React.forwardRef(({ children, content, shortcut, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React.createElement(Tooltip, {
+    content: /* @__PURE__ */ React.createElement(React.Fragment, null, content, shortcut && /* @__PURE__ */ React.createElement("kbd", {
+      className: "lb-tooltip-shortcut"
+    }, shortcut)),
+    ...props,
+    ref: forwardedRef
+  }, children);
+});
+function ShortcutTooltipKey({
+  name,
+  ...props
+}) {
+  const { title, key } = React.useMemo(() => KEYS[name]?.(), [name]);
+  return /* @__PURE__ */ React.createElement("abbr", {
+    title,
+    ...props
+  }, key);
+}
+
+Object.defineProperty(exports, 'TooltipProvider', {
+  enumerable: true,
+  get: function () { return TooltipPrimitive.TooltipProvider; }
+});
+exports.ShortcutTooltip = ShortcutTooltip;
+exports.ShortcutTooltipKey = ShortcutTooltipKey;
+exports.Tooltip = Tooltip;
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/internal/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/internal/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport React, { forwardRef, useMemo } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { classNames } from \"../../utils/class-names\";\nimport { isApple } from \"../../utils/is-apple\";\n\nconst KEYS = {\n  alt: () => ({ title: \"Alt\", key: \"⌥\" }),\n  mod: () =>\n    isApple() ? { title: \"Command\", key: \"⌘\" } : { title: \"Ctrl\", key: \"⌃\" },\n  shift: () => {\n    return { title: \"Shift\", key: \"⇧\" };\n  },\n  enter: () => {\n    return { title: \"Enter\", key: \"⏎\" };\n  },\n} as const;\n\nexport interface TooltipProps\n  extends Pick<TooltipPrimitive.TooltipTriggerProps, \"children\">,\n    Omit<TooltipPrimitive.TooltipContentProps, \"content\"> {\n  content: ReactNode;\n  multiline?: boolean;\n}\n\nexport interface ShortcutTooltipProps extends TooltipProps {\n  shortcut?: ReactNode;\n}\n\nexport interface ShortcutTooltipKeyProps extends ComponentProps<\"abbr\"> {\n  name: keyof typeof KEYS;\n}\n\nexport const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(\n  ({ children, content, multiline, className, ...props }, forwardedRef) => {\n    const { portalContainer } = useLiveblocksUIConfig();\n\n    return (\n      <TooltipPrimitive.Root disableHoverableContent>\n        <TooltipPrimitive.Trigger asChild ref={forwardedRef}>\n          {children}\n        </TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={portalContainer}>\n          <TooltipPrimitive.Content\n            className={classNames(\n              \"lb-root lb-portal lb-tooltip\",\n              multiline && \"lb-tooltip:multiline\",\n              className\n            )}\n            side=\"top\"\n            align=\"center\"\n            sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            {...props}\n          >\n            {content}\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    );\n  }\n);\n\nexport const ShortcutTooltip = forwardRef<\n  HTMLButtonElement,\n  ShortcutTooltipProps\n>(({ children, content, shortcut, ...props }, forwardedRef) => {\n  return (\n    <Tooltip\n      content={\n        <>\n          {content}\n          {shortcut && <kbd className=\"lb-tooltip-shortcut\">{shortcut}</kbd>}\n        </>\n      }\n      {...props}\n      ref={forwardedRef}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n\nexport function ShortcutTooltipKey({\n  name,\n  ...props\n}: ShortcutTooltipKeyProps) {\n  const { title, key } = useMemo(() => KEYS[name]?.(), [name]);\n\n  return (\n    <abbr title={title} {...props}>\n      {key}\n    </abbr>\n  );\n}\n\nexport { TooltipProvider } from \"@radix-ui/react-tooltip\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;AAAa;AAC0B;AAEoC;AAEvE;AAAkC;AACpC;AAEE;AAAkC;AAEtC;AAiBO;AAAgB;AAEnB;AAEA;AACG;AAA6C;AAC3C;AAAgC;AAAM;AAGtC;AAAmC;AACjC;AACY;AACT;AACa;AACb;AACF;AACK;AACC;AACM;AACM;AACd;AAKV;AAGN;AAEa;AAIX;AACG;AAImB;AAAc;AAC9B;AAEE;AACC;AAKX;AAEO;AAA4B;AACjC;AAEF;AACE;AAEA;AACG;AAAK;AAAkB;AAI5B;;;;;;;;"}

package/dist/components/internal/Tooltip.mjs

@@ -0,0 +1,65 @@
+'use client';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+export { TooltipProvider } from '@radix-ui/react-tooltip';
+import React__default, { forwardRef, useMemo } from 'react';
+import { useLiveblocksUIConfig } from '../../config.mjs';
+import { FLOATING_ELEMENT_SIDE_OFFSET, FLOATING_ELEMENT_COLLISION_PADDING } from '../../constants.mjs';
+import { classNames } from '../../utils/class-names.mjs';
+import { isApple } from '../../utils/is-apple.mjs';
+
+const KEYS = {
+  alt: () => ({ title: "Alt", key: "\u2325" }),
+  mod: () => isApple() ? { title: "Command", key: "\u2318" } : { title: "Ctrl", key: "\u2303" },
+  shift: () => {
+    return { title: "Shift", key: "\u21E7" };
+  },
+  enter: () => {
+    return { title: "Enter", key: "\u23CE" };
+  }
+};
+const Tooltip = forwardRef(
+  ({ children, content, multiline, className, ...props }, forwardedRef) => {
+    const { portalContainer } = useLiveblocksUIConfig();
+    return /* @__PURE__ */ React__default.createElement(TooltipPrimitive.Root, {
+      disableHoverableContent: true
+    }, /* @__PURE__ */ React__default.createElement(TooltipPrimitive.Trigger, {
+      asChild: true,
+      ref: forwardedRef
+    }, children), /* @__PURE__ */ React__default.createElement(TooltipPrimitive.Portal, {
+      container: portalContainer
+    }, /* @__PURE__ */ React__default.createElement(TooltipPrimitive.Content, {
+      className: classNames(
+        "lb-root lb-portal lb-tooltip",
+        multiline && "lb-tooltip:multiline",
+        className
+      ),
+      side: "top",
+      align: "center",
+      sideOffset: FLOATING_ELEMENT_SIDE_OFFSET,
+      collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
+      ...props
+    }, content)));
+  }
+);
+const ShortcutTooltip = forwardRef(({ children, content, shortcut, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React__default.createElement(Tooltip, {
+    content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, content, shortcut && /* @__PURE__ */ React__default.createElement("kbd", {
+      className: "lb-tooltip-shortcut"
+    }, shortcut)),
+    ...props,
+    ref: forwardedRef
+  }, children);
+});
+function ShortcutTooltipKey({
+  name,
+  ...props
+}) {
+  const { title, key } = useMemo(() => KEYS[name]?.(), [name]);
+  return /* @__PURE__ */ React__default.createElement("abbr", {
+    title,
+    ...props
+  }, key);
+}
+
+export { ShortcutTooltip, ShortcutTooltipKey, Tooltip };
+//# sourceMappingURL=Tooltip.mjs.map

package/dist/components/internal/Tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.mjs","sources":["../../../src/components/internal/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport React, { forwardRef, useMemo } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { classNames } from \"../../utils/class-names\";\nimport { isApple } from \"../../utils/is-apple\";\n\nconst KEYS = {\n  alt: () => ({ title: \"Alt\", key: \"⌥\" }),\n  mod: () =>\n    isApple() ? { title: \"Command\", key: \"⌘\" } : { title: \"Ctrl\", key: \"⌃\" },\n  shift: () => {\n    return { title: \"Shift\", key: \"⇧\" };\n  },\n  enter: () => {\n    return { title: \"Enter\", key: \"⏎\" };\n  },\n} as const;\n\nexport interface TooltipProps\n  extends Pick<TooltipPrimitive.TooltipTriggerProps, \"children\">,\n    Omit<TooltipPrimitive.TooltipContentProps, \"content\"> {\n  content: ReactNode;\n  multiline?: boolean;\n}\n\nexport interface ShortcutTooltipProps extends TooltipProps {\n  shortcut?: ReactNode;\n}\n\nexport interface ShortcutTooltipKeyProps extends ComponentProps<\"abbr\"> {\n  name: keyof typeof KEYS;\n}\n\nexport const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(\n  ({ children, content, multiline, className, ...props }, forwardedRef) => {\n    const { portalContainer } = useLiveblocksUIConfig();\n\n    return (\n      <TooltipPrimitive.Root disableHoverableContent>\n        <TooltipPrimitive.Trigger asChild ref={forwardedRef}>\n          {children}\n        </TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={portalContainer}>\n          <TooltipPrimitive.Content\n            className={classNames(\n              \"lb-root lb-portal lb-tooltip\",\n              multiline && \"lb-tooltip:multiline\",\n              className\n            )}\n            side=\"top\"\n            align=\"center\"\n            sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            {...props}\n          >\n            {content}\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    );\n  }\n);\n\nexport const ShortcutTooltip = forwardRef<\n  HTMLButtonElement,\n  ShortcutTooltipProps\n>(({ children, content, shortcut, ...props }, forwardedRef) => {\n  return (\n    <Tooltip\n      content={\n        <>\n          {content}\n          {shortcut && <kbd className=\"lb-tooltip-shortcut\">{shortcut}</kbd>}\n        </>\n      }\n      {...props}\n      ref={forwardedRef}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n\nexport function ShortcutTooltipKey({\n  name,\n  ...props\n}: ShortcutTooltipKeyProps) {\n  const { title, key } = useMemo(() => KEYS[name]?.(), [name]);\n\n  return (\n    <abbr title={title} {...props}>\n      {key}\n    </abbr>\n  );\n}\n\nexport { TooltipProvider } from \"@radix-ui/react-tooltip\";\n"],"names":[],"mappings":";;;;;;;;;AAcA;AAAa;AAC0B;AAEoC;AAEvE;AAAkC;AACpC;AAEE;AAAkC;AAEtC;AAiBO;AAAgB;AAEnB;AAEA;AACG;AAA6C;AAC3C;AAAgC;AAAM;AAGtC;AAAmC;AACjC;AACY;AACT;AACa;AACb;AACF;AACK;AACC;AACM;AACM;AACd;AAKV;AAGN;AAEa;AAIX;AACG;AAImB;AAAc;AAC9B;AAEE;AACC;AAKX;AAEO;AAA4B;AACjC;AAEF;AACE;AAEA;AACG;AAAK;AAAkB;AAI5B;;"}

package/dist/components/internal/User.js

@@ -0,0 +1,41 @@
+'use client';
+'use strict';
+
+var react = require('@liveblocks/react');
+var React = require('react');
+var overrides = require('../../overrides.js');
+var shared = require('../../shared.js');
+var capitalize = require('../../utils/capitalize.js');
+var classNames = require('../../utils/class-names.js');
+
+function User({
+  userId,
+  replaceSelf,
+  capitalize: shouldCapitalize,
+  className,
+  ...props
+}) {
+  const currentId = shared.useCurrentUserId();
+  const { user, isLoading } = react.useUser(userId);
+  const $ = overrides.useOverrides();
+  const resolvedUserName = React.useMemo(() => {
+    const name = replaceSelf && currentId === userId ? $.USER_SELF : user?.name ?? $.USER_UNKNOWN;
+    return shouldCapitalize ? capitalize.capitalize(name) : name;
+  }, [
+    replaceSelf,
+    currentId,
+    userId,
+    $.USER_SELF,
+    $.USER_UNKNOWN,
+    user?.name,
+    shouldCapitalize
+  ]);
+  return /* @__PURE__ */ React.createElement("span", {
+    className: classNames.classNames("lb-name lb-user", className),
+    "data-loading": isLoading ? "" : void 0,
+    ...props
+  }, isLoading ? null : resolvedUserName);
+}
+
+exports.User = User;
+//# sourceMappingURL=User.js.map

package/dist/components/internal/User.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"User.js","sources":["../../../src/components/internal/User.tsx"],"sourcesContent":["\"use client\";\n\nimport { useUser } from \"@liveblocks/react\";\nimport type { ComponentProps } from \"react\";\nimport React, { useMemo } from \"react\";\n\nimport { useOverrides } from \"../../overrides\";\nimport { useCurrentUserId } from \"../../shared\";\nimport { capitalize } from \"../../utils/capitalize\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface UserProps extends ComponentProps<\"span\"> {\n  /**\n   * The user ID to display the user name for.\n   */\n  userId: string;\n\n  /**\n   * Whether to replace the user name with \"you\" ($.USER_SELF) for the current user.\n   */\n  replaceSelf?: boolean;\n\n  /**\n   * Whether to capitalize the user name.\n   */\n  capitalize?: boolean;\n}\n\nexport function User({\n  userId,\n  replaceSelf,\n  capitalize: shouldCapitalize,\n  className,\n  ...props\n}: UserProps) {\n  const currentId = useCurrentUserId();\n  const { user, isLoading } = useUser(userId);\n  const $ = useOverrides();\n  const resolvedUserName = useMemo(() => {\n    const name =\n      replaceSelf && currentId === userId\n        ? $.USER_SELF\n        : user?.name ?? $.USER_UNKNOWN;\n\n    return shouldCapitalize ? capitalize(name) : name;\n  }, [\n    replaceSelf,\n    currentId,\n    userId,\n    $.USER_SELF,\n    $.USER_UNKNOWN,\n    user?.name,\n    shouldCapitalize,\n  ]);\n\n  return (\n    <span\n      className={classNames(\"lb-name lb-user\", className)}\n      data-loading={isLoading ? \"\" : undefined}\n      {...props}\n    >\n      {isLoading ? null : resolvedUserName}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AA4BO;AAAc;AACnB;AACA;AACY;AACZ;AAEF;AACE;AACA;AACA;AACA;AACE;AAKA;AAA6C;AAC5C;AACD;AACA;AACA;AACE;AACA;AACI;AACN;AAGF;AACG;AACmD;AACnB;AAC3B;AAKV;;"}

package/dist/components/internal/User.mjs

@@ -0,0 +1,39 @@
+'use client';
+import { useUser } from '@liveblocks/react';
+import React__default, { useMemo } from 'react';
+import { useOverrides } from '../../overrides.mjs';
+import { useCurrentUserId } from '../../shared.mjs';
+import { capitalize } from '../../utils/capitalize.mjs';
+import { classNames } from '../../utils/class-names.mjs';
+
+function User({
+  userId,
+  replaceSelf,
+  capitalize: shouldCapitalize,
+  className,
+  ...props
+}) {
+  const currentId = useCurrentUserId();
+  const { user, isLoading } = useUser(userId);
+  const $ = useOverrides();
+  const resolvedUserName = useMemo(() => {
+    const name = replaceSelf && currentId === userId ? $.USER_SELF : user?.name ?? $.USER_UNKNOWN;
+    return shouldCapitalize ? capitalize(name) : name;
+  }, [
+    replaceSelf,
+    currentId,
+    userId,
+    $.USER_SELF,
+    $.USER_UNKNOWN,
+    user?.name,
+    shouldCapitalize
+  ]);
+  return /* @__PURE__ */ React__default.createElement("span", {
+    className: classNames("lb-name lb-user", className),
+    "data-loading": isLoading ? "" : void 0,
+    ...props
+  }, isLoading ? null : resolvedUserName);
+}
+
+export { User };
+//# sourceMappingURL=User.mjs.map

package/dist/components/internal/User.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"User.mjs","sources":["../../../src/components/internal/User.tsx"],"sourcesContent":["\"use client\";\n\nimport { useUser } from \"@liveblocks/react\";\nimport type { ComponentProps } from \"react\";\nimport React, { useMemo } from \"react\";\n\nimport { useOverrides } from \"../../overrides\";\nimport { useCurrentUserId } from \"../../shared\";\nimport { capitalize } from \"../../utils/capitalize\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface UserProps extends ComponentProps<\"span\"> {\n  /**\n   * The user ID to display the user name for.\n   */\n  userId: string;\n\n  /**\n   * Whether to replace the user name with \"you\" ($.USER_SELF) for the current user.\n   */\n  replaceSelf?: boolean;\n\n  /**\n   * Whether to capitalize the user name.\n   */\n  capitalize?: boolean;\n}\n\nexport function User({\n  userId,\n  replaceSelf,\n  capitalize: shouldCapitalize,\n  className,\n  ...props\n}: UserProps) {\n  const currentId = useCurrentUserId();\n  const { user, isLoading } = useUser(userId);\n  const $ = useOverrides();\n  const resolvedUserName = useMemo(() => {\n    const name =\n      replaceSelf && currentId === userId\n        ? $.USER_SELF\n        : user?.name ?? $.USER_UNKNOWN;\n\n    return shouldCapitalize ? capitalize(name) : name;\n  }, [\n    replaceSelf,\n    currentId,\n    userId,\n    $.USER_SELF,\n    $.USER_UNKNOWN,\n    user?.name,\n    shouldCapitalize,\n  ]);\n\n  return (\n    <span\n      className={classNames(\"lb-name lb-user\", className)}\n      data-loading={isLoading ? \"\" : undefined}\n      {...props}\n    >\n      {isLoading ? null : resolvedUserName}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AA4BO;AAAc;AACnB;AACA;AACY;AACZ;AAEF;AACE;AACA;AACA;AACA;AACE;AAKA;AAA6C;AAC5C;AACD;AACA;AACA;AACE;AACA;AACI;AACN;AAGF;AACG;AACmD;AACnB;AAC3B;AAKV;;"}

package/dist/components.js

@@ -0,0 +1,64 @@
+'use client';
+'use strict';
+
+var React = require('react');
+
+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 React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const defaultComponents = {
+  Anchor: "a"
+};
+const ComponentsContext = React.createContext(
+  void 0
+);
+function useComponents(components) {
+  const contextComponents = React.useContext(ComponentsContext);
+  return React.useMemo(
+    () => ({
+      ...defaultComponents,
+      ...contextComponents,
+      ...components
+    }),
+    [contextComponents, components]
+  );
+}
+function ComponentsProvider({
+  children,
+  components: providerComponents
+}) {
+  const contextComponents = React.useContext(ComponentsContext);
+  const components = React.useMemo(
+    () => ({
+      ...defaultComponents,
+      ...contextComponents,
+      ...providerComponents
+    }),
+    [contextComponents, providerComponents]
+  );
+  return /* @__PURE__ */ React__namespace.createElement(ComponentsContext.Provider, {
+    value: components
+  }, children);
+}
+
+exports.ComponentsContext = ComponentsContext;
+exports.ComponentsProvider = ComponentsProvider;
+exports.defaultComponents = defaultComponents;
+exports.useComponents = useComponents;
+//# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sources":["../src/components.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  PropsWithChildren,\n} from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\nimport * as React from \"react\";\n\nexport interface GlobalComponents {\n  Anchor: ComponentType<ComponentPropsWithoutRef<\"a\">> | \"a\";\n}\n\nexport type Components = GlobalComponents;\n\ntype ComponentsProviderProps = PropsWithChildren<{\n  components?: Partial<Components>;\n}>;\n\nexport const defaultComponents: Components = {\n  Anchor: \"a\",\n};\n\nexport const ComponentsContext = createContext<Components | undefined>(\n  undefined\n);\n\nexport function useComponents(components?: Partial<Components>): Components {\n  const contextComponents = useContext(ComponentsContext);\n\n  return useMemo(\n    () => ({\n      ...defaultComponents,\n      ...contextComponents,\n      ...components,\n    }),\n    [contextComponents, components]\n  );\n}\n\nexport function ComponentsProvider({\n  children,\n  components: providerComponents,\n}: ComponentsProviderProps) {\n  const contextComponents = useContext(ComponentsContext);\n  const components = useMemo(\n    () => ({\n      ...defaultComponents,\n      ...contextComponents,\n      ...providerComponents,\n    }),\n    [contextComponents, providerComponents]\n  );\n\n  return (\n    <ComponentsContext.Provider value={components}>\n      {children}\n    </ComponentsContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoBO;AAAsC;AAE7C;AAEO;AAA0B;AAEjC;AAEO;AACL;AAEA;AAAO;AACE;AACF;AACA;AACA;AACL;AAC8B;AAElC;AAEO;AAA4B;AACjC;AAEF;AACE;AACA;AAAmB;AACV;AACF;AACA;AACA;AACL;AACsC;AAGxC;AACG;AAAkC;AAIvC;;;;;"}