@memobit/libs 3.1.3 → 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
 };