react-form-dto 1.0.1 → 1.0.3

package/README.md

@@ -38,6 +38,7 @@ It operates at a higher abstraction level where **layout, validation, rendering,
 - 🧩 **Extensible renderers** – plug in custom components
 - 🛡️ **Strong TypeScript typing** – safe, predictable APIs
 - 🚀 **Enterprise-ready** – optimized for large, config-driven forms
+- 🔎 **Nested condition engine** – combine AND/OR groups for powerful, multi‑field visibility rules
 
 ---
 
@@ -92,6 +93,12 @@ pnpm add react-form-dto
 
 ---
 
+## Release Notes
+
+See [CHANGELOG.md](./.github/CHANGELOG.md) for detailed version history.
+
+---
+
 ## Core Concepts
 
 ### DTO as Source of Truth
@@ -267,6 +274,30 @@ const profileForm: FormDTO = {
 
 ---
 
+## 🎭 Conditional Visibility with `visibleWhen`
+
+React Form DTO supports dynamic field visibility based on the values of other fields in the form. This is achieved through the `visibleWhen` property, which allows you to define simple conditions or complex logical expressions.
+
+### Basic Usage
+
+Show a field only when another field has a specific value:
+
+```tsx
+{
+  id: "partnerName",
+  type: "text",
+  label: "Partner Name",
+  visibleWhen: {
+    field: "maritalStatus",
+    equals: "married"
+  }
+}
+```
+
+For detail documentation, please visit [Docs](https://shakir-afridi.github.io/react-form-dto/docs/api/visibleWhen.html)
+
+---
+
 ## 🌍 Internationalization (I18n)
 
 React Form DTO has built-in support for multi-language forms through `I18String` and `I18nOption` types.

package/dist/components/FormBuilder.d.ts

@@ -25,6 +25,7 @@ type FormBuilderProps = {
     renderers?: Record<string, React.ComponentType<any>>;
     /** Current locale for i18n string resolution (default: 'en') */
     locale?: string;
+    handleChangeCallback?: (id: string, val: any) => void;
 };
 /**
  * FormBuilder component that dynamically renders a form based on a FormDTO definition.

package/dist/hooks/useFormBuilder.d.ts

@@ -12,7 +12,7 @@ type Errors = Record<string, string | null>;
  * form.handleChange('email', 'user@example.com');
  * const errors = form.validateAll();
  */
-export declare function useFormBuilder(dto: FormDTO, locale?: string): {
+export declare function useFormBuilder(dto: FormDTO, locale?: string, handleChangeCallback?: (id: string, val: any) => void): {
     /** Current form values for all fields */
     values: Record<string, any>;
     /** Function to update a field value */

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { FormBuilder, Section, Field, TextAreaInput, AutoCompleteField, MultiAutoCompleteField, RadioInput, SelectInput, TextInput, CheckBoxInput, } from './components';
 export { validateAll, validateField, validationRules } from './utils';
-export type { FieldDTO, SectionDTO, FormDTO, InputType, Validations, } from './types';
+export type { FieldDTO, SectionDTO, FormDTO, InputType, Validations, Condition as VisibleWhenCondition, FieldCondition as VisibleWhenFieldCondition, ConditionGroup as VisibleWhenConditionGroup, } from './types';
 export { useFormBuilder } from './hooks';

package/dist/react-form-dto.es.js

@@ -1,67 +1,67 @@
-import G, { useState as W, useImperativeHandle as de } from "react";
-import { FormControl as J, InputLabel as pe, Select as be, MenuItem as fe, Typography as R, TextField as k, FormControlLabel as X, Checkbox as he, FormHelperText as H, Autocomplete as Z, FormLabel as xe, RadioGroup as ve, Radio as ge, Box as Ee, Grid as V } from "@mui/material";
+import X, { useState as M, useImperativeHandle as de } from "react";
+import { FormControl as H, InputLabel as fe, Select as be, MenuItem as he, Typography as T, TextField as k, FormControlLabel as Z, Checkbox as xe, FormHelperText as Q, Autocomplete as K, FormLabel as ve, RadioGroup as ge, Radio as Ee, Box as ye, Grid as B } from "@mui/material";
 var S = { exports: {} }, _ = {};
-var M;
-function _e() {
-  if (M) return _;
-  M = 1;
+var U;
+function je() {
+  if (U) return _;
+  U = 1;
   var e = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
-  function n(u, o, a) {
-    var s = null;
-    if (a !== void 0 && (s = "" + a), o.key !== void 0 && (s = "" + o.key), "key" in o) {
-      a = {};
+  function n(a, o, s) {
+    var u = null;
+    if (s !== void 0 && (u = "" + s), o.key !== void 0 && (u = "" + o.key), "key" in o) {
+      s = {};
       for (var c in o)
-        c !== "key" && (a[c] = o[c]);
-    } else a = o;
-    return o = a.ref, {
+        c !== "key" && (s[c] = o[c]);
+    } else s = o;
+    return o = s.ref, {
       $$typeof: e,
-      type: u,
-      key: s,
+      type: a,
+      key: u,
       ref: o !== void 0 ? o : null,
-      props: a
+      props: s
     };
   }
   return _.Fragment = t, _.jsx = n, _.jsxs = n, _;
 }
-var j = {};
-var B;
-function je() {
-  return B || (B = 1, process.env.NODE_ENV !== "production" && (function() {
+var R = {};
+var G;
+function _e() {
+  return G || (G = 1, process.env.NODE_ENV !== "production" && (function() {
     function e(r) {
       if (r == null) return null;
       if (typeof r == "function")
-        return r.$$typeof === ie ? null : r.displayName || r.name || null;
+        return r.$$typeof === ce ? null : r.displayName || r.name || null;
       if (typeof r == "string") return r;
       switch (r) {
-        case $:
+        case O:
           return "Fragment";
-        case re:
+        case te:
           return "Profiler";
-        case ee:
+        case re:
           return "StrictMode";
         case oe:
           return "Suspense";
-        case se:
+        case ue:
           return "SuspenseList";
-        case le:
+        case ie:
           return "Activity";
       }
       if (typeof r == "object")
         switch (typeof r.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), r.$$typeof) {
-          case K:
+          case w:
             return "Portal";
-          case ne:
+          case ae:
             return r.displayName || "Context";
-          case te:
+          case ne:
             return (r._context.displayName || "Context") + ".Consumer";
-          case ae:
+          case se:
             var i = r.render;
             return r = r.displayName, r || (r = i.displayName || i.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
-          case ue:
+          case le:
             return i = r.displayName || null, i !== null ? i : e(r.type) || "Memo";
-          case w:
+          case F:
             i = r._payload, r = r._init;
             try {
               return e(r(i));
@@ -82,17 +82,17 @@ function je() {
       }
       if (i) {
         i = console;
-        var m = i.error, d = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
+        var m = i.error, p = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
         return m.call(
           i,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          d
+          p
         ), t(r);
       }
     }
-    function u(r) {
-      if (r === $) return "<>";
-      if (typeof r == "object" && r !== null && r.$$typeof === w)
+    function a(r) {
+      if (r === O) return "<>";
+      if (typeof r == "object" && r !== null && r.$$typeof === F)
         return "<...>";
       try {
         var i = e(r);
@@ -102,14 +102,14 @@ function je() {
       }
     }
     function o() {
-      var r = O.A;
+      var r = P.A;
       return r === null ? null : r.getOwner();
     }
-    function a() {
+    function s() {
       return Error("react-stack-top-frame");
     }
-    function s(r) {
-      if (I.call(r, "key")) {
+    function u(r) {
+      if (D.call(r, "key")) {
         var i = Object.getOwnPropertyDescriptor(r, "key").get;
         if (i && i.isReactWarning) return !1;
       }
@@ -117,7 +117,7 @@ function je() {
     }
     function c(r, i) {
       function m() {
-        N || (N = !0, console.error(
+        q || (q = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           i
         ));
@@ -129,19 +129,19 @@ function je() {
     }
     function h() {
       var r = e(this.type);
-      return D[r] || (D[r] = !0, console.error(
+      return z[r] || (z[r] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), r = this.props.ref, r !== void 0 ? r : null;
     }
-    function f(r, i, m, d, T, P) {
-      var p = m.ref;
+    function x(r, i, m, p, A, I) {
+      var d = m.ref;
       return r = {
-        $$typeof: L,
+        $$typeof: v,
         type: r,
         key: i,
         props: m,
-        _owner: d
-      }, (p !== void 0 ? p : null) !== null ? Object.defineProperty(r, "ref", {
+        _owner: p
+      }, (d !== void 0 ? d : null) !== null ? Object.defineProperty(r, "ref", {
         enumerable: !1,
         get: h
       }) : Object.defineProperty(r, "ref", { enumerable: !1, value: null }), r._store = {}, Object.defineProperty(r._store, "validated", {
@@ -158,127 +158,127 @@ function je() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: T
+        value: A
       }), Object.defineProperty(r, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: P
+        value: I
       }), Object.freeze && (Object.freeze(r.props), Object.freeze(r)), r;
     }
-    function g(r, i, m, d, T, P) {
-      var p = i.children;
-      if (p !== void 0)
-        if (d)
-          if (ce(p)) {
-            for (d = 0; d < p.length; d++)
-              v(p[d]);
-            Object.freeze && Object.freeze(p);
+    function E(r, i, m, p, A, I) {
+      var d = i.children;
+      if (d !== void 0)
+        if (p)
+          if (me(d)) {
+            for (p = 0; p < d.length; p++)
+              y(d[p]);
+            Object.freeze && Object.freeze(d);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else v(p);
-      if (I.call(i, "key")) {
-        p = e(r);
-        var E = Object.keys(i).filter(function(me) {
-          return me !== "key";
+        else y(d);
+      if (D.call(i, "key")) {
+        d = e(r);
+        var j = Object.keys(i).filter(function(pe) {
+          return pe !== "key";
         });
-        d = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", q[p + d] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
+        p = 0 < j.length ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}", V[d + p] || (j = 0 < j.length ? "{" + j.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          d,
           p,
-          E,
-          p
-        ), q[p + d] = !0);
+          d,
+          j,
+          d
+        ), V[d + p] = !0);
       }
-      if (p = null, m !== void 0 && (n(m), p = "" + m), s(i) && (n(i.key), p = "" + i.key), "key" in i) {
+      if (d = null, m !== void 0 && (n(m), d = "" + m), u(i) && (n(i.key), d = "" + i.key), "key" in i) {
         m = {};
-        for (var C in i)
-          C !== "key" && (m[C] = i[C]);
+        for (var L in i)
+          L !== "key" && (m[L] = i[L]);
       } else m = i;
-      return p && c(
+      return d && c(
         m,
         typeof r == "function" ? r.displayName || r.name || "Unknown" : r
-      ), f(
+      ), x(
         r,
-        p,
+        d,
         m,
         o(),
-        T,
-        P
+        A,
+        I
       );
     }
-    function v(r) {
-      y(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === w && (r._payload.status === "fulfilled" ? y(r._payload.value) && r._payload.value._store && (r._payload.value._store.validated = 1) : r._store && (r._store.validated = 1));
-    }
     function y(r) {
-      return typeof r == "object" && r !== null && r.$$typeof === L;
+      g(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === F && (r._payload.status === "fulfilled" ? g(r._payload.value) && r._payload.value._store && (r._payload.value._store.validated = 1) : r._store && (r._store.validated = 1));
+    }
+    function g(r) {
+      return typeof r == "object" && r !== null && r.$$typeof === v;
     }
-    var x = G, L = Symbol.for("react.transitional.element"), K = Symbol.for("react.portal"), $ = Symbol.for("react.fragment"), ee = Symbol.for("react.strict_mode"), re = Symbol.for("react.profiler"), te = Symbol.for("react.consumer"), ne = Symbol.for("react.context"), ae = Symbol.for("react.forward_ref"), oe = Symbol.for("react.suspense"), se = Symbol.for("react.suspense_list"), ue = Symbol.for("react.memo"), w = Symbol.for("react.lazy"), le = Symbol.for("react.activity"), ie = Symbol.for("react.client.reference"), O = x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, ce = Array.isArray, F = console.createTask ? console.createTask : function() {
+    var b = X, v = Symbol.for("react.transitional.element"), w = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), re = Symbol.for("react.strict_mode"), te = Symbol.for("react.profiler"), ne = Symbol.for("react.consumer"), ae = Symbol.for("react.context"), se = Symbol.for("react.forward_ref"), oe = Symbol.for("react.suspense"), ue = Symbol.for("react.suspense_list"), le = Symbol.for("react.memo"), F = Symbol.for("react.lazy"), ie = Symbol.for("react.activity"), ce = Symbol.for("react.client.reference"), P = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, D = Object.prototype.hasOwnProperty, me = Array.isArray, C = console.createTask ? console.createTask : function() {
       return null;
     };
-    x = {
+    b = {
       react_stack_bottom_frame: function(r) {
         return r();
       }
     };
-    var N, D = {}, z = x.react_stack_bottom_frame.bind(
-      x,
-      a
-    )(), Y = F(u(a)), q = {};
-    j.Fragment = $, j.jsx = function(r, i, m) {
-      var d = 1e4 > O.recentlyCreatedOwnerStacks++;
-      return g(
+    var q, z = {}, Y = b.react_stack_bottom_frame.bind(
+      b,
+      s
+    )(), W = C(a(s)), V = {};
+    R.Fragment = O, R.jsx = function(r, i, m) {
+      var p = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return E(
         r,
         i,
         m,
         !1,
-        d ? Error("react-stack-top-frame") : z,
-        d ? F(u(r)) : Y
+        p ? Error("react-stack-top-frame") : Y,
+        p ? C(a(r)) : W
       );
-    }, j.jsxs = function(r, i, m) {
-      var d = 1e4 > O.recentlyCreatedOwnerStacks++;
-      return g(
+    }, R.jsxs = function(r, i, m) {
+      var p = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return E(
         r,
         i,
         m,
         !0,
-        d ? Error("react-stack-top-frame") : z,
-        d ? F(u(r)) : Y
+        p ? Error("react-stack-top-frame") : Y,
+        p ? C(a(r)) : W
       );
     };
-  })()), j;
+  })()), R;
 }
-var U;
+var J;
 function Re() {
-  return U || (U = 1, process.env.NODE_ENV === "production" ? S.exports = _e() : S.exports = je()), S.exports;
+  return J || (J = 1, process.env.NODE_ENV === "production" ? S.exports = je() : S.exports = _e()), S.exports;
 }
 var l = Re();
-function b(e, t = "en") {
+function f(e, t = "en") {
   return e ? typeof e == "string" ? e : e[t] || e.en || Object.values(e)[0] || "" : "";
 }
-function A(e, t = "en") {
+function $(e, t = "en") {
   return e ? e.map((n) => typeof n == "string" ? { value: n, label: n } : {
     value: n.value,
-    label: b(n.label, t)
+    label: f(n.label, t)
   }) : [];
 }
-function ye({
+function Te({
   field: e,
   value: t,
   onChange: n,
-  error: u,
+  error: a,
   locale: o = "en"
 }) {
-  const a = A(e.options || [], o);
-  return /* @__PURE__ */ l.jsxs(J, { fullWidth: !0, children: [
-    /* @__PURE__ */ l.jsx(pe, { id: `${e.id}-label`, children: b(e.label, o) }),
+  const s = $(e.options || [], o);
+  return /* @__PURE__ */ l.jsxs(H, { fullWidth: !0, children: [
+    /* @__PURE__ */ l.jsx(fe, { id: `${e.id}-label`, children: f(e.label, o) }),
     /* @__PURE__ */ l.jsx(
       be,
       {
@@ -286,31 +286,31 @@ function ye({
         value: t,
         id: e.id,
         name: e.id,
-        onChange: (s) => n(s.target.value),
-        label: b(e.label, o),
-        error: !!u,
-        children: a?.map((s) => /* @__PURE__ */ l.jsx(fe, { value: s.value, children: s.label }, s.label))
+        onChange: (u) => n(u.target.value),
+        label: f(e.label, o),
+        error: !!a,
+        children: s?.map((u) => /* @__PURE__ */ l.jsx(he, { value: u.value, children: u.label }, u.label))
       }
     ),
-    u && /* @__PURE__ */ l.jsx(R, { variant: "caption", color: "error", children: u })
+    a && /* @__PURE__ */ l.jsx(T, { variant: "caption", color: "error", children: a })
   ] });
 }
-function Te({
+function Ae({
   field: e,
   value: t,
   onChange: n,
-  error: u,
+  error: a,
   locale: o
 }) {
-  return console.log("error", u), /* @__PURE__ */ l.jsx(
+  return console.log("error", a), /* @__PURE__ */ l.jsx(
     k,
     {
       fullWidth: !0,
-      label: b(e.label, o),
-      placeholder: b(e.placeholder || "", o),
+      label: f(e.label, o),
+      placeholder: f(e.placeholder || "", o),
       value: t || "",
       name: e.id,
-      onChange: (a) => n(a.target.value),
+      onChange: (s) => n(s.target.value),
       disabled: e.disabled,
       type: e.type,
       slotProps: {
@@ -318,8 +318,8 @@ function Te({
           shrink: e.type === "date" ? !0 : void 0
         }
       },
-      error: !!u,
-      helperText: u
+      error: !!a,
+      helperText: a
     }
   );
 }
@@ -327,98 +327,98 @@ function Se({
   field: e,
   value: t,
   onChange: n,
-  error: u,
+  error: a,
   locale: o
 }) {
   return /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
     /* @__PURE__ */ l.jsx(
-      X,
+      Z,
       {
         name: e.id,
         control: /* @__PURE__ */ l.jsx(
-          he,
+          xe,
           {
             checked: !!t,
-            onChange: (a) => n(a.target.checked),
+            onChange: (s) => n(s.target.checked),
             disabled: e.disabled
           }
         ),
-        label: b(e.label, o)
+        label: f(e.label, o)
       }
     ),
-    u && /* @__PURE__ */ l.jsx(H, { children: u })
+    a && /* @__PURE__ */ l.jsx(Q, { children: a })
   ] });
 }
 const ke = ({
   field: e,
   value: t,
   onChange: n,
-  error: u,
+  error: a,
   locale: o
 }) => {
-  const a = A(e.options || [], o);
+  const s = $(e.options || [], o);
   return /* @__PURE__ */ l.jsx(
-    Z,
+    K,
     {
       fullWidth: !0,
-      options: a || [],
+      options: s || [],
       value: t || null,
-      onChange: (s, c) => n(c),
-      renderInput: (s) => /* @__PURE__ */ l.jsx(
+      onChange: (u, c) => n(c),
+      renderInput: (u) => /* @__PURE__ */ l.jsx(
         k,
         {
-          ...s,
+          ...u,
           name: e.id,
-          label: b(e.label, o),
-          placeholder: b(
+          label: f(e.label, o),
+          placeholder: f(
             e.placeholder || "",
             o
           ),
           disabled: e.disabled,
-          error: !!u,
-          helperText: u
+          error: !!a,
+          helperText: a
         }
       )
     }
   );
-}, Ae = ({
+}, $e = ({
   field: e,
   value: t,
   onChange: n,
-  error: u,
+  error: a,
   locale: o
 }) => {
-  const a = A(e.options || [], o);
+  const s = $(e.options || [], o);
   return /* @__PURE__ */ l.jsx(
-    Z,
+    K,
     {
       multiple: !0,
       fullWidth: !0,
-      options: a || [],
+      options: s || [],
       value: t || [],
-      onChange: (s, c) => n(c),
-      renderInput: (s) => /* @__PURE__ */ l.jsx(
+      onChange: (u, c) => n(c),
+      renderInput: (u) => /* @__PURE__ */ l.jsx(
         k,
         {
-          ...s,
+          ...u,
           name: e.id,
-          label: b(e.label, o),
-          placeholder: b(
+          label: f(e.label, o),
+          placeholder: f(
             e.placeholder || "",
             o
           ),
           disabled: e.disabled,
-          error: !!u,
-          helperText: u
+          error: !!a,
+          helperText: a
         }
       )
     }
   );
-}, $e = ({
+}, we = ({
   field: e,
   value: t,
   onChange: n,
-  error: u,
+  error: a,
   locale: o = "en"
 }) => /* @__PURE__ */ l.jsx(
   k,
@@ -426,53 +426,53 @@ const ke = ({
     fullWidth: !0,
     multiline: !0,
     rows: e.rows || 4,
-    label: b(e.label, o),
-    placeholder: b(e.placeholder || "", o),
+    label: f(e.label, o),
+    placeholder: f(e.placeholder || "", o),
     value: t || "",
-    onChange: (a) => n(a.target.value),
+    onChange: (s) => n(s.target.value),
     required: !!e.validations?.required,
     disabled: e.disabled,
-    error: !!u,
-    helperText: u
+    error: !!a,
+    helperText: a
   }
-), we = ({
+), Oe = ({
   field: e,
   value: t,
   onChange: n,
-  error: u,
+  error: a,
   locale: o = "en"
 }) => {
-  const a = A(e.options || [], o);
-  return /* @__PURE__ */ l.jsxs(J, { component: "fieldset", fullWidth: !0, error: !!u, children: [
-    /* @__PURE__ */ l.jsxs(xe, { component: "legend", children: [
-      b(e.label, o),
+  const s = $(e.options || [], o);
+  return /* @__PURE__ */ l.jsxs(H, { component: "fieldset", fullWidth: !0, error: !!a, children: [
+    /* @__PURE__ */ l.jsxs(ve, { component: "legend", children: [
+      f(e.label, o),
       e.validations?.required ? " *" : ""
     ] }),
     /* @__PURE__ */ l.jsx(
-      ve,
+      ge,
       {
         row: e.layout?.direction === "row" || !1,
         value: t || "",
-        onChange: (s) => n(s.target.value),
-        children: (a || []).map((s) => /* @__PURE__ */ l.jsx(
-          X,
+        onChange: (u) => n(u.target.value),
+        children: (s || []).map((u) => /* @__PURE__ */ l.jsx(
+          Z,
           {
-            value: s,
-            control: /* @__PURE__ */ l.jsx(ge, {}),
-            label: s.label,
+            value: u.value,
+            control: /* @__PURE__ */ l.jsx(Ee, {}),
+            label: u.label,
             disabled: e.disabled
           },
-          s.label
+          u.label
         ))
       }
     ),
-    u && /* @__PURE__ */ l.jsx(H, { children: u })
+    a && /* @__PURE__ */ l.jsx(Q, { children: a })
   ] });
-}, Oe = ({
+}, Fe = ({
   field: e,
   value: t,
   onChange: n,
-  error: u,
+  error: a,
   locale: o = "en"
 }) => {
   switch (e.type) {
@@ -482,23 +482,23 @@ const ke = ({
     case "password":
     case "number":
       return /* @__PURE__ */ l.jsx(
-        Te,
+        Ae,
         {
           field: e,
           value: t,
           onChange: n,
-          error: u,
+          error: a,
           locale: o
         }
       );
     case "select":
       return /* @__PURE__ */ l.jsx(
-        ye,
+        Te,
         {
           field: e,
           value: t,
           onChange: n,
-          error: u,
+          error: a,
           locale: o
         }
       );
@@ -509,18 +509,18 @@ const ke = ({
           field: e,
           value: t,
           onChange: n,
-          error: u,
+          error: a,
           locale: o
         }
       );
     case "multi-autocomplete":
       return /* @__PURE__ */ l.jsx(
-        Ae,
+        $e,
         {
           field: e,
           value: t,
           onChange: n,
-          error: u,
+          error: a,
           locale: o
         }
       );
@@ -531,29 +531,29 @@ const ke = ({
           field: e,
           value: t,
           onChange: n,
-          error: u,
+          error: a,
           locale: o
         }
       );
     case "textarea":
       return /* @__PURE__ */ l.jsx(
-        $e,
+        we,
         {
           field: e,
           value: t,
           onChange: n,
-          error: u,
+          error: a,
           locale: o
         }
       );
     case "radio":
       return /* @__PURE__ */ l.jsx(
-        we,
+        Oe,
         {
           field: e,
           value: t,
           onChange: n,
-          error: u,
+          error: a,
           locale: o
         }
       );
@@ -563,27 +563,27 @@ const ke = ({
         e.type
       ] });
   }
-}, Fe = ({
+}, Pe = ({
   field: e,
   value: t,
   onChange: n,
-  error: u,
+  error: a,
   renderers: o = {},
-  locale: a = "en"
+  locale: s = "en"
 }) => {
-  const s = o[e.type] || Oe;
+  const u = o[e.type] || Fe;
   return /* @__PURE__ */ l.jsx(
-    s,
+    u,
     {
       field: e,
       value: t,
       onChange: n,
-      error: u,
-      locale: a
+      error: a,
+      locale: s
     }
   );
 };
-function Pe(e) {
+function Ce(e) {
   const t = e ?? 12;
   return {
     xs: 12,
@@ -597,57 +597,7 @@ function Pe(e) {
     xl: t
   };
 }
-const Ce = ({
-  section: e,
-  values: t,
-  onChange: n,
-  renderers: u,
-  validateField: o,
-  locale: a = "en"
-}) => /* @__PURE__ */ l.jsxs(Ee, { mb: 2, children: [
-  e.heading && /* @__PURE__ */ l.jsx(
-    R,
-    {
-      variant: "h6",
-      sx: {
-        fontSize: e.headingFontSize ? `${e.headingFontSize}rem` : "1.25rem"
-      },
-      gutterBottom: !0,
-      color: "black",
-      children: b(e.heading, a)
-    }
-  ),
-  e.description && /* @__PURE__ */ l.jsx(
-    R,
-    {
-      variant: "body2",
-      sx: {
-        fontSize: e.descriptionFontSize ? `${e.descriptionFontSize}rem` : "inherit"
-      },
-      color: "textSecondary",
-      gutterBottom: !0,
-      children: b(e.description, a)
-    }
-  ),
-  /* @__PURE__ */ l.jsx(V, { container: !0, spacing: 2, children: e.fields.map((s) => /* @__PURE__ */ l.jsx(
-    V,
-    {
-      size: Pe(s.layout?.cols),
-      children: /* @__PURE__ */ l.jsx(
-        Fe,
-        {
-          field: s,
-          value: t[s.id],
-          onChange: (c) => n(s.id, c),
-          renderers: u,
-          error: o(s.id)?.join(","),
-          locale: a
-        }
-      )
-    },
-    s.id
-  )) })
-] }), ze = {
+const ze = {
   /**
    * Validates that a required field has a value.
    * @param field - The field definition
@@ -727,62 +677,137 @@ const Ce = ({
     }
     return null;
   }
-}, Le = (e, t, n = "en") => {
-  const u = {};
+}, Ie = (e, t, n = "en") => {
+  const a = {};
   return e.sections.forEach((o) => {
-    o.fields.forEach((a) => {
-      const s = Q(e, t, a.id);
-      s.length > 0 && (u[a.id] = s);
+    o.fields.forEach((s) => {
+      const u = ee(e, t, s.id);
+      u.length > 0 && (a[s.id] = u);
     });
-  }), u;
-}, Q = (e, t, n, u = "en") => {
-  const o = e.sections.flatMap((f) => f.fields).find((f) => f.id === n);
+  }), a;
+}, ee = (e, t, n, a = "en") => {
+  const o = e.sections.flatMap((x) => x.fields).find((x) => x.id === n);
   if (!o) return [];
-  const a = o.validations || {}, s = t[n], c = [], h = b(o.label, u);
-  if (a.required && (s == null || s === "") && c.push(
-    typeof a.required == "string" ? a.required : `${h} is required`
-  ), a.min !== void 0 && typeof s == "number" && s < a.min && c.push(`${h} must be at least ${a.min}`), a.max !== void 0 && typeof s == "number" && s > a.max && c.push(`${h} must be at most ${a.max}`), a.minLength !== void 0 && typeof s == "string" && s.length < a.minLength && c.push(`${h} must be at least ${a.minLength} characters`), a.maxLength !== void 0 && typeof s == "string" && s.length > a.maxLength && c.push(`${h} must be at most ${a.maxLength} characters`), a.pattern && typeof s == "string" && !a.pattern.test(s) && c.push(`${h} is invalid`), a.validate) {
-    const f = a.validate(s);
-    f && c.push(b(f, u));
+  const s = o.validations || {}, u = t[n], c = [], h = f(o.label, a);
+  if (s.required && (u == null || u === "") && c.push(
+    typeof s.required == "string" ? s.required : `${h} is required`
+  ), s.min !== void 0 && typeof u == "number" && u < s.min && c.push(`${h} must be at least ${s.min}`), s.max !== void 0 && typeof u == "number" && u > s.max && c.push(`${h} must be at most ${s.max}`), s.minLength !== void 0 && typeof u == "string" && u.length < s.minLength && c.push(`${h} must be at least ${s.minLength} characters`), s.maxLength !== void 0 && typeof u == "string" && u.length > s.maxLength && c.push(`${h} must be at most ${s.maxLength} characters`), s.pattern && typeof u == "string" && !s.pattern.test(u) && c.push(`${h} is invalid`), s.validate) {
+    const x = s.validate(u);
+    x && c.push(f(x, a));
   }
   return c;
 };
-function Ie(e, t = "en") {
-  const [n, u] = W({}), [o, a] = W({});
+function N(e, t) {
+  if (!e)
+    return !0;
+  if ("field" in e) {
+    let n = t[e.field] ?? "";
+    return Array.isArray(n) ? n = n.map((a) => a.value ?? "") : typeof n == "object" && n !== null && (n = n.value ?? ""), e.equals !== void 0 ? n === e.equals : e.notEquals !== void 0 ? n !== e.notEquals : e.in !== void 0 ? Array.isArray(n) ? e.in ? n.some((a) => e.in.includes(a)) : !1 : e.in.includes(n) : e.notIn !== void 0 ? Array.isArray(n) ? n.every((a) => !e.notIn.includes(a)) : !e.notIn.includes(n) : e.greaterThan !== void 0 ? n > e.greaterThan : e.lessThan !== void 0 ? n < e.lessThan : !0;
+  }
+  if ("operator" in e) {
+    if (e.operator === "AND")
+      return e.conditions.every(
+        (a) => N(a, t)
+      );
+    if (e.operator === "OR")
+      return e.conditions.some(
+        (n) => N(n, t)
+      );
+  }
+  return !1;
+}
+const Le = ({
+  section: e,
+  values: t,
+  onChange: n,
+  renderers: a,
+  validateField: o,
+  locale: s = "en"
+}) => /* @__PURE__ */ l.jsxs(ye, { mb: 2, children: [
+  e.heading && /* @__PURE__ */ l.jsx(
+    T,
+    {
+      variant: "h6",
+      sx: {
+        fontSize: e.headingFontSize ? `${e.headingFontSize}rem` : "1.25rem"
+      },
+      gutterBottom: !0,
+      color: "black",
+      children: f(e.heading, s)
+    }
+  ),
+  e.description && /* @__PURE__ */ l.jsx(
+    T,
+    {
+      variant: "body2",
+      sx: {
+        fontSize: e.descriptionFontSize ? `${e.descriptionFontSize}rem` : "inherit"
+      },
+      color: "textSecondary",
+      gutterBottom: !0,
+      children: f(e.description, s)
+    }
+  ),
+  /* @__PURE__ */ l.jsx(B, { container: !0, spacing: 2, children: e.fields.map(
+    (u) => N(u.visibleWhen, t) && /* @__PURE__ */ l.jsx(
+      B,
+      {
+        size: Ce(u.layout?.cols),
+        children: /* @__PURE__ */ l.jsx(
+          Pe,
+          {
+            field: u,
+            value: t[u.id],
+            onChange: (c) => n(u.id, c),
+            renderers: a,
+            error: o(u.id)?.join(","),
+            locale: s
+          }
+        )
+      },
+      u.id
+    )
+  ) })
+] });
+function Ne(e, t = "en", n) {
+  const [a, o] = M({}), [s, u] = M({});
   return {
     /** Current form values for all fields */
-    values: n,
+    values: a,
     /** Function to update a field value */
-    handleChange: (v, y) => {
-      u((x) => ({ ...x, [v]: y })), a((x) => ({ ...x, [v]: null }));
+    handleChange: (g, b) => {
+      if (o((v) => ({ ...v, [g]: b })), u((v) => ({ ...v, [g]: null })), n) {
+        let v = b;
+        Array.isArray(b) ? v = b.map((w) => w.value ?? "") : typeof b == "object" && b !== null && (v = b.value ?? ""), n(g, v);
+      }
     },
     /** Function to validate all fields */
-    validateAll: () => Le(e, n, t),
+    validateAll: () => Ie(e, a, t),
     /** Function to get all current form values */
-    getValues: () => n,
+    getValues: () => a,
     /** Function to get all current form errors */
-    getErrors: () => o,
+    getErrors: () => s,
     /** Function to validate a specific field */
-    validateField: (v) => Q(e, n, v, t)
+    validateField: (g) => ee(e, a, g, t)
   };
 }
-const Ye = G.forwardRef(({ dto: e, renderers: t, locale: n = "en" }, u) => {
+const Ye = X.forwardRef(({ dto: e, renderers: t, locale: n = "en", handleChangeCallback: a }, o) => {
   const {
-    values: o,
-    handleChange: a,
-    getValues: s,
-    getErrors: c,
-    validateAll: h,
-    validateField: f
-  } = Ie(e, n);
-  return de(u, () => ({
-    getValues: s,
-    getErrors: c,
-    validateAll: h,
-    validateField: f
+    values: s,
+    handleChange: u,
+    getValues: c,
+    getErrors: h,
+    validateAll: x,
+    validateField: E
+  } = Ne(e, n, a);
+  return de(o, () => ({
+    getValues: c,
+    getErrors: h,
+    validateAll: x,
+    validateField: E
   })), /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
     e.title && /* @__PURE__ */ l.jsx(
-      R,
+      T,
       {
         variant: "h5",
         color: "black",
@@ -791,11 +816,11 @@ const Ye = G.forwardRef(({ dto: e, renderers: t, locale: n = "en" }, u) => {
           fontWeight: "bold"
         },
         gutterBottom: !0,
-        children: b(e.title, n)
+        children: f(e.title, n)
       }
     ),
     e.description && /* @__PURE__ */ l.jsx(
-      R,
+      T,
       {
         component: "p",
         sx: {
@@ -803,36 +828,36 @@ const Ye = G.forwardRef(({ dto: e, renderers: t, locale: n = "en" }, u) => {
         },
         color: "textSecondary",
         gutterBottom: !0,
-        children: b(e.description, n)
+        children: f(e.description, n)
       }
     ),
-    e.sections.map((g) => /* @__PURE__ */ l.jsx(
-      Ce,
+    e.sections.map((y) => /* @__PURE__ */ l.jsx(
+      Le,
       {
-        section: g,
-        values: o,
-        onChange: a,
+        section: y,
+        values: s,
+        onChange: u,
         renderers: t,
-        validateField: f,
+        validateField: E,
         locale: n
       },
-      g.id
+      y.id
     ))
   ] });
 });
 export {
   ke as AutoCompleteField,
   Se as CheckBoxInput,
-  Fe as Field,
+  Pe as Field,
   Ye as FormBuilder,
-  Ae as MultiAutoCompleteField,
-  we as RadioInput,
-  Ce as Section,
-  ye as SelectInput,
-  $e as TextAreaInput,
-  Te as TextInput,
-  Ie as useFormBuilder,
-  Le as validateAll,
-  Q as validateField,
+  $e as MultiAutoCompleteField,
+  Oe as RadioInput,
+  Le as Section,
+  Te as SelectInput,
+  we as TextAreaInput,
+  Ae as TextInput,
+  Ne as useFormBuilder,
+  Ie as validateAll,
+  ee as validateField,
   ze as validationRules
 };

package/dist/react-form-dto.umd.js

@@ -1,6 +1,6 @@
-(function(p,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("@mui/material")):typeof define=="function"&&define.amd?define(["exports","react","@mui/material"],g):(p=typeof globalThis<"u"?globalThis:p||self,g(p.ReactFormDTO={},p.React,p.MaterialUI))})(this,(function(p,g,c){"use strict";var S={exports:{}},R={};var N;function ae(){if(N)return R;N=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(u,o,a){var s=null;if(a!==void 0&&(s=""+a),o.key!==void 0&&(s=""+o.key),"key"in o){a={};for(var d in o)d!=="key"&&(a[d]=o[d])}else a=o;return o=a.ref,{$$typeof:e,type:u,key:s,ref:o!==void 0?o:null,props:a}}return R.Fragment=r,R.jsx=n,R.jsxs=n,R}var _={};var D;function oe(){return D||(D=1,process.env.NODE_ENV!=="production"&&(function(){function e(t){if(t==null)return null;if(typeof t=="function")return t.$$typeof===Te?null:t.displayName||t.name||null;if(typeof t=="string")return t;switch(t){case O:return"Fragment";case pe:return"Profiler";case me:return"StrictMode";case xe:return"Suspense";case ve:return"SuspenseList";case Ee:return"Activity"}if(typeof t=="object")switch(typeof t.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),t.$$typeof){case de:return"Portal";case be:return t.displayName||"Context";case fe:return(t._context.displayName||"Context")+".Consumer";case he:var i=t.render;return t=t.displayName,t||(t=i.displayName||i.name||"",t=t!==""?"ForwardRef("+t+")":"ForwardRef"),t;case ge:return i=t.displayName||null,i!==null?i:e(t.type)||"Memo";case C:i=t._payload,t=t._init;try{return e(t(i))}catch{}}return null}function r(t){return""+t}function n(t){try{r(t);var i=!1}catch{i=!0}if(i){i=console;var m=i.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&t[Symbol.toStringTag]||t.constructor.name||"Object";return m.call(i,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),r(t)}}function u(t){if(t===O)return"<>";if(typeof t=="object"&&t!==null&&t.$$typeof===C)return"<...>";try{var i=e(t);return i?"<"+i+">":"<...>"}catch{return"<...>"}}function o(){var t=P.A;return t===null?null:t.getOwner()}function a(){return Error("react-stack-top-frame")}function s(t){if(Q.call(t,"key")){var i=Object.getOwnPropertyDescriptor(t,"key").get;if(i&&i.isReactWarning)return!1}return t.key!==void 0}function d(t,i){function m(){K||(K=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",i))}m.isReactWarning=!0,Object.defineProperty(t,"key",{get:m,configurable:!0})}function v(){var t=e(this.type);return ee[t]||(ee[t]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),t=this.props.ref,t!==void 0?t:null}function x(t,i,m,b,F,I){var h=m.ref;return t={$$typeof:Z,type:t,key:i,props:m,_owner:b},(h!==void 0?h:null)!==null?Object.defineProperty(t,"ref",{enumerable:!1,get:v}):Object.defineProperty(t,"ref",{enumerable:!1,value:null}),t._store={},Object.defineProperty(t._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(t,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(t,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:F}),Object.defineProperty(t,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:I}),Object.freeze&&(Object.freeze(t.props),Object.freeze(t)),t}function y(t,i,m,b,F,I){var h=i.children;if(h!==void 0)if(b)if(ye(h)){for(b=0;b<h.length;b++)T(h[b]);Object.freeze&&Object.freeze(h)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else T(h);if(Q.call(i,"key")){h=e(t);var j=Object.keys(i).filter(function(je){return je!=="key"});b=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",ne[h+b]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+(function(m,E){typeof exports=="object"&&typeof module<"u"?E(exports,require("react"),require("@mui/material")):typeof define=="function"&&define.amd?define(["exports","react","@mui/material"],E):(m=typeof globalThis<"u"?globalThis:m||self,E(m.ReactFormDTO={},m.React,m.MaterialUI))})(this,(function(m,E,c){"use strict";var k={exports:{}},A={};var Y;function oe(){if(Y)return A;Y=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function n(a,o,s){var u=null;if(s!==void 0&&(u=""+s),o.key!==void 0&&(u=""+o.key),"key"in o){s={};for(var d in o)d!=="key"&&(s[d]=o[d])}else s=o;return o=s.ref,{$$typeof:e,type:a,key:u,ref:o!==void 0?o:null,props:s}}return A.Fragment=t,A.jsx=n,A.jsxs=n,A}var S={};var q;function ue(){return q||(q=1,process.env.NODE_ENV!=="production"&&(function(){function e(r){if(r==null)return null;if(typeof r=="function")return r.$$typeof===Te?null:r.displayName||r.name||null;if(typeof r=="string")return r;switch(r){case $:return"Fragment";case fe:return"Profiler";case me:return"StrictMode";case xe:return"Suspense";case ge:return"SuspenseList";case Ee:return"Activity"}if(typeof r=="object")switch(typeof r.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),r.$$typeof){case C:return"Portal";case he:return r.displayName||"Context";case be:return(r._context.displayName||"Context")+".Consumer";case ve:var i=r.render;return r=r.displayName,r||(r=i.displayName||i.name||"",r=r!==""?"ForwardRef("+r+")":"ForwardRef"),r;case ye:return i=r.displayName||null,i!==null?i:e(r.type)||"Memo";case I:i=r._payload,r=r._init;try{return e(r(i))}catch{}}return null}function t(r){return""+r}function n(r){try{t(r);var i=!1}catch{i=!0}if(i){i=console;var p=i.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&r[Symbol.toStringTag]||r.constructor.name||"Object";return p.call(i,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),t(r)}}function a(r){if(r===$)return"<>";if(typeof r=="object"&&r!==null&&r.$$typeof===I)return"<...>";try{var i=e(r);return i?"<"+i+">":"<...>"}catch{return"<...>"}}function o(){var r=L.A;return r===null?null:r.getOwner()}function s(){return Error("react-stack-top-frame")}function u(r){if(ee.call(r,"key")){var i=Object.getOwnPropertyDescriptor(r,"key").get;if(i&&i.isReactWarning)return!1}return r.key!==void 0}function d(r,i){function p(){re||(re=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",i))}p.isReactWarning=!0,Object.defineProperty(r,"key",{get:p,configurable:!0})}function x(){var r=e(this.type);return te[r]||(te[r]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),r=this.props.ref,r!==void 0?r:null}function g(r,i,p,b,O,D){var h=p.ref;return r={$$typeof:y,type:r,key:i,props:p,_owner:b},(h!==void 0?h:null)!==null?Object.defineProperty(r,"ref",{enumerable:!1,get:x}):Object.defineProperty(r,"ref",{enumerable:!1,value:null}),r._store={},Object.defineProperty(r._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(r,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(r,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:O}),Object.defineProperty(r,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:D}),Object.freeze&&(Object.freeze(r.props),Object.freeze(r)),r}function j(r,i,p,b,O,D){var h=i.children;if(h!==void 0)if(b)if(je(h)){for(b=0;b<h.length;b++)R(h[b]);Object.freeze&&Object.freeze(h)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else R(h);if(ee.call(i,"key")){h=e(r);var _=Object.keys(i).filter(function(Re){return Re!=="key"});b=0<_.length?"{key: someKey, "+_.join(": ..., ")+": ...}":"{key: someKey}",se[h+b]||(_=0<_.length?"{"+_.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,b,h,j,h),ne[h+b]=!0)}if(h=null,m!==void 0&&(n(m),h=""+m),s(i)&&(n(i.key),h=""+i.key),"key"in i){m={};for(var L in i)L!=="key"&&(m[L]=i[L])}else m=i;return h&&d(m,typeof t=="function"?t.displayName||t.name||"Unknown":t),x(t,h,m,o(),F,I)}function T(t){A(t)?t._store&&(t._store.validated=1):typeof t=="object"&&t!==null&&t.$$typeof===C&&(t._payload.status==="fulfilled"?A(t._payload.value)&&t._payload.value._store&&(t._payload.value._store.validated=1):t._store&&(t._store.validated=1))}function A(t){return typeof t=="object"&&t!==null&&t.$$typeof===Z}var E=g,Z=Symbol.for("react.transitional.element"),de=Symbol.for("react.portal"),O=Symbol.for("react.fragment"),me=Symbol.for("react.strict_mode"),pe=Symbol.for("react.profiler"),fe=Symbol.for("react.consumer"),be=Symbol.for("react.context"),he=Symbol.for("react.forward_ref"),xe=Symbol.for("react.suspense"),ve=Symbol.for("react.suspense_list"),ge=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),Ee=Symbol.for("react.activity"),Te=Symbol.for("react.client.reference"),P=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Q=Object.prototype.hasOwnProperty,ye=Array.isArray,$=console.createTask?console.createTask:function(){return null};E={react_stack_bottom_frame:function(t){return t()}};var K,ee={},te=E.react_stack_bottom_frame.bind(E,a)(),re=$(u(a)),ne={};_.Fragment=O,_.jsx=function(t,i,m){var b=1e4>P.recentlyCreatedOwnerStacks++;return y(t,i,m,!1,b?Error("react-stack-top-frame"):te,b?$(u(t)):re)},_.jsxs=function(t,i,m){var b=1e4>P.recentlyCreatedOwnerStacks++;return y(t,i,m,!0,b?Error("react-stack-top-frame"):te,b?$(u(t)):re)}})()),_}var z;function se(){return z||(z=1,process.env.NODE_ENV==="production"?S.exports=ae():S.exports=oe()),S.exports}var l=se();function f(e,r="en"){return e?typeof e=="string"?e:e[r]||e.en||Object.values(e)[0]||"":""}function k(e,r="en"){return e?e.map(n=>typeof n=="string"?{value:n,label:n}:{value:n.value,label:f(n.label,r)}):[]}function Y({field:e,value:r,onChange:n,error:u,locale:o="en"}){const a=k(e.options||[],o);return l.jsxs(c.FormControl,{fullWidth:!0,children:[l.jsx(c.InputLabel,{id:`${e.id}-label`,children:f(e.label,o)}),l.jsx(c.Select,{labelId:`${e.id}-label`,value:r,id:e.id,name:e.id,onChange:s=>n(s.target.value),label:f(e.label,o),error:!!u,children:a?.map(s=>l.jsx(c.MenuItem,{value:s.value,children:s.label},s.label))}),u&&l.jsx(c.Typography,{variant:"caption",color:"error",children:u})]})}function W({field:e,value:r,onChange:n,error:u,locale:o}){return console.log("error",u),l.jsx(c.TextField,{fullWidth:!0,label:f(e.label,o),placeholder:f(e.placeholder||"",o),value:r||"",name:e.id,onChange:a=>n(a.target.value),disabled:e.disabled,type:e.type,slotProps:{inputLabel:{shrink:e.type==="date"?!0:void 0}},error:!!u,helperText:u})}function M({field:e,value:r,onChange:n,error:u,locale:o}){return l.jsxs(l.Fragment,{children:[l.jsx(c.FormControlLabel,{name:e.id,control:l.jsx(c.Checkbox,{checked:!!r,onChange:a=>n(a.target.checked),disabled:e.disabled}),label:f(e.label,o)}),u&&l.jsx(c.FormHelperText,{children:u})]})}const V=({field:e,value:r,onChange:n,error:u,locale:o})=>{const a=k(e.options||[],o);return l.jsx(c.Autocomplete,{fullWidth:!0,options:a||[],value:r||null,onChange:(s,d)=>n(d),renderInput:s=>l.jsx(c.TextField,{...s,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!u,helperText:u})})},q=({field:e,value:r,onChange:n,error:u,locale:o})=>{const a=k(e.options||[],o);return l.jsx(c.Autocomplete,{multiple:!0,fullWidth:!0,options:a||[],value:r||[],onChange:(s,d)=>n(d),renderInput:s=>l.jsx(c.TextField,{...s,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!u,helperText:u})})},B=({field:e,value:r,onChange:n,error:u,locale:o="en"})=>l.jsx(c.TextField,{fullWidth:!0,multiline:!0,rows:e.rows||4,label:f(e.label,o),placeholder:f(e.placeholder||"",o),value:r||"",onChange:a=>n(a.target.value),required:!!e.validations?.required,disabled:e.disabled,error:!!u,helperText:u}),U=({field:e,value:r,onChange:n,error:u,locale:o="en"})=>{const a=k(e.options||[],o);return l.jsxs(c.FormControl,{component:"fieldset",fullWidth:!0,error:!!u,children:[l.jsxs(c.FormLabel,{component:"legend",children:[f(e.label,o),e.validations?.required?" *":""]}),l.jsx(c.RadioGroup,{row:e.layout?.direction==="row"||!1,value:r||"",onChange:s=>n(s.target.value),children:(a||[]).map(s=>l.jsx(c.FormControlLabel,{value:s,control:l.jsx(c.Radio,{}),label:s.label,disabled:e.disabled},s.label))}),u&&l.jsx(c.FormHelperText,{children:u})]})},ue=({field:e,value:r,onChange:n,error:u,locale:o="en"})=>{switch(e.type){case"text":case"date":case"email":case"password":case"number":return l.jsx(W,{field:e,value:r,onChange:n,error:u,locale:o});case"select":return l.jsx(Y,{field:e,value:r,onChange:n,error:u,locale:o});case"autocomplete":return l.jsx(V,{field:e,value:r,onChange:n,error:u,locale:o});case"multi-autocomplete":return l.jsx(q,{field:e,value:r,onChange:n,error:u,locale:o});case"checkbox":return l.jsx(M,{field:e,value:r,onChange:n,error:u,locale:o});case"textarea":return l.jsx(B,{field:e,value:r,onChange:n,error:u,locale:o});case"radio":return l.jsx(U,{field:e,value:r,onChange:n,error:u,locale:o});default:return l.jsxs("span",{children:["Unsupported field type: ",e.type]})}},G=({field:e,value:r,onChange:n,error:u,renderers:o={},locale:a="en"})=>{const s=o[e.type]||ue;return l.jsx(s,{field:e,value:r,onChange:n,error:u,locale:a})};function le(e){const r=e??12;return{xs:12,sm:r,md:r,lg:r,xl:r}}const J=({section:e,values:r,onChange:n,renderers:u,validateField:o,locale:a="en"})=>l.jsxs(c.Box,{mb:2,children:[e.heading&&l.jsx(c.Typography,{variant:"h6",sx:{fontSize:e.headingFontSize?`${e.headingFontSize}rem`:"1.25rem"},gutterBottom:!0,color:"black",children:f(e.heading,a)}),e.description&&l.jsx(c.Typography,{variant:"body2",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:f(e.description,a)}),l.jsx(c.Grid,{container:!0,spacing:2,children:e.fields.map(s=>l.jsx(c.Grid,{size:le(s.layout?.cols),children:l.jsx(G,{field:s,value:r[s.id],onChange:d=>n(s.id,d),renderers:u,error:o(s.id)?.join(","),locale:a})},s.id))})]}),ie={required:(e,r)=>e.required&&(r==null||r==="")?`${e.label} is required`:null,min:(e,r)=>e.type==="number"&&e.min!==void 0&&r<e.min?`${e.label} must be at least ${e.min}`:null,max:(e,r)=>e.type==="number"&&e.max!==void 0&&r>e.max?`${e.label} must be at most ${e.max}`:null,minLength:(e,r)=>typeof r=="string"&&e.minLength!==void 0&&r.length<e.minLength?`${e.label} must be at least ${e.minLength} characters`:null,maxLength:(e,r)=>typeof r=="string"&&e.maxLength!==void 0&&r.length>e.maxLength?`${e.label} must be at most ${e.maxLength} characters`:null,pattern:(e,r)=>e.pattern&&typeof r=="string"&&!e.pattern.test(r)?`${e.label} is invalid`:null,options:(e,r)=>e.type==="select"&&e.options&&!e.options.includes(r)?`${e.label} must be one of: ${e.options.join(", ")}`:null,dateRange:(e,r)=>{if(e.type==="date"&&r){const n=new Date(r);if(e.minDate&&n<new Date(e.minDate))return`${e.label} must be after ${e.minDate}`;if(e.maxDate&&n>new Date(e.maxDate))return`${e.label} must be before ${e.maxDate}`}return null},customValidator:(e,r)=>{if(e.customValidator&&typeof e.customValidator=="function"){const n=e.customValidator(r);if(typeof n=="string")return n}return null}},H=(e,r,n="en")=>{const u={};return e.sections.forEach(o=>{o.fields.forEach(a=>{const s=w(e,r,a.id);s.length>0&&(u[a.id]=s)})}),u},w=(e,r,n,u="en")=>{const o=e.sections.flatMap(x=>x.fields).find(x=>x.id===n);if(!o)return[];const a=o.validations||{},s=r[n],d=[],v=f(o.label,u);if(a.required&&(s==null||s==="")&&d.push(typeof a.required=="string"?a.required:`${v} is required`),a.min!==void 0&&typeof s=="number"&&s<a.min&&d.push(`${v} must be at least ${a.min}`),a.max!==void 0&&typeof s=="number"&&s>a.max&&d.push(`${v} must be at most ${a.max}`),a.minLength!==void 0&&typeof s=="string"&&s.length<a.minLength&&d.push(`${v} must be at least ${a.minLength} characters`),a.maxLength!==void 0&&typeof s=="string"&&s.length>a.maxLength&&d.push(`${v} must be at most ${a.maxLength} characters`),a.pattern&&typeof s=="string"&&!a.pattern.test(s)&&d.push(`${v} is invalid`),a.validate){const x=a.validate(s);x&&d.push(f(x,u))}return d};function X(e,r="en"){const[n,u]=g.useState({}),[o,a]=g.useState({});return{values:n,handleChange:(T,A)=>{u(E=>({...E,[T]:A})),a(E=>({...E,[T]:null}))},validateAll:()=>H(e,n,r),getValues:()=>n,getErrors:()=>o,validateField:T=>w(e,n,T,r)}}const ce=g.forwardRef(({dto:e,renderers:r,locale:n="en"},u)=>{const{values:o,handleChange:a,getValues:s,getErrors:d,validateAll:v,validateField:x}=X(e,n);return g.useImperativeHandle(u,()=>({getValues:s,getErrors:d,validateAll:v,validateField:x})),l.jsxs(l.Fragment,{children:[e.title&&l.jsx(c.Typography,{variant:"h5",color:"black",sx:{fontSize:e.titleFontSize?`${e.titleFontSize}rem`:"1.5rem",fontWeight:"bold"},gutterBottom:!0,children:f(e.title,n)}),e.description&&l.jsx(c.Typography,{component:"p",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:f(e.description,n)}),e.sections.map(y=>l.jsx(J,{section:y,values:o,onChange:a,renderers:r,validateField:x,locale:n},y.id))]})});p.AutoCompleteField=V,p.CheckBoxInput=M,p.Field=G,p.FormBuilder=ce,p.MultiAutoCompleteField=q,p.RadioInput=U,p.Section=J,p.SelectInput=Y,p.TextAreaInput=B,p.TextInput=W,p.useFormBuilder=X,p.validateAll=H,p.validateField=w,p.validationRules=ie,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,b,h,_,h),se[h+b]=!0)}if(h=null,p!==void 0&&(n(p),h=""+p),u(i)&&(n(i.key),h=""+i.key),"key"in i){p={};for(var z in i)z!=="key"&&(p[z]=i[z])}else p=i;return h&&d(p,typeof r=="function"?r.displayName||r.name||"Unknown":r),g(r,h,p,o(),O,D)}function R(r){T(r)?r._store&&(r._store.validated=1):typeof r=="object"&&r!==null&&r.$$typeof===I&&(r._payload.status==="fulfilled"?T(r._payload.value)&&r._payload.value._store&&(r._payload.value._store.validated=1):r._store&&(r._store.validated=1))}function T(r){return typeof r=="object"&&r!==null&&r.$$typeof===y}var v=E,y=Symbol.for("react.transitional.element"),C=Symbol.for("react.portal"),$=Symbol.for("react.fragment"),me=Symbol.for("react.strict_mode"),fe=Symbol.for("react.profiler"),be=Symbol.for("react.consumer"),he=Symbol.for("react.context"),ve=Symbol.for("react.forward_ref"),xe=Symbol.for("react.suspense"),ge=Symbol.for("react.suspense_list"),ye=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),Ee=Symbol.for("react.activity"),Te=Symbol.for("react.client.reference"),L=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,ee=Object.prototype.hasOwnProperty,je=Array.isArray,N=console.createTask?console.createTask:function(){return null};v={react_stack_bottom_frame:function(r){return r()}};var re,te={},ne=v.react_stack_bottom_frame.bind(v,s)(),ae=N(a(s)),se={};S.Fragment=$,S.jsx=function(r,i,p){var b=1e4>L.recentlyCreatedOwnerStacks++;return j(r,i,p,!1,b?Error("react-stack-top-frame"):ne,b?N(a(r)):ae)},S.jsxs=function(r,i,p){var b=1e4>L.recentlyCreatedOwnerStacks++;return j(r,i,p,!0,b?Error("react-stack-top-frame"):ne,b?N(a(r)):ae)}})()),S}var W;function le(){return W||(W=1,process.env.NODE_ENV==="production"?k.exports=oe():k.exports=ue()),k.exports}var l=le();function f(e,t="en"){return e?typeof e=="string"?e:e[t]||e.en||Object.values(e)[0]||"":""}function F(e,t="en"){return e?e.map(n=>typeof n=="string"?{value:n,label:n}:{value:n.value,label:f(n.label,t)}):[]}function M({field:e,value:t,onChange:n,error:a,locale:o="en"}){const s=F(e.options||[],o);return l.jsxs(c.FormControl,{fullWidth:!0,children:[l.jsx(c.InputLabel,{id:`${e.id}-label`,children:f(e.label,o)}),l.jsx(c.Select,{labelId:`${e.id}-label`,value:t,id:e.id,name:e.id,onChange:u=>n(u.target.value),label:f(e.label,o),error:!!a,children:s?.map(u=>l.jsx(c.MenuItem,{value:u.value,children:u.label},u.label))}),a&&l.jsx(c.Typography,{variant:"caption",color:"error",children:a})]})}function V({field:e,value:t,onChange:n,error:a,locale:o}){return console.log("error",a),l.jsx(c.TextField,{fullWidth:!0,label:f(e.label,o),placeholder:f(e.placeholder||"",o),value:t||"",name:e.id,onChange:s=>n(s.target.value),disabled:e.disabled,type:e.type,slotProps:{inputLabel:{shrink:e.type==="date"?!0:void 0}},error:!!a,helperText:a})}function B({field:e,value:t,onChange:n,error:a,locale:o}){return l.jsxs(l.Fragment,{children:[l.jsx(c.FormControlLabel,{name:e.id,control:l.jsx(c.Checkbox,{checked:!!t,onChange:s=>n(s.target.checked),disabled:e.disabled}),label:f(e.label,o)}),a&&l.jsx(c.FormHelperText,{children:a})]})}const U=({field:e,value:t,onChange:n,error:a,locale:o})=>{const s=F(e.options||[],o);return l.jsx(c.Autocomplete,{fullWidth:!0,options:s||[],value:t||null,onChange:(u,d)=>n(d),renderInput:u=>l.jsx(c.TextField,{...u,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!a,helperText:a})})},G=({field:e,value:t,onChange:n,error:a,locale:o})=>{const s=F(e.options||[],o);return l.jsx(c.Autocomplete,{multiple:!0,fullWidth:!0,options:s||[],value:t||[],onChange:(u,d)=>n(d),renderInput:u=>l.jsx(c.TextField,{...u,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!a,helperText:a})})},J=({field:e,value:t,onChange:n,error:a,locale:o="en"})=>l.jsx(c.TextField,{fullWidth:!0,multiline:!0,rows:e.rows||4,label:f(e.label,o),placeholder:f(e.placeholder||"",o),value:t||"",onChange:s=>n(s.target.value),required:!!e.validations?.required,disabled:e.disabled,error:!!a,helperText:a}),H=({field:e,value:t,onChange:n,error:a,locale:o="en"})=>{const s=F(e.options||[],o);return l.jsxs(c.FormControl,{component:"fieldset",fullWidth:!0,error:!!a,children:[l.jsxs(c.FormLabel,{component:"legend",children:[f(e.label,o),e.validations?.required?" *":""]}),l.jsx(c.RadioGroup,{row:e.layout?.direction==="row"||!1,value:t||"",onChange:u=>n(u.target.value),children:(s||[]).map(u=>l.jsx(c.FormControlLabel,{value:u.value,control:l.jsx(c.Radio,{}),label:u.label,disabled:e.disabled},u.label))}),a&&l.jsx(c.FormHelperText,{children:a})]})},ie=({field:e,value:t,onChange:n,error:a,locale:o="en"})=>{switch(e.type){case"text":case"date":case"email":case"password":case"number":return l.jsx(V,{field:e,value:t,onChange:n,error:a,locale:o});case"select":return l.jsx(M,{field:e,value:t,onChange:n,error:a,locale:o});case"autocomplete":return l.jsx(U,{field:e,value:t,onChange:n,error:a,locale:o});case"multi-autocomplete":return l.jsx(G,{field:e,value:t,onChange:n,error:a,locale:o});case"checkbox":return l.jsx(B,{field:e,value:t,onChange:n,error:a,locale:o});case"textarea":return l.jsx(J,{field:e,value:t,onChange:n,error:a,locale:o});case"radio":return l.jsx(H,{field:e,value:t,onChange:n,error:a,locale:o});default:return l.jsxs("span",{children:["Unsupported field type: ",e.type]})}},X=({field:e,value:t,onChange:n,error:a,renderers:o={},locale:s="en"})=>{const u=o[e.type]||ie;return l.jsx(u,{field:e,value:t,onChange:n,error:a,locale:s})};function ce(e){const t=e??12;return{xs:12,sm:t,md:t,lg:t,xl:t}}const de={required:(e,t)=>e.required&&(t==null||t==="")?`${e.label} is required`:null,min:(e,t)=>e.type==="number"&&e.min!==void 0&&t<e.min?`${e.label} must be at least ${e.min}`:null,max:(e,t)=>e.type==="number"&&e.max!==void 0&&t>e.max?`${e.label} must be at most ${e.max}`:null,minLength:(e,t)=>typeof t=="string"&&e.minLength!==void 0&&t.length<e.minLength?`${e.label} must be at least ${e.minLength} characters`:null,maxLength:(e,t)=>typeof t=="string"&&e.maxLength!==void 0&&t.length>e.maxLength?`${e.label} must be at most ${e.maxLength} characters`:null,pattern:(e,t)=>e.pattern&&typeof t=="string"&&!e.pattern.test(t)?`${e.label} is invalid`:null,options:(e,t)=>e.type==="select"&&e.options&&!e.options.includes(t)?`${e.label} must be one of: ${e.options.join(", ")}`:null,dateRange:(e,t)=>{if(e.type==="date"&&t){const n=new Date(t);if(e.minDate&&n<new Date(e.minDate))return`${e.label} must be after ${e.minDate}`;if(e.maxDate&&n>new Date(e.maxDate))return`${e.label} must be before ${e.maxDate}`}return null},customValidator:(e,t)=>{if(e.customValidator&&typeof e.customValidator=="function"){const n=e.customValidator(t);if(typeof n=="string")return n}return null}},Z=(e,t,n="en")=>{const a={};return e.sections.forEach(o=>{o.fields.forEach(s=>{const u=w(e,t,s.id);u.length>0&&(a[s.id]=u)})}),a},w=(e,t,n,a="en")=>{const o=e.sections.flatMap(g=>g.fields).find(g=>g.id===n);if(!o)return[];const s=o.validations||{},u=t[n],d=[],x=f(o.label,a);if(s.required&&(u==null||u==="")&&d.push(typeof s.required=="string"?s.required:`${x} is required`),s.min!==void 0&&typeof u=="number"&&u<s.min&&d.push(`${x} must be at least ${s.min}`),s.max!==void 0&&typeof u=="number"&&u>s.max&&d.push(`${x} must be at most ${s.max}`),s.minLength!==void 0&&typeof u=="string"&&u.length<s.minLength&&d.push(`${x} must be at least ${s.minLength} characters`),s.maxLength!==void 0&&typeof u=="string"&&u.length>s.maxLength&&d.push(`${x} must be at most ${s.maxLength} characters`),s.pattern&&typeof u=="string"&&!s.pattern.test(u)&&d.push(`${x} is invalid`),s.validate){const g=s.validate(u);g&&d.push(f(g,a))}return d};function P(e,t){if(!e)return!0;if("field"in e){let n=t[e.field]??"";return Array.isArray(n)?n=n.map(a=>a.value??""):typeof n=="object"&&n!==null&&(n=n.value??""),e.equals!==void 0?n===e.equals:e.notEquals!==void 0?n!==e.notEquals:e.in!==void 0?Array.isArray(n)?e.in?n.some(a=>e.in.includes(a)):!1:e.in.includes(n):e.notIn!==void 0?Array.isArray(n)?n.every(a=>!e.notIn.includes(a)):!e.notIn.includes(n):e.greaterThan!==void 0?n>e.greaterThan:e.lessThan!==void 0?n<e.lessThan:!0}if("operator"in e){if(e.operator==="AND")return e.conditions.every(a=>P(a,t));if(e.operator==="OR")return e.conditions.some(n=>P(n,t))}return!1}const Q=({section:e,values:t,onChange:n,renderers:a,validateField:o,locale:s="en"})=>l.jsxs(c.Box,{mb:2,children:[e.heading&&l.jsx(c.Typography,{variant:"h6",sx:{fontSize:e.headingFontSize?`${e.headingFontSize}rem`:"1.25rem"},gutterBottom:!0,color:"black",children:f(e.heading,s)}),e.description&&l.jsx(c.Typography,{variant:"body2",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:f(e.description,s)}),l.jsx(c.Grid,{container:!0,spacing:2,children:e.fields.map(u=>P(u.visibleWhen,t)&&l.jsx(c.Grid,{size:ce(u.layout?.cols),children:l.jsx(X,{field:u,value:t[u.id],onChange:d=>n(u.id,d),renderers:a,error:o(u.id)?.join(","),locale:s})},u.id))})]});function K(e,t="en",n){const[a,o]=E.useState({}),[s,u]=E.useState({});return{values:a,handleChange:(T,v)=>{if(o(y=>({...y,[T]:v})),u(y=>({...y,[T]:null})),n){let y=v;Array.isArray(v)?y=v.map(C=>C.value??""):typeof v=="object"&&v!==null&&(y=v.value??""),n(T,y)}},validateAll:()=>Z(e,a,t),getValues:()=>a,getErrors:()=>s,validateField:T=>w(e,a,T,t)}}const pe=E.forwardRef(({dto:e,renderers:t,locale:n="en",handleChangeCallback:a},o)=>{const{values:s,handleChange:u,getValues:d,getErrors:x,validateAll:g,validateField:j}=K(e,n,a);return E.useImperativeHandle(o,()=>({getValues:d,getErrors:x,validateAll:g,validateField:j})),l.jsxs(l.Fragment,{children:[e.title&&l.jsx(c.Typography,{variant:"h5",color:"black",sx:{fontSize:e.titleFontSize?`${e.titleFontSize}rem`:"1.5rem",fontWeight:"bold"},gutterBottom:!0,children:f(e.title,n)}),e.description&&l.jsx(c.Typography,{component:"p",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:f(e.description,n)}),e.sections.map(R=>l.jsx(Q,{section:R,values:s,onChange:u,renderers:t,validateField:j,locale:n},R.id))]})});m.AutoCompleteField=U,m.CheckBoxInput=B,m.Field=X,m.FormBuilder=pe,m.MultiAutoCompleteField=G,m.RadioInput=H,m.Section=Q,m.SelectInput=M,m.TextAreaInput=J,m.TextInput=V,m.useFormBuilder=K,m.validateAll=Z,m.validateField=w,m.validationRules=de,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));

package/dist/stories/FormBuilder.stories.d.ts

@@ -7,6 +7,7 @@ declare const _default: {
         dto: FormDTO;
         renderers?: Record<string, React.ComponentType<any>>;
         locale?: string;
+        handleChangeCallback?: (id: string, val: any) => void;
     } & React.RefAttributes<FormBuilderHandle>>;
     argTypes: {
         dto: {

package/dist/types/dto.d.ts

@@ -22,6 +22,7 @@ export type FieldDTO = {
     defaultValue?: any;
     layout?: LayoutDTO;
     validations?: Validations;
+    visibleWhen?: Condition;
 };
 export type SectionDTO = {
     id: string;
@@ -49,3 +50,17 @@ export type Validations = {
     pattern?: RegExp;
     validate?: (value: any) => I18nString | null;
 };
+export interface FieldCondition {
+    field: string;
+    equals?: any;
+    notEquals?: any;
+    in?: any[];
+    notIn?: any[];
+    greaterThan?: number;
+    lessThan?: number;
+}
+export interface ConditionGroup {
+    operator: "AND" | "OR";
+    conditions: Condition[];
+}
+export type Condition = FieldCondition | ConditionGroup;

package/dist/utils/evaluateVisibleWhen.d.ts

@@ -0,0 +1,8 @@
+import { Condition } from '../types';
+/**
+ * Evaluates a condition tree against form state.
+ * @param condition - The condition or group to evaluate
+ * @param formState - Current form values (key-value pairs)
+ * @returns boolean
+ */
+export declare function evaluateCondition(condition: Condition | undefined, formState: Record<string, any>): boolean;

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './layout';
 export * from './validation';
 export * from './i18n';
+export * from './evaluateVisibleWhen';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-form-dto",
     "description": "A React library for building forms using DTOs with MUI and TypeScript.",
-    "version": "1.0.1",
+    "version": "1.0.3",
     "main": "dist/react-form-dto.umd.js",
     "module": "dist/react-form-dto.es.js",
     "types": "dist/index.d.ts",