/**
 * @file ChatEmojiPicker.tsx
 * @input Uses React, StyleX, theme tokens, Popover, TextInput, useGridFocus
 * @output Exports ChatEmojiPicker component, ChatEmojiPickerProps,
 *   ChatEmojiOption, and DEFAULT_CHAT_EMOJIS
 * @position Popover emoji grid for chat reactions; wraps a trigger button
 *
 * Renders a Popover around a trigger element: a shortname filter input over
 * a fixed 8-column emoji grid. Arrow keys move focus through the grid
 * (left/right by one, up/down by a row) via useGridFocus; picking an emoji
 * calls onSelect and closes the popover, which restores focus to the
 * trigger. Ships with a small default emoji set; pass `emojis` to override.
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/lab/src/Chat/index.ts (exports)
 * - /packages/lab/src/Chat/ChatEmojiPicker.doc.mjs
 * - /apps/storybook/stories/ChatAdditions.stories.tsx (examples)
 */
import type { ReactNode } from 'react';
import type { BaseProps } from '@astryxdesign/core';
export interface ChatEmojiOption {
    /** The emoji character, e.g. "🎉". */
    emoji: string;
    /** Shortname used for filtering and accessible labels, e.g. "tada". */
    name: string;
}
/**
 * Small default emoji set (two grid rows) covering the common
 * reaction vocabulary. Override via the `emojis` prop.
 */
export declare const DEFAULT_CHAT_EMOJIS: ReadonlyArray<ChatEmojiOption>;
export interface ChatEmojiPickerProps extends Omit<BaseProps<HTMLDivElement>, 'onSelect'> {
    /** Ref forwarded to the popover panel element */
    ref?: React.Ref<HTMLDivElement>;
    /**
     * Called with the picked emoji character.
     * The popover closes itself after selection.
     */
    onSelect: (emoji: string) => void;
    /**
     * Emoji options rendered in the grid (8 per row).
     * @default DEFAULT_CHAT_EMOJIS
     */
    emojis?: ReadonlyArray<ChatEmojiOption>;
    /**
     * Accessible label for the popover dialog.
     * @default 'Pick an emoji'
     */
    label?: string;
    /**
     * Placeholder and hidden label for the filter input.
     * @default 'Search emoji'
     */
    searchLabel?: string;
    /**
     * Trigger element — must contain a `<button>` (Popover wires it up).
     */
    children: ReactNode;
    /** Test ID for the popover content. */
    'data-testid'?: string;
}
/**
 * Popover emoji grid with shortname filtering and arrow-key navigation.
 *
 * Wraps its trigger button in a Popover. Typing in the filter input narrows
 * the grid by shortname; arrow keys move focus between emoji; picking one
 * calls `onSelect` and closes the popover (focus returns to the trigger).
 *
 * @example
 * ```
 * <ChatEmojiPicker onSelect={(emoji) => addReaction(emoji)}>
 *   <button type="button" aria-label="Add reaction">🙂</button>
 * </ChatEmojiPicker>
 * ```
 */
export declare function ChatEmojiPicker({ onSelect, emojis, label, searchLabel, children, xstyle, className, style: styleProp, 'data-testid': testId, ref, }: ChatEmojiPickerProps): import("react").JSX.Element;
export declare namespace ChatEmojiPicker {
    var displayName: string;
}
//# sourceMappingURL=ChatEmojiPicker.d.ts.map