@hokkiai/discord-emoji-selector 1.1.7 → 1.2.0

package/dist/categoryDisplay-AZPE23IJ.js

@@ -0,0 +1,205 @@
+import {
+  render,
+  useSearchValue,
+  useSkin
+} from "./chunk-DMO3WEXH.js";
+
+// src/categoryDisplay.tsx
+import { ChevronDown } from "lucide-react";
+import { memo, useState, useCallback, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Emoji = memo(function Emoji2({
+  pickerId,
+  emoji,
+  onEmojiMouseEnter,
+  onEmojiMouseLeave,
+  onEmojiSelect
+}) {
+  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",
+    {
+      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 }
+    }
+  );
+});
+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
+      ]
+    };
+  }, [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",
+    {
+      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 }
+    }
+  );
+});
+var CategoryDisplay = memo(function CategoryDisplay2({
+  category,
+  categoryInfo,
+  isToneSelectorEnabled,
+  onEmojiSelect,
+  onEmojiMouseEnter,
+  onEmojiMouseLeave,
+  pickerId
+}) {
+  const storageKey = `hokkiemojipicker-category-${category.name}-open`;
+  const [isOpen, setIsOpen] = useState(() => {
+    const cached = localStorage?.getItem(storageKey);
+    return cached === null ? true : cached === "true";
+  });
+  const searchValue = useSearchValue({ pickerId });
+  const handleToggle = useCallback(() => {
+    setIsOpen((prev) => {
+      const newState = !prev;
+      try {
+        localStorage?.setItem(storageKey, String(newState));
+      } catch (e) {
+      }
+      return newState;
+    });
+  }, [storageKey]);
+  const searchLower = useMemo(
+    () => (searchValue || "").toLowerCase().replace(/_/g, " "),
+    [searchValue]
+  );
+  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__ */ 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(
+      "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: handleToggle,
+        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,
+            {
+              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
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        Emoji,
+        {
+          onEmojiSelect,
+          pickerId,
+          onEmojiMouseEnter,
+          onEmojiMouseLeave,
+          emoji
+        },
+        emoji.name
+      );
+    }) })
+  ] });
+});
+var categoryDisplay_default = CategoryDisplay;
+export {
+  categoryDisplay_default as default
+};

package/dist/index.cjs

@@ -186,15 +186,22 @@ var init_categoryDisplay = __esm({
       onEmojiMouseLeave,
       pickerId
     }) {
-      const [isOpen, setIsOpen] = (0, import_react6.useState)(true);
+      const storageKey = `hokkiemojipicker-category-${category.name}-open`;
+      const [isOpen, setIsOpen] = (0, import_react6.useState)(() => {
+        const cached = localStorage?.getItem(storageKey);
+        return cached === null ? true : cached === "true";
+      });
       const searchValue = useSearchValue({ pickerId });
-      (0, import_react6.useEffect)(() => {
-        setIsOpen(
-          (localStorage.getItem(
-            "hokkiemojipicker-category-" + category.name + "-open"
-          ) || "true") === "true"
-        );
-      }, [category.name]);
+      const handleToggle = (0, import_react6.useCallback)(() => {
+        setIsOpen((prev) => {
+          const newState = !prev;
+          try {
+            localStorage?.setItem(storageKey, String(newState));
+          } catch (e) {
+          }
+          return newState;
+        });
+      }, [storageKey]);
       const searchLower = (0, import_react6.useMemo)(
         () => (searchValue || "").toLowerCase().replace(/_/g, " "),
         [searchValue]
@@ -240,14 +247,7 @@ var init_categoryDisplay = __esm({
           "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"
-              );
-            },
+            onClick: handleToggle,
             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 }),
               " ",
@@ -368,7 +368,7 @@ function SearchBar({
     "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]",
+      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__ */ (0, import_jsx_runtime2.jsx)(
           "input",
@@ -401,7 +401,24 @@ function Footer({
       setFooterEmoji(emoji);
     };
   }, []);
-  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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "HOKKIEMOJIPICKER-footer relative mt-auto flex gap-2 items-center px-4 py-3 bg-[#070709]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "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__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
@@ -501,26 +518,39 @@ 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 skins = (0, import_react5.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] = (0, import_react5.useState)(() => {
+    const cached = localStorage?.getItem("hokkiemojipicker-skin");
+    return cached ? parseInt(cached, 10) : 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]);
+  }, [selectedTone, id]);
+  const toggleOpen = (0, import_react5.useCallback)(() => setOpen((prev) => !prev), []);
+  const handleSkinSelect = (0, import_react5.useCallback)((i) => {
+    setOpen(false);
+    setSelectedTone(i);
+    try {
+      localStorage?.setItem("hokkiemojipicker-skin", String(i));
+    } catch (e) {
+    }
+  }, []);
+  const renderedCurrentSkin = (0, import_react5.useMemo)(
+    () => render(skins[selectedTone]),
+    [skins, selectedTone]
+  );
+  const availableSkins = (0, import_react5.useMemo)(
+    () => skins.map((skin, i) => skin === skins[selectedTone] ? null : { skin, i }).filter(Boolean),
+    [skins, selectedTone]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative mr-1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.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]) }
+        onClick: toggleOpen,
+        dangerouslySetInnerHTML: { __html: renderedCurrentSkin }
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -531,20 +561,18 @@ function SkinSelector({ id }) {
           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) => {
+        children: availableSkins.map((item) => {
+          const { skin, i } = item;
           return /* @__PURE__ */ (0, import_jsx_runtime5.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 + "");
-              },
+              onClick: () => handleSkinSelect(i),
               dangerouslySetInnerHTML: {
                 __html: render(skin)
               }
-            }
+            },
+            i
           );
         })
       }
@@ -17611,7 +17639,7 @@ function EmojiSelector({
         showNav && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "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,
@@ -17624,7 +17652,7 @@ function EmojiSelector({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex h-full", children: [
-          showSidebar && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "HOKKIEMOJIPICKER-sidebar bg-[#070709]  flex p-2 gap-1 flex-col", children: [
+          showSidebar && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("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) {
@@ -17662,38 +17690,49 @@ function EmojiSelector({
                       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: /* @__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)(
-                        CategoryDisplay3,
-                        {
-                          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__ */ (0, import_jsx_runtime7.jsx)(
+                      import_react7.Suspense,
+                      {
+                        fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "animate-spin size-8 border-2 border-white/20 border-t-white/80 rounded-full" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-white/60 text-sm", children: "Loading emojis..." })
+                        ] }) }),
+                        children: emojis.map((category) => {
+                          if (!category) return;
+                          const categoryInfo = categoryData[category.name];
+                          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                            CategoryDisplay3,
+                            {
+                              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__ */ (0, import_jsx_runtime7.jsx)(Footer, { id, firstEmoji: emojis[0].emojis[0] })

package/dist/index.css

@@ -36,6 +36,10 @@
   width: calc(var(--spacing) * 5);
   height: calc(var(--spacing) * 5);
 }
+.HOKKIEMOJIPICKER-emojiContainer .size-8 {
+  width: calc(var(--spacing) * 8);
+  height: calc(var(--spacing) * 8);
+}
 .HOKKIEMOJIPICKER-emojiContainer .size-12\.5 {
   width: calc(var(--spacing) * 12.5);
   height: calc(var(--spacing) * 12.5);
@@ -86,6 +90,9 @@
 .HOKKIEMOJIPICKER-emojiContainer .gap-2 {
   gap: calc(var(--spacing) * 2);
 }
+.HOKKIEMOJIPICKER-emojiContainer .gap-3 {
+  gap: calc(var(--spacing) * 3);
+}
 .HOKKIEMOJIPICKER-emojiContainer .gap-4 {
   gap: calc(var(--spacing) * 4);
 }
@@ -101,12 +108,19 @@
 .HOKKIEMOJIPICKER-emojiContainer .overflow-y-scroll {
   overflow-y: scroll;
 }
+.HOKKIEMOJIPICKER-emojiContainer .rounded-t-md {
+  border-top-left-radius: var(--radius-md);
+  border-top-right-radius: var(--radius-md);
+}
 .HOKKIEMOJIPICKER-emojiContainer .rounded-md {
   border-radius: var(--radius-md);
 }
 .HOKKIEMOJIPICKER-emojiContainer .rounded-sm {
   border-radius: var(--radius-sm);
 }
+.HOKKIEMOJIPICKER-emojiContainer .rounded-full {
+  border-radius: 9999px;
+}
 .HOKKIEMOJIPICKER-emojiContainer .rounded-xl {
   border-radius: var(--radius-xl);
 }
@@ -114,6 +128,10 @@
   border-style: var(--tw-border-style);
   border-width: 1px;
 }
+.HOKKIEMOJIPICKER-emojiContainer .border-2 {
+  border-style: var(--tw-border-style);
+  border-width: 2px;
+}
 .HOKKIEMOJIPICKER-emojiContainer .border-t-1 {
   border-top-style: var(--tw-border-style);
   border-top-width: 1px;
@@ -131,6 +149,12 @@
 .HOKKIEMOJIPICKER-emojiContainer .border-\[\#363639\]\/10 {
   border-color: color-mix(in oklab, #363639 10%, transparent);
 }
+.HOKKIEMOJIPICKER-emojiContainer .border-white\/20 {
+  border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+}
+.HOKKIEMOJIPICKER-emojiContainer .border-t-white\/80 {
+  border-top-color: color-mix(in oklab, var(--color-white) 80%, transparent);
+}
 .HOKKIEMOJIPICKER-emojiContainer .bg-\[\#070709\] {
   background-color: #070709;
 }
@@ -174,6 +198,10 @@
   font-size: var(--text-4xl);
   line-height: var(--tw-leading, var(--text-4xl--line-height));
 }
+.HOKKIEMOJIPICKER-emojiContainer .text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
 .HOKKIEMOJIPICKER-emojiContainer .text-lg {
   font-size: var(--text-lg);
   line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -191,6 +219,12 @@
 .HOKKIEMOJIPICKER-emojiContainer .text-white {
   color: var(--color-white);
 }
+.HOKKIEMOJIPICKER-emojiContainer .text-white\/60 {
+  color: color-mix(in oklab, var(--color-white) 60%, transparent);
+}
+.HOKKIEMOJIPICKER-emojiContainer .text-white\/80 {
+  color: color-mix(in oklab, var(--color-white) 80%, transparent);
+}
 .HOKKIEMOJIPICKER-emojiContainer .opacity-50 {
   opacity: 50%;
 }
@@ -239,6 +273,12 @@
     min-width: calc(var(--spacing) * 9);
   }
 }
+.HOKKIEMOJIPICKER-emojiContainer .bg-white\/5 {
+  background-color: color-mix(in srgb, #fff 5%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+  }
+}
 .HOKKIEMOJIPICKER-emojiContainer .hover\:bg-white\/5 {
   &:hover {
     @media (hover: hover) {
@@ -276,6 +316,17 @@
     rotate: calc(90deg * -1);
   }
 }
+.HOKKIEMOJIPICKER-emojiContainer .animate-spin {
+  animation: HOKKIEMOJIPICKER-spin 1s linear infinite;
+}
+@keyframes HOKKIEMOJIPICKER-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 .HOKKIEMOJIPICKER-emojiContainer * {
   --spacing: 0.25rem;
   --text-lg: 1.125rem;

package/dist/index.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-DMO3WEXH.js";
 
 // src/index.tsx
-import { lazy, Suspense, useCallback, useEffect as useEffect5, useMemo, useRef as useRef2 } from "react";
+import { lazy, Suspense, useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2 } from "react";
 
 // src/searchbar.tsx
 import { useEffect, useRef, useState } from "react";
@@ -70,7 +70,7 @@ function SearchBar({
     "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]",
+      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",
@@ -102,7 +102,24 @@ function Footer({
       setFooterEmoji(emoji);
     };
   }, []);
-  return /* @__PURE__ */ jsxs3("div", { className: "HOKKIEMOJIPICKER-footer mt-auto flex gap-2 items-center border-t-1 px-4 py-3 border-[#363639] bg-[#070709]", children: [
+  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",
       {
@@ -197,29 +214,42 @@ function SidebarCategory({
 }
 
 // src/skinselector.tsx
-import { useEffect as useEffect4, useState as useState4 } from "react";
+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 = ["\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(0);
+  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(() => {
-    setSelectedTone(
-      parseInt(localStorage.getItem("hokkiemojipicker-skin") || "0")
-    );
-  }, []);
   useEffect4(() => {
     window["emojipicker-" + id].skin = selectedTone;
-  }, [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]
+  );
   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: () => {
-          setOpen(!open);
-        },
-        dangerouslySetInnerHTML: { __html: render(skins[selectedTone]) }
+        onClick: toggleOpen,
+        dangerouslySetInnerHTML: { __html: renderedCurrentSkin }
       }
     ),
     /* @__PURE__ */ jsx5(
@@ -230,20 +260,18 @@ function SkinSelector({ id }) {
           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) => {
+        children: availableSkins.map((item) => {
+          const { skin, i } = item;
           return /* @__PURE__ */ jsx5(
             "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 + "");
-              },
+              onClick: () => handleSkinSelect(i),
               dangerouslySetInnerHTML: {
                 __html: render(skin)
               }
-            }
+            },
+            i
           );
         })
       }
@@ -16990,7 +17018,7 @@ var emojilib_default = [
 
 // src/index.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var CategoryDisplay = lazy(() => import("./categoryDisplay-BV7OPJVG.js"));
+var CategoryDisplay = lazy(() => import("./categoryDisplay-AZPE23IJ.js"));
 function EmojiSelector({
   categories = {},
   customEmojis = {},
@@ -17009,7 +17037,7 @@ function EmojiSelector({
   height = 500,
   width = 520
 }) {
-  const recentlyUsed = useMemo(
+  const recentlyUsed = useMemo2(
     () => JSON.parse(
       (localStorage || { getItem: (a) => "[]" }).getItem(
         "hokkiemojipicker-recentlyused"
@@ -17253,7 +17281,7 @@ function EmojiSelector({
       ...categories.flags
     }
   };
-  const emojis = useMemo(() => {
+  const emojis = useMemo2(() => {
     return [
       recentlyUsed.length > 0 ? {
         name: "recentlyUsed",
@@ -17269,10 +17297,10 @@ function EmojiSelector({
     ].filter((a) => a !== void 0);
   }, [recentlyUsed, customEmojis]);
   const navHeight = showNav ? Math.floor(height / 7) : 0;
-  const id = useMemo(() => 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 handleWheel = useCallback((e) => {
+  const handleWheel = useCallback2((e) => {
     const el = scrollRef.current;
     if (!el) return;
     e.preventDefault();
@@ -17307,7 +17335,7 @@ function EmojiSelector({
         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,
@@ -17320,7 +17348,7 @@ function EmojiSelector({
           }
         ),
         /* @__PURE__ */ jsxs5("div", { className: "flex h-full", children: [
-          showSidebar && /* @__PURE__ */ jsxs5("div", { className: "HOKKIEMOJIPICKER-sidebar bg-[#070709]  flex p-2 gap-1 flex-col", 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) {
@@ -17358,38 +17386,49 @@ function EmojiSelector({
                       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: /* @__PURE__ */ jsx6(Suspense, { fallback: /* @__PURE__ */ jsx6("div", {}), 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
-                      );
-                    }) })
+                    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__ */ jsx6(Footer, { id, firstEmoji: emojis[0].emojis[0] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hokkiai/discord-emoji-selector",
-  "version": "1.1.7",
+  "version": "1.2.0",
   "description": "A lightweight & powerful discord-style emoji picker",
   "type": "module",
   "main": "dist/index.cjs",