@layers-app/shared 0.4.5 → 0.4.6

package/dist/components/ColorPicker/types.js

@@ -1,16 +1,58 @@
-function f(r) {
-  return typeof r == "string" ? { value: r } : r;
+function f(t) {
+  return t === "textColor" || t === "color";
 }
-function e(r) {
-  return r === "inherit" || r === "" || r === "default";
+function g(t) {
+  return f(t) ? "text" : "highlight";
 }
-const s = (r, o, n) => {
-  if (n) return n;
-  const t = !o || e(o) ? "standard" : o;
-  return r(`colorPicker.colors.${t}`, { defaultValue: o || "" });
+const h = typeof navigator < "u" && /Mac|iPhone|iPod|iPad/i.test(navigator.platform || navigator.userAgent), d = h ? "⌘⇧H" : "Ctrl+Shift+H";
+function $(t) {
+  return typeof t == "string" ? { value: t } : t;
+}
+function p(t) {
+  return t === "inherit" || t === "" || t === "default";
+}
+function c(t) {
+  if (!t) return null;
+  const r = t.trim().toLowerCase();
+  if (r === "" || r === "inherit" || r === "default" || r === "transparent")
+    return "default";
+  const o = r.match(/^#([0-9a-f]{3,8})$/);
+  if (o) {
+    let n = o[1];
+    if ((n.length === 3 || n.length === 4) && (n = n.split("").map((e) => e + e).join("")), n.length === 6 || n.length === 8) {
+      const e = parseInt(n.slice(0, 2), 16), a = parseInt(n.slice(2, 4), 16), i = parseInt(n.slice(4, 6), 16), l = n.length === 8 ? parseInt(n.slice(6, 8), 16) / 255 : 1;
+      return `${e},${a},${i},${Math.round(l * 1e3) / 1e3}`;
+    }
+  }
+  const s = r.match(/^rgba?\(([^)]+)\)$/);
+  if (s) {
+    const n = s[1].split(",").map((e) => e.trim());
+    if (n.length >= 3) {
+      const e = parseInt(n[0], 10), a = parseInt(n[1], 10), i = parseInt(n[2], 10), l = n[3] !== void 0 ? parseFloat(n[3]) : 1;
+      if (![e, a, i].some(Number.isNaN)) {
+        const u = Number.isNaN(l) ? 1 : l;
+        return `${e},${a},${i},${Math.round(u * 1e3) / 1e3}`;
+      }
+    }
+  }
+  return r;
+}
+function m(t, r) {
+  const o = c(t), s = c(r);
+  return o !== null && s !== null && o === s;
+}
+const C = (t, r, o) => {
+  if (o) return o;
+  const s = !r || p(r) ? "standard" : r;
+  return t(`colorPicker.colors.${s}`, { defaultValue: r || "" });
 };
 export {
-  e as isDefaultColor,
-  f as normalizeColorItem,
-  s as resolveColorLabel
+  h as IS_APPLE,
+  d as RECENT_COLOR_HOTKEY,
+  m as colorsEqual,
+  p as isDefaultColor,
+  f as isTextSectionKey,
+  $ as normalizeColorItem,
+  C as resolveColorLabel,
+  g as resolveRecentKind
 };

package/dist/components/ColorPicker/useRecentColors.d.ts

@@ -1,7 +1,9 @@
-import type { RecentColorEntry } from './types';
+import type { RecentColorEntry, RecentColorKind } from './types';
 interface UseRecentColorsOptions {
     storageKey?: string;
     maxItems?: number;
+    onApplyShortcut?: (color: string, kind: RecentColorKind) => void;
+    shortcutScoped?: boolean;
 }
 export declare function useRecentColors(options?: UseRecentColorsOptions): {
     recentColors: RecentColorEntry[];

package/dist/components/ColorPicker/useRecentColors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRecentColors.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/useRecentColors.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKhD,UAAU,sBAAsB;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmBD,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,sBAAsB;;uBAYpD,MAAM,eAAe,MAAM,WAAW,MAAM;;;EAsBvD"}
+{"version":3,"file":"useRecentColors.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/useRecentColors.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAQjE,UAAU,sBAAsB;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IACjE,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AA2BD,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,sBAAsB;;uBAepD,MAAM,eAAe,MAAM,WAAW,MAAM;;;EAkDvD"}

package/dist/components/ColorPicker/useRecentColors.js

@@ -1,6 +1,8 @@
-import { useState as I, useCallback as c } from "react";
-const d = "color-picker-recent", p = 11;
-function n(e) {
+import { useState as R, useCallback as f, useRef as A, useEffect as w } from "react";
+import { resolveRecentKind as I, IS_APPLE as C } from "./types.js";
+const k = "color-picker-recent", L = 11;
+let i = 0;
+function a(e) {
   try {
     const t = localStorage.getItem(e);
     return t ? JSON.parse(t) : [];
@@ -8,32 +10,53 @@ function n(e) {
     return [];
   }
 }
-function E(e, t, o) {
+function T(e, t, r) {
   try {
-    localStorage.setItem(e, JSON.stringify(t.slice(0, o)));
+    localStorage.setItem(e, JSON.stringify(t.slice(0, r)));
   } catch {
   }
 }
-function v(e) {
-  const t = e?.storageKey ?? d, o = e?.maxItems ?? p, [i, r] = I(() => n(t)), S = c(() => {
-    r(n(t));
-  }, [t]), g = c(
-    (s, a, f) => {
-      const y = n(t).filter(
-        (m) => !(m.value === s && m.sectionKey === a)
-      ), l = [{ value: s, sectionKey: a, border: f }, ...y].slice(0, o);
-      E(t, l, o), r(l);
+function _(e) {
+  return e.code !== "KeyH" || !e.shiftKey || e.altKey ? !1 : C ? e.metaKey && !e.ctrlKey : e.ctrlKey && !e.metaKey;
+}
+function F(e) {
+  const t = e?.storageKey ?? k, r = e?.maxItems ?? L, l = e?.onApplyShortcut, s = e?.shortcutScoped ?? !1, [p, u] = R(
+    () => a(t)
+  ), h = f(() => {
+    u(a(t));
+  }, [t]), K = f(
+    (o, c, n) => {
+      const g = a(t).filter(
+        (S) => !(S.value === o && S.sectionKey === c)
+      ), m = [{ value: o, sectionKey: c, border: n }, ...g].slice(
+        0,
+        r
+      );
+      T(t, m, r), u(m);
     },
-    [t, o]
-  ), u = c(() => {
+    [t, r]
+  ), E = f(() => {
     try {
       localStorage.removeItem(t);
     } catch {
     }
-    r([]);
-  }, [t]);
-  return { recentColors: i, addRecent: g, clearRecent: u, reload: S };
+    u([]);
+  }, [t]), y = A(l);
+  y.current = l;
+  const d = !!l;
+  return w(() => {
+    if (!d) return;
+    s && (i += 1);
+    const o = (c) => {
+      if (!_(c) || !s && i > 0) return;
+      const n = a(t)[0];
+      n && (c.preventDefault(), y.current?.(n.value, I(n.sectionKey)));
+    };
+    return window.addEventListener("keydown", o), () => {
+      window.removeEventListener("keydown", o), s && (i -= 1);
+    };
+  }, [d, s, t]), { recentColors: p, addRecent: K, clearRecent: E, reload: h };
 }
 export {
-  v as useRecentColors
+  F as useRecentColors
 };

package/dist/components/EmojiPicker/EmojiPanel.d.ts

@@ -1,6 +1,7 @@
 import { EmojiPickerProps } from './EmojiPicker';
-export declare const EmojiPanel: ({ locales, onChange, onClose, setRandomIcon, querySearch, }: Pick<EmojiPickerProps, "locales" | "value" | "onChange" | "querySearch"> & {
+export declare const EmojiPanel: ({ locales, onChange, onClose, setRandomIcon, querySearch, showRandomButton, }: Pick<EmojiPickerProps, "locales" | "value" | "onChange" | "querySearch"> & {
     onClose: () => void;
     setRandomIcon: (icon: string) => void;
+    showRandomButton?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EmojiPanel.d.ts.map

package/dist/components/EmojiPicker/EmojiPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPanel.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPanel.tsx"],"names":[],"mappings":"AAyCA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAsBjD,eAAO,MAAM,UAAU,GAAI,6DAMxB,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG;IAC5E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,4CAiTA,CAAC"}
+{"version":3,"file":"EmojiPanel.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPanel.tsx"],"names":[],"mappings":"AAyCA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAsBjD,eAAO,MAAM,UAAU,GAAI,+EAOxB,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG;IAC5E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,4CAqTA,CAAC"}

package/dist/components/EmojiPicker/EmojiPanel.js

@@ -1,61 +1,62 @@
 import { jsxs as y, jsx as t } from "react/jsx-runtime";
-import { useState as d, useRef as p, useEffect as R, useCallback as K } from "react";
-import { useTranslation as L } from "react-i18next";
-import { Search01Icon as U, ShuffleIcon as V, Clock01Icon as W, SmileIcon as X, Pizza01Icon as Z, FootballIcon as _, Airplane01Icon as ee, BulbIcon as te, Asterisk02Icon as oe, Flag02Icon as re } from "@hugeicons/core-free-icons";
+import { useState as d, useRef as p, useEffect as A, useCallback as L } from "react";
+import { useTranslation as U } from "react-i18next";
+import { Search01Icon as V, ShuffleIcon as W, Clock01Icon as X, SmileIcon as Z, Pizza01Icon as _, FootballIcon as ee, Airplane01Icon as te, BulbIcon as oe, Asterisk02Icon as re, Flag02Icon as ne } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon as c } from "@hugeicons/react";
-import { useEvent as ne } from "@layers-app/draggable-ui";
-import { Stack as v, FocusTrap as ie, Flex as z, TextInput as ce, Tooltip as se, ActionIcon as A, Paper as F, Text as q, SimpleGrid as N } from "@mantine/core";
-import ae from "fuse.js";
-import le from "../../assets/svg/dog.svg.js";
-import { pickRandomEmoji as fe } from "../../helpers/pickRandomEmoji.js";
-import { NoData as ue } from "../NoData/NoData.js";
-import { IconEntity as de } from "../ProjectIcon/ProjectIcon.js";
-import { frequentEmoji as pe } from "./constants.js";
-import { getEmojis as me } from "./utils.js";
+import { useEvent as ie } from "@layers-app/draggable-ui";
+import { Stack as v, FocusTrap as ce, Flex as z, TextInput as se, Tooltip as ae, ActionIcon as F, Paper as q, Text as N, SimpleGrid as M } from "@mantine/core";
+import le from "fuse.js";
+import fe from "../../assets/svg/dog.svg.js";
+import { pickRandomEmoji as ue } from "../../helpers/pickRandomEmoji.js";
+import { NoData as de } from "../NoData/NoData.js";
+import { IconEntity as pe } from "../ProjectIcon/ProjectIcon.js";
+import { frequentEmoji as me } from "./constants.js";
+import { getEmojis as he } from "./utils.js";
 import T from "./EmojiPicker.module.css.js";
-const he = [
-  { i: "frequent", icon: /* @__PURE__ */ t(c, { size: 20, icon: W }) },
-  { i: "people", icon: /* @__PURE__ */ t(c, { size: 20, icon: X }) },
+const ge = [
+  { i: "frequent", icon: /* @__PURE__ */ t(c, { size: 20, icon: X }) },
+  { i: "people", icon: /* @__PURE__ */ t(c, { size: 20, icon: Z }) },
   {
     i: "nature",
-    icon: /* @__PURE__ */ t(le, { width: 20, height: 20 })
+    icon: /* @__PURE__ */ t(fe, { width: 20, height: 20 })
   },
-  { i: "foods", icon: /* @__PURE__ */ t(c, { size: 20, icon: Z }) },
-  { i: "activity", icon: /* @__PURE__ */ t(c, { size: 20, icon: _ }) },
-  { i: "places", icon: /* @__PURE__ */ t(c, { size: 20, icon: ee }) },
-  { i: "objects", icon: /* @__PURE__ */ t(c, { size: 20, icon: te }) },
-  { i: "symbols", icon: /* @__PURE__ */ t(c, { size: 20, icon: oe }) },
-  { i: "flags", icon: /* @__PURE__ */ t(c, { size: 20, icon: re }) }
-], Re = ({
+  { i: "foods", icon: /* @__PURE__ */ t(c, { size: 20, icon: _ }) },
+  { i: "activity", icon: /* @__PURE__ */ t(c, { size: 20, icon: ee }) },
+  { i: "places", icon: /* @__PURE__ */ t(c, { size: 20, icon: te }) },
+  { i: "objects", icon: /* @__PURE__ */ t(c, { size: 20, icon: oe }) },
+  { i: "symbols", icon: /* @__PURE__ */ t(c, { size: 20, icon: re }) },
+  { i: "flags", icon: /* @__PURE__ */ t(c, { size: 20, icon: ne }) }
+], Ae = ({
   locales: u,
   onChange: C,
-  onClose: M,
-  setRandomIcon: P,
-  querySearch: m
+  onClose: P,
+  setRandomIcon: Q,
+  querySearch: m,
+  showRandomButton: w = !0
 }) => {
-  const [b, k] = d("frequent"), x = p("frequent"), h = p({}), I = p(null), [S, w] = d(""), [Q, O] = d([]), [a, B] = d(null), [E, j] = d([]), { t: G } = L(), g = p(!1), l = p(null);
-  R(() => {
+  const [b, k] = d("frequent"), x = p("frequent"), h = p({}), I = p(null), [S, E] = d(""), [O, G] = d([]), [a, H] = d(null), [j, D] = d([]), { t: Y } = U(), g = p(!1), l = p(null);
+  A(() => {
     if (typeof m == "string") {
       const e = m.slice(1);
-      if (w(e), a) {
+      if (E(e), a) {
         const o = a.search(e);
-        j(o.map((r) => r.item.e));
+        D(o.map((r) => r.item.e));
       }
     }
-  }, [m, a]), R(() => {
+  }, [m, a]), A(() => {
     (async () => {
-      const o = await me(), r = o.flatMap(
+      const o = await he(), r = o.flatMap(
         (i) => i.e.map((n) => ({
           e: n.e,
           n: n.n,
           k: n.k
           // категория
         }))
-      ), s = pe.map(
+      ), s = me.map(
         (i) => r.find((n) => n.e === i)
       );
-      O([{ i: "frequent", e: s }, ...o]);
-      const f = new ae(
+      G([{ i: "frequent", e: s }, ...o]);
+      const f = new le(
         o.flatMap(
           (i) => i.e.map((n) => ({
             e: n.e,
@@ -68,32 +69,32 @@ const he = [
           threshold: 0.3
         }
       );
-      B(f);
+      H(f);
     })();
   }, []);
-  const H = K(
+  const $ = L(
     (e) => {
       const o = e.currentTarget.value;
-      if (w(o), a) {
+      if (E(o), a) {
         const r = a.search(o);
-        j(r.map((s) => s.item.e));
+        D(r.map((s) => s.item.e));
       }
     },
     [a]
-  ), D = ne((e) => {
+  ), R = ie((e) => {
     const o = e.currentTarget.getAttribute("data-icon");
     o && (C?.(
-      de.stringify({
+      pe.stringify({
         emoji: o.replace("e:", "")
       })
-    ), M());
-  }), Y = (e) => {
+    ), P());
+  }), B = (e) => {
     const o = I.current, r = h.current[e.i];
     if (!o || !r) return;
     g.current = !0, l.current = e.i, k(e.i);
     const s = r.offsetTop - o.offsetTop;
     o.scrollTo({ top: s, behavior: "smooth" });
-  }, $ = () => {
+  }, J = () => {
     const e = I.current;
     if (!e) return;
     const o = e.scrollTop;
@@ -112,9 +113,9 @@ const he = [
         n < s && (s = n, r = f);
       }
     }), r !== x.current && (x.current = r, k(r));
-  }, J = typeof m == "string";
+  }, K = typeof m == "string";
   return /* @__PURE__ */ y(v, { gap: 0, h: "100%", children: [
-    /* @__PURE__ */ t(ie, { active: !0, children: /* @__PURE__ */ y(
+    /* @__PURE__ */ t(ce, { active: !0, children: /* @__PURE__ */ y(
       z,
       {
         my: "sm",
@@ -125,9 +126,9 @@ const he = [
         h: 38,
         children: [
           /* @__PURE__ */ t(
-            ce,
+            se,
             {
-              leftSection: /* @__PURE__ */ t(c, { size: 16, icon: U }),
+              leftSection: /* @__PURE__ */ t(c, { size: 16, icon: V }),
               value: S,
               placeholder: `${u?.search}...`,
               "data-autofocus": !0,
@@ -137,26 +138,26 @@ const he = [
                   borderRadius: "var(--mantine-radius-default)"
                 }
               },
-              w: 320,
-              onChange: H,
+              w: w ? 320 : "100%",
+              onChange: $,
               radius: "var(--mantine-radius-default)"
             }
           ),
-          /* @__PURE__ */ t(se, { withArrow: !0, label: u?.random || G("random"), children: /* @__PURE__ */ t(
-            A,
+          w && /* @__PURE__ */ t(ae, { withArrow: !0, label: u?.random || Y("random"), children: /* @__PURE__ */ t(
+            F,
             {
               h: 36,
               w: 36,
               variant: "outline",
               color: "var(--mantine-color-default-border)",
-              onClick: () => fe(P, C),
+              onClick: () => ue(Q, C),
               className: T.randomIcon,
               children: /* @__PURE__ */ t(
                 c,
                 {
                   color: "var(--mantine-color-default-color)",
                   size: 20,
-                  icon: V
+                  icon: W
                 }
               )
             }
@@ -174,10 +175,10 @@ const he = [
           overflowY: "auto"
         },
         ref: I,
-        onScroll: $,
-        children: S ? /* @__PURE__ */ y(v, { flex: 1, align: "stretch", children: [
-          !J && /* @__PURE__ */ t(
-            F,
+        onScroll: J,
+        children: S ? /* @__PURE__ */ y(v, { flex: 1, align: "stretch", gap: 0, children: [
+          !K && /* @__PURE__ */ t(
+            q,
             {
               py: 6,
               px: 6,
@@ -185,20 +186,20 @@ const he = [
               top: -1,
               style: { zIndex: 1 },
               bg: "light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))",
-              children: /* @__PURE__ */ t(q, { fz: "sm", c: "dimmed", children: u?.searchResults })
+              children: /* @__PURE__ */ t(N, { fz: "xs", fw: 500, lh: "140%", c: "dimmed", children: u?.searchResults })
             }
           ),
-          E.length ? /* @__PURE__ */ t(N, { cols: 10, spacing: 0, children: E.map((e) => /* @__PURE__ */ t(
+          j.length ? /* @__PURE__ */ t(M, { cols: 10, spacing: 0, children: j.map((e) => /* @__PURE__ */ t(
             "div",
             {
               className: T.item,
               "data-icon": e,
-              onClick: D,
+              onClick: R,
               children: e
             },
             e
           )) }) : /* @__PURE__ */ t(z, { flex: 1, justify: "center", align: "stretch", children: /* @__PURE__ */ t(
-            ue,
+            de,
             {
               size: 100,
               description: u?.searchNoResults,
@@ -207,7 +208,7 @@ const he = [
               }
             }
           ) })
-        ] }) : Q.map((e) => /* @__PURE__ */ y(
+        ] }) : O.map((e) => /* @__PURE__ */ y(
           "div",
           {
             ref: (o) => {
@@ -215,24 +216,24 @@ const he = [
             },
             children: [
               /* @__PURE__ */ t(
-                F,
+                q,
                 {
-                  bg: "transparent",
+                  bg: "light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))",
                   py: 2,
                   px: 6,
                   pos: "sticky",
                   top: -1,
                   h: 23,
                   style: { zIndex: 1 },
-                  children: /* @__PURE__ */ t(q, { fz: "xs", c: "dimmed", children: u?.emojiCategory?.[e.i] })
+                  children: /* @__PURE__ */ t(N, { fz: "xs", fw: 500, lh: "140%", c: "dimmed", children: u?.emojiCategory?.[e.i] })
                 }
               ),
-              /* @__PURE__ */ t(N, { cols: 10, spacing: 0, children: e.e.map((o) => /* @__PURE__ */ t(
+              /* @__PURE__ */ t(M, { cols: 10, spacing: 0, children: e.e.map((o) => /* @__PURE__ */ t(
                 "div",
                 {
                   className: T.item,
                   "data-icon": o.e,
-                  onClick: D,
+                  onClick: R,
                   children: o.e
                 },
                 o.e
@@ -252,14 +253,14 @@ const he = [
         justify: "space-between",
         h: "56px",
         px: 8,
-        children: he.map((e) => /* @__PURE__ */ t(
-          A,
+        children: ge.map((e) => /* @__PURE__ */ t(
+          F,
           {
             variant: b === e.i ? "light" : "subtle",
             color: b === e.i ? "var(--mantine-color-default-color)" : "var(--mantine-color-dimmed)",
             radius: "default",
             size: 32,
-            onClick: () => Y(e),
+            onClick: () => B(e),
             "data-active": b === e.i,
             children: e.icon
           },
@@ -270,5 +271,5 @@ const he = [
   ] });
 };
 export {
-  Re as EmojiPanel
+  Ae as EmojiPanel
 };

package/dist/components/EmojiPicker/EmojiPicker.d.ts

@@ -12,6 +12,14 @@ export type EmojiPickerProps = {
     showIcons?: boolean;
     showColors?: boolean;
     showEmojis?: boolean;
+    showGifs?: boolean;
+    /**
+     * Called when a GIF is picked from the GIF tab. Receives the GIF's URL.
+     * Distinct from {@link onChange} because hosts treat a GIF differently from
+     * an emoji/icon — chat composers send it as a message rather than inserting
+     * it into the text.
+     */
+    onSelectGif?: (url: string) => void;
     querySearch?: string;
     defaultActiveTab?: string | null;
     /** Controls how the popover opens. 'click' preserves current behavior; 'realtime' opens only when typing matches triggerRegex. */
@@ -22,6 +30,12 @@ export type EmojiPickerProps = {
     typingSeq?: number;
     /** If true, clicking the random icon button will not close the popover. Default: false */
     keepOpenOnRandom?: boolean;
+    /**
+     * Show the "Random" (shuffle) button next to the search field. Default: true.
+     * Connect chat composer + message reactions pass false — a random emoji is
+     * meaningless there.
+     */
+    showRandomButton?: boolean;
     /**
      * If false, picking an emoji does NOT close the popover — useful for chat
      * composers where users typically want to insert several emoji at once.
@@ -39,7 +53,8 @@ export type EmojiPickerLocales = {
     remove?: string;
     random?: string;
     icons?: string;
+    gifs?: string;
     emojiCategory?: Record<string, string>;
 };
-export declare const EmojiPicker: ({ project, value, querySearch, children, onChange, position, popoverProps, showIcons, showColors, defaultActiveTab, showEmojis, withinPortal, locales: _locales, openWhen, triggerRegex, typingSeq, showRemoveButton, keepOpenOnRandom, closeOnSelect, }: PropsWithChildren<EmojiPickerProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const EmojiPicker: ({ project, value, querySearch, children, onChange, position, popoverProps, showIcons, showColors, showGifs, onSelectGif, defaultActiveTab, showEmojis, withinPortal, locales: _locales, openWhen, triggerRegex, typingSeq, showRemoveButton, keepOpenOnRandom, showRandomButton, closeOnSelect, }: PropsWithChildren<EmojiPickerProps>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EmojiPicker.d.ts.map

package/dist/components/EmojiPicker/EmojiPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAGxE,OAAO,EAIL,gBAAgB,EAEhB,YAAY,EAEb,MAAM,eAAe,CAAC;AAQvB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,kIAAkI;IAClI,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gHAAgH;IAChH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0FAA0F;IAC1F,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,0PAoBzB,iBAAiB,CAAC,gBAAgB,CAAC,4CAiNrC,CAAC"}
+{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAGxE,OAAO,EAIL,gBAAgB,EAEhB,YAAY,EAEb,MAAM,eAAe,CAAC;AAWvB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,kIAAkI;IAClI,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gHAAgH;IAChH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0FAA0F;IAC1F,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,mSAuBzB,iBAAiB,CAAC,gBAAgB,CAAC,4CA2PrC,CAAC"}