@eocrm/design-system 0.0.0-stage → 0.6.18

package/src/components/EmojiPicker/EmojiPicker.tsx

@@ -0,0 +1,341 @@
+import {
+  forwardRef,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import clsx from 'clsx';
+import { Search } from 'lucide-react';
+import { Input } from '../Input';
+import { Text } from '../Text';
+import { Popover } from '../Popover';
+import { useTranslation } from '../../i18n/useTranslation';
+import { EMOJI_CATEGORIES, type EmojiCategoryId, type EmojiEntry } from './emojiData';
+import styles from './EmojiPicker.module.scss';
+
+// Fixed grid width. The CSS grid uses `repeat(8, 1fr)`, so JS roving nav
+// (ArrowDown/Up jumps a whole row) must use the same column count to stay in
+// sync with what the user sees.
+const COLUMNS = 8;
+
+// char → dataset entry, for resolving a `recent` char's name (accessible label).
+// A char not in the curated set falls back to the char itself as its name.
+const ENTRY_BY_CHAR = new Map<string, EmojiEntry>(
+  EMOJI_CATEGORIES.flatMap((cat) => cat.emojis.map((e) => [e.char, e] as const)),
+);
+
+// ----------------------------------------------------------------------------
+// EmojiPicker
+// ----------------------------------------------------------------------------
+
+export interface EmojiPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+  /**
+   * Consumed so a Field / SettingRow wrapping the picker cannot leak it onto
+   * the root div (#568). The picker has no value to validate, so it renders nothing.
+   */
+  invalid?: boolean;
+  /** Consumed for Field / SettingRow composition (#568); the picker has no value, so nothing is forwarded. */
+  required?: boolean;
+  /**
+   * Fired with the chosen emoji character (e.g. `'👍'`) when the user clicks a
+   * cell or presses Enter/Space on a focused cell. This is the picker's single
+   * output — wire it to insert into an editor, set a reaction, etc.
+   */
+  onSelect: (emoji: string) => void;
+  /**
+   * Recently-used emoji characters (e.g. `['👍', '🎉', '❤️']`), most-recent first.
+   * When provided, a "Recently used" section renders at the top of the grid (only
+   * while not searching). The consumer owns persistence — keep the list yourself
+   * (e.g. in localStorage), update it in `onSelect`, and pass it back. Duplicates
+   * are de-duped; a char outside the curated set still renders (labelled by the
+   * char). Omit or pass `[]` for no recent section.
+   */
+  recent?: string[];
+}
+
+/** One visible emoji plus its flat-array index (for roving keyboard nav). */
+interface IndexedEmoji {
+  emoji: EmojiEntry;
+  index: number;
+}
+
+/** A section after filtering, carrying flat indices for its emojis. `'recent'` is
+ *  the synthetic recently-used section rendered above the curated categories. */
+interface VisibleCategory {
+  id: EmojiCategoryId | 'recent';
+  items: IndexedEmoji[];
+}
+
+/**
+ * Searchable emoji grid over a curated, common-first dataset (not the full Unicode set).
+ * @see docs/components/EmojiPicker.md
+ */
+export const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(function EmojiPicker(
+  // invalid/required consumed for Field composition only (#568).
+  { onSelect, recent, className, invalid: _invalid, required: _required, ...rest },
+  ref,
+) {
+  const t = useTranslation();
+  const baseId = useId();
+  const listboxId = useId();
+  const [query, setQuery] = useState('');
+  // Roving-tabindex anchor: which flat index is currently the tabbable cell.
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const panelRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  // Filter + flatten in one pass so each visible emoji carries a stable flat
+  // index (render order) for keyboard navigation. A char can recur across
+  // categories, so a char→index map would be ambiguous; a running counter is
+  // the correct source of truth.
+  const { categories, flat } = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const matches = (e: EmojiEntry): boolean =>
+      q === '' ||
+      e.name.toLowerCase().includes(q) ||
+      e.keywords.some((k) => k.toLowerCase().includes(q));
+
+    const flatList: EmojiEntry[] = [];
+    const cats: VisibleCategory[] = [];
+    const pushSection = (id: VisibleCategory['id'], emojis: EmojiEntry[]) => {
+      const items = emojis.map<IndexedEmoji>((emoji) => {
+        const index = flatList.length;
+        flatList.push(emoji);
+        return { emoji, index };
+      });
+      cats.push({ id, items });
+    };
+
+    // "Recently used" pins to the top, but only when not searching (search spans
+    // the whole set). De-dupe by char, preserving most-recent-first order; a char
+    // outside the curated set still renders, labelled by the char.
+    if (q === '' && recent && recent.length > 0) {
+      const seen = new Set<string>();
+      const recentEntries: EmojiEntry[] = [];
+      for (const char of recent) {
+        if (seen.has(char)) continue;
+        seen.add(char);
+        recentEntries.push(ENTRY_BY_CHAR.get(char) ?? { char, name: char, keywords: [] });
+      }
+      if (recentEntries.length > 0) pushSection('recent', recentEntries);
+    }
+
+    for (const cat of EMOJI_CATEGORIES) {
+      const filtered = cat.emojis.filter(matches);
+      if (filtered.length > 0) pushSection(cat.id, filtered);
+    }
+    return { categories: cats, flat: flatList };
+  }, [query, recent]);
+
+  // Clamp the active index to the current result set so the tabbable cell is
+  // always valid after the filter shrinks the grid.
+  const activeSafe = flat.length === 0 ? -1 : Math.min(activeIndex, flat.length - 1);
+
+  const focusCell = (index: number) => {
+    panelRef.current?.querySelector<HTMLButtonElement>(`[data-emoji-index="${index}"]`)?.focus();
+  };
+
+  const onSearchKeyDown = (e: ReactKeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (flat.length === 0) return;
+      const target = activeSafe < 0 ? 0 : activeSafe;
+      setActiveIndex(target);
+      focusCell(target);
+    }
+  };
+
+  const onGridKeyDown = (e: ReactKeyboardEvent<HTMLButtonElement>) => {
+    const total = flat.length;
+    if (total === 0) return;
+    // The focused cell is the source of truth for "where am I" — read its own
+    // flat index rather than relying on a possibly-stale closure.
+    const current = Number(e.currentTarget.dataset.emojiIndex);
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onSelect(flat[current]!.char);
+      return;
+    }
+
+    let next: number;
+    switch (e.key) {
+      case 'ArrowRight':
+        next = current + 1;
+        break;
+      case 'ArrowLeft':
+        next = current - 1;
+        break;
+      case 'ArrowDown':
+        next = current + COLUMNS;
+        break;
+      case 'ArrowUp':
+        if (current < COLUMNS) {
+          // First row → escape back up to the search input.
+          e.preventDefault();
+          searchInputRef.current?.focus();
+          return;
+        }
+        next = current - COLUMNS;
+        break;
+      case 'Home':
+        next = current - (current % COLUMNS);
+        break;
+      case 'End':
+        next = Math.min(current - (current % COLUMNS) + COLUMNS - 1, total - 1);
+        break;
+      default:
+        return;
+    }
+
+    e.preventDefault();
+    next = Math.max(0, Math.min(next, total - 1));
+    setActiveIndex(next);
+    focusCell(next);
+  };
+
+  return (
+    // Pattern A (props last) — EmojiPicker is a plain surface; let consumers
+    // override anything on the root.
+    <div ref={ref} className={clsx(styles.root, className)} {...rest}>
+      <div className={styles.search}>
+        <Search size={14} aria-hidden className={styles.searchIcon} />
+        <Input
+          ref={searchInputRef}
+          type="text"
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            setActiveIndex(0);
+          }}
+          placeholder={t('emojiPicker.search')}
+          aria-label={t('emojiPicker.search')}
+          aria-controls={listboxId}
+          onKeyDown={onSearchKeyDown}
+          className={styles.searchInput}
+        />
+      </div>
+
+      <div
+        ref={panelRef}
+        id={listboxId}
+        className={styles.panel}
+        role="listbox"
+        aria-label={t('emojiPicker.label')}
+      >
+        {flat.length === 0 ? (
+          <Text size="sm" tone="muted" className={styles.noResults}>
+            {t('emojiPicker.noResults')}
+          </Text>
+        ) : (
+          categories.map((cat) => {
+            const labelId = `${baseId}-${cat.id}`;
+            const label =
+              cat.id === 'recent' ? t('emojiPicker.recent') : t(`emojiPicker.category.${cat.id}`);
+            return (
+              <div key={cat.id} className={styles.section} role="group" aria-label={label}>
+                <Text as="div" size="xs" tone="muted" id={labelId} className={styles.sectionLabel}>
+                  {label}
+                </Text>
+                <div className={styles.grid}>
+                  {cat.items.map(({ emoji, index }) => (
+                    <button
+                      key={emoji.char}
+                      type="button"
+                      role="option"
+                      aria-selected={false}
+                      data-emoji-index={index}
+                      className={styles.cell}
+                      tabIndex={index === activeSafe ? 0 : -1}
+                      aria-label={emoji.name}
+                      onClick={() => onSelect(emoji.char)}
+                      onKeyDown={onGridKeyDown}
+                      onFocus={() => setActiveIndex(index)}
+                    >
+                      <span aria-hidden="true">{emoji.char}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+});
+
+// ----------------------------------------------------------------------------
+// EmojiPickerPopover
+// ----------------------------------------------------------------------------
+
+export interface EmojiPickerPopoverProps {
+  /**
+   * The element that opens the picker. Must be a single element that accepts a
+   * ref (this library's `<Button>` or a raw `<button>`); the open/close +
+   * ARIA wiring is injected by `Popover.Trigger`.
+   */
+  trigger: ReactNode;
+  /**
+   * Fired with the chosen emoji character. Selecting always closes the popover
+   * (both controlled and uncontrolled).
+   */
+  onSelect: (emoji: string) => void;
+  /** Recently-used emoji chars shown in a top "Recently used" section — see `EmojiPicker`. */
+  recent?: string[];
+  /**
+   * Controlled open state. Provide alongside `onOpenChange` to drive open
+   * externally. Omit both to let the wrapper own its state (the common case).
+   */
+  open?: boolean;
+  /** Fired whenever the popover wants to change open state. Required when `open` is provided. */
+  onOpenChange?: (open: boolean) => void;
+  /** Initial open state for uncontrolled usage. Defaults to `false`. */
+  defaultOpen?: boolean;
+}
+
+/**
+ * Batteries-included `<EmojiPicker>` in a `Popover`: pass a `trigger` and an `onSelect`.
+ * @see docs/components/EmojiPicker.md
+ */
+export function EmojiPickerPopover({
+  trigger,
+  onSelect,
+  recent,
+  open,
+  onOpenChange,
+  defaultOpen = false,
+}: EmojiPickerPopoverProps) {
+  // Controlled-or-uncontrolled open: keep internal state when `open` is not
+  // provided so selecting can still close the popover.
+  const isControlled = open !== undefined;
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const actualOpen = isControlled ? open : internalOpen;
+
+  const setOpen = (next: boolean) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const handleSelect = (emoji: string) => {
+    onSelect(emoji);
+    setOpen(false);
+  };
+
+  return (
+    <Popover open={actualOpen} onOpenChange={setOpen}>
+      {/* Popover.Trigger wants a single ReactElement; it runtime-validates via
+          isValidElement and throws on anything else, so the cast is safe. */}
+      <Popover.Trigger>{trigger as ReactElement}</Popover.Trigger>
+      <Popover.Content>
+        <EmojiPicker onSelect={handleSelect} recent={recent} />
+      </Popover.Content>
+    </Popover>
+  );
+}

package/src/components/EmojiPicker/emojiData.ts

@@ -0,0 +1,245 @@
+// emojiData.ts — a curated, common-first emoji dataset for <EmojiPicker>. Plain data
+// (not a UI library): a focused set covering reactions + everyday input, NOT the full
+// ~1900-emoji Unicode set (YAGNI for v1; expandable). Each `char` is one
+// user-perceived emoji; `name` + `keywords` are the English search corpus. Category
+// labels are localized by the component (via the `id` → `emojiPicker.category.<id>`
+// i18n key), so this file carries ids, not labels.
+
+/** One emoji and its search metadata. */
+export interface EmojiEntry {
+  /** The unicode character to insert / pass to `onSelect` (e.g. `"👍"`). */
+  char: string;
+  /** Human name — the emoji button's accessible label + part of the search corpus. */
+  name: string;
+  /** Extra search terms (synonyms) matched alongside `name`. */
+  keywords: string[];
+}
+
+/** Stable category identifier — maps to the `emojiPicker.category.<id>` i18n label. */
+export type EmojiCategoryId =
+  | 'smileys'
+  | 'gestures'
+  | 'people'
+  | 'animals'
+  | 'food'
+  | 'activities'
+  | 'travel'
+  | 'objects'
+  | 'symbols'
+  | 'flags';
+
+/** A category section: its id + the emojis it contains, in display order. */
+export interface EmojiCategory {
+  id: EmojiCategoryId;
+  emojis: EmojiEntry[];
+}
+
+/** The curated category sections, in display order (reaction-friendly first). */
+export const EMOJI_CATEGORIES: EmojiCategory[] = [
+  {
+    id: 'smileys',
+    emojis: [
+      { char: '😀', name: 'grinning face', keywords: ['smile', 'happy'] },
+      { char: '😄', name: 'grinning face with smiling eyes', keywords: ['happy', 'joy'] },
+      { char: '😁', name: 'beaming face', keywords: ['grin', 'happy'] },
+      { char: '😂', name: 'face with tears of joy', keywords: ['lol', 'laugh', 'funny'] },
+      { char: '🤣', name: 'rolling on the floor laughing', keywords: ['rofl', 'lol', 'laugh'] },
+      { char: '🙂', name: 'slightly smiling face', keywords: ['smile'] },
+      { char: '😉', name: 'winking face', keywords: ['wink'] },
+      { char: '😊', name: 'smiling face with smiling eyes', keywords: ['blush', 'happy'] },
+      { char: '😍', name: 'smiling face with heart-eyes', keywords: ['love', 'crush'] },
+      { char: '😘', name: 'face blowing a kiss', keywords: ['kiss', 'love'] },
+      { char: '😎', name: 'smiling face with sunglasses', keywords: ['cool'] },
+      { char: '🤔', name: 'thinking face', keywords: ['hmm', 'consider'] },
+      { char: '😐', name: 'neutral face', keywords: ['meh'] },
+      { char: '🙄', name: 'face with rolling eyes', keywords: ['eyeroll', 'annoyed'] },
+      { char: '😴', name: 'sleeping face', keywords: ['sleep', 'zzz', 'tired'] },
+      { char: '😢', name: 'crying face', keywords: ['sad', 'tear'] },
+      { char: '😭', name: 'loudly crying face', keywords: ['sob', 'sad', 'cry'] },
+      { char: '😡', name: 'enraged face', keywords: ['angry', 'mad'] },
+      { char: '😱', name: 'face screaming in fear', keywords: ['scared', 'shock', 'omg'] },
+      { char: '🤯', name: 'exploding head', keywords: ['mind blown', 'shock'] },
+      { char: '🥳', name: 'partying face', keywords: ['celebrate', 'party'] },
+      { char: '😬', name: 'grimacing face', keywords: ['awkward', 'yikes'] },
+      { char: '🤗', name: 'hugging face', keywords: ['hug'] },
+      { char: '😅', name: 'grinning face with sweat', keywords: ['phew', 'relief', 'nervous'] },
+    ],
+  },
+  {
+    id: 'gestures',
+    emojis: [
+      { char: '👍', name: 'thumbs up', keywords: ['yes', 'approve', 'like', '+1'] },
+      { char: '👎', name: 'thumbs down', keywords: ['no', 'disapprove', 'dislike', '-1'] },
+      { char: '👏', name: 'clapping hands', keywords: ['applause', 'bravo'] },
+      { char: '🙌', name: 'raising hands', keywords: ['celebrate', 'praise'] },
+      { char: '🙏', name: 'folded hands', keywords: ['please', 'thanks', 'pray'] },
+      { char: '👌', name: 'OK hand', keywords: ['ok', 'perfect'] },
+      { char: '🤝', name: 'handshake', keywords: ['deal', 'agree'] },
+      { char: '✌️', name: 'victory hand', keywords: ['peace'] },
+      { char: '🤞', name: 'crossed fingers', keywords: ['luck', 'hopeful'] },
+      { char: '👋', name: 'waving hand', keywords: ['hello', 'hi', 'bye'] },
+      { char: '💪', name: 'flexed biceps', keywords: ['strong', 'muscle'] },
+      { char: '🤙', name: 'call me hand', keywords: ['shaka'] },
+      { char: '👇', name: 'backhand index pointing down', keywords: ['point', 'below'] },
+      { char: '👉', name: 'backhand index pointing right', keywords: ['point'] },
+      { char: '✋', name: 'raised hand', keywords: ['stop', 'high five'] },
+    ],
+  },
+  {
+    id: 'people',
+    emojis: [
+      { char: '🧑', name: 'person', keywords: ['adult', 'someone'] },
+      { char: '👩', name: 'woman', keywords: ['female'] },
+      { char: '👨', name: 'man', keywords: ['male'] },
+      { char: '🧒', name: 'child', keywords: ['kid'] },
+      { char: '👶', name: 'baby', keywords: ['infant'] },
+      { char: '🧓', name: 'older person', keywords: ['elder', 'senior'] },
+      { char: '👮', name: 'police officer', keywords: ['cop'] },
+      { char: '🕵️', name: 'detective', keywords: ['spy', 'investigate'] },
+      { char: '👩‍💻', name: 'woman technologist', keywords: ['developer', 'coder', 'engineer'] },
+      { char: '👨‍💻', name: 'man technologist', keywords: ['developer', 'coder', 'engineer'] },
+      { char: '🦸', name: 'superhero', keywords: ['hero'] },
+      { char: '🧑‍🚀', name: 'astronaut', keywords: ['space'] },
+      { char: '👤', name: 'silhouette', keywords: ['user', 'profile', 'anonymous'] },
+    ],
+  },
+  {
+    id: 'animals',
+    emojis: [
+      { char: '🐶', name: 'dog face', keywords: ['puppy'] },
+      { char: '🐱', name: 'cat face', keywords: ['kitten'] },
+      { char: '🐭', name: 'mouse face', keywords: ['rodent'] },
+      { char: '🐹', name: 'hamster', keywords: ['pet'] },
+      { char: '🐰', name: 'rabbit face', keywords: ['bunny'] },
+      { char: '🦊', name: 'fox', keywords: [] },
+      { char: '🐻', name: 'bear', keywords: [] },
+      { char: '🐼', name: 'panda', keywords: [] },
+      { char: '🦁', name: 'lion', keywords: [] },
+      { char: '🐮', name: 'cow face', keywords: [] },
+      { char: '🐷', name: 'pig face', keywords: [] },
+      { char: '🐵', name: 'monkey face', keywords: [] },
+      { char: '🐔', name: 'chicken', keywords: ['hen'] },
+      { char: '🐧', name: 'penguin', keywords: [] },
+      { char: '🐦', name: 'bird', keywords: [] },
+      { char: '🦄', name: 'unicorn', keywords: ['magic'] },
+      { char: '🐝', name: 'honeybee', keywords: ['bee'] },
+      { char: '🦋', name: 'butterfly', keywords: [] },
+    ],
+  },
+  {
+    id: 'food',
+    emojis: [
+      { char: '🍎', name: 'red apple', keywords: ['fruit'] },
+      { char: '🍌', name: 'banana', keywords: ['fruit'] },
+      { char: '🍓', name: 'strawberry', keywords: ['fruit', 'berry'] },
+      { char: '🍕', name: 'pizza', keywords: ['food', 'slice'] },
+      { char: '🍔', name: 'hamburger', keywords: ['burger', 'food'] },
+      { char: '🍟', name: 'french fries', keywords: ['fries', 'chips'] },
+      { char: '🌮', name: 'taco', keywords: ['food', 'mexican'] },
+      { char: '🍣', name: 'sushi', keywords: ['food', 'japanese'] },
+      { char: '🍩', name: 'doughnut', keywords: ['donut', 'sweet'] },
+      { char: '🍪', name: 'cookie', keywords: ['sweet', 'biscuit'] },
+      { char: '🎂', name: 'birthday cake', keywords: ['cake', 'celebrate'] },
+      { char: '☕', name: 'hot beverage', keywords: ['coffee', 'tea'] },
+      { char: '🍺', name: 'beer mug', keywords: ['drink', 'cheers'] },
+      { char: '🍷', name: 'wine glass', keywords: ['drink'] },
+      { char: '🥂', name: 'clinking glasses', keywords: ['cheers', 'celebrate', 'toast'] },
+    ],
+  },
+  {
+    id: 'activities',
+    emojis: [
+      { char: '⚽', name: 'soccer ball', keywords: ['football', 'sport'] },
+      { char: '🏀', name: 'basketball', keywords: ['sport'] },
+      { char: '🏈', name: 'american football', keywords: ['sport'] },
+      { char: '⚾', name: 'baseball', keywords: ['sport'] },
+      { char: '🎾', name: 'tennis', keywords: ['sport'] },
+      { char: '🏆', name: 'trophy', keywords: ['win', 'award', 'champion'] },
+      { char: '🥇', name: 'first place medal', keywords: ['gold', 'win', 'medal'] },
+      { char: '🎯', name: 'direct hit', keywords: ['target', 'bullseye', 'goal'] },
+      { char: '🎮', name: 'video game', keywords: ['game', 'controller', 'gaming'] },
+      { char: '🎲', name: 'game die', keywords: ['dice', 'random'] },
+      { char: '🎉', name: 'party popper', keywords: ['celebrate', 'tada', 'congrats'] },
+      { char: '🎊', name: 'confetti ball', keywords: ['celebrate', 'party'] },
+      { char: '🎁', name: 'wrapped gift', keywords: ['present', 'gift'] },
+      { char: '🎈', name: 'balloon', keywords: ['party'] },
+      { char: '🎵', name: 'musical note', keywords: ['music', 'song'] },
+    ],
+  },
+  {
+    id: 'travel',
+    emojis: [
+      { char: '🚗', name: 'car', keywords: ['auto', 'vehicle'] },
+      { char: '✈️', name: 'airplane', keywords: ['flight', 'travel'] },
+      { char: '🚀', name: 'rocket', keywords: ['launch', 'ship', 'space', 'fast'] },
+      { char: '🚲', name: 'bicycle', keywords: ['bike'] },
+      { char: '🚆', name: 'train', keywords: ['rail'] },
+      { char: '🚕', name: 'taxi', keywords: ['cab'] },
+      { char: '⛵', name: 'sailboat', keywords: ['boat'] },
+      { char: '🏠', name: 'house', keywords: ['home'] },
+      { char: '🏢', name: 'office building', keywords: ['work', 'company'] },
+      { char: '🗺️', name: 'world map', keywords: ['map', 'travel'] },
+      { char: '🏖️', name: 'beach with umbrella', keywords: ['vacation', 'holiday'] },
+      { char: '🗻', name: 'mount fuji', keywords: ['fuji', 'mountain'] },
+      { char: '🌍', name: 'globe showing europe-africa', keywords: ['earth', 'world'] },
+      { char: '⛰️', name: 'mountain', keywords: ['hill', 'peak'] },
+    ],
+  },
+  {
+    id: 'objects',
+    emojis: [
+      { char: '💻', name: 'laptop', keywords: ['computer', 'work'] },
+      { char: '🖥️', name: 'desktop computer', keywords: ['monitor', 'pc'] },
+      { char: '📱', name: 'mobile phone', keywords: ['cell', 'smartphone'] },
+      { char: '⌨️', name: 'keyboard', keywords: ['type'] },
+      { char: '🖱️', name: 'computer mouse', keywords: ['click'] },
+      { char: '💾', name: 'floppy disk', keywords: ['save', 'disk'] },
+      { char: '📎', name: 'paperclip', keywords: ['attach', 'attachment'] },
+      { char: '📌', name: 'pushpin', keywords: ['pin'] },
+      { char: '📅', name: 'calendar', keywords: ['date', 'schedule'] },
+      { char: '📊', name: 'bar chart', keywords: ['graph', 'stats', 'analytics'] },
+      { char: '📈', name: 'chart increasing', keywords: ['growth', 'up', 'trend'] },
+      { char: '📉', name: 'chart decreasing', keywords: ['decline', 'down', 'trend'] },
+      { char: '💡', name: 'light bulb', keywords: ['idea', 'tip'] },
+      { char: '🔒', name: 'locked', keywords: ['secure', 'lock', 'private'] },
+      { char: '🔑', name: 'key', keywords: ['unlock', 'password'] },
+      { char: '📞', name: 'telephone receiver', keywords: ['call', 'phone'] },
+      { char: '✉️', name: 'envelope', keywords: ['email', 'mail', 'message'] },
+      { char: '📝', name: 'memo', keywords: ['note', 'write', 'edit'] },
+    ],
+  },
+  {
+    id: 'symbols',
+    emojis: [
+      { char: '❤️', name: 'red heart', keywords: ['love', 'like'] },
+      { char: '🧡', name: 'orange heart', keywords: ['love'] },
+      { char: '💛', name: 'yellow heart', keywords: ['love'] },
+      { char: '💚', name: 'green heart', keywords: ['love'] },
+      { char: '💙', name: 'blue heart', keywords: ['love'] },
+      { char: '💜', name: 'purple heart', keywords: ['love'] },
+      { char: '🖤', name: 'black heart', keywords: ['love'] },
+      { char: '💔', name: 'broken heart', keywords: ['sad', 'heartbreak'] },
+      { char: '🔥', name: 'fire', keywords: ['lit', 'hot', 'flame'] },
+      { char: '⭐', name: 'star', keywords: ['favorite', 'rating'] },
+      { char: '✨', name: 'sparkles', keywords: ['shiny', 'clean', 'magic'] },
+      { char: '💯', name: 'hundred points', keywords: ['100', 'perfect', 'score'] },
+      { char: '✅', name: 'check mark button', keywords: ['done', 'yes', 'approve', 'check'] },
+      { char: '❌', name: 'cross mark', keywords: ['no', 'wrong', 'cancel', 'x'] },
+      { char: '⚠️', name: 'warning', keywords: ['caution', 'alert'] },
+      { char: '❓', name: 'question mark', keywords: ['help', 'why'] },
+      { char: '❗', name: 'exclamation mark', keywords: ['important', 'alert'] },
+      { char: '➕', name: 'plus', keywords: ['add', 'new'] },
+      { char: '👀', name: 'eyes', keywords: ['look', 'watching', 'see'] },
+    ],
+  },
+  {
+    id: 'flags',
+    emojis: [
+      { char: '🏁', name: 'chequered flag', keywords: ['race', 'finish'] },
+      { char: '🚩', name: 'triangular flag', keywords: ['flag', 'mark'] },
+      { char: '🏳️', name: 'white flag', keywords: ['surrender'] },
+      { char: '🏴', name: 'black flag', keywords: [] },
+      { char: '🏳️‍🌈', name: 'rainbow flag', keywords: ['pride', 'lgbt'] },
+    ],
+  },
+];

package/src/components/EmojiPicker/index.ts

@@ -0,0 +1,3 @@
+export { EmojiPicker, EmojiPickerPopover } from './EmojiPicker';
+export type { EmojiPickerProps, EmojiPickerPopoverProps } from './EmojiPicker';
+export type { EmojiEntry, EmojiCategory, EmojiCategoryId } from './emojiData';