Emoji selection in forms and content editors requires a picker that doesn't bloat bundle size with Unicode tables, supports skin tone variants across touch and mouse inputs seamlessly, and maintains visual state without fighting CSS class combinations. Picking an emoji from a text input goes wrong fast—no visual feedback, no tone variants, and keyboard-only pickers break on mobile.

EmojiSelect is a controlled-by-default component with value / defaultValue / onChange, rendering a button that opens a categorized, searchable picker. The picker shows emojis grouped by nine categories (smileys, people, animals, food, travel, activities, objects, symbols, flags) with a search filter. Emojis supporting skin tones display a tone popover on hover (mouse) or long-press (touch), allowing users to pick the base emoji or any of five skin tone variants. Tone selection persists in localStorage. The component is fully keyboard-accessible with stable button labels via aria-label.

Import from @particle-academy/react-fancy, wrap with <EmojiSelect value={emoji} onChange={setEmoji} />, and pass an optional placeholder string to customize the search input hint. The selected emoji (or an empty string if none chosen) flows through value, and each selection fires onChange with the Unicode character string, optionally skin-tone-modified.