@memobit/libs 3.1.4 → 3.1.5

package/dist/components/ColorPicker/ColorPicker.css

@@ -1 +1 @@
-.color-picker{gap:var(--spacing-12);border:1px solid var(--delimiter-color);border-radius:var(--radius);padding:var(--spacing-16);background:var(--card-background-color);flex-direction:column;width:320px;display:flex}.color-picker__preview{border-radius:var(--radius);border:1px solid var(--delimiter-color);width:100%;height:40px}.color-picker__controls{gap:var(--spacing-12);flex-direction:column;display:flex}.color-picker__sv{border-radius:var(--radius);cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:180px;position:relative;overflow:hidden}.color-picker__sv-white,.color-picker__sv-black{position:absolute;inset:0}.color-picker__sv-white{background:linear-gradient(90deg,#fff,#fff0)}.color-picker__sv-black{background:linear-gradient(#0000,#000)}.color-picker__sv-handle{border:2px solid #fff;border-radius:50%;width:12px;height:12px;position:absolute;transform:translate(-6px,-6px);box-shadow:0 0 0 1px #0000004d}.color-picker__slider input[type=range]{width:100%}.color-picker__mode-toggle{gap:var(--spacing-8);display:flex}.color-picker__mode-toggle .button{padding:6px 10px}.color-picker__mode-toggle .button.is-active{border:1px solid var(--body-accent-color);color:var(--body-accent-color)}.color-picker__fields{gap:var(--spacing-8);grid-template-columns:1fr;display:grid}.color-picker__fields .input-text-wrapper,.color-picker__fields .input-number-wrapper{width:100%}.color-picker__fields--rgb,.color-picker__fields--hsl,.color-picker__fields--hex{grid-template-columns:repeat(3,1fr)}.color-picker__fields--hex .input-text-wrapper{grid-column:span 3}
+.color-picker{gap:var(--spacing-12);border:1px solid var(--delimiter-color);border-radius:var(--radius);padding:var(--spacing-16);background:var(--card-background-color);flex-direction:column;width:320px;display:flex}.color-picker__swatches{gap:var(--spacing-6);flex-direction:column;display:flex}.color-picker__swatches-label{font-size:var(--font-size-xxs);color:var(--body-sub-title-color)}.color-picker__swatches-row{gap:var(--spacing-6);flex-wrap:wrap;display:flex}.color-picker__swatch{width:var(--spacing-20);height:var(--spacing-20);border:1px solid var(--delimiter-color);cursor:pointer;transition:transform var(--transition-fast);border-radius:50%;padding:0}.color-picker__swatch:hover{transform:scale(1.15)}.color-picker__swatch.is-selected{outline:2px solid var(--body-accent-color);outline-offset:2px}.color-picker__preview{border-radius:var(--radius);border:1px solid var(--delimiter-color);width:100%;height:40px}.color-picker__controls{gap:var(--spacing-12);flex-direction:column;display:flex}.color-picker__sv{border-radius:var(--radius);cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:180px;position:relative;overflow:hidden}.color-picker__sv-white,.color-picker__sv-black{position:absolute;inset:0}.color-picker__sv-white{background:linear-gradient(90deg,#fff,#fff0)}.color-picker__sv-black{background:linear-gradient(#0000,#000)}.color-picker__sv-handle{border:2px solid #fff;border-radius:50%;width:12px;height:12px;position:absolute;transform:translate(-6px,-6px);box-shadow:0 0 0 1px #0000004d}.color-picker__slider input[type=range]{width:100%}.color-picker__mode-toggle{gap:var(--spacing-8);display:flex}.color-picker__mode-toggle .button{padding:6px 10px}.color-picker__mode-toggle .button.is-active{border:1px solid var(--body-accent-color);color:var(--body-accent-color)}.color-picker__fields{gap:var(--spacing-8);grid-template-columns:1fr;display:grid}.color-picker__fields .input-text-wrapper,.color-picker__fields .input-number-wrapper{width:100%}.color-picker__fields--rgb,.color-picker__fields--hsl,.color-picker__fields--hex{grid-template-columns:repeat(3,1fr)}.color-picker__fields--hex .input-text-wrapper{grid-column:span 3}

package/dist/components/ColorPicker/ColorPicker2.js

@@ -1,250 +1,280 @@
 import './ColorPicker.css';
-import { Button as N } from "../Button/Button2.js";
-import { InputNumber as b } from "../InputNumber/InputNumber2.js";
-import { InputText as j } from "../InputText/InputText2.js";
+import { Button as H } from "../Button/Button2.js";
+import { Tooltip as G } from "../Tooltip/Tooltip2.js";
+import { InputNumber as N } from "../InputNumber/InputNumber2.js";
+import { InputText as X } from "../InputText/InputText2.js";
 /* empty css            */
-import { useEffect as B, useRef as R, useState as H } from "react";
-import { jsx as m, jsxs as x } from "react/jsx-runtime";
-var _ = (s, h, i) => Math.min(i, Math.max(h, s)), k = (s) => {
-  const h = s.replace("#", "").trim();
-  if (![3, 6].includes(h.length)) return null;
-  const i = h.length === 3 ? h.split("").map((o) => o + o).join("") : h, l = parseInt(i, 16);
-  return Number.isNaN(l) ? null : {
-    r: l >> 16 & 255,
-    g: l >> 8 & 255,
-    b: l & 255
+import { useEffect as Y, useMemo as A, useRef as B, useState as y } from "react";
+import { jsx as d, jsxs as b } from "react/jsx-runtime";
+var k = (t, i, h) => Math.min(h, Math.max(i, t)), x = (t) => {
+  const i = t.replace("#", "").trim();
+  if (![3, 6].includes(i.length)) return null;
+  const h = i.length === 3 ? i.split("").map((s) => s + s).join("") : i, c = parseInt(h, 16);
+  return Number.isNaN(c) ? null : {
+    r: c >> 16 & 255,
+    g: c >> 8 & 255,
+    b: c & 255
   };
-}, L = ({ r: s, g: h, b: i }) => `#${[
-  s,
-  h,
-  i
-].map((l) => _(Math.round(l), 0, 255).toString(16).padStart(2, "0")).join("")}`, g = ({ r: s, g: h, b: i }) => {
-  const l = s / 255, o = h / 255, t = i / 255, r = Math.max(l, o, t), c = r - Math.min(l, o, t);
-  let e = 0;
-  c !== 0 && (r === l ? e = (o - t) / c % 6 : r === o ? e = (t - l) / c + 2 : e = (l - o) / c + 4, e = Math.round(e * 60), e < 0 && (e += 360));
-  const a = r === 0 ? 0 : c / r, d = r;
+}, L = (t) => {
+  const i = t.trim().replace("#", "").toLowerCase();
+  return `#${i.length === 3 ? i.split("").map((h) => h + h).join("") : i}`;
+}, R = ({ r: t, g: i, b: h }) => `#${[
+  t,
+  i,
+  h
+].map((c) => k(Math.round(c), 0, 255).toString(16).padStart(2, "0")).join("")}`, v = ({ r: t, g: i, b: h }) => {
+  const c = t / 255, s = i / 255, r = h / 255, o = Math.max(c, s, r), l = o - Math.min(c, s, r);
+  let n = 0;
+  l !== 0 && (o === c ? n = (s - r) / l % 6 : o === s ? n = (r - c) / l + 2 : n = (c - s) / l + 4, n = Math.round(n * 60), n < 0 && (n += 360));
+  const a = o === 0 ? 0 : l / o, m = o;
   return {
-    h: e,
+    h: n,
     s: Math.round(a * 100),
-    v: Math.round(d * 100)
+    v: Math.round(m * 100)
   };
-}, T = ({ h: s, s: h, v: i }) => {
-  const l = h / 100, o = i / 100, t = o * l, r = t * (1 - Math.abs(s / 60 % 2 - 1)), c = o - t;
-  let e = 0, a = 0, d = 0;
-  return s < 60 ? (e = t, a = r) : s < 120 ? (e = r, a = t) : s < 180 ? (a = t, d = r) : s < 240 ? (a = r, d = t) : s < 300 ? (e = r, d = t) : (e = t, d = r), {
-    r: Math.round((e + c) * 255),
-    g: Math.round((a + c) * 255),
-    b: Math.round((d + c) * 255)
+}, E = ({ h: t, s: i, v: h }) => {
+  const c = i / 100, s = h / 100, r = s * c, o = r * (1 - Math.abs(t / 60 % 2 - 1)), l = s - r;
+  let n = 0, a = 0, m = 0;
+  return t < 60 ? (n = r, a = o) : t < 120 ? (n = o, a = r) : t < 180 ? (a = r, m = o) : t < 240 ? (a = o, m = r) : t < 300 ? (n = o, m = r) : (n = r, m = o), {
+    r: Math.round((n + l) * 255),
+    g: Math.round((a + l) * 255),
+    b: Math.round((m + l) * 255)
   };
-}, I = ({ r: s, g: h, b: i }) => {
-  const l = s / 255, o = h / 255, t = i / 255, r = Math.max(l, o, t), c = Math.min(l, o, t), e = r - c;
+}, F = ({ r: t, g: i, b: h }) => {
+  const c = t / 255, s = i / 255, r = h / 255, o = Math.max(c, s, r), l = Math.min(c, s, r), n = o - l;
   let a = 0;
-  e !== 0 && (r === l ? a = (o - t) / e % 6 : r === o ? a = (t - l) / e + 2 : a = (l - o) / e + 4, a = Math.round(a * 60), a < 0 && (a += 360));
-  const d = (r + c) / 2, p = e === 0 ? 0 : e / (1 - Math.abs(2 * d - 1));
+  n !== 0 && (o === c ? a = (s - r) / n % 6 : o === s ? a = (r - c) / n + 2 : a = (c - s) / n + 4, a = Math.round(a * 60), a < 0 && (a += 360));
+  const m = (o + l) / 2, M = n === 0 ? 0 : n / (1 - Math.abs(2 * m - 1));
   return {
     h: a,
-    s: Math.round(p * 100),
-    l: Math.round(d * 100)
+    s: Math.round(M * 100),
+    l: Math.round(m * 100)
   };
-}, w = ({ h: s, s: h, l: i }) => {
-  const l = h / 100, o = i / 100, t = (1 - Math.abs(2 * o - 1)) * l, r = t * (1 - Math.abs(s / 60 % 2 - 1)), c = o - t / 2;
-  let e = 0, a = 0, d = 0;
-  return s < 60 ? (e = t, a = r) : s < 120 ? (e = r, a = t) : s < 180 ? (a = t, d = r) : s < 240 ? (a = r, d = t) : s < 300 ? (e = r, d = t) : (e = t, d = r), {
-    r: Math.round((e + c) * 255),
-    g: Math.round((a + c) * 255),
-    b: Math.round((d + c) * 255)
+}, T = ({ h: t, s: i, l: h }) => {
+  const c = i / 100, s = h / 100, r = (1 - Math.abs(2 * s - 1)) * c, o = r * (1 - Math.abs(t / 60 % 2 - 1)), l = s - r / 2;
+  let n = 0, a = 0, m = 0;
+  return t < 60 ? (n = r, a = o) : t < 120 ? (n = o, a = r) : t < 180 ? (a = r, m = o) : t < 240 ? (a = o, m = r) : t < 300 ? (n = o, m = r) : (n = r, m = o), {
+    r: Math.round((n + l) * 255),
+    g: Math.round((a + l) * 255),
+    b: Math.round((m + l) * 255)
   };
-}, F = ({ value: s = "#4e79a7", onChange: h }) => {
-  const [i, l] = H("hex"), [o, t] = H(() => {
-    const n = k(s) || {
+}, Z = ({ value: t = "#4e79a7", onChange: i, swatches: h, swatchesLabel: c = "Already in use" }) => {
+  const [s, r] = y("hex"), o = A(() => {
+    const e = /* @__PURE__ */ new Set();
+    return (h ?? []).forEach((p) => {
+      const u = x(p);
+      u && e.add(R(u));
+    }), [...e];
+  }, [h]), [l, n] = y(() => {
+    const e = x(t) || {
       r: 78,
       g: 121,
       b: 167
     };
-    return g(n);
-  }), r = R(null), c = R(o);
-  c.current = o, B(() => {
-    const n = k(s);
-    n && t(g(n));
-  }, [s]);
-  const e = (n) => {
-    const v = {
-      h: _(n.h, 0, 360),
-      s: _(n.s, 0, 100),
-      v: _(n.v, 0, 100)
+    return v(e);
+  }), [a, m] = y(() => x(t) ? L(t) : null), M = B(null), S = B(l);
+  S.current = l, Y(() => {
+    const e = x(t);
+    e && (n(v(e)), m(L(t)));
+  }, [t]);
+  const g = (e) => {
+    const p = {
+      h: k(e.h, 0, 360),
+      s: k(e.s, 0, 100),
+      v: k(e.v, 0, 100)
     };
-    t(v);
-    const u = L(T(v));
-    h?.(u);
-  }, a = (n, v) => {
-    const u = r.current?.getBoundingClientRect();
+    n(p), m(null);
+    const u = R(E(p));
+    i?.(u);
+  }, $ = (e) => {
+    const p = x(e);
+    p && (n(v(p)), m(L(e)), i?.(e));
+  }, j = (e, p) => {
+    const u = M.current?.getBoundingClientRect();
     if (!u) return;
-    const M = _(n - u.left, 0, u.width), y = _(v - u.top, 0, u.height), S = Math.round(M / u.width * 100), E = Math.round(100 - y / u.height * 100);
-    e({
-      h: c.current.h,
-      s: S,
-      v: E
+    const w = k(e - u.left, 0, u.width), P = k(p - u.top, 0, u.height), z = Math.round(w / u.width * 100), D = Math.round(100 - P / u.height * 100);
+    g({
+      h: S.current.h,
+      s: z,
+      v: D
     });
-  }, d = (n) => {
-    n.preventDefault();
+  }, I = (e) => {
+    e.preventDefault();
     try {
-      n.currentTarget.setPointerCapture(n.pointerId);
+      e.currentTarget.setPointerCapture(e.pointerId);
     } catch {
     }
-    a(n.clientX, n.clientY);
-    const v = (M) => a(M.clientX, M.clientY), u = () => {
-      window.removeEventListener("pointermove", v), window.removeEventListener("pointerup", u), window.removeEventListener("pointercancel", u);
+    j(e.clientX, e.clientY);
+    const p = (w) => j(w.clientX, w.clientY), u = () => {
+      window.removeEventListener("pointermove", p), window.removeEventListener("pointerup", u), window.removeEventListener("pointercancel", u);
     };
-    window.addEventListener("pointermove", v), window.addEventListener("pointerup", u), window.addEventListener("pointercancel", u);
-  }, p = T(o), C = L(p), f = I(p);
-  return /* @__PURE__ */ x("div", {
+    window.addEventListener("pointermove", p), window.addEventListener("pointerup", u), window.addEventListener("pointercancel", u);
+  }, f = a ? x(a) ?? E(l) : E(l), C = a ?? R(f), _ = F(f);
+  return /* @__PURE__ */ b("div", {
     className: "color-picker",
     children: [
-      /* @__PURE__ */ m("div", {
+      o.length > 0 && /* @__PURE__ */ b("div", {
+        className: "color-picker__swatches",
+        children: [/* @__PURE__ */ d("span", {
+          className: "color-picker__swatches-label",
+          children: c
+        }), /* @__PURE__ */ d("div", {
+          className: "color-picker__swatches-row",
+          children: o.map((e) => /* @__PURE__ */ d(G, {
+            title: e,
+            children: /* @__PURE__ */ d("button", {
+              className: `color-picker__swatch${e === C.toLowerCase() ? " is-selected" : ""}`,
+              onClick: () => $(e),
+              style: { backgroundColor: e },
+              type: "button"
+            })
+          }, e))
+        })]
+      }),
+      /* @__PURE__ */ d("div", {
         className: "color-picker__preview",
         style: { backgroundColor: C }
       }),
-      /* @__PURE__ */ x("div", {
+      /* @__PURE__ */ b("div", {
         className: "color-picker__controls",
-        children: [/* @__PURE__ */ x("div", {
+        children: [/* @__PURE__ */ b("div", {
           className: "color-picker__sv",
-          ref: r,
-          style: { backgroundColor: `hsl(${o.h}, 100%, 50%)` },
-          onPointerDown: d,
+          ref: M,
+          style: { backgroundColor: `hsl(${l.h}, 100%, 50%)` },
+          onPointerDown: I,
           children: [
-            /* @__PURE__ */ m("div", { className: "color-picker__sv-white" }),
-            /* @__PURE__ */ m("div", { className: "color-picker__sv-black" }),
-            /* @__PURE__ */ m("div", {
+            /* @__PURE__ */ d("div", { className: "color-picker__sv-white" }),
+            /* @__PURE__ */ d("div", { className: "color-picker__sv-black" }),
+            /* @__PURE__ */ d("div", {
               className: "color-picker__sv-handle",
               style: {
-                left: `${o.s}%`,
-                top: `${100 - o.v}%`
+                left: `${l.s}%`,
+                top: `${100 - l.v}%`
               }
             })
           ]
-        }), /* @__PURE__ */ m("div", {
+        }), /* @__PURE__ */ d("div", {
           className: "color-picker__slider",
-          children: /* @__PURE__ */ m("input", {
+          children: /* @__PURE__ */ d("input", {
             type: "range",
             min: 0,
             max: 360,
-            value: o.h,
-            onChange: (n) => e({
-              ...o,
-              h: Number(n.target.value)
+            value: l.h,
+            onChange: (e) => g({
+              ...l,
+              h: Number(e.target.value)
             })
           })
         })]
       }),
-      /* @__PURE__ */ x("div", {
+      /* @__PURE__ */ b("div", {
         className: "color-picker__mode-toggle",
         children: [
-          /* @__PURE__ */ m(N, {
+          /* @__PURE__ */ d(H, {
             variant: "plain",
-            className: i === "hex" ? "is-active" : "",
-            onClick: () => l("hex"),
+            className: s === "hex" ? "is-active" : "",
+            onClick: () => r("hex"),
             children: "Hex"
           }),
-          /* @__PURE__ */ m(N, {
+          /* @__PURE__ */ d(H, {
             variant: "plain",
-            className: i === "rgb" ? "is-active" : "",
-            onClick: () => l("rgb"),
+            className: s === "rgb" ? "is-active" : "",
+            onClick: () => r("rgb"),
             children: "RGB"
           }),
-          /* @__PURE__ */ m(N, {
+          /* @__PURE__ */ d(H, {
             variant: "plain",
-            className: i === "hsl" ? "is-active" : "",
-            onClick: () => l("hsl"),
+            className: s === "hsl" ? "is-active" : "",
+            onClick: () => r("hsl"),
             children: "HSL"
           })
         ]
       }),
-      i === "hex" && /* @__PURE__ */ m("div", {
+      s === "hex" && /* @__PURE__ */ d("div", {
         className: "color-picker__fields color-picker__fields--hex",
-        children: /* @__PURE__ */ m(j, {
+        children: /* @__PURE__ */ d(X, {
           label: "Hex",
           value: C,
-          onChange: (n) => {
-            const v = k(n);
-            v && e(g(v));
+          onChange: (e) => {
+            x(e) && $(e.startsWith("#") ? e : `#${e}`);
           }
         })
       }),
-      i === "rgb" && /* @__PURE__ */ x("div", {
+      s === "rgb" && /* @__PURE__ */ b("div", {
         className: "color-picker__fields color-picker__fields--rgb",
         children: [
-          /* @__PURE__ */ m(b, {
+          /* @__PURE__ */ d(N, {
             label: "R",
             min: 0,
             max: 255,
-            value: p.r,
-            onChange: (n) => e(g({
-              ...p,
-              r: n ?? 0
+            value: f.r,
+            onChange: (e) => g(v({
+              ...f,
+              r: e ?? 0
             }))
           }),
-          /* @__PURE__ */ m(b, {
+          /* @__PURE__ */ d(N, {
             label: "G",
             min: 0,
             max: 255,
-            value: p.g,
-            onChange: (n) => e(g({
-              ...p,
-              g: n ?? 0
+            value: f.g,
+            onChange: (e) => g(v({
+              ...f,
+              g: e ?? 0
             }))
           }),
-          /* @__PURE__ */ m(b, {
+          /* @__PURE__ */ d(N, {
             label: "B",
             min: 0,
             max: 255,
-            value: p.b,
-            onChange: (n) => e(g({
-              ...p,
-              b: n ?? 0
+            value: f.b,
+            onChange: (e) => g(v({
+              ...f,
+              b: e ?? 0
             }))
           })
         ]
       }),
-      i === "hsl" && /* @__PURE__ */ x("div", {
+      s === "hsl" && /* @__PURE__ */ b("div", {
         className: "color-picker__fields color-picker__fields--hsl",
         children: [
-          /* @__PURE__ */ m(b, {
+          /* @__PURE__ */ d(N, {
             label: "H",
             min: 0,
             max: 360,
-            value: f.h,
-            onChange: (n) => {
-              const v = w({
-                ...f,
-                h: n ?? 0
+            value: _.h,
+            onChange: (e) => {
+              const p = T({
+                ..._,
+                h: e ?? 0
               });
-              e(g(v));
+              g(v(p));
             }
           }),
-          /* @__PURE__ */ m(b, {
+          /* @__PURE__ */ d(N, {
             label: "S",
             min: 0,
             max: 100,
-            value: f.s,
-            onChange: (n) => {
-              const v = w({
-                ...f,
-                s: n ?? 0
+            value: _.s,
+            onChange: (e) => {
+              const p = T({
+                ..._,
+                s: e ?? 0
               });
-              e(g(v));
+              g(v(p));
             }
           }),
-          /* @__PURE__ */ m(b, {
+          /* @__PURE__ */ d(N, {
             label: "L",
             min: 0,
             max: 100,
-            value: f.l,
-            onChange: (n) => {
-              const v = w({
-                ...f,
-                l: n ?? 0
+            value: _.l,
+            onChange: (e) => {
+              const p = T({
+                ..._,
+                l: e ?? 0
               });
-              e(g(v));
+              g(v(p));
             }
           })
         ]
@@ -253,5 +283,5 @@ var _ = (s, h, i) => Math.min(i, Math.max(h, s)), k = (s) => {
   });
 };
 export {
-  F as ColorPicker
+  Z as ColorPicker
 };

package/dist/components/ControlPanel/ControlPanelFilter.js

@@ -1,20 +1,21 @@
-import { Icon as g } from "../Icon/Icon2.js";
+import { Icon as b } from "../Icon/Icon2.js";
 import { Button as C } from "../Button/Button2.js";
-import { Chip as A } from "../Chip/Chip2.js";
-import { InputNumber as b } from "../InputNumber/InputNumber2.js";
-import { InputText as k } from "../InputText/InputText2.js";
-import { DatePicker as w } from "../DatePicker/DatePicker2.js";
-import { Dropdown as R } from "../Dropdown/Dropdown2.js";
-import { InputDate as E } from "../InputDate/InputDate2.js";
-import { InputSearch as I } from "../InputSearch/InputSearch2.js";
-import { Rating as L } from "../Rating/Rating2.js";
-import { DEFAULT_DATE_RANGE_PRESETS as M } from "./ControlPanel.types.js";
-import { useEffect as P, useRef as T, useState as N } from "react";
+import { Tooltip as k } from "../Tooltip/Tooltip2.js";
+import { Chip as S } from "../Chip/Chip2.js";
+import { InputNumber as x } from "../InputNumber/InputNumber2.js";
+import { InputText as w } from "../InputText/InputText2.js";
+import { DatePicker as R } from "../DatePicker/DatePicker2.js";
+import { Dropdown as E } from "../Dropdown/Dropdown2.js";
+import { InputDate as L } from "../InputDate/InputDate2.js";
+import { InputSearch as D } from "../InputSearch/InputSearch2.js";
+import { Rating as M } from "../Rating/Rating2.js";
+import { DEFAULT_DATE_RANGE_PRESETS as T } from "./ControlPanel.types.js";
+import { Fragment as P, useEffect as V, useRef as j, useState as A } from "react";
 import { jsx as n, jsxs as _ } from "react/jsx-runtime";
-var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean" ? [] : [e], S = (e) => e.every((r) => typeof r == "number") ? e : e.map(String), x = 2, j = (e) => {
+var H = 3, f = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean" ? [] : [e], I = (e) => e.every((r) => typeof r == "number") ? e : e.map(String), N = 2, U = (e) => {
   const r = e.options ?? [];
-  return D(e.value).map((o) => r.find((t) => t.value === o)?.label ?? String(o));
-}, H = (e) => {
+  return f(e.value).map((o) => r.find((t) => t.value === o)?.label ?? String(o));
+}, B = (e) => {
   const { type: r, value: o } = e;
   if (o == null || o === "") return;
   if (r === "checkbox") return o === !0 ? "On" : void 0;
@@ -28,15 +29,15 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
   }
   if (r === "rating") return typeof o == "number" && o > 0 ? String(o) : void 0;
   if (r === "text" || r === "search" || r === "date" || r === "number") return String(o);
-  const t = j(e);
+  const t = U(e);
   if (t.length !== 0)
-    return t.length <= x ? t.join(", ") : `${t.slice(0, x).join(", ")} +${t.length - x}`;
-}, ne = ({ filter: e, collapsible: r = !1, onChange: o }) => {
-  const t = r && e.type !== "checkbox", [s, d] = N(e.defaultExpanded ?? !1), a = e.summary ?? H(e), i = /* @__PURE__ */ _("span", {
+    return t.length <= N ? t.join(", ") : `${t.slice(0, N).join(", ")} +${t.length - N}`;
+}, te = ({ filter: e, collapsible: r = !1, onChange: o }) => {
+  const t = r && e.type !== "checkbox", [s, d] = A(e.defaultExpanded ?? !1), a = e.summary ?? B(e), i = /* @__PURE__ */ _("span", {
     className: `control-panel__filter-title${e.isActive ? " control-panel__filter-title--active" : ""}`,
     children: [
       e.isActive && /* @__PURE__ */ n("span", { className: "control-panel__filter-active-dot" }),
-      e.icon && /* @__PURE__ */ n(g, { name: e.icon }),
+      e.icon && /* @__PURE__ */ n(b, { name: e.icon }),
       e.label
     ]
   });
@@ -59,19 +60,19 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
         }),
         /* @__PURE__ */ n("span", {
           className: "control-panel__filter-caret",
-          children: /* @__PURE__ */ n(g, { name: s ? "caret-up" : "caret-down" })
+          children: /* @__PURE__ */ n(b, { name: s ? "caret-up" : "caret-down" })
         })
       ]
-    }) : e.type !== "checkbox" && i, (!t || s) && /* @__PURE__ */ n(B, {
+    }) : e.type !== "checkbox" && i, (!t || s) && /* @__PURE__ */ n(z, {
       filter: e,
       onChange: o
     })]
   });
-}, U = ({ placeholder: e, value: r, onChange: o }) => {
-  const [t, s] = N(r), d = T(r);
-  return P(() => {
+}, Y = ({ placeholder: e, value: r, onChange: o }) => {
+  const [t, s] = A(r), d = j(r);
+  return V(() => {
     r !== d.current && (d.current = r, s(r));
-  }, [r]), /* @__PURE__ */ n(I, {
+  }, [r]), /* @__PURE__ */ n(D, {
     className: "control-panel__filter-search",
     onChange: (a) => {
       d.current = a, s(a), o(a);
@@ -79,9 +80,9 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
     placeholder: e,
     value: t
   });
-}, B = ({ filter: e, onChange: r }) => {
-  const o = D(e.value), t = e.options ?? [], [s, d] = N("");
-  if (e.type === "checkbox") return /* @__PURE__ */ n(A, {
+}, z = ({ filter: e, onChange: r }) => {
+  const o = f(e.value), t = e.options ?? [], [s, d] = A("");
+  if (e.type === "checkbox") return /* @__PURE__ */ n(S, {
     count: e.count,
     selected: e.value === !0,
     onClick: () => r({
@@ -91,7 +92,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
     }),
     children: e.label
   });
-  if (e.type === "date") return /* @__PURE__ */ n(E, {
+  if (e.type === "date") return /* @__PURE__ */ n(L, {
     min: e.minDate,
     max: e.maxDate,
     value: typeof e.value == "string" ? e.value : "",
@@ -103,7 +104,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
   });
   if (e.type === "text") return /* @__PURE__ */ n("div", {
     className: "control-panel__filter-text",
-    children: /* @__PURE__ */ n(k, {
+    children: /* @__PURE__ */ n(w, {
       onChange: (a) => r({
         filterId: e.id,
         type: e.type,
@@ -113,7 +114,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
       value: typeof e.value == "string" ? e.value : ""
     })
   });
-  if (e.type === "search") return /* @__PURE__ */ n(U, {
+  if (e.type === "search") return /* @__PURE__ */ n(Y, {
     placeholder: e.placeholder,
     value: typeof e.value == "string" ? e.value : "",
     onChange: (a) => r({
@@ -124,7 +125,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
   });
   if (e.type === "number") return /* @__PURE__ */ n("div", {
     className: "control-panel__filter-number",
-    children: /* @__PURE__ */ n(b, {
+    children: /* @__PURE__ */ n(x, {
       min: e.min,
       max: e.max,
       step: e.step,
@@ -137,7 +138,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
       })
     })
   });
-  if (e.type === "rating") return /* @__PURE__ */ n(L, {
+  if (e.type === "rating") return /* @__PURE__ */ n(M, {
     selectable: !0,
     icon: e.ratingIcon ?? "star",
     maxRate: e.maxRate ?? 10,
@@ -158,7 +159,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
     return /* @__PURE__ */ _("div", {
       className: "control-panel__filter-range",
       children: [
-        /* @__PURE__ */ n(b, {
+        /* @__PURE__ */ n(x, {
           min: e.min,
           max: e.max,
           step: e.step,
@@ -171,7 +172,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
           className: "control-panel__filter-range-sep",
           children: "—"
         }),
-        /* @__PURE__ */ n(b, {
+        /* @__PURE__ */ n(x, {
           min: e.min,
           max: e.max,
           step: e.step,
@@ -184,19 +185,19 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
     });
   }
   if (e.type === "date-range") {
-    const a = Array.isArray(e.value) ? e.value : [], i = a[0] || void 0, l = a[1] || void 0, m = e.presets ?? M, p = (c) => {
+    const a = Array.isArray(e.value) ? e.value : [], i = a[0] || void 0, l = a[1] || void 0, m = e.presets ?? T, p = (c) => {
       if (!c) return;
-      const [h, y, $] = c.split("-").map(Number);
-      return new Date(h, y - 1, $);
+      const [h, g, $] = c.split("-").map(Number);
+      return new Date(h, g - 1, $);
     }, u = (c) => `${c.getFullYear()}-${String(c.getMonth() + 1).padStart(2, "0")}-${String(c.getDate()).padStart(2, "0")}`, v = (c, h) => r({
       filterId: e.id,
       type: e.type,
       value: [c ?? "", h ?? ""]
-    }), f = (c) => {
+    }), y = (c) => {
       const h = e.maxDate ? p(e.maxDate) : /* @__PURE__ */ new Date();
       if (!h) return;
-      const y = new Date(h);
-      y.setDate(y.getDate() - c), v(u(y), u(h));
+      const g = new Date(h);
+      g.setDate(g.getDate() - c), v(u(g), u(h));
     };
     return /* @__PURE__ */ _("div", {
       className: "control-panel__filter-date-range",
@@ -205,10 +206,10 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
         children: m.map((c) => /* @__PURE__ */ n(C, {
           size: "small",
           variant: "default",
-          onClick: () => f(c.days),
+          onClick: () => y(c.days),
           children: c.label
         }, c.days))
-      }), /* @__PURE__ */ n(w, {
+      }), /* @__PURE__ */ n(R, {
         mode: "range",
         minDate: p(e.minDate),
         maxDate: p(e.maxDate),
@@ -228,7 +229,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
     });
   }
   if (e.type === "dropdown")
-    return !e.multiple && t.length > 0 && t.length <= V ? /* @__PURE__ */ n("div", {
+    return !e.multiple && t.length > 0 && t.length <= H ? /* @__PURE__ */ n("div", {
       className: `control-panel__filter-list ${e.inline ? "control-panel__filter-list--inline" : ""}`,
       children: t.map((a) => {
         const i = e.value === a.value;
@@ -255,7 +256,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
                 className: "control-panel__filter-swatch",
                 style: { backgroundColor: a.color }
               }),
-              a.icon && /* @__PURE__ */ n(g, { name: a.icon }),
+              a.icon && /* @__PURE__ */ n(b, { name: a.icon }),
               /* @__PURE__ */ n("span", {
                 className: "control-panel__filter-label",
                 children: a.label
@@ -268,7 +269,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
           })
         }, a.value);
       })
-    }) : /* @__PURE__ */ n(R, {
+    }) : /* @__PURE__ */ n(E, {
       className: "control-panel__filter-dropdown",
       multiple: e.multiple,
       name: e.id,
@@ -277,7 +278,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
         r({
           filterId: e.id,
           type: e.type,
-          value: Array.isArray(a) ? S(a.map((l) => l.value)) : a?.value ?? null,
+          value: Array.isArray(a) ? I(a.map((l) => l.value)) : a?.value ?? null,
           option: Array.isArray(a) ? null : a,
           options: i
         });
@@ -293,7 +294,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
     const a = s.trim().toLowerCase(), i = e.searchable && a ? t.filter((l) => l.label.toLowerCase().includes(a)) : t;
     return /* @__PURE__ */ _("div", {
       className: "control-panel__filter-chips-wrap",
-      children: [e.searchable && t.length > 0 && /* @__PURE__ */ n(I, {
+      children: [e.searchable && t.length > 0 && /* @__PURE__ */ n(D, {
         className: "control-panel__filter-chip-search",
         value: s,
         onChange: d,
@@ -305,23 +306,21 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
           overflowY: "auto"
         } : void 0,
         children: i.map((l) => {
-          const m = o.includes(l.value);
-          return /* @__PURE__ */ _(A, {
+          const m = o.includes(l.value), p = /* @__PURE__ */ _(S, {
             color: l.color,
             count: l.count,
             disabled: l.disabled,
             icon: l.icon,
-            title: l.tooltip,
             selected: m,
             onClick: () => {
               if (l.disabled) return;
-              const p = e.multiple === !1, u = p ? m ? [] : [l.value] : m ? o.filter((v) => v !== l.value) : [...o, l.value];
+              const u = e.multiple === !1, v = u ? m ? [] : [l.value] : m ? o.filter((y) => y !== l.value) : [...o, l.value];
               r({
                 filterId: e.id,
                 type: e.type,
-                value: p ? u[0] ?? null : S(u),
+                value: u ? v[0] ?? null : I(v),
                 option: l,
-                options: t.filter((v) => u.includes(v.value))
+                options: t.filter((y) => v.includes(y.value))
               });
             },
             children: [l.imageUrl && /* @__PURE__ */ n("img", {
@@ -329,7 +328,11 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
               src: l.imageUrl,
               alt: ""
             }), l.label]
-          }, l.value);
+          });
+          return l.tooltip ? /* @__PURE__ */ n(k, {
+            title: l.tooltip,
+            children: p
+          }, l.value) : /* @__PURE__ */ n(P, { children: p }, l.value);
         })
       })]
     });
@@ -363,7 +366,7 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
               className: "control-panel__filter-swatch",
               style: { backgroundColor: a.color }
             }),
-            a.icon && /* @__PURE__ */ n(g, {
+            a.icon && /* @__PURE__ */ n(b, {
               className: "control-panel__filter-icon",
               name: a.icon
             }),
@@ -382,5 +385,5 @@ var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
   });
 };
 export {
-  ne as ControlPanelFilterItem
+  te as ControlPanelFilterItem
 };

package/dist/components/EmojiPicker/EmojiPicker2.js

@@ -1,9 +1,10 @@
 import './EmojiPicker.css';
-import { InputSearch as h } from "../InputSearch/InputSearch2.js";
-import { EMOJI_KEYWORDS as v } from "./emojiKeywords/index.js";
+import { Tooltip as h } from "../Tooltip/Tooltip2.js";
+import { InputSearch as v } from "../InputSearch/InputSearch2.js";
+import { EMOJI_KEYWORDS as _ } from "./emojiKeywords/index.js";
 /* empty css            */
-import { useMemo as _, useState as n } from "react";
-import { jsx as i, jsxs as f } from "react/jsx-runtime";
+import { useMemo as f, useState as a } from "react";
+import { jsx as i, jsxs as k } from "react/jsx-runtime";
 var m = [
   {
     id: "smileys",
@@ -743,18 +744,18 @@ var m = [
       "🈲"
     ]
   }
-], E = ({ value: t, onChange: l }) => {
-  const [o, d] = n(""), [r, j] = n(m[0].id), c = _(() => {
+], A = ({ value: n, onChange: l }) => {
+  const [o, d] = a(""), [r, p] = a(m[0].id), c = f(() => {
     if (!o.trim()) return null;
     const e = o.toLowerCase();
-    return m.flatMap((s) => s.emojis.filter((p) => v[p]?.some((u) => u.includes(e)) || s.name.toLowerCase().includes(e)));
-  }, [o]), a = c ?? m.find((e) => e.id === r)?.emojis ?? [];
-  return /* @__PURE__ */ f("div", {
+    return m.flatMap((s) => s.emojis.filter((j) => _[j]?.some((u) => u.includes(e)) || s.name.toLowerCase().includes(e)));
+  }, [o]), t = c ?? m.find((e) => e.id === r)?.emojis ?? [];
+  return /* @__PURE__ */ k("div", {
     className: "emoji-picker",
     children: [
       /* @__PURE__ */ i("div", {
         className: "emoji-picker__search",
-        children: /* @__PURE__ */ i(h, {
+        children: /* @__PURE__ */ i(v, {
           placeholder: "Search emoji...",
           value: o,
           onChange: d,
@@ -763,20 +764,22 @@ var m = [
       }),
       !c && /* @__PURE__ */ i("div", {
         className: "emoji-picker__categories",
-        children: m.map((e) => /* @__PURE__ */ i("button", {
-          className: `emoji-picker__cat-btn${r === e.id ? " is-active" : ""}`,
+        children: m.map((e) => /* @__PURE__ */ i(h, {
           title: e.name,
-          onClick: () => j(e.id),
-          children: e.icon
+          children: /* @__PURE__ */ i("button", {
+            className: `emoji-picker__cat-btn${r === e.id ? " is-active" : ""}`,
+            onClick: () => p(e.id),
+            children: e.icon
+          })
         }, e.id))
       }),
       /* @__PURE__ */ i("div", {
         className: "emoji-picker__grid",
-        children: a.length === 0 ? /* @__PURE__ */ i("p", {
+        children: t.length === 0 ? /* @__PURE__ */ i("p", {
           className: "emoji-picker__empty",
           children: "No results"
-        }) : a.map((e, s) => /* @__PURE__ */ i("button", {
-          className: `emoji-picker__emoji${t === e ? " is-selected" : ""}`,
+        }) : t.map((e, s) => /* @__PURE__ */ i("button", {
+          className: `emoji-picker__emoji${n === e ? " is-selected" : ""}`,
           onClick: () => l?.(e),
           children: e
         }, s))
@@ -785,5 +788,5 @@ var m = [
   });
 };
 export {
-  E as EmojiPicker
+  A as EmojiPicker
 };

package/dist/components/IconPicker/IconPicker2.js

@@ -1,51 +1,54 @@
 import './IconPicker.css';
-import { Icon as f } from "../Icon/Icon2.js";
-import { InputSearch as g } from "../InputSearch/InputSearch2.js";
+import { Icon as _ } from "../Icon/Icon2.js";
+import { Tooltip as g } from "../Tooltip/Tooltip2.js";
+import { InputSearch as k } from "../InputSearch/InputSearch2.js";
 /* empty css           */
-import { useMemo as a, useState as k } from "react";
-import { iconMap as v } from "@memobit/icons/map";
-import { jsx as c, jsxs as N } from "react/jsx-runtime";
-import { iconAliases as S } from "@memobit/icons";
-var b = Object.keys(v), w = ({ color: s, emptyLabel: p = "No icons match", icons: n, onChange: m, placeholder: h = "Search icons...", value: d }) => {
-  const [o, u] = k(""), t = a(() => n ?? b, [n]), i = a(() => {
-    const e = o.trim().toLowerCase();
-    if (!e) return t;
-    const _ = e.replace(/[\s-]+/g, ""), l = (r) => r.includes(e) || r.replace(/-/g, "").includes(_);
-    return t.filter((r) => l(r) || (S[r] ?? []).some(l));
-  }, [t, o]);
-  return /* @__PURE__ */ N("div", {
+import { useMemo as a, useState as v } from "react";
+import { iconMap as N } from "@memobit/icons/map";
+import { jsx as c, jsxs as S } from "react/jsx-runtime";
+import { iconAliases as b } from "@memobit/icons";
+var y = Object.keys(N), M = ({ color: s, emptyLabel: p = "No icons match", icons: n, onChange: m, placeholder: h = "Search icons...", value: d }) => {
+  const [i, u] = v(""), o = a(() => n ?? y, [n]), t = a(() => {
+    const e = i.trim().toLowerCase();
+    if (!e) return o;
+    const f = e.replace(/[\s-]+/g, ""), l = (r) => r.includes(e) || r.replace(/-/g, "").includes(f);
+    return o.filter((r) => l(r) || (b[r] ?? []).some(l));
+  }, [o, i]);
+  return /* @__PURE__ */ S("div", {
     className: "icon-picker",
     children: [
       /* @__PURE__ */ c("div", {
         className: "icon-picker__search",
-        children: /* @__PURE__ */ c(g, {
+        children: /* @__PURE__ */ c(k, {
           autoFocus: !0,
           onChange: u,
           placeholder: h,
-          value: o
+          value: i
         })
       }),
       /* @__PURE__ */ c("div", {
         className: "icon-picker__grid",
-        children: i.length === 0 ? /* @__PURE__ */ c("p", {
+        children: t.length === 0 ? /* @__PURE__ */ c("p", {
           className: "icon-picker__empty",
           children: p
-        }) : i.map((e) => /* @__PURE__ */ c("button", {
-          className: `icon-picker__icon${d === e ? " is-selected" : ""}`,
-          onClick: () => m?.(e),
-          style: s ? { color: s } : void 0,
+        }) : t.map((e) => /* @__PURE__ */ c(g, {
           title: e,
-          type: "button",
-          children: /* @__PURE__ */ c(f, { name: e })
+          children: /* @__PURE__ */ c("button", {
+            className: `icon-picker__icon${d === e ? " is-selected" : ""}`,
+            onClick: () => m?.(e),
+            style: s ? { color: s } : void 0,
+            type: "button",
+            children: /* @__PURE__ */ c(_, { name: e })
+          })
         }, e))
       }),
       /* @__PURE__ */ c("p", {
         className: "icon-picker__count",
-        children: i.length === t.length ? `${t.length} icons` : `${i.length} of ${t.length}`
+        children: t.length === o.length ? `${o.length} icons` : `${t.length} of ${o.length}`
       })
     ]
   });
 };
 export {
-  w as IconPicker
+  M as IconPicker
 };

package/dist/helpers/VersionInfo.js

@@ -23,7 +23,7 @@ var r = (i) => {
   const o = {
     ...i,
     lib: d,
-    libBuildNumber: 445,
+    libBuildNumber: 452,
     libCommit: n,
     libBuildDate: t
   };

package/dist/index.d.ts

@@ -541,6 +541,16 @@ export declare const ColorPicker: default_2.FC<ColorPickerProps>;
 export declare interface ColorPickerProps {
     value?: string;
     onChange?: (hex: string) => void;
+    /**
+     * Colours to offer for reuse, above the gradient. Pass the ones already in play —
+     * the palette a record set is actually using — so picking the same shade again is one
+     * click rather than a fresh trip through the gradient. Without it every visit to the
+     * picker mints a new near-miss: nine greys that differ by a digit, each its own entry
+     * in anything that later groups or filters by colour. Duplicates and anything that
+     * isn't a hex are dropped, and the list renders only when something survives.
+     */
+    swatches?: string[];
+    swatchesLabel?: string;
 }
 
 export declare interface ColProps {

package/dist/version.js

@@ -1,7 +1,7 @@
-var I = "3.1.4", B = 445, L = "64ab8ec", _ = "2026-10-02T09:11:25.286Z", a = "445";
+var I = "3.1.5", B = 452, L = "7f7e753", _ = "2026-10-02T12:17:26.091Z", r = "452";
 export {
   _ as LIB_BUILD_DATE,
-  a as LIB_BUILD_ID,
+  r as LIB_BUILD_ID,
   B as LIB_BUILD_NUMBER,
   L as LIB_COMMIT,
   I as LIB_VERSION

package/dist/version.json

@@ -1,6 +1,6 @@
 {
-  "version": "3.1.4",
-  "buildNumber": 445,
-  "commit": "64ab8ec",
-  "buildDate": "2026-10-02T09:11:25.286Z"
+  "version": "3.1.5",
+  "buildNumber": 452,
+  "commit": "7f7e753",
+  "buildDate": "2026-10-02T12:17:26.091Z"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memobit/libs",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "description": "React component library powering the Memobit apps — 100+ components, helpers and hooks. Icons ship as @memobit/icons and themes as @memobit/themes. TypeScript-first, ESM-only, React 19.",
   "keywords": [
     "react",