react-var-ui - npm Package Compare versions

Comparing version 1.5.1 to 1.5.2

dist/react-var-ui.js

@@ -1,57 +0,57 @@
-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 ee from "@uiw/react-color-sketch";
-import te from "filesize";
-const B = Z(void 0);
-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];
+import e, { createContext as ae, useContext as ne, useMemo as S, useCallback as N, useRef as L, useEffect as B, useState as x } from "react";
+import { get as U, set as J, clone as j } from "radash";
+import { usePointerDrag as W } from "react-use-pointer-drag";
+import ce from "@uiw/react-color-sketch";
+import le from "filesize";
+const A = ae(void 0);
+function I({ path: r, fallbackValue: o, onChange: i, errorPath: c, error: t }) {
+  const n = ne(A), a = S(() => (n == null ? void 0 : n.getValue(r)) ?? o, [n, r, o]), E = N((s) => {
+    typeof r == "string" && n && n.setValue(r, s), i == null || i(s);
+  }, [r, n, i]);
+  return t || (t = n == null ? void 0 : n.getError(c || r)), [a, E, t];
 }
-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]);
+const de = ({ values: r, errors: o, updateValues: i, onChange: c, onChangeValue: t, className: n, children: a }) => {
+  const E = N((u) => typeof u == "string" ? U(r, u) : void 0, [r]), s = N((u, f) => {
+    t == null || t(u, f);
+    const g = u === "" ? f : J(j(r), u, f);
+    i == null || i(g), c == null || c(g);
+  }, [r, i, c, t]), m = N((u) => o && typeof u == "string" ? U(o, u) : void 0, [o]), l = S(() => ({ values: r, getValue: E, setValue: s, getError: m }), [r, E, s]);
   return e.createElement(
-    B.Provider,
-    { value: i },
+    A.Provider,
+    { value: l },
     e.createElement("div", { className: "react-var-ui " + (n ?? "") }, a)
   );
-}, S = ({ label: r, children: l, className: s, disabled: c, readOnly: t, column: n = !1, error: a }) => e.createElement(
+}, M = ({ label: r, children: o, className: i, 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 " : "") + (s ?? "") },
+  { 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 ?? "") },
   !!r && e.createElement("span", null, r),
-  l,
+  o,
   a ? e.createElement("div", { className: "react-var-ui-error" }, a) : null
-), T = Math.PI * 2;
-function Y(r) {
-  return (T + r % T) % T;
+), Y = Math.PI * 2;
+function $(r) {
+  return (Y + r % Y) % Y;
 }
-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,
+const Ee = ({ label: r, path: o, value: i, onChange: c, disabled: t, readOnly: n, defaultValue: a = 0, className: E, error: s, errorPath: m }) => {
+  const l = L(null), [u, f, g] = I({
+    path: o,
+    fallbackValue: i,
     onChange: c,
-    error: u,
+    error: s,
     errorPath: m
-  }), 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));
+  }), d = S(() => Math.round($(u) * (180 / Math.PI)), [u]), { dragProps: v } = W({
+    onMove: ({ x: V, y: h }) => {
+      const C = l.current.getBoundingClientRect(), b = C.left + C.width / 2, p = C.top + C.height / 2;
+      f($(Math.atan2(h - p, V - b) + Math.PI / 2));
     }
   });
-  return L(() => {
-    var p;
-    (p = i.current) == null || p.addEventListener("wheel", (h) => h.preventDefault());
+  return B(() => {
+    var V;
+    (V = l.current) == null || V.addEventListener("wheel", (h) => h.preventDefault());
   }, []), e.createElement(
-    S,
-    { label: r, disabled: t, readOnly: n, className: v, error: g },
+    M,
+    { label: r, disabled: t, readOnly: n, className: E, error: g },
     e.createElement(
       "span",
       { className: "react-var-ui-angle-value" },
-      f,
+      d,
       "°"
@@ -62,29 +62,29 @@ ),
       { className: "react-var-ui-angle" },
-      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() })
+      e.createElement("div", { className: "react-var-ui-angle-control react-var-ui-interactive", ref: l, style: { transform: `rotate(${d}deg)` }, onDoubleClick: () => typeof a < "u" && f(a), onWheel: (V) => {
+        f($(u + 0.5 * Math.sign(V.deltaY)));
+      }, title: "Angle", ...v() })
     )
   );
-}, ie = ({ path: r, value: l, onChange: s, disabled: c, className: t, children: n, error: a, errorPath: v }) => {
-  const [u, m, i] = I({
+}, fe = ({ path: r, value: o, onChange: i, disabled: c, className: t, children: n, error: a, errorPath: E }) => {
+  const [s, m, l] = I({
     path: r,
-    fallbackValue: l,
-    onChange: s,
+    fallbackValue: o,
+    onChange: i,
     error: a,
-    errorPath: v
+    errorPath: E
   });
-  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(X(o), f, d), m(p);
+  return e.createElement("div", { className: "react-var-ui-array " + (c ? "react-var-ui-disabled " : "") + (t ?? "") }, s == null ? void 0 : s.map((u, f, g) => e.createElement(A.Provider, { value: {
+    values: u,
+    getValue: (d) => typeof d == "string" ? U(u, d) : void 0,
+    setValue: (d, v) => {
+      const V = [...s];
+      V[f] = d === "" ? v : J(j(u), d, v), m(V);
     },
-    getError: (f) => {
-      const d = i == null ? void 0 : i[E];
-      return d && f ? R(d, f) : void 0;
+    getError: (d) => {
+      const v = l == null ? void 0 : l[f];
+      return v && d ? U(v, d) : void 0;
     }
-  }, 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,
+  }, key: f }, typeof n == "function" ? n(u, f, g) : n)));
+}, ge = ({ label: r, onClick: o, buttonLabel: i, disabled: c, className: t, error: n }) => e.createElement(
+  M,
   { label: r, disabled: c, className: t, error: n },
@@ -94,19 +94,19 @@ e.createElement(
     { className: "react-var-ui-button" },
-    e.createElement("button", { onClick: () => l == null ? void 0 : l(), disabled: c }, s)
+    e.createElement("button", { onClick: () => o == null ? void 0 : o(), disabled: c }, 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,
+), pe = ({ label: r, path: o, value: i, onChange: c, alpha: t, disabled: n, readOnly: a, className: E, error: s, errorPath: m }) => {
+  const [l, u, f] = I({
+    path: o,
+    fallbackValue: i,
     onChange: c,
-    error: u,
+    error: s,
     errorPath: m
-  }), [g, f] = $(!1);
+  }), [g, d] = x(!1);
   return e.createElement(
-    S,
-    { label: r, disabled: n, readOnly: a, className: v, error: E },
+    M,
+    { label: r, disabled: n, readOnly: a, className: E, error: f },
     e.createElement(
       "span",
       null,
-      e.createElement("span", { className: "react-var-ui-color-value" }, i),
+      e.createElement("span", { className: "react-var-ui-color-value" }, l),
       e.createElement(
@@ -117,4 +117,4 @@ "div",
           "div",
-          { 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 } })
+          { className: "react-var-ui-color-swatch", onClick: () => d((v) => !v) },
+          e.createElement("div", { className: "react-var-ui-color-color", title: "Color preview", style: { background: l } })
         ),
@@ -124,5 +124,5 @@ g ? e.createElement(
           { className: "react-var-ui-color-popover" },
-          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);
+          e.createElement("div", { className: "react-var-ui-color-cover", onClick: () => d(!1) }),
+          e.createElement(ce, { color: l, onChange: (v) => {
+            u(t ? v.hexa : v.hex);
           }, disableAlpha: !t })
@@ -133,12 +133,12 @@ ) : null
   );
-}, 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,
+}, Ve = ({ label: r, path: o, value: i, disabled: c, readOnly: t, className: n, error: a, errorPath: E, unit: s }) => {
+  const [m, l, u] = I({
+    path: o,
+    fallbackValue: i,
     error: a,
-    errorPath: v
+    errorPath: E
   });
   return e.createElement(
-    S,
-    { label: r, disabled: c, readOnly: t, className: n, error: o },
+    M,
+    { label: r, disabled: c, readOnly: t, className: n, error: u },
     e.createElement(
@@ -148,6 +148,6 @@ "span",
       m,
-      u
+      s
     )
   );
-}, j = () => e.createElement(
+}, H = () => e.createElement(
   "svg",
@@ -157,24 +157,24 @@ { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16" },
   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: 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,
+), he = ({ label: r, path: o, value: i, onChange: c, disabled: t, readOnly: n, className: a, accept: E, displayMetadata: s = !0, error: m, errorPath: l }) => {
+  const [u, f, g] = I({
+    path: o,
+    fallbackValue: i,
     onChange: c,
     error: m,
-    errorPath: i
-  }), f = y((d) => {
+    errorPath: l
+  }), d = N((v) => {
     var h;
-    if (!((h = d.target.files) != null && h.length))
+    if (!((h = v.target.files) != null && h.length))
       return;
-    const p = d.target.files[0];
-    E(p);
-  }, [E]);
+    const V = v.target.files[0];
+    f(V);
+  }, [f]);
   return e.createElement(
-    S,
+    M,
     { label: r, disabled: t, readOnly: n, className: a, error: g },
-    e.createElement("span", { className: "react-var-ui-file-value" }, o == null ? void 0 : o.name),
+    e.createElement("span", { className: "react-var-ui-file-value" }, u == null ? void 0 : u.name),
     e.createElement(
       "div",
       { className: "react-var-ui-file react-var-ui-interactive" },
-      u && !!o && e.createElement(
+      s && !!u && e.createElement(
         "div",
@@ -186,3 +186,3 @@ { className: "react-var-ui-file-metadata" },
           "Size: ",
-          te(o.size)
+          le(u.size)
         ),
@@ -193,26 +193,26 @@ e.createElement(
           "Type: ",
-          o.type || "unknown"
+          u.type || "unknown"
         )
       ),
-      e.createElement(j, null),
-      e.createElement("input", { type: "file", accept: v, onChange: f, title: "File upload" })
+      e.createElement(H, null),
+      e.createElement("input", { type: "file", accept: E, onChange: d, title: "File upload" })
     )
   );
-}, 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,
+}, ye = ({ label: r, path: o, value: i, onChange: c, disabled: t, readOnly: n, className: a, error: E, errorPath: s }) => {
+  const [m, l, u] = I({
+    path: o,
+    fallbackValue: i,
     onChange: c,
-    error: v,
-    errorPath: u
-  }), E = y((g) => {
-    var p;
-    if (!((p = g.target.files) != null && p.length))
+    error: E,
+    errorPath: s
+  }), f = N((g) => {
+    var V;
+    if (!((V = g.target.files) != null && V.length))
       return;
-    const f = g.target.files[0], d = URL.createObjectURL(f);
-    i(d);
-  }, [i]);
+    const d = g.target.files[0], v = URL.createObjectURL(d);
+    l(v);
+  }, [l]);
   return e.createElement(
-    S,
-    { label: r, disabled: t, readOnly: n, className: a, error: o, column: !0 },
+    M,
+    { label: r, disabled: t, readOnly: n, className: a, error: u, column: !0 },
     e.createElement(
@@ -224,99 +224,99 @@ "div",
       }, title: "Image preview" }),
-      e.createElement(j, null),
-      e.createElement("input", { type: "file", accept: "image/*", onChange: E, title: "Image upload" })
+      e.createElement(H, null),
+      e.createElement("input", { type: "file", accept: "image/*", onChange: f, title: "Image upload" })
     )
   );
-}, 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,
+}, Ne = ({ label: r, path: o, value: i, onChange: c, disabled: t, readOnly: n, className: a, acceptImage: E, acceptAudio: s, acceptVideo: m, error: l, errorPath: u }) => {
+  const [f, g, d] = I({
+    path: o,
+    fallbackValue: i,
     onChange: c,
-    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 = V.target.files) != null && M.length))
+    error: l,
+    errorPath: u
+  }), [v, V] = x(), h = S(() => {
+    let p = "";
+    return E && (p += "image/*,"), s && (p += "audio/*,"), m && (p += "video/*,"), p.endsWith(",") && (p = p.slice(0, -1)), p || (p = "image/*,audio/*,video/*"), p;
+  }, [E, s, m]), k = N((p) => {
+    var P;
+    if (!((P = p.target.files) != null && P.length))
       return;
-    const N = V.target.files[0], F = URL.createObjectURL(N);
+    const w = p.target.files[0], F = URL.createObjectURL(w);
     g(F);
-  }, [g, p]), b = y(async (V) => {
-    var F, M, D;
-    if (!V) {
-      p(void 0);
+  }, [g, V]), C = N(async (p) => {
+    var F, P, D;
+    if (!p) {
+      V(void 0);
       return;
     }
-    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(() => {
-    b(E);
-  }, [E]);
-  let C = e.createElement("div", { className: "react-var-ui-media-metadata" }, E ? "Unsupported file type." : "");
-  switch (d) {
+    const w = await fetch(p);
+    V((D = (P = (F = w == null ? void 0 : w.headers) == null ? void 0 : F.get("Content-Type")) == null ? void 0 : P.split("/")) == null ? void 0 : D[0]);
+  }, [V]);
+  B(() => {
+    C(f);
+  }, [f]);
+  let b = e.createElement("div", { className: "react-var-ui-media-metadata" }, f ? "Unsupported file type." : "");
+  switch (v) {
     case "image":
-      C = e.createElement("div", { className: "react-var-ui-media-background", style: {
-        backgroundImage: `url('${E}')`
+      b = e.createElement("div", { className: "react-var-ui-media-background", style: {
+        backgroundImage: `url('${f}')`
       }, title: "Media preview" });
       break;
     case "video":
-      C = e.createElement("video", { className: "react-var-ui-media-background", muted: !0, loop: !0, autoPlay: !0, src: E, title: "Media preview" });
+      b = e.createElement("video", { className: "react-var-ui-media-background", muted: !0, loop: !0, autoPlay: !0, src: f, title: "Media preview" });
       break;
     case "audio":
-      C = e.createElement("audio", { className: "react-var-ui-media-audio", loop: !0, controls: !0, src: E, title: "Media preview" });
+      b = e.createElement("audio", { className: "react-var-ui-media-audio", loop: !0, controls: !0, src: f, title: "Media preview" });
       break;
   }
   return e.createElement(
-    S,
-    { label: r, disabled: t, readOnly: n, className: a, error: f, column: !0 },
+    M,
+    { label: r, disabled: t, readOnly: n, className: a, error: d, column: !0 },
     e.createElement(
       "div",
       { className: "react-var-ui-media react-var-ui-interactive" },
-      C,
-      e.createElement(j, null),
-      e.createElement("input", { type: "file", accept: h, onChange: w, title: "Media upload" })
+      b,
+      e.createElement(H, null),
+      e.createElement("input", { type: "file", accept: h, onChange: k, title: "Media upload" })
     )
   );
 };
-function q(r, l, s, c, t) {
+function X(r, o, i, c, t) {
   var a;
-  isFinite(r) || (r = l ?? 0);
+  isFinite(r) || (r = o ?? 0);
   let n = 2;
-  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));
+  return typeof c == "number" && (n = ((a = c.toString().split(".")[1]) == null ? void 0 : a.length) || 0, 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));
 }
-const W = () => e.createElement(
+const K = () => e.createElement(
   "svg",
   { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16" },
   e.createElement("path", { fillRule: "evenodd", d: "M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" })
-), H = () => e.createElement(
+), _ = () => e.createElement(
   "svg",
   { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16" },
   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: 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(() => {
-    i.current && (i.current.value = String(r));
+), O = ({ value: r, onChange: o, min: i, max: c, step: t, className: n, disabled: a, readOnly: E, round: s, unit: m }) => {
+  const l = L(null), u = N((d) => {
+    l.current && (l.current.value = String(s(d))), o(d);
+  }, [o, s]);
+  B(() => {
+    l.current && (l.current.value = String(r));
   }, [r]);
-  const E = () => {
-    const f = i.current;
-    f && o(parseFloat(f.value));
-  }, g = a || v ? {} : {
-    onBlur: E,
-    onKeyDown: (f) => {
-      const d = i.current;
-      switch (f.key) {
+  const f = () => {
+    const d = l.current;
+    d && u(parseFloat(d.value));
+  }, g = a || E ? {} : {
+    onBlur: f,
+    onKeyDown: (d) => {
+      const v = l.current;
+      switch (d.key) {
         case "ArrowUp":
-          f.preventDefault(), o(parseFloat(d.value) + t);
+          d.preventDefault(), u(parseFloat(v.value) + t);
           break;
         case "ArrowDown":
-          f.preventDefault(), o(parseFloat(d.value) - t);
+          d.preventDefault(), u(parseFloat(v.value) - t);
           break;
       }
     },
-    onKeyUp: (f) => {
-      f.key === "Enter" && (f.preventDefault(), E());
+    onKeyUp: (d) => {
+      d.key === "Enter" && (d.preventDefault(), f());
     }
@@ -327,23 +327,23 @@ };
     { className: n },
-    e.createElement("input", { type: "number", min: s, max: c, step: t, disabled: a, readOnly: v, ref: i, ...g }),
+    e.createElement("input", { type: "number", min: i, max: c, step: t, disabled: a, readOnly: E, ref: l, ...g }),
     m ? e.createElement("span", null, m) : null
   );
-}, 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,
+}, ke = ({ label: r, path: o, value: i, onChange: c, min: t, max: n, step: a = 1, integer: E, showButtons: s, disabled: m, readOnly: l, className: u, error: f, errorPath: g, unit: d }) => {
+  const [v, V, h] = I({
+    path: o,
+    fallbackValue: i,
     onChange: c,
-    error: E,
+    error: f,
     errorPath: g
-  }), 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]);
+  }), k = N((p) => X(p, t, n, a, !!E), [t, n, a, E]), C = S(() => k(v), [v, k]), b = N((p) => {
+    p = k(p), V(p);
+  }, [k, V]);
   return e.createElement(
-    S,
-    { label: r, disabled: m, readOnly: i, className: o, error: h },
+    M,
+    { label: r, disabled: m, readOnly: l, className: u, error: h },
     e.createElement(
       "div",
       { className: "react-var-ui-number" },
-      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(
+      e.createElement(O, { className: "react-var-ui-number-input", round: k, min: t, max: n, step: a, value: C, disabled: m, readOnly: l, onChange: b, unit: d }),
+      s && e.createElement(
         e.Fragment,
@@ -353,9 +353,9 @@ null,
           "button",
-          { title: "Increase", onClick: () => C(d + a), disabled: m || i },
-          e.createElement(H, null)
+          { title: "Increase", onClick: () => b(v + a), disabled: m || l },
+          e.createElement(_, null)
         ),
         e.createElement(
           "button",
-          { title: "Decrease", onClick: () => C(d - a), disabled: m || i },
-          e.createElement(W, null)
+          { title: "Decrease", onClick: () => b(v - a), disabled: m || l },
+          e.createElement(K, null)
         )
@@ -365,30 +365,30 @@ )
   );
-}, Ve = ({ path: r, value: l, onChange: s, children: c, error: t, errorPath: n }) => {
-  const [a, v, u] = I({
+}, we = ({ path: r, value: o, onChange: i, children: c, error: t, errorPath: n }) => {
+  const [a, E, s] = I({
     path: r,
-    fallbackValue: l,
-    onChange: s,
+    fallbackValue: o,
+    onChange: i,
     error: t,
     errorPath: n
   });
-  return e.createElement(B.Provider, { value: {
+  return e.createElement(A.Provider, { value: {
     values: a,
-    getValue: (m) => m ? R(a, m) : void 0,
-    setValue: (m, i) => {
-      const o = x(X(a), m, i);
-      v(o);
+    getValue: (m) => typeof m == "string" ? U(a, m) : void 0,
+    setValue: (m, l) => {
+      const u = J(j(a), m, l);
+      E(u);
     },
-    getError: (m) => u && m ? R(u, m) : void 0
+    getError: (m) => s && m ? U(s, m) : void 0
   } }, c);
-}, 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,
+}, be = ({ label: r, path: o, value: i, onChange: c, options: t, disabled: n, readOnly: a, className: E, error: s, errorPath: m }) => {
+  const [l, u, f] = I({
+    path: o,
+    fallbackValue: i,
     onChange: c,
-    error: u,
+    error: s,
     errorPath: m
-  }), g = P(() => JSON.stringify(i), [i]), f = !!t.find((d) => JSON.stringify(d.value ?? d.key) === g);
+  }), g = S(() => JSON.stringify(l), [l]), d = !!t.find((v) => JSON.stringify(v.value ?? v.key) === g);
   return e.createElement(
-    S,
-    { label: r, disabled: n, readOnly: a, className: v, error: E },
+    M,
+    { label: r, disabled: n, readOnly: a, className: E, error: f },
     e.createElement(
@@ -399,7 +399,7 @@ "div",
         "select",
-        { 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);
+        { onChange: (v) => u(JSON.parse(v.target.value)), value: g, title: "Select options", disabled: n || a },
+        !d && e.createElement("option", { value: g }, String(l)),
+        t.map((v) => {
+          const V = JSON.stringify(v.value ?? v.key);
+          return e.createElement("option", { key: v.key, value: V }, v.label);
         })
@@ -409,23 +409,25 @@ )
   );
-}, 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,
+}, Ce = ({ label: r, path: o, value: i, onChange: c, min: t, max: n, step: a, inputMin: E = t, inputMax: s = n, inputStep: m = a, integer: l, defaultValue: u, showInput: f, showButtons: g, disabled: d, readOnly: v, className: V, error: h, errorPath: k, unit: C }) => {
+  const b = L(null), [p, w, F] = I({
+    path: o,
+    fallbackValue: i,
     onChange: c,
-    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: k }) => D(k)
+    error: h,
+    errorPath: k
+  }), P = N((y) => X(y, t, n, a, !!l), [t, n, a, l]), D = N((y) => X(y, E, s, m, !!l), [E, s, m, l]), z = S(() => P(p), [p, P]), T = S(() => (z - t) / (n - t) * 100, [z, t, n]), R = N((y) => {
+    w(P(y));
+  }, [P, w]), ee = N((y) => {
+    w(D(y));
+  }, [D, w]), q = N((y) => {
+    const Q = b.current.getBoundingClientRect(), re = (y - Q.left) / Q.width;
+    R(t + (n - t) * re);
+  }, [R, l, t, n, a]), { dragProps: te } = W({
+    onMove: ({ x: y }) => q(y)
   });
-  return L(() => {
-    var k;
-    (k = h.current) == null || k.addEventListener("wheel", (U) => U.preventDefault());
+  return B(() => {
+    var y;
+    (y = b.current) == null || y.addEventListener("wheel", (G) => G.preventDefault());
   }, []), e.createElement(
-    S,
-    { label: r, disabled: o, readOnly: E, className: g, error: C },
+    M,
+    { label: r, disabled: d, readOnly: v, className: V, error: F },
     e.createElement(
@@ -436,12 +438,12 @@ "div",
         "div",
-        { 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 + "%" } })
+        { className: "react-var-ui-slider-track react-var-ui-interactive", ref: b, onClick: (y) => q(y.clientX), onDoubleClick: () => typeof u < "u" && R(u), onWheel: (y) => R(p - a * Math.sign(y.deltaY)), title: "Slider", ...te() },
+        e.createElement("div", { className: "react-var-ui-slider-content", style: { width: T + "%" } })
       ),
-      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(
+      f ? e.createElement(O, { className: "react-var-ui-slider-input", round: P, min: E, max: s, step: m, disabled: d, readOnly: v, onChange: ee, value: p, unit: C }) : e.createElement(
         "span",
         null,
-        N.toString(),
-        p
+        z.toString(),
+        C
       ),
-      i && e.createElement(
+      g && e.createElement(
         e.Fragment,
@@ -451,9 +453,9 @@ null,
           "button",
-          { title: "Increase", onClick: () => M(w + a), disabled: o || E },
-          e.createElement(H, null)
+          { title: "Increase", onClick: () => R(p + a), disabled: d || v },
+          e.createElement(_, null)
         ),
         e.createElement(
           "button",
-          { title: "Decrease", onClick: () => M(w - a), disabled: o || E },
-          e.createElement(W, null)
+          { title: "Decrease", onClick: () => R(p - a), disabled: d || v },
+          e.createElement(K, null)
         )
@@ -463,29 +465,29 @@ )
   );
-}, 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,
+}, Ie = ({ label: r, path: o, value: i, onChange: c, maxLength: t, multiline: n, autoexpand: a, disabled: E, readOnly: s, className: m, error: l, errorPath: u }) => {
+  const [f, g, d] = I({
+    path: o,
+    fallbackValue: i,
     onChange: c,
-    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(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(
+    error: l,
+    errorPath: u
+  }), v = (h) => {
+    const k = h.currentTarget;
+    k.style.height = "0", k.style.height = `${k.scrollHeight}px`;
+  }, V = S(() => a ? { overflow: "hidden", resize: "none" } : void 0, [a]);
+  return e.createElement(M, { label: r, disabled: E, readOnly: s, className: m, column: n, error: d }, n ? e.createElement("textarea", { className: "react-var-ui-string-multiline", value: f, onChange: (h) => g(h.target.value), onInput: a ? v : void 0, style: V, disabled: E, readOnly: s }) : e.createElement(
     "span",
     { className: "react-var-ui-string" },
-    e.createElement("input", { type: "text", maxLength: t, value: E, onChange: (h) => g(h.target.value), disabled: v, readOnly: u })
+    e.createElement("input", { type: "text", maxLength: t, value: f, onChange: (h) => g(h.target.value), disabled: E, readOnly: s })
   ));
-}, 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,
+}, Me = ({ label: r, path: o, value: i, onChange: c, disabled: t, readOnly: n, className: a, error: E, errorPath: s }) => {
+  const [m, l, u] = I({
+    path: o,
+    fallbackValue: i,
     onChange: c,
-    error: v,
-    errorPath: u
+    error: E,
+    errorPath: s
   });
   return e.createElement(
-    S,
-    { label: r, disabled: t, readOnly: n, className: a, error: o },
+    M,
+    { label: r, disabled: t, readOnly: n, className: a, error: u },
     e.createElement(
@@ -497,3 +499,3 @@ "span",
         { className: "react-var-ui-toggle", title: "Toggle" },
-        e.createElement("input", { type: "checkbox", checked: m, onChange: (E) => i(E.target.checked), disabled: t, readOnly: n }),
+        e.createElement("input", { type: "checkbox", checked: m, onChange: (f) => l(f.target.checked), disabled: t, readOnly: n }),
         e.createElement("span", { className: "react-var-ui-toggle-helper" })
@@ -504,3 +506,3 @@ )
 };
-function _(r, l, s, c) {
+function Z(r, o, i, c) {
   var n;
@@ -511,8 +513,8 @@ const t = [0, 0];
   for (let a = 0; a < c.length; a++) {
-    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(l[a], t[a]), t[a] = Math.min(s[a], t[a]), t[a] = parseFloat(t[a].toFixed(v));
+    const E = ((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(E));
   }
   return t;
 }
-function re(r, l, s) {
+function oe(r, o, i) {
   if (!r)
@@ -522,28 +524,28 @@ return [50, 50];
   for (let t = 0; t < r.length; t++)
-    c[t] = (r[t] - l[t]) / (s[t] - l[t]) * 100;
+    c[t] = (r[t] - o[t]) / (i[t] - o[t]) * 100;
   return c;
 }
-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,
+const Pe = ({ label: r, path: o, value: i, onChange: c, disabled: t, readOnly: n, className: a, defaultValue: E = [0, 0], min: s = [-1, -1], max: m = [1, 1], step: l = [0.01, 0.01], error: u, errorPath: f }) => {
+  const g = L(null), [d, v, V] = I({
+    path: o,
+    fallbackValue: i,
     onChange: c,
-    error: o,
-    errorPath: E
-  }), h = P(() => _(f, u, m, i), [f, u, m, i]), w = P(() => re(h, u, m), [h, u, m]), b = y((N, F) => {
+    error: u,
+    errorPath: f
+  }), h = S(() => Z(d, s, m, l), [d, s, m, l]), k = S(() => oe(h, s, m), [h, s, m]), C = N((w, F) => {
     if (!g.current)
       return;
-    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]) * 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]);
+    const D = g.current.getBoundingClientRect(), z = (w - D.left) / D.width, T = (F - D.top) / D.height, R = Z([
+      s[0] + (m[0] - s[0]) * z,
+      s[1] + (m[1] - s[1]) * T
+    ], s, m, l);
+    v(R);
+  }, [v, s, m, l]), { dragProps: b } = W({
+    onMove: ({ x: w, y: F }) => C(w, F)
+  }), p = N(() => {
+    typeof E < "u" && v(E);
+  }, [E, v]);
   return e.createElement(
-    S,
-    { label: r, disabled: t, readOnly: n, className: a, error: p },
+    M,
+    { label: r, disabled: t, readOnly: n, className: a, error: V },
     e.createElement(
@@ -561,12 +563,12 @@ "span",
         "div",
-        { 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] + "%" } })
+        { className: "react-var-ui-xy-space", ref: g, onClick: (w) => C(w.clientX, w.clientY), onDoubleClick: p, ...b() },
+        e.createElement("div", { className: "react-var-ui-xy-control", style: { top: k[1] + "%", left: k[0] + "%" } })
       )
     )
   );
-}, be = ({ label: r, className: l, children: s, collapsible: c }) => {
-  const [t, n] = $(!1);
+}, Se = ({ label: r, className: o, children: i, collapsible: c }) => {
+  const [t, n] = x(!1);
   return e.createElement(
     "div",
-    { className: "react-var-ui-category " + (l ?? "") },
+    { className: "react-var-ui-category " + (o ?? "") },
     e.createElement(
@@ -576,27 +578,27 @@ "div",
       r,
-      c && e.createElement("button", { title: t ? "Expand" : "Collapse", className: "react-var-ui-category-collapse", onClick: () => n((a) => !a) }, t ? e.createElement(W, null) : e.createElement(H, null))
+      c && e.createElement("button", { title: t ? "Expand" : "Collapse", className: "react-var-ui-category-collapse", onClick: () => n((a) => !a) }, t ? e.createElement(K, null) : e.createElement(_, null))
     ),
-    (!c || !t) && e.createElement("div", null, s)
+    (!c || !t) && e.createElement("div", null, i)
   );
 };
 export {
-  se as VarAngle,
-  ie as VarArray,
-  S as VarBase,
-  me as VarButton,
-  be as VarCategory,
-  ve as VarColor,
-  de as VarDisplay,
-  Ee as VarFile,
-  fe as VarImage,
-  ge as VarMedia,
-  pe as VarNumber,
-  Ve as VarScope,
-  he as VarSelect,
-  we as VarSlider,
-  Ne as VarString,
-  ke as VarToggle,
-  ue as VarUI,
-  ye as VarXY,
+  Ee as VarAngle,
+  fe as VarArray,
+  M as VarBase,
+  ge as VarButton,
+  Se as VarCategory,
+  pe as VarColor,
+  Ve as VarDisplay,
+  he as VarFile,
+  ye as VarImage,
+  Ne as VarMedia,
+  ke as VarNumber,
+  we as VarScope,
+  be as VarSelect,
+  Ce as VarSlider,
+  Ie as VarString,
+  Me as VarToggle,
+  de as VarUI,
+  Pe as VarXY,
   I as useVarUIValue
 };

dist/VarSlider.d.ts

@@ -17,2 +17,14 @@ /// <reference types="react" />
     /**
+     * Minimum value (for the input field, if not defined, will use `min`).
+     */
+    inputMin?: number;
+    /**
+     * Maximum value (for the input field, if not defined, will use `max`).
+     */
+    inputMax?: number;
+    /**
+     * Step (for the input field, if not defined, will use `step`).
+     */
+    inputStep?: number;
+    /**
      * Should the end result be rounded to an integer value.
@@ -37,2 +49,2 @@ */
  */
-export declare const VarSlider: ({ label, path, value, onChange, min, max, step, integer, defaultValue, showInput, showButtons, disabled, readOnly, className, error, errorPath, unit, }: IVarSliderProps) => JSX.Element;
+export declare const VarSlider: ({ label, path, value, onChange, min, max, step, inputMin, inputMax, inputStep, integer, defaultValue, showInput, showButtons, disabled, readOnly, className, error, errorPath, unit, }: IVarSliderProps) => JSX.Element;

package.json

 {
-  "version": "1.5.1",
+  "version": "1.5.2",
   "license": "BSD-3-Clause-Clear",
@@ -4,0 +4,0 @@ "exports": {

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

Total package byte prevSize

73027

increased by0.89%

Lines of code

1086

increased by1.31%

No dependency changes