emoji-picker-react 4.22.3 → 5.0.0

package/dist/primitives/index.d.mts

@@ -0,0 +1,561 @@
+import * as React from 'react';
+
+type EmojiClickData = {
+    activeSkinTone: SkinTones;
+    unified: string;
+    unifiedWithoutSkinTone: string;
+    emoji: string;
+    names: string[];
+    imageUrl: string;
+    getImageUrl: (emojiStyle?: EmojiStyleValue) => string;
+    isCustom: boolean;
+};
+type CategoryConfig = {
+    category: Categories;
+    name: string;
+    icon?: React.ReactNode;
+    /**
+     * Selects a `CustomEmoji` group for `Categories.CUSTOM` entries. Each
+     * grouped entry renders its own section and nav tab; ungrouped entries
+     * share the classic customs bucket.
+     */
+    group?: string;
+};
+type CategoryIcons = Partial<Record<Categories, React.ReactNode>>;
+type EmojiData = {
+    categories: Partial<Record<Categories, CategoryConfig>>;
+    emojis: Record<string, DataEmoji[]>;
+};
+interface DataEmoji {
+    n: string[];
+    u: string;
+    v?: string[];
+    a: string;
+}
+declare enum SuggestionMode {
+    RECENT = "recent",
+    FREQUENT = "frequent"
+}
+type SuggestionModeValue = SuggestionMode | 'recent' | 'frequent';
+declare enum EmojiStyle {
+    NATIVE = "native",
+    APPLE = "apple",
+    TWITTER = "twitter",
+    GOOGLE = "google",
+    FACEBOOK = "facebook"
+}
+type EmojiStyleValue = EmojiStyle | 'native' | 'apple' | 'twitter' | 'google' | 'facebook';
+declare enum Theme {
+    DARK = "dark",
+    LIGHT = "light",
+    AUTO = "auto"
+}
+type ThemeValue = Theme | 'dark' | 'light' | 'auto';
+declare enum SkinTones {
+    NEUTRAL = "neutral",
+    LIGHT = "1f3fb",
+    MEDIUM_LIGHT = "1f3fc",
+    MEDIUM = "1f3fd",
+    MEDIUM_DARK = "1f3fe",
+    DARK = "1f3ff"
+}
+/** A skin tone as the enum or its literal value (`'neutral'`, `'1f3fb'`, …). */
+type SkinTonesValue = SkinTones | 'neutral' | '1f3fb' | '1f3fc' | '1f3fd' | '1f3fe' | '1f3ff';
+declare enum Categories {
+    SUGGESTED = "suggested",
+    CUSTOM = "custom",
+    SMILEYS_PEOPLE = "smileys_people",
+    ANIMALS_NATURE = "animals_nature",
+    FOOD_DRINK = "food_drink",
+    TRAVEL_PLACES = "travel_places",
+    ACTIVITIES = "activities",
+    OBJECTS = "objects",
+    SYMBOLS = "symbols",
+    FLAGS = "flags"
+}
+declare enum SkinTonePickerLocation {
+    SEARCH = "SEARCH",
+    PREVIEW = "PREVIEW",
+    /**
+     * No built-in placement: render the `SkinTone` primitive wherever you
+     * want it, or drive the tone through `skinTone` / `useSkinTone()`.
+     */
+    NONE = "NONE"
+}
+
+declare enum EmojiProperties {
+    name = "n",
+    unified = "u",
+    variations = "v",
+    added_in = "a",
+    imgUrl = "imgUrl"
+}
+
+/** The emoji a custom `Emoji` cell renders. */
+type ListEmoji = {
+    /** True while hovered or keyboard-focused. */
+    isActive: boolean;
+    /** Unified code including the active skin tone, e.g. `1f44d-1f3fd`. */
+    unified: string;
+    names: string[];
+    /** Native emoji text (custom emojis: their id). */
+    emoji: string;
+    isCustom: boolean;
+    /** Active image style URL, or undefined for standard native emojis. */
+    imageUrl?: string;
+    /** Whether a long press opens skin tone variations. */
+    hasVariations: boolean;
+};
+/**
+ * Props for a custom emoji cell. Spread everything except `emoji` onto a
+ * `<button>`: the library-owned attributes (type, class, position style,
+ * tabIndex, aria-label, data-epr-*) carry selection, keyboard navigation,
+ * virtualization and accessibility. `children` is the default glyph/image;
+ * render it or your own content.
+ */
+type EmojiRenderProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    emoji: ListEmoji;
+    children: React.ReactNode;
+};
+/**
+ * Props for a custom category header. Spread everything except `category`
+ * onto the header element; it stays sticky and measured.
+ */
+type CategoryHeaderRenderProps = React.HTMLAttributes<HTMLElement> & {
+    category: {
+        id: string;
+        name: string;
+    };
+    children: React.ReactNode;
+};
+type ListComponents = {
+    Emoji?: React.ComponentType<EmojiRenderProps>;
+    CategoryHeader?: React.ComponentType<CategoryHeaderRenderProps>;
+};
+
+/** Spread the managed props onto one native button. Render children or your own content. */
+type CategoryButtonRenderProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    category: {
+        id: string;
+        name: string;
+        isActive: boolean;
+    };
+};
+type SkinToneButtonRenderProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    tone: {
+        skinTone: SkinTones;
+        isActive: boolean;
+        isOpen: boolean;
+    };
+};
+type PickerComponents = ListComponents & {
+    CategoryButton?: React.ComponentType<CategoryButtonRenderProps>;
+    SkinToneButton?: React.ComponentType<SkinToneButtonRenderProps>;
+    ExpandButton?: React.ComponentType<React.ButtonHTMLAttributes<HTMLButtonElement>>;
+    ClearButton?: React.ComponentType<React.ButtonHTMLAttributes<HTMLButtonElement>>;
+};
+
+type CustomEmoji = {
+    names: string[];
+    [EmojiProperties.imgUrl]: string;
+    id: string;
+    /**
+     * Optional group name. Customs sharing a group render as their own
+     * category section; ungrouped customs keep the single shared bucket.
+     * Reference the group from a `{ category: Categories.CUSTOM, group }`
+     * entry in the `categories` prop to place and name the section.
+     * https://github.com/ealush/emoji-picker-react/issues/510
+     */
+    group?: string;
+};
+
+type GetEmojiUrl = (unified: string, style: EmojiStyleValue) => string;
+
+/**
+ * Asynchronous dataset source, e.g.
+ * `() => import('emoji-picker-react/data/emojis-fr')`.
+ * Hoist it (module scope or useCallback): a new function identity loads
+ * again.
+ */
+type EmojiDataLoaderOptions = {
+    signal?: AbortSignal;
+};
+type EmojiDataLoader = (options: EmojiDataLoaderOptions) => Promise<EmojiData | {
+    default: EmojiData;
+}>;
+type EmojiDataInput = EmojiData | EmojiDataLoader;
+type EmojiDataState = {
+    loading: boolean;
+    error: Error | null;
+    retry: () => void;
+};
+
+type CategoriesConfig = CategoryConfig[];
+type UserCategoryConfig = Array<Categories | CategoryConfig>;
+
+/**
+ * Every user-facing string the picker renders or announces. All keys are
+ * optional on the `labels` prop; anything omitted keeps its English
+ * default. Category names come from `categories` / localized `emojiData`,
+ * and the preview caption from `previewConfig.defaultCaption`.
+ */
+type PickerLabels = {
+    searchPlaceholder: string;
+    /** Accessible name of the search input. */
+    searchLabel: string;
+    searchClear: string;
+    /** Live-region announcement and visible empty state. */
+    searchResultsNone: string;
+    searchResultsOne: string;
+    /** `%n` is replaced with the result count. */
+    searchResultsMany: string;
+    categoryNavigation: string;
+    reactions: string;
+    expandReactions: string;
+    /** Shown by the Loading part while the dataset loads. */
+    loading: string;
+    loadingError: string;
+    retryLoading: string;
+    skinToneNeutral: string;
+    skinToneLight: string;
+    skinToneMediumLight: string;
+    skinToneMedium: string;
+    skinToneMediumDark: string;
+    skinToneDark: string;
+};
+type PickerConfigInternal = {
+    emojiVersion: string | null;
+    searchPlaceHolder: string;
+    searchPlaceholder: string;
+    searchClearButtonLabel: string;
+    defaultSkinTone: SkinTonesValue;
+    skinTonesDisabled: boolean;
+    autoFocusSearch: boolean;
+    emojiStyle: EmojiStyleValue;
+    categories: CategoriesConfig;
+    theme: ThemeValue;
+    suggestedEmojisMode: SuggestionModeValue;
+    lazyLoadEmojis: boolean;
+    previewConfig: PreviewConfig;
+    className: string;
+    height: PickerDimensions;
+    width: PickerDimensions;
+    style: React.CSSProperties;
+    getEmojiUrl: GetEmojiUrl;
+    searchDisabled: boolean;
+    skinTonePickerLocation: SkinTonePickerLocation;
+    unicodeToHide: Set<string>;
+    customEmojis: CustomEmoji[];
+    reactionsDefaultOpen: boolean;
+    reactions: string[];
+    open: boolean;
+    allowExpandReactions: boolean;
+    hiddenEmojis: string[];
+    emojiData?: EmojiData;
+    categoryIcons: CategoryIcons;
+    nonce?: string;
+    /**
+     * Controlled search value (raw user text). When present, it is the
+     * accepted visible source of truth; user edits emit `onSearchChange`
+     * proposals instead of committing locally.
+     */
+    searchValue?: string;
+    /** Uncontrolled initial search value, read once per mounted lifetime. */
+    defaultSearchValue?: string;
+    /** Emitted synchronously with each committed (uncontrolled) or proposed (controlled) user edit. */
+    onSearchChange?: (value: string) => void;
+    /** Accessible label for the search input. Defaults to English. */
+    searchLabel?: string;
+    /**
+     * Caller-defined Suggested category contents/order (unified or custom
+     * IDs). While present, `suggestedEmojisMode` is ignored for contents.
+     */
+    suggestedEmojis?: string[];
+    /** Observes compact-reactions vs full-picker transitions. */
+    onReactionsModeChange?: (reactionsOpen: boolean) => void;
+    /**
+     * Localized user-facing strings. Takes precedence over the individual
+     * `searchPlaceholder` / `searchLabel` / `searchClearButtonLabel` props.
+     */
+    labels?: Partial<PickerLabels>;
+    /**
+     * Controlled active skin tone. Pair with `onSkinToneChange`; while
+     * present, `defaultSkinTone` is ignored.
+     */
+    skinTone?: SkinTonesValue;
+    /**
+     * Emit the picker's CSS inside this cascade layer (e.g. "epr"), for
+     * layered CSS frameworks such as Tailwind v4 whose utilities cannot
+     * beat unlayered CSS. Declare the layer first in your CSS:
+     * `@layer epr, theme, base, components, utilities;`. Default: unlayered.
+     */
+    cssLayer?: string;
+    /**
+     * Emojis per row. The picker then sizes its width to fit those columns
+     * unless you set a width; a narrower container shows fewer columns.
+     * Default: as many as the width fits.
+     */
+    columns?: number;
+};
+type PreviewConfig = {
+    defaultEmoji: string;
+    defaultCaption: string;
+    showPreview: boolean;
+};
+type ConfigExternal = {
+    previewConfig: Partial<PreviewConfig>;
+    onEmojiClick: MouseDownEvent;
+    onReactionClick: MouseDownEvent;
+    onSkinToneChange: OnSkinToneChange;
+    /**
+     * User-supplied allowlist/order/merge input. Bare `Categories` members
+     * are accepted alongside full configs (as in v4 usage and this repo's
+     * own tests); the merged internal representation stays `CategoriesConfig`.
+     */
+    categories: UserCategoryConfig;
+    /**
+     * Dataset: an object (synchronous, SSR-safe), or a loader such as
+     * `() => import('emoji-picker-react/data/emojis-fr')` to code-split it.
+     * Omitted: the bundled English dataset.
+     */
+    emojiData: EmojiDataInput;
+} & Omit<PickerConfigInternal, 'previewConfig' | 'unicodeToHide' | 'categories' | 'emojiData'>;
+type PickerConfig = Partial<ConfigExternal>;
+type PickerDimensions = string | number;
+type MouseDownEvent = (emoji: EmojiClickData, event: MouseEvent, api?: OnEmojiClickApi) => void;
+type OnSkinToneChange = (skinTone: SkinTones) => void;
+/** The `onEmojiClick` / `onReactionClick` callback signature. */
+type EmojiClickHandler = MouseDownEvent;
+/** The `onSkinToneChange` callback signature. */
+type SkinToneChangeHandler = OnSkinToneChange;
+/** Third argument of `onEmojiClick` / `onReactionClick`. */
+type OnEmojiClickApi = {
+    /** Return to the compact reactions bar (no-op when reactions are off). */
+    collapseToReactions: () => void;
+};
+
+/**
+ * Appearance props owned by the default <EmojiPicker /> wrapper, plus the
+ * two that Root already accepts as native `aside` attributes. This list is
+ * short and stable; the behavior set is long and grows.
+ */
+type PickerAppearanceProps = 'theme' | 'colorScheme' | 'width' | 'height' | 'className' | 'style' | 'unstyled';
+/** Presence and placement belong to the caller's JSX, not Root switches. */
+type PickerCompositionProps = 'open' | 'searchDisabled' | 'skinTonesDisabled' | 'skinTonePickerLocation';
+type RootBehaviorProps = Omit<PickerConfig, PickerAppearanceProps | PickerCompositionProps | 'previewConfig'> & {
+    previewConfig?: Omit<NonNullable<PickerConfig['previewConfig']>, 'showPreview'>;
+};
+type RootProps = Omit<React.HTMLAttributes<HTMLElement>, keyof RootBehaviorProps | 'children' | 'role' | 'dangerouslySetInnerHTML'> & RootBehaviorProps & {
+    children: React.ReactNode;
+    /** Built-in leaf appearance. Bare compositions default to 'none'. */
+    appearance?: 'none' | 'default';
+    /** Shared replacements for grid, variation, reaction and navigation controls. */
+    components?: PickerComponents;
+    /**
+     * Opt-in color scheme: applies the default light/dark color tokens as
+     * CSS variables on Root (no border, background or typography).
+     * Omit it to style a fully unbranded picker yourself. (Not `theme`:
+     * CSS-in-JS libraries reserve that prop on components they wrap.)
+     */
+    colorScheme?: ThemeValue;
+};
+/**
+ * Children are trailing controls, e.g. <SkinTone />; nothing is inserted
+ * automatically.
+ */
+type SearchProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'dangerouslySetInnerHTML'> & {
+    /** Native attributes for the managed input; Root owns its value. */
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'autoFocus' | 'placeholder' | 'aria-controls' | 'role' | 'children' | 'dangerouslySetInnerHTML'>;
+    inputRef?: React.Ref<HTMLInputElement>;
+};
+type SearchInputElement = 'input' | React.ComponentType<any>;
+type ManagedInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'role' | 'aria-controls' | 'children' | 'dangerouslySetInnerHTML'>;
+type ReservedInputProps = 'type' | 'value' | 'defaultValue' | 'role' | 'aria-controls' | 'children' | 'dangerouslySetInnerHTML' | 'as';
+type InputBehaviorHandlers = 'onChange' | 'onFocus' | 'onCompositionStart' | 'onCompositionEnd';
+/** Native input props plus the selected design-system input's own props. */
+type SearchInputProps<T extends SearchInputElement = 'input'> = Omit<ManagedInputProps, keyof React.ComponentPropsWithoutRef<T>> & Pick<ManagedInputProps, InputBehaviorHandlers> & Omit<React.ComponentPropsWithoutRef<T>, ReservedInputProps | InputBehaviorHandlers> & {
+    /** Must forward its ref and supplied props to an actual input element. */
+    as?: T;
+};
+type SearchInputComponent = <T extends SearchInputElement = 'input'>(props: SearchInputProps<T> & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;
+type CategoryNavProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'children' | 'dangerouslySetInnerHTML'> & {
+    /**
+     * Tab axis. `vertical` stacks the tabs (e.g. a side rail) and switches
+     * keyboard navigation to Up/Down between tabs and Left/Right to leave,
+     * announced through aria-orientation. Default: 'horizontal'.
+     */
+    orientation?: 'horizontal' | 'vertical';
+};
+type PreviewProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'dangerouslySetInnerHTML'>;
+type ListProps = Omit<React.HTMLAttributes<HTMLUListElement>, 'role' | 'children' | 'dangerouslySetInnerHTML'> & {
+    /**
+     * Custom markup for emoji cells and category headers. Each receives the
+     * library-owned props to spread onto its element (see EmojiRenderProps /
+     * CategoryHeaderRenderProps).
+     */
+    components?: ListComponents;
+};
+type EmptyProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'children' | 'dangerouslySetInnerHTML'> & {
+    children?: React.ReactNode | ((state: {
+        search: string;
+    }) => React.ReactNode);
+};
+type SkinToneProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'children' | 'dangerouslySetInnerHTML'> & {
+    /** Axis the tones fan out along. Default: 'horizontal'. */
+    orientation?: 'horizontal' | 'vertical';
+};
+type LoadingProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'children' | 'dangerouslySetInnerHTML'> & {
+    children?: React.ReactNode;
+};
+type LoadErrorProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'children' | 'dangerouslySetInnerHTML'> & {
+    children?: React.ReactNode | ((state: {
+        error: Error;
+        retry: () => void;
+    }) => React.ReactNode);
+};
+
+declare const Root: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "children" | "categories" | "nonce" | "dangerouslySetInnerHTML" | "columns" | "cssLayer" | "skinTone" | "previewConfig" | "emojiData" | "emojiVersion" | "searchPlaceHolder" | "searchPlaceholder" | "searchClearButtonLabel" | "defaultSkinTone" | "autoFocusSearch" | "emojiStyle" | "suggestedEmojisMode" | "lazyLoadEmojis" | "getEmojiUrl" | "customEmojis" | "reactionsDefaultOpen" | "reactions" | "allowExpandReactions" | "hiddenEmojis" | "categoryIcons" | "searchValue" | "defaultSearchValue" | "onSearchChange" | "searchLabel" | "suggestedEmojis" | "onReactionsModeChange" | "labels" | "onEmojiClick" | "onReactionClick" | "onSkinToneChange" | "role"> & Omit<Partial<{
+    previewConfig: Partial<PreviewConfig>;
+    onEmojiClick: MouseDownEvent;
+    onReactionClick: MouseDownEvent;
+    onSkinToneChange: OnSkinToneChange;
+    categories: UserCategoryConfig;
+    emojiData: EmojiDataInput;
+} & Omit<PickerConfigInternal, "categories" | "previewConfig" | "unicodeToHide" | "emojiData">>, "previewConfig" | PickerAppearanceProps | PickerCompositionProps> & {
+    previewConfig?: Omit<NonNullable<PickerConfig["previewConfig"]>, "showPreview">;
+} & {
+    children: React.ReactNode;
+    appearance?: "none" | "default";
+    components?: PickerComponents;
+    colorScheme?: ThemeValue;
+} & React.RefAttributes<HTMLElement>>;
+
+type PanelProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'hidden' | 'inert' | 'dangerouslySetInnerHTML'>;
+declare const Panel: React.NamedExoticComponent<PanelProps & React.RefAttributes<HTMLDivElement>>;
+
+type ReactionsProps = Omit<React.HTMLAttributes<HTMLUListElement>, 'role' | 'children' | 'dangerouslySetInnerHTML'>;
+declare const Reactions: React.NamedExoticComponent<ReactionsProps & React.RefAttributes<HTMLUListElement>>;
+
+/**
+ * Geometry tokens: sizes, spacing and stacking that measurement,
+ * virtualization and layout depend on. Every Root applies these
+ * (structural stylesheet), so a bare composition is functional without
+ * any appearance tokens. Consumers may override them; measurement reads
+ * the resulting DOM.
+ */
+declare const structuralPickerTokens: Record<string, string>;
+/** Light color tokens (the v4 default palette). */
+declare const lightPickerTokens: Record<string, string>;
+/**
+ * Dark color overrides layered on top of the light tokens. Direct values:
+ * the default picker keeps its private `--epr-dark-*` indirection for v4
+ * compatibility, primitives do not need it.
+ */
+declare const darkPickerTokens: Record<string, string>;
+/** Full light preset: geometry plus light colors (v4 defaults). */
+declare const defaultPickerTokens: Record<string, string>;
+
+declare const Empty: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML" | "role"> & {
+    children?: React.ReactNode | ((state: {
+        search: string;
+    }) => React.ReactNode);
+} & React.RefAttributes<HTMLDivElement>>;
+
+declare const Loading: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML" | "role"> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+
+/** Recoverable dataset failure; custom children receive error and retry. */
+declare const LoadError: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML" | "role"> & {
+    children?: React.ReactNode | ((state: {
+        error: Error;
+        retry: () => void;
+    }) => React.ReactNode);
+} & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * The emoji currently hovered or keyboard-focused in the grid, in the same
+ * shape `onEmojiClick` receives, or null. Use it to build a custom preview.
+ */
+declare function useActiveEmoji(): EmojiClickData | null;
+/**
+ * The active skin tone and a setter that behaves exactly like choosing a
+ * tone in the built-in control: it updates the grid and calls
+ * `onSkinToneChange` (when `skinTone` is controlled, only the callback
+ * fires and the parent decides).
+ */
+declare function useSkinTone(): [SkinTones, (skinTone: SkinTones) => void];
+type SearchState = {
+    /** Accepted raw search text (controlled value or last committed edit). */
+    search: string;
+    /**
+     * Emojis the list shows for the applied search, or null while no search
+     * is applied. Debounced like the list itself.
+     */
+    resultCount: number | null;
+};
+/** Read-only search state, e.g. for a custom status line or empty state. */
+declare function useSearchState(): SearchState;
+/** Dataset loading, recoverable failure and retry for this Root. */
+declare function useEmojiDataState(): EmojiDataState;
+/** Propose/commit raw text. Clear also restores focus to a mounted SearchInput. */
+declare function useSearchActions(): {
+    setValue: (value: string) => void;
+    clear: () => void;
+};
+/** Public section identities and the same deferred jump used by CategoryNav. */
+declare function useCategoryNavigation(): {
+    categories: {
+        id: string;
+        name: string;
+    }[];
+    activeCategory: string | null;
+    jumpToCategory: (categoryId: string) => void;
+};
+/** Expansion respects allowExpandReactions; collapse activates the reactions bar. */
+declare function usePickerMode(): {
+    reactionsOpen: boolean;
+    canExpand: boolean;
+    expand: () => void;
+    collapse: () => void;
+};
+
+declare const SkinTone: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML" | "role"> & {
+    orientation?: "horizontal" | "vertical";
+} & React.RefAttributes<HTMLDivElement>>;
+
+declare const Search: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "dangerouslySetInnerHTML" | "role"> & {
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "autoFocus" | "placeholder" | "aria-controls" | "role" | "children" | "dangerouslySetInnerHTML">;
+    inputRef?: React.Ref<HTMLInputElement>;
+} & React.RefAttributes<HTMLDivElement>>;
+
+/** Native input, or a ref-forwarding design-system input. Root owns its value. */
+declare const SearchInput: SearchInputComponent;
+
+declare const CategoryNav: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML" | "role"> & {
+    orientation?: "horizontal" | "vertical";
+} & React.RefAttributes<HTMLDivElement>>;
+
+type ViewportProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'children' | 'dangerouslySetInnerHTML'> & {
+    /**
+     * The scrolled content: one `<List>` (it may be wrapped, e.g. by a
+     * styling library), optionally with `<Empty>` and `<Loading>`.
+     */
+    children: React.ReactNode;
+};
+declare const Viewport: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML" | "role"> & {
+    /**
+     * The scrolled content: one `<List>` (it may be wrapped, e.g. by a
+     * styling library), optionally with `<Empty>` and `<Loading>`.
+     */
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+
+declare const List: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLUListElement>, "children" | "dangerouslySetInnerHTML" | "role"> & {
+    components?: ListComponents;
+} & React.RefAttributes<HTMLUListElement>>;
+
+declare const Preview: React.ForwardRefExoticComponent<PreviewProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Categories, CategoryNav, EmojiStyle, Empty, List, LoadError, Loading, Panel, Preview, Reactions, Root, Search, SearchInput, SkinTone, SkinTonePickerLocation, SkinTones, SuggestionMode, Theme, Viewport, darkPickerTokens, defaultPickerTokens, lightPickerTokens, structuralPickerTokens, useActiveEmoji, useCategoryNavigation, useEmojiDataState, usePickerMode, useSearchActions, useSearchState, useSkinTone };
+export type { CategoryButtonRenderProps, CategoryConfig, CategoryHeaderRenderProps, CategoryIcons, CategoryNavProps, CustomEmoji, EmojiClickData, EmojiClickHandler, EmojiData, EmojiDataInput, EmojiDataLoader, EmojiDataLoaderOptions, EmojiDataState, EmojiRenderProps, EmojiStyleValue, EmptyProps, ListComponents, ListEmoji, ListProps, LoadErrorProps, LoadingProps, OnEmojiClickApi, PanelProps, PickerAppearanceProps, PickerComponents, PickerCompositionProps, PickerLabels, PreviewConfig, PreviewProps, ReactionsProps, RootBehaviorProps, RootProps, SearchInputComponent, SearchInputElement, SearchInputProps, SearchProps, SearchState, SkinToneButtonRenderProps, SkinToneChangeHandler, SkinToneProps, SkinTonesValue, SuggestionModeValue, ThemeValue, ViewportProps };