@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.
609 lines (533 loc) • 21.5 kB
text/typescript
import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import { ComponentProps, ReactNode, ElementType, ComponentPropsWithoutRef, ComponentType, Ref, RefCallback, FormEvent } from 'react';
import { Relax, AiTextPart, AiReasoningPart, AiChatMessage } from '@liveblocks/core';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
export { TooltipProvider } from '@radix-ui/react-tooltip';
interface AvatarProps extends ComponentProps<"div"> {
/**
* The user ID to display the avatar for.
*/
userId: string;
}
declare function Avatar({ userId, className, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
interface ButtonProps extends ComponentProps<"button"> {
variant?: "default" | "toolbar" | "outline" | "primary" | "secondary" | "destructive";
size?: "default" | "large";
disableable?: boolean;
icon?: ReactNode;
}
declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
declare const SelectButton: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
type SlotProp = {
/**
* Replace the rendered element by the one passed as a child.
*/
asChild?: boolean;
};
type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
interface ListProps extends ComponentPropsWithSlot<"span"> {
values: ReactNode[];
formatRemaining?: (amount: number) => string;
truncate?: number;
locale?: string;
}
declare const List: react.ForwardRefExoticComponent<ListProps & react.RefAttributes<HTMLSpanElement>>;
interface GlobalComponents {
Anchor: ComponentType<ComponentPropsWithoutRef<"a">> | "a";
}
type MarkdownComponents = {
/**
* The component used to render paragraphs.
*
* @example
* ```md
* A paragraph.
*
* Another paragraph.
* ```
* ```tsx
* <Markdown
* components={{
* Paragraph: ({ children }) => <p className="...">{children}</p>
* }}
* />
* ```
*/
Paragraph: ComponentType<MarkdownComponentsParagraphProps>;
/**
* The component used to render inline elements (bold, italic, strikethrough, and inline code).
*
* @example
* ```md
* **Bold**, _italic_, ~~strikethrough~~, and `inline code`.
* ```
* ```tsx
* <Markdown
* components={{
* Inline: ({ type, children }) => {
* const Component = type;
* return <Component className="...">{children}</Component>;
* }
* }}
* />
* ```
*/
Inline: ComponentType<MarkdownComponentsInlineProps>;
/**
* The component used to render links.
*
* @example
* ```md
* A [link](https://liveblocks.io).
* ```
* ```tsx
* <Markdown
* components={{
* Link: ({ href, children }) => <a href={href} className="...">{children}</a>
* }}
* />
* ```
*/
Link: ComponentType<MarkdownComponentsLinkProps>;
/**
* The component used to render headings.
*
* @example
* ```md
* # Heading 1
* ## Heading 2
* ### Heading 3
* ```
* ```tsx
* <Markdown
* components={{
* Heading: ({ level, children }) => {
* const Heading = `h${level}` as const;
* return <Heading className="...">{children}</Heading>;
* }
* }}
* />
* ```
*/
Heading: ComponentType<MarkdownComponentsHeadingProps>;
/**
* The component used to render blockquotes.
*
* @example
* ```md
* > A blockquote.
* ```
* ```tsx
* <Markdown
* components={{
* Blockquote: ({ children }) => <blockquote className="...">{children}</blockquote>
* }}
* />
* ```
*/
Blockquote: ComponentType<MarkdownComponentsBlockquoteProps>;
/**
* The component used to render code blocks.
*
* @example
* ```md
* ```javascript
* const a = 1;
* ```
* ```
* ```tsx
* <Markdown
* components={{
* CodeBlock: ({ language, code }) => (
* <pre data-language={language} className="...">
* <code className="...">{code}</code>
* </pre>
* )
* }}
* />
* ```
*/
CodeBlock: ComponentType<MarkdownComponentsCodeBlockProps>;
/**
* The component used to render images.
*
* @example
* ```md
* 
* ```
* ```tsx
* <Markdown
* components={{
* Image: ({ src, alt }) => <img src={src} alt={alt} className="...">
* }}
* />
* ```
*/
Image: ComponentType<MarkdownComponentsImageProps>;
/**
* The component used to render lists.
*
* @example
* ```md
* 1. An ordered list item
* - An unordered list item
* - [x] A checked list item
* ```
* ```tsx
* <Markdown
* components={{
* List: ({ type, items, start }) => {
* const List = type === "ordered" ? "ol" : "ul";
* return (
* <List start={start}>
* {items.map((item, index) => (
* <li key={index}>
* {item.checked !== undefined && (
* <input type="checkbox" disabled checked={item.checked} />{" "}
* )}
* {item.children}
* </li>
* ))}
* </List>
* );
* }
* }}
* />
* ```
*/
List: ComponentType<MarkdownComponentsListProps>;
/**
* The component used to render tables.
*
* @example
* ```md
* | Heading 1 | Heading 2 |
* |-----------|-----------|
* | Cell 1 | Cell 2 |
* | Cell 3 | Cell 4 |
* ```
* ```tsx
* <Markdown
* components={{
* Table: ({ headings, rows }) => (
* <table>
* <thead>
* <tr>
* {headings.map(({ children }, index) => (
* <th key={index}>{children}</th>
* ))}
* </tr>
* </thead>
* <tbody>
* {rows.map((row, index) => (
* <tr key={index}>
* {row.map(({ children }, index) => (
* <td key={index}>{children}</td>
* ))}
* </tr>
* ))}
* </tbody>
* </table>
* )
* }}
* />
* ```
*/
Table: ComponentType<MarkdownComponentsTableProps>;
/**
* The component used to render separators.
*
* @example
* ```md
* ---
* ```
* ```tsx
* <Markdown components={{ Separator: () => <hr className="..." /> }} />
* ```
*/
Separator: ComponentType;
};
interface MarkdownComponentsInlineProps {
type: "strong" | "em" | "code" | "del";
children: ReactNode;
}
interface MarkdownComponentsParagraphProps {
children: ReactNode;
}
interface MarkdownComponentsTableCell {
align?: "left" | "center" | "right";
children: ReactNode;
}
interface MarkdownComponentsTableProps {
headings: MarkdownComponentsTableCell[];
rows: MarkdownComponentsTableCell[][];
}
interface MarkdownComponentsListItem {
checked?: boolean;
children: ReactNode;
}
type MarkdownComponentsListProps = Relax<MarkdownComponentsOrderedListProps | MarkdownComponentsUnorderedListProps>;
interface MarkdownComponentsOrderedListProps {
type: "ordered";
items: MarkdownComponentsListItem[];
start: number;
}
interface MarkdownComponentsUnorderedListProps {
type: "unordered";
items: MarkdownComponentsListItem[];
}
interface MarkdownComponentsBlockquoteProps {
children: ReactNode;
}
interface MarkdownComponentsImageProps {
src: string;
alt: string;
title?: string;
}
interface MarkdownComponentsHeadingProps {
level: 1 | 2 | 3 | 4 | 5 | 6;
children: ReactNode;
}
interface MarkdownComponentsLinkProps {
href: string;
title?: string;
children: ReactNode;
}
interface MarkdownComponentsCodeBlockProps {
code: string;
language?: string;
}
interface MarkdownProps extends ComponentPropsWithSlot<"div"> {
content: string;
components?: Partial<MarkdownComponents>;
}
declare const Markdown: react.ForwardRefExoticComponent<MarkdownProps & react.RefAttributes<HTMLDivElement>>;
interface ProseProps extends ComponentProps<"div"> {
content: string;
components?: Partial<GlobalComponents & {
markdown?: Partial<MarkdownComponents>;
}>;
}
/**
* This component renders Markdown content with `lb-prose`
* styles and custom components (code blocks, etc)
*/
declare function Prose({ content, components, className, ...props }: ProseProps): react_jsx_runtime.JSX.Element;
interface TooltipProps extends Pick<TooltipPrimitive.TooltipTriggerProps, "children">, Omit<TooltipPrimitive.TooltipContentProps, "content"> {
content: ReactNode;
multiline?: boolean;
}
interface ShortcutTooltipProps extends TooltipProps {
shortcut?: string;
}
declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLButtonElement>>;
declare const ShortcutTooltip: react.ForwardRefExoticComponent<ShortcutTooltipProps & react.RefAttributes<HTMLButtonElement>>;
interface UserProps extends ComponentProps<"span"> {
/**
* The user ID to display the user name for.
*/
userId: string;
/**
* Whether to replace the user name with "you" ($.USER_SELF) for the current user.
*/
replaceSelf?: boolean;
}
declare function User({ userId, replaceSelf, className, ...props }: UserProps): 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 BellIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function BellCrossedIcon(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 CheckCircleIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function CheckCircleFillIcon(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 CopyIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function CrossIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function CrossCircleFillIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function DeleteIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function EditIcon(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 MinusCircleIcon(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 RestoreIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function RetryIcon(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 SpinnerIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
declare function StopIcon(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 function capitalize(string: string): string;
/**
* Construct class names strings.
*/
declare function cn(...args: (string | number | boolean | undefined | null)[]): string;
/**
* "Freezes" a given value, so that it will return the same value/instance on
* each subsequent render. This can be used to freeze "initial" values for
* custom hooks, much like how `useState(initialState)` or
* `useRef(initialValue)` works.
*/
declare function useInitial<T>(value: T | (() => T)): T;
declare function useRefs<T>(...refs: Ref<T>[]): RefCallback<T>;
interface AiChatComposerFormProps extends ComponentPropsWithSlot<"form"> {
/**
* The event handler called when a chat message is submitted.
*/
onComposerSubmit?: (message: {
/**
* The submitted message text.
*/
text: string;
}, event: FormEvent<HTMLFormElement>) => void;
/**
* Whether the composer is disabled.
*/
disabled?: boolean;
}
interface AiChatComposerEditorProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue" | "children"> {
/**
* The editor's initial value.
*/
defaultValue?: string;
/**
* 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;
}
type AiChatComposerSubmitProps = ComponentPropsWithSlot<"button">;
/**
* Surrounds the chat composer's content and handles submissions.
*
* @example
* <AiChatComposer.Form onComposerSubmit={({ text }) => {}}>
* <AiChatComposer.Editor />
* <AiChatComposer.Submit />
* </AiChatComposer.Form>
*/
declare const AiChatComposerForm: react.ForwardRefExoticComponent<AiChatComposerFormProps & react.RefAttributes<HTMLFormElement>>;
/**
* Displays the chat composer's editor.
*
* @example
* <AiChatComposer.Editor placeholder="Write a message…" />
*/
declare const AiChatComposerEditor: react.ForwardRefExoticComponent<AiChatComposerEditorProps & react.RefAttributes<HTMLDivElement>>;
/**
* A button to submit a chat message.
*
* @example
* <AiChatComposer.Submit>Send</AiChatComposer.Submit>
*/
declare const AiChatComposerSubmit: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & SlotProp & react.RefAttributes<HTMLButtonElement>>;
declare const index$2_AiChatComposerEditor: typeof AiChatComposerEditor;
declare const index$2_AiChatComposerForm: typeof AiChatComposerForm;
declare const index$2_AiChatComposerSubmit: typeof AiChatComposerSubmit;
declare namespace index$2 {
export {
index$2_AiChatComposerEditor as AiChatComposerEditor,
index$2_AiChatComposerForm as AiChatComposerForm,
index$2_AiChatComposerSubmit as AiChatComposerSubmit,
AiChatComposerEditor as Editor,
AiChatComposerForm as Form,
AiChatComposerSubmit as Submit,
};
}
type AiMessageContentTextPartProps = {
part: AiTextPart;
};
type AiMessageContentReasoningPartProps = {
part: AiReasoningPart;
};
interface AiMessageContentComponents {
/**
* The component used to display text parts.
*/
TextPart: ComponentType<AiMessageContentTextPartProps>;
/**
* The component used to display reasoning parts.
*/
ReasoningPart: ComponentType<AiMessageContentReasoningPartProps>;
}
interface AiMessageContentProps extends ComponentPropsWithSlot<"div"> {
/**
* The message contents to display.
*/
message: AiChatMessage;
/**
* Optional overrides for the default components to render each part within
* the message content.
*/
components?: Partial<AiMessageContentComponents>;
}
/**
* --------------------------------------------------------------------------
* @private The API for this component is not yet stable.
* --------------------------------------------------------------------------
*
* Primitive to help display an user or assistant message’s content, which is
* an array of parts.
*
* @example
* <AiMessage.Content message={message} components={{ TextPart }} />
*/
declare const AiMessageContent: react.ForwardRefExoticComponent<AiMessageContentProps & react.RefAttributes<HTMLDivElement>>;
declare namespace index$1 {
export {
AiMessageContent as Content,
};
}
interface RootProps extends ComponentPropsWithSlot<"div"> {
defaultOpen?: boolean;
open?: boolean;
onOpenChange?: (open: boolean) => void;
disabled?: boolean;
}
declare const CollapsibleRoot: react.ForwardRefExoticComponent<RootProps & react.RefAttributes<HTMLDivElement>>;
declare const CollapsibleTrigger: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & SlotProp & react.RefAttributes<HTMLButtonElement>>;
declare const CollapsibleContent: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SlotProp & react.RefAttributes<HTMLDivElement>>;
declare namespace index {
export {
CollapsibleContent as Content,
CollapsibleRoot as Root,
CollapsibleTrigger as Trigger,
};
}
export { index$2 as AiChatComposer, AiChatComposerEditorProps, AiChatComposerFormProps, AiChatComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsInlineProps, MarkdownComponentsLinkProps, MarkdownComponentsListProps, MarkdownComponentsParagraphProps, MarkdownComponentsTableProps, MarkdownProps, MentionIcon, MinusCircleIcon, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, WarningIcon, capitalize, cn, useInitial, useRefs };