@hokkiai/discord-emoji-selector 1.1.5 → 1.1.7

package/dist/index.cjs

@@ -4,6 +4,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -26,21 +29,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/index.tsx
-var index_exports = {};
-__export(index_exports, {
-  default: () => EmojiSelector,
-  render: () => render
-});
-module.exports = __toCommonJS(index_exports);
-var import_react7 = require("react");
-
-// src/categoryDisplay.tsx
-var import_lucide_react = require("lucide-react");
-var import_react2 = require("react");
-
 // src/render.tsx
-var import_api = __toESM(require("@twemoji/api"), 1);
 function render(txt) {
   let twemojiparsed = import_api.default.parse(txt).replaceAll("<img", '<img style="object-fit: cover;" loading="lazy"');
   if (txt.startsWith("<:") || txt.startsWith("<a:")) {
@@ -51,12 +40,17 @@ function render(txt) {
   }
   return twemojiparsed;
 }
+var import_api;
+var init_render = __esm({
+  "src/render.tsx"() {
+    import_api = __toESM(require("@twemoji/api"), 1);
+  }
+});
 
 // src/hooks.tsx
-var import_react = require("react");
 function useSkin({ pickerId }) {
-  const [skin, setSkin] = (0, import_react.useState)(0);
-  (0, import_react.useEffect)(() => {
+  const [skin, setSkin] = (0, import_react3.useState)(0);
+  (0, import_react3.useEffect)(() => {
     let raf;
     const loop = () => {
       const newSkin = window["emojipicker-" + pickerId]?.skin;
@@ -71,8 +65,8 @@ function useSkin({ pickerId }) {
   return skin;
 }
 function useSearchValue({ pickerId }) {
-  const [searchValue, setSearchValue] = (0, import_react.useState)("");
-  (0, import_react.useEffect)(() => {
+  const [searchValue, setSearchValue] = (0, import_react3.useState)("");
+  (0, import_react3.useEffect)(() => {
     let raf;
     const loop = () => {
       const newSearchValue = window["emojipicker-" + pickerId]?.searchValue || "";
@@ -86,193 +80,488 @@ function useSearchValue({ pickerId }) {
   }, [pickerId]);
   return searchValue;
 }
+var import_react3;
+var init_hooks = __esm({
+  "src/hooks.tsx"() {
+    import_react3 = require("react");
+  }
+});
 
 // src/categoryDisplay.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function Emoji({
-  pickerId,
-  emoji,
-  onEmojiMouseEnter,
-  onEmojiMouseLeave,
-  onEmojiSelect,
-  key
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      onMouseEnter: () => {
+var categoryDisplay_exports = {};
+__export(categoryDisplay_exports, {
+  default: () => categoryDisplay_default
+});
+var import_lucide_react, import_react6, import_jsx_runtime6, Emoji, SkinEmoji, CategoryDisplay, categoryDisplay_default;
+var init_categoryDisplay = __esm({
+  "src/categoryDisplay.tsx"() {
+    import_lucide_react = require("lucide-react");
+    import_react6 = require("react");
+    init_render();
+    init_hooks();
+    import_jsx_runtime6 = require("react/jsx-runtime");
+    Emoji = (0, import_react6.memo)(function Emoji2({
+      pickerId,
+      emoji,
+      onEmojiMouseEnter,
+      onEmojiMouseLeave,
+      onEmojiSelect
+    }) {
+      const handleMouseEnter = (0, import_react6.useCallback)(() => {
         window["emojipicker-" + pickerId].changeFooterEmoji(emoji);
-        window["emojipicker-" + pickerId].changeSearchbarPlaceholder(
-          emoji.name
-        );
+        window["emojipicker-" + pickerId].changeSearchbarPlaceholder(emoji.name);
         onEmojiMouseEnter(emoji);
-      },
-      onMouseLeave: () => {
+      }, [pickerId, emoji, onEmojiMouseEnter]);
+      const handleMouseLeave = (0, import_react6.useCallback)(() => {
         onEmojiMouseLeave(emoji);
-      },
-      onClick: () => {
+      }, [emoji, onEmojiMouseLeave]);
+      const handleClick = (0, import_react6.useCallback)(() => {
         onEmojiSelect(emoji);
-      },
-      className: "HOKKIEMOJIPICKER-emoji text-4xl p-1 cursor-pointer hover:bg-white/15  rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
-      dangerouslySetInnerHTML: {
-        __html: render(emoji.char)
+      }, [emoji, onEmojiSelect]);
+      const html = (0, import_react6.useMemo)(() => render(emoji.char), [emoji.char]);
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "div",
+        {
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          onClick: handleClick,
+          className: "HOKKIEMOJIPICKER-emoji text-4xl p-1 cursor-pointer hover:bg-white/15 rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
+          dangerouslySetInnerHTML: { __html: html }
+        }
+      );
+    });
+    SkinEmoji = (0, import_react6.memo)(function SkinEmoji2({
+      pickerId,
+      emoji,
+      onEmojiSelect,
+      onEmojiMouseEnter,
+      onEmojiMouseLeave
+    }) {
+      const skin = useSkin({ pickerId });
+      const fakeEmoji = (0, import_react6.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
+          ]
+        };
+      }, [emoji, skin]);
+      const handleMouseEnter = (0, import_react6.useCallback)(() => {
+        window["emojipicker-" + pickerId].changeFooterEmoji(fakeEmoji);
+        window["emojipicker-" + pickerId].changeSearchbarPlaceholder(emoji.name);
+        onEmojiMouseEnter(fakeEmoji);
+      }, [pickerId, fakeEmoji, emoji.name, onEmojiMouseEnter]);
+      const handleMouseLeave = (0, import_react6.useCallback)(() => {
+        onEmojiMouseLeave(fakeEmoji);
+      }, [fakeEmoji, onEmojiMouseLeave]);
+      const handleClick = (0, import_react6.useCallback)(() => {
+        onEmojiSelect(fakeEmoji);
+      }, [fakeEmoji, onEmojiSelect]);
+      const html = (0, import_react6.useMemo)(() => render(fakeEmoji.char), [fakeEmoji.char]);
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "div",
+        {
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          onClick: handleClick,
+          className: "HOKKIEMOJIPICKER-skinemoji text-4xl p-1 cursor-pointer hover:bg-white/15 rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
+          dangerouslySetInnerHTML: { __html: html }
+        }
+      );
+    });
+    CategoryDisplay = (0, import_react6.memo)(function CategoryDisplay2({
+      category,
+      categoryInfo,
+      isToneSelectorEnabled,
+      onEmojiSelect,
+      onEmojiMouseEnter,
+      onEmojiMouseLeave,
+      pickerId
+    }) {
+      const [isOpen, setIsOpen] = (0, import_react6.useState)(true);
+      const searchValue = useSearchValue({ pickerId });
+      (0, import_react6.useEffect)(() => {
+        setIsOpen(
+          (localStorage.getItem(
+            "hokkiemojipicker-category-" + category.name + "-open"
+          ) || "true") === "true"
+        );
+      }, [category.name]);
+      const searchLower = (0, import_react6.useMemo)(
+        () => (searchValue || "").toLowerCase().replace(/_/g, " "),
+        [searchValue]
+      );
+      const filteredEmojis = (0, import_react6.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__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-1.5 w-full" });
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: filteredEmojis.map((emoji) => {
+          if (emoji.hasTone && !emoji.preRendered) {
+            return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              SkinEmoji,
+              {
+                onEmojiSelect,
+                pickerId,
+                onEmojiMouseEnter,
+                onEmojiMouseLeave,
+                emoji
+              },
+              emoji.name
+            );
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Emoji,
+            {
+              onEmojiSelect,
+              pickerId,
+              emoji,
+              onEmojiMouseEnter,
+              onEmojiMouseLeave
+            },
+            emoji.name
+          );
+        }) });
       }
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "HOKKIEMOJIPICKER-categorydisplay flex flex-col relative w-full pt-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "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"
+              );
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "flex gap-1.5 items-center opacity-75 hover:opacity-100", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "*:size-4.5", children: categoryInfo.icon }),
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-md font-semibold font-gg", children: categoryInfo.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                import_lucide_react.ChevronDown,
+                {
+                  strokeWidth: 2,
+                  className: "transition-all size-5 data-[open=false]:-rotate-90",
+                  "data-open": isOpen ? "true" : "false"
+                }
+              )
+            ] })
+          }
+        ),
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-wrap gap-y-0.5", children: category.emojis.map((emoji) => {
+          if (emoji.hasTone && !emoji.preRendered && isToneSelectorEnabled) {
+            return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              SkinEmoji,
+              {
+                onEmojiSelect,
+                pickerId,
+                emoji,
+                onEmojiMouseEnter,
+                onEmojiMouseLeave
+              },
+              emoji.name
+            );
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Emoji,
+            {
+              onEmojiSelect,
+              pickerId,
+              onEmojiMouseEnter,
+              onEmojiMouseLeave,
+              emoji
+            },
+            emoji.name
+          );
+        }) })
+      ] });
+    });
+    categoryDisplay_default = CategoryDisplay;
+  }
+});
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  default: () => EmojiSelector,
+  render: () => render
+});
+module.exports = __toCommonJS(index_exports);
+var import_react7 = require("react");
+
+// src/searchbar.tsx
+var import_react = require("react");
+
+// src/icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var MagniferLinear = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      focusable: "false",
+      height: "1em",
+      role: "presentation",
+      viewBox: "0 0 24 24",
+      width: "1em",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "circle",
+          {
+            cx: "11.5",
+            cy: "11.5",
+            r: "9.5",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M18.5 18.5L22 22",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        )
+      ]
     }
   );
-}
-function SkinEmoji({
-  pickerId,
-  emoji,
-  onEmojiSelect,
-  onEmojiMouseEnter,
-  onEmojiMouseLeave,
-  key
+};
+
+// src/searchbar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function SearchBar({
+  searchPlaceholder,
+  id
 }) {
-  const skin = useSkin({ pickerId });
-  const grabEmoji = () => [1, 2, 3, 4, 5].includes(skin) ? emoji.tones.find((a) => a.tone.find((b) => b === skin) === skin)?.char : emoji.char;
-  const fakeEmoji = {
-    ...emoji,
-    char: grabEmoji(),
-    preRendered: true,
-    tones: [
-      {
-        name: emoji.tones[0].name.replaceAll("1", "0"),
-        tone: [0],
-        char: emoji.char
-      },
-      ...emoji.tones
-    ]
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const [isFocused, setIsFocused] = (0, import_react.useState)(false);
+  const inputRef = (0, import_react.useRef)(null);
+  const [inputPlaceholder, setInputPlaceholder] = (0, import_react.useState)(searchPlaceholder);
+  (0, import_react.useEffect)(() => {
+    window["emojipicker-" + id].changeSearchbarPlaceholder = (emoji) => {
+      setInputPlaceholder(emoji);
+    };
+    window["emojipicker-" + id].setSearchValue = (value) => {
+      inputRef.current.value = value;
+      window["emojipicker-" + id].searchValue = value;
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
-      onMouseEnter: () => {
-        window["emojipicker-" + pickerId].changeFooterEmoji(fakeEmoji);
-        window["emojipicker-" + pickerId].changeSearchbarPlaceholder(
-          emoji.name
-        );
-        onEmojiMouseEnter(fakeEmoji);
-      },
-      onMouseLeave: () => {
-        onEmojiMouseLeave(fakeEmoji);
-      },
-      onClick: () => {
-        onEmojiSelect(fakeEmoji);
-      },
-      className: "HOKKIEMOJIPICKER-skinemoji text-4xl p-1 cursor-pointer hover:bg-white/15  rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
-      dangerouslySetInnerHTML: {
-        __html: render(fakeEmoji.char)
-      }
+      "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__ */ (0, import_jsx_runtime2.jsx)(
+          "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__ */ (0, import_jsx_runtime2.jsx)(MagniferLinear, { className: "size-5 opacity-50" })
+      ]
     }
   );
 }
-function CategoryDisplay({
-  category,
-  categoryInfo,
-  isToneSelectorEnabled,
-  onEmojiSelect,
-  onEmojiMouseEnter,
-  onEmojiMouseLeave,
-  pickerId
+
+// src/footer.tsx
+var import_react2 = require("react");
+init_render();
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Footer({
+  id,
+  firstEmoji
 }) {
-  const [isOpen, setIsOpen] = (0, import_react2.useState)(true);
-  const searchValue = useSearchValue({ pickerId });
+  const [footerEmoji, setFooterEmoji] = (0, import_react2.useState)(firstEmoji);
   (0, import_react2.useEffect)(() => {
-    setIsOpen(
-      (localStorage.getItem(
-        "hokkiemojipicker-category-" + category.name + "-open"
-      ) || "true") === "true"
-    );
+    window["emojipicker-" + id].changeFooterEmoji = (emoji) => {
+      setFooterEmoji(emoji);
+    };
   }, []);
-  if ((searchValue || "").length > 0) {
-    if (category.name === "recentlyUsed")
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-1.5 w-full " });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: category.emojis.map((emoji) => {
-      if (!emoji.name.toLowerCase().replace(/_/g, " ").includes(searchValue.toLowerCase().replace(/_/g, " ")))
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
-      if (emoji.hasTone && !emoji.preRendered) {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          SkinEmoji,
-          {
-            onEmojiSelect,
-            pickerId,
-            onEmojiMouseEnter,
-            onEmojiMouseLeave,
-            emoji
-          },
-          emoji.name
-        );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "HOKKIEMOJIPICKER-footer mt-auto flex gap-2 items-center border-t-1 px-4 py-3 border-[#363639] bg-[#070709]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: "*:size-9 *:min-w-9 *:max-w-9",
+        dangerouslySetInnerHTML: { __html: render(footerEmoji.char) }
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        Emoji,
-        {
-          onEmojiSelect,
-          pickerId,
-          emoji,
-          onEmojiMouseEnter,
-          onEmojiMouseLeave
-        },
-        emoji.name
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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
+var import_react4 = require("react");
+init_hooks();
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function SidebarCategory({
+  categoryName,
+  picker,
+  icon,
+  id
+}) {
+  const searchValue = useSearchValue({ pickerId: id });
+  const [isActive, setIsActive] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    if ((searchValue || "").length > 0) {
+      setIsActive(false);
+      return;
+    }
+    const elem = picker.current;
+    const updateActive = () => {
+      if (!elem) return;
+      const header = elem.querySelector(
+        ".HOKKIEMOJIPICKER-categoryHeader." + categoryName
       );
-    }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "HOKKIEMOJIPICKER-categorydisplay flex flex-col relative w-full pt-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      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__ */ (0, import_jsx_runtime4.jsx)(
+    "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
+var import_react5 = require("react");
+init_render();
+var import_jsx_runtime5 = require("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] = (0, import_react5.useState)(0);
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
+    setSelectedTone(
+      parseInt(localStorage.getItem("hokkiemojipicker-skin") || "0")
+    );
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    window["emojipicker-" + id].skin = selectedTone;
+  }, [selectedTone]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative mr-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
-        className: "HOKKIEMOJIPICKER-categoryHeader sticky top-0 pt-2 cursor-pointer text-white px-2 flex bg-[#131416] p-1 pb-2 " + category.name,
+        className: "HOKKIEMOJIPICKER-skinselector-trigger opacity-75 hover:opacity-100 cursor-pointer *:size-7 *:min-w-7",
         onClick: () => {
-          const newOpen = !isOpen;
-          setIsOpen(newOpen);
-          localStorage.setItem(
-            "hokkiemojipicker-category-" + category.name + "-open",
-            newOpen ? "true" : "false"
-          );
+          setOpen(!open);
+        },
+        dangerouslySetInnerHTML: { __html: render(skins[selectedTone]) }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        style: {
+          opacity: open ? 1 : 0,
+          pointerEvents: open ? "all" : "none"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex gap-1.5 items-center opacity-75 hover:opacity-100", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "*:size-4.5", children: categoryInfo.icon }),
-          " ",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-md font-semibold font-gg", children: categoryInfo.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_lucide_react.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: skins.filter((a) => a !== skins[selectedTone]).map((skin, i) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
             {
-              strokeWidth: 2,
-              className: "transition-all size-5 data-[open=false]:-rotate-90",
-              "data-open": isOpen ? "true" : "false"
+              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)
+              }
             }
-          )
-        ] })
-      }
-    ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-y-0.5", children: category.emojis.map((emoji) => {
-      if (emoji.hasTone && !emoji.preRendered && isToneSelectorEnabled) {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          SkinEmoji,
-          {
-            onEmojiSelect,
-            pickerId,
-            emoji,
-            onEmojiMouseEnter,
-            onEmojiMouseLeave
-          },
-          emoji.name
-        );
+          );
+        })
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        Emoji,
-        {
-          onEmojiSelect,
-          pickerId,
-          onEmojiMouseEnter,
-          onEmojiMouseLeave,
-          emoji
-        },
-        emoji.name
-      );
-    }) })
+    )
   ] });
 }
 
+// src/index.tsx
+init_render();
+
+// src/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var cn = (...inputs) => {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+};
+
 // src/emojilib.json
 var emojilib_default = [
   {
@@ -17003,257 +17292,9 @@ var emojilib_default = [
   }
 ];
 
-// src/searchbar.tsx
-var import_react3 = require("react");
-
-// src/icons.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var MagniferLinear = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "svg",
-    {
-      "aria-hidden": "true",
-      fill: "none",
-      focusable: "false",
-      height: "1em",
-      role: "presentation",
-      viewBox: "0 0 24 24",
-      width: "1em",
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "circle",
-          {
-            cx: "11.5",
-            cy: "11.5",
-            r: "9.5",
-            stroke: "currentColor",
-            strokeWidth: "1.5"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "path",
-          {
-            d: "M18.5 18.5L22 22",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round"
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/searchbar.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function SearchBar({
-  searchPlaceholder,
-  id
-}) {
-  const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
-  const inputRef = (0, import_react3.useRef)(null);
-  const [inputPlaceholder, setInputPlaceholder] = (0, import_react3.useState)(searchPlaceholder);
-  (0, import_react3.useEffect)(() => {
-    window["emojipicker-" + id].changeSearchbarPlaceholder = (emoji) => {
-      setInputPlaceholder(emoji);
-    };
-    window["emojipicker-" + id].setSearchValue = (value) => {
-      inputRef.current.value = value;
-      window["emojipicker-" + id].searchValue = value;
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "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__ */ (0, import_jsx_runtime3.jsx)(
-          "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__ */ (0, import_jsx_runtime3.jsx)(MagniferLinear, { className: "size-5 opacity-50" })
-      ]
-    }
-  );
-}
-
-// src/footer.tsx
-var import_react4 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function Footer({
-  id,
-  firstEmoji
-}) {
-  const [footerEmoji, setFooterEmoji] = (0, import_react4.useState)(firstEmoji);
-  (0, import_react4.useEffect)(() => {
-    window["emojipicker-" + id].changeFooterEmoji = (emoji) => {
-      setFooterEmoji(emoji);
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "HOKKIEMOJIPICKER-footer mt-auto flex gap-2 items-center border-t-1 px-4 py-3 border-[#363639] bg-[#070709]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "div",
-      {
-        className: "*:size-9 *:min-w-9 *:max-w-9",
-        dangerouslySetInnerHTML: { __html: render(footerEmoji.char) }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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
-var import_react5 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function SidebarCategory({
-  categoryName,
-  picker,
-  icon,
-  id
-}) {
-  const searchValue = useSearchValue({ pickerId: id });
-  const [isActive, setIsActive] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => {
-    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__ */ (0, import_jsx_runtime5.jsx)(
-    "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
-var import_react6 = require("react");
-var import_jsx_runtime6 = require("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] = (0, import_react6.useState)(0);
-  const [open, setOpen] = (0, import_react6.useState)(false);
-  (0, import_react6.useEffect)(() => {
-    setSelectedTone(
-      parseInt(localStorage.getItem("hokkiemojipicker-skin") || "0")
-    );
-  }, []);
-  (0, import_react6.useEffect)(() => {
-    window["emojipicker-" + id].skin = selectedTone;
-  }, [selectedTone]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative mr-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      "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__ */ (0, import_jsx_runtime6.jsx)(
-      "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__ */ (0, import_jsx_runtime6.jsx)(
-            "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
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
-var cn = (...inputs) => {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
-};
-
 // src/index.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var CategoryDisplay3 = (0, import_react7.lazy)(() => Promise.resolve().then(() => (init_categoryDisplay(), categoryDisplay_exports)));
 function EmojiSelector({
   categories = {},
   customEmojis = {},
@@ -17272,10 +17313,13 @@ function EmojiSelector({
   height = 500,
   width = 520
 }) {
-  let recentlyUsed = JSON.parse(
-    (localStorage || { getItem: (a) => "[]" }).getItem(
-      "hokkiemojipicker-recentlyused"
-    ) || "[]"
+  const recentlyUsed = (0, import_react7.useMemo)(
+    () => JSON.parse(
+      (localStorage || { getItem: (a) => "[]" }).getItem(
+        "hokkiemojipicker-recentlyused"
+      ) || "[]"
+    ),
+    []
   );
   const categoryData = {
     recentlyUsed: recentlyUsed.length > 0 ? {
@@ -17513,22 +17557,39 @@ 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 = (0, import_react7.useMemo)(() => {
+    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 = Math.random().toString(36).substring(2, 15);
+  const id = (0, import_react7.useMemo)(() => Math.random().toString(36).substring(2, 15), []);
   const picker = (0, import_react7.useRef)(null);
+  const scrollRef = (0, import_react7.useRef)(null);
+  const handleWheel = (0, import_react7.useCallback)((e) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    e.preventDefault();
+    el.scrollTop += e.deltaY;
+  }, []);
+  (0, import_react7.useEffect)(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      el.removeEventListener("wheel", handleWheel);
+    };
+  }, [handleWheel]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "HOKKIEMOJIPICKER-emojiContainer", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
@@ -17596,15 +17657,16 @@ function EmojiSelector({
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "div",
                   {
+                    ref: scrollRef,
                     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) => {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react7.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {}), children: emojis.map((category) => {
                       if (!category) return;
                       const categoryInfo = categoryData[category.name];
                       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                        CategoryDisplay,
+                        CategoryDisplay3,
                         {
                           onEmojiMouseEnter,
                           onEmojiMouseLeave,
@@ -17631,7 +17693,7 @@ function EmojiSelector({
                         },
                         category.name
                       );
-                    })
+                    }) })
                   }
                 ),
                 showFooter && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Footer, { id, firstEmoji: emojis[0].emojis[0] })