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-comments/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-comments/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-comments/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 };