react-var-ui - npm Package Compare versions

Comparing version 1.5.0 to 1.5.1

dist/react-var-ui.js

@@ -1,47 +0,45 @@
-import e, { createContext as Z, useContext as O, useMemo as P, useCallback as N, useRef as z, useEffect as L, useState as Y } from "react";
-import { get as R, set as $, clone as X } from "radash";
+import e, { createContext as Z, useContext as O, useMemo as P, useCallback as y, useRef as z, useEffect as L, useState as $ } from "react";
+import { get as R, set as x, clone as X } from "radash";
 import { usePointerDrag as J } from "react-use-pointer-drag";
-import { SketchPicker as ee } from "react-color";
+import ee from "@uiw/react-color-sketch";
 import te from "filesize";
 const B = Z(void 0);
-function S({ path: r, fallbackValue: o, onChange: i, errorPath: c, error: t }) {
-  const n = O(B), a = P(() => (n == null ? void 0 : n.getValue(r)) ?? o, [n, r, o]), v = N((u) => {
-    r && n && n.setValue(r, u), i == null || i(u);
-  }, [r, n, i]);
+function I({ path: r, fallbackValue: l, onChange: s, errorPath: c, error: t }) {
+  const n = O(B), a = P(() => (n == null ? void 0 : n.getValue(r)) ?? l, [n, r, l]), v = y((u) => {
+    r && n && n.setValue(r, u), s == null || s(u);
+  }, [r, n, s]);
   return t || (t = n == null ? void 0 : n.getError(c || r)), [a, v, t];
 }
-const ue = ({ values: r, errors: o, updateValues: i, onChange: c, onChangeValue: t, className: n, children: a }) => {
-  const v = N((l) => l ? R(r, l) : void 0, [r]), u = N((l, E) => {
-    t == null || t(l, E);
-    const g = $(X(r), l, E);
-    i == null || i(g), c == null || c(g);
-  }, [r, i, c, t]), m = N((l) => o && l ? R(r, l) : void 0, [o]), s = P(() => ({ values: r, getValue: v, setValue: u, getError: m }), [r, v, u]);
+const ue = ({ values: r, errors: l, updateValues: s, onChange: c, onChangeValue: t, className: n, children: a }) => {
+  const v = y((o) => o ? R(r, o) : void 0, [r]), u = y((o, E) => {
+    t == null || t(o, E);
+    const g = x(X(r), o, E);
+    s == null || s(g), c == null || c(g);
+  }, [r, s, c, t]), m = y((o) => l && o ? R(l, o) : void 0, [l]), i = P(() => ({ values: r, getValue: v, setValue: u, getError: m }), [r, v, u]);
   return e.createElement(
     B.Provider,
-    { value: s },
+    { value: i },
     e.createElement("div", { className: "react-var-ui " + (n ?? "") }, a)
   );
-}, I = ({ label: r, children: o, className: i, disabled: c, readOnly: t, column: n = !1, error: a }) => e.createElement(
+}, S = ({ label: r, children: l, className: s, disabled: c, readOnly: t, column: n = !1, error: a }) => e.createElement(
   "div",
-  { className: "react-var-ui-label " + (r ? "react-var-ui-label-has-label " : "react-var-ui-label-no-label ") + (c ? "react-var-ui-disabled " : "") + (t ? "react-var-ui-read-only " : "") + (n ? "react-var-ui-label-column " : "") + (i ?? "") },
+  { className: "react-var-ui-label " + (r ? "react-var-ui-label-has-label " : "react-var-ui-label-no-label ") + (c ? "react-var-ui-disabled " : "") + (t ? "react-var-ui-read-only " : "") + (n ? "react-var-ui-label-column " : "") + (s ?? "") },
   !!r && e.createElement("span", null, r),
-  o,
+  l,
   a ? e.createElement("div", { className: "react-var-ui-error" }, a) : null
-), x = Math.PI * 2;
-function T(r) {
-  return (x + r % x) % x;
+), T = Math.PI * 2;
+function Y(r) {
+  return (T + r % T) % T;
 }
-const ie = ({ label: r, path: o, value: i, onChange: c, disabled: t, readOnly: n, defaultValue: a = 0, className: v, error: u, errorPath: m }) => {
-  const s = z(null), [l, E, g] = S({
-    path: o,
-    fallbackValue: i,
+const se = ({ label: r, path: l, value: s, onChange: c, disabled: t, readOnly: n, defaultValue: a = 0, className: v, error: u, errorPath: m }) => {
+  const i = z(null), [o, E, g] = I({
+    path: l,
+    fallbackValue: s,
     onChange: c,
     error: u,
     errorPath: m
-  }), d = P(() => Math.round(T(l) * (180 / Math.PI)), [l]), { dragProps: f } = J({
-    onMove: ({ x: p, y: V }) => {
-      if (!s.current)
-        return;
-      const w = s.current.getBoundingClientRect(), C = w.left + w.width / 2, h = w.top + w.height / 2;
-      E(T(Math.atan2(V - h, p - C) + Math.PI / 2));
+  }), f = P(() => Math.round(Y(o) * (180 / Math.PI)), [o]), { dragProps: d } = J({
+    onMove: ({ x: p, y: h }) => {
+      const b = i.current.getBoundingClientRect(), C = b.left + b.width / 2, V = b.top + b.height / 2;
+      E(Y(Math.atan2(h - V, p - C) + Math.PI / 2));
     }
@@ -51,5 +49,5 @@ });
     var p;
-    (p = s.current) == null || p.addEventListener("wheel", (V) => V.preventDefault());
+    (p = i.current) == null || p.addEventListener("wheel", (h) => h.preventDefault());
   }, []), e.createElement(
-    I,
+    S,
     { label: r, disabled: t, readOnly: n, className: v, error: g },
@@ -59,3 +57,3 @@ e.createElement(
       { className: "react-var-ui-angle-value" },
-      d,
+      f,
       "°"
@@ -66,45 +64,45 @@ ),
       { className: "react-var-ui-angle" },
-      e.createElement("div", { className: "react-var-ui-angle-control react-var-ui-interactive", ref: s, style: { transform: `rotate(${d}deg)` }, onDoubleClick: () => typeof a < "u" && E(a), onWheel: (p) => {
-        E(T(l + 0.5 * (p.deltaY < 0 ? -1 : 1)));
-      }, title: "Angle", ...f() })
+      e.createElement("div", { className: "react-var-ui-angle-control react-var-ui-interactive", ref: i, style: { transform: `rotate(${f}deg)` }, onDoubleClick: () => typeof a < "u" && E(a), onWheel: (p) => {
+        E(Y(o + 0.5 * Math.sign(p.deltaY)));
+      }, title: "Angle", ...d() })
     )
   );
-}, se = ({ path: r, value: o, onChange: i, disabled: c, className: t, children: n, error: a, errorPath: v }) => {
-  const [u, m, s] = S({
+}, ie = ({ path: r, value: l, onChange: s, disabled: c, className: t, children: n, error: a, errorPath: v }) => {
+  const [u, m, i] = I({
     path: r,
-    fallbackValue: o,
-    onChange: i,
+    fallbackValue: l,
+    onChange: s,
     error: a,
     errorPath: v
   });
-  return e.createElement("div", { className: "react-var-ui-array " + (c ? "react-var-ui-disabled " : "") + (t ?? "") }, u == null ? void 0 : u.map((l, E, g) => e.createElement(B.Provider, { value: {
-    values: l,
-    getValue: (d) => d ? R(l, d) : void 0,
-    setValue: (d, f) => {
+  return e.createElement("div", { className: "react-var-ui-array " + (c ? "react-var-ui-disabled " : "") + (t ?? "") }, u == null ? void 0 : u.map((o, E, g) => e.createElement(B.Provider, { value: {
+    values: o,
+    getValue: (f) => f ? R(o, f) : void 0,
+    setValue: (f, d) => {
       const p = [...u];
-      p[E] = $(X(l), d, f), m(p);
+      p[E] = x(X(o), f, d), m(p);
     },
-    getError: (d) => {
-      const f = s == null ? void 0 : s[E];
-      return f && d ? R(f, d) : void 0;
+    getError: (f) => {
+      const d = i == null ? void 0 : i[E];
+      return d && f ? R(d, f) : void 0;
     }
-  }, key: E }, typeof n == "function" ? n(l, E, g) : n)));
-}, me = ({ label: r, onClick: o, buttonLabel: i, disabled: c, className: t }) => e.createElement(
-  I,
-  { label: r, disabled: c, className: t },
+  }, key: E }, typeof n == "function" ? n(o, E, g) : n)));
+}, me = ({ label: r, onClick: l, buttonLabel: s, disabled: c, className: t, error: n }) => e.createElement(
+  S,
+  { label: r, disabled: c, className: t, error: n },
   e.createElement(
     "span",
     { className: "react-var-ui-button" },
-    e.createElement("button", { onClick: () => o == null ? void 0 : o(), disabled: c }, i)
+    e.createElement("button", { onClick: () => l == null ? void 0 : l(), disabled: c }, s)
   )
-), ve = ({ label: r, path: o, value: i, onChange: c, alpha: t, disabled: n, readOnly: a, className: v, error: u, errorPath: m }) => {
-  const [s, l, E] = S({
-    path: o,
-    fallbackValue: i,
+), ve = ({ label: r, path: l, value: s, onChange: c, alpha: t, disabled: n, readOnly: a, className: v, error: u, errorPath: m }) => {
+  const [i, o, E] = I({
+    path: l,
+    fallbackValue: s,
     onChange: c,
     error: u,
     errorPath: m
-  }), [g, d] = Y(!1), f = N(() => d((V) => !V), [d]), p = N(() => d(!1), [d]);
+  }), [g, f] = $(!1);
   return e.createElement(
-    I,
+    S,
     { label: r, disabled: n, readOnly: a, className: v, error: E },
@@ -114,3 +112,3 @@ e.createElement(
       null,
-      e.createElement("span", { className: "react-var-ui-color-value" }, s),
+      e.createElement("span", { className: "react-var-ui-color-value" }, i),
       e.createElement(
@@ -121,4 +119,4 @@ "div",
           "div",
-          { className: "react-var-ui-color-swatch", onClick: f },
-          e.createElement("div", { className: "react-var-ui-color-color", title: "Color preview", style: { background: s } })
+          { className: "react-var-ui-color-swatch", onClick: () => f((d) => !d) },
+          e.createElement("div", { className: "react-var-ui-color-color", title: "Color preview", style: { background: i } })
         ),
@@ -128,10 +126,5 @@ g ? e.createElement(
           { className: "react-var-ui-color-popover" },
-          e.createElement("div", { className: "react-var-ui-color-cover", onClick: p }),
-          e.createElement(ee, { color: s, onChange: (V) => {
-            const k = V.hex === "transparent" ? "#000000" : V.hex;
-            if (t) {
-              let w = Math.round((V.rgb.a ?? 1) * 255).toString(16);
-              w.length === 1 && (w = "0" + w), l(k + w);
-            } else
-              l(k);
+          e.createElement("div", { className: "react-var-ui-color-cover", onClick: () => f(!1) }),
+          e.createElement(ee, { color: i, onChange: (d) => {
+            o(t ? d.hexa : d.hex);
           }, disableAlpha: !t })
@@ -142,6 +135,6 @@ ) : null
   );
-}, de = ({ label: r, path: o, value: i, disabled: c, readOnly: t, className: n, error: a, errorPath: v, unit: u }) => {
-  const [m, s, l] = S({
-    path: o,
-    fallbackValue: i,
+}, de = ({ label: r, path: l, value: s, disabled: c, readOnly: t, className: n, error: a, errorPath: v, unit: u }) => {
+  const [m, i, o] = I({
+    path: l,
+    fallbackValue: s,
     error: a,
@@ -151,4 +144,4 @@ errorPath: v
   return e.createElement(
-    I,
-    { label: r, disabled: c, readOnly: t, className: n, error: l },
+    S,
+    { label: r, disabled: c, readOnly: t, className: n, error: o },
     e.createElement(
@@ -166,24 +159,24 @@ "span",
   e.createElement("path", { d: "M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z" })
-), Ee = ({ label: r, path: o, value: i, onChange: c, disabled: t, readOnly: n, className: a, accept: v, displayMetadata: u = !0, error: m, errorPath: s }) => {
-  const [l, E, g] = S({
-    path: o,
-    fallbackValue: i,
+), Ee = ({ label: r, path: l, value: s, onChange: c, disabled: t, readOnly: n, className: a, accept: v, displayMetadata: u = !0, error: m, errorPath: i }) => {
+  const [o, E, g] = I({
+    path: l,
+    fallbackValue: s,
     onChange: c,
     error: m,
-    errorPath: s
-  }), d = N((f) => {
-    var V;
-    if (!((V = f.target.files) != null && V.length))
+    errorPath: i
+  }), f = y((d) => {
+    var h;
+    if (!((h = d.target.files) != null && h.length))
       return;
-    const p = f.target.files[0];
+    const p = d.target.files[0];
     E(p);
   }, [E]);
   return e.createElement(
-    I,
+    S,
     { label: r, disabled: t, readOnly: n, className: a, error: g },
-    e.createElement("span", { className: "react-var-ui-file-value" }, l == null ? void 0 : l.name),
+    e.createElement("span", { className: "react-var-ui-file-value" }, o == null ? void 0 : o.name),
     e.createElement(
       "div",
       { className: "react-var-ui-file react-var-ui-interactive" },
-      u && !!l && e.createElement(
+      u && !!o && e.createElement(
         "div",
@@ -195,3 +188,3 @@ { className: "react-var-ui-file-metadata" },
           "Size: ",
-          te(l.size)
+          te(o.size)
         ),
@@ -202,26 +195,26 @@ e.createElement(
           "Type: ",
-          l.type || "unknown"
+          o.type || "unknown"
         )
       ),
       e.createElement(j, null),
-      e.createElement("input", { type: "file", accept: v, onChange: d, title: "File upload" })
+      e.createElement("input", { type: "file", accept: v, onChange: f, title: "File upload" })
     )
   );
-}, fe = ({ label: r, path: o, value: i, onChange: c, disabled: t, readOnly: n, className: a, error: v, errorPath: u }) => {
-  const [m, s, l] = S({
-    path: o,
-    fallbackValue: i,
+}, fe = ({ label: r, path: l, value: s, onChange: c, disabled: t, readOnly: n, className: a, error: v, errorPath: u }) => {
+  const [m, i, o] = I({
+    path: l,
+    fallbackValue: s,
     onChange: c,
     error: v,
     errorPath: u
-  }), E = N((g) => {
+  }), E = y((g) => {
     var p;
     if (!((p = g.target.files) != null && p.length))
       return;
-    const d = g.target.files[0], f = URL.createObjectURL(d);
-    s(f);
-  }, [s]);
+    const f = g.target.files[0], d = URL.createObjectURL(f);
+    i(d);
+  }, [i]);
   return e.createElement(
-    I,
-    { label: r, disabled: t, readOnly: n, className: a, error: l, column: !0 },
+    S,
+    { label: r, disabled: t, readOnly: n, className: a, error: o, column: !0 },
     e.createElement(
@@ -237,32 +230,32 @@ "div",
   );
-}, ge = ({ label: r, path: o, value: i, onChange: c, disabled: t, readOnly: n, className: a, acceptImage: v, acceptAudio: u, acceptVideo: m, error: s, errorPath: l }) => {
-  const [E, g, d] = S({
-    path: o,
-    fallbackValue: i,
+}, ge = ({ label: r, path: l, value: s, onChange: c, disabled: t, readOnly: n, className: a, acceptImage: v, acceptAudio: u, acceptVideo: m, error: i, errorPath: o }) => {
+  const [E, g, f] = I({
+    path: l,
+    fallbackValue: s,
     onChange: c,
-    error: s,
-    errorPath: l
-  }), [f, p] = Y(), V = P(() => {
-    let h = "";
-    return v && (h += "image/*,"), u && (h += "audio/*,"), m && (h += "video/*,"), h.endsWith(",") && (h = h.slice(0, -1)), h || (h = "image/*,audio/*,video/*"), h;
-  }, [v, u, m]), k = N((h) => {
+    error: i,
+    errorPath: o
+  }), [d, p] = $(), h = P(() => {
+    let V = "";
+    return v && (V += "image/*,"), u && (V += "audio/*,"), m && (V += "video/*,"), V.endsWith(",") && (V = V.slice(0, -1)), V || (V = "image/*,audio/*,video/*"), V;
+  }, [v, u, m]), w = y((V) => {
     var M;
-    if (!((M = h.target.files) != null && M.length))
+    if (!((M = V.target.files) != null && M.length))
       return;
-    const b = h.target.files[0], F = URL.createObjectURL(b);
+    const N = V.target.files[0], F = URL.createObjectURL(N);
     g(F);
-  }, [g, p]), w = N(async (h) => {
+  }, [g, p]), b = y(async (V) => {
     var F, M, D;
-    if (!h) {
+    if (!V) {
       p(void 0);
       return;
     }
-    const b = await fetch(h);
-    p((D = (M = (F = b == null ? void 0 : b.headers) == null ? void 0 : F.get("Content-Type")) == null ? void 0 : M.split("/")) == null ? void 0 : D[0]);
+    const N = await fetch(V);
+    p((D = (M = (F = N == null ? void 0 : N.headers) == null ? void 0 : F.get("Content-Type")) == null ? void 0 : M.split("/")) == null ? void 0 : D[0]);
   }, [p]);
   L(() => {
-    w(E);
+    b(E);
   }, [E]);
   let C = e.createElement("div", { className: "react-var-ui-media-metadata" }, E ? "Unsupported file type." : "");
-  switch (f) {
+  switch (d) {
     case "image":
@@ -281,4 +274,4 @@ C = e.createElement("div", { className: "react-var-ui-media-background", style: {
   return e.createElement(
-    I,
-    { label: r, disabled: t, readOnly: n, className: a, error: d, column: !0 },
+    S,
+    { label: r, disabled: t, readOnly: n, className: a, error: f, column: !0 },
     e.createElement(
@@ -289,11 +282,11 @@ "div",
       e.createElement(j, null),
-      e.createElement("input", { type: "file", accept: V, onChange: k, title: "Media upload" })
+      e.createElement("input", { type: "file", accept: h, onChange: w, title: "Media upload" })
     )
   );
 };
-function q(r, o, i, c, t) {
+function q(r, l, s, c, t) {
   var a;
-  isFinite(r) || (r = o ?? 0);
+  isFinite(r) || (r = l ?? 0);
   let n = 2;
-  return typeof c == "number" && (n = ((a = c.toString().split(".")[1]) == null ? void 0 : a.length) || 0, n > 20 && (n = 20), r = Math.round(r / c) * c), typeof o == "number" && (r = Math.max(o, r)), typeof i == "number" && (r = Math.min(i, r)), t ? Math.round(r) : parseFloat(r.toFixed(n));
+  return typeof c == "number" && (n = ((a = c.toString().split(".")[1]) == null ? void 0 : a.length) || 0, r = Math.round(r / c) * c), typeof l == "number" && (r = Math.max(l, r)), typeof s == "number" && (r = Math.min(s, r)), t ? Math.round(r) : parseFloat(r.toFixed(n));
 }
@@ -308,27 +301,27 @@ const W = () => e.createElement(
   e.createElement("path", { fillRule: "evenodd", d: "M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z" })
-), G = ({ value: r, onChange: o, min: i, max: c, step: t, className: n, disabled: a, readOnly: v, round: u, unit: m }) => {
-  const s = z(null), l = N((d) => {
-    s.current && (s.current.value = String(u(d))), o(d);
-  }, [o, u]);
+), G = ({ value: r, onChange: l, min: s, max: c, step: t, className: n, disabled: a, readOnly: v, round: u, unit: m }) => {
+  const i = z(null), o = y((f) => {
+    i.current && (i.current.value = String(u(f))), l(f);
+  }, [l, u]);
   L(() => {
-    s.current && (s.current.value = String(r));
+    i.current && (i.current.value = String(r));
   }, [r]);
   const E = () => {
-    const d = s.current;
-    d && l(parseFloat(d.value));
+    const f = i.current;
+    f && o(parseFloat(f.value));
   }, g = a || v ? {} : {
     onBlur: E,
-    onKeyDown: (d) => {
-      const f = s.current;
-      switch (d.key) {
+    onKeyDown: (f) => {
+      const d = i.current;
+      switch (f.key) {
         case "ArrowUp":
-          d.preventDefault(), l(parseFloat(f.value) + t);
+          f.preventDefault(), o(parseFloat(d.value) + t);
           break;
         case "ArrowDown":
-          d.preventDefault(), l(parseFloat(f.value) - t);
+          f.preventDefault(), o(parseFloat(d.value) - t);
           break;
       }
     },
-    onKeyUp: (d) => {
-      d.key === "Enter" && (d.preventDefault(), E());
+    onKeyUp: (f) => {
+      f.key === "Enter" && (f.preventDefault(), E());
     }
@@ -339,22 +332,22 @@ };
     { className: n },
-    e.createElement("input", { type: "number", min: i, max: c, step: t, disabled: a, readOnly: v, ref: s, ...g }),
+    e.createElement("input", { type: "number", min: s, max: c, step: t, disabled: a, readOnly: v, ref: i, ...g }),
     m ? e.createElement("span", null, m) : null
   );
-}, pe = ({ label: r, path: o, value: i, onChange: c, min: t, max: n, step: a = 1, integer: v, showButtons: u, disabled: m, readOnly: s, className: l, error: E, errorPath: g, unit: d }) => {
-  const [f, p, V] = S({
-    path: o,
-    fallbackValue: i,
+}, pe = ({ label: r, path: l, value: s, onChange: c, min: t, max: n, step: a = 1, integer: v, showButtons: u, disabled: m, readOnly: i, className: o, error: E, errorPath: g, unit: f }) => {
+  const [d, p, h] = I({
+    path: l,
+    fallbackValue: s,
     onChange: c,
     error: E,
     errorPath: g
-  }), k = N((h) => q(h, t, n, a, !!v), [t, n, a, v]), w = P(() => k(f), [f, k]), C = N((h) => {
-    h = k(h), p(h);
-  }, [k, p]);
+  }), w = y((V) => q(V, t, n, a, !!v), [t, n, a, v]), b = P(() => w(d), [d, w]), C = y((V) => {
+    V = w(V), p(V);
+  }, [w, p]);
   return e.createElement(
-    I,
-    { label: r, disabled: m, readOnly: s, className: l, error: V },
+    S,
+    { label: r, disabled: m, readOnly: i, className: o, error: h },
     e.createElement(
       "div",
       { className: "react-var-ui-number" },
-      e.createElement(G, { className: "react-var-ui-number-input", round: k, min: t, max: n, step: a, value: w, disabled: m, readOnly: s, onChange: C, unit: d }),
+      e.createElement(G, { className: "react-var-ui-number-input", round: w, min: t, max: n, step: a, value: b, disabled: m, readOnly: i, onChange: C, unit: f }),
       u && e.createElement(
@@ -365,3 +358,3 @@ e.Fragment,
           "button",
-          { title: "Increase", onClick: () => C(f + a), disabled: m || s },
+          { title: "Increase", onClick: () => C(d + a), disabled: m || i },
           e.createElement(H, null)
@@ -371,3 +364,3 @@ ),
           "button",
-          { title: "Decrease", onClick: () => C(f - a), disabled: m || s },
+          { title: "Decrease", onClick: () => C(d - a), disabled: m || i },
           e.createElement(W, null)
@@ -378,7 +371,7 @@ )
   );
-}, Ve = ({ path: r, value: o, onChange: i, children: c, error: t, errorPath: n }) => {
-  const [a, v, u] = S({
+}, Ve = ({ path: r, value: l, onChange: s, children: c, error: t, errorPath: n }) => {
+  const [a, v, u] = I({
     path: r,
-    fallbackValue: o,
-    onChange: i,
+    fallbackValue: l,
+    onChange: s,
     error: t,
@@ -390,18 +383,18 @@ errorPath: n
     getValue: (m) => m ? R(a, m) : void 0,
-    setValue: (m, s) => {
-      const l = $(X(a), m, s);
-      v(l);
+    setValue: (m, i) => {
+      const o = x(X(a), m, i);
+      v(o);
     },
     getError: (m) => u && m ? R(u, m) : void 0
   } }, c);
-}, he = ({ label: r, path: o, value: i, onChange: c, options: t, disabled: n, readOnly: a, className: v, error: u, errorPath: m }) => {
-  const [s, l, E] = S({
-    path: o,
-    fallbackValue: i,
+}, he = ({ label: r, path: l, value: s, onChange: c, options: t, disabled: n, readOnly: a, className: v, error: u, errorPath: m }) => {
+  const [i, o, E] = I({
+    path: l,
+    fallbackValue: s,
     onChange: c,
     error: u,
     errorPath: m
-  }), g = P(() => JSON.stringify(s), [s]), d = !!t.find((f) => JSON.stringify(f.value ?? f.key) === g);
+  }), g = P(() => JSON.stringify(i), [i]), f = !!t.find((d) => JSON.stringify(d.value ?? d.key) === g);
   return e.createElement(
-    I,
+    S,
     { label: r, disabled: n, readOnly: a, className: v, error: E },
@@ -413,7 +406,7 @@ e.createElement(
         "select",
-        { onChange: (f) => l(JSON.parse(f.target.value)), value: g, title: "Select options", disabled: n || a },
-        !d && e.createElement("option", { value: g }, String(s)),
-        t.map((f) => {
-          const p = JSON.stringify(f.value ?? f.key);
-          return e.createElement("option", { key: f.key, value: p }, f.label);
+        { onChange: (d) => o(JSON.parse(d.target.value)), value: g, title: "Select options", disabled: n || a },
+        !f && e.createElement("option", { value: g }, String(i)),
+        t.map((d) => {
+          const p = JSON.stringify(d.value ?? d.key);
+          return e.createElement("option", { key: d.key, value: p }, d.label);
         })
@@ -423,25 +416,23 @@ )
   );
-}, ke = ({ label: r, path: o, value: i, onChange: c, min: t, max: n, step: a, integer: v, defaultValue: u, showInput: m, showButtons: s, disabled: l, readOnly: E, className: g, error: d, errorPath: f, unit: p }) => {
-  const V = z(null), [k, w, C] = S({
-    path: o,
-    fallbackValue: i,
+}, we = ({ label: r, path: l, value: s, onChange: c, min: t, max: n, step: a, integer: v, defaultValue: u, showInput: m, showButtons: i, disabled: o, readOnly: E, className: g, error: f, errorPath: d, unit: p }) => {
+  const h = z(null), [w, b, C] = I({
+    path: l,
+    fallbackValue: s,
     onChange: c,
-    error: d,
-    errorPath: f
-  }), h = N((y) => q(y, t, n, a, !!v), [t, n, a, v]), b = P(() => h(k), [k, h]), F = P(() => (b - t) / (n - t) * 100, [b, t, n]), M = N((y) => {
-    w(h(y));
-  }, [h, w]), D = N((y) => {
-    if (!V.current)
-      return;
-    const K = V.current.getBoundingClientRect(), Q = (y - K.left) / K.width;
+    error: f,
+    errorPath: d
+  }), V = y((k) => q(k, t, n, a, !!v), [t, n, a, v]), N = P(() => V(w), [w, V]), F = P(() => (N - t) / (n - t) * 100, [N, t, n]), M = y((k) => {
+    b(V(k));
+  }, [V, b]), D = y((k) => {
+    const K = h.current.getBoundingClientRect(), Q = (k - K.left) / K.width;
     M(t + (n - t) * Q);
   }, [M, v, t, n, a]), { dragProps: A } = J({
-    onMove: ({ x: y }) => D(y)
+    onMove: ({ x: k }) => D(k)
   });
   return L(() => {
-    var y;
-    (y = V.current) == null || y.addEventListener("wheel", (U) => U.preventDefault());
+    var k;
+    (k = h.current) == null || k.addEventListener("wheel", (U) => U.preventDefault());
   }, []), e.createElement(
-    I,
-    { label: r, disabled: l, readOnly: E, className: g, error: C },
+    S,
+    { label: r, disabled: o, readOnly: E, className: g, error: C },
     e.createElement(
@@ -452,12 +443,12 @@ "div",
         "div",
-        { className: "react-var-ui-slider-track react-var-ui-interactive", ref: V, onClick: (y) => D(y.clientX), onDoubleClick: () => typeof u < "u" && M(u), onWheel: (y) => M(k - a * Math.sign(y.deltaY)), title: "Slider", ...A() },
+        { className: "react-var-ui-slider-track react-var-ui-interactive", ref: h, onClick: (k) => D(k.clientX), onDoubleClick: () => typeof u < "u" && M(u), onWheel: (k) => M(w - a * Math.sign(k.deltaY)), title: "Slider", ...A() },
         e.createElement("div", { className: "react-var-ui-slider-content", style: { width: F + "%" } })
       ),
-      m ? e.createElement(G, { className: "react-var-ui-slider-input", round: h, min: t, max: n, step: a, disabled: l, readOnly: E, onChange: M, value: k, unit: p }) : e.createElement(
+      m ? e.createElement(G, { className: "react-var-ui-slider-input", round: V, min: t, max: n, step: a, disabled: o, readOnly: E, onChange: M, value: w, unit: p }) : e.createElement(
         "span",
         null,
-        b.toString(),
+        N.toString(),
         p
       ),
-      s && e.createElement(
+      i && e.createElement(
         e.Fragment,
@@ -467,3 +458,3 @@ null,
           "button",
-          { title: "Increase", onClick: () => M(k + a), disabled: l || E },
+          { title: "Increase", onClick: () => M(w + a), disabled: o || E },
           e.createElement(H, null)
@@ -473,3 +464,3 @@ ),
           "button",
-          { title: "Decrease", onClick: () => M(k - a), disabled: l || E },
+          { title: "Decrease", onClick: () => M(w - a), disabled: o || E },
           e.createElement(W, null)
@@ -480,22 +471,22 @@ )
   );
-}, we = ({ label: r, path: o, value: i, onChange: c, maxLength: t, multiline: n, autoexpand: a, disabled: v, readOnly: u, className: m, error: s, errorPath: l }) => {
-  const [E, g, d] = S({
-    path: o,
-    fallbackValue: i,
+}, Ne = ({ label: r, path: l, value: s, onChange: c, maxLength: t, multiline: n, autoexpand: a, disabled: v, readOnly: u, className: m, error: i, errorPath: o }) => {
+  const [E, g, f] = I({
+    path: l,
+    fallbackValue: s,
     onChange: c,
-    error: s,
-    errorPath: l
-  }), f = (V) => {
-    const k = V.currentTarget;
-    k.style.height = "0", k.style.height = `${k.scrollHeight}px`;
+    error: i,
+    errorPath: o
+  }), d = (h) => {
+    const w = h.currentTarget;
+    w.style.height = "0", w.style.height = `${w.scrollHeight}px`;
   }, p = P(() => a ? { overflow: "hidden", resize: "none" } : void 0, [a]);
-  return e.createElement(I, { label: r, disabled: v, readOnly: u, className: m, column: n, error: d }, n ? e.createElement("textarea", { className: "react-var-ui-string-multiline", value: E, onChange: (V) => g(V.target.value), onInput: a ? f : void 0, style: p, disabled: v, readOnly: u }) : e.createElement(
+  return e.createElement(S, { label: r, disabled: v, readOnly: u, className: m, column: n, error: f }, n ? e.createElement("textarea", { className: "react-var-ui-string-multiline", value: E, onChange: (h) => g(h.target.value), onInput: a ? d : void 0, style: p, disabled: v, readOnly: u }) : e.createElement(
     "span",
     { className: "react-var-ui-string" },
-    e.createElement("input", { type: "text", maxLength: t, value: E, onChange: (V) => g(V.target.value), disabled: v, readOnly: u })
+    e.createElement("input", { type: "text", maxLength: t, value: E, onChange: (h) => g(h.target.value), disabled: v, readOnly: u })
   ));
-}, Ne = ({ label: r, path: o, value: i, onChange: c, disabled: t, readOnly: n, className: a, error: v, errorPath: u }) => {
-  const [m, s, l] = S({
-    path: o,
-    fallbackValue: i,
+}, ke = ({ label: r, path: l, value: s, onChange: c, disabled: t, readOnly: n, className: a, error: v, errorPath: u }) => {
+  const [m, i, o] = I({
+    path: l,
+    fallbackValue: s,
     onChange: c,
@@ -506,4 +497,4 @@ error: v,
   return e.createElement(
-    I,
-    { label: r, disabled: t, readOnly: n, className: a, error: l },
+    S,
+    { label: r, disabled: t, readOnly: n, className: a, error: o },
     e.createElement(
@@ -515,3 +506,3 @@ "span",
         { className: "react-var-ui-toggle", title: "Toggle" },
-        e.createElement("input", { type: "checkbox", checked: m, onChange: (E) => s(E.target.checked), disabled: t, readOnly: n }),
+        e.createElement("input", { type: "checkbox", checked: m, onChange: (E) => i(E.target.checked), disabled: t, readOnly: n }),
         e.createElement("span", { className: "react-var-ui-toggle-helper" })
@@ -522,3 +513,3 @@ )
 };
-function _(r, o, i, c) {
+function _(r, l, s, c) {
   var n;
@@ -530,7 +521,7 @@ const t = [0, 0];
     const v = ((n = c[a].toString().split(".")[1]) == null ? void 0 : n.length) || 0;
-    t[a] = Math.round(r[a] / c[a]) * c[a], t[a] = Math.max(o[a], t[a]), t[a] = Math.min(i[a], t[a]), t[a] = parseFloat(t[a].toFixed(v));
+    t[a] = Math.round(r[a] / c[a]) * c[a], t[a] = Math.max(l[a], t[a]), t[a] = Math.min(s[a], t[a]), t[a] = parseFloat(t[a].toFixed(v));
   }
   return t;
 }
-function re(r, o, i) {
+function re(r, l, s) {
   if (!r)
@@ -540,27 +531,27 @@ return [50, 50];
   for (let t = 0; t < r.length; t++)
-    c[t] = (r[t] - o[t]) / (i[t] - o[t]) * 100;
+    c[t] = (r[t] - l[t]) / (s[t] - l[t]) * 100;
   return c;
 }
-const be = ({ label: r, path: o, value: i, onChange: c, disabled: t, readOnly: n, className: a, defaultValue: v = [0, 0], min: u = [-1, -1], max: m = [1, 1], step: s = [0.01, 0.01], error: l, errorPath: E }) => {
-  const g = z(null), [d, f, p] = S({
-    path: o,
-    fallbackValue: i,
+const ye = ({ label: r, path: l, value: s, onChange: c, disabled: t, readOnly: n, className: a, defaultValue: v = [0, 0], min: u = [-1, -1], max: m = [1, 1], step: i = [0.01, 0.01], error: o, errorPath: E }) => {
+  const g = z(null), [f, d, p] = I({
+    path: l,
+    fallbackValue: s,
     onChange: c,
-    error: l,
+    error: o,
     errorPath: E
-  }), V = P(() => _(d, u, m, s), [d, u, m, s]), k = P(() => re(V, u, m), [V, u, m]), w = N((b, F) => {
+  }), h = P(() => _(f, u, m, i), [f, u, m, i]), w = P(() => re(h, u, m), [h, u, m]), b = y((N, F) => {
     if (!g.current)
       return;
-    const D = g.current.getBoundingClientRect(), A = (b - D.left) / D.width, y = (F - D.top) / D.height, U = _([
+    const D = g.current.getBoundingClientRect(), A = (N - D.left) / D.width, k = (F - D.top) / D.height, U = _([
       u[0] + (m[0] - u[0]) * A,
-      u[1] + (m[1] - u[1]) * y
-    ], u, m, s);
-    f(U);
-  }, [f, u, m, s]), { dragProps: C } = J({
-    onMove: ({ x: b, y: F }) => w(b, F)
-  }), h = N(() => {
-    typeof v < "u" && f(v);
-  }, [v, f]);
+      u[1] + (m[1] - u[1]) * k
+    ], u, m, i);
+    d(U);
+  }, [d, u, m, i]), { dragProps: C } = J({
+    onMove: ({ x: N, y: F }) => b(N, F)
+  }), V = y(() => {
+    typeof v < "u" && d(v);
+  }, [v, d]);
   return e.createElement(
-    I,
+    S,
     { label: r, disabled: t, readOnly: n, className: a, error: p },
@@ -570,5 +561,5 @@ e.createElement(
       { className: "react-var-ui-xy-value" },
-      V[0],
+      h[0],
       ", ",
-      V[1]
+      h[1]
     ),
@@ -580,12 +571,12 @@ e.createElement(
         "div",
-        { className: "react-var-ui-xy-space", ref: g, onClick: (b) => w(b.clientX, b.clientY), onDoubleClick: h, ...C() },
-        e.createElement("div", { className: "react-var-ui-xy-control", style: { top: k[1] + "%", left: k[0] + "%" } })
+        { className: "react-var-ui-xy-space", ref: g, onClick: (N) => b(N.clientX, N.clientY), onDoubleClick: V, ...C() },
+        e.createElement("div", { className: "react-var-ui-xy-control", style: { top: w[1] + "%", left: w[0] + "%" } })
       )
     )
   );
-}, ye = ({ label: r, className: o, children: i, collapsible: c }) => {
-  const [t, n] = Y(!1);
+}, be = ({ label: r, className: l, children: s, collapsible: c }) => {
+  const [t, n] = $(!1);
   return e.createElement(
     "div",
-    { className: "react-var-ui-category " + (o ?? "") },
+    { className: "react-var-ui-category " + (l ?? "") },
     e.createElement(
@@ -597,11 +588,11 @@ "div",
     ),
-    (!c || !t) && e.createElement("div", null, i)
+    (!c || !t) && e.createElement("div", null, s)
   );
 };
 export {
-  ie as VarAngle,
-  se as VarArray,
-  I as VarBase,
+  se as VarAngle,
+  ie as VarArray,
+  S as VarBase,
   me as VarButton,
-  ye as VarCategory,
+  be as VarCategory,
   ve as VarColor,
@@ -615,8 +606,8 @@ de as VarDisplay,
   he as VarSelect,
-  ke as VarSlider,
-  we as VarString,
-  Ne as VarToggle,
+  we as VarSlider,
+  Ne as VarString,
+  ke as VarToggle,
   ue as VarUI,
-  be as VarXY,
-  S as useVarUIValue
+  ye as VarXY,
+  I as useVarUIValue
 };

dist/VarButton.d.ts

@@ -20,2 +20,2 @@ import { ReactNode } from 'react';
  */
-export declare const VarButton: ({ label, onClick, buttonLabel, disabled, className, }: IVarButtonProps) => JSX.Element;
+export declare const VarButton: ({ label, onClick, buttonLabel, disabled, className, error, }: IVarButtonProps) => JSX.Element;

package.json

 {
-  "version": "1.5.0",
+  "version": "1.5.1",
   "license": "BSD-3-Clause-Clear",
@@ -81,3 +81,2 @@ "exports": {
     "@types/react": "^18.2.21",
-    "@types/react-color": "^3.0.4",
     "@types/react-dom": "^18.2.7",
@@ -100,7 +99,7 @@ "@types/testing-library__jest-dom": "^5.14.1",
   "dependencies": {
+    "@uiw/react-color-sketch": "^2.0.5",
     "filesize": "^8.0.6",
     "radash": "^11.0.0",
-    "react-color": "^2.0.0",
     "react-use-pointer-drag": "^0.1.1"
   }
 }

README.md

@@ -298,3 +298,3 @@ <h1 align="center">
 
-Uses [react-color](https://casesandberg.github.io/react-color/) under the hood.
+Uses [@uiw/react-color-sketch](https://uiwjs.github.io/react-color/#/sketch) to render the color picker.
 
@@ -301,0 +301,0 @@ _T = string_ (#XXXXXX)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

28

decreased by-3.45%

Worsened metrics

Total package byte prevSize

72381

decreased by-0.43%

Lines of code

1072

decreased by-0.83%

Dependency changes

• + Added@uiw/react-color-sketch@^2.0.5

• + Added@babel/runtime@7.26.0(transitive)

• + Added@uiw/color-convert@2.3.2(transitive)

• + Added@uiw/react-color-alpha@2.3.2(transitive)

• + Added@uiw/react-color-editable-input@2.3.2(transitive)

• + Added@uiw/react-color-editable-input-rgba@2.3.2(transitive)

• + Added@uiw/react-color-hue@2.3.2(transitive)

• + Added@uiw/react-color-saturation@2.3.2(transitive)

• + Added@uiw/react-color-sketch@2.3.2(transitive)

• + Added@uiw/react-color-swatch@2.3.2(transitive)

• + Added@uiw/react-drag-event-interactive@2.3.2(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• - Removedreact-color@^2.0.0

• - Removed@icons/material@0.2.4(transitive)

• - Removedlodash@4.17.21(transitive)

• - Removedlodash-es@4.17.21(transitive)

• - Removedmaterial-colors@1.2.6(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-color@2.19.3(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedreactcss@1.2.3(transitive)

• - Removedtinycolor2@1.6.0(transitive)