4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:Ta11,"use client"; import { Smile } from "lucide-react"; import { useState } from "react"; import EmojiPicker from "@/components/shadcnblocks/emoji-picker"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; export const title = "Emoji Picker in Form"; const EmojiPickerExample = () => { const [message, setMessage] = useState(""); const [selectedEmoji, setSelectedEmoji] = useState(""); const handleEmojiSelect = (emoji: string) => { setSelectedEmoji(emoji); setMessage((prev) => prev + emoji); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); console.log("Form submitted:", { message, selectedEmoji }); alert(`Message: ${message}`); }; return (

Message

setMessage(e.target.value)}
            placeholder="Type your message..."
            className="min-h-[100px]"
          />
          <EmojiPicker
            onEmojiSelect={handleEmojiSelect}
            trigger={
              <Button
                type="button"
                variant="outline"
                size="icon"
                className="h-10 w-10 shrink-0"
              >
                <Smile className="h-4 w-4" />
              </Button>
            }
          />
        </div>
      </div>

<div className="space-y-2">
        <Label htmlFor="title">Title</Label>
        <div className="flex items-center gap-2">
          <Input id="title" placeholder="Enter title..." className="flex-1" />
          <EmojiPicker
            onEmojiSelect={(emoji) => {
              const input = document.getElementById(
                "title",
              ) as HTMLInputElement;
              if (input) {
                input.value = input.value + emoji;
              }
            }}
            trigger={
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="h-10 w-10"
              >
                <Smile className="h-4 w-4" />
              </Button>
            }
          />
        </div>
      </div>

<Button type="submit">Submit</Button>
    </form>
  );
};

export default EmojiPickerExample;
52:T3790,"use client";

import {
  Activity,
  Clock,
  Flag,
  Lightbulb,
  MapPin,
  Search,
  Smile,
  Users,
} from "lucide-react";
import { startTransition, useEffect, useMemo, useRef, useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

const emojis = [
  {
    code: ["1F600"],
    emoji: "😀",
    name: "grinning face",
    category: "Smileys & Emotion",
    subcategory: "face-smiling",
  },
  {
    code: ["1F603"],
    emoji: "😃",
    name: "grinning face with big eyes",
    category: "Smileys & Emotion",
    subcategory: "face-smiling",
  },
  {
    code: ["1F604"],
    emoji: "😄",
    name: "grinning face with smiling eyes",
    category: "Smileys & Emotion",
    subcategory: "face-smiling",
  },
];

interface EmojiPickerProps {
  onEmojiSelect: (emoji: string) => void;
  trigger?: React.ReactNode;
  maxRecentEmojis?: number;
}

const categoryIcons = {
  "Smileys & Emotion": Smile,
  "People & Body": Users,
  "Animals & Nature": Activity,
  "Food & Drink": Activity,
  "Travel & Places": MapPin,
  Activities: Activity,
  Objects: Lightbulb,
  Symbols: Flag,
  Flags: Flag,
};

interface EmojiGridProps {
  emojis: typeof emojis;
  showCategory?: boolean;
  selectedIndex: number;
  allVisibleEmojis: typeof emojis;
  onEmojiClick: (emoji: string) => void;
  setSelectedIndex: (index: number) => void;
  emojiGridRef: React.RefObject<HTMLDivElement | null>;
}

const EmojiGrid = ({
  emojis: emojiList,
  showCategory = false,
  selectedIndex,
  allVisibleEmojis,
  onEmojiClick,
  setSelectedIndex,
  emojiGridRef,
}: EmojiGridProps) => (
  <div className="grid grid-cols-8 gap-1 p-2" ref={emojiGridRef}>
    {emojiList.map((emoji, index) => {
      const globalIndex = showCategory
        ? allVisibleEmojis.findIndex((e) => e.emoji === emoji.emoji)
        : index;

return (
        <Button
          key={`${emoji.emoji}-${index}`}
          variant="ghost"
          size="sm"
          className={`h-10 w-10 p-0 transition-colors hover:bg-accent ${
            selectedIndex === globalIndex ? "bg-accent ring-2 ring-primary" : ""
          }`}
          onClick={() => onEmojiClick(emoji.emoji)}
          title={emoji.name}
          onMouseEnter={() => setSelectedIndex(globalIndex)}
        >
          <span className="text-lg" role="img" aria-label={emoji.name}>
            {emoji.emoji}
          </span>
        </Button>
      );
    })}
  </div>
);

export default function EmojiPicker({
  onEmojiSelect,
  trigger,
  maxRecentEmojis = 24,
}: EmojiPickerProps) {
  const [searchTerm, setSearchTerm] = useState("");
  const [isOpen, setIsOpen] = useState(false);
  const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
  const [selectedIndex, setSelectedIndex] = useState(-1);
  const searchInputRef = useRef<HTMLInputElement>(null);
  const emojiGridRef = useRef<HTMLDivElement>(null);

// Load recent emojis from localStorage
  useEffect(() => {
    const stored = localStorage.getItem("recent-emojis");
    if (stored) {
      try {
        startTransition(() => {
          setRecentEmojis(JSON.parse(stored));
        });
      } catch {
        // Ignore invalid JSON in localStorage
      }
    }
  }, []);

// Get unique categories with better ordering
  const categories = useMemo(() => {
    const categoryOrder = [
      "Smileys & Emotion",
      "People & Body",
      "Animals & Nature",
      "Food & Drink",
      "Travel & Places",
      "Activities",
      "Objects",
      "Symbols",
      "Flags",
    ];

const availableCategories = Array.from(
      new Set(emojis.map((emoji) => emoji.category)),
    );
    return categoryOrder.filter((cat) => availableCategories.includes(cat));
  }, []);

// Enhanced search with keywords and fuzzy matching
  const filteredEmojis = useMemo(() => {
    if (!searchTerm) return emojis;

const searchLower = searchTerm.toLowerCase();
    return emojis.filter((emoji) => {
      const nameMatch = emoji.name.toLowerCase().includes(searchLower);
      const categoryMatch = emoji.category.toLowerCase().includes(searchLower);

// Add keyword matching if emoji has keywords property
      const emojiKeywords =
        "keywords" in emoji && Array.isArray(emoji.keywords)
          ? emoji.keywords
          : [];
      const keywordMatch = emojiKeywords.some((keyword: string) =>
        keyword.toLowerCase().includes(searchLower),
      );

return nameMatch || categoryMatch || keywordMatch;
    });
  }, [searchTerm]);

// Group emojis by category
  const emojisByCategory = useMemo(() => {
    return categories.reduce(
      (acc, category) => {
        acc[category] = filteredEmojis.filter(
          (emoji) => emoji.category === category,
        );
        return acc;
      },
      {} as Record<string, typeof emojis>,
    );
  }, [categories, filteredEmojis]);

// Get all visible emojis for keyboard navigation
  const allVisibleEmojis = useMemo(() => {
    if (searchTerm) {
      return filteredEmojis;
    }
    return categories.flatMap((category) => emojisByCategory[category] || []);
  }, [searchTerm, filteredEmojis, categories, emojisByCategory]);

const handleEmojiClick = (emoji: string) => {
    onEmojiSelect(emoji);

// Update recent emojis
    const newRecent = [emoji, ...recentEmojis.filter((e) => e !== emoji)].slice(
      0,
      maxRecentEmojis,
    );

setRecentEmojis(newRecent);
    localStorage.setItem("recent-emojis", JSON.stringify(newRecent));

setIsOpen(false);
    setSearchTerm("");
    setSelectedIndex(-1);
  };

// Keyboard navigation
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (!isOpen) return;

switch (e.key) {
      case "ArrowDown":
        e.preventDefault();
        setSelectedIndex((prev) =>
          prev < allVisibleEmojis.length - 1 ? prev + 1 : prev,
        );
        break;
      case "ArrowUp":
        e.preventDefault();
        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : -1));
        break;
      case "Enter":
        e.preventDefault();
        if (selectedIndex >= 0 && allVisibleEmojis[selectedIndex]) {
          handleEmojiClick(allVisibleEmojis[selectedIndex].emoji);
        }
        break;
      case "Escape":
        setIsOpen(false);
        setSearchTerm("");
        setSelectedIndex(-1);
        break;
    }
  };

// Focus search input when popover opens
  useEffect(() => {
    if (isOpen && searchInputRef.current) {
      searchInputRef.current.focus();
    }
  }, [isOpen]);

// Reset selection when search changes
  useEffect(() => {
    startTransition(() => {
      setSelectedIndex(-1);
    });
  }, [searchTerm]);

return (
    <Popover open={isOpen} onOpenChange={setIsOpen}>
      <PopoverTrigger asChild>
        {trigger || (
          <Button
            variant="outline"
            size="sm"
            className="h-8 w-8 bg-transparent p-0"
          >
            <Smile className="h-4 w-4" />
            <span className="sr-only">Open emoji picker</span>
          </Button>
        )}
      </PopoverTrigger>
      <PopoverContent
        className="w-80 p-0"
        align="end"
        onKeyDown={handleKeyDown}
      >
        {/* Search Header */}
        <div className="space-y-2 border-b p-3">
          <div className="relative">
            <Search className="absolute top-2.5 left-2 h-4 w-4 text-muted-foreground" />
            <Input
              ref={searchInputRef}
              placeholder="Search emojis..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-8"
              aria-label="Search emojis"
            />
          </div>

{/* Search Results Count */}
          {searchTerm && (
            <div className="flex items-center justify-between text-xs text-muted-foreground">
              <span>{filteredEmojis.length} results found</span>
              {filteredEmojis.length > 0 && (
                <Badge variant="secondary" className="text-xs">
                  Use ↑↓ to navigate, Enter to select
                </Badge>
              )}
            </div>
          )}
        </div>

{/* Search Results */}
        {searchTerm ? (
          <ScrollArea className="h-64">
            {filteredEmojis.length > 0 ? (
              <EmojiGrid
                emojis={filteredEmojis}
                showCategory
                selectedIndex={selectedIndex}
                allVisibleEmojis={allVisibleEmojis}
                onEmojiClick={handleEmojiClick}
                setSelectedIndex={setSelectedIndex}
                emojiGridRef={emojiGridRef}
              />
            ) : (
              <div className="flex h-32 flex-col items-center justify-center text-muted-foreground">
                <Search className="mb-2 h-8 w-8" />
                <p className="text-sm">No emojis found</p>
                <p className="text-xs">Try a different search term</p>
              </div>
            )}
          </ScrollArea>
        ) : (
          /* Category Tabs */
          <Tabs
            defaultValue={recentEmojis.length > 0 ? "recent" : categories[0]}
            className="w-full"
          >
            <TabsList
              className="grid h-auto w-full p-1"
              style={{
                gridTemplateColumns: `repeat(${recentEmojis.length > 0 ? Math.min(categories.length + 1, 4) : Math.min(categories.length, 4)}, 1fr)`,
              }}
            >
              {recentEmojis.length > 0 && (
                <TabsTrigger
                  value="recent"
                  className="flex items-center gap-1 px-2 py-1 text-xs"
                  title="Recently used"
                >
                  <Clock className="h-3 w-3" />
                  <span className="hidden sm:inline">Recent</span>
                </TabsTrigger>
              )}
              {categories
                .slice(0, recentEmojis.length > 0 ? 3 : 4)
                .map((category) => {
                  const IconComponent =
                    categoryIcons[category as keyof typeof categoryIcons] ||
                    Smile;
                  return (
                    <TabsTrigger
                      key={category}
                      value={category}
                      className="flex items-center gap-1 px-2 py-1 text-xs"
                      title={category}
                    >
                      <IconComponent className="h-3 w-3" />
                      <span className="hidden sm:inline">
                        {category.split(" ")[0]}
                      </span>
                    </TabsTrigger>
                  );
                })}
            </TabsList>

{/* Recent Emojis Tab */}
            {recentEmojis.length > 0 && (
              <TabsContent value="recent" className="mt-0">
                <ScrollArea className="h-64">
                  <div className="p-2">
                    <div className="mb-2 flex items-center gap-2 px-1">
                      <Clock className="h-4 w-4 text-muted-foreground" />
                      <span className="text-sm font-medium">Recently Used</span>
                    </div>
                    <div className="grid grid-cols-8 gap-1">
                      {recentEmojis.map((emoji, index) => (
                        <Button
                          key={`recent-${emoji}-${index}`}
                          variant="ghost"
                          size="sm"
                          className="h-10 w-10 p-0 transition-colors hover:bg-accent"
                          onClick={() => handleEmojiClick(emoji)}
                          title={`Recently used: ${emoji}`}
                        >
                          <span className="text-lg" role="img">
                            {emoji}
                          </span>
                        </Button>
                      ))}
                    </div>
                  </div>
                </ScrollArea>
              </TabsContent>
            )}

{/* Category Tabs */}
            {categories.map((category) => (
              <TabsContent key={category} value={category} className="mt-0">
                <ScrollArea className="h-64">
                  {emojisByCategory[category]?.length > 0 ? (
                    <div className="p-2">
                      <div className="mb-2 flex items-center gap-2 px-1">
                        {(() => {
                          const IconComponent =
                            categoryIcons[
                              category as keyof typeof categoryIcons
                            ] || Smile;
                          return (
                            <IconComponent className="h-4 w-4 text-muted-foreground" />
                          );
                        })()}
                        <span className="text-sm font-medium">{category}</span>
                        <Badge variant="outline" className="text-xs">
                          {emojisByCategory[category].length}
                        </Badge>
                      </div>
                      <EmojiGrid
                        emojis={emojisByCategory[category]}
                        selectedIndex={selectedIndex}
                        allVisibleEmojis={allVisibleEmojis}
                        onEmojiClick={handleEmojiClick}
                        setSelectedIndex={setSelectedIndex}
                        emojiGridRef={emojiGridRef}
                      />
                    </div>
                  ) : (
                    <div className="flex h-32 items-center justify-center text-muted-foreground">
                      <p className="text-sm">No emojis in this category</p>
                    </div>
                  )}
                </ScrollArea>
              </TabsContent>
            ))}
          </Tabs>
        )}
      </PopoverContent>
    </Popover>
  );
}
4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":["button","input","label","textarea","badge","popover","scroll-area","tabs"]}]]}],["$","$L4f",null,{"sourceUrl":"https://shadcnblocks.com/r/emoji-picker-emoji-picker-in-form.json","proxyUrl":"https://shadcnregistry.com/r/shadcnblocks/emoji-picker-emoji-picker-in-form","itemId":"@shadcnblocks/emoji-picker-emoji-picker-in-form"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"example/emoji-picker/emoji-picker-in-form.tsx","content":"$51","type":"registry:block"},{"path":"components/shadcnblocks/emoji-picker.tsx","content":"$52","type":"registry:component","target":""}]}]]}],"$L53"]}]
</article></body></html>

Emoji Picker In Form Emoji Picker In Form

Installation

Files

components

Styles