{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "emoji-picker", "type": "registry:ui", "title": "Emoji Picker", "description": "Search-first emoji grid with arrow keys, skin tones and categories that follow the scroll.", "categories": [ "pickers" ], "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://www.stealth.pm/r/tokens.json", "https://www.stealth.pm/r/cn.json", "https://www.stealth.pm/r/icons.json", "https://www.stealth.pm/r/motion.json", "https://www.stealth.pm/r/use-controllable-state.json" ], "files": [ { "path": "components/ui/emoji-picker.tsx", "content": "\"use client\";\nimport { Popover } from \"@base-ui/react/popover\";\nimport { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from \"motion/react\";\nimport { useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Clock, Search } from \"@/lib/icons\";\nimport { ease, spring, swap } from \"@/lib/motion\";\nimport { useControllableState } from \"@/lib/use-controllable-state\";\n\n/* ───────────────────────── data ───────────────────────── */\n// A curated set of the emoji people actually reach for in product conversations:\n// reactions, status, work objects. One line per emoji: glyph | name | keywords.\n// A trailing \"|t\" marks emoji that take a skin tone.\n\nexport type EmojiCategoryKey = \"smileys\" | \"people\" | \"nature\" | \"food\" | \"activity\" | \"travel\" | \"objects\" | \"symbols\" | \"flags\";\n\nexport type EmojiEntry = { emoji: string; name: string; keywords: string; tone: boolean; category: EmojiCategoryKey };\n\nconst raw: Record = {\n smileys: `\n😀|grinning face|smile happy\n😃|grinning face with big eyes|smile happy joy\n😄|grinning face with smiling eyes|smile happy laugh\n😁|beaming face|grin smile teeth\n😆|grinning squinting face|laugh lol\n😅|grinning face with sweat|relief nervous phew\n🤣|rolling on the floor laughing|rofl lol lmao\n😂|face with tears of joy|lol laugh crying\n🙂|slightly smiling face|smile fine\n🙃|upside down face|silly sarcasm\n😉|winking face|wink flirt\n😊|smiling face with smiling eyes|blush happy\n😇|smiling face with halo|angel innocent\n🥰|smiling face with hearts|love adore\n😍|smiling face with heart eyes|love crush\n🤩|star struck|wow amazing excited\n😘|face blowing a kiss|kiss love\n😋|face savoring food|yum delicious\n😛|face with tongue|tongue playful\n😜|winking face with tongue|crazy joke\n🤪|zany face|goofy wild\n🤑|money mouth face|rich money\n🤗|hugging face|hug thanks\n🤭|face with hand over mouth|oops giggle\n🫢|face with open eyes and hand over mouth|shock gasp\n🤫|shushing face|quiet secret\n🤔|thinking face|hmm think consider\n🫡|saluting face|salute respect ok\n🤐|zipper mouth face|secret quiet\n🤨|face with raised eyebrow|skeptical suspicious\n😐|neutral face|meh blank\n😑|expressionless face|blank unamused\n😶|face without mouth|speechless silent\n🫥|dotted line face|invisible hidden\n😏|smirking face|smirk smug\n😒|unamused face|meh annoyed\n🙄|face with rolling eyes|eyeroll whatever\n😬|grimacing face|awkward yikes\n😮‍💨|face exhaling|sigh relief tired\n😌|relieved face|calm content\n😔|pensive face|sad thoughtful\n😪|sleepy face|tired\n😴|sleeping face|sleep zzz tired\n😷|face with medical mask|sick mask ill\n🤒|face with thermometer|sick fever\n🤢|nauseated face|sick gross\n🥵|hot face|heat sweating\n🥶|cold face|freezing\n🥴|woozy face|dizzy tipsy\n😵‍💫|face with spiral eyes|dizzy confused\n🤯|exploding head|mind blown shocked\n🤠|cowboy hat face|yeehaw\n🥳|partying face|party celebrate birthday\n🥸|disguised face|incognito\n😎|smiling face with sunglasses|cool\n🤓|nerd face|geek smart\n🧐|face with monocle|inspect curious\n😕|confused face|unsure\n🫤|face with diagonal mouth|skeptical unsure\n😟|worried face|concern nervous\n🙁|slightly frowning face|sad\n😮|face with open mouth|wow surprise\n😲|astonished face|shock amazed\n😳|flushed face|embarrassed blush\n🥺|pleading face|please puppy eyes\n🥹|face holding back tears|touched grateful\n😨|fearful face|scared\n😰|anxious face with sweat|nervous stress\n😢|crying face|sad tear\n😭|loudly crying face|sob sad\n😱|face screaming in fear|scream horror\n😩|weary face|tired frustrated\n😫|tired face|exhausted\n🥱|yawning face|bored tired\n😤|face with steam from nose|triumph frustrated\n😡|enraged face|angry mad\n🤬|face with symbols on mouth|swear angry\n😈|smiling face with horns|devil mischief\n💀|skull|dead lol\n💩|pile of poo|poop\n🤡|clown face|clown\n👻|ghost|boo halloween\n👽|alien|ufo extraterrestrial\n🤖|robot|bot ai automation`,\n people: `\n👋|waving hand|hello hi bye wave|t\n🤚|raised back of hand|stop|t\n✋|raised hand|high five stop|t\n🖖|vulcan salute|spock|t\n👌|ok hand|okay perfect|t\n🤌|pinched fingers|italian what|t\n🤏|pinching hand|small tiny little|t\n✌️|victory hand|peace two|t\n🤞|crossed fingers|luck hope|t\n🫰|hand with index finger and thumb crossed|love money|t\n🤟|love you gesture|ily|t\n🤘|sign of the horns|rock metal|t\n🤙|call me hand|shaka call|t\n👈|backhand index pointing left|left point|t\n👉|backhand index pointing right|right point|t\n👆|backhand index pointing up|up point above|t\n👇|backhand index pointing down|down point below|t\n☝️|index pointing up|one first|t\n🫵|index pointing at the viewer|you point|t\n👍|thumbs up|yes approve like agree +1|t\n👎|thumbs down|no disapprove dislike -1|t\n✊|raised fist|power solidarity|t\n👊|oncoming fist|punch bump|t\n👏|clapping hands|applause bravo congrats|t\n🙌|raising hands|celebrate hooray praise|t\n🫶|heart hands|love thanks|t\n👐|open hands|hug jazz|t\n🤲|palms up together|prayer offer|t\n🙏|folded hands|please thanks pray|t\n✍️|writing hand|write sign|t\n💪|flexed biceps|strong muscle|t\n🤝|handshake|deal agreement partner\n👀|eyes|look watching see\n🧠|brain|smart think idea\n🫂|people hugging|hug support comfort\n🧑‍💻|technologist|developer engineer coder laptop|t\n🧑‍🎨|artist|designer painter creative|t\n🧑‍🔬|scientist|research lab|t\n🧑‍🚀|astronaut|space rocket|t\n🧑‍🍳|cook|chef kitchen|t\n🙋|person raising hand|question me volunteer|t\n🙇|person bowing|sorry respect thanks|t\n🤷|person shrugging|dunno whatever shrug|t\n🤦|person facepalming|facepalm ugh|t\n💁|person tipping hand|info sass|t\n🏃|person running|run hurry late|t`,\n nature: `\n🐶|dog face|puppy pet\n🐱|cat face|kitty pet\n🐭|mouse face|mouse\n🐰|rabbit face|bunny\n🦊|fox|fox clever\n🐻|bear|bear\n🐼|panda|panda\n🐨|koala|koala\n🐯|tiger face|tiger\n🦁|lion|lion king\n🐮|cow face|cow\n🐷|pig face|pig\n🐸|frog|frog\n🐵|monkey face|monkey\n🙈|see no evil monkey|oops shy\n🐔|chicken|chicken\n🐧|penguin|penguin\n🦉|owl|owl wise night\n🐝|honeybee|bee busy\n🦋|butterfly|butterfly\n🐢|turtle|slow turtle\n🐍|snake|snake python\n🐙|octopus|octopus\n🐬|dolphin|dolphin\n🐳|spouting whale|whale docker\n🦄|unicorn|unicorn magic startup\n🌵|cactus|desert plant\n🌲|evergreen tree|tree pine forest\n🌴|palm tree|beach tropical\n🌱|seedling|grow sprout new\n🌿|herb|leaf plant\n🍀|four leaf clover|luck lucky\n🍁|maple leaf|autumn fall canada\n🌸|cherry blossom|flower spring\n🌻|sunflower|flower summer\n🌹|rose|flower love\n🌈|rainbow|pride colors\n☀️|sun|sunny weather\n🌙|crescent moon|night moon\n⭐|star|favorite star\n⚡|high voltage|lightning fast zap\n❄️|snowflake|cold winter freeze\n🔥|fire|hot lit flame\n🌊|water wave|ocean sea wave\n💧|droplet|water drop`,\n food: `\n🍎|red apple|apple fruit\n🍐|pear|pear fruit\n🍊|tangerine|orange fruit\n🍋|lemon|lemon sour\n🍌|banana|banana fruit\n🍉|watermelon|watermelon summer\n🍇|grapes|grapes wine\n🍓|strawberry|strawberry berry\n🫐|blueberries|blueberry\n🍒|cherries|cherry\n🍑|peach|peach\n🥭|mango|mango\n🍍|pineapple|pineapple\n🥥|coconut|coconut\n🥑|avocado|avocado toast\n🍅|tomato|tomato\n🥕|carrot|carrot vegetable\n🌽|ear of corn|corn\n🌶️|hot pepper|spicy chili\n🥐|croissant|breakfast pastry french\n🍞|bread|toast loaf\n🧀|cheese wedge|cheese\n🥚|egg|egg breakfast\n🥓|bacon|bacon breakfast\n🥞|pancakes|breakfast pancakes\n🍔|hamburger|burger\n🍟|french fries|fries chips\n🍕|pizza|pizza slice\n🌮|taco|taco mexican\n🌯|burrito|burrito wrap\n🥗|green salad|salad healthy\n🍣|sushi|sushi japanese\n🍜|steaming bowl|ramen noodles\n🍝|spaghetti|pasta\n🍩|doughnut|donut sweet\n🍪|cookie|cookie biscuit\n🎂|birthday cake|birthday cake\n🍰|shortcake|cake dessert\n🍫|chocolate bar|chocolate sweet\n🍿|popcorn|movie snack\n☕|hot beverage|coffee tea morning\n🍵|teacup without handle|tea matcha\n🧋|bubble tea|boba\n🥤|cup with straw|soda drink\n🍺|beer mug|beer drink\n🍷|wine glass|wine\n🥂|clinking glasses|cheers toast celebrate\n🍾|bottle with popping cork|champagne celebrate launch`,\n activity: `\n⚽|soccer ball|football sport\n🏀|basketball|basketball sport\n🏈|american football|football\n⚾|baseball|baseball\n🎾|tennis|tennis\n🏐|volleyball|volleyball\n🏓|ping pong|table tennis\n⛳|flag in hole|golf\n🎯|direct hit|target bullseye goal\n🏆|trophy|win award champion\n🥇|1st place medal|gold first winner\n🥈|2nd place medal|silver second\n🥉|3rd place medal|bronze third\n🏅|sports medal|medal award\n🎮|video game|gaming controller\n🕹️|joystick|arcade game\n🎲|game die|dice random\n🧩|puzzle piece|puzzle integration\n♟️|chess pawn|chess strategy\n🎨|artist palette|design art paint\n🎬|clapper board|film movie action\n🎤|microphone|sing karaoke\n🎧|headphone|music listen\n🎸|guitar|music rock\n🎹|musical keyboard|piano music\n🎉|party popper|celebrate congrats tada\n🎊|confetti ball|celebrate party\n🎁|wrapped gift|present gift birthday\n🎈|balloon|party birthday`,\n travel: `\n🚗|automobile|car drive\n🚕|taxi|cab\n🚌|bus|bus transit\n🚲|bicycle|bike cycle\n🛴|kick scooter|scooter\n🚄|high speed train|train fast\n✈️|airplane|flight travel plane\n🛫|airplane departure|takeoff flight\n🚀|rocket|launch ship deploy space\n🛸|flying saucer|ufo\n🚁|helicopter|helicopter\n⛵|sailboat|boat sail\n🚢|ship|cruise boat\n⚓|anchor|anchor harbour\n🗺️|world map|map travel\n🧭|compass|direction navigate\n🏔️|snow capped mountain|mountain\n🏕️|camping|camp tent\n🏖️|beach with umbrella|beach holiday vacation\n🏝️|desert island|island vacation\n🏙️|cityscape|city skyline\n🏠|house|home\n🏢|office building|office work company\n🏰|castle|castle\n🗽|statue of liberty|new york\n🌍|globe showing europe africa|world earth global\n🌎|globe showing americas|world earth global\n🌏|globe showing asia australia|world earth global`,\n objects: `\n💻|laptop|computer work mac\n⌨️|keyboard|type keyboard\n🖥️|desktop computer|monitor screen\n🖱️|computer mouse|mouse click\n📱|mobile phone|phone iphone\n☎️|telephone|phone call\n📷|camera|photo picture\n🎥|movie camera|video film\n📺|television|tv\n🔋|battery|battery power\n🔌|electric plug|plug power\n💡|light bulb|idea bright\n🔦|flashlight|torch\n🕯️|candle|candle light\n📚|books|library read study\n📖|open book|read docs\n📝|memo|note write todo\n✏️|pencil|edit write\n🖊️|pen|write sign\n📌|pushpin|pin important\n📎|paperclip|attach attachment\n✂️|scissors|cut\n📁|file folder|folder directory\n🗂️|card index dividers|organize files\n📅|calendar|date schedule\n📊|bar chart|stats analytics\n📈|chart increasing|growth up metrics\n📉|chart decreasing|down drop metrics\n🔒|locked|lock secure private\n🔓|unlocked|unlock open\n🔑|key|password key access\n🔨|hammer|build fix\n🛠️|hammer and wrench|tools fix build\n⚙️|gear|settings config\n🧪|test tube|test experiment lab\n🔬|microscope|research science\n💊|pill|medicine\n💰|money bag|money revenue\n💳|credit card|payment card billing\n📦|package|box ship delivery release\n✉️|envelope|email mail letter\n📣|megaphone|announce announcement\n🔔|bell|notification alert\n⏰|alarm clock|alarm time wake\n⏳|hourglass not done|waiting time loading\n🗑️|wastebasket|trash delete bin`,\n symbols: `\n❤️|red heart|love like\n🧡|orange heart|love\n💛|yellow heart|love\n💚|green heart|love\n💙|blue heart|love\n💜|purple heart|love\n🖤|black heart|love\n🤍|white heart|love\n💔|broken heart|heartbreak sad\n❤️‍🔥|heart on fire|passion love\n💯|hundred points|100 perfect score\n✅|check mark button|done yes complete\n☑️|check box with check|done checked\n✔️|check mark|done yes\n❌|cross mark|no wrong cancel\n❎|cross mark button|no cancel\n➕|plus|add plus\n➖|minus|subtract minus\n❓|red question mark|question help\n❗|red exclamation mark|important alert\n‼️|double exclamation mark|urgent\n⚠️|warning|caution alert\n🚫|prohibited|forbidden no ban\n⛔|no entry|stop blocked\n🔴|red circle|red status\n🟠|orange circle|orange status\n🟡|yellow circle|yellow status\n🟢|green circle|green status online\n🔵|blue circle|blue status\n🟣|purple circle|purple\n⚫|black circle|black\n⚪|white circle|white\n♻️|recycling symbol|recycle reuse\n🆕|new button|new\n🆗|ok button|ok okay\n🔝|top arrow|top\n▶️|play button|play start\n⏸️|pause button|pause\n⏹️|stop button|stop\n🔁|repeat button|repeat loop retry\n➡️|right arrow|right next\n⬅️|left arrow|left back\n⬆️|up arrow|up\n⬇️|down arrow|down\n💤|zzz|sleep\n💬|speech balloon|comment chat message\n💭|thought balloon|thinking\n👁️‍🗨️|eye in speech bubble|witness`,\n flags: `\n🏁|chequered flag|finish race done\n🚩|triangular flag|red flag warning\n🏳️|white flag|surrender\n🏴|black flag|flag\n🏳️‍🌈|rainbow flag|pride lgbt\n🇺🇸|flag united states|usa america us\n🇬🇧|flag united kingdom|uk britain gb\n🇨🇦|flag canada|canada ca\n🇩🇪|flag germany|germany de\n🇫🇷|flag france|france fr\n🇪🇸|flag spain|spain es\n🇮🇹|flag italy|italy it\n🇳🇱|flag netherlands|netherlands nl dutch\n🇸🇪|flag sweden|sweden se\n🇯🇵|flag japan|japan jp\n🇰🇷|flag south korea|korea kr\n🇮🇳|flag india|india in\n🇧🇷|flag brazil|brazil br\n🇲🇽|flag mexico|mexico mx\n🇦🇺|flag australia|australia au`,\n};\n\nconst categories: { key: EmojiCategoryKey; label: string }[] = [\n { key: \"smileys\", label: \"Smileys\" },\n { key: \"people\", label: \"People & hands\" },\n { key: \"nature\", label: \"Animals & nature\" },\n { key: \"food\", label: \"Food & drink\" },\n { key: \"activity\", label: \"Activities\" },\n { key: \"travel\", label: \"Travel & places\" },\n { key: \"objects\", label: \"Objects\" },\n { key: \"symbols\", label: \"Symbols\" },\n { key: \"flags\", label: \"Flags\" },\n];\n\nconst emojis: EmojiEntry[] = categories.flatMap(({ key }) =>\n raw[key]\n .trim()\n .split(\"\\n\")\n .map((line) => {\n const [emoji, name, keywords, tone] = line.split(\"|\");\n return { emoji, name, keywords, tone: tone === \"t\", category: key };\n }),\n);\n\n/* ───────────────────────── skin tones ───────────────────────── */\n\nconst TONES = [\"\", \"\\u{1F3FB}\", \"\\u{1F3FC}\", \"\\u{1F3FD}\", \"\\u{1F3FE}\", \"\\u{1F3FF}\"] as const;\nconst TONE_NAMES = [\"Default\", \"Light\", \"Medium-light\", \"Medium\", \"Medium-dark\", \"Dark\"];\nexport type SkinTone = 0 | 1 | 2 | 3 | 4 | 5;\n\n/** Puts a skin tone modifier after the first code point (dropping a variation selector there), which also works for ZWJ people like 🧑‍💻. */\nexport function withSkinTone(emoji: string, tone: SkinTone) {\n if (!tone) return emoji;\n const [first, ...rest] = [...emoji];\n if (rest[0] === \"️\") rest.shift();\n return first + TONES[tone] + rest.join(\"\");\n}\n\nexport type PickedEmoji = { emoji: string; base: string; name: string; shortcode: string };\nconst shortcode = (name: string) => `:${name.toLowerCase().replace(/[^a-z0-9]+/g, \"_\").replace(/^_|_$/g, \"\")}:`;\nconst byGlyph = new Map(emojis.map((e) => [e.emoji, e]));\n\nfunction search(q: string) {\n const query = q.trim().toLowerCase();\n if (!query) return [];\n const direct = byGlyph.get(query);\n if (direct) return [direct];\n const tokens = query.replace(/^:|:$/g, \"\").split(/[\\s_]+/).filter(Boolean);\n const scored: { e: EmojiEntry; score: number }[] = [];\n for (const e of emojis) {\n const hay = ` ${e.name} ${e.keywords} `.toLowerCase();\n if (!tokens.every((t) => hay.includes(` ${t}`))) continue;\n // Names that start with the query first, then names that contain it, then keyword hits.\n const score = e.name.startsWith(tokens[0]) ? 0 : ` ${e.name}`.includes(` ${tokens[0]}`) ? 1 : 2;\n scored.push({ e, score });\n }\n return scored.sort((a, b) => a.score - b.score).map((s) => s.e);\n}\n\n/* ───────────────────────── icons ───────────────────────── */\n\nconst svg = { width: 16, height: 16, viewBox: \"0 0 16 16\", fill: \"none\", stroke: \"currentColor\", strokeWidth: 1.4, strokeLinecap: \"round\" as const, strokeLinejoin: \"round\" as const, \"aria-hidden\": true };\nconst CategoryIcon = ({ k }: { k: string }) => {\n switch (k) {\n case \"recent\": return ;\n case \"smileys\": return ;\n case \"people\": return ;\n case \"nature\": return ;\n case \"food\": return ;\n case \"activity\": return ;\n case \"travel\": return ;\n case \"objects\": return ;\n case \"symbols\": return ;\n case \"flags\": return ;\n default: return ;\n }\n};\n\nfunction SmileyPlus() {\n return (\n \n \n \n \n \n \n \n );\n}\n\n/* ───────────────────────── the panel ───────────────────────── */\n\nconst COLS = 8;\nconst CELL = 34;\ntype Section = { key: string; label: string; items: EmojiEntry[] };\ntype Cell = { id: string; entry: EmojiEntry; row: number; col: number };\n\nexport type EmojiPickerPanelProps = Omit, \"onSelect\"> & {\n onEmojiSelect?: (picked: PickedEmoji) => void;\n skinTone?: SkinTone;\n defaultSkinTone?: SkinTone;\n onSkinToneChange?: (tone: SkinTone) => void;\n /** Base glyphs, most recent first. The row reorders the next time the panel mounts, so nothing moves under the pointer. */\n recent?: string[];\n defaultRecent?: string[];\n onRecentChange?: (recent: string[]) => void;\n recentLimit?: number;\n /** Focus the search field on mount. */\n autoFocus?: boolean;\n};\n\nexport function EmojiPickerPanel({\n onEmojiSelect,\n skinTone: toneProp,\n defaultSkinTone = 0,\n onSkinToneChange,\n recent: recentProp,\n defaultRecent = [],\n onRecentChange,\n recentLimit = 16,\n autoFocus = false,\n className,\n ...rest\n}: EmojiPickerPanelProps) {\n const uid = useId();\n const reduce = useReducedMotion();\n const [tone, setTone] = useControllableState({ value: toneProp, defaultValue: defaultSkinTone, onChange: onSkinToneChange });\n const [recent, setRecent] = useControllableState({ value: recentProp, defaultValue: defaultRecent, onChange: onRecentChange });\n // The recent row as it was when the panel opened.\n const [shownRecent] = useState(recent);\n const [query, setQuery] = useState(\"\");\n const [active, setActive] = useState<{ id: string; via: \"pointer\" | \"keyboard\" } | null>(null);\n const [gridMode, setGridMode] = useState(false);\n const [spy, setSpy] = useState(shownRecent.length ? \"recent\" : \"smileys\");\n const [toneOpen, setToneOpen] = useState(false);\n\n const scroller = useRef(null);\n const inputRef = useRef(null);\n const toneButton = useRef(null);\n const jumpLock = useRef(undefined);\n const hx = useMotionValue(0);\n const hy = useMotionValue(0);\n const shownOnce = useRef(false);\n\n const searching = query.trim().length > 0;\n const sections: Section[] = useMemo(() => {\n if (searching) return [{ key: \"results\", label: \"Results\", items: search(query) }];\n const recentItems = shownRecent.map((g) => byGlyph.get(g)).filter((e): e is EmojiEntry => !!e);\n return [\n ...(recentItems.length ? [{ key: \"recent\", label: \"Recent\", items: recentItems }] : []),\n ...categories.map((c) => ({ key: c.key, label: c.label, items: emojis.filter((e) => e.category === c.key) })),\n ];\n }, [searching, query, shownRecent]);\n\n // Rows across every section, for arrow keys that cross section boundaries.\n const { rows, byId } = useMemo(() => {\n const rows: Cell[][] = [];\n const byId = new Map();\n for (const s of sections) {\n for (let i = 0; i < s.items.length; i += COLS) {\n const row = s.items.slice(i, i + COLS).map((entry, c) => {\n const cell = { id: `${uid}-${s.key}-${i + c}`, entry, row: rows.length, col: c };\n byId.set(cell.id, cell);\n return cell;\n });\n rows.push(row);\n }\n }\n return { rows, byId };\n }, [sections, uid]);\n\n const activeCell = active ? byId.get(active.id) : undefined;\n const preview = activeCell?.entry;\n\n // Glide one highlight to the active cell. Keyboard moves and first appearances jump.\n useLayoutEffect(() => {\n const el = activeCell ? document.getElementById(activeCell.id) : null;\n if (!el) return;\n const x = el.offsetLeft, y = el.offsetTop;\n if (active?.via === \"pointer\" && shownOnce.current && !reduce) {\n const a = animate(hx, x, spring.follow);\n const b = animate(hy, y, spring.follow);\n return () => {\n a.stop();\n b.stop();\n };\n }\n hx.set(x);\n hy.set(y);\n shownOnce.current = true;\n if (active?.via === \"keyboard\") el.scrollIntoView({ block: \"nearest\" });\n }, [activeCell, active?.via, hx, hy, reduce]);\n\n useLayoutEffect(() => {\n if (autoFocus) inputRef.current?.focus({ preventScroll: true });\n }, [autoFocus]);\n useLayoutEffect(() => () => window.clearTimeout(jumpLock.current), []);\n\n const pick = (entry: EmojiEntry) => {\n const glyph = entry.tone ? withSkinTone(entry.emoji, tone) : entry.emoji;\n setRecent([entry.emoji, ...recent.filter((g) => g !== entry.emoji)].slice(0, recentLimit));\n onEmojiSelect?.({ emoji: glyph, base: entry.emoji, name: entry.name, shortcode: shortcode(entry.name) });\n };\n\n const moveTo = (cell: Cell | undefined) => cell && setActive({ id: cell.id, via: \"keyboard\" });\n\n const onSearchKey = (e: React.KeyboardEvent) => {\n const cur = activeCell;\n const grid = !query || gridMode;\n switch (e.key) {\n case \"ArrowDown\": {\n e.preventDefault();\n setGridMode(true);\n if (!cur) return moveTo(rows[0]?.[0]);\n const next = rows[cur.row + 1];\n return moveTo(next?.[Math.min(cur.col, next.length - 1)]);\n }\n case \"ArrowUp\": {\n e.preventDefault();\n setGridMode(true);\n if (!cur) return;\n const prev = rows[cur.row - 1];\n return moveTo(prev?.[Math.min(cur.col, prev.length - 1)]);\n }\n case \"ArrowRight\":\n case \"ArrowLeft\": {\n if (!grid) return;\n e.preventDefault();\n setGridMode(true);\n const flat = rows.flat();\n const i = cur ? flat.findIndex((c) => c.id === cur.id) : -1;\n return moveTo(flat[Math.max(0, Math.min(flat.length - 1, i + (e.key === \"ArrowRight\" ? 1 : -1)))]);\n }\n case \"Enter\": {\n e.preventDefault();\n const target = cur?.entry ?? (searching ? rows[0]?.[0]?.entry : undefined);\n if (target) pick(target);\n return;\n }\n case \"Escape\":\n if (query) {\n // The first Escape clears the search; the next one closes whatever holds the panel.\n e.preventDefault();\n e.stopPropagation();\n setQuery(\"\");\n setActive(null);\n }\n return;\n }\n };\n\n const onScroll = () => {\n if (jumpLock.current !== undefined || searching) return;\n const el = scroller.current;\n if (!el) return;\n let current: string | undefined = sections[0]?.key;\n for (const s of el.querySelectorAll(\"[data-section]\")) {\n if (s.offsetTop - 1 <= el.scrollTop) current = s.dataset.section;\n }\n if (current && current !== spy) setSpy(current);\n };\n\n const jump = (key: string, instant: boolean) => {\n const el = scroller.current;\n const target = el?.querySelector(`[data-section=\"${key}\"]`);\n if (!el || !target) return;\n setSpy(key);\n window.clearTimeout(jumpLock.current);\n // Hold the indicator on the target while a smooth scroll passes the sections in between.\n jumpLock.current = window.setTimeout(() => (jumpLock.current = undefined), instant || reduce ? 50 : 700);\n el.scrollTo({ top: target.offsetTop, behavior: instant || reduce ? \"auto\" : \"smooth\" });\n };\n\n const tabKeys = [...(shownRecent.length ? [\"recent\"] : []), ...categories.map((c) => c.key)];\n const tabLabel = (k: string) => (k === \"recent\" ? \"Recent\" : categories.find((c) => c.key === k)!.label);\n\n return (\n
\n {/* Search and skin tone */}\n
\n \n setToneOpen(true)}\n aria-label={`Skin tone: ${TONE_NAMES[tone]}`}\n aria-expanded={toneOpen}\n className=\"relative grid size-8 shrink-0 place-items-center rounded-lg text-[18px] leading-none outline-none transition-[background-color,scale] duration-150 hover:bg-fg/5 active:scale-[0.92] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-fg-3\"\n >\n \n \n {withSkinTone(\"✋\", tone)}\n \n \n \n\n \n {toneOpen && (\n {\n setTone(t);\n setToneOpen(false);\n toneButton.current?.focus();\n }}\n onDismiss={() => {\n setToneOpen(false);\n toneButton.current?.focus();\n }}\n />\n )}\n \n
\n\n {/* Category jumps; the pill follows the scroll. */}\n
\n {tabKeys.map((k) => {\n const on = !searching && spy === k;\n return (\n jump(k, e.detail === 0)}\n className={cn(\n \"relative grid size-7 place-items-center rounded-md outline-none transition-[color,scale] duration-150 active:scale-[0.9] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-fg-3\",\n on ? \"text-fg\" : \"text-fg-3 hover:text-fg-2\",\n )}\n >\n {on && }\n \n \n \n \n );\n })}\n
\n\n {/* The grid. Focus stays in search; arrows move the active cell. */}\n \n
\n {activeCell && (\n \n )}\n {sections.map((s) => (\n
\n
\n {s.key === \"results\" ? (s.items.length === 1 ? \"1 result\" : `${s.items.length} results`) : s.label}\n
\n {s.items.length === 0 && s.key === \"results\" && (\n
\n

No emoji match “{query.trim()}”

\n

Try a feeling or an object, like “party” or “rocket”.

\n
\n )}\n {rows\n .filter((r) => r[0] && r[0].id.startsWith(`${uid}-${s.key}-`))\n .map((r) => (\n
\n {r.map((c) => {\n const glyph = c.entry.tone ? withSkinTone(c.entry.emoji, tone) : c.entry.emoji;\n return (\n setActive({ id: c.id, via: \"pointer\" })}\n onMouseDown={(e) => e.preventDefault()}\n onClick={() => pick(c.entry)}\n className=\"group/cell relative grid shrink-0 cursor-default scroll-mt-8 scroll-mb-1 select-none place-items-center\"\n style={{ width: CELL, height: CELL }}\n >\n {glyph}\n
\n );\n })}\n
\n ))}\n
\n ))}\n
\n \n\n {/* Preview of what Enter or a click will insert. */}\n
\n {preview ? (\n <>\n \n {preview.tone ? withSkinTone(preview.emoji, tone) : preview.emoji}\n \n
\n {preview.name}\n {shortcode(preview.name)}\n
\n \n ) : (\n Pick an emoji, or search by name\n )}\n
\n \n );\n}\n\nfunction ToneStrip({ tone, reduce, onChoose, onDismiss }: { tone: SkinTone; reduce: boolean; onChoose: (t: SkinTone) => void; onDismiss: () => void }) {\n const refs = useRef<(HTMLButtonElement | null)[]>([]);\n const [focus, setFocus] = useState(tone);\n useLayoutEffect(() => {\n refs.current[focus]?.focus();\n }, [focus]);\n return (\n {\n if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n onDismiss();\n } else if (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n e.preventDefault();\n setFocus((f) => (f + (e.key === \"ArrowRight\" ? 1 : -1) + 6) % 6);\n }\n }}\n onBlur={(e) => {\n if (!e.currentTarget.contains(e.relatedTarget as Node)) onDismiss();\n }}\n >\n {TONES.map((_, t) => (\n {\n refs.current[t] = el;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={tone === t}\n aria-label={TONE_NAMES[t]}\n tabIndex={focus === t ? 0 : -1}\n onClick={() => onChoose(t as SkinTone)}\n initial={reduce ? false : { opacity: 0, x: 6 }}\n animate={{ opacity: 1, x: 0 }}\n transition={{ duration: 0.2, ease: ease.out, delay: reduce ? 0 : (5 - t) * 0.018 }}\n className=\"relative grid size-7 place-items-center rounded-md text-[18px] leading-none outline-none transition-[background-color,scale] duration-150 hover:bg-fg/5 active:scale-[0.88] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-fg-3 aria-checked:bg-fg/[0.08]\"\n >\n {withSkinTone(\"✋\", t as SkinTone)}\n \n ))}\n \n );\n}\n\n/* ───────────────────────── the popover ───────────────────────── */\n\nexport type EmojiPickerProps = Omit & {\n /** Your own trigger element. Defaults to an \"Add reaction\" icon button. */\n trigger?: React.ReactElement>;\n /** Accessible name for the default trigger and the popup. */\n label?: string;\n /** Close after a pick. Turn off for composers where people insert several in a row. */\n closeOnSelect?: boolean;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n align?: \"start\" | \"center\" | \"end\";\n className?: string;\n};\n\nexport function EmojiPicker({\n trigger,\n label = \"Add reaction\",\n closeOnSelect = true,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n side = \"bottom\",\n align = \"start\",\n className,\n onEmojiSelect,\n recent: recentProp,\n defaultRecent = [],\n onRecentChange,\n skinTone: toneProp,\n defaultSkinTone = 0,\n onSkinToneChange,\n ...panel\n}: EmojiPickerProps) {\n const [open, setOpen] = useControllableState({ value: openProp, defaultValue: defaultOpen, onChange: onOpenChange });\n // Lifted here so they outlive the popup unmounting between opens.\n const [recent, setRecent] = useControllableState({ value: recentProp, defaultValue: defaultRecent, onChange: onRecentChange });\n const [tone, setTone] = useControllableState({ value: toneProp, defaultValue: defaultSkinTone, onChange: onSkinToneChange });\n\n return (\n \n {trigger ? (\n \n ) : (\n \n \n \n )}\n \n \n \n {\n onEmojiSelect?.(p);\n if (closeOnSelect) setOpen(false);\n }}\n />\n \n \n \n \n );\n}\n", "type": "registry:ui" } ], "docs": "https://www.stealth.pm/ui/emoji-picker" }