"use client"; import * as React from "react"; import { Popover as PopoverPrimitive } from "radix-ui"; import { cn } from "@kineticui/core"; import { SearchIcon } from "@kineticui/icons"; /* Compact built-in set: [emoji, keywords]. Pass your own `emojis` for a full set. */ const DATA: Record = { Smileys: [["😀", "grin happy"], ["😄", "smile happy"], ["😂", "joy laugh tears"], ["🙂", "slight smile"], ["😉", "wink"], ["😍", "love heart eyes"], ["🥰", "love hearts"], ["😎", "cool sunglasses"], ["🤔", "thinking hmm"], ["😅", "sweat relief"], ["😭", "cry sob"], ["😡", "angry mad"], ["🥳", "party celebrate"], ["😴", "sleep tired"], ["🤯", "mind blown"], ["😬", "grimace awkward"], ["🙃", "upside down"], ["🤗", "hug"], ["😇", "angel innocent"], ["🫠", "melt"]], Gestures: [["👍", "thumbs up yes like"], ["👎", "thumbs down no"], ["👏", "clap applause"], ["🙌", "raise hands hooray"], ["🙏", "pray thanks please"], ["👋", "wave hi bye"], ["🤝", "handshake deal"], ["💪", "strong flex"], ["✌️", "peace victory"], ["🤞", "fingers crossed luck"], ["👀", "eyes look"], ["🫡", "salute"]], Hearts: [["❤️", "red heart love"], ["🧡", "orange heart"], ["💛", "yellow heart"], ["💚", "green heart"], ["💙", "blue heart"], ["💜", "purple heart"], ["🖤", "black heart"], ["🤍", "white heart"], ["💔", "broken heart"], ["💯", "hundred perfect"]], Objects: [["🔥", "fire lit hot"], ["✨", "sparkles magic"], ["🎉", "party tada"], ["🚀", "rocket launch ship"], ["💡", "idea bulb"], ["✅", "check done"], ["❌", "cross no"], ["⚠️", "warning"], ["📌", "pin"], ["📎", "paperclip"], ["🗓️", "calendar"], ["⏰", "alarm time"], ["💻", "laptop computer"], ["📱", "phone mobile"], ["☕", "coffee"], ["🎯", "target goal"], ["🏆", "trophy win"], ["🐛", "bug"], ["🔒", "lock secure"], ["📈", "chart up growth"]], Nature: [["🌱", "seedling grow"], ["🌸", "blossom flower"], ["🌈", "rainbow"], ["⭐", "star"], ["🌙", "moon night"], ["☀️", "sun"], ["⚡", "zap lightning"], ["🌊", "wave ocean"], ["🍀", "clover luck"], ["🐶", "dog"], ["🐱", "cat"], ["🦄", "unicorn"]], }; const RECENT_KEY = "kn-emoji-recent"; export type EmojiPickerProps = { onSelect: (emoji: string) => void; /** Custom data: { Category: [[emoji, "keywords"], …] }. */ emojis?: Record; /** Pop over a trigger element instead of rendering inline. */ trigger?: React.ReactElement; className?: string; }; function Panel({ onSelect, emojis, className, close }: { onSelect: (e: string) => void; emojis: Record; className?: string; close?: () => void }) { const [q, setQ] = React.useState(""); const [recent, setRecent] = React.useState([]); const [cat, setCat] = React.useState(Object.keys(emojis)[0]!); const [hover, setHover] = React.useState<[string, string] | null>(null); const scroller = React.useRef(null); React.useEffect(() => { try { setRecent(JSON.parse(localStorage.getItem(RECENT_KEY) ?? "[]") as string[]); } catch { /* ignore */ } }, []); const pick = (e: string) => { onSelect(e); const next = [e, ...recent.filter((x) => x !== e)].slice(0, 16); setRecent(next); try { localStorage.setItem(RECENT_KEY, JSON.stringify(next)); } catch { /* ignore */ } close?.(); }; const filtered: Record = q ? { Results: Object.values(emojis).flat().filter(([, k]) => k.includes(q.toLowerCase())) } : { ...(recent.length ? { Recent: recent.map((r) => [r, "recent"] as [string, string]) } : {}), ...emojis }; return (

setQ(e.target.value)} placeholder="Search emoji" aria-label="Search emoji" className="h-11 flex-1 bg-transparent text-sm outline-none placeholder:text-subtle" />

{!q ? (

{Object.keys(emojis).map((c) => ( ))}

) : null}

{Object.entries(filtered).map(([c, list]) => (

{c}

{list.map(([e, k]) => ( ))}

))} {q && !filtered.Results?.length ?

No emoji found

: null}

{hover ? ( <> {hover[0]} :{hover[1].split(" ")[0]}: ) : ( Pick an emoji )}

); } /** Searchable emoji picker with categories and remembered recents. Inline or in a popover. */ export function EmojiPicker({ onSelect, emojis = DATA, trigger, className }: EmojiPickerProps) { const [open, setOpen] = React.useState(false); if (!trigger) return ; return ( {trigger} setOpen(false)} /> ); } export type ReactionBarProps = { reactions: { emoji: string; count: number; mine?: boolean }[]; onToggle: (emoji: string) => void; className?: string; }; /** Slack-style reaction chips with an add-reaction picker. */ export function ReactionBar({ reactions, onToggle, className }: ReactionBarProps) { return (

{reactions.map((r) => ( ))} + } />

); }

Emoji Picker & Reactions

Installation

Exports