@coherent.js/forms 1.0.0-beta.2

package/dist/index.js

@@ -0,0 +1,1860 @@
+// src/form-builder.js
+var FormBuilder = class {
+  constructor(options = {}) {
+    this.options = {
+      validateOnChange: true,
+      validateOnBlur: true,
+      name: options.name || "form",
+      ...options
+    };
+    this.fields = /* @__PURE__ */ new Map();
+    this.groups = /* @__PURE__ */ new Map();
+    this.values = {};
+    this.errors = {};
+    this.touched = {};
+    this.initialValues = {};
+    this.submitHandler = null;
+    this.errorHandler = null;
+    this._isSubmitting = false;
+  }
+  /**
+   * Add a field to the form (alias for field)
+   */
+  addField(name, config = {}) {
+    return this.field(name, config);
+  }
+  /**
+   * Add a field to the form
+   */
+  field(name, config = {}) {
+    const fieldConfig = {
+      name,
+      type: config.type || "text",
+      label: config.label || name,
+      placeholder: config.placeholder || "",
+      defaultValue: config.defaultValue || "",
+      validators: config.validators || [],
+      required: config.required || false,
+      visible: config.visible !== false,
+      showWhen: config.showWhen,
+      ...config
+    };
+    this.fields.set(name, fieldConfig);
+    if (config.defaultValue !== void 0) {
+      this.values[name] = config.defaultValue;
+      this.initialValues[name] = config.defaultValue;
+    }
+    return this;
+  }
+  /**
+   * Remove a field from the form
+   */
+  removeField(name) {
+    this.fields.delete(name);
+    delete this.values[name];
+    delete this.errors[name];
+    delete this.touched[name];
+    return this;
+  }
+  /**
+   * Update field configuration
+   */
+  updateField(name, config) {
+    const field = this.fields.get(name);
+    if (field) {
+      this.fields.set(name, { ...field, ...config });
+    }
+    return this;
+  }
+  /**
+   * Get all fields as array
+   */
+  getFields() {
+    return Array.from(this.fields.values());
+  }
+  /**
+   * Add a field group
+   */
+  addGroup(name, config = {}) {
+    this.groups.set(name, {
+      name,
+      label: config.label || name,
+      fields: config.fields || [],
+      ...config
+    });
+    if (config.fields) {
+      config.fields.forEach((fieldConfig) => {
+        this.addField(fieldConfig.name, fieldConfig);
+      });
+    }
+    return this;
+  }
+  /**
+   * Get field configuration
+   */
+  getField(name) {
+    return this.fields.get(name);
+  }
+  /**
+   * Set field value
+   */
+  setValue(name, value) {
+    this.values[name] = value;
+    this.touched[name] = true;
+    const field = this.fields.get(name);
+    if (field && (field.validateOnChange || this.options.validateOnChange)) {
+      this.validateField(name);
+    }
+  }
+  /**
+   * Set multiple values
+   */
+  setValues(values) {
+    Object.assign(this.values, values);
+    return this;
+  }
+  /**
+   * Get field value
+   */
+  getValue(name) {
+    return this.values[name];
+  }
+  /**
+   * Get all values
+   */
+  getValues() {
+    return { ...this.values };
+  }
+  /**
+   * Get field error
+   */
+  getFieldError(name) {
+    return this.errors[name];
+  }
+  /**
+   * Check if form has errors
+   */
+  hasErrors() {
+    return Object.keys(this.errors).length > 0;
+  }
+  /**
+   * Clear all errors
+   */
+  clearErrors() {
+    this.errors = {};
+    return this;
+  }
+  /**
+   * Check if form is dirty (values changed from initial)
+   */
+  isDirty() {
+    return Object.keys(this.values).some((key) => {
+      return this.values[key] !== this.initialValues[key];
+    });
+  }
+  /**
+   * Check if form is valid
+   */
+  isValid() {
+    const result = this.validate();
+    return Object.keys(result).length === 0;
+  }
+  /**
+   * Validate a field
+   */
+  validateField(name) {
+    const field = this.fields.get(name);
+    if (!field) return null;
+    const showCondition = field.showWhen || field.showIf;
+    if (showCondition && !showCondition(this.values)) {
+      delete this.errors[name];
+      return null;
+    }
+    const value = this.values[name];
+    if (field.required && (value === void 0 || value === null || value === "")) {
+      const error = "This field is required";
+      this.errors[name] = error;
+      return error;
+    }
+    if (!value && !field.required) {
+      delete this.errors[name];
+      return null;
+    }
+    if (value) {
+      if (field.type === "email") {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(value)) {
+          const error = "Please enter a valid email address";
+          this.errors[name] = error;
+          return error;
+        }
+      } else if (field.type === "url") {
+        try {
+          new URL(value);
+        } catch {
+          const error = "Please enter a valid URL";
+          this.errors[name] = error;
+          return error;
+        }
+      } else if (field.type === "number") {
+        if (isNaN(Number(value))) {
+          const error = "Please enter a valid number";
+          this.errors[name] = error;
+          return error;
+        }
+      }
+    }
+    if (field.validate) {
+      const error = field.validate(value, this.values);
+      if (error) {
+        this.errors[name] = error;
+        return error;
+      }
+    }
+    for (const validator of field.validators || []) {
+      const error = validator(value, this.values);
+      if (error) {
+        this.errors[name] = error;
+        return error;
+      }
+    }
+    delete this.errors[name];
+    return null;
+  }
+  /**
+   * Validate all fields
+   */
+  validate() {
+    const errors = {};
+    for (const [name, field] of this.fields) {
+      const showCondition = field.showWhen || field.showIf;
+      if (showCondition && !showCondition(this.values)) {
+        continue;
+      }
+      const error = this.validateField(name);
+      if (error) {
+        errors[name] = error;
+      }
+    }
+    this.errors = errors;
+    return errors;
+  }
+  /**
+   * Set submit handler
+   */
+  onSubmit(handler) {
+    this.submitHandler = handler;
+    return this;
+  }
+  /**
+   * Set error handler
+   */
+  onError(handler) {
+    this.errorHandler = handler;
+    return this;
+  }
+  /**
+   * Submit the form
+   */
+  async submit() {
+    const errors = this.validate();
+    if (Object.keys(errors).length > 0) {
+      return { success: false, errors };
+    }
+    if (!this.submitHandler) {
+      return { success: true, data: this.values };
+    }
+    this._isSubmitting = true;
+    try {
+      const result = await this.submitHandler(this.values);
+      this._isSubmitting = false;
+      return { success: true, data: result };
+    } catch (error) {
+      this._isSubmitting = false;
+      if (this.errorHandler) {
+        this.errorHandler(error);
+      }
+      return { success: false, error };
+    }
+  }
+  /**
+   * Serialize form data
+   */
+  serialize() {
+    return { ...this.values };
+  }
+  /**
+   * Convert form to HTML string
+   */
+  toHTML() {
+    const fields = this.getFields();
+    let html = `<form name="${this.options.name}">`;
+    fields.forEach((field) => {
+      html += `<div class="form-field">`;
+      html += `<label for="${field.name}">${field.label}</label>`;
+      html += `<input type="${field.type}" name="${field.name}" id="${field.name}">`;
+      html += `</div>`;
+    });
+    html += `</form>`;
+    return html;
+  }
+  /**
+   * Mark field as touched
+   */
+  touch(name) {
+    this.touched[name] = true;
+  }
+  /**
+   * Build input component with validation metadata for hydration
+   */
+  buildInput(name) {
+    const field = this.fields.get(name);
+    if (!field) return null;
+    const value = this.values[name] || "";
+    const error = this.errors[name];
+    const isTouched = this.touched[name];
+    const validatorNames = field.validators.map((v) => {
+      if (typeof v === "function") return v.name || "custom";
+      if (typeof v === "string") return v;
+      return null;
+    }).filter(Boolean).join(",");
+    const inputProps = {
+      type: field.type,
+      name: field.name,
+      id: field.name,
+      value,
+      placeholder: field.placeholder,
+      "aria-invalid": error ? "true" : "false",
+      "aria-describedby": error ? `${name}-error` : void 0,
+      className: error && isTouched ? "error" : ""
+    };
+    if (field.required) {
+      inputProps.required = true;
+      inputProps["data-required"] = "true";
+    }
+    if (validatorNames) {
+      inputProps["data-validators"] = validatorNames;
+    }
+    return {
+      input: inputProps
+    };
+  }
+  /**
+   * Build label component
+   */
+  buildLabel(name) {
+    const field = this.fields.get(name);
+    if (!field) return null;
+    return {
+      label: {
+        for: field.name,
+        text: field.label
+      }
+    };
+  }
+  /**
+   * Build error component
+   */
+  buildError(name) {
+    const error = this.errors[name];
+    const isTouched = this.touched[name];
+    if (!error || !isTouched) return null;
+    return {
+      div: {
+        id: `${name}-error`,
+        className: "error-message",
+        role: "alert",
+        text: error
+      }
+    };
+  }
+  /**
+   * Build complete field component
+   */
+  buildField(name) {
+    const field = this.fields.get(name);
+    if (!field) return null;
+    const children = [
+      this.buildLabel(name),
+      this.buildInput(name)
+    ];
+    const error = this.buildError(name);
+    if (error) {
+      children.push(error);
+    }
+    return {
+      div: {
+        className: "form-field",
+        "data-field": name,
+        children
+      }
+    };
+  }
+  /**
+   * Build entire form
+   */
+  buildForm(options = {}) {
+    const fields = [];
+    for (const [name] of this.fields) {
+      fields.push(this.buildField(name));
+    }
+    if (options.submitButton !== false) {
+      fields.push({
+        button: {
+          type: "submit",
+          text: options.submitText || "Submit",
+          className: "submit-button"
+        }
+      });
+    }
+    return {
+      form: {
+        onsubmit: "handleSubmit(event)",
+        novalidate: true,
+        children: fields
+      }
+    };
+  }
+  /**
+   * Check if form is currently submitting
+   */
+  isSubmitting() {
+    return this._isSubmitting;
+  }
+  /**
+   * Get a field group
+   */
+  getGroup(name) {
+    return this.groups.get(name);
+  }
+  /**
+   * Check if a field is visible
+   */
+  isFieldVisible(name) {
+    const field = this.fields.get(name);
+    if (!field) return false;
+    const showCondition = field.showWhen || field.showIf;
+    if (showCondition) {
+      return showCondition(this.values);
+    }
+    return field.visible !== false;
+  }
+  /**
+   * Reset form
+   */
+  reset() {
+    this.values = {};
+    for (const [name, field] of this.fields) {
+      if (field.defaultValue !== void 0) {
+        this.values[name] = field.defaultValue;
+      } else {
+        this.values[name] = "";
+      }
+    }
+    this.errors = {};
+    this.touched = {};
+    this._isSubmitting = false;
+    return this;
+  }
+};
+function createFormBuilder(options = {}) {
+  return new FormBuilder(options);
+}
+function buildForm(fields, options = {}) {
+  const builder = new FormBuilder(options);
+  for (const [name, config] of Object.entries(fields)) {
+    builder.field(name, config);
+  }
+  return builder;
+}
+
+// src/validators.js
+var validators = {
+  required: (value, options = {}) => {
+    if (value === null || value === void 0 || value === "") {
+      return options.message || validators.required.message || "This field is required";
+    }
+    return null;
+  },
+  email: (value) => {
+    if (!value) return null;
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(value)) {
+      return "Please enter a valid email address";
+    }
+    return null;
+  },
+  minLength: (value, options = {}) => {
+    if (!value) return null;
+    const min = options.min || 0;
+    if (value.length < min) {
+      return options.message || `Must be at least ${min} characters`;
+    }
+    return null;
+  },
+  maxLength: (value, options = {}) => {
+    if (!value) return null;
+    const max = options.max || Infinity;
+    if (value.length > max) {
+      return options.message || `Must be no more than ${max} characters`;
+    }
+    return null;
+  },
+  min: (value, options = {}) => {
+    if (value === null || value === void 0 || value === "") return null;
+    const num = Number(value);
+    const minValue = options.min || 0;
+    if (isNaN(num) || num < minValue) {
+      return options.message || `Must be at least ${minValue}`;
+    }
+    return null;
+  },
+  max: (value, options = {}) => {
+    if (value === null || value === void 0 || value === "") return null;
+    const num = Number(value);
+    const maxValue = options.max || Infinity;
+    if (isNaN(num) || num > maxValue) {
+      return options.message || `Must be no more than ${maxValue}`;
+    }
+    return null;
+  },
+  pattern: (value, options = {}) => {
+    if (!value) return null;
+    const regex = options.pattern || options.regex;
+    if (regex && !regex.test(value)) {
+      return options.message || "Invalid format";
+    }
+    return null;
+  },
+  url: (value) => {
+    if (!value) return null;
+    try {
+      new URL(value);
+      return null;
+    } catch {
+      return "Please enter a valid URL";
+    }
+  },
+  number: (value) => {
+    if (value === null || value === void 0 || value === "") return null;
+    if (isNaN(Number(value))) {
+      return "Must be a valid number";
+    }
+    return null;
+  },
+  integer: (value) => {
+    if (value === null || value === void 0 || value === "") return null;
+    const num = Number(value);
+    if (isNaN(num) || !Number.isInteger(num)) {
+      return "Must be a whole number";
+    }
+    return null;
+  },
+  phone: (value) => {
+    if (!value) return null;
+    const phoneRegex = /^[\d\s\-\+\(\)]+$/;
+    if (!phoneRegex.test(value) || value.replace(/\D/g, "").length < 10) {
+      return "Please enter a valid phone number";
+    }
+    return null;
+  },
+  date: (value) => {
+    if (!value) return null;
+    const date = new Date(value);
+    if (isNaN(date.getTime())) {
+      return "Please enter a valid date";
+    }
+    return null;
+  },
+  match: (value, options = {}, translator, allValues = {}) => {
+    if (!value) return null;
+    const fieldName = options.field || options.fieldName;
+    if (value !== allValues[fieldName]) {
+      return options.message || `Must match ${fieldName}`;
+    }
+    return null;
+  },
+  custom: (value, options = {}, translator, allValues) => {
+    const validatorFn = options.validator || options.fn;
+    if (!validatorFn) return null;
+    const isValid = validatorFn(value, allValues);
+    return isValid ? null : options.message || "Validation failed";
+  },
+  fileType: (value, options = {}) => {
+    if (!value) return null;
+    const allowedTypes = options.accept || options.types || [];
+    if (value.type !== void 0) {
+      const fileType = value.type;
+      const fileExt = value.name ? value.name.split(".").pop().toLowerCase() : "";
+      const isValid = allowedTypes.some((type) => {
+        if (type.startsWith(".")) {
+          return fileExt === type.slice(1).toLowerCase();
+        }
+        if (type.includes("/")) {
+          if (type.endsWith("/*")) {
+            return fileType.startsWith(type.replace("/*", "/"));
+          }
+          return fileType === type;
+        }
+        return fileExt === type.toLowerCase();
+      });
+      if (!isValid) {
+        return options.message || `File type must be one of: ${allowedTypes.join(", ")}`;
+      }
+      return null;
+    }
+    return null;
+  },
+  fileSize: (value, options = {}) => {
+    if (!value) return null;
+    const maxSize = options.maxSize || Infinity;
+    if (value.size !== void 0) {
+      if (value.size > maxSize) {
+        const maxSizeMB = (maxSize / (1024 * 1024)).toFixed(2);
+        return options.message || `File size must be less than ${maxSizeMB}MB`;
+      }
+      return null;
+    }
+    return null;
+  },
+  fileExtension: (value, options = {}) => {
+    if (!value) return null;
+    const allowedExtensions = options.extensions || [];
+    const fileName = value.name || value;
+    const ext = `.${fileName.split(".").pop().toLowerCase()}`;
+    const isValid = allowedExtensions.some((allowed) => {
+      return ext === allowed.toLowerCase();
+    });
+    if (!isValid) {
+      return options.message || `File extension must be one of: ${allowedExtensions.join(", ")}`;
+    }
+    return null;
+  },
+  alpha: (value) => {
+    if (!value) return null;
+    const alphaRegex = /^[a-zA-Z]+$/;
+    if (!alphaRegex.test(value)) {
+      return "Must contain only letters";
+    }
+    return null;
+  },
+  alphanumeric: (value) => {
+    if (!value) return null;
+    const alphanumericRegex = /^[a-zA-Z0-9]+$/;
+    if (!alphanumericRegex.test(value)) {
+      return "Must contain only letters and numbers";
+    }
+    return null;
+  },
+  uppercase: (value) => {
+    if (!value) return null;
+    if (value !== value.toUpperCase()) {
+      return "Must be uppercase";
+    }
+    return null;
+  },
+  // Get a registered validator
+  get: (name) => {
+    return validators[name];
+  },
+  // Compose multiple validators
+  compose: (validatorList) => {
+    return (value, options, translator, allValues) => {
+      for (const validator of validatorList) {
+        const error = typeof validator === "function" ? validator(value, options, translator, allValues) : null;
+        if (error) {
+          return error;
+        }
+      }
+      return null;
+    };
+  },
+  // Debounce async validator
+  debounce: (validator, delay = 300) => {
+    let timeoutId;
+    return (value) => {
+      return new Promise((resolve) => {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(async () => {
+          const result = await validator(value);
+          resolve(result);
+        }, delay);
+      });
+    };
+  },
+  // Cancellable async validator
+  cancellable: (validator) => {
+    let abortController;
+    const wrapped = async (value) => {
+      if (abortController) {
+        abortController.abort();
+      }
+      abortController = typeof AbortController !== "undefined" ? new AbortController() : null;
+      try {
+        return await validator(value, abortController ? abortController.signal : null);
+      } catch (error) {
+        if (error.name === "AbortError") {
+          return null;
+        }
+        throw error;
+      }
+    };
+    wrapped.cancel = () => {
+      if (abortController) {
+        abortController.abort();
+      }
+    };
+    return wrapped;
+  },
+  // Conditional validator
+  when: (condition, validator) => {
+    return (value, options = {}, translator, allValues = {}) => {
+      const context = options.min !== void 0 || options.max !== void 0 ? allValues : options;
+      const shouldValidate = typeof condition === "function" ? condition(value, context) : condition;
+      if (!shouldValidate) {
+        return null;
+      }
+      return typeof validator === "function" ? validator(value, options, translator, allValues) : null;
+    };
+  },
+  // Validator chain builder
+  chain: (options = {}) => {
+    const validatorList = [];
+    const stopOnFirstError = options.stopOnFirstError !== false;
+    const chain = {
+      required: (opts) => {
+        validatorList.push((v, o, t, a) => validators.required(v, opts || o, t, a));
+        return chain;
+      },
+      email: (opts) => {
+        validatorList.push((v, o, t, a) => validators.email(v, opts || o, t, a));
+        return chain;
+      },
+      minLength: (opts) => {
+        validatorList.push((v, o, t, a) => validators.minLength(v, opts || o, t, a));
+        return chain;
+      },
+      maxLength: (opts) => {
+        validatorList.push((v, o, t, a) => validators.maxLength(v, opts || o, t, a));
+        return chain;
+      },
+      custom: (fn, message) => {
+        validatorList.push((v, o, t, a) => {
+          const result = fn(v, a);
+          return result === null || result === true || result === void 0 ? null : message || result;
+        });
+        return chain;
+      },
+      validate: (value, opts, translator, allValues) => {
+        if (stopOnFirstError) {
+          for (const validator of validatorList) {
+            const error = validator(value, opts, translator, allValues);
+            if (error) {
+              return error;
+            }
+          }
+          return null;
+        } else {
+          const errors = [];
+          for (const validator of validatorList) {
+            const error = validator(value, opts, translator, allValues);
+            if (error) {
+              errors.push(error);
+            }
+          }
+          return errors.length > 0 ? errors : null;
+        }
+      }
+    };
+    return chain;
+  }
+};
+function validateField(value, validatorList, formData = {}) {
+  for (const validator of validatorList) {
+    const error = validator(value, formData);
+    if (error) {
+      return error;
+    }
+  }
+  return null;
+}
+function validateForm(formData, fieldValidators) {
+  const errors = {};
+  for (const [fieldName, validatorList] of Object.entries(fieldValidators)) {
+    const value = formData[fieldName];
+    const error = validateField(value, validatorList, formData);
+    if (error) {
+      errors[fieldName] = error;
+    }
+  }
+  return Object.keys(errors).length > 0 ? errors : null;
+}
+function registerValidator(name, validatorFn) {
+  validators[name] = validatorFn;
+}
+function composeValidators(...validatorFns) {
+  return (value, options, translator, allValues) => {
+    for (const validator of validatorFns) {
+      const error = validator(value, options, translator, allValues);
+      if (error) {
+        return error;
+      }
+    }
+    return null;
+  };
+}
+
+// src/form-hydration.js
+function hydrateForm(formSelector, options = {}) {
+  if (typeof document === "undefined") {
+    console.warn("hydrateForm can only run in browser environment");
+    return null;
+  }
+  const form = typeof formSelector === "string" ? document.querySelector(formSelector) : formSelector;
+  if (!form) {
+    console.warn(`Form not found: ${formSelector}`);
+    return null;
+  }
+  const opts = {
+    validateOnBlur: true,
+    validateOnChange: false,
+    validateOnSubmit: true,
+    showErrorsOnTouch: true,
+    debounce: 300,
+    ...options
+  };
+  const state = {
+    values: {},
+    errors: {},
+    touched: {},
+    isSubmitting: false,
+    fields: /* @__PURE__ */ new Map()
+  };
+  const debounceTimers = /* @__PURE__ */ new Map();
+  function parseValidators(validatorString) {
+    if (!validatorString) return [];
+    return validatorString.split(",").map((v) => {
+      const trimmed = v.trim();
+      const [name, ...params] = trimmed.split(":");
+      if (validators[name]) {
+        return params.length > 0 ? validators[name](...params.map((p) => isNaN(p) ? p : Number(p))) : validators[name];
+      }
+      return null;
+    }).filter(Boolean);
+  }
+  function discoverFields() {
+    const inputs = form.querySelectorAll("[name]");
+    inputs.forEach((input) => {
+      const name = input.getAttribute("name");
+      const field = {
+        name,
+        element: input,
+        type: input.getAttribute("type") || "text",
+        required: input.hasAttribute("required") || input.dataset.required === "true",
+        validators: parseValidators(input.dataset.validators),
+        errorElement: null
+      };
+      const errorId = `${name}-error`;
+      field.errorElement = document.getElementById(errorId) || createErrorElement(name, input);
+      state.fields.set(name, field);
+      state.values[name] = getFieldValue(input);
+      state.touched[name] = false;
+      state.errors[name] = null;
+    });
+  }
+  function createErrorElement(name, inputElement) {
+    const errorDiv = document.createElement("div");
+    errorDiv.id = `${name}-error`;
+    errorDiv.className = "error-message";
+    errorDiv.setAttribute("role", "alert");
+    errorDiv.style.display = "none";
+    const fieldWrapper = inputElement.closest(".form-field") || inputElement.parentElement;
+    fieldWrapper.appendChild(errorDiv);
+    return errorDiv;
+  }
+  function getFieldValue(input) {
+    if (input.type === "checkbox") {
+      return input.checked;
+    } else if (input.type === "radio") {
+      const checked = form.querySelector(`[name="${input.name}"]:checked`);
+      return checked ? checked.value : null;
+    } else {
+      return input.value;
+    }
+  }
+  function setFieldValue(name, value) {
+    const field = state.fields.get(name);
+    if (!field) return;
+    const { element } = field;
+    if (element.type === "checkbox") {
+      element.checked = Boolean(value);
+    } else if (element.type === "radio") {
+      const radio = form.querySelector(`[name="${name}"][value="${value}"]`);
+      if (radio) radio.checked = true;
+    } else {
+      element.value = value;
+    }
+    state.values[name] = value;
+  }
+  function validateField2(name) {
+    const field = state.fields.get(name);
+    if (!field) return true;
+    const value = state.values[name];
+    let error = null;
+    if (field.required && (value === null || value === void 0 || value === "")) {
+      error = "This field is required";
+    }
+    if (!error && field.validators.length > 0) {
+      for (const validator of field.validators) {
+        const result = validator.validate ? validator.validate(value, state.values) : validator(value, state.values);
+        if (result !== true && result !== void 0 && result !== null) {
+          error = validator.message || result || "Validation failed";
+          break;
+        }
+      }
+    }
+    state.errors[name] = error;
+    displayError(name, error);
+    return !error;
+  }
+  function displayError(name, error) {
+    const field = state.fields.get(name);
+    if (!field) return;
+    const { element, errorElement } = field;
+    if (error && state.touched[name] && opts.showErrorsOnTouch) {
+      errorElement.textContent = error;
+      errorElement.style.display = "block";
+      element.setAttribute("aria-invalid", "true");
+      element.classList.add("error");
+    } else {
+      errorElement.textContent = "";
+      errorElement.style.display = "none";
+      element.setAttribute("aria-invalid", "false");
+      element.classList.remove("error");
+    }
+  }
+  function validateForm2() {
+    let isValid = true;
+    for (const name of state.fields.keys()) {
+      const fieldValid = validateField2(name);
+      if (!fieldValid) isValid = false;
+    }
+    return isValid;
+  }
+  function handleChange(event2) {
+    const input = event2.target;
+    const name = input.getAttribute("name");
+    if (!state.fields.has(name)) return;
+    state.values[name] = getFieldValue(input);
+    if (opts.validateOnChange) {
+      if (debounceTimers.has(name)) {
+        clearTimeout(debounceTimers.get(name));
+      }
+      const timer = setTimeout(() => {
+        validateField2(name);
+        debounceTimers.delete(name);
+      }, opts.debounce);
+      debounceTimers.set(name, timer);
+    }
+  }
+  function handleBlur(event2) {
+    const input = event2.target;
+    const name = input.getAttribute("name");
+    if (!state.fields.has(name)) return;
+    state.touched[name] = true;
+    if (opts.validateOnBlur) {
+      validateField2(name);
+    }
+  }
+  function handleSubmit(event2) {
+    event2.preventDefault();
+    for (const name of state.fields.keys()) {
+      state.touched[name] = true;
+    }
+    const isValid = validateForm2();
+    if (!isValid) {
+      const firstErrorField = Array.from(state.fields.values()).find((field) => state.errors[field.name]);
+      if (firstErrorField) {
+        firstErrorField.element.focus();
+      }
+      if (options.onError) {
+        options.onError(state.errors);
+      }
+      return;
+    }
+    state.isSubmitting = true;
+    const submitData = { ...state.values };
+    if (options.onSubmit) {
+      const result = options.onSubmit(submitData, event2);
+      if (result === false) {
+        state.isSubmitting = false;
+        return;
+      }
+      if (result && typeof result.then === "function") {
+        result.then(() => {
+          state.isSubmitting = false;
+          if (options.onSuccess) {
+            options.onSuccess(submitData);
+          }
+        }).catch((error) => {
+          state.isSubmitting = false;
+          if (options.onError) {
+            options.onError(error);
+          }
+        });
+        return;
+      }
+    }
+    if (!options.onSubmit) {
+      form.submit();
+    }
+    state.isSubmitting = false;
+  }
+  function attachEventListeners() {
+    state.fields.forEach((field) => {
+      field.element.addEventListener("input", handleChange);
+      field.element.addEventListener("blur", handleBlur);
+    });
+    form.addEventListener("submit", handleSubmit);
+  }
+  function detachEventListeners() {
+    state.fields.forEach((field) => {
+      field.element.removeEventListener("input", handleChange);
+      field.element.removeEventListener("blur", handleBlur);
+    });
+    form.removeEventListener("submit", handleSubmit);
+    debounceTimers.forEach((timer) => clearTimeout(timer));
+    debounceTimers.clear();
+  }
+  function reset() {
+    state.fields.forEach((field) => {
+      setFieldValue(field.name, "");
+      state.touched[field.name] = false;
+      state.errors[field.name] = null;
+      displayError(field.name, null);
+    });
+    state.isSubmitting = false;
+    form.reset();
+  }
+  discoverFields();
+  attachEventListeners();
+  return {
+    validateField: validateField2,
+    validateForm: validateForm2,
+    setFieldValue,
+    getFieldValue: (name) => state.values[name],
+    getError: (name) => state.errors[name],
+    getErrors: () => ({ ...state.errors }),
+    getValues: () => ({ ...state.values }),
+    setTouched: (name, touched = true) => {
+      state.touched[name] = touched;
+    },
+    reset,
+    destroy: detachEventListeners,
+    isValid: () => Object.values(state.errors).every((e) => !e),
+    isSubmitting: () => state.isSubmitting,
+    getState: () => ({
+      values: { ...state.values },
+      errors: { ...state.errors },
+      touched: { ...state.touched },
+      isSubmitting: state.isSubmitting
+    })
+  };
+}
+
+// src/validation.js
+var validators2 = {
+  required: (message = "This field is required") => (value) => {
+    if (value === null || value === void 0 || value === "") {
+      return message;
+    }
+    return null;
+  },
+  minLength: (min, message = `Minimum length is ${min}`) => (value) => {
+    if (value && value.length < min) {
+      return message;
+    }
+    return null;
+  },
+  maxLength: (max, message = `Maximum length is ${max}`) => (value) => {
+    if (value && value.length > max) {
+      return message;
+    }
+    return null;
+  },
+  min: (min, message = `Minimum value is ${min}`) => (value) => {
+    if (value !== null && value !== void 0 && Number(value) < min) {
+      return message;
+    }
+    return null;
+  },
+  max: (max, message = `Maximum value is ${max}`) => (value) => {
+    if (value !== null && value !== void 0 && Number(value) > max) {
+      return message;
+    }
+    return null;
+  },
+  email: (message = "Invalid email address") => (value) => {
+    if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+      return message;
+    }
+    return null;
+  },
+  url: (message = "Invalid URL") => (value) => {
+    if (value) {
+      try {
+        new URL(value);
+      } catch {
+        return message;
+      }
+    }
+    return null;
+  },
+  pattern: (regex, message = "Invalid format") => (value) => {
+    if (value && !regex.test(value)) {
+      return message;
+    }
+    return null;
+  },
+  matches: (fieldName, message = "Fields do not match") => (value, formData) => {
+    if (value !== formData[fieldName]) {
+      return message;
+    }
+    return null;
+  },
+  oneOf: (options, message = "Invalid option") => (value) => {
+    if (value && !options.includes(value)) {
+      return message;
+    }
+    return null;
+  },
+  custom: (fn, message = "Validation failed") => (value, formData) => {
+    if (!fn(value, formData)) {
+      return message;
+    }
+    return null;
+  }
+};
+var FormValidator = class {
+  constructor(schema = {}) {
+    this.schema = schema;
+    this.errors = {};
+    this.touched = {};
+  }
+  /**
+   * Validate a single field
+   */
+  validateField(name, value, formData = {}) {
+    const fieldValidators = this.schema[name];
+    if (!fieldValidators) {
+      return null;
+    }
+    const validatorArray = Array.isArray(fieldValidators) ? fieldValidators : [fieldValidators];
+    for (const validator of validatorArray) {
+      const error = validator(value, formData);
+      if (error) {
+        return error;
+      }
+    }
+    return null;
+  }
+  /**
+   * Validate entire form
+   */
+  validate(formData) {
+    const errors = {};
+    let isValid = true;
+    for (const [name, value] of Object.entries(formData)) {
+      const error = this.validateField(name, value, formData);
+      if (error) {
+        errors[name] = error;
+        isValid = false;
+      }
+    }
+    for (const name of Object.keys(this.schema)) {
+      if (!(name in formData)) {
+        const error = this.validateField(name, void 0, formData);
+        if (error) {
+          errors[name] = error;
+          isValid = false;
+        }
+      }
+    }
+    this.errors = errors;
+    return { isValid, errors };
+  }
+  /**
+   * Mark field as touched
+   */
+  touch(name) {
+    this.touched[name] = true;
+  }
+  /**
+   * Check if field is touched
+   */
+  isTouched(name) {
+    return this.touched[name] || false;
+  }
+  /**
+   * Get error for field
+   */
+  getError(name) {
+    return this.errors[name] || null;
+  }
+  /**
+   * Check if field has error
+   */
+  hasError(name) {
+    return !!this.errors[name];
+  }
+  /**
+   * Clear errors
+   */
+  clearErrors() {
+    this.errors = {};
+  }
+  /**
+   * Clear touched state
+   */
+  clearTouched() {
+    this.touched = {};
+  }
+  /**
+   * Reset validator
+   */
+  reset() {
+    this.clearErrors();
+    this.clearTouched();
+  }
+};
+function createValidator(schema) {
+  return new FormValidator(schema);
+}
+function validate(formData, schema) {
+  const validator = new FormValidator(schema);
+  return validator.validate(formData);
+}
+
+// src/forms.js
+function createForm(options = {}) {
+  const opts = {
+    fields: {},
+    validation: {
+      strategy: "blur",
+      debounce: 300,
+      async: true,
+      stopOnFirstError: false,
+      revalidateOn: ["change", "blur"],
+      ...options.validation
+    },
+    errors: {
+      format: "detailed",
+      display: "inline",
+      customFormatter: null,
+      ...options.errors
+    },
+    submission: {
+      preventDefault: true,
+      validateBeforeSubmit: true,
+      disableOnSubmit: true,
+      resetOnSuccess: false,
+      onSuccess: null,
+      onError: null,
+      ...options.submission
+    },
+    state: {
+      trackDirty: true,
+      trackTouched: true,
+      trackVisited: true,
+      initialValues: {},
+      resetValues: null,
+      ...options.state
+    },
+    middleware: options.middleware || [],
+    ...options
+  };
+  const state = {
+    values: { ...opts.state.initialValues },
+    errors: {},
+    touched: {},
+    dirty: {},
+    visited: {},
+    isSubmitting: false,
+    isValidating: false,
+    submitCount: 0,
+    asyncValidations: /* @__PURE__ */ new Map()
+  };
+  const fields = /* @__PURE__ */ new Map();
+  const stats = {
+    validations: 0,
+    asyncValidations: 0,
+    submissions: 0,
+    successfulSubmissions: 0,
+    failedSubmissions: 0,
+    middlewareExecutions: 0
+  };
+  function registerField(name, config) {
+    fields.set(name, {
+      name,
+      type: config.type || "text",
+      validators: config.validators || [],
+      transform: config.transform || {},
+      validateWhen: config.validateWhen,
+      required: config.required || false,
+      defaultValue: config.defaultValue,
+      ...config
+    });
+    if (!(name in state.values)) {
+      state.values[name] = config.defaultValue !== void 0 ? config.defaultValue : "";
+    }
+    state.errors[name] = [];
+    state.touched[name] = false;
+    state.dirty[name] = false;
+    state.visited[name] = false;
+  }
+  function getField(name) {
+    return fields.get(name);
+  }
+  function setFieldValue(name, value, shouldValidate = true) {
+    const field = fields.get(name);
+    if (!field) {
+      console.warn(`Field ${name} not registered`);
+      return;
+    }
+    if (field.transform?.input) {
+      value = field.transform.input(value);
+    }
+    state.values[name] = value;
+    if (opts.state.trackDirty) {
+      const initialValue = opts.state.initialValues[name];
+      state.dirty[name] = value !== initialValue;
+    }
+    if (shouldValidate && opts.validation.revalidateOn.includes("change")) {
+      validateField2(name);
+    }
+  }
+  function getFieldValue(name) {
+    return state.values[name];
+  }
+  function setFieldTouched(name, touched = true) {
+    if (!opts.state.trackTouched) return;
+    state.touched[name] = touched;
+    if (touched && opts.validation.revalidateOn.includes("blur")) {
+      validateField2(name);
+    }
+  }
+  function setFieldVisited(name, visited = true) {
+    if (!opts.state.trackVisited) return;
+    state.visited[name] = visited;
+  }
+  async function validateField2(name) {
+    const field = fields.get(name);
+    if (!field) return { valid: true, errors: [] };
+    stats.validations++;
+    if (field.validateWhen && !field.validateWhen(state.values)) {
+      state.errors[name] = [];
+      return { valid: true, errors: [] };
+    }
+    const value = state.values[name];
+    const errors = [];
+    if (state.asyncValidations.has(name)) {
+      clearTimeout(state.asyncValidations.get(name));
+    }
+    if (field.required && (value === "" || value === null || value === void 0)) {
+      errors.push({
+        field: name,
+        type: "required",
+        message: `${name} is required`
+      });
+      state.errors[name] = errors;
+      return { valid: false, errors };
+    }
+    for (const validator of field.validators) {
+      try {
+        let result;
+        if (validator.validate.constructor.name === "AsyncFunction" || opts.validation.async) {
+          stats.asyncValidations++;
+          if (validator.debounce || opts.validation.debounce) {
+            await new Promise((resolve) => {
+              const timeoutId = setTimeout(resolve, validator.debounce || opts.validation.debounce);
+              state.asyncValidations.set(name, timeoutId);
+            });
+          }
+          result = await validator.validate(value, state.values);
+        } else {
+          result = validator.validate(value, state.values);
+        }
+        if (result !== true && result !== void 0 && result !== null) {
+          errors.push({
+            field: name,
+            type: validator.name || "custom",
+            message: validator.message || result || "Validation failed"
+          });
+          if (opts.validation.stopOnFirstError) {
+            break;
+          }
+        }
+      } catch (error) {
+        errors.push({
+          field: name,
+          type: "error",
+          message: error.message || "Validation error"
+        });
+        if (opts.validation.stopOnFirstError) {
+          break;
+        }
+      }
+    }
+    state.errors[name] = errors;
+    return { valid: errors.length === 0, errors };
+  }
+  async function validateForm2() {
+    state.isValidating = true;
+    const validationPromises = Array.from(fields.keys()).map(
+      (name) => validateField2(name)
+    );
+    const results = await Promise.all(validationPromises);
+    state.isValidating = false;
+    const allErrors = results.reduce((acc, result, index) => {
+      const fieldName = Array.from(fields.keys())[index];
+      if (result.errors.length > 0) {
+        acc[fieldName] = result.errors;
+      }
+      return acc;
+    }, {});
+    const isValid2 = Object.keys(allErrors).length === 0;
+    return {
+      valid: isValid2,
+      errors: allErrors
+    };
+  }
+  async function executeMiddleware(action, data) {
+    if (opts.middleware.length === 0) return data;
+    stats.middlewareExecutions++;
+    let result = data;
+    for (const middleware of opts.middleware) {
+      try {
+        const next = () => result;
+        result = await middleware(action, result, next, state);
+      } catch (error) {
+        console.error("Middleware error:", error);
+        throw error;
+      }
+    }
+    return result;
+  }
+  function applyTransformations(values) {
+    const transformed = { ...values };
+    fields.forEach((field, name) => {
+      if (field.transform?.output && name in transformed) {
+        transformed[name] = field.transform.output(transformed[name]);
+      }
+    });
+    return transformed;
+  }
+  async function handleSubmit(onSubmit) {
+    stats.submissions++;
+    try {
+      if (opts.submission.preventDefault && typeof event !== "undefined") {
+        event.preventDefault();
+      }
+      if (opts.submission.disableOnSubmit) {
+        state.isSubmitting = true;
+      }
+      let values = { ...state.values };
+      values = await executeMiddleware("beforeSubmit", values);
+      if (opts.submission.validateBeforeSubmit) {
+        const validation = await validateForm2();
+        if (!validation.valid) {
+          if (opts.submission.onError) {
+            opts.submission.onError(validation.errors);
+          }
+          stats.failedSubmissions++;
+          return { success: false, errors: validation.errors };
+        }
+      }
+      values = applyTransformations(values);
+      values = await executeMiddleware("afterValidation", values);
+      const result = await onSubmit(values);
+      await executeMiddleware("afterSubmit", result);
+      state.submitCount++;
+      stats.successfulSubmissions++;
+      if (opts.submission.resetOnSuccess) {
+        reset();
+      }
+      if (opts.submission.onSuccess) {
+        opts.submission.onSuccess(result);
+      }
+      return { success: true, data: result };
+    } catch (error) {
+      stats.failedSubmissions++;
+      if (opts.submission.onError) {
+        opts.submission.onError(error);
+      }
+      await executeMiddleware("onError", error);
+      return { success: false, error };
+    } finally {
+      state.isSubmitting = false;
+    }
+  }
+  function reset(values) {
+    const resetValues = values || opts.state.resetValues || opts.state.initialValues;
+    state.values = { ...resetValues };
+    state.errors = {};
+    state.touched = {};
+    state.dirty = {};
+    state.visited = {};
+    state.submitCount = 0;
+    fields.forEach((field, name) => {
+      if (!(name in state.values)) {
+        state.values[name] = field.defaultValue !== void 0 ? field.defaultValue : "";
+      }
+      state.errors[name] = [];
+      state.touched[name] = false;
+      state.dirty[name] = false;
+      state.visited[name] = false;
+    });
+  }
+  function getErrors(fieldName) {
+    if (fieldName) {
+      return state.errors[fieldName] || [];
+    }
+    if (opts.errors.customFormatter) {
+      return opts.errors.customFormatter(state.errors);
+    }
+    if (opts.errors.format === "simple") {
+      return Object.values(state.errors).flat().map((e) => e.message);
+    }
+    return state.errors;
+  }
+  function isValid() {
+    return Object.values(state.errors).every((errors) => errors.length === 0);
+  }
+  function isDirty(fieldName) {
+    if (fieldName) {
+      return state.dirty[fieldName] || false;
+    }
+    return Object.values(state.dirty).some((dirty) => dirty);
+  }
+  function isTouched(fieldName) {
+    if (fieldName) {
+      return state.touched[fieldName] || false;
+    }
+    return Object.values(state.touched).some((touched) => touched);
+  }
+  function getValues() {
+    return { ...state.values };
+  }
+  function setValues(values, shouldValidate = false) {
+    Object.entries(values).forEach(([name, value]) => {
+      setFieldValue(name, value, shouldValidate);
+    });
+  }
+  function getState() {
+    return {
+      values: { ...state.values },
+      errors: { ...state.errors },
+      touched: { ...state.touched },
+      dirty: { ...state.dirty },
+      visited: { ...state.visited },
+      isSubmitting: state.isSubmitting,
+      isValidating: state.isValidating,
+      submitCount: state.submitCount,
+      isValid: isValid(),
+      isDirty: isDirty(),
+      isTouched: isTouched()
+    };
+  }
+  function getStats() {
+    return {
+      ...stats,
+      fieldsRegistered: fields.size,
+      activeAsyncValidations: state.asyncValidations.size
+    };
+  }
+  Object.entries(opts.fields).forEach(([name, config]) => {
+    registerField(name, config);
+  });
+  return {
+    registerField,
+    getField,
+    setFieldValue,
+    getFieldValue,
+    setFieldTouched,
+    setFieldVisited,
+    validateField: validateField2,
+    validateForm: validateForm2,
+    handleSubmit,
+    reset,
+    getErrors,
+    isValid,
+    isDirty,
+    isTouched,
+    getValues,
+    setValues,
+    getState,
+    getStats,
+    // Expose state for testing
+    _state: state
+  };
+}
+var formValidators = {
+  required: {
+    name: "required",
+    validate: (value) => {
+      return value !== "" && value !== null && value !== void 0;
+    },
+    message: "This field is required"
+  },
+  email: {
+    name: "email",
+    validate: (value) => {
+      if (!value) return true;
+      const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      return regex.test(value);
+    },
+    message: "Please enter a valid email address"
+  },
+  minLength: (min) => ({
+    name: "minLength",
+    validate: (value) => {
+      if (!value) return true;
+      return String(value).length >= min;
+    },
+    message: `Must be at least ${min} characters`
+  }),
+  maxLength: (max) => ({
+    name: "maxLength",
+    validate: (value) => {
+      if (!value) return true;
+      return String(value).length <= max;
+    },
+    message: `Must be no more than ${max} characters`
+  }),
+  pattern: (regex, message) => ({
+    name: "pattern",
+    validate: (value) => {
+      if (!value) return true;
+      return regex.test(value);
+    },
+    message: message || "Invalid format"
+  }),
+  asyncEmail: {
+    name: "asyncEmail",
+    validate: async (value) => {
+      if (!value) return true;
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      return regex.test(value);
+    },
+    message: "Please enter a valid email address",
+    debounce: 500
+  },
+  asyncUnique: (checkFn) => ({
+    name: "asyncUnique",
+    validate: async (value) => {
+      if (!value) return true;
+      return await checkFn(value);
+    },
+    message: "This value is already taken",
+    debounce: 500
+  })
+};
+var enhancedForm = createForm();
+
+// src/advanced-validation.js
+import { ReactiveState, observable, computed } from "@coherent.js/state/src/reactive-state.js";
+import { globalErrorHandler } from "@coherent.js/core/src/utils/_error-handler.js";
+var validationRules = {
+  required: (value, params = true) => {
+    if (!params) return true;
+    const isEmpty = value === null || value === void 0 || value === "" || Array.isArray(value) && value.length === 0;
+    return !isEmpty || "This field is required";
+  },
+  min: (value, minValue) => {
+    if (value === null || value === void 0 || value === "") return true;
+    const num = Number(value);
+    return isNaN(num) || num >= minValue || `Value must be at least ${minValue}`;
+  },
+  max: (value, maxValue) => {
+    if (value === null || value === void 0 || value === "") return true;
+    const num = Number(value);
+    return isNaN(num) || num <= maxValue || `Value must be no more than ${maxValue}`;
+  },
+  minLength: (value, minLen) => {
+    if (value === null || value === void 0) return true;
+    const str = String(value);
+    return str.length >= minLen || `Must be at least ${minLen} characters`;
+  },
+  maxLength: (value, maxLen) => {
+    if (value === null || value === void 0) return true;
+    const str = String(value);
+    return str.length <= maxLen || `Must be no more than ${maxLen} characters`;
+  },
+  pattern: (value, regex, message = "Invalid format") => {
+    if (value === null || value === void 0 || value === "") return true;
+    const pattern = typeof regex === "string" ? new RegExp(regex) : regex;
+    return pattern.test(String(value)) || message;
+  },
+  email: (value) => {
+    if (value === null || value === void 0 || value === "") return true;
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(String(value)) || "Please enter a valid email address";
+  },
+  url: (value) => {
+    if (value === null || value === void 0 || value === "") return true;
+    try {
+      new URL(String(value));
+      return true;
+    } catch {
+      return "Please enter a valid URL";
+    }
+  },
+  numeric: (value) => {
+    if (value === null || value === void 0 || value === "") return true;
+    return !isNaN(Number(value)) || "Must be a valid number";
+  },
+  integer: (value) => {
+    if (value === null || value === void 0 || value === "") return true;
+    const num = Number(value);
+    return Number.isInteger(num) || "Must be a whole number";
+  },
+  alpha: (value) => {
+    if (value === null || value === void 0 || value === "") return true;
+    return /^[a-zA-Z]+$/.test(String(value)) || "Must contain only letters";
+  },
+  alphanumeric: (value) => {
+    if (value === null || value === void 0 || value === "") return true;
+    return /^[a-zA-Z0-9]+$/.test(String(value)) || "Must contain only letters and numbers";
+  },
+  equals: (value, otherValue, fieldName = "other field") => {
+    return value === otherValue || `Must match ${fieldName}`;
+  },
+  oneOf: (value, options, message = "Invalid selection") => {
+    if (value === null || value === void 0 || value === "") return true;
+    return options.includes(value) || message;
+  },
+  custom: (value, validator, ...args) => {
+    if (typeof validator !== "function") {
+      throw new Error("Custom validator must be a function");
+    }
+    return validator(value, ...args);
+  }
+};
+var binding = {
+  /**
+   * Two-way data binding for input elements
+   */
+  model(form, fieldName, options = {}) {
+    return {
+      value: form.getField(fieldName),
+      oninput: (event2) => {
+        const value = options.number ? Number(event2.target.value) : event2.target.value;
+        form.setField(fieldName, value);
+      },
+      onblur: () => {
+        form.handleBlur(fieldName);
+      }
+    };
+  },
+  /**
+   * Checkbox binding
+   */
+  checkbox(form, fieldName) {
+    return {
+      checked: Boolean(form.getField(fieldName)),
+      onchange: (event2) => {
+        form.setField(fieldName, event2.target.checked);
+      },
+      onblur: () => {
+        form.handleBlur(fieldName);
+      }
+    };
+  },
+  /**
+   * Select dropdown binding
+   */
+  select(form, fieldName, options = {}) {
+    return {
+      value: form.getField(fieldName),
+      onchange: (event2) => {
+        const value = options.multiple ? Array.from(event2.target.selectedOptions, (opt) => opt.value) : event2.target.value;
+        form.setField(fieldName, value);
+      },
+      onblur: () => {
+        form.handleBlur(fieldName);
+      }
+    };
+  },
+  /**
+   * Radio button binding
+   */
+  radio(form, fieldName, value) {
+    return {
+      checked: form.getField(fieldName) === value,
+      value,
+      onchange: (event2) => {
+        if (event2.target.checked) {
+          form.setField(fieldName, value);
+        }
+      }
+    };
+  }
+};
+var formComponents = {
+  /**
+   * Validation _error display
+   */
+  ValidationError({ form, field, className = "validation-_error" }) {
+    const validator = form.getValidator(field);
+    if (!validator || validator.errors.value.length === 0) {
+      return null;
+    }
+    return {
+      div: {
+        className,
+        children: validator.errors.value.map((_error) => ({
+          span: { text: _error, className: "_error-message" }
+        }))
+      }
+    };
+  },
+  /**
+   * Form field wrapper with validation
+   */
+  FormField({ form, field, label, children, showErrors = true }) {
+    const validator = form.getValidator(field);
+    const state = validator ? validator.getState() : {};
+    return {
+      div: {
+        className: `form-field ${state.hasError ? "has-_error" : ""} ${state.isTouched ? "touched" : ""}`,
+        children: [
+          label ? { label: { text: label, htmlFor: field } } : null,
+          children,
+          showErrors && state.hasError ? formComponents.ValidationError({ form, field }) : null
+        ].filter(Boolean)
+      }
+    };
+  }
+};
+export {
+  FormBuilder,
+  FormValidator,
+  binding,
+  buildForm,
+  composeValidators,
+  createForm,
+  createFormBuilder,
+  createValidator,
+  enhancedForm,
+  formComponents,
+  formValidators,
+  hydrateForm,
+  registerValidator,
+  validate,
+  validateField,
+  validateForm,
+  validationRules,
+  validators2 as validators
+};
+//# sourceMappingURL=index.js.map