Emoji Picker

npm install @kuzenbo/core

import { EmojiPicker } from "@kuzenbo/core";

function Example() {
  const handleEmojiSelect = (emoji: string) => {
    console.log("Selected emoji:", emoji);
  };

  return (
    <EmojiPicker onEmojiSelect={handleEmojiSelect}>
      <EmojiPicker.Search />
      <EmojiPicker.Content>
        <EmojiPicker.List />
        <EmojiPicker.Loading>Loading emojis...</EmojiPicker.Loading>
        <EmojiPicker.Empty>No emojis found</EmojiPicker.Empty>
      </EmojiPicker.Content>
      <EmojiPicker.ActiveEmojiPreview>
        <EmojiPicker.ActiveEmoji />
        <EmojiPicker.SkinToneSelector>
          <EmojiPicker.SkinTone value="light" />
          <EmojiPicker.SkinTone value="mediumLight" />
          <EmojiPicker.SkinTone value="medium" />
          <EmojiPicker.SkinTone value="mediumDark" />
          <EmojiPicker.SkinTone value="dark" />
        </EmojiPicker.SkinToneSelector>
      </EmojiPicker.ActiveEmojiPreview>
    </EmojiPicker>
  );
}

<EmojiPicker onEmojiSelect={(emoji) => console.log(emoji)}>
  <EmojiPicker.Search />
  <EmojiPicker.Content>
    <EmojiPicker.List />
  </EmojiPicker.Content>
</EmojiPicker>

import { Popover, Button } from "@kuzenbo/core";

function EmojiPickerPopover() {
  const [emoji, setEmoji] = useState("😀");

  return (
    <Popover>
      <Popover.Trigger asChild>
        <Button variant="outline" size="lg">
          {emoji}
        </Button>
      </Popover.Trigger>
      <Popover.Content className="w-auto p-0">
        <EmojiPicker onEmojiSelect={(e) => setEmoji(e)}>
          <EmojiPicker.Search />
          <EmojiPicker.Content>
            <EmojiPicker.List />
          </EmojiPicker.Content>
        </EmojiPicker>
      </Popover.Content>
    </Popover>
  );
}

{/* Small */}
<EmojiPicker size="sm" onEmojiSelect={handleSelect}>
  {/* ... */}
</EmojiPicker>

{/* Large */}
<EmojiPicker size="lg" onEmojiSelect={handleSelect}>
  {/* ... */}
</EmojiPicker>

<EmojiPicker onEmojiSelect={handleSelect}>
  <EmojiPicker.Search />
  <EmojiPicker.Content>
    <EmojiPicker.List />
    <EmojiPicker.Empty>
      <div className="text-center p-4">
        <p className="text-muted-foreground">No matching emojis</p>
      </div>
    </EmojiPicker.Empty>
  </EmojiPicker.Content>
</EmojiPicker>