{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "emoji-picker",
  "type": "registry:ui",
  "title": "Emoji picker",
  "description": "Compact emoji picker grid with a default set of twelve reactions or your own list, using listbox and option roles. Calls onSelect with the chosen emoji.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/emoji-picker.tsx",
      "type": "registry:ui",
      "target": "components/ui/emoji-picker.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nconst DEFAULT = [\"👍\",\"❤️\",\"😂\",\"🎉\",\"🔥\",\"👀\",\"✅\",\"❌\",\"🚀\",\"💡\",\"📎\",\"🙏\"]\n\nfunction EmojiPicker({\n  emojis = DEFAULT,\n  onSelect,\n  className,\n}: {\n  emojis?: string[]\n  onSelect?: (emoji: string) => void\n  className?: string\n}) {\n  return (\n    <div\n      data-slot=\"emoji-picker\"\n      role=\"listbox\"\n      aria-label=\"Emoji picker\"\n      className={cn(\n        \"grid grid-cols-6 gap-1 rounded-xl border border-border bg-raised p-2\",\n        \"shadow-lg\",\n        className\n      )}\n    >\n      {emojis.map((e) => (\n        <button\n          key={e}\n          type=\"button\"\n          role=\"option\"\n          aria-label={e}\n          className=\"grid size-8 place-items-center rounded-lg text-base hover:bg-sunken focus-visible:ring-2 focus-visible:ring-accent outline-none\"\n          onClick={() => onSelect?.(e)}\n        >\n          {e}\n        </button>\n      ))}\n    </div>\n  )\n}\nexport { EmojiPicker }\n"
    }
  ]
}