@liveblocks/react-ui
Version:
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.
805 lines (750 loc) • 28.3 kB
TypeScript
import * as react from 'react';
import { ElementType, ComponentPropsWithoutRef, ReactNode, FormEvent, ComponentType, RefAttributes, MouseEvent, ComponentProps, PropsWithChildren } from 'react';
import { CommentAttachment, CommentBody, BaseMetadata, DM, CommentData, HistoryVersion, InboxNotificationData, InboxNotificationThreadData, InboxNotificationTextMentionData, InboxNotificationCustomData, KDAD, ThreadData } from '@liveblocks/core';
import * as react_jsx_runtime from 'react/jsx-runtime';
type Direction = "ltr" | "rtl";
type SlotProp = {
/**
* Replace the rendered element by the one passed as a child.
*/
asChild?: boolean;
};
type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
type ComposerBodyText = {
bold?: boolean;
italic?: boolean;
strikethrough?: boolean;
code?: boolean;
text: string;
};
type ComposerBodyMark = keyof Omit<ComposerBodyText, "text">;
type ComposerBodyMarks = {
[K in ComposerBodyMark]: boolean;
};
interface CommentAttachmentArgs {
/**
* The attachment.
*/
attachment: CommentAttachment;
/**
* A presigned URL for the attachment.
*/
url: string;
}
interface LocalizationOverrides {
locale: string;
dir: Direction;
}
interface GlobalOverrides {
USER_SELF: string;
USER_UNKNOWN: string;
LIST_REMAINING: (count: number) => string;
LIST_REMAINING_USERS: (count: number) => string;
LIST_REMAINING_COMMENTS: (count: number) => string;
EMOJI_PICKER_SEARCH_PLACEHOLDER: string;
EMOJI_PICKER_EMPTY: ReactNode;
EMOJI_PICKER_ERROR: (error: Error) => ReactNode;
EMOJI_PICKER_CHANGE_SKIN_TONE: string;
ATTACHMENT_TOO_LARGE: (maxSize?: string) => string;
ATTACHMENT_ERROR: (error: Error) => string;
}
interface CommentOverrides {
COMMENT_EDITED: ReactNode;
COMMENT_DELETED: ReactNode;
COMMENT_MORE: string;
COMMENT_EDIT: string;
COMMENT_EDIT_COMPOSER_PLACEHOLDER: string;
COMMENT_EDIT_COMPOSER_CANCEL: string;
COMMENT_EDIT_COMPOSER_SAVE: string;
COMMENT_DELETE: string;
COMMENT_DELETE_ATTACHMENT: string;
COMMENT_ADD_REACTION: string;
COMMENT_REACTION_LIST: (list: ReactNode, emoji: string, count: number) => ReactNode;
COMMENT_REACTION_DESCRIPTION: (emoji: string, count: number) => string;
}
interface ComposerOverrides {
COMPOSER_INSERT_MENTION: string;
COMPOSER_INSERT_EMOJI: string;
COMPOSER_ATTACH_FILES: string;
COMPOSER_REMOVE_ATTACHMENT: string;
COMPOSER_PLACEHOLDER: string;
COMPOSER_SEND: string;
COMPOSER_TOGGLE_MARK: (mark: ComposerBodyMark) => string;
}
interface ThreadOverrides {
THREAD_RESOLVE: string;
THREAD_UNRESOLVE: string;
THREAD_NEW_INDICATOR: string;
THREAD_NEW_INDICATOR_DESCRIPTION: string;
THREAD_COMPOSER_PLACEHOLDER: string;
THREAD_COMPOSER_SEND: string;
}
interface InboxNotificationOverrides {
INBOX_NOTIFICATION_MORE: string;
INBOX_NOTIFICATION_MARK_AS_READ: string;
INBOX_NOTIFICATION_DELETE: string;
INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (list: ReactNode, room: ReactNode | undefined, count: number) => ReactNode;
INBOX_NOTIFICATION_THREAD_MENTION: (user: ReactNode, room: ReactNode | undefined) => ReactNode;
INBOX_NOTIFICATION_TEXT_MENTION: (user: ReactNode, room: ReactNode | undefined) => ReactNode;
}
interface HistoryVersionPreviewOverrides {
HISTORY_VERSION_PREVIEW_AUTHORS_LIST: (list: ReactNode) => ReactNode;
HISTORY_VERSION_PREVIEW_RESTORE: string;
HISTORY_VERSION_PREVIEW_EMPTY: ReactNode;
HISTORY_VERSION_PREVIEW_ERROR: (error: Error) => ReactNode;
}
type Overrides = LocalizationOverrides & GlobalOverrides & ComposerOverrides & CommentOverrides & ThreadOverrides & InboxNotificationOverrides & HistoryVersionPreviewOverrides;
declare function useOverrides(overrides?: Partial<Overrides>): Overrides;
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;
}
type ComposerEditorMentionSuggestionsProps = {
/**
* The list of suggested user IDs.
*/
userIds: string[];
/**
* The currently selected user ID.
*/
selectedUserId?: string;
};
type ComposerEditorFloatingToolbarProps = Record<string, never>;
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>;
/**
* The component used to display a floating toolbar attached to the selection.
*/
FloatingToolbar?: ComponentType<ComposerEditorFloatingToolbarProps>;
}
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;
/**
* 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;
/**
* Whether the composer is disabled.
*/
disabled?: boolean;
/**
* The composer's initial attachments.
*/
defaultAttachments?: CommentAttachment[];
/**
* Whether to create attachments when pasting files into the editor.
*/
pasteFilesAsAttachments?: boolean;
/**
* When `preventUnsavedChanges` is set on your Liveblocks client (or set on
* <LiveblocksProvider>), then closing a browser tab will be prevented when
* there are unsaved changes.
*
* By default, that will include draft texts or attachments that are (being)
* uploaded via this composer, but not submitted yet.
*
* If you want to prevent unsaved changes with Liveblocks, but not for this
* composer, you can opt-out this composer instance by setting this prop to
* `false`.
*/
preventUnsavedChanges?: boolean;
}
interface ComposerSubmitComment {
/**
* The submitted comment's body.
*/
body: CommentBody;
/**
* The submitted comment's uploaded attachments.
*/
attachments: CommentAttachment[];
}
type ComposerCreateThreadProps<M extends BaseMetadata> = {
threadId?: never;
commentId?: never;
/**
* The metadata of the thread to create.
*/
metadata?: M;
};
type ComposerCreateCommentProps = {
/**
* The ID of the thread to reply to.
*/
threadId: string;
commentId?: never;
metadata?: never;
};
type ComposerEditCommentProps = {
/**
* The ID of the thread to edit a comment in.
*/
threadId: string;
/**
* The ID of the comment to edit.
*/
commentId: string;
metadata?: never;
};
type ComposerProps<M extends BaseMetadata = DM> = Omit<ComponentPropsWithoutRef<"form">, "defaultValue"> & (ComposerCreateThreadProps<M> | ComposerCreateCommentProps | ComposerEditCommentProps) & {
/**
* The event handler called when the composer is submitted.
*/
onComposerSubmit?: (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => Promise<void> | void;
/**
* The composer's initial value.
*/
defaultValue?: ComposerEditorProps["defaultValue"];
/**
* The composer's initial attachments.
*/
defaultAttachments?: CommentAttachment[];
/**
* Whether the composer is collapsed. Setting a value will make the composer controlled.
*/
collapsed?: boolean;
/**
* The event handler called when the collapsed state of the composer changes.
*/
onCollapsedChange?: (collapsed: boolean) => void;
/**
* Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.
*/
defaultCollapsed?: boolean;
/**
* Whether to show and allow adding attachments.
*/
showAttachments?: boolean;
/**
* Whether to show formatting controls (e.g. a floating toolbar with formatting toggles when selecting text)
*/
showFormattingControls?: boolean;
/**
* Whether the composer is disabled.
*/
disabled?: ComposerFormProps["disabled"];
/**
* Whether to focus the composer on mount.
*/
autoFocus?: ComposerEditorProps["autoFocus"];
/**
* Override the component's strings.
*/
overrides?: Partial<GlobalOverrides & ComposerOverrides>;
};
/**
* Displays a composer to create comments.
*
* @example
* <Composer />
*/
declare const Composer: <M extends BaseMetadata = DM>(props: ComposerProps<M> & RefAttributes<HTMLFormElement>) => JSX.Element;
interface CommentProps extends ComponentPropsWithoutRef<"div"> {
/**
* The comment to display.
*/
comment: CommentData;
/**
* How to show or hide the actions.
*/
showActions?: boolean | "hover";
/**
* Whether to show the comment if it was deleted. If set to `false`, it will render deleted comments as `null`.
*/
showDeleted?: boolean;
/**
* Whether to show reactions.
*/
showReactions?: boolean;
/**
* Whether to show attachments.
*/
showAttachments?: boolean;
/**
* Whether to show the composer's formatting controls when editing the comment.
*/
showComposerFormattingControls?: ComposerProps["showFormattingControls"];
/**
* Whether to indent the comment's content.
*/
indentContent?: boolean;
/**
* The event handler called when the comment is edited.
*/
onCommentEdit?: (comment: CommentData) => void;
/**
* The event handler called when the comment is deleted.
*/
onCommentDelete?: (comment: CommentData) => void;
/**
* The event handler called when clicking on the author.
*/
onAuthorClick?: (userId: string, event: MouseEvent<HTMLElement>) => void;
/**
* The event handler called when clicking on a mention.
*/
onMentionClick?: (userId: string, event: MouseEvent<HTMLElement>) => void;
/**
* The event handler called when clicking on a comment's attachment.
*/
onAttachmentClick?: (args: CommentAttachmentArgs, event: MouseEvent<HTMLElement>) => void;
/**
* Override the component's strings.
*/
overrides?: Partial<GlobalOverrides & CommentOverrides & ComposerOverrides>;
}
/**
* Displays a single comment.
*
* @example
* <>
* {thread.comments.map((comment) => (
* <Comment key={comment.id} comment={comment} />
* ))}
* </>
*/
declare const Comment: react.ForwardRefExoticComponent<CommentProps & react.RefAttributes<HTMLDivElement>>;
interface HistoryVersionSummaryProps extends ComponentPropsWithoutRef<"button"> {
version: HistoryVersion;
selected?: boolean;
}
/**
* Displays some information about a version.
*
* @example
* <HistoryVersionSummary version={version} />
*/
declare const HistoryVersionSummary: react.ForwardRefExoticComponent<HistoryVersionSummaryProps & react.RefAttributes<HTMLButtonElement>>;
type HistoryVersionSummaryListProps = ComponentPropsWithoutRef<"ol">;
/**
* Displays versions summaries as a list.
*
* @example
* <HistoryVersionSummaryList>
* {versions.map((version) => (
* <HistoryVersionSummary key={version.id} version={version} />
* ))}
* </HistoryVersionSummaryList>
*/
declare const HistoryVersionSummaryList: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & react.RefAttributes<HTMLOListElement>>;
interface GlobalComponents {
Anchor: ComponentType<ComponentPropsWithoutRef<"a">> | "a";
}
type Components = GlobalComponents;
interface AvatarProps extends ComponentProps<"div"> {
/**
* The user ID to display the avatar for.
*/
userId: string;
}
type ComponentTypeWithRef<T extends keyof JSX.IntrinsicElements, P> = ComponentType<P & Pick<ComponentProps<T>, "ref">>;
type InboxNotificationKinds<KS extends KDAD = KDAD> = {
[K in KS]: ComponentTypeWithRef<"a", InboxNotificationCustomKindProps<K>>;
} & {
thread: ComponentTypeWithRef<"a", InboxNotificationThreadKindProps>;
textMention: ComponentTypeWithRef<"a", InboxNotificationTextMentionKindProps>;
};
interface InboxNotificationSharedProps {
/**
* How to show or hide the actions.
*/
showActions?: boolean | "hover";
}
interface InboxNotificationProps extends Omit<ComponentPropsWithoutRef<"a">, "title">, InboxNotificationSharedProps {
/**
* The inbox notification to display.
*/
inboxNotification: InboxNotificationData;
/**
* Override specific kinds of inbox notifications.
*/
kinds?: Partial<InboxNotificationKinds>;
/**
* Override the component's strings.
*/
overrides?: Partial<GlobalOverrides & InboxNotificationOverrides & CommentOverrides>;
/**
* Override the component's components.
*/
components?: Partial<GlobalComponents>;
}
interface InboxNotificationThreadProps extends Omit<InboxNotificationProps, "kinds" | "children">, InboxNotificationSharedProps {
/**
* The inbox notification to display.
*/
inboxNotification: InboxNotificationThreadData;
/**
* Whether to show the room name in the title.
*/
showRoomName?: boolean;
/**
* Whether to show reactions.
*/
showReactions?: boolean;
/**
* Whether to show attachments.
*/
showAttachments?: boolean;
}
interface InboxNotificationTextMentionProps extends Omit<InboxNotificationProps, "kinds">, InboxNotificationSharedProps {
/**
* The inbox notification to display.
*/
inboxNotification: InboxNotificationTextMentionData;
/**
* Whether to show the room name in the title.
*/
showRoomName?: boolean;
}
interface InboxNotificationCustomProps extends Omit<InboxNotificationProps, "kinds">, InboxNotificationSharedProps, SlotProp {
/**
* The inbox notification to display.
*/
inboxNotification: InboxNotificationCustomData;
/**
* The inbox notification's content.
*/
children: ReactNode;
/**
* The inbox notification's title.
*/
title: ReactNode;
/**
* The inbox notification's aside content.
* Can be combined with `InboxNotification.Icon` or `InboxNotification.Avatar` to easily follow default styles.
*/
aside?: ReactNode;
/**
* Whether to mark the inbox notification as read when clicked.
*/
markAsReadOnClick?: boolean;
}
type InboxNotificationThreadKindProps = Omit<InboxNotificationProps, "kinds"> & {
inboxNotification: InboxNotificationThreadData;
};
type InboxNotificationTextMentionKindProps = Omit<InboxNotificationProps, "kinds"> & {
inboxNotification: InboxNotificationTextMentionData;
};
type InboxNotificationCustomKindProps<K extends KDAD = KDAD> = Omit<InboxNotificationProps, "kinds"> & {
inboxNotification: InboxNotificationCustomData<K>;
};
type InboxNotificationIconProps = ComponentProps<"div">;
type InboxNotificationAvatarProps = AvatarProps;
declare function InboxNotificationIcon({ className, ...props }: InboxNotificationIconProps): react_jsx_runtime.JSX.Element;
declare function InboxNotificationAvatar({ className, ...props }: InboxNotificationAvatarProps): react_jsx_runtime.JSX.Element;
/**
* Displays a single inbox notification.
*
* @example
* <>
* {inboxNotifications.map((inboxNotification) => (
* <InboxNotification
* key={inboxNotification.id}
* inboxNotification={inboxNotification}
* href={`/rooms/${inboxNotification.roomId}`
* />
* ))}
* </>
*/
declare const InboxNotification: react.ForwardRefExoticComponent<InboxNotificationProps & react.RefAttributes<HTMLAnchorElement>> & {
Thread: react.ForwardRefExoticComponent<InboxNotificationThreadProps & react.RefAttributes<HTMLAnchorElement>>;
TextMention: react.ForwardRefExoticComponent<InboxNotificationTextMentionProps & react.RefAttributes<HTMLAnchorElement>>;
Custom: react.ForwardRefExoticComponent<InboxNotificationCustomProps & react.RefAttributes<HTMLAnchorElement>>;
Icon: typeof InboxNotificationIcon;
Avatar: typeof InboxNotificationAvatar;
};
interface InboxNotificationListProps extends ComponentPropsWithoutRef<"ol"> {
/**
* This API is *EXPERIMENTAL* and likely not going to be the final API. Do
* not rely on it.
*
* @private
*/
onReachEnd?: () => void;
}
/**
* Displays inbox notifications as a list.
*
* @example
* <InboxNotificationList>
* {inboxNotifications.map((inboxNotification) => (
* <InboxNotification key={inboxNotification.id} inboxNotification={inboxNotification} />
* ))}
* </InboxNotificationList>
*/
declare const InboxNotificationList: react.ForwardRefExoticComponent<InboxNotificationListProps & react.RefAttributes<HTMLOListElement>>;
interface ThreadProps<M extends BaseMetadata = DM> extends ComponentPropsWithoutRef<"div"> {
/**
* The thread to display.
*/
thread: ThreadData<M>;
/**
* How to show or hide the composer to reply to the thread.
*/
showComposer?: boolean | "collapsed";
/**
* Whether to show the action to resolve the thread.
*/
showResolveAction?: boolean;
/**
* How to show or hide the actions.
*/
showActions?: CommentProps["showActions"];
/**
* Whether to show reactions.
*/
showReactions?: CommentProps["showReactions"];
/**
* Whether to show the composer's formatting controls.
*/
showComposerFormattingControls?: ComposerProps["showFormattingControls"];
/**
* Whether to indent the comments' content.
*/
indentCommentContent?: CommentProps["indentContent"];
/**
* Whether to show deleted comments.
*/
showDeletedComments?: CommentProps["showDeleted"];
/**
* Whether to show attachments.
*/
showAttachments?: boolean;
/**
* The event handler called when changing the resolved status.
*/
onResolvedChange?: (resolved: boolean) => void;
/**
* The event handler called when a comment is edited.
*/
onCommentEdit?: CommentProps["onCommentEdit"];
/**
* The event handler called when a comment is deleted.
*/
onCommentDelete?: CommentProps["onCommentDelete"];
/**
* The event handler called when the thread is deleted.
* A thread is deleted when all its comments are deleted.
*/
onThreadDelete?: (thread: ThreadData<M>) => void;
/**
* The event handler called when clicking on a comment's author.
*/
onAuthorClick?: CommentProps["onAuthorClick"];
/**
* The event handler called when clicking on a mention.
*/
onMentionClick?: CommentProps["onMentionClick"];
/**
* The event handler called when clicking on a comment's attachment.
*/
onAttachmentClick?: CommentProps["onAttachmentClick"];
/**
* The event handler called when the composer is submitted.
*/
onComposerSubmit?: ComposerProps["onComposerSubmit"];
/**
* Override the component's strings.
*/
overrides?: Partial<GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides>;
}
/**
* Displays a thread of comments, with a composer to reply
* to it.
*
* @example
* <>
* {threads.map((thread) => (
* <Thread key={thread.id} thread={thread} />
* ))}
* </>
*/
declare const Thread: <M extends BaseMetadata = DM>(props: ThreadProps<M> & RefAttributes<HTMLDivElement>) => JSX.Element;
type LiveblocksUIConfigProps = PropsWithChildren<{
/**
* Override the components' strings.
*/
overrides?: Partial<Overrides>;
/**
* Override the components' components.
*/
components?: Partial<Components>;
/**
* The container to render the portal into.
*/
portalContainer?: HTMLElement;
/**
* When `preventUnsavedChanges` is set on your Liveblocks client (or set on
* <LiveblocksProvider>), then closing a browser tab will be prevented when
* there are unsaved changes.
*
* By default, that will include draft texts or attachments that are (being)
* uploaded via comments/threads composers, but not submitted yet.
*
* If you want to prevent unsaved changes with Liveblocks, but not for
* composers, you can opt-out by setting this option to `false`.
*/
preventUnsavedComposerChanges?: boolean;
/**
* The Liveblocks emoji picker (visible when adding reactions in `Comment`) is built with
* {@link https://github.com/liveblocks/frimousse | Frimousse}, which fetches its data from
* {@link https://emojibase.dev/docs/datasets/ | Emojibase}.
*
* This option allows you to change the base URL of where the {@link https://www.npmjs.com/package/emojibase-data | `emojibase-data`}
* files should be fetched from, used as follows: `${emojibaseUrl}/${locale}/${file}.json`.
* (e.g. `${emojibaseUrl}/en/data.json`).
*
* @example "https://unpkg.com/emojibase-data"
*
* @example "https://example.com/self-hosted-emojibase-data"
*/
emojibaseUrl?: string;
}>;
/**
* Set configuration options for all components.
*
* @example
* <LiveblocksUIConfig overrides={{ locale: "fr", USER_UNKNOWN: "Anonyme", ... }}>
* <App />
* </LiveblocksUIConfig>
*/
declare function LiveblocksUIConfig({ overrides, components, portalContainer, preventUnsavedComposerChanges, emojibaseUrl, children, }: LiveblocksUIConfigProps): react_jsx_runtime.JSX.Element;
declare function ArrowCornerDownRightIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ArrowCornerUpRightIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ArrowDownIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ArrowUpIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function AttachmentIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function BlockquoteIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function BoldIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function CheckIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ChevronDownIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ChevronLeftIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ChevronRightIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ChevronUpIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function CodeIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function CommentIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function CrossIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function EllipsisIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function EmojiIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function EmojiPlusIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function H1Icon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function H2Icon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function H3Icon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ItalicIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function LengthenIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ListOrderedIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ListUnorderedIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function MentionIcon(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;
declare function SearchIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function SendIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function ShortenIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function SparklesIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function SparklesTextIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function StrikethroughIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function TextIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function TranslateIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function UnderlineIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function UndoIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function WarningIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare namespace icon {
export {
ArrowCornerDownRightIcon as ArrowCornerDownRight,
ArrowCornerUpRightIcon as ArrowCornerUpRight,
ArrowDownIcon as ArrowDown,
ArrowUpIcon as ArrowUp,
AttachmentIcon as Attachment,
BlockquoteIcon as Blockquote,
BoldIcon as Bold,
CheckIcon as Check,
ChevronDownIcon as ChevronDown,
ChevronLeftIcon as ChevronLeft,
ChevronRightIcon as ChevronRight,
ChevronUpIcon as ChevronUp,
CodeIcon as Code,
CommentIcon as Comment,
CrossIcon as Cross,
EllipsisIcon as Ellipsis,
EmojiIcon as Emoji,
EmojiPlusIcon as EmojiPlus,
H1Icon as H1,
H2Icon as H2,
H3Icon as H3,
ItalicIcon as Italic,
LengthenIcon as Lengthen,
ListOrderedIcon as ListOrdered,
ListUnorderedIcon as ListUnordered,
MentionIcon as Mention,
QuestionMarkIcon as QuestionMark,
RedoIcon as Redo,
SearchIcon as Search,
SendIcon as Send,
ShortenIcon as Shorten,
SparklesIcon as Sparkles,
SparklesTextIcon as SparklesText,
StrikethroughIcon as Strikethrough,
TextIcon as Text,
TranslateIcon as Translate,
UnderlineIcon as Underline,
UndoIcon as Undo,
WarningIcon as Warning,
};
}
export { Comment, CommentAttachmentArgs, CommentOverrides, CommentProps, Composer, ComposerBodyMark, ComposerBodyMarks, ComposerOverrides, ComposerProps, ComposerSubmitComment, GlobalOverrides, HistoryVersionSummary, HistoryVersionSummaryList, HistoryVersionSummaryListProps, HistoryVersionSummaryProps, icon as Icon, InboxNotification, InboxNotificationAvatarProps, InboxNotificationCustomKindProps, InboxNotificationCustomProps, InboxNotificationIconProps, InboxNotificationList, InboxNotificationListProps, InboxNotificationOverrides, InboxNotificationProps, InboxNotificationTextMentionKindProps, InboxNotificationTextMentionProps, InboxNotificationThreadKindProps, InboxNotificationThreadProps, LiveblocksUIConfig, LocalizationOverrides, Overrides, Thread, ThreadOverrides, ThreadProps, useOverrides };