/**
 * Props for the EmojiWheel component
 */
export interface EmojiWheelProps {
    /**
     * Whether the emoji wheel is currently visible and usable.
     * Controls both visibility and animation states.
     * When transitioning from true to false, exit animation plays before hiding.
     */
    isOpen: boolean;
    /**
     * Position where the wheel should appear, in viewport coordinates.
     * The wheel automatically adjusts position to stay within viewport boundaries.
     *
     * - Wheel centers itself on the provided coordinates
     * - Automatically repositioned if it would extend beyond viewport edges
     * - Ensures the wheel is fully visible on screen
     * - Total wheel diameter: ~208px (80px radius + 48px button + padding)
     *
     * @example
     * ```tsx
     * // From mouse event
     * position={{ x: event.clientX, y: event.clientY }}
     *
     * // From element center
     * const rect = element.getBoundingClientRect();
     * position={{
     *   x: rect.left + rect.width / 2,
     *   y: rect.top + rect.height / 2
     * }}
     *
     * // From touch event
     * const touch = event.touches[0];
     * position={{ x: touch.clientX, y: touch.clientY }}
     * ```
     */
    position: {
        x: number;
        y: number;
    };
    /**
     * Optional list of emojis to display on the wheel.
     * If not provided, a default set of 8 emojis will be used.
     *
     * For optimal user experience, it's recommended to use exactly 8 emojis,
     * as the wheel is designed to display this number in a circular arrangement.
     * Using fewer or more emojis may affect the visual layout and usability.
     *
     * @example
     * ```tsx
     * // Custom emoji set
     * emojis={['🔥', '🚀', '👀', '🙌', '💯', '🎯', '🌟', '✨']}
     * ```
     */
    emojis?: string[];
    /**
     * Callback function triggered when an emoji is selected from the wheel.
     * Receives the selected emoji character as a string parameter.
     * The wheel does not automatically close after selection.
     *
     * @param emoji - The selected emoji from the set (default or custom)
     *
     * @remarks
     * The callback should handle:
     * - Adding the reaction to your data model
     * - Closing the wheel (by setting isOpen to false)
     * - Any additional UI updates or animations
     *
     * @example
     * ```tsx
     * onEmojiSelect={(emoji) => {
     *   // Add reaction to message
     *   sendReaction(emoji);
     *
     *   // Close the wheel
     *   setWheelOpen(false);
     *
     *   // Optional: Show feedback
     *   showToast(`Reacted with ${emoji}`);
     * }}
     * ```
     */
    onEmojiSelect: (emoji: string) => void;
    /**
     * Callback function triggered when the wheel should be closed.
     * Called when user clicks outside the wheel, clicks the center close button,
     * or triggers other dismissal actions.
     *
     * To dismiss the wheel, you can:
     * - Clicking outside the wheel area
     * - Clicking the center close button
     * - Programmatic closure (escape key, etc.)
     *
     * This callback should update parent state to set isOpen to false.
     * The component handles exit animations automatically.
     *
     * @example
     * ```tsx
     * onClose={() => {
     *   setWheelOpen(false);
     *   // Optional: cleanup or additional actions
     *   clearSelection();
     * }}
     * ```
     */
    onClose: () => void;
}
/**
 * EmojiWheel component displays a circular selection of emoji reactions
 *
 * Features:
 * - Circular arrangement of 8 emoji reactions
 * - Animated appearance with scaling and rotation
 * - Click outside to close
 * - Hover effects for better UX
 * - Optimized for touch and mouse interaction
 * - Safe positioning prevents off-screen rendering
 * - Staggered animation entrance for visual appeal
 * - Center close button for easy dismissal
 *
 *
 * @example
 * // Quick reaction button in chat interface
 * const [showReactionWheel, setShowReactionWheel] = useState(false);
 * const reactionButtonRef = useRef<HTMLButtonElement>(null);
 *
 * const handleReactionClick = () => {
 *   if (reactionButtonRef.current) {
 *     const rect = reactionButtonRef.current.getBoundingClientRect();
 *     setWheelPosition({
 *       x: rect.left + rect.width / 2,
 *       y: rect.top + rect.height / 2
 *     });
 *     setShowReactionWheel(true);
 *   }
 * };
 *
 * <button
 *   ref={reactionButtonRef}
 *   onClick={handleReactionClick}
 *   className="reaction-trigger"
 * >
 *   😀 React
 * </button>
 *
 * @example
 * // Touch-optimized mobile usage
 * const handleTouchStart = (event: React.TouchEvent) => {
 *   const touch = event.touches[0];
 *   setWheelPosition({ x: touch.clientX, y: touch.clientY });
 *   setWheelOpen(true);
 * };
 *
 * <div
 *   onTouchStart={handleTouchStart}
 *   className="touch-target"
 * >
 *   Hold to react
 * </div>
 */
export declare const EmojiWheel: ({ isOpen, position, emojis: customEmojis, onEmojiSelect, onClose, }: EmojiWheelProps) => import("react/jsx-runtime").JSX.Element | undefined;