@refraction-ui/astro 0.4.2 → 0.4.4

package/dist/dropdown-menu/dropdown-menu.ts

@@ -0,0 +1,139 @@
+import type { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.ts'
+import { createMachine, Keys, generateId } from '../shared/index.ts'
+
+export interface DropdownMenuProps {
+  /** Whether the menu is open (controlled) */
+  open?: boolean
+  /** Whether the menu starts open (uncontrolled) */
+  defaultOpen?: boolean
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void
+}
+
+export interface MenuItemProps {
+  /** Whether the item is disabled */
+  disabled?: boolean
+  /** Callback when the item is selected */
+  onSelect?: () => void
+}
+
+export interface DropdownMenuState {
+  open: boolean
+}
+
+export interface DropdownMenuAPI {
+  /** Current menu state */
+  state: DropdownMenuState
+  /** ARIA attributes for the trigger button */
+  triggerProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** ARIA attributes for the menu content */
+  contentProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** Factory for menu item props */
+  getItemProps(item: MenuItemProps): Partial<AccessibilityProps> & Record<string, unknown>
+  /** Open the menu */
+  open(): void
+  /** Close the menu */
+  close(): void
+  /** Toggle the menu */
+  toggle(): void
+  /** Keyboard handlers for the menu */
+  keyboardHandlers: KeyboardHandlerMap
+  /** Generated IDs for aria linking */
+  ids: {
+    content: string
+  }
+}
+
+export function createDropdownMenu(props: DropdownMenuProps = {}): DropdownMenuAPI {
+  const { open: controlledOpen, defaultOpen = false, onOpenChange } = props
+
+  const machine = createMachine<'open' | 'closed', 'OPEN' | 'CLOSE'>({
+    initial: controlledOpen ?? defaultOpen ? 'open' : 'closed',
+    states: {
+      closed: { on: { OPEN: 'open' } },
+      open: { on: { CLOSE: 'closed' } },
+    },
+  })
+
+  const contentId = generateId('rfr-dropdown-menu')
+
+  function isOpen(): boolean {
+    if (controlledOpen !== undefined) return controlledOpen
+    return machine.matches('open')
+  }
+
+  function openMenu(): void {
+    machine.send('OPEN')
+    onOpenChange?.(true)
+  }
+
+  function closeMenu(): void {
+    machine.send('CLOSE')
+    onOpenChange?.(false)
+  }
+
+  function toggleMenu(): void {
+    if (isOpen()) {
+      closeMenu()
+    } else {
+      openMenu()
+    }
+  }
+
+  function getItemProps(item: MenuItemProps): Partial<AccessibilityProps> & Record<string, unknown> {
+    return {
+      role: 'menuitem',
+      tabIndex: item.disabled ? -1 : 0,
+      'data-disabled': item.disabled ? '' : undefined,
+      'aria-disabled': item.disabled || undefined,
+    }
+  }
+
+  const keyboardHandlers: KeyboardHandlerMap = {
+    [Keys.Escape]: (e) => {
+      e.preventDefault()
+      closeMenu()
+    },
+    [Keys.ArrowDown]: (e) => {
+      e.preventDefault()
+    },
+    [Keys.ArrowUp]: (e) => {
+      e.preventDefault()
+    },
+    [Keys.Enter]: (e) => {
+      e.preventDefault()
+    },
+    [Keys.Home]: (e) => {
+      e.preventDefault()
+    },
+    [Keys.End]: (e) => {
+      e.preventDefault()
+    },
+  }
+
+  const triggerProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    'aria-expanded': isOpen(),
+    'aria-controls': contentId,
+    'aria-haspopup': 'menu',
+  }
+
+  const contentProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'menu',
+    id: contentId,
+    'data-state': isOpen() ? 'open' : 'closed',
+  }
+
+  return {
+    state: { open: isOpen() },
+    triggerProps,
+    contentProps,
+    getItemProps,
+    open: openMenu,
+    close: closeMenu,
+    toggle: toggleMenu,
+    keyboardHandlers,
+    ids: {
+      content: contentId,
+    },
+  }
+}

package/dist/dropdown-menu/index.ts

@@ -0,0 +1,9 @@
+export {
+  createDropdownMenu,
+  type DropdownMenuProps,
+  type MenuItemProps,
+  type DropdownMenuAPI,
+  type DropdownMenuState,
+} from './dropdown-menu.js'
+
+export { menuContentVariants, menuItemVariants } from './dropdown-menu.styles.js'

package/dist/emoji-picker/emoji-data.ts

@@ -0,0 +1,282 @@
+export type EmojiCategory =
+  | 'smileys'
+  | 'people'
+  | 'nature'
+  | 'food'
+  | 'travel'
+  | 'activities'
+  | 'objects'
+  | 'symbols'
+  | 'flags'
+
+export interface EmojiEntry {
+  emoji: string
+  name: string
+  category: EmojiCategory
+  keywords: string[]
+}
+
+export const EMOJI_DATA: Record<EmojiCategory, EmojiEntry[]> = {
+  smileys: [
+    { emoji: '\u{1F600}', name: 'grinning face', category: 'smileys', keywords: ['happy', 'smile', 'grin'] },
+    { emoji: '\u{1F603}', name: 'grinning face with big eyes', category: 'smileys', keywords: ['happy', 'smile'] },
+    { emoji: '\u{1F604}', name: 'grinning face with smiling eyes', category: 'smileys', keywords: ['happy', 'joy'] },
+    { emoji: '\u{1F601}', name: 'beaming face', category: 'smileys', keywords: ['happy', 'grin', 'beam'] },
+    { emoji: '\u{1F606}', name: 'grinning squinting face', category: 'smileys', keywords: ['laugh', 'happy'] },
+    { emoji: '\u{1F605}', name: 'grinning face with sweat', category: 'smileys', keywords: ['nervous', 'laugh'] },
+    { emoji: '\u{1F923}', name: 'rolling on the floor laughing', category: 'smileys', keywords: ['lol', 'rofl', 'laugh'] },
+    { emoji: '\u{1F602}', name: 'face with tears of joy', category: 'smileys', keywords: ['laugh', 'cry', 'joy', 'lol'] },
+    { emoji: '\u{1F642}', name: 'slightly smiling face', category: 'smileys', keywords: ['smile', 'happy'] },
+    { emoji: '\u{1F643}', name: 'upside-down face', category: 'smileys', keywords: ['silly', 'sarcasm'] },
+    { emoji: '\u{1F609}', name: 'winking face', category: 'smileys', keywords: ['wink', 'flirt'] },
+    { emoji: '\u{1F60A}', name: 'smiling face with smiling eyes', category: 'smileys', keywords: ['blush', 'happy'] },
+    { emoji: '\u{1F607}', name: 'smiling face with halo', category: 'smileys', keywords: ['angel', 'innocent'] },
+    { emoji: '\u{1F970}', name: 'smiling face with hearts', category: 'smileys', keywords: ['love', 'crush', 'adore'] },
+    { emoji: '\u{1F60D}', name: 'smiling face with heart-eyes', category: 'smileys', keywords: ['love', 'heart'] },
+    { emoji: '\u{1F929}', name: 'star-struck', category: 'smileys', keywords: ['star', 'eyes', 'wow'] },
+    { emoji: '\u{1F618}', name: 'face blowing a kiss', category: 'smileys', keywords: ['kiss', 'love'] },
+    { emoji: '\u{1F617}', name: 'kissing face', category: 'smileys', keywords: ['kiss'] },
+    { emoji: '\u{1F61A}', name: 'kissing face with closed eyes', category: 'smileys', keywords: ['kiss', 'love'] },
+    { emoji: '\u{1F619}', name: 'kissing face with smiling eyes', category: 'smileys', keywords: ['kiss'] },
+    { emoji: '\u{1F60B}', name: 'face savoring food', category: 'smileys', keywords: ['yummy', 'delicious'] },
+    { emoji: '\u{1F61C}', name: 'winking face with tongue', category: 'smileys', keywords: ['tongue', 'wink', 'silly'] },
+    { emoji: '\u{1F61D}', name: 'squinting face with tongue', category: 'smileys', keywords: ['tongue', 'silly'] },
+    { emoji: '\u{1F911}', name: 'money-mouth face', category: 'smileys', keywords: ['money', 'rich'] },
+    { emoji: '\u{1F917}', name: 'hugging face', category: 'smileys', keywords: ['hug', 'warm'] },
+    { emoji: '\u{1F914}', name: 'thinking face', category: 'smileys', keywords: ['think', 'hmm'] },
+    { emoji: '\u{1F910}', name: 'zipper-mouth face', category: 'smileys', keywords: ['secret', 'quiet', 'zip'] },
+    { emoji: '\u{1F928}', name: 'face with raised eyebrow', category: 'smileys', keywords: ['skeptical', 'doubt'] },
+    { emoji: '\u{1F610}', name: 'neutral face', category: 'smileys', keywords: ['meh', 'neutral'] },
+    { emoji: '\u{1F611}', name: 'expressionless face', category: 'smileys', keywords: ['blank', 'expressionless'] },
+  ],
+  people: [
+    { emoji: '\u{1F44B}', name: 'waving hand', category: 'people', keywords: ['wave', 'hello', 'hi', 'bye'] },
+    { emoji: '\u{1F91A}', name: 'raised back of hand', category: 'people', keywords: ['hand', 'backhand'] },
+    { emoji: '\u{1F590}', name: 'hand with fingers splayed', category: 'people', keywords: ['hand', 'fingers'] },
+    { emoji: '\u270B', name: 'raised hand', category: 'people', keywords: ['hand', 'stop', 'high five'] },
+    { emoji: '\u{1F596}', name: 'vulcan salute', category: 'people', keywords: ['spock', 'star trek'] },
+    { emoji: '\u{1F44C}', name: 'OK hand', category: 'people', keywords: ['ok', 'perfect', 'fine'] },
+    { emoji: '\u270C', name: 'victory hand', category: 'people', keywords: ['peace', 'victory', 'v'] },
+    { emoji: '\u{1F91E}', name: 'crossed fingers', category: 'people', keywords: ['luck', 'hope'] },
+    { emoji: '\u{1F918}', name: 'love-you gesture', category: 'people', keywords: ['love', 'rock'] },
+    { emoji: '\u{1F919}', name: 'call me hand', category: 'people', keywords: ['call', 'phone'] },
+    { emoji: '\u{1F448}', name: 'backhand index pointing left', category: 'people', keywords: ['left', 'point'] },
+    { emoji: '\u{1F449}', name: 'backhand index pointing right', category: 'people', keywords: ['right', 'point'] },
+    { emoji: '\u{1F446}', name: 'backhand index pointing up', category: 'people', keywords: ['up', 'point'] },
+    { emoji: '\u{1F447}', name: 'backhand index pointing down', category: 'people', keywords: ['down', 'point'] },
+    { emoji: '\u261D', name: 'index pointing up', category: 'people', keywords: ['up', 'point'] },
+    { emoji: '\u{1F44D}', name: 'thumbs up', category: 'people', keywords: ['like', 'yes', 'approve', 'thumbsup'] },
+    { emoji: '\u{1F44E}', name: 'thumbs down', category: 'people', keywords: ['dislike', 'no', 'disapprove'] },
+    { emoji: '\u270A', name: 'raised fist', category: 'people', keywords: ['fist', 'power'] },
+    { emoji: '\u{1F44A}', name: 'oncoming fist', category: 'people', keywords: ['punch', 'fist bump'] },
+    { emoji: '\u{1F91B}', name: 'left-facing fist', category: 'people', keywords: ['fist'] },
+    { emoji: '\u{1F91C}', name: 'right-facing fist', category: 'people', keywords: ['fist'] },
+    { emoji: '\u{1F44F}', name: 'clapping hands', category: 'people', keywords: ['clap', 'applause', 'bravo'] },
+    { emoji: '\u{1F64C}', name: 'raising hands', category: 'people', keywords: ['celebrate', 'hooray'] },
+    { emoji: '\u{1F450}', name: 'open hands', category: 'people', keywords: ['hands', 'open'] },
+    { emoji: '\u{1F932}', name: 'palms up together', category: 'people', keywords: ['prayer', 'please'] },
+    { emoji: '\u{1F91D}', name: 'handshake', category: 'people', keywords: ['deal', 'agree', 'shake'] },
+    { emoji: '\u{1F64F}', name: 'folded hands', category: 'people', keywords: ['pray', 'please', 'thank you'] },
+  ],
+  nature: [
+    { emoji: '\u{1F436}', name: 'dog face', category: 'nature', keywords: ['dog', 'puppy', 'pet'] },
+    { emoji: '\u{1F431}', name: 'cat face', category: 'nature', keywords: ['cat', 'kitten', 'pet'] },
+    { emoji: '\u{1F42D}', name: 'mouse face', category: 'nature', keywords: ['mouse', 'rodent'] },
+    { emoji: '\u{1F439}', name: 'hamster', category: 'nature', keywords: ['hamster', 'pet'] },
+    { emoji: '\u{1F430}', name: 'rabbit face', category: 'nature', keywords: ['rabbit', 'bunny'] },
+    { emoji: '\u{1F98A}', name: 'fox', category: 'nature', keywords: ['fox', 'animal'] },
+    { emoji: '\u{1F43B}', name: 'bear', category: 'nature', keywords: ['bear', 'animal'] },
+    { emoji: '\u{1F43C}', name: 'panda', category: 'nature', keywords: ['panda', 'animal'] },
+    { emoji: '\u{1F428}', name: 'koala', category: 'nature', keywords: ['koala', 'animal'] },
+    { emoji: '\u{1F42F}', name: 'tiger face', category: 'nature', keywords: ['tiger', 'animal'] },
+    { emoji: '\u{1F981}', name: 'lion', category: 'nature', keywords: ['lion', 'animal'] },
+    { emoji: '\u{1F42E}', name: 'cow face', category: 'nature', keywords: ['cow', 'animal'] },
+    { emoji: '\u{1F437}', name: 'pig face', category: 'nature', keywords: ['pig', 'animal'] },
+    { emoji: '\u{1F438}', name: 'frog', category: 'nature', keywords: ['frog', 'animal'] },
+    { emoji: '\u{1F435}', name: 'monkey face', category: 'nature', keywords: ['monkey', 'animal'] },
+    { emoji: '\u{1F412}', name: 'monkey', category: 'nature', keywords: ['monkey', 'animal'] },
+    { emoji: '\u{1F414}', name: 'chicken', category: 'nature', keywords: ['chicken', 'animal'] },
+    { emoji: '\u{1F427}', name: 'penguin', category: 'nature', keywords: ['penguin', 'animal'] },
+    { emoji: '\u{1F426}', name: 'bird', category: 'nature', keywords: ['bird', 'animal'] },
+    { emoji: '\u{1F40A}', name: 'crocodile', category: 'nature', keywords: ['crocodile', 'animal'] },
+    { emoji: '\u{1F422}', name: 'turtle', category: 'nature', keywords: ['turtle', 'slow'] },
+    { emoji: '\u{1F40D}', name: 'snake', category: 'nature', keywords: ['snake', 'animal'] },
+    { emoji: '\u{1F332}', name: 'evergreen tree', category: 'nature', keywords: ['tree', 'pine'] },
+    { emoji: '\u{1F333}', name: 'deciduous tree', category: 'nature', keywords: ['tree'] },
+    { emoji: '\u{1F334}', name: 'palm tree', category: 'nature', keywords: ['palm', 'tree', 'tropical'] },
+    { emoji: '\u{1F335}', name: 'cactus', category: 'nature', keywords: ['cactus', 'desert'] },
+    { emoji: '\u{1F337}', name: 'tulip', category: 'nature', keywords: ['flower', 'tulip'] },
+    { emoji: '\u{1F339}', name: 'rose', category: 'nature', keywords: ['flower', 'rose', 'love'] },
+  ],
+  food: [
+    { emoji: '\u{1F34E}', name: 'red apple', category: 'food', keywords: ['apple', 'fruit'] },
+    { emoji: '\u{1F34A}', name: 'tangerine', category: 'food', keywords: ['orange', 'fruit'] },
+    { emoji: '\u{1F34B}', name: 'lemon', category: 'food', keywords: ['lemon', 'fruit'] },
+    { emoji: '\u{1F34C}', name: 'banana', category: 'food', keywords: ['banana', 'fruit'] },
+    { emoji: '\u{1F349}', name: 'watermelon', category: 'food', keywords: ['watermelon', 'fruit'] },
+    { emoji: '\u{1F347}', name: 'grapes', category: 'food', keywords: ['grapes', 'fruit'] },
+    { emoji: '\u{1F353}', name: 'strawberry', category: 'food', keywords: ['strawberry', 'fruit'] },
+    { emoji: '\u{1F352}', name: 'cherries', category: 'food', keywords: ['cherry', 'fruit'] },
+    { emoji: '\u{1F351}', name: 'peach', category: 'food', keywords: ['peach', 'fruit'] },
+    { emoji: '\u{1F34D}', name: 'pineapple', category: 'food', keywords: ['pineapple', 'fruit'] },
+    { emoji: '\u{1F354}', name: 'hamburger', category: 'food', keywords: ['burger', 'fast food'] },
+    { emoji: '\u{1F355}', name: 'pizza', category: 'food', keywords: ['pizza', 'food'] },
+    { emoji: '\u{1F32E}', name: 'taco', category: 'food', keywords: ['taco', 'mexican'] },
+    { emoji: '\u{1F32F}', name: 'burrito', category: 'food', keywords: ['burrito', 'mexican'] },
+    { emoji: '\u{1F35F}', name: 'french fries', category: 'food', keywords: ['fries', 'fast food'] },
+    { emoji: '\u{1F357}', name: 'poultry leg', category: 'food', keywords: ['chicken', 'meat'] },
+    { emoji: '\u{1F356}', name: 'meat on bone', category: 'food', keywords: ['meat', 'bone'] },
+    { emoji: '\u{1F363}', name: 'sushi', category: 'food', keywords: ['sushi', 'japanese'] },
+    { emoji: '\u{1F370}', name: 'shortcake', category: 'food', keywords: ['cake', 'dessert'] },
+    { emoji: '\u{1F36B}', name: 'chocolate bar', category: 'food', keywords: ['chocolate', 'candy'] },
+    { emoji: '\u{1F369}', name: 'doughnut', category: 'food', keywords: ['donut', 'dessert'] },
+    { emoji: '\u{1F36A}', name: 'cookie', category: 'food', keywords: ['cookie', 'dessert'] },
+    { emoji: '\u2615', name: 'hot beverage', category: 'food', keywords: ['coffee', 'tea', 'drink'] },
+    { emoji: '\u{1F37A}', name: 'beer mug', category: 'food', keywords: ['beer', 'drink'] },
+    { emoji: '\u{1F377}', name: 'wine glass', category: 'food', keywords: ['wine', 'drink'] },
+  ],
+  travel: [
+    { emoji: '\u{1F697}', name: 'automobile', category: 'travel', keywords: ['car', 'drive'] },
+    { emoji: '\u{1F695}', name: 'taxi', category: 'travel', keywords: ['taxi', 'cab'] },
+    { emoji: '\u{1F68C}', name: 'bus', category: 'travel', keywords: ['bus', 'transit'] },
+    { emoji: '\u{1F682}', name: 'locomotive', category: 'travel', keywords: ['train', 'rail'] },
+    { emoji: '\u2708', name: 'airplane', category: 'travel', keywords: ['plane', 'fly', 'travel'] },
+    { emoji: '\u{1F680}', name: 'rocket', category: 'travel', keywords: ['rocket', 'space', 'launch'] },
+    { emoji: '\u{1F6F8}', name: 'flying saucer', category: 'travel', keywords: ['ufo', 'alien'] },
+    { emoji: '\u{1F6A2}', name: 'ship', category: 'travel', keywords: ['ship', 'boat', 'cruise'] },
+    { emoji: '\u{1F3E0}', name: 'house', category: 'travel', keywords: ['house', 'home'] },
+    { emoji: '\u{1F3E2}', name: 'office building', category: 'travel', keywords: ['office', 'building', 'work'] },
+    { emoji: '\u{1F3EB}', name: 'school', category: 'travel', keywords: ['school', 'education'] },
+    { emoji: '\u{1F3E5}', name: 'hospital', category: 'travel', keywords: ['hospital', 'health'] },
+    { emoji: '\u{1F30D}', name: 'globe showing Europe-Africa', category: 'travel', keywords: ['earth', 'globe', 'world'] },
+    { emoji: '\u{1F30E}', name: 'globe showing Americas', category: 'travel', keywords: ['earth', 'globe', 'world'] },
+    { emoji: '\u{1F30F}', name: 'globe showing Asia-Australia', category: 'travel', keywords: ['earth', 'globe', 'world'] },
+    { emoji: '\u{1F5FC}', name: 'Tokyo tower', category: 'travel', keywords: ['tokyo', 'japan', 'tower'] },
+    { emoji: '\u{1F5FD}', name: 'Statue of Liberty', category: 'travel', keywords: ['statue', 'liberty', 'new york'] },
+    { emoji: '\u26F0', name: 'mountain', category: 'travel', keywords: ['mountain', 'nature'] },
+    { emoji: '\u{1F3D6}', name: 'beach with umbrella', category: 'travel', keywords: ['beach', 'vacation'] },
+    { emoji: '\u{1F3DD}', name: 'desert island', category: 'travel', keywords: ['island', 'tropical'] },
+  ],
+  activities: [
+    { emoji: '\u26BD', name: 'soccer ball', category: 'activities', keywords: ['soccer', 'football', 'sport'] },
+    { emoji: '\u{1F3C0}', name: 'basketball', category: 'activities', keywords: ['basketball', 'sport'] },
+    { emoji: '\u{1F3C8}', name: 'american football', category: 'activities', keywords: ['football', 'sport'] },
+    { emoji: '\u26BE', name: 'baseball', category: 'activities', keywords: ['baseball', 'sport'] },
+    { emoji: '\u{1F3BE}', name: 'tennis', category: 'activities', keywords: ['tennis', 'sport'] },
+    { emoji: '\u{1F3D0}', name: 'volleyball', category: 'activities', keywords: ['volleyball', 'sport'] },
+    { emoji: '\u{1F3B1}', name: 'pool 8 ball', category: 'activities', keywords: ['pool', 'billiards'] },
+    { emoji: '\u{1F3D3}', name: 'ping pong', category: 'activities', keywords: ['table tennis', 'sport'] },
+    { emoji: '\u{1F3C6}', name: 'trophy', category: 'activities', keywords: ['trophy', 'winner', 'award'] },
+    { emoji: '\u{1F3C5}', name: 'sports medal', category: 'activities', keywords: ['medal', 'winner'] },
+    { emoji: '\u{1F947}', name: 'first place medal', category: 'activities', keywords: ['gold', 'first', 'winner'] },
+    { emoji: '\u{1F948}', name: 'second place medal', category: 'activities', keywords: ['silver', 'second'] },
+    { emoji: '\u{1F949}', name: 'third place medal', category: 'activities', keywords: ['bronze', 'third'] },
+    { emoji: '\u{1F3AF}', name: 'bullseye', category: 'activities', keywords: ['target', 'dart'] },
+    { emoji: '\u{1F3AE}', name: 'video game', category: 'activities', keywords: ['game', 'controller'] },
+    { emoji: '\u{1F3B2}', name: 'game die', category: 'activities', keywords: ['dice', 'game'] },
+    { emoji: '\u{1F3B5}', name: 'musical note', category: 'activities', keywords: ['music', 'note'] },
+    { emoji: '\u{1F3B6}', name: 'musical notes', category: 'activities', keywords: ['music', 'notes'] },
+    { emoji: '\u{1F3A4}', name: 'microphone', category: 'activities', keywords: ['karaoke', 'sing', 'mic'] },
+    { emoji: '\u{1F3AC}', name: 'clapper board', category: 'activities', keywords: ['movie', 'film'] },
+  ],
+  objects: [
+    { emoji: '\u{1F4F1}', name: 'mobile phone', category: 'objects', keywords: ['phone', 'mobile', 'cell'] },
+    { emoji: '\u{1F4BB}', name: 'laptop', category: 'objects', keywords: ['laptop', 'computer'] },
+    { emoji: '\u{1F5A5}', name: 'desktop computer', category: 'objects', keywords: ['computer', 'desktop'] },
+    { emoji: '\u2328', name: 'keyboard', category: 'objects', keywords: ['keyboard', 'type'] },
+    { emoji: '\u{1F4F7}', name: 'camera', category: 'objects', keywords: ['camera', 'photo'] },
+    { emoji: '\u{1F4FA}', name: 'television', category: 'objects', keywords: ['tv', 'television'] },
+    { emoji: '\u{1F4E7}', name: 'e-mail', category: 'objects', keywords: ['email', 'mail'] },
+    { emoji: '\u{1F4DD}', name: 'memo', category: 'objects', keywords: ['memo', 'note', 'write'] },
+    { emoji: '\u{1F4D6}', name: 'open book', category: 'objects', keywords: ['book', 'read'] },
+    { emoji: '\u{1F4DA}', name: 'books', category: 'objects', keywords: ['books', 'library'] },
+    { emoji: '\u{1F4C5}', name: 'calendar', category: 'objects', keywords: ['calendar', 'date'] },
+    { emoji: '\u{1F4CB}', name: 'clipboard', category: 'objects', keywords: ['clipboard', 'paste'] },
+    { emoji: '\u{1F4CC}', name: 'pushpin', category: 'objects', keywords: ['pin', 'pushpin'] },
+    { emoji: '\u{1F4CE}', name: 'paperclip', category: 'objects', keywords: ['paperclip', 'attach'] },
+    { emoji: '\u{1F511}', name: 'key', category: 'objects', keywords: ['key', 'lock'] },
+    { emoji: '\u{1F512}', name: 'locked', category: 'objects', keywords: ['lock', 'secure'] },
+    { emoji: '\u{1F513}', name: 'unlocked', category: 'objects', keywords: ['unlock', 'open'] },
+    { emoji: '\u{1F50D}', name: 'magnifying glass tilted left', category: 'objects', keywords: ['search', 'find'] },
+    { emoji: '\u{1F4A1}', name: 'light bulb', category: 'objects', keywords: ['idea', 'light'] },
+    { emoji: '\u{1F527}', name: 'wrench', category: 'objects', keywords: ['tool', 'wrench', 'fix'] },
+    { emoji: '\u{1F528}', name: 'hammer', category: 'objects', keywords: ['tool', 'hammer', 'build'] },
+    { emoji: '\u2699', name: 'gear', category: 'objects', keywords: ['settings', 'gear', 'config'] },
+  ],
+  symbols: [
+    { emoji: '\u2764', name: 'red heart', category: 'symbols', keywords: ['heart', 'love'] },
+    { emoji: '\u{1F9E1}', name: 'orange heart', category: 'symbols', keywords: ['heart', 'orange'] },
+    { emoji: '\u{1F49B}', name: 'yellow heart', category: 'symbols', keywords: ['heart', 'yellow'] },
+    { emoji: '\u{1F49A}', name: 'green heart', category: 'symbols', keywords: ['heart', 'green'] },
+    { emoji: '\u{1F499}', name: 'blue heart', category: 'symbols', keywords: ['heart', 'blue'] },
+    { emoji: '\u{1F49C}', name: 'purple heart', category: 'symbols', keywords: ['heart', 'purple'] },
+    { emoji: '\u{1F494}', name: 'broken heart', category: 'symbols', keywords: ['heart', 'broken', 'sad'] },
+    { emoji: '\u{1F495}', name: 'two hearts', category: 'symbols', keywords: ['heart', 'love'] },
+    { emoji: '\u{1F4AF}', name: 'hundred points', category: 'symbols', keywords: ['100', 'perfect', 'score'] },
+    { emoji: '\u{1F4A5}', name: 'collision', category: 'symbols', keywords: ['boom', 'bang', 'explosion'] },
+    { emoji: '\u{1F4AB}', name: 'dizzy', category: 'symbols', keywords: ['star', 'dizzy'] },
+    { emoji: '\u2728', name: 'sparkles', category: 'symbols', keywords: ['sparkle', 'shine', 'star'] },
+    { emoji: '\u{1F525}', name: 'fire', category: 'symbols', keywords: ['fire', 'hot', 'flame'] },
+    { emoji: '\u2705', name: 'check mark button', category: 'symbols', keywords: ['check', 'done', 'yes'] },
+    { emoji: '\u274C', name: 'cross mark', category: 'symbols', keywords: ['no', 'wrong', 'x'] },
+    { emoji: '\u2757', name: 'exclamation mark', category: 'symbols', keywords: ['exclamation', 'warning', 'alert'] },
+    { emoji: '\u2753', name: 'question mark', category: 'symbols', keywords: ['question', 'what'] },
+    { emoji: '\u{1F6AB}', name: 'prohibited', category: 'symbols', keywords: ['no', 'forbidden', 'stop'] },
+    { emoji: '\u267B', name: 'recycling symbol', category: 'symbols', keywords: ['recycle', 'green'] },
+    { emoji: '\u{1F4AC}', name: 'speech balloon', category: 'symbols', keywords: ['speech', 'chat', 'message'] },
+    { emoji: '\u{1F4AD}', name: 'thought balloon', category: 'symbols', keywords: ['thought', 'think'] },
+    { emoji: '\u{1F514}', name: 'bell', category: 'symbols', keywords: ['bell', 'notification', 'alert'] },
+  ],
+  flags: [
+    { emoji: '\u{1F1FA}\u{1F1F8}', name: 'flag: United States', category: 'flags', keywords: ['us', 'usa', 'america'] },
+    { emoji: '\u{1F1EC}\u{1F1E7}', name: 'flag: United Kingdom', category: 'flags', keywords: ['uk', 'britain', 'england'] },
+    { emoji: '\u{1F1E8}\u{1F1E6}', name: 'flag: Canada', category: 'flags', keywords: ['canada'] },
+    { emoji: '\u{1F1E6}\u{1F1FA}', name: 'flag: Australia', category: 'flags', keywords: ['australia'] },
+    { emoji: '\u{1F1EF}\u{1F1F5}', name: 'flag: Japan', category: 'flags', keywords: ['japan'] },
+    { emoji: '\u{1F1EB}\u{1F1F7}', name: 'flag: France', category: 'flags', keywords: ['france'] },
+    { emoji: '\u{1F1E9}\u{1F1EA}', name: 'flag: Germany', category: 'flags', keywords: ['germany'] },
+    { emoji: '\u{1F1EE}\u{1F1F3}', name: 'flag: India', category: 'flags', keywords: ['india'] },
+    { emoji: '\u{1F1E7}\u{1F1F7}', name: 'flag: Brazil', category: 'flags', keywords: ['brazil'] },
+    { emoji: '\u{1F1F0}\u{1F1F7}', name: 'flag: South Korea', category: 'flags', keywords: ['korea', 'south korea'] },
+    { emoji: '\u{1F1EE}\u{1F1F9}', name: 'flag: Italy', category: 'flags', keywords: ['italy'] },
+    { emoji: '\u{1F1EA}\u{1F1F8}', name: 'flag: Spain', category: 'flags', keywords: ['spain'] },
+    { emoji: '\u{1F1F2}\u{1F1FD}', name: 'flag: Mexico', category: 'flags', keywords: ['mexico'] },
+    { emoji: '\u{1F1F7}\u{1F1FA}', name: 'flag: Russia', category: 'flags', keywords: ['russia'] },
+    { emoji: '\u{1F1E8}\u{1F1F3}', name: 'flag: China', category: 'flags', keywords: ['china'] },
+    { emoji: '\u{1F3C1}', name: 'chequered flag', category: 'flags', keywords: ['finish', 'race'] },
+    { emoji: '\u{1F3F3}', name: 'white flag', category: 'flags', keywords: ['surrender', 'peace'] },
+    { emoji: '\u{1F3F4}', name: 'black flag', category: 'flags', keywords: ['pirate'] },
+    { emoji: '\u{1F6A9}', name: 'triangular flag', category: 'flags', keywords: ['flag', 'marker'] },
+  ],
+}
+
+/** All categories in display order */
+export const EMOJI_CATEGORIES: EmojiCategory[] = [
+  'smileys',
+  'people',
+  'nature',
+  'food',
+  'travel',
+  'activities',
+  'objects',
+  'symbols',
+  'flags',
+]
+
+/** Category display labels */
+export const CATEGORY_LABELS: Record<EmojiCategory, string> = {
+  smileys: 'Smileys & Emotion',
+  people: 'People & Body',
+  nature: 'Animals & Nature',
+  food: 'Food & Drink',
+  travel: 'Travel & Places',
+  activities: 'Activities',
+  objects: 'Objects',
+  symbols: 'Symbols',
+  flags: 'Flags',
+}
+
+/** Get all emojis as a flat array */
+export function getAllEmojis(): EmojiEntry[] {
+  return EMOJI_CATEGORIES.flatMap((cat) => EMOJI_DATA[cat])
+}

package/dist/emoji-picker/emoji-picker.styles.ts

@@ -0,0 +1,32 @@
+import { cva } from '../shared/index.ts'
+
+export const emojiPickerContainerStyles =
+  'w-80 rounded-lg border bg-popover text-popover-foreground shadow-md'
+
+export const emojiPickerSearchStyles =
+  'w-full border-b px-3 py-2 text-sm bg-transparent outline-none placeholder:text-muted-foreground'
+
+export const emojiPickerCategoryBarStyles =
+  'flex border-b px-1'
+
+export const emojiPickerCategoryTabVariants = cva({
+  base: 'flex-1 py-1.5 text-center text-lg cursor-pointer hover:bg-accent rounded-md transition-colors',
+  variants: {
+    state: {
+      active: 'bg-accent',
+      inactive: '',
+    },
+  },
+  defaultVariants: {
+    state: 'inactive',
+  },
+})
+
+export const emojiPickerGridStyles =
+  'grid grid-cols-8 gap-0.5 p-2 max-h-64 overflow-y-auto'
+
+export const emojiPickerEmojiButtonStyles =
+  'flex items-center justify-center h-8 w-8 rounded cursor-pointer text-lg hover:bg-accent transition-colors'
+
+export const emojiPickerSectionLabelStyles =
+  'px-2 py-1 text-xs font-medium text-muted-foreground'

package/dist/emoji-picker/emoji-picker.ts

@@ -0,0 +1,165 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+import { generateId } from '../shared/index.ts'
+import {
+  EMOJI_DATA,
+  EMOJI_CATEGORIES,
+  CATEGORY_LABELS,
+  getAllEmojis,
+  type EmojiCategory,
+  type EmojiEntry,
+} from './emoji-data.js'
+
+export interface EmojiPickerProps {
+  /** Callback when an emoji is selected */
+  onSelect?: (emoji: EmojiEntry) => void
+  /** Initial search query */
+  search?: string
+  /** List of recently used emojis */
+  recentEmojis?: EmojiEntry[]
+  /** Maximum recent emojis to show */
+  maxRecent?: number
+}
+
+export interface EmojiPickerState {
+  search: string
+  activeCategory: EmojiCategory
+  filteredEmojis: EmojiEntry[]
+  recentEmojis: EmojiEntry[]
+}
+
+export interface EmojiPickerAPI {
+  /** Current state */
+  state: EmojiPickerState
+  /** Set search query */
+  setSearch(query: string): void
+  /** Select an emoji */
+  select(emoji: EmojiEntry): void
+  /** Set active category tab */
+  setCategory(category: EmojiCategory): void
+  /** Category tabs with labels */
+  categoryTabs: { category: EmojiCategory; label: string; emoji: string }[]
+  /** ARIA props for the picker container */
+  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** ARIA props for the search input */
+  searchInputProps: Record<string, unknown>
+  /** Get ARIA props for an emoji button */
+  getEmojiAriaProps(emoji: EmojiEntry): Record<string, unknown>
+  /** Generated IDs */
+  ids: {
+    container: string
+    search: string
+    grid: string
+    label: string
+  }
+}
+
+const CATEGORY_ICONS: Record<EmojiCategory, string> = {
+  smileys: '\u{1F600}',
+  people: '\u{1F44B}',
+  nature: '\u{1F436}',
+  food: '\u{1F34E}',
+  travel: '\u{1F697}',
+  activities: '\u26BD',
+  objects: '\u{1F4BB}',
+  symbols: '\u2764',
+  flags: '\u{1F3C1}',
+}
+
+export function createEmojiPicker(props: EmojiPickerProps = {}): EmojiPickerAPI {
+  const {
+    onSelect,
+    search: initialSearch = '',
+    recentEmojis: initialRecent = [],
+    maxRecent = 20,
+  } = props
+
+  let searchQuery = initialSearch
+  let activeCategory: EmojiCategory = 'smileys'
+  let recentEmojis = [...initialRecent].slice(0, maxRecent)
+
+  const containerId = generateId('rfr-emoji-picker')
+  const searchId = generateId('rfr-emoji-search')
+  const gridId = generateId('rfr-emoji-grid')
+  const labelId = generateId('rfr-emoji-label')
+
+  function getFilteredEmojis(): EmojiEntry[] {
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase().trim()
+      return getAllEmojis().filter(
+        (entry) =>
+          entry.name.toLowerCase().includes(query) ||
+          entry.keywords.some((kw) => kw.toLowerCase().includes(query)),
+      )
+    }
+    return EMOJI_DATA[activeCategory]
+  }
+
+  function setSearch(query: string): void {
+    searchQuery = query
+  }
+
+  function select(emoji: EmojiEntry): void {
+    // Add to recent (deduplicate, prepend)
+    recentEmojis = [
+      emoji,
+      ...recentEmojis.filter((e) => e.emoji !== emoji.emoji),
+    ].slice(0, maxRecent)
+    onSelect?.(emoji)
+  }
+
+  function setCategory(category: EmojiCategory): void {
+    activeCategory = category
+    searchQuery = ''
+  }
+
+  const categoryTabs = EMOJI_CATEGORIES.map((cat) => ({
+    category: cat,
+    label: CATEGORY_LABELS[cat],
+    emoji: CATEGORY_ICONS[cat],
+  }))
+
+  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'dialog',
+    'aria-labelledby': labelId,
+    id: containerId,
+  }
+
+  const searchInputProps: Record<string, unknown> = {
+    type: 'search',
+    role: 'searchbox',
+    'aria-label': 'Search emojis',
+    id: searchId,
+    placeholder: 'Search emojis...',
+    autoComplete: 'off',
+  }
+
+  function getEmojiAriaProps(emoji: EmojiEntry): Record<string, unknown> {
+    return {
+      role: 'button',
+      'aria-label': `${emoji.name} ${emoji.emoji}`,
+      title: emoji.name,
+    }
+  }
+
+  return {
+    state: {
+      search: searchQuery,
+      activeCategory,
+      filteredEmojis: getFilteredEmojis(),
+      recentEmojis,
+    },
+    setSearch,
+    select,
+    setCategory,
+    categoryTabs,
+    ariaProps,
+    searchInputProps,
+    getEmojiAriaProps,
+    ids: {
+      container: containerId,
+      search: searchId,
+      grid: gridId,
+      label: labelId,
+    },
+  }
+}