@hokkiai/discord-emoji-selector 1.1.6 → 1.2.0

package/dist/index.js

@@ -1,254 +1,290 @@
+import {
+  render,
+  useSearchValue
+} from "./chunk-DMO3WEXH.js";
+
 // src/index.tsx
-import { useCallback as useCallback2, useEffect as useEffect7, useMemo as useMemo2, useRef as useRef2, useState as useState7 } from "react";
+import { lazy, Suspense, useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2 } from "react";
 
-// src/categoryDisplay.tsx
-import { ChevronDown } from "lucide-react";
-import { memo, useEffect as useEffect2, useState as useState2, useCallback, useMemo } from "react";
+// src/searchbar.tsx
+import { useEffect, useRef, useState } from "react";
 
-// src/render.tsx
-import tw from "@twemoji/api";
-function render(txt) {
-  let twemojiparsed = tw.parse(txt).replaceAll("<img", '<img style="object-fit: cover;" loading="lazy"');
-  if (txt.startsWith("<:") || txt.startsWith("<a:")) {
-    const id = txt.split(":")[2].split(">")[0];
-    const isAnimated = txt.startsWith("<a:");
-    const url = `https://cdn.discordapp.com/emojis/${id}.${isAnimated ? "gif" : "webp"}`;
-    twemojiparsed = `<img style="object-fit: cover;" src="${url}" loading="lazy" />`;
-  }
-  return twemojiparsed;
-}
+// src/icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var MagniferLinear = (props) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      focusable: "false",
+      height: "1em",
+      role: "presentation",
+      viewBox: "0 0 24 24",
+      width: "1em",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "11.5",
+            cy: "11.5",
+            r: "9.5",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M18.5 18.5L22 22",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+};
 
-// src/hooks.tsx
-import { useEffect, useState } from "react";
-function useSkin({ pickerId }) {
-  const [skin, setSkin] = useState(0);
+// src/searchbar.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SearchBar({
+  searchPlaceholder,
+  id
+}) {
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef(null);
+  const [inputPlaceholder, setInputPlaceholder] = useState(searchPlaceholder);
   useEffect(() => {
-    let raf;
-    const loop = () => {
-      const newSkin = window["emojipicker-" + pickerId]?.skin;
-      setSkin(newSkin || 0);
-      raf = requestAnimationFrame(loop);
+    window["emojipicker-" + id].changeSearchbarPlaceholder = (emoji) => {
+      setInputPlaceholder(emoji);
     };
-    raf = requestAnimationFrame(loop);
-    return () => {
-      cancelAnimationFrame(raf);
+    window["emojipicker-" + id].setSearchValue = (value) => {
+      inputRef.current.value = value;
+      window["emojipicker-" + id].searchValue = value;
     };
-  }, [pickerId]);
-  return skin;
+  }, []);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-focused": isFocused ? "true" : "false",
+      className: "bg-white/5 items-center w-full border-1 border-[#323337] p-2 px-3 flex rounded-md data-[focused=true]:border-[#3687E9]",
+      children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ref: inputRef,
+            onChange: (e) => window["emojipicker-" + id].searchValue = e.target.value,
+            className: "!outline-0 text-lg w-full",
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false),
+            placeholder: inputPlaceholder
+          }
+        ),
+        /* @__PURE__ */ jsx2(MagniferLinear, { className: "size-5 opacity-50" })
+      ]
+    }
+  );
 }
-function useSearchValue({ pickerId }) {
-  const [searchValue, setSearchValue] = useState("");
-  useEffect(() => {
-    let raf;
-    const loop = () => {
-      const newSearchValue = window["emojipicker-" + pickerId]?.searchValue || "";
-      setSearchValue(newSearchValue);
-      raf = requestAnimationFrame(loop);
-    };
-    raf = requestAnimationFrame(loop);
-    return () => {
-      cancelAnimationFrame(raf);
+
+// src/footer.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Footer({
+  id,
+  firstEmoji
+}) {
+  const [footerEmoji, setFooterEmoji] = useState2(firstEmoji);
+  useEffect2(() => {
+    window["emojipicker-" + id].changeFooterEmoji = (emoji) => {
+      setFooterEmoji(emoji);
     };
-  }, [pickerId]);
-  return searchValue;
+  }, []);
+  return /* @__PURE__ */ jsxs3("div", { className: "HOKKIEMOJIPICKER-footer relative mt-auto flex gap-2 items-center px-4 py-3 bg-[#070709]", children: [
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          cssText: `
+    left: 0;
+    position: absolute;
+    background-color: transparent;
+    top: 0;
+    width: 12px;
+    height: 12px;
+    transform: translateY(-100%);
+    border-radius: 100%;
+    box-shadow: -14px 14px 0px 10px #070709;`
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: "*:size-9 *:min-w-9 *:max-w-9",
+        dangerouslySetInnerHTML: { __html: render(footerEmoji.char) }
+      }
+    ),
+    /* @__PURE__ */ jsx3("p", { className: "text-lg whitespace-nowrap overflow-hidden text-ellipsis font-gg font-semibold", children: (footerEmoji.name || "").split(" ").map((e) => `:${e || ""}:`).join(" ") })
+  ] });
 }
 
-// src/categoryDisplay.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var Emoji = memo(function Emoji2({
-  pickerId,
-  emoji,
-  onEmojiMouseEnter,
-  onEmojiMouseLeave,
-  onEmojiSelect
+// src/sidebarCategory.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function SidebarCategory({
+  categoryName,
+  picker,
+  icon,
+  id
 }) {
-  const handleMouseEnter = useCallback(() => {
-    window["emojipicker-" + pickerId].changeFooterEmoji(emoji);
-    window["emojipicker-" + pickerId].changeSearchbarPlaceholder(emoji.name);
-    onEmojiMouseEnter(emoji);
-  }, [pickerId, emoji, onEmojiMouseEnter]);
-  const handleMouseLeave = useCallback(() => {
-    onEmojiMouseLeave(emoji);
-  }, [emoji, onEmojiMouseLeave]);
-  const handleClick = useCallback(() => {
-    onEmojiSelect(emoji);
-  }, [emoji, onEmojiSelect]);
-  const html = useMemo(() => render(emoji.char), [emoji.char]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      tabIndex: -1,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      onClick: handleClick,
-      className: "HOKKIEMOJIPICKER-emoji text-4xl p-1 cursor-pointer hover:bg-white/15 focus:bg-white/20 rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
-      dangerouslySetInnerHTML: { __html: html }
+  const searchValue = useSearchValue({ pickerId: id });
+  const [isActive, setIsActive] = useState3(false);
+  useEffect3(() => {
+    if ((searchValue || "").length > 0) {
+      setIsActive(false);
+      return;
     }
-  );
-});
-var SkinEmoji = memo(function SkinEmoji2({
-  pickerId,
-  emoji,
-  onEmojiSelect,
-  onEmojiMouseEnter,
-  onEmojiMouseLeave
-}) {
-  const skin = useSkin({ pickerId });
-  const fakeEmoji = useMemo(() => {
-    const charForSkin = [1, 2, 3, 4, 5].includes(skin) ? emoji.tones.find((a) => a.tone.find((b) => b === skin) === skin)?.char : emoji.char;
-    return {
-      ...emoji,
-      char: charForSkin,
-      preRendered: true,
-      tones: [
-        {
-          name: emoji.tones[0].name.replaceAll("1", "0"),
-          tone: [0],
-          char: emoji.char
-        },
-        ...emoji.tones
-      ]
+    const elem = picker.current;
+    const updateActive = () => {
+      if (!elem) return;
+      const header = elem.querySelector(
+        ".HOKKIEMOJIPICKER-categoryHeader." + categoryName
+      );
+      if (!header) return;
+      const categoryContainer = header.parentElement;
+      const scrollElem = elem.querySelector(
+        ".HOKKIEMOJIPICKER-emojidisplay"
+      );
+      if (!scrollElem) return;
+      const containerRect = scrollElem.getBoundingClientRect();
+      const categoryRect = categoryContainer.getBoundingClientRect();
+      const headerHeight = header.offsetHeight;
+      const categoryTop = categoryRect.top - containerRect.top + scrollElem.scrollTop;
+      const categoryBottom = categoryTop + categoryContainer.offsetHeight;
+      const sTop = scrollElem.scrollTop;
+      const inView = sTop >= categoryTop - headerHeight && sTop < categoryBottom - headerHeight;
+      setIsActive(inView);
     };
-  }, [emoji, skin]);
-  const handleMouseEnter = useCallback(() => {
-    window["emojipicker-" + pickerId].changeFooterEmoji(fakeEmoji);
-    window["emojipicker-" + pickerId].changeSearchbarPlaceholder(emoji.name);
-    onEmojiMouseEnter(fakeEmoji);
-  }, [pickerId, fakeEmoji, emoji.name, onEmojiMouseEnter]);
-  const handleMouseLeave = useCallback(() => {
-    onEmojiMouseLeave(fakeEmoji);
-  }, [fakeEmoji, onEmojiMouseLeave]);
-  const handleClick = useCallback(() => {
-    onEmojiSelect(fakeEmoji);
-  }, [fakeEmoji, onEmojiSelect]);
-  const html = useMemo(() => render(fakeEmoji.char), [fakeEmoji.char]);
-  return /* @__PURE__ */ jsx(
-    "div",
+    elem.querySelector(".HOKKIEMOJIPICKER-emojidisplay").addEventListener("scroll", updateActive);
+    updateActive();
+    return () => {
+      elem.querySelector(".HOKKIEMOJIPICKER-emojidisplay").removeEventListener("scroll", updateActive);
+    };
+  }, [picker, searchValue]);
+  return /* @__PURE__ */ jsx4(
+    "button",
     {
-      tabIndex: -1,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      onClick: handleClick,
-      className: "HOKKIEMOJIPICKER-skinemoji text-4xl p-1 cursor-pointer hover:bg-white/15 focus:bg-white/20 rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
-      dangerouslySetInnerHTML: { __html: html }
+      onClick: () => {
+        const elem = picker.current;
+        if (!elem) return;
+        const doScroll = () => {
+          const header = elem.querySelector(
+            ".HOKKIEMOJIPICKER-categoryHeader." + categoryName
+          );
+          if (!header) return;
+          const categoryContainer = header.parentElement;
+          const scrollElem = elem.querySelector(
+            ".HOKKIEMOJIPICKER-emojidisplay"
+          );
+          if (!scrollElem) return;
+          const containerRect = scrollElem.getBoundingClientRect();
+          const categoryRect = categoryContainer.getBoundingClientRect();
+          const headerHeight = header.offsetHeight;
+          const targetTop = categoryRect.top - containerRect.top + scrollElem.scrollTop - headerHeight;
+          scrollElem.scrollTo({
+            top: Math.max(0, targetTop),
+            behavior: "smooth"
+          });
+        };
+        if ((searchValue || "").length > 0) {
+          window["emojipicker-" + id].setSearchValue("");
+          setTimeout(doScroll, 50);
+        } else {
+          doScroll();
+        }
+      },
+      "data-active": isActive ? "true" : "false",
+      className: "!outline-0 HOKKIEMOJIPICKER-sidebarButton cursor-pointer size-8 data-[active=true]:bg-white/5 hover:bg-white/10 overflow-hidden *:!size-6.5 transition-all hover:*:!opacity-85 data-[active=true]:*:!opacity-100 flex items-center justify-center rounded-sm *:opacity-50",
+      children: icon
     }
   );
-});
-var CategoryDisplay = memo(function CategoryDisplay2({
-  category,
-  categoryInfo,
-  isToneSelectorEnabled,
-  onEmojiSelect,
-  onEmojiMouseEnter,
-  onEmojiMouseLeave,
-  pickerId
-}) {
-  const [isOpen, setIsOpen] = useState2(true);
-  const searchValue = useSearchValue({ pickerId });
-  useEffect2(() => {
-    setIsOpen(
-      (localStorage.getItem(
-        "hokkiemojipicker-category-" + category.name + "-open"
-      ) || "true") === "true"
-    );
-  }, [category.name]);
-  const searchLower = useMemo(
-    () => (searchValue || "").toLowerCase().replace(/_/g, " "),
-    [searchValue]
+}
+
+// src/skinselector.tsx
+import { useCallback, useEffect as useEffect4, useMemo, useState as useState4 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function SkinSelector({ id }) {
+  const skins = useMemo(() => ["\u{1F44F}", "\u{1F44F}\u{1F3FB}", "\u{1F44F}\u{1F3FC}", "\u{1F44F}\u{1F3FD}", "\u{1F44F}\u{1F3FE}", "\u{1F44F}\u{1F3FF}"], []);
+  const [selectedTone, setSelectedTone] = useState4(() => {
+    const cached = localStorage?.getItem("hokkiemojipicker-skin");
+    return cached ? parseInt(cached, 10) : 0;
+  });
+  const [open, setOpen] = useState4(false);
+  useEffect4(() => {
+    window["emojipicker-" + id].skin = selectedTone;
+  }, [selectedTone, id]);
+  const toggleOpen = useCallback(() => setOpen((prev) => !prev), []);
+  const handleSkinSelect = useCallback((i) => {
+    setOpen(false);
+    setSelectedTone(i);
+    try {
+      localStorage?.setItem("hokkiemojipicker-skin", String(i));
+    } catch (e) {
+    }
+  }, []);
+  const renderedCurrentSkin = useMemo(
+    () => render(skins[selectedTone]),
+    [skins, selectedTone]
+  );
+  const availableSkins = useMemo(
+    () => skins.map((skin, i) => skin === skins[selectedTone] ? null : { skin, i }).filter(Boolean),
+    [skins, selectedTone]
   );
-  const filteredEmojis = useMemo(() => {
-    if (!searchLower) return null;
-    return category.emojis.filter(
-      (emoji) => emoji.name.toLowerCase().replace(/_/g, " ").includes(searchLower)
-    );
-  }, [category.emojis, searchLower]);
-  if (searchLower) {
-    if (category.name === "recentlyUsed")
-      return /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full" });
-    return /* @__PURE__ */ jsx(Fragment, { children: filteredEmojis.map((emoji) => {
-      if (emoji.hasTone && !emoji.preRendered) {
-        return /* @__PURE__ */ jsx(
-          SkinEmoji,
-          {
-            onEmojiSelect,
-            pickerId,
-            onEmojiMouseEnter,
-            onEmojiMouseLeave,
-            emoji
-          },
-          emoji.name
-        );
+  return /* @__PURE__ */ jsxs4("div", { className: "relative mr-1", children: [
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: "HOKKIEMOJIPICKER-skinselector-trigger opacity-75 hover:opacity-100 cursor-pointer *:size-7 *:min-w-7",
+        onClick: toggleOpen,
+        dangerouslySetInnerHTML: { __html: renderedCurrentSkin }
       }
-      return /* @__PURE__ */ jsx(
-        Emoji,
-        {
-          onEmojiSelect,
-          pickerId,
-          emoji,
-          onEmojiMouseEnter,
-          onEmojiMouseLeave
-        },
-        emoji.name
-      );
-    }) });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "HOKKIEMOJIPICKER-categorydisplay flex flex-col relative w-full pt-2", children: [
-    /* @__PURE__ */ jsx(
+    ),
+    /* @__PURE__ */ jsx5(
       "div",
       {
-        className: "HOKKIEMOJIPICKER-categoryHeader sticky top-0 pt-2 cursor-pointer text-white px-2 flex bg-[#131416] p-1 pb-2 " + category.name,
-        onClick: () => {
-          const newOpen = !isOpen;
-          setIsOpen(newOpen);
-          localStorage.setItem(
-            "hokkiemojipicker-category-" + category.name + "-open",
-            newOpen ? "true" : "false"
-          );
+        style: {
+          opacity: open ? 1 : 0,
+          pointerEvents: open ? "all" : "none"
         },
-        children: /* @__PURE__ */ jsxs("span", { className: "flex gap-1.5 items-center opacity-75 hover:opacity-100", children: [
-          /* @__PURE__ */ jsx("span", { className: "*:size-4.5", children: categoryInfo.icon }),
-          " ",
-          /* @__PURE__ */ jsx("span", { className: "text-md font-semibold font-gg", children: categoryInfo.name }),
-          /* @__PURE__ */ jsx(
-            ChevronDown,
+        className: "absolute flex transition-all flex-col cursor-pointer top-full translate-y-2 overflow-hidden -left-2 rounded-sm border-1 bg-neutral-900",
+        children: availableSkins.map((item) => {
+          const { skin, i } = item;
+          return /* @__PURE__ */ jsx5(
+            "div",
             {
-              strokeWidth: 2,
-              className: "transition-all size-5 data-[open=false]:-rotate-90",
-              "data-open": isOpen ? "true" : "false"
-            }
-          )
-        ] })
-      }
-    ),
-    isOpen && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-y-0.5", children: category.emojis.map((emoji) => {
-      if (emoji.hasTone && !emoji.preRendered && isToneSelectorEnabled) {
-        return /* @__PURE__ */ jsx(
-          SkinEmoji,
-          {
-            onEmojiSelect,
-            pickerId,
-            emoji,
-            onEmojiMouseEnter,
-            onEmojiMouseLeave
-          },
-          emoji.name
-        );
+              className: "HOKKIEMOJIPICKER-skinselector-skinoption *:size-7 *:min-w-7 hover:bg-white/5 p-2 transition-all",
+              onClick: () => handleSkinSelect(i),
+              dangerouslySetInnerHTML: {
+                __html: render(skin)
+              }
+            },
+            i
+          );
+        })
       }
-      return /* @__PURE__ */ jsx(
-        Emoji,
-        {
-          onEmojiSelect,
-          pickerId,
-          onEmojiMouseEnter,
-          onEmojiMouseLeave,
-          emoji
-        },
-        emoji.name
-      );
-    }) })
+    )
   ] });
-});
-var categoryDisplay_default = CategoryDisplay;
+}
+
+// src/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+var cn = (...inputs) => {
+  return twMerge(clsx(inputs));
+};
 
 // src/emojilib.json
 var emojilib_default = [
@@ -16980,260 +17016,9 @@ var emojilib_default = [
   }
 ];
 
-// src/searchbar.tsx
-import { useEffect as useEffect3, useRef, useState as useState3 } from "react";
-
-// src/icons.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var MagniferLinear = (props) => {
-  return /* @__PURE__ */ jsxs2(
-    "svg",
-    {
-      "aria-hidden": "true",
-      fill: "none",
-      focusable: "false",
-      height: "1em",
-      role: "presentation",
-      viewBox: "0 0 24 24",
-      width: "1em",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx2(
-          "circle",
-          {
-            cx: "11.5",
-            cy: "11.5",
-            r: "9.5",
-            stroke: "currentColor",
-            strokeWidth: "1.5"
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "path",
-          {
-            d: "M18.5 18.5L22 22",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round"
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/searchbar.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function SearchBar({
-  searchPlaceholder,
-  id
-}) {
-  const [isFocused, setIsFocused] = useState3(false);
-  const inputRef = useRef(null);
-  const [inputPlaceholder, setInputPlaceholder] = useState3(searchPlaceholder);
-  useEffect3(() => {
-    window["emojipicker-" + id].changeSearchbarPlaceholder = (emoji) => {
-      setInputPlaceholder(emoji);
-    };
-    window["emojipicker-" + id].setSearchValue = (value) => {
-      inputRef.current.value = value;
-      window["emojipicker-" + id].searchValue = value;
-    };
-  }, []);
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      "data-focused": isFocused ? "true" : "false",
-      className: "bg-[#121214] items-center w-full border-1 border-[#323337] p-2 px-3 flex rounded-md data-[focused=true]:border-[#3687E9]",
-      children: [
-        /* @__PURE__ */ jsx3(
-          "input",
-          {
-            ref: inputRef,
-            onChange: (e) => window["emojipicker-" + id].searchValue = e.target.value,
-            className: "!outline-0 text-lg w-full",
-            onFocus: () => setIsFocused(true),
-            onBlur: () => setIsFocused(false),
-            placeholder: inputPlaceholder
-          }
-        ),
-        /* @__PURE__ */ jsx3(MagniferLinear, { className: "size-5 opacity-50" })
-      ]
-    }
-  );
-}
-
-// src/footer.tsx
-import { useEffect as useEffect4, useState as useState4 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function Footer({
-  id,
-  firstEmoji
-}) {
-  const [footerEmoji, setFooterEmoji] = useState4(firstEmoji);
-  useEffect4(() => {
-    window["emojipicker-" + id].changeFooterEmoji = (emoji) => {
-      setFooterEmoji(emoji);
-    };
-  }, []);
-  return /* @__PURE__ */ jsxs4("div", { className: "HOKKIEMOJIPICKER-footer mt-auto flex gap-2 items-center border-t-1 px-4 py-3 border-[#363639] bg-[#070709]", children: [
-    /* @__PURE__ */ jsx4(
-      "div",
-      {
-        className: "*:size-9 *:min-w-9 *:max-w-9",
-        dangerouslySetInnerHTML: { __html: render(footerEmoji.char) }
-      }
-    ),
-    /* @__PURE__ */ jsx4("p", { className: "text-lg whitespace-nowrap overflow-hidden text-ellipsis font-gg font-semibold", children: (footerEmoji.name || "").split(" ").map((e) => `:${e || ""}:`).join(" ") })
-  ] });
-}
-
-// src/sidebarCategory.tsx
-import { useEffect as useEffect5, useState as useState5 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-function SidebarCategory({
-  categoryName,
-  picker,
-  icon,
-  id
-}) {
-  const searchValue = useSearchValue({ pickerId: id });
-  const [isActive, setIsActive] = useState5(false);
-  useEffect5(() => {
-    if ((searchValue || "").length > 0) {
-      setIsActive(false);
-      return;
-    }
-    const elem = picker.current;
-    const updateActive = () => {
-      if (!elem) return;
-      const header = elem.querySelector(
-        ".HOKKIEMOJIPICKER-categoryHeader." + categoryName
-      );
-      if (!header) return;
-      const categoryContainer = header.parentElement;
-      const scrollElem = elem.querySelector(
-        ".HOKKIEMOJIPICKER-emojidisplay"
-      );
-      if (!scrollElem) return;
-      const containerRect = scrollElem.getBoundingClientRect();
-      const categoryRect = categoryContainer.getBoundingClientRect();
-      const headerHeight = header.offsetHeight;
-      const categoryTop = categoryRect.top - containerRect.top + scrollElem.scrollTop;
-      const categoryBottom = categoryTop + categoryContainer.offsetHeight;
-      const sTop = scrollElem.scrollTop;
-      const inView = sTop >= categoryTop - headerHeight && sTop < categoryBottom - headerHeight;
-      setIsActive(inView);
-    };
-    elem.querySelector(".HOKKIEMOJIPICKER-emojidisplay").addEventListener("scroll", updateActive);
-    updateActive();
-    return () => {
-      elem.querySelector(".HOKKIEMOJIPICKER-emojidisplay").removeEventListener("scroll", updateActive);
-    };
-  }, [picker, searchValue]);
-  return /* @__PURE__ */ jsx5(
-    "button",
-    {
-      onClick: () => {
-        const elem = picker.current;
-        if (!elem) return;
-        const doScroll = () => {
-          const header = elem.querySelector(
-            ".HOKKIEMOJIPICKER-categoryHeader." + categoryName
-          );
-          if (!header) return;
-          const categoryContainer = header.parentElement;
-          const scrollElem = elem.querySelector(
-            ".HOKKIEMOJIPICKER-emojidisplay"
-          );
-          if (!scrollElem) return;
-          const containerRect = scrollElem.getBoundingClientRect();
-          const categoryRect = categoryContainer.getBoundingClientRect();
-          const headerHeight = header.offsetHeight;
-          const targetTop = categoryRect.top - containerRect.top + scrollElem.scrollTop - headerHeight;
-          scrollElem.scrollTo({
-            top: Math.max(0, targetTop),
-            behavior: "smooth"
-          });
-        };
-        if ((searchValue || "").length > 0) {
-          window["emojipicker-" + id].setSearchValue("");
-          setTimeout(doScroll, 50);
-        } else {
-          doScroll();
-        }
-      },
-      "data-active": isActive ? "true" : "false",
-      className: "!outline-0 HOKKIEMOJIPICKER-sidebarButton cursor-pointer size-8 data-[active=true]:bg-white/5 hover:bg-white/10 overflow-hidden *:!size-6.5 transition-all hover:*:!opacity-85 data-[active=true]:*:!opacity-100 flex items-center justify-center rounded-sm *:opacity-50",
-      children: icon
-    }
-  );
-}
-
-// src/skinselector.tsx
-import { useEffect as useEffect6, useState as useState6 } from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function SkinSelector({ id }) {
-  const skins = ["\u{1F44F}", "\u{1F44F}\u{1F3FB}", "\u{1F44F}\u{1F3FC}", "\u{1F44F}\u{1F3FD}", "\u{1F44F}\u{1F3FE}", "\u{1F44F}\u{1F3FF}"];
-  const [selectedTone, setSelectedTone] = useState6(0);
-  const [open, setOpen] = useState6(false);
-  useEffect6(() => {
-    setSelectedTone(
-      parseInt(localStorage.getItem("hokkiemojipicker-skin") || "0")
-    );
-  }, []);
-  useEffect6(() => {
-    window["emojipicker-" + id].skin = selectedTone;
-  }, [selectedTone]);
-  return /* @__PURE__ */ jsxs5("div", { className: "relative mr-1", children: [
-    /* @__PURE__ */ jsx6(
-      "div",
-      {
-        className: "HOKKIEMOJIPICKER-skinselector-trigger opacity-75 hover:opacity-100 cursor-pointer *:size-7 *:min-w-7",
-        onClick: () => {
-          setOpen(!open);
-        },
-        dangerouslySetInnerHTML: { __html: render(skins[selectedTone]) }
-      }
-    ),
-    /* @__PURE__ */ jsx6(
-      "div",
-      {
-        style: {
-          opacity: open ? 1 : 0,
-          pointerEvents: open ? "all" : "none"
-        },
-        className: "absolute flex transition-all flex-col cursor-pointer top-full translate-y-2 overflow-hidden -left-2 rounded-sm border-1 bg-neutral-900",
-        children: skins.filter((a) => a !== skins[selectedTone]).map((skin, i) => {
-          return /* @__PURE__ */ jsx6(
-            "div",
-            {
-              className: "HOKKIEMOJIPICKER-skinselector-skinoption *:size-7 *:min-w-7 hover:bg-white/5 p-2 transition-all",
-              onClick: () => {
-                setOpen(!open);
-                setSelectedTone(i);
-                localStorage.setItem("hokkiemojipicker-skin", i + "");
-              },
-              dangerouslySetInnerHTML: {
-                __html: render(skin)
-              }
-            }
-          );
-        })
-      }
-    )
-  ] });
-}
-
-// src/cn.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-var cn = (...inputs) => {
-  return twMerge(clsx(inputs));
-};
-
 // src/index.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var CategoryDisplay = lazy(() => import("./categoryDisplay-AZPE23IJ.js"));
 function EmojiSelector({
   categories = {},
   customEmojis = {},
@@ -17252,15 +17037,18 @@ function EmojiSelector({
   height = 500,
   width = 520
 }) {
-  let recentlyUsed = JSON.parse(
-    (localStorage || { getItem: (a) => "[]" }).getItem(
-      "hokkiemojipicker-recentlyused"
-    ) || "[]"
+  const recentlyUsed = useMemo2(
+    () => JSON.parse(
+      (localStorage || { getItem: (a) => "[]" }).getItem(
+        "hokkiemojipicker-recentlyused"
+      ) || "[]"
+    ),
+    []
   );
   const categoryData = {
     recentlyUsed: recentlyUsed.length > 0 ? {
       name: "Recently Used",
-      icon: /* @__PURE__ */ jsx7(
+      icon: /* @__PURE__ */ jsx6(
         "svg",
         {
           "aria-hidden": "true",
@@ -17270,7 +17058,7 @@ function EmojiSelector({
           height: "24",
           fill: "none",
           viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx7(
+          children: /* @__PURE__ */ jsx6(
             "path",
             {
               fill: "currentColor",
@@ -17284,7 +17072,7 @@ function EmojiSelector({
     } : false,
     customServerIcons: (customEmojis.emojis || []).length > 0 ? {
       name: customEmojis.serverName,
-      icon: /* @__PURE__ */ jsx7("div", { className: "relative rounded-full overflow-hidden", children: /* @__PURE__ */ jsx7(
+      icon: /* @__PURE__ */ jsx6("div", { className: "relative rounded-full overflow-hidden", children: /* @__PURE__ */ jsx6(
         "img",
         {
           src: customEmojis.serverIconURL,
@@ -17295,7 +17083,7 @@ function EmojiSelector({
     separator: true,
     people: {
       name: "People",
-      icon: /* @__PURE__ */ jsx7(
+      icon: /* @__PURE__ */ jsx6(
         "svg",
         {
           "aria-hidden": "true",
@@ -17305,7 +17093,7 @@ function EmojiSelector({
           height: "24",
           fill: "none",
           viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx7(
+          children: /* @__PURE__ */ jsx6(
             "path",
             {
               fill: "currentColor",
@@ -17320,7 +17108,7 @@ function EmojiSelector({
     },
     nature: {
       name: "Nature",
-      icon: /* @__PURE__ */ jsx7(
+      icon: /* @__PURE__ */ jsx6(
         "svg",
         {
           "aria-hidden": "true",
@@ -17330,7 +17118,7 @@ function EmojiSelector({
           height: "24",
           fill: "none",
           viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx7(
+          children: /* @__PURE__ */ jsx6(
             "path",
             {
               fill: "currentColor",
@@ -17343,7 +17131,7 @@ function EmojiSelector({
     },
     food: {
       name: "Food",
-      icon: /* @__PURE__ */ jsx7(
+      icon: /* @__PURE__ */ jsx6(
         "svg",
         {
           "aria-hidden": "true",
@@ -17353,7 +17141,7 @@ function EmojiSelector({
           height: "24",
           fill: "none",
           viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx7(
+          children: /* @__PURE__ */ jsx6(
             "path",
             {
               fill: "currentColor",
@@ -17366,7 +17154,7 @@ function EmojiSelector({
     },
     activities: {
       name: "Activities",
-      icon: /* @__PURE__ */ jsx7(
+      icon: /* @__PURE__ */ jsx6(
         "svg",
         {
           "aria-hidden": "true",
@@ -17376,7 +17164,7 @@ function EmojiSelector({
           height: "24",
           fill: "none",
           viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx7(
+          children: /* @__PURE__ */ jsx6(
             "path",
             {
               fill: "currentColor",
@@ -17391,7 +17179,7 @@ function EmojiSelector({
     },
     travel: {
       name: "Travel",
-      icon: /* @__PURE__ */ jsx7(
+      icon: /* @__PURE__ */ jsx6(
         "svg",
         {
           "aria-hidden": "true",
@@ -17401,7 +17189,7 @@ function EmojiSelector({
           height: "24",
           fill: "none",
           viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx7(
+          children: /* @__PURE__ */ jsx6(
             "path",
             {
               fill: "currentColor",
@@ -17416,7 +17204,7 @@ function EmojiSelector({
     },
     objects: {
       name: "Objects",
-      icon: /* @__PURE__ */ jsxs6(
+      icon: /* @__PURE__ */ jsxs5(
         "svg",
         {
           "aria-hidden": "true",
@@ -17427,14 +17215,14 @@ function EmojiSelector({
           fill: "none",
           viewBox: "0 0 24 24",
           children: [
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx6(
               "path",
               {
                 fill: "currentColor",
                 d: "M10.41 3.59 11.6 2.4a2 2 0 0 1 2.82 0l1.3 1.3a1 1 0 0 0 .7.29h4.18a1.41 1.41 0 0 1 1 2.41L14.4 13.6a1.41 1.41 0 0 1-2.41-1V8.4l-3.11 3.12a2 2 0 0 0-.53 1.87L9.9 20H15a1 1 0 1 1 0 2H3a1 1 0 1 1 0-2h4.86L6.4 13.86a4 4 0 0 1 1.06-3.75L10.8 6.8l-.38-.38a2 2 0 0 1 0-2.82Z"
               }
             ),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx6(
               "path",
               {
                 fill: "currentColor",
@@ -17448,7 +17236,7 @@ function EmojiSelector({
     },
     symbols: {
       name: "Symbols",
-      icon: /* @__PURE__ */ jsx7(
+      icon: /* @__PURE__ */ jsx6(
         "svg",
         {
           "aria-hidden": "true",
@@ -17458,7 +17246,7 @@ function EmojiSelector({
           height: "24",
           fill: "none",
           viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx7(
+          children: /* @__PURE__ */ jsx6(
             "path",
             {
               fill: "currentColor",
@@ -17471,7 +17259,7 @@ function EmojiSelector({
     },
     flags: {
       name: "Flags",
-      icon: /* @__PURE__ */ jsx7(
+      icon: /* @__PURE__ */ jsx6(
         "svg",
         {
           "aria-hidden": "true",
@@ -17481,7 +17269,7 @@ function EmojiSelector({
           height: "24",
           fill: "none",
           viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx7(
+          children: /* @__PURE__ */ jsx6(
             "path",
             {
               fill: "currentColor",
@@ -17493,34 +17281,32 @@ function EmojiSelector({
       ...categories.flags
     }
   };
-  const emojis = [
-    recentlyUsed.length > 0 ? {
-      name: "recentlyUsed",
-      emojis: recentlyUsed
-    } : void 0,
-    (customEmojis?.emojis || []).length > 0 ? {
-      name: "customServerIcons",
-      emojis: customEmojis.emojis.map((a) => {
-        return { name: a.split(":")[1].split(":")[0], char: a };
-      })
-    } : void 0,
-    ...emojilib_default
-  ].filter((a) => a !== void 0);
+  const emojis = useMemo2(() => {
+    return [
+      recentlyUsed.length > 0 ? {
+        name: "recentlyUsed",
+        emojis: recentlyUsed
+      } : void 0,
+      (customEmojis?.emojis || []).length > 0 ? {
+        name: "customServerIcons",
+        emojis: customEmojis.emojis.map((a) => {
+          return { name: a.split(":")[1].split(":")[0], char: a };
+        })
+      } : void 0,
+      ...emojilib_default
+    ].filter((a) => a !== void 0);
+  }, [recentlyUsed, customEmojis]);
   const navHeight = showNav ? Math.floor(height / 7) : 0;
-  const id = useMemo2(
-    () => Math.random().toString(36).substring(2, 15),
-    []
-  );
+  const id = useMemo2(() => Math.random().toString(36).substring(2, 15), []);
   const picker = useRef2(null);
   const scrollRef = useRef2(null);
-  const [focusIndex, setFocusIndex] = useState7(-1);
   const handleWheel = useCallback2((e) => {
     const el = scrollRef.current;
     if (!el) return;
     e.preventDefault();
     el.scrollTop += e.deltaY;
   }, []);
-  useEffect7(() => {
+  useEffect5(() => {
     const el = scrollRef.current;
     if (!el) return;
     el.addEventListener("wheel", handleWheel, { passive: false });
@@ -17528,35 +17314,7 @@ function EmojiSelector({
       el.removeEventListener("wheel", handleWheel);
     };
   }, [handleWheel]);
-  const handleKeyDown = useCallback2(
-    (e) => {
-      const el = scrollRef.current;
-      if (!el) return;
-      const emojiElements = el.querySelectorAll(
-        ".HOKKIEMOJIPICKER-emoji, .HOKKIEMOJIPICKER-skinemoji"
-      );
-      const count = emojiElements.length;
-      if (count === 0) return;
-      if (e.key === "Tab") {
-        e.preventDefault();
-        let next = focusIndex + (e.shiftKey ? -1 : 1);
-        if (next < 0) next = count - 1;
-        if (next >= count) next = 0;
-        setFocusIndex(next);
-        const target = emojiElements[next];
-        if (target) {
-          target.scrollIntoView({ block: "nearest" });
-          target.focus();
-        }
-      } else if (e.key === "Enter" && focusIndex >= 0) {
-        e.preventDefault();
-        const target = emojiElements[focusIndex];
-        if (target) target.click();
-      }
-    },
-    [focusIndex]
-  );
-  return /* @__PURE__ */ jsx7("div", { className: "HOKKIEMOJIPICKER-emojiContainer", children: /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx6("div", { className: "HOKKIEMOJIPICKER-emojiContainer", children: /* @__PURE__ */ jsxs5(
     "div",
     {
       ref: picker,
@@ -17574,30 +17332,30 @@ function EmojiSelector({
         minWidth: width
       },
       children: [
-        showNav && /* @__PURE__ */ jsxs6(
+        showNav && /* @__PURE__ */ jsxs5(
           "div",
           {
-            className: "HOKKIEMOJIPICKER-nav border-[#363639] flex items-center gap-4 border-b-1 p-3 relative z-50",
+            className: "HOKKIEMOJIPICKER-nav flex items-center gap-4 p-3 relative z-50",
             style: {
               height: navHeight,
               maxHeight: navHeight,
               minHeight: navHeight
             },
             children: [
-              /* @__PURE__ */ jsx7(SearchBar, { id, searchPlaceholder }),
-              toneSelector && /* @__PURE__ */ jsx7(SkinSelector, { id })
+              /* @__PURE__ */ jsx6(SearchBar, { id, searchPlaceholder }),
+              toneSelector && /* @__PURE__ */ jsx6(SkinSelector, { id })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs6("div", { className: "flex h-full", children: [
-          showSidebar && /* @__PURE__ */ jsxs6("div", { className: "HOKKIEMOJIPICKER-sidebar bg-[#070709]  flex p-2 gap-1 flex-col", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex h-full", children: [
+          showSidebar && /* @__PURE__ */ jsxs5("div", { className: "HOKKIEMOJIPICKER-sidebar rounded-t-md bg-[#070709]  flex p-2 gap-1 flex-col", children: [
             Object.keys(categoryData).filter((categoryName) => categoryData[categoryName] !== false).map((categoryName) => {
               const category = categoryData[categoryName];
               if (category === true) {
-                return /* @__PURE__ */ jsx7("div", { className: "w-full h-0 border-b-1 my-2" });
+                return /* @__PURE__ */ jsx6("div", { className: "w-full h-0 border-b-1 my-2" });
               }
               const icon = category.icon;
-              return /* @__PURE__ */ jsx7(
+              return /* @__PURE__ */ jsx6(
                 SidebarCategory,
                 {
                   id,
@@ -17608,9 +17366,9 @@ function EmojiSelector({
                 categoryName
               );
             }),
-            /* @__PURE__ */ jsx7("div", { className: "h-24" })
+            /* @__PURE__ */ jsx6("div", { className: "h-24" })
           ] }),
-          /* @__PURE__ */ jsxs6(
+          /* @__PURE__ */ jsxs5(
             "div",
             {
               style: {
@@ -17620,51 +17378,60 @@ function EmojiSelector({
               },
               className: "HOKKIEMOJIPICKER-emojidisplaycontainer overflow-hidden flex flex-col w-full",
               children: [
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx6(
                   "div",
                   {
                     ref: scrollRef,
-                    tabIndex: 0,
-                    onKeyDown: handleKeyDown,
                     style: {
                       flexBasis: "fit-content"
                     },
                     className: "HOKKIEMOJIPICKER-emojidisplay overflow-y-scroll bg-[#131416] h-full w-full flex flex-wrap px-2 items-start justfy-start justify-self-start gap-y-0.5",
-                    children: emojis.map((category) => {
-                      if (!category) return;
-                      const categoryInfo = categoryData[category.name];
-                      return /* @__PURE__ */ jsx7(
-                        categoryDisplay_default,
-                        {
-                          onEmojiMouseEnter,
-                          onEmojiMouseLeave,
-                          isToneSelectorEnabled: toneSelector,
-                          onEmojiSelect: (a) => {
-                            onEmojiSelect(a);
-                            if (a.char.startsWith("<")) return;
-                            let newRecentlyUsed = JSON.parse(
-                              localStorage.getItem("hokkiemojipicker-recentlyused") || "[]"
-                            );
-                            newRecentlyUsed = newRecentlyUsed.filter(
-                              (b) => b.char !== a.char
-                            );
-                            newRecentlyUsed.push(a);
-                            newRecentlyUsed = newRecentlyUsed.slice(0, 20);
-                            localStorage.setItem(
-                              "hokkiemojipicker-recentlyused",
-                              JSON.stringify(newRecentlyUsed)
-                            );
-                          },
-                          category,
-                          pickerId: id,
-                          categoryInfo
-                        },
-                        category.name
-                      );
-                    })
+                    children: /* @__PURE__ */ jsx6(
+                      Suspense,
+                      {
+                        fallback: /* @__PURE__ */ jsx6("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center gap-3", children: [
+                          /* @__PURE__ */ jsx6("div", { className: "animate-spin size-8 border-2 border-white/20 border-t-white/80 rounded-full" }),
+                          /* @__PURE__ */ jsx6("span", { className: "text-white/60 text-sm", children: "Loading emojis..." })
+                        ] }) }),
+                        children: emojis.map((category) => {
+                          if (!category) return;
+                          const categoryInfo = categoryData[category.name];
+                          return /* @__PURE__ */ jsx6(
+                            CategoryDisplay,
+                            {
+                              onEmojiMouseEnter,
+                              onEmojiMouseLeave,
+                              isToneSelectorEnabled: toneSelector,
+                              onEmojiSelect: (a) => {
+                                onEmojiSelect(a);
+                                if (a.char.startsWith("<")) return;
+                                let newRecentlyUsed = JSON.parse(
+                                  localStorage.getItem(
+                                    "hokkiemojipicker-recentlyused"
+                                  ) || "[]"
+                                );
+                                newRecentlyUsed = newRecentlyUsed.filter(
+                                  (b) => b.char !== a.char
+                                );
+                                newRecentlyUsed.push(a);
+                                newRecentlyUsed = newRecentlyUsed.slice(0, 20);
+                                localStorage.setItem(
+                                  "hokkiemojipicker-recentlyused",
+                                  JSON.stringify(newRecentlyUsed)
+                                );
+                              },
+                              category,
+                              pickerId: id,
+                              categoryInfo
+                            },
+                            category.name
+                          );
+                        })
+                      }
+                    )
                   }
                 ),
-                showFooter && /* @__PURE__ */ jsx7(Footer, { id, firstEmoji: emojis[0].emojis[0] })
+                showFooter && /* @__PURE__ */ jsx6(Footer, { id, firstEmoji: emojis[0].emojis[0] })
               ]
             }
           )