@liveblocks/react-ui 1.12.0-initial1

package/dist/primitives/index.d.ts

@@ -0,0 +1,502 @@
+import * as React from 'react';
+import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentType, FormEvent, PropsWithChildren } from 'react';
+import { CommentBody as CommentBody$1 } from '@liveblocks/core';
+
+declare type Direction = "ltr" | "rtl";
+declare type SlotProp = {
+    /**
+     * Replace the rendered element by the one passed as a child.
+     */
+    asChild?: boolean;
+};
+declare type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
+
+declare type CommentMentionProps = ComponentPropsWithSlot<"span">;
+declare type CommentBodyMentionProps = {
+    /**
+     * The mention's user ID.
+     */
+    userId: string;
+};
+declare type CommentLinkProps = ComponentPropsWithSlot<"a">;
+interface CommentBodyLinkProps {
+    /**
+     * The link's absolute URL.
+     *
+     * @example "https://example.com"
+     */
+    href: string;
+    /**
+     * The link's content.
+     *
+     * @example "www.example.com", "a link", etc.
+     */
+    children: ReactNode;
+}
+interface CommentBodyComponents {
+    /**
+     * The component used to display mentions.
+     */
+    Mention: ComponentType<CommentBodyMentionProps>;
+    /**
+     * The component used to display links.
+     */
+    Link: ComponentType<CommentBodyLinkProps>;
+}
+interface CommentBodyProps extends Omit<ComponentPropsWithSlot<"div">, "children"> {
+    /**
+     * The comment body to display.
+     * If not defined, the component will render `null`.
+     */
+    body?: CommentBody$1;
+    /**
+     * The components displayed within the comment body.
+     */
+    components?: Partial<CommentBodyComponents>;
+}
+
+/**
+ * Displays mentions within `Comment.Body`.
+ *
+ * @example
+ * <Comment.Mention>@{userId}</Comment.Mention>
+ */
+declare const CommentMention: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLSpanElement>>;
+/**
+ * Displays links within `Comment.Body`.
+ *
+ * @example
+ * <Comment.Link href={href}>{children}</Comment.Link>
+ */
+declare const CommentLink: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Displays a comment body.
+ *
+ * @example
+ * <Comment.Body body={comment.body} />
+ */
+declare const CommentBody: React__default.ForwardRefExoticComponent<CommentBodyProps & React__default.RefAttributes<HTMLDivElement>>;
+
+declare namespace index$2 {
+  export {
+    CommentBody as Body,
+    CommentLink as Link,
+    CommentMention as Mention,
+  };
+}
+
+interface ComposerEditorMentionProps {
+    /**
+     * Whether the mention is selected.
+     */
+    isSelected: boolean;
+    /**
+     * The mention's user ID.
+     */
+    userId: string;
+}
+interface ComposerEditorLinkProps {
+    /**
+     * The link's absolute URL.
+     *
+     * @example "https://example.com"
+     */
+    href: string;
+    /**
+     * The link's content.
+     *
+     * @example "www.example.com", "a link", etc.
+     */
+    children: ReactNode;
+}
+declare type ComposerEditorMentionSuggestionsProps = {
+    /**
+     * The list of suggested user IDs.
+     */
+    userIds: string[];
+    /**
+     * The currently selected user ID.
+     */
+    selectedUserId?: string;
+};
+declare type ComposerMentionProps = ComponentPropsWithSlot<"span">;
+declare type ComposerLinkProps = ComponentPropsWithSlot<"a">;
+declare type ComposerSuggestionsListProps = ComponentPropsWithSlot<"ul">;
+interface ComposerSuggestionsListItemProps extends ComponentPropsWithSlot<"li"> {
+    /**
+     * The suggestion's value.
+     */
+    value: string;
+}
+interface ComposerEditorComponents {
+    /**
+     * The component used to display mentions.
+     */
+    Mention: ComponentType<ComposerEditorMentionProps>;
+    /**
+     * The component used to display mention suggestions.
+     */
+    MentionSuggestions: ComponentType<ComposerEditorMentionSuggestionsProps>;
+    /**
+     * The component used to display links.
+     */
+    Link: ComponentType<ComposerEditorLinkProps>;
+}
+interface ComposerEditorProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue"> {
+    /**
+     * The reading direction of the editor and related elements.
+     */
+    dir?: Direction;
+    /**
+     * The editor's initial value.
+     */
+    defaultValue?: CommentBody$1;
+    /**
+     * The text to display when the editor is empty.
+     */
+    placeholder?: string;
+    /**
+     * Whether the editor is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether to focus the editor on mount.
+     */
+    autoFocus?: boolean;
+    /**
+     * The components displayed within the editor.
+     */
+    components?: Partial<ComposerEditorComponents>;
+}
+interface ComposerFormProps extends ComponentPropsWithSlot<"form"> {
+    /**
+     * The event handler called when the form is submitted.
+     */
+    onComposerSubmit?: (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => Promise<void> | void;
+}
+declare type ComposerSubmitProps = ComponentPropsWithSlot<"button">;
+interface ComposerSubmitComment {
+    /**
+     * The submitted comment's body.
+     */
+    body: CommentBody$1;
+}
+
+/**
+ * Displays mentions within `Composer.Editor`.
+ *
+ * @example
+ * <Composer.Mention>@{userId}</Composer.Mention>
+ */
+declare const ComposerMention: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLSpanElement>>;
+/**
+ * Displays links within `Composer.Editor`.
+ *
+ * @example
+ * <Composer.Link href={href}>{children}</Composer.Link>
+ */
+declare const ComposerLink: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Contains suggestions within `Composer.Editor`.
+ */
+declare const ComposerSuggestions: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLDivElement>>;
+/**
+ * Displays a list of suggestions within `Composer.Editor`.
+ *
+ * @example
+ * <Composer.SuggestionsList>
+ *   {userIds.map((userId) => (
+ *     <Composer.SuggestionsListItem key={userId} value={userId}>
+ *       @{userId}
+ *     </Composer.SuggestionsListItem>
+ *   ))}
+ * </Composer.SuggestionsList>
+ */
+declare const ComposerSuggestionsList: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLUListElement>>;
+/**
+ * Displays a suggestion within `Composer.SuggestionsList`.
+ *
+ * @example
+ * <Composer.SuggestionsListItem key={userId} value={userId}>
+ *   @{userId}
+ * </Composer.SuggestionsListItem>
+ */
+declare const ComposerSuggestionsListItem: React__default.ForwardRefExoticComponent<ComposerSuggestionsListItemProps & React__default.RefAttributes<HTMLLIElement>>;
+/**
+ * Displays the composer's editor.
+ *
+ * @example
+ * <Composer.Editor placeholder="Write a comment…" />
+ */
+declare const ComposerEditor: React__default.ForwardRefExoticComponent<ComposerEditorProps & React__default.RefAttributes<HTMLDivElement>>;
+/**
+ * Surrounds the composer's content and handles submissions.
+ *
+ * @example
+ * <Composer.Form onComposerSubmit={({ body }) => {}}>
+ *	 <Composer.Editor />
+ *   <Composer.Submit />
+ * </Composer.Form>
+ */
+declare const ComposerForm: React__default.ForwardRefExoticComponent<ComposerFormProps & React__default.RefAttributes<HTMLFormElement>>;
+/**
+ * A button to submit the composer.
+ *
+ * @example
+ * <Composer.Submit>Send</Composer.Submit>
+ */
+declare const ComposerSubmit: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLButtonElement>>;
+
+declare namespace index$1 {
+  export {
+    ComposerEditor as Editor,
+    ComposerForm as Form,
+    ComposerLink as Link,
+    ComposerMention as Mention,
+    ComposerSubmit as Submit,
+    ComposerSuggestions as Suggestions,
+    ComposerSuggestionsList as SuggestionsList,
+    ComposerSuggestionsListItem as SuggestionsListItem,
+  };
+}
+
+declare type ComposerContext = {
+    /**
+     * Whether the editor is currently focused.
+     */
+    isFocused: boolean;
+    /**
+     * Whether the editor is currently empty.
+     */
+    isEmpty: boolean;
+    /**
+     * Submit the composer programmatically.
+     */
+    submit: () => void;
+    /**
+     * Clear the editor programmatically.
+     */
+    clear: () => void;
+    /**
+     * Select the editor programmatically.
+     */
+    select: () => void;
+    /**
+     * Focus the editor programmatically.
+     */
+    focus: () => void;
+    /**
+     * Blur the editor programmatically.
+     */
+    blur: () => void;
+    /**
+     * Start creating a mention at the current selection.
+     */
+    createMention: () => void;
+    /**
+     * Insert text at the current selection.
+     */
+    insertText: (text: string) => void;
+};
+declare const ComposerContext: React.Context<ComposerContext | null>;
+declare function useComposer(): ComposerContext;
+
+declare type EmojiPickerContentLoadingProps = ComponentPropsWithoutRef<"div">;
+declare type EmojiPickerContentEmptyProps = ComponentPropsWithoutRef<"div">;
+declare type EmojiPickerContentGridProps = ComponentPropsWithoutRef<"div">;
+interface EmojiPickerContentErrorProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The error.
+     */
+    error: Error;
+}
+interface EmojiPickerContentCategoryHeaderProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The category's name.
+     */
+    category: string;
+}
+declare type EmojiPickerContentEmojiRowAttributes = {
+    /**
+     * The current row's index.
+     */
+    rowIndex: number;
+    /**
+     * The current row's index within the current category.
+     */
+    categoryRowIndex: number;
+    /**
+     * The number of rows within the current category.
+     */
+    categoryRowsCount: number;
+};
+interface EmojiPickerContentRowProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Attributes related to the current row.
+     */
+    attributes: EmojiPickerContentEmojiRowAttributes;
+}
+interface EmojiPickerContentEmojiProps extends ComponentPropsWithoutRef<"button"> {
+    /**
+     * The emoji to be displayed.
+     */
+    emoji: string;
+}
+interface EmojiPickerRootProps extends PropsWithChildren {
+    /**
+     * The number of emojis per row.
+     */
+    columns?: number;
+    /**
+     * The event handler called when an emoji is selected.
+     */
+    onEmojiSelect?: (emoji: string) => void;
+    /**
+     * The locale used when getting emoji data.
+     */
+    locale?: string;
+}
+interface EmojiPickerContentComponents {
+    /**
+     * The component displayed when the emoji data is loading.
+     */
+    Loading: ComponentType<EmojiPickerContentLoadingProps>;
+    /**
+     * The component displayed when there are no results.
+     */
+    Empty: ComponentType<EmojiPickerContentEmptyProps>;
+    /**
+     * The component displayed when there was an error while getting the emoji data.
+     */
+    Error: ComponentType<EmojiPickerContentErrorProps>;
+    /**
+     * The component used to display category headers.
+     */
+    CategoryHeader: ComponentType<EmojiPickerContentCategoryHeaderProps>;
+    /**
+     * The component displayed when there are emojis to display.
+     */
+    Grid: ComponentType<EmojiPickerContentGridProps>;
+    /**
+     * The component used to display rows of emojis.
+     */
+    Row: ComponentType<EmojiPickerContentRowProps>;
+    /**
+     * The component used to display emojis.
+     */
+    Emoji: ComponentType<EmojiPickerContentEmojiProps>;
+}
+interface EmojiPickerContentProps extends ComponentPropsWithSlot<"div"> {
+    /**
+     * The components displayed within the content.
+     */
+    components?: Partial<EmojiPickerContentComponents>;
+}
+declare type EmojiPickerSearchProps = ComponentPropsWithSlot<"input">;
+
+/**
+ * @private
+ * The EmojiPicker primitive is undocumented for now and subject to change,
+ * use at your own risk. If you have any feedback on it, please let us know!
+ * See how we use it in the default components to learn how to use it:
+ * https://github.com/liveblocks/liveblocks/blob/main/packages/liveblocks-react-ui/src/components/internal/EmojiPicker.tsx.
+ *
+ * Surrounds the emoji picker, it handles emoji data and coordinates
+ * `EmojiPicker.Search` and `EmojiPicker.Content`.
+ *
+ * @example
+ * <EmojiPicker.Root>
+ *   <EmojiPicker.Search />
+ *   <EmojiPicker.Content />
+ * </EmojiPicker.Root>
+ */
+declare function EmojiPickerRoot({ columns, locale, onEmojiSelect, children, }: EmojiPickerRootProps): React__default.JSX.Element;
+declare namespace EmojiPickerRoot {
+    var displayName: string;
+}
+/**
+ * @private
+ * The EmojiPicker primitive is undocumented for now and subject to change,
+ * use at your own risk. If you have any feedback on it, please let us know!
+ * See how we use it in the default components to learn how to use it:
+ * https://github.com/liveblocks/liveblocks/blob/main/packages/liveblocks-react-ui/src/components/internal/EmojiPicker.tsx.
+ *
+ * The search input of the emoji picker. It also affects the focus and selection
+ * within `EmojiPicker.Content`.
+ *
+ * @example
+ * <EmojiPicker.Search />
+ */
+declare const EmojiPickerSearch: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLInputElement>>;
+/**
+ * @private
+ * The EmojiPicker primitive is undocumented for now and subject to change,
+ * use at your own risk. If you have any feedback on it, please let us know!
+ * See how we use it in the default components to learn how to use it:
+ * https://github.com/liveblocks/liveblocks/blob/main/packages/liveblocks-react-ui/src/components/internal/EmojiPicker.tsx.
+ *
+ * The main content of the emoji picker, either displaying the emoji grid or various
+ * alternative states (loading, empty, and error).
+ *
+ * @example
+ * <EmojiPicker.Content
+ *  components={{
+ *    Loading: EmojiPickerLoading,
+ *    Empty: EmojiPickerEmpty,
+ *    Error: EmojiPickerError,
+ *    CategoryHeader: EmojiPickerCategoryHeader,
+ *    Grid: EmojiPickerGrid,
+ *    Row: EmojiPickerRow,
+ *    Emoji: EmojiPickerEmoji,
+ *  }}
+ * />
+ */
+declare const EmojiPickerContent: React__default.ForwardRefExoticComponent<EmojiPickerContentProps & React__default.RefAttributes<HTMLDivElement>>;
+
+declare namespace index {
+  export {
+    EmojiPickerContent as Content,
+    EmojiPickerRoot as Root,
+    EmojiPickerSearch as Search,
+  };
+}
+
+interface TimestampProps extends Omit<ComponentPropsWithSlot<"time">, "children" | "title"> {
+    /**
+     * The date to display.
+     */
+    date: Date | string | number;
+    /**
+     * A function to format the displayed date.
+     */
+    children?: (date: Date, locale?: string) => ReactNode;
+    /**
+     * The `title` attribute's value or a function to format it.
+     */
+    title?: string | ((date: Date, locale?: string) => string);
+    /**
+     * The interval in milliseconds at which the component will re-render.
+     * Can be set to `false` to disable re-rendering.
+     */
+    interval?: number | false;
+    /**
+     * The locale used when formatting the date.
+     */
+    locale?: string;
+}
+/**
+ * Displays a formatted date, and automatically re-renders to support relative
+ * formatting. Defaults to relative formatting for recent dates and a short
+ * absolute formatting for older ones.
+ *
+ * @example
+ * <Timestamp date={new Date()} />
+ *
+ * @example
+ * <Timestamp date={new Date()} title={(date) => date.toISOString()} interval={false}>
+ *   {(date) => date.toLocaleDateString()}
+ * </Timestamp>
+ */
+declare const Timestamp: React__default.ForwardRefExoticComponent<TimestampProps & React__default.RefAttributes<HTMLTimeElement>>;
+
+export { index$2 as Comment, CommentBodyComponents, CommentBodyLinkProps, CommentBodyMentionProps, CommentBodyProps, CommentLinkProps, CommentMentionProps, index$1 as Composer, ComposerContext, ComposerEditorComponents, ComposerEditorLinkProps, ComposerEditorMentionProps, ComposerEditorMentionSuggestionsProps, ComposerEditorProps, ComposerFormProps, ComposerLinkProps, ComposerMentionProps, ComposerSubmitComment, ComposerSubmitProps, ComposerSuggestionsListItemProps, ComposerSuggestionsListProps, index as EmojiPicker, EmojiPickerContentCategoryHeaderProps, EmojiPickerContentComponents, EmojiPickerContentEmojiProps, EmojiPickerContentEmptyProps, EmojiPickerContentErrorProps, EmojiPickerContentGridProps, EmojiPickerContentLoadingProps, EmojiPickerContentProps, EmojiPickerContentRowProps, EmojiPickerRootProps, EmojiPickerSearchProps, Timestamp, TimestampProps, useComposer };

package/dist/primitives/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var index = require('./Comment/index.js');
+var index$1 = require('./Composer/index.js');
+var contexts = require('./Composer/contexts.js');
+var index$2 = require('./EmojiPicker/index.js');
+var Timestamp = require('./Timestamp.js');
+
+
+
+exports.Comment = index;
+exports.Composer = index$1;
+exports.useComposer = contexts.useComposer;
+exports.EmojiPicker = index$2;
+exports.Timestamp = Timestamp.Timestamp;
+//# sourceMappingURL=index.js.map

package/dist/primitives/index.js.map

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

package/dist/primitives/index.mjs

@@ -0,0 +1,9 @@
+import * as index from './Comment/index.mjs';
+export { index as Comment };
+import * as index$1 from './Composer/index.mjs';
+export { index$1 as Composer };
+export { useComposer } from './Composer/contexts.mjs';
+import * as index$2 from './EmojiPicker/index.mjs';
+export { index$2 as EmojiPicker };
+export { Timestamp } from './Timestamp.mjs';
+//# sourceMappingURL=index.mjs.map

package/dist/primitives/index.mjs.map

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

package/dist/primitives/internal/Emoji.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var reactSlot = require('@radix-ui/react-slot');
+var React = require('react');
+var constants = require('../../constants.js');
+
+const Emoji = React.forwardRef(
+  ({ emoji, style, asChild, ...props }, forwardedRef) => {
+    const Component = asChild ? reactSlot.Slot : "span";
+    return /* @__PURE__ */ React.createElement(Component, {
+      role: "img",
+      "aria-label": emoji,
+      "data-emoji": emoji,
+      style: {
+        ...style,
+        fontFamily: constants.EMOJI_FONT_FAMILY,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "1em",
+        whiteSpace: "nowrap"
+      },
+      ...props,
+      ref: forwardedRef
+    }, emoji);
+  }
+);
+
+exports.Emoji = Emoji;
+//# sourceMappingURL=Emoji.js.map

package/dist/primitives/internal/Emoji.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.js","sources":["../../../src/primitives/internal/Emoji.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport React, { forwardRef } from \"react\";\n\nimport { EMOJI_FONT_FAMILY } from \"../../constants\";\nimport type { ComponentPropsWithSlot } from \"../../types\";\n\nexport interface EmojiProps extends ComponentPropsWithSlot<\"span\"> {\n  emoji: string;\n}\n\nexport const Emoji = forwardRef<HTMLSpanElement, EmojiProps>(\n  ({ emoji, style, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"span\";\n\n    return (\n      <Component\n        role=\"img\"\n        aria-label={emoji}\n        data-emoji={emoji}\n        style={{\n          ...style,\n          fontFamily: EMOJI_FONT_FAMILY,\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: \"1em\",\n          whiteSpace: \"nowrap\",\n        }}\n        {...props}\n        ref={forwardedRef}\n      >\n        {emoji}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","Slot","EMOJI_FONT_FAMILY"],"mappings":";;;;;;AAUO,MAAM,KAAQ,GAAAA,gBAAA;AAAA,EACnB,CAAC,EAAE,KAAA,EAAO,OAAO,OAAY,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACrD,IAAM,MAAA,SAAA,GAAY,UAAUC,cAAO,GAAA,MAAA,CAAA;AAEnC,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,MACC,IAAK,EAAA,KAAA;AAAA,MACL,YAAY,EAAA,KAAA;AAAA,MACZ,YAAY,EAAA,KAAA;AAAA,MACZ,KAAO,EAAA;AAAA,QACL,GAAG,KAAA;AAAA,QACH,UAAY,EAAAC,2BAAA;AAAA,QACZ,OAAS,EAAA,aAAA;AAAA,QACT,UAAY,EAAA,QAAA;AAAA,QACZ,cAAgB,EAAA,QAAA;AAAA,QAChB,KAAO,EAAA,KAAA;AAAA,QACP,UAAY,EAAA,QAAA;AAAA,OACd;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,KAAA,EAEJ,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/primitives/internal/Emoji.mjs

@@ -0,0 +1,28 @@
+import { Slot } from '@radix-ui/react-slot';
+import React__default, { forwardRef } from 'react';
+import { EMOJI_FONT_FAMILY } from '../../constants.mjs';
+
+const Emoji = forwardRef(
+  ({ emoji, style, asChild, ...props }, forwardedRef) => {
+    const Component = asChild ? Slot : "span";
+    return /* @__PURE__ */ React__default.createElement(Component, {
+      role: "img",
+      "aria-label": emoji,
+      "data-emoji": emoji,
+      style: {
+        ...style,
+        fontFamily: EMOJI_FONT_FAMILY,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "1em",
+        whiteSpace: "nowrap"
+      },
+      ...props,
+      ref: forwardedRef
+    }, emoji);
+  }
+);
+
+export { Emoji };
+//# sourceMappingURL=Emoji.mjs.map

package/dist/primitives/internal/Emoji.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.mjs","sources":["../../../src/primitives/internal/Emoji.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport React, { forwardRef } from \"react\";\n\nimport { EMOJI_FONT_FAMILY } from \"../../constants\";\nimport type { ComponentPropsWithSlot } from \"../../types\";\n\nexport interface EmojiProps extends ComponentPropsWithSlot<\"span\"> {\n  emoji: string;\n}\n\nexport const Emoji = forwardRef<HTMLSpanElement, EmojiProps>(\n  ({ emoji, style, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"span\";\n\n    return (\n      <Component\n        role=\"img\"\n        aria-label={emoji}\n        data-emoji={emoji}\n        style={{\n          ...style,\n          fontFamily: EMOJI_FONT_FAMILY,\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: \"1em\",\n          whiteSpace: \"nowrap\",\n        }}\n        {...props}\n        ref={forwardedRef}\n      >\n        {emoji}\n      </Component>\n    );\n  }\n);\n"],"names":["React"],"mappings":";;;;AAUO,MAAM,KAAQ,GAAA,UAAA;AAAA,EACnB,CAAC,EAAE,KAAA,EAAO,OAAO,OAAY,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACrD,IAAM,MAAA,SAAA,GAAY,UAAU,IAAO,GAAA,MAAA,CAAA;AAEnC,IAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,MACC,IAAK,EAAA,KAAA;AAAA,MACL,YAAY,EAAA,KAAA;AAAA,MACZ,YAAY,EAAA,KAAA;AAAA,MACZ,KAAO,EAAA;AAAA,QACL,GAAG,KAAA;AAAA,QACH,UAAY,EAAA,iBAAA;AAAA,QACZ,OAAS,EAAA,aAAA;AAAA,QACT,UAAY,EAAA,QAAA;AAAA,QACZ,cAAgB,EAAA,QAAA;AAAA,QAChB,KAAO,EAAA,KAAA;AAAA,QACP,UAAY,EAAA,QAAA;AAAA,OACd;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,KAAA,EAEJ,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/shared.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var core = require('@liveblocks/core');
+var react = require('@liveblocks/react');
+
+function useCurrentUserId() {
+  const roomContextBundle = react.useRoomContextBundleOrNull__();
+  const liveblocksContextBundle = react.useLiveblocksContextBundleOrNull__();
+  if (roomContextBundle !== null) {
+    return roomContextBundle[core.kInternal].useCurrentUserIdFromRoom();
+  } else if (liveblocksContextBundle !== null) {
+    return liveblocksContextBundle[core.kInternal].useCurrentUserIdFromClient();
+  } else {
+    core.raise(
+      "LiveblocksProvider or RoomProvider are missing from the React tree."
+    );
+  }
+}
+
+exports.useCurrentUserId = useCurrentUserId;
+//# sourceMappingURL=shared.js.map

package/dist/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sources":["../src/shared.ts"],"sourcesContent":["import { kInternal, raise } from \"@liveblocks/core\";\nimport {\n  useLiveblocksContextBundleOrNull__,\n  useRoomContextBundleOrNull__,\n} from \"@liveblocks/react\";\n\nexport function useCurrentUserId(): string | null {\n  const roomContextBundle = useRoomContextBundleOrNull__();\n  const liveblocksContextBundle = useLiveblocksContextBundleOrNull__();\n\n  if (roomContextBundle !== null) {\n    return roomContextBundle[kInternal].useCurrentUserIdFromRoom();\n  } else if (liveblocksContextBundle !== null) {\n    return liveblocksContextBundle[kInternal].useCurrentUserIdFromClient();\n  } else {\n    raise(\n      \"LiveblocksProvider or RoomProvider are missing from the React tree.\"\n    );\n  }\n}\n"],"names":["useRoomContextBundleOrNull__","useLiveblocksContextBundleOrNull__","kInternal","raise"],"mappings":";;;;;AAMO,SAAS,gBAAkC,GAAA;AAChD,EAAA,MAAM,oBAAoBA,kCAA6B,EAAA,CAAA;AACvD,EAAA,MAAM,0BAA0BC,wCAAmC,EAAA,CAAA;AAEnE,EAAA,IAAI,sBAAsB,IAAM,EAAA;AAC9B,IAAO,OAAA,iBAAA,CAAkBC,gBAAW,wBAAyB,EAAA,CAAA;AAAA,GAC/D,MAAA,IAAW,4BAA4B,IAAM,EAAA;AAC3C,IAAO,OAAA,uBAAA,CAAwBA,gBAAW,0BAA2B,EAAA,CAAA;AAAA,GAChE,MAAA;AACL,IAAAC,UAAA;AAAA,MACE,qEAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF;;;;"}

package/dist/shared.mjs

@@ -0,0 +1,19 @@
+import { kInternal, raise } from '@liveblocks/core';
+import { useRoomContextBundleOrNull__, useLiveblocksContextBundleOrNull__ } from '@liveblocks/react';
+
+function useCurrentUserId() {
+  const roomContextBundle = useRoomContextBundleOrNull__();
+  const liveblocksContextBundle = useLiveblocksContextBundleOrNull__();
+  if (roomContextBundle !== null) {
+    return roomContextBundle[kInternal].useCurrentUserIdFromRoom();
+  } else if (liveblocksContextBundle !== null) {
+    return liveblocksContextBundle[kInternal].useCurrentUserIdFromClient();
+  } else {
+    raise(
+      "LiveblocksProvider or RoomProvider are missing from the React tree."
+    );
+  }
+}
+
+export { useCurrentUserId };
+//# sourceMappingURL=shared.mjs.map

package/dist/shared.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.mjs","sources":["../src/shared.ts"],"sourcesContent":["import { kInternal, raise } from \"@liveblocks/core\";\nimport {\n  useLiveblocksContextBundleOrNull__,\n  useRoomContextBundleOrNull__,\n} from \"@liveblocks/react\";\n\nexport function useCurrentUserId(): string | null {\n  const roomContextBundle = useRoomContextBundleOrNull__();\n  const liveblocksContextBundle = useLiveblocksContextBundleOrNull__();\n\n  if (roomContextBundle !== null) {\n    return roomContextBundle[kInternal].useCurrentUserIdFromRoom();\n  } else if (liveblocksContextBundle !== null) {\n    return liveblocksContextBundle[kInternal].useCurrentUserIdFromClient();\n  } else {\n    raise(\n      \"LiveblocksProvider or RoomProvider are missing from the React tree.\"\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAMO,SAAS,gBAAkC,GAAA;AAChD,EAAA,MAAM,oBAAoB,4BAA6B,EAAA,CAAA;AACvD,EAAA,MAAM,0BAA0B,kCAAmC,EAAA,CAAA;AAEnE,EAAA,IAAI,sBAAsB,IAAM,EAAA;AAC9B,IAAO,OAAA,iBAAA,CAAkB,WAAW,wBAAyB,EAAA,CAAA;AAAA,GAC/D,MAAA,IAAW,4BAA4B,IAAM,EAAA;AAC3C,IAAO,OAAA,uBAAA,CAAwB,WAAW,0BAA2B,EAAA,CAAA;AAAA,GAChE,MAAA;AACL,IAAA,KAAA;AAAA,MACE,qEAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF;;;;"}