emoji-picker

1import * as React from "react"
2import { EmojiPicker as BaseEmojiPicker } from "frimousse"
3 
4import { cn } from "@/lib/utils"
5 
6function EmojiPicker({
7	className,
8	...props
9}: React.ComponentProps<typeof BaseEmojiPicker.Root>) {
10	return (
11		<BaseEmojiPicker.Root
12			data-slot="emoji-picker"
13			className={cn(
14				"bg-popover isolate flex h-80 w-fit flex-col rounded-md border shadow-md",
15				className
16			)}
17			{...props}
18		/>
19	)
20}
21 
22function EmojiPickerSearch({
23	className,
24	disabled,
25	wrapperClassName,
26	...props
27}: React.ComponentProps<typeof BaseEmojiPicker.Search> & {
28	wrapperClassName?: string
29}) {
30	return (
31		<div
32			data-slot="emoji-picker-search-wrapper"
33			className={cn("p-2", wrapperClassName)}
34		>
35			<BaseEmojiPicker.Search
36				className={cn(
37					"placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-input hover:border-ring/70 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/50 aria-invalid:border-destructive z-50 flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow,border-color] outline-none focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-50 md:text-sm",
38					className
39				)}
40				data-disabled={disabled}
41				disabled={disabled}
42				{...props}
43			/>
44		</div>
45	)
46}
47 
48function EmojiPickerContent({
49	className,
50	...props
51}: React.ComponentProps<typeof BaseEmojiPicker.Viewport>) {
52	return (
53		<BaseEmojiPicker.Viewport
54			data-slot="emoji-picker-content"
55			className={cn("relative flex-1 outline-hidden", className)}
56			{...props}
57		/>
58	)
59}
60 
61function EmojiPickerLoading({
62	className,
63	...props
64}: React.ComponentProps<typeof BaseEmojiPicker.Loading>) {
65	return (
66		<BaseEmojiPicker.Loading
67			data-slot="emoji-picker-loading"
68			className={cn(
69				"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm",
70				className
71			)}
72			{...props}
73		/>
74	)
75}
76 
77function EmojiPickerEmpty({
78	className,
79	...props
80}: React.ComponentProps<typeof BaseEmojiPicker.Empty>) {
81	return (
82		<BaseEmojiPicker.Empty
83			data-slot="emoji-picker-empty"
84			className={cn(
85				"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm",
86				className
87			)}
88			{...props}
89		/>
90	)
91}
92 
93function EmojiPickerList({
94	className,
95	...props
96}: React.ComponentProps<typeof BaseEmojiPicker.List>) {
97	return (
98		<BaseEmojiPicker.List
99			data-slot="emoji-picker-list"
100			className={cn("pb-2 select-none", className)}
101// … truncated