react-var-ui - npm Package Compare versions

Comparing version 1.4.3 to 1.5.0

dist/common/VarUIContext.d.ts

@@ -6,4 +6,12 @@ /// <reference types="react" />
     setValue: (path: string, value: any) => void;
+    getError: (path?: string) => any;
 }
 export declare const VarUIContext: import("react").Context<IVarUIContext | undefined>;
+export interface UseVarUIValueOptions<T> {
+    path?: string;
+    fallbackValue?: T;
+    onChange?: (value: T) => void;
+    errorPath?: string;
+    error?: string;
+}
 /**
@@ -16,2 +24,2 @@ * Simple function used for custom input components.
  */
-export declare function useVarUIValue<T>(path?: string, fallbackValue?: T, onChange?: (value: T) => void): [T, (value: T) => void];
+export declare function useVarUIValue<T>({ path, fallbackValue, onChange, errorPath, error, }: UseVarUIValueOptions<T>): [T, (value: T) => void, string | undefined];

dist/react-var-ui.js

@@ -1,52 +0,59 @@
-import e, { createContext as K, useContext as Q, useMemo as M, useCallback as V, useRef as L, useEffect as B, useState as A } from "react";
-import { get as T, set as Y, clone as $ } from "radash";
-import { usePointerDrag as X } from "react-use-pointer-drag";
-import { SketchPicker as Z } from "react-color";
-import _ from "filesize";
-const U = K(void 0);
-function C(a, l, o) {
-  const n = Q(U), t = M(() => (n == null ? void 0 : n.getValue(a)) ?? l, [n, a, l]), c = V((r) => {
-    a && n && n.setValue(a, r), o == null || o(r);
-  }, [a, n, o]);
-  return [t, c];
+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 { usePointerDrag as J } from "react-use-pointer-drag";
+import { SketchPicker as ee } from "react-color";
+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]);
+  return t || (t = n == null ? void 0 : n.getError(c || r)), [a, v, t];
 }
-const ce = ({ values: a, updateValues: l, onChange: o, onChangeValue: n, className: t, children: c }) => {
-  const r = V((u) => u ? T(a, u) : void 0, [a]), s = V((u, m) => {
-    n == null || n(u, m);
-    const v = Y($(a), u, m);
-    l == null || l(v), o == null || o(v);
-  }, [a, l, o, n]), i = M(() => ({ values: a, getValue: r, setValue: s }), [a, r, s]);
+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]);
   return e.createElement(
-    U.Provider,
-    { value: i },
-    e.createElement("div", { className: "react-var-ui " + (t ?? "") }, c)
+    B.Provider,
+    { value: s },
+    e.createElement("div", { className: "react-var-ui " + (n ?? "") }, a)
   );
-}, b = ({ label: a, children: l, className: o, disabled: n, readOnly: t, column: c = !1 }) => e.createElement(
+}, I = ({ label: r, children: o, className: i, disabled: c, readOnly: t, column: n = !1, error: a }) => e.createElement(
   "div",
-  { className: "react-var-ui-label " + (a ? "react-var-ui-label-has-label " : "react-var-ui-label-no-label ") + (n ? "react-var-ui-disabled " : "") + (t ? "react-var-ui-read-only " : "") + (c ? "react-var-ui-label-column " : "") + (o ?? "") },
-  !!a && e.createElement("span", null, a),
-  l
-), z = Math.PI * 2;
-function D(a) {
-  return (z + a % z) % z;
+  { 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),
+  o,
+  a ? e.createElement("div", { className: "react-var-ui-error" }, a) : null
+), x = Math.PI * 2;
+function T(r) {
+  return (x + r % x) % x;
 }
-const ne = ({ label: a, path: l, value: o, onChange: n, disabled: t, readOnly: c, defaultValue: r = 0, className: s }) => {
-  const i = L(null), [u, m] = C(l, o, n), v = M(() => Math.round(D(u) * (180 / Math.PI)), [u]), { dragProps: g } = X({
-    onMove: ({ x: d, y: E }) => {
-      if (!i.current)
+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,
+    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 f = i.current.getBoundingClientRect(), N = f.left + f.width / 2, h = f.top + f.height / 2;
-      m(D(Math.atan2(E - h, d - N) + Math.PI / 2));
+      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));
     }
   });
-  return B(() => {
-    var d;
-    (d = i.current) == null || d.addEventListener("wheel", (E) => E.preventDefault());
+  return L(() => {
+    var p;
+    (p = s.current) == null || p.addEventListener("wheel", (V) => V.preventDefault());
   }, []), e.createElement(
-    b,
-    { label: a, disabled: t, readOnly: c, className: s },
+    I,
+    { label: r, disabled: t, readOnly: n, className: v, error: g },
     e.createElement(
       "span",
       { className: "react-var-ui-angle-value" },
-      v,
+      d,
       "°"
@@ -57,34 +64,50 @@ ),
       { className: "react-var-ui-angle" },
-      e.createElement("div", { className: "react-var-ui-angle-control react-var-ui-interactive", ref: i, style: { transform: `rotate(${v}deg)` }, onDoubleClick: () => typeof r < "u" && m(r), onWheel: (d) => {
-        m(D(u + 0.5 * (d.deltaY < 0 ? -1 : 1)));
-      }, title: "Angle", ...g() })
+      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() })
     )
   );
-}, le = ({ path: a, value: l, onChange: o, disabled: n, className: t, children: c }) => {
-  const [r, s] = C(a, l, o);
-  return e.createElement("div", { className: "react-var-ui-array " + (n ? "react-var-ui-disabled " : "") + (t ?? "") }, r == null ? void 0 : r.map((i, u, m) => e.createElement(U.Provider, { value: {
-    values: i,
-    getValue: (v) => v ? T(i, v) : void 0,
-    setValue: (v, g) => {
-      const d = [...r];
-      d[u] = Y($(i), v, g), s(d);
+}, se = ({ path: r, value: o, onChange: i, disabled: c, className: t, children: n, error: a, errorPath: v }) => {
+  const [u, m, s] = S({
+    path: r,
+    fallbackValue: o,
+    onChange: i,
+    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) => {
+      const p = [...u];
+      p[E] = $(X(l), d, f), m(p);
+    },
+    getError: (d) => {
+      const f = s == null ? void 0 : s[E];
+      return f && d ? R(f, d) : void 0;
     }
-  }, key: u }, typeof c == "function" ? c(i, u, m) : c)));
-}, oe = ({ label: a, onClick: l, buttonLabel: o, disabled: n, className: t }) => e.createElement(
-  b,
-  { label: a, disabled: n, className: t },
+  }, 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 },
   e.createElement(
     "span",
     { className: "react-var-ui-button" },
-    e.createElement("button", { onClick: () => l == null ? void 0 : l(), disabled: n }, o)
+    e.createElement("button", { onClick: () => o == null ? void 0 : o(), disabled: c }, i)
   )
-), se = ({ label: a, path: l, value: o, onChange: n, alpha: t, disabled: c, readOnly: r, className: s }) => {
-  const [i, u] = C(l, o, n), [m, v] = A(!1), g = V(() => v((E) => !E), [v]), d = V(() => v(!1), [v]);
+), 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,
+    onChange: c,
+    error: u,
+    errorPath: m
+  }), [g, d] = Y(!1), f = N(() => d((V) => !V), [d]), p = N(() => d(!1), [d]);
   return e.createElement(
-    b,
-    { label: a, disabled: c, readOnly: r, className: s },
+    I,
+    { label: r, disabled: n, readOnly: a, className: v, error: E },
     e.createElement(
       "span",
       null,
-      e.createElement("span", { className: "react-var-ui-color-value" }, i),
+      e.createElement("span", { className: "react-var-ui-color-value" }, s),
       e.createElement(
@@ -95,16 +118,16 @@ "div",
           "div",
-          { className: "react-var-ui-color-swatch", onClick: g },
-          e.createElement("div", { className: "react-var-ui-color-color", title: "Color preview", style: { background: i } })
+          { className: "react-var-ui-color-swatch", onClick: f },
+          e.createElement("div", { className: "react-var-ui-color-color", title: "Color preview", style: { background: s } })
         ),
-        m ? e.createElement(
+        g ? e.createElement(
           "div",
           { className: "react-var-ui-color-popover" },
-          e.createElement("div", { className: "react-var-ui-color-cover", onClick: d }),
-          e.createElement(Z, { color: i, onChange: (E) => {
-            const p = E.hex === "transparent" ? "#000000" : E.hex;
+          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 f = Math.round((E.rgb.a ?? 1) * 255).toString(16);
-              f.length === 1 && (f = "0" + f), u(p + f);
+              let w = Math.round((V.rgb.a ?? 1) * 255).toString(16);
+              w.length === 1 && (w = "0" + w), l(k + w);
             } else
-              u(p);
+              l(k);
           }, disableAlpha: !t })
@@ -115,8 +138,18 @@ ) : null
   );
-}, ie = ({ label: a, path: l, value: o, disabled: n, readOnly: t, className: c }) => {
-  const [r] = C(l, o);
+}, 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,
+    error: a,
+    errorPath: v
+  });
   return e.createElement(
-    b,
-    { label: a, disabled: n, readOnly: t, className: c },
-    e.createElement("span", null, r)
+    I,
+    { label: r, disabled: c, readOnly: t, className: n, error: l },
+    e.createElement(
+      "span",
+      null,
+      m,
+      u
+    )
   );
@@ -128,18 +161,24 @@ }, j = () => e.createElement(
   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" })
-), ue = ({ label: a, path: l, value: o, onChange: n, disabled: t, readOnly: c, className: r, accept: s, displayMetadata: i = !0 }) => {
-  const [u, m] = C(l, o, n), v = V((g) => {
-    var E;
-    if (!((E = g.target.files) != null && E.length))
+), 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,
+    onChange: c,
+    error: m,
+    errorPath: s
+  }), d = N((f) => {
+    var V;
+    if (!((V = f.target.files) != null && V.length))
       return;
-    const d = g.target.files[0];
-    m(d);
-  }, [m]);
+    const p = f.target.files[0];
+    E(p);
+  }, [E]);
   return e.createElement(
-    b,
-    { label: a, disabled: t, readOnly: c, className: r },
-    e.createElement("span", { className: "react-var-ui-file-value" }, u == null ? void 0 : u.name),
+    I,
+    { 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(
       "div",
       { className: "react-var-ui-file react-var-ui-interactive" },
-      i && !!u && e.createElement(
+      u && !!l && e.createElement(
         "div",
@@ -151,3 +190,3 @@ { className: "react-var-ui-file-metadata" },
           "Size: ",
-          _(u.size)
+          te(l.size)
         ),
@@ -158,20 +197,26 @@ e.createElement(
           "Type: ",
-          u.type || "unknown"
+          l.type || "unknown"
         )
       ),
       e.createElement(j, null),
-      e.createElement("input", { type: "file", accept: s, onChange: v, title: "File upload" })
+      e.createElement("input", { type: "file", accept: v, onChange: d, title: "File upload" })
     )
   );
-}, ve = ({ label: a, path: l, value: o, onChange: n, disabled: t, readOnly: c, className: r }) => {
-  const [s, i] = C(l, o, n), u = V((m) => {
-    var d;
-    if (!((d = m.target.files) != null && d.length))
+}, 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,
+    onChange: c,
+    error: v,
+    errorPath: u
+  }), E = N((g) => {
+    var p;
+    if (!((p = g.target.files) != null && p.length))
       return;
-    const v = m.target.files[0], g = URL.createObjectURL(v);
-    i(g);
-  }, [i]);
+    const d = g.target.files[0], f = URL.createObjectURL(d);
+    s(f);
+  }, [s]);
   return e.createElement(
-    b,
-    { label: a, disabled: t, readOnly: c, className: r, column: !0 },
+    I,
+    { label: r, disabled: t, readOnly: n, className: a, error: l, column: !0 },
     e.createElement(
@@ -181,80 +226,127 @@ "div",
       e.createElement("div", { className: "react-var-ui-image-background", style: {
-        backgroundImage: s ? `url('${s}')` : void 0
+        backgroundImage: m ? `url('${m}')` : void 0
       }, title: "Image preview" }),
       e.createElement(j, null),
-      e.createElement("input", { type: "file", accept: "image/*", onChange: u, title: "Image upload" })
+      e.createElement("input", { type: "file", accept: "image/*", onChange: E, title: "Image upload" })
     )
   );
-}, me = ({ label: a, path: l, value: o, onChange: n, disabled: t, readOnly: c, className: r, acceptImage: s, acceptAudio: i, acceptVideo: u }) => {
-  const [m, v] = C(l, o, n), [g, d] = A(), E = M(() => {
+}, 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,
+    onChange: c,
+    error: s,
+    errorPath: l
+  }), [f, p] = Y(), V = P(() => {
     let h = "";
-    return s && (h += "image/*,"), i && (h += "audio/*,"), u && (h += "video/*,"), h.endsWith(",") && (h = h.slice(0, -1)), h || (h = "image/*,audio/*,video/*"), h;
-  }, [s, i, u]), p = V((h) => {
-    var I;
-    if (!((I = h.target.files) != null && I.length))
+    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) => {
+    var M;
+    if (!((M = h.target.files) != null && M.length))
       return;
-    const w = h.target.files[0], k = URL.createObjectURL(w);
-    v(k);
-  }, [v, d]), f = V(async (h) => {
-    var k, I, S;
+    const b = h.target.files[0], F = URL.createObjectURL(b);
+    g(F);
+  }, [g, p]), w = N(async (h) => {
+    var F, M, D;
     if (!h) {
-      d(void 0);
+      p(void 0);
       return;
     }
-    const w = await fetch(h);
-    d((S = (I = (k = w == null ? void 0 : w.headers) == null ? void 0 : k.get("Content-Type")) == null ? void 0 : I.split("/")) == null ? void 0 : S[0]);
-  }, [d]);
-  B(() => {
-    f(m);
-  }, [m]);
-  let N = e.createElement("div", { className: "react-var-ui-media-metadata" }, m ? "Unsupported file type." : "");
-  switch (g) {
+    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]);
+  }, [p]);
+  L(() => {
+    w(E);
+  }, [E]);
+  let C = e.createElement("div", { className: "react-var-ui-media-metadata" }, E ? "Unsupported file type." : "");
+  switch (f) {
     case "image":
-      N = e.createElement("div", { className: "react-var-ui-media-background", style: {
-        backgroundImage: `url('${m}')`
+      C = e.createElement("div", { className: "react-var-ui-media-background", style: {
+        backgroundImage: `url('${E}')`
       }, title: "Media preview" });
       break;
     case "video":
-      N = e.createElement("video", { className: "react-var-ui-media-background", muted: !0, loop: !0, autoPlay: !0, src: m, title: "Media preview" });
+      C = e.createElement("video", { className: "react-var-ui-media-background", muted: !0, loop: !0, autoPlay: !0, src: E, title: "Media preview" });
       break;
     case "audio":
-      N = e.createElement("audio", { className: "react-var-ui-media-audio", loop: !0, controls: !0, src: m, title: "Media preview" });
+      C = e.createElement("audio", { className: "react-var-ui-media-audio", loop: !0, controls: !0, src: E, title: "Media preview" });
       break;
   }
   return e.createElement(
-    b,
-    { label: a, disabled: t, readOnly: c, className: r, column: !0 },
+    I,
+    { label: r, disabled: t, readOnly: n, className: a, error: d, column: !0 },
     e.createElement(
       "div",
       { className: "react-var-ui-media react-var-ui-interactive" },
-      N,
+      C,
       e.createElement(j, null),
-      e.createElement("input", { type: "file", accept: E, onChange: p, title: "Media upload" })
+      e.createElement("input", { type: "file", accept: V, onChange: k, title: "Media upload" })
     )
   );
 };
-function P(a, l, o, n, t) {
-  var r;
-  isFinite(a) || (a = l ?? 0);
-  let c = 2;
-  return typeof n == "number" && (c = ((r = n.toString().split(".")[1]) == null ? void 0 : r.length) || 0, c > 20 && (c = 20), a = Math.round(a / n) * n), typeof l == "number" && (a = Math.max(l, a)), typeof o == "number" && (a = Math.min(o, a)), t ? Math.round(a) : parseFloat(a.toFixed(c));
+function q(r, o, i, c, t) {
+  var a;
+  isFinite(r) || (r = o ?? 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));
 }
-const J = () => e.createElement(
+const W = () => 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" })
-), W = () => e.createElement(
+), H = () => 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" })
-), de = ({ label: a, path: l, value: o, onChange: n, min: t, max: c, step: r = 1, integer: s, showButtons: i, disabled: u, readOnly: m, className: v }) => {
-  const [g, d] = C(l, o, n), E = M(() => P(g, t, c, r, !!s), [g, t, c, r, s]), p = V(() => d(P(g + (r ?? 1), t, c, r, !!s)), [g, d, s, t, c, r]), f = V(() => d(P(g - (r ?? 1), t, c, r, !!s)), [g, d, s, t, c, r]);
+), 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]);
+  L(() => {
+    s.current && (s.current.value = String(r));
+  }, [r]);
+  const E = () => {
+    const d = s.current;
+    d && l(parseFloat(d.value));
+  }, g = a || v ? {} : {
+    onBlur: E,
+    onKeyDown: (d) => {
+      const f = s.current;
+      switch (d.key) {
+        case "ArrowUp":
+          d.preventDefault(), l(parseFloat(f.value) + t);
+          break;
+        case "ArrowDown":
+          d.preventDefault(), l(parseFloat(f.value) - t);
+          break;
+      }
+    },
+    onKeyUp: (d) => {
+      d.key === "Enter" && (d.preventDefault(), E());
+    }
+  };
   return e.createElement(
-    b,
-    { label: a, disabled: u, readOnly: m, className: v },
+    "div",
+    { className: n },
+    e.createElement("input", { type: "number", min: i, max: c, step: t, disabled: a, readOnly: v, ref: s, ...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,
+    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]);
+  return e.createElement(
+    I,
+    { label: r, disabled: m, readOnly: s, className: l, error: V },
     e.createElement(
       "div",
       { className: "react-var-ui-number" },
-      e.createElement("input", { className: "react-var-ui-number-input", type: "number", min: t, max: c, step: r, value: E.toString(), disabled: u, readOnly: m, onChange: (N) => d(P(parseFloat(N.target.value), t, c, r, !!s)) }),
-      i && e.createElement(
+      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 }),
+      u && e.createElement(
         e.Fragment,
@@ -264,9 +356,9 @@ null,
           "button",
-          { title: "Increase", onClick: p, disabled: u || m },
-          e.createElement(W, null)
+          { title: "Increase", onClick: () => C(f + a), disabled: m || s },
+          e.createElement(H, null)
         ),
         e.createElement(
           "button",
-          { title: "Decrease", onClick: f, disabled: u || m },
-          e.createElement(J, null)
+          { title: "Decrease", onClick: () => C(f - a), disabled: m || s },
+          e.createElement(W, null)
         )
@@ -276,41 +368,67 @@ )
   );
-}, Ee = ({ path: a, value: l, onChange: o, children: n }) => {
-  const [t, c] = C(a, l, o);
-  return e.createElement(U.Provider, { value: {
-    values: t,
-    getValue: (r) => r ? T(t, r) : void 0,
-    setValue: (r, s) => {
-      const i = Y($(t), r, s);
-      c(i);
-    }
-  } }, n);
-}, ge = ({ label: a, path: l, value: o, onChange: n, options: t, disabled: c, readOnly: r, className: s }) => {
-  const [i, u] = C(l, o, n), m = M(() => JSON.stringify(i), [i]);
+}, Ve = ({ path: r, value: o, onChange: i, children: c, error: t, errorPath: n }) => {
+  const [a, v, u] = S({
+    path: r,
+    fallbackValue: o,
+    onChange: i,
+    error: t,
+    errorPath: n
+  });
+  return e.createElement(B.Provider, { value: {
+    values: a,
+    getValue: (m) => m ? R(a, m) : void 0,
+    setValue: (m, s) => {
+      const l = $(X(a), m, s);
+      v(l);
+    },
+    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,
+    onChange: c,
+    error: u,
+    errorPath: m
+  }), g = P(() => JSON.stringify(s), [s]), d = !!t.find((f) => JSON.stringify(f.value ?? f.key) === g);
   return e.createElement(
-    b,
-    { label: a, disabled: c, readOnly: r, className: s },
+    I,
+    { label: r, disabled: n, readOnly: a, className: v, error: E },
     e.createElement(
       "div",
       { className: "react-var-ui-select" },
-      e.createElement("select", { onChange: (v) => u(JSON.parse(v.target.value)), value: m, title: "Select options", disabled: c || r }, t.map((v) => {
-        const g = JSON.stringify(v.value ?? v.key);
-        return e.createElement("option", { key: v.key, value: g }, v.label);
-      }))
+      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);
+        })
+      )
     )
   );
-}, fe = ({ label: a, path: l, value: o, onChange: n, min: t, max: c, step: r, integer: s, defaultValue: i, showInput: u, showButtons: m, disabled: v, readOnly: g, className: d }) => {
-  const E = L(null), [p, f] = C(l, o, n), N = M(() => P(p, t, c, r, !!s), [p, t, c, r, s]), h = M(() => (N - t) / (c - t) * 100, [N, t, c]), w = V((y) => {
-    if (!E.current)
+}, 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,
+    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 R = E.current.getBoundingClientRect(), q = (y - R.left) / R.width, G = P(t + (c - t) * q, t, c, r, !!s);
-    f(G);
-  }, [f, s, t, c, r]), k = V(() => f(P(p + r, t, c, r, !!s)), [p, f, s, t, c, r]), I = V(() => f(P(p - r, t, c, r, !!s)), [p, f, s, t, c, r]), { dragProps: S } = X({
-    onMove: ({ x: y }) => w(y)
+    const K = V.current.getBoundingClientRect(), Q = (y - K.left) / K.width;
+    M(t + (n - t) * Q);
+  }, [M, v, t, n, a]), { dragProps: A } = J({
+    onMove: ({ x: y }) => D(y)
   });
-  return B(() => {
+  return L(() => {
     var y;
-    (y = E.current) == null || y.addEventListener("wheel", (F) => F.preventDefault());
+    (y = V.current) == null || y.addEventListener("wheel", (U) => U.preventDefault());
   }, []), e.createElement(
-    b,
-    { label: a, disabled: v, readOnly: g, className: d },
+    I,
+    { label: r, disabled: l, readOnly: E, className: g, error: C },
     e.createElement(
@@ -321,9 +439,12 @@ "div",
         "div",
-        { className: "react-var-ui-slider-track react-var-ui-interactive", ref: E, onClick: (y) => w(y.clientX), onDoubleClick: () => typeof i < "u" && f(i), onWheel: (y) => {
-          y.deltaY < 0 ? k() : I();
-        }, title: "Slider", ...S() },
-        e.createElement("div", { className: "react-var-ui-slider-content", style: { width: h + "%" } })
+        { 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() },
+        e.createElement("div", { className: "react-var-ui-slider-content", style: { width: F + "%" } })
       ),
-      u ? e.createElement("input", { className: "react-var-ui-slider-input", type: "number", min: t, max: c, step: r, value: N, disabled: v, readOnly: g, onChange: (y) => f(P(parseFloat(y.target.value), t, c, r, !!s)) }) : e.createElement("span", null, N.toString()),
-      m && e.createElement(
+      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(
+        "span",
+        null,
+        b.toString(),
+        p
+      ),
+      s && e.createElement(
         e.Fragment,
@@ -333,9 +454,9 @@ null,
           "button",
-          { title: "Increase", onClick: k, disabled: v || g },
-          e.createElement(W, null)
+          { title: "Increase", onClick: () => M(k + a), disabled: l || E },
+          e.createElement(H, null)
         ),
         e.createElement(
           "button",
-          { title: "Decrease", onClick: I, disabled: v || g },
-          e.createElement(J, null)
+          { title: "Decrease", onClick: () => M(k - a), disabled: l || E },
+          e.createElement(W, null)
         )
@@ -345,17 +466,29 @@ )
   );
-}, pe = ({ label: a, path: l, value: o, onChange: n, maxLength: t, multiline: c, autoexpand: r, disabled: s, readOnly: i, className: u }) => {
-  const [m, v] = C(l, o, n), g = (E) => {
-    const p = E.currentTarget;
-    p.style.height = "0", p.style.height = `${p.scrollHeight}px`;
-  }, d = M(() => r ? { overflow: "hidden", resize: "none" } : void 0, [r]);
-  return e.createElement(b, { label: a, disabled: s, readOnly: i, className: u, column: c }, c ? e.createElement("textarea", { className: "react-var-ui-string-multiline", value: m, onChange: (E) => v(E.target.value), onInput: r ? g : void 0, style: d, disabled: s, readOnly: i }) : e.createElement(
+}, 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,
+    onChange: c,
+    error: s,
+    errorPath: l
+  }), f = (V) => {
+    const k = V.currentTarget;
+    k.style.height = "0", k.style.height = `${k.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(
     "span",
     { className: "react-var-ui-string" },
-    e.createElement("input", { type: "text", maxLength: t, value: m, onChange: (E) => v(E.target.value), disabled: s, readOnly: i })
+    e.createElement("input", { type: "text", maxLength: t, value: E, onChange: (V) => g(V.target.value), disabled: v, readOnly: u })
   ));
-}, he = ({ label: a, path: l, value: o, onChange: n, disabled: t, readOnly: c, className: r }) => {
-  const [s, i] = C(l, o, n);
+}, 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,
+    onChange: c,
+    error: v,
+    errorPath: u
+  });
   return e.createElement(
-    b,
-    { label: a, disabled: t, readOnly: c, className: r },
+    I,
+    { label: r, disabled: t, readOnly: n, className: a, error: l },
     e.createElement(
@@ -367,3 +500,3 @@ "span",
         { className: "react-var-ui-toggle", title: "Toggle" },
-        e.createElement("input", { type: "checkbox", checked: s, onChange: (u) => i(u.target.checked), disabled: t, readOnly: c }),
+        e.createElement("input", { type: "checkbox", checked: m, onChange: (E) => s(E.target.checked), disabled: t, readOnly: n }),
         e.createElement("span", { className: "react-var-ui-toggle-helper" })
@@ -374,44 +507,50 @@ )
 };
-function H(a, l, o, n) {
-  var c;
+function _(r, o, i, c) {
+  var n;
   const t = [0, 0];
-  if (!a || !Array.isArray(a) || a.length < 2)
+  if (!r || !Array.isArray(r) || r.length < 2)
     return t;
-  for (let r = 0; r < n.length; r++) {
-    const s = ((c = n[r].toString().split(".")[1]) == null ? void 0 : c.length) || 0;
-    t[r] = Math.round(a[r] / n[r]) * n[r], t[r] = Math.max(l[r], t[r]), t[r] = Math.min(o[r], t[r]), t[r] = parseFloat(t[r].toFixed(s));
+  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(o[a], t[a]), t[a] = Math.min(i[a], t[a]), t[a] = parseFloat(t[a].toFixed(v));
   }
   return t;
 }
-function x(a, l, o) {
-  if (!a)
+function re(r, o, i) {
+  if (!r)
     return [50, 50];
-  const n = [0, 0];
-  for (let t = 0; t < a.length; t++)
-    n[t] = (a[t] - l[t]) / (o[t] - l[t]) * 100;
-  return n;
+  const c = [0, 0];
+  for (let t = 0; t < r.length; t++)
+    c[t] = (r[t] - o[t]) / (i[t] - o[t]) * 100;
+  return c;
 }
-const Ve = ({ label: a, path: l, value: o, onChange: n, disabled: t, readOnly: c, className: r, defaultValue: s = [0, 0], min: i = [-1, -1], max: u = [1, 1], step: m = [0.01, 0.01] }) => {
-  const v = L(null), [g, d] = C(l, o, n), E = M(() => H(g, i, u, m), [g, i, u, m]), p = M(() => x(E, i, u), [E, i, u]), f = V((w, k) => {
-    if (!v.current)
+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,
+    onChange: c,
+    error: l,
+    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) => {
+    if (!g.current)
       return;
-    const S = v.current.getBoundingClientRect(), y = (w - S.left) / S.width, F = (k - S.top) / S.height, R = H([
-      i[0] + (u[0] - i[0]) * y,
-      i[1] + (u[1] - i[1]) * F
-    ], i, u, m);
-    d(R);
-  }, [d, i, u, m]), { dragProps: N } = X({
-    onMove: ({ x: w, y: k }) => f(w, k)
-  }), h = V(() => {
-    typeof s < "u" && d(s);
-  }, [s, d]);
+    const D = g.current.getBoundingClientRect(), A = (b - D.left) / D.width, y = (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]);
   return e.createElement(
-    b,
-    { label: a, disabled: t, readOnly: c, className: r },
+    I,
+    { label: r, disabled: t, readOnly: n, className: a, error: p },
     e.createElement(
       "span",
       { className: "react-var-ui-xy-value" },
-      E[0],
+      V[0],
       ", ",
-      E[1]
+      V[1]
     ),
@@ -423,41 +562,41 @@ e.createElement(
         "div",
-        { className: "react-var-ui-xy-space", ref: v, onClick: (w) => f(w.clientX, w.clientY), onDoubleClick: h, ...N() },
-        e.createElement("div", { className: "react-var-ui-xy-control", style: { top: p[1] + "%", left: p[0] + "%" } })
+        { 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] + "%" } })
       )
     )
   );
-}, Ne = ({ label: a, className: l, children: o, collapsible: n }) => {
-  const [t, c] = A(!1);
+}, ye = ({ label: r, className: o, children: i, collapsible: c }) => {
+  const [t, n] = Y(!1);
   return e.createElement(
     "div",
-    { className: "react-var-ui-category " + (l ?? "") },
+    { className: "react-var-ui-category " + (o ?? "") },
     e.createElement(
       "div",
       { className: "react-var-ui-category-title" },
-      a,
-      n && e.createElement("button", { title: t ? "Expand" : "Collapse", className: "react-var-ui-category-collapse", onClick: () => c((r) => !r) }, t ? e.createElement(J, null) : e.createElement(W, null))
+      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))
     ),
-    (!n || !t) && e.createElement("div", null, o)
+    (!c || !t) && e.createElement("div", null, i)
   );
 };
 export {
-  ne as VarAngle,
-  le as VarArray,
-  b as VarBase,
-  oe as VarButton,
-  Ne as VarCategory,
-  se as VarColor,
-  ie as VarDisplay,
-  ue as VarFile,
-  ve as VarImage,
-  me as VarMedia,
-  de as VarNumber,
-  Ee as VarScope,
-  ge as VarSelect,
-  fe as VarSlider,
-  pe as VarString,
-  he as VarToggle,
-  ce as VarUI,
-  Ve as VarXY,
-  C as useVarUIValue
+  ie as VarAngle,
+  se as VarArray,
+  I as VarBase,
+  me as VarButton,
+  ye 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,
+  ke as VarSlider,
+  we as VarString,
+  Ne as VarToggle,
+  ue as VarUI,
+  be as VarXY,
+  S as useVarUIValue
 };

dist/VarAngle.d.ts

@@ -8,2 +8,2 @@ /// <reference types="react" />
  */
-export declare const VarAngle: ({ label, path, value, onChange, disabled, readOnly, defaultValue, className, }: IVarAngleProps) => JSX.Element;
+export declare const VarAngle: ({ label, path, value, onChange, disabled, readOnly, defaultValue, className, error, errorPath, }: IVarAngleProps) => JSX.Element;

dist/VarArray.d.ts

@@ -9,2 +9,2 @@ import { ReactNode } from 'react';
  */
-export declare const VarArray: ({ path, value, onChange, disabled, className, children, }: IVarArrayProps) => JSX.Element;
+export declare const VarArray: ({ path, value, onChange, disabled, className, children, error, errorPath, }: IVarArrayProps) => JSX.Element;

dist/VarBase.d.ts

@@ -27,2 +27,6 @@ import { ReactNode } from 'react';
     column?: boolean;
+    /**
+     * Error to display.
+     */
+    error?: string;
 }
@@ -48,2 +52,7 @@ export interface IVarBaseValueProps<T> {
     onChange?: (value: T) => void;
+    /**
+     * Error path to resolve in object. (default: same as path)
+     */
+    errorPath?: string;
+    error?: string;
 }
@@ -56,2 +65,2 @@ export interface IVarBaseInputProps<T> extends IVarBaseProps, IVarBaseValueProps<T> {
  */
-export declare const VarBase: ({ label, children, className, disabled, readOnly, column, }: IVarBaseProps) => JSX.Element;
+export declare const VarBase: ({ label, children, className, disabled, readOnly, column, error, }: IVarBaseProps) => JSX.Element;

dist/VarColor.d.ts

@@ -13,2 +13,2 @@ /// <reference types="react" />
  */
-export declare const VarColor: ({ label, path, value, onChange, alpha, disabled, readOnly, className, }: IVarColorProps) => JSX.Element;
+export declare const VarColor: ({ label, path, value, onChange, alpha, disabled, readOnly, className, error, errorPath, }: IVarColorProps) => JSX.Element;

dist/VarDisplay.d.ts

@@ -13,2 +13,4 @@ /// <reference types="react" />
     value?: string | number;
+    errorPath?: string;
+    unit?: string;
 }
@@ -18,2 +20,2 @@ /**
  */
-export declare const VarDisplay: ({ label, path, value, disabled, readOnly, className, }: IVarDisplayProps) => JSX.Element;
+export declare const VarDisplay: ({ label, path, value, disabled, readOnly, className, error, errorPath, unit, }: IVarDisplayProps) => JSX.Element;

dist/VarFile.d.ts

@@ -17,2 +17,2 @@ /// <reference types="react" />
  */
-export declare const VarFile: ({ label, path, value, onChange, disabled, readOnly, className, accept, displayMetadata, }: IVarFileProps) => JSX.Element;
+export declare const VarFile: ({ label, path, value, onChange, disabled, readOnly, className, accept, displayMetadata, error, errorPath, }: IVarFileProps) => JSX.Element;

dist/VarImage.d.ts

@@ -8,2 +8,2 @@ /// <reference types="react" />
  */
-export declare const VarImage: ({ label, path, value, onChange, disabled, readOnly, className, }: IVarImageProps) => JSX.Element;
+export declare const VarImage: ({ label, path, value, onChange, disabled, readOnly, className, error, errorPath, }: IVarImageProps) => JSX.Element;

dist/VarMedia.d.ts

@@ -22,2 +22,2 @@ /// <reference types="react" />
  */
-export declare const VarMedia: ({ label, path, value, onChange, disabled, readOnly, className, acceptImage, acceptAudio, acceptVideo, }: IVarMediaProps) => JSX.Element;
+export declare const VarMedia: ({ label, path, value, onChange, disabled, readOnly, className, acceptImage, acceptAudio, acceptVideo, error, errorPath, }: IVarMediaProps) => JSX.Element;

dist/VarNumber.d.ts

@@ -25,2 +25,6 @@ /// <reference types="react" />
     showButtons?: boolean;
+    /**
+     * Unit to display to the right of the input field.
+     */
+    unit?: string;
 }
@@ -30,2 +34,2 @@ /**
  */
-export declare const VarNumber: ({ label, path, value, onChange, min, max, step, integer, showButtons, disabled, readOnly, className, }: IVarNumberProps) => JSX.Element;
+export declare const VarNumber: ({ label, path, value, onChange, min, max, step, integer, showButtons, disabled, readOnly, className, error, errorPath, unit, }: IVarNumberProps) => JSX.Element;

dist/VarScope.d.ts

@@ -6,2 +6,2 @@ import React from 'react';
  */
-export declare const VarScope: ({ path, value, onChange, children, }: React.PropsWithChildren<IVarBaseValueProps<any>>) => JSX.Element;
+export declare const VarScope: ({ path, value, onChange, children, error, errorPath, }: React.PropsWithChildren<IVarBaseValueProps<any>>) => JSX.Element;

dist/VarSelect.d.ts

@@ -27,2 +27,2 @@ /// <reference types="react" />
  */
-export declare const VarSelect: ({ label, path, value, onChange, options, disabled, readOnly, className, }: IVarSelectProps) => JSX.Element;
+export declare const VarSelect: ({ label, path, value, onChange, options, disabled, readOnly, className, error, errorPath, }: IVarSelectProps) => JSX.Element;

dist/VarSlider.d.ts

@@ -28,2 +28,6 @@ /// <reference types="react" />
     showButtons?: boolean;
+    /**
+     * Unit to display to the right of the input field.
+     */
+    unit?: string;
 }
@@ -33,2 +37,2 @@ /**
  */
-export declare const VarSlider: ({ label, path, value, onChange, min, max, step, integer, defaultValue, showInput, showButtons, disabled, readOnly, className, }: IVarSliderProps) => JSX.Element;
+export declare const VarSlider: ({ label, path, value, onChange, min, max, step, integer, defaultValue, showInput, showButtons, disabled, readOnly, className, error, errorPath, unit, }: IVarSliderProps) => JSX.Element;

dist/VarString.d.ts

@@ -21,2 +21,2 @@ /// <reference types="react" />
  */
-export declare const VarString: ({ label, path, value, onChange, maxLength, multiline, autoexpand, disabled, readOnly, className, }: IVarStringProps) => JSX.Element;
+export declare const VarString: ({ label, path, value, onChange, maxLength, multiline, autoexpand, disabled, readOnly, className, error, errorPath, }: IVarStringProps) => JSX.Element;

dist/VarToggle.d.ts

@@ -8,2 +8,2 @@ /// <reference types="react" />
  */
-export declare const VarToggle: ({ label, path, value, onChange, disabled, readOnly, className, }: IVarToggleProps) => JSX.Element;
+export declare const VarToggle: ({ label, path, value, onChange, disabled, readOnly, className, error, errorPath, }: IVarToggleProps) => JSX.Element;

dist/VarUI.d.ts

@@ -8,2 +8,6 @@ import { ReactNode } from 'react';
     /**
+     * A JavaScript object holding error information.
+     */
+    errors?: any;
+    /**
      * @deprecated Replaced by onChange
@@ -10,0 +14,0 @@ */

dist/VarXY.d.ts

@@ -21,2 +21,2 @@ /// <reference types="react" />
  */
-export declare const VarXY: ({ label, path, value, onChange, disabled, readOnly, className, defaultValue, min, max, step, }: IVarXYProps) => JSX.Element;
+export declare const VarXY: ({ label, path, value, onChange, disabled, readOnly, className, defaultValue, min, max, step, error, errorPath, }: IVarXYProps) => JSX.Element;

package.json

 {
-  "version": "1.4.3",
+  "version": "1.5.0",
   "license": "BSD-3-Clause-Clear",
@@ -35,3 +35,4 @@ "exports": {
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "coverage": "vitest --coverage --run"
   },
@@ -85,2 +86,3 @@ "peerDependencies": {
     "@vitejs/plugin-react": "^4.0.4",
+    "@vitest/coverage-v8": "^0.34.6",
     "canvas": "^2.11.2",
@@ -87,0 +89,0 @@ "chromatic": "^7.1.0",

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

72690

increased by7.11%

Number of package files

30

increased by3.45%

Lines of code

1081

increased by21.05%

Worsened metrics

Dev dependency count

29

increased by3.57%

No dependency changes