# Emoji Picker

## Example

```svelte
<script lang="ts">
	import { Button } from '@foxui/all';
	import { EmojiPicker, PopoverEmojiPicker } from '@foxui/all';

	let emojis: string[] = $state([]);
</script>

<div class="mb-4 flex h-14 flex-wrap items-center gap-2 text-2xl">
	<div class="text-sm font-medium">Last picked emojis:</div>
	{#each emojis.slice(0, 5) as emoji}
		<div>{emoji}</div>
	{/each}
</div>

<EmojiPicker onpicked={(emoji) => emojis.unshift(emoji.unicode)} />

<h3>Popover Emoji Picker</h3>

<PopoverEmojiPicker onpicked={(emoji) => emojis.unshift(emoji.unicode)} triggerText="Emoji Picker">
	{#snippet child({ props })}
		<Button size="iconLg" {...props}>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 24 24"
				fill="none"
				stroke="currentColor"
				stroke-width="1.5"
				stroke-linecap="round"
				stroke-linejoin="round"
				class="lucide lucide-smile-icon lucide-smile"
				><circle cx="12" cy="12" r="10" /><path d="M8 14s1.5 2 4 2 4-2 4-2" /><line
					x1="9"
					x2="9.01"
					y1="9"
					y2="9"
				/><line x1="15" x2="15.01" y1="9" y2="9" /></svg
			>
		</Button>
	{/snippet}
</PopoverEmojiPicker>
```

## Documentation

## Usage

```svelte
<EmojiPicker onpicked={(emoji) => console.log('selected emoji: ' + emoji.unicode)} />

<!-- or popover emoji picker -->

<PopoverEmojiPicker onpicked={(emoji) => console.log('selected emoji: ' + emoji.unicode)}>
	{#snippet child({ props })}
		<Button size="iconLg" {...props}>Open Emoji Picker</Button>
	{/snippet}
</PopoverEmojiPicker>
```

## API Reference

### EmojiPicker
A searchable emoji picker grid with category tabs.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| onpicked | `(emoji: NativeEmoji) => void` | `-` | Callback invoked when an emoji is selected. |
| height | `number` | `300` | The height of the picker in pixels. |
| width | `number` | `344` | The width of the picker in pixels. |
| columns | `number` | `8` | The number of emoji columns. |
| class | `string` | `-` | Additional CSS classes to apply. |

### PopoverEmojiPicker
An emoji picker wrapped in a popover.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| onpicked | `(emoji: NativeEmoji) => void` | `-` | Callback invoked when an emoji is selected. |
| open | `boolean` | `false` | Whether the popover is open. (bindable) |
| triggerRef | `HTMLElement` | `-` | Reference to the trigger element. (bindable) |
| children | `Snippet` | `-` | Custom trigger content. |
| class | `string` | `-` | Additional CSS classes to apply. |