@framesquared/form 0.1.0

package/dist/index.js

@@ -0,0 +1,2256 @@
+// src/field/Field.ts
+import { Component } from "@framesquared/component";
+var Field = class extends Component {
+  static $className = "Ext.form.field.Field";
+  constructor(config = {}) {
+    super({ xtype: "field", ...config });
+  }
+  initialize() {
+    super.initialize();
+    const cfg = this._config;
+    this._name = cfg.name ?? "";
+    this._originalValue = cfg.value ?? "";
+    this._value = cfg.value ?? "";
+    this._errors = [];
+    this._wasValid = true;
+    this._wasDirty = false;
+    this._labelEl = null;
+    this._bodyWrapEl = null;
+    this._errorEl = null;
+  }
+  afterRender() {
+    super.afterRender();
+    const cfg = this._config;
+    const el = this.el;
+    el.classList.add("x-field");
+    const labelAlign = cfg.labelAlign ?? "left";
+    el.classList.add(`x-label-${labelAlign}`);
+    if (cfg.fieldLabel) {
+      this._labelEl = document.createElement("label");
+      this._labelEl.classList.add("x-field-label");
+      this._labelEl.textContent = cfg.fieldLabel + (cfg.labelSeparator ?? ":");
+      if (cfg.labelWidth) this._labelEl.style.width = `${cfg.labelWidth}px`;
+      if (cfg.hideLabel) this._labelEl.style.display = "none";
+      el.appendChild(this._labelEl);
+    }
+    this._bodyWrapEl = document.createElement("div");
+    this._bodyWrapEl.classList.add("x-field-body");
+    el.appendChild(this._bodyWrapEl);
+  }
+  /**
+   * Called after the full subclass afterRender chain completes.
+   * Subclasses that need post-render init should call super.afterRender()
+   * then do their work — this method sets initial validity once
+   * the input element exists.
+   */
+  initFieldValidity() {
+    this._wasValid = this.isValid();
+  }
+  // -----------------------------------------------------------------------
+  // Value
+  // -----------------------------------------------------------------------
+  getValue() {
+    return this._value;
+  }
+  setValue(value) {
+    const oldValue = this._value;
+    this._value = value;
+    this.onValueChange(oldValue, value);
+  }
+  getRawValue() {
+    return String(this._value ?? "");
+  }
+  setRawValue(value) {
+    this.setValue(value);
+  }
+  onValueChange(oldValue, newValue) {
+    if (oldValue !== newValue) {
+      this.fire("change", this, newValue, oldValue);
+      this.checkDirty();
+      this.checkValidity();
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Dirty tracking
+  // -----------------------------------------------------------------------
+  isDirty() {
+    return this._value !== this._originalValue;
+  }
+  reset() {
+    this.setValue(this._originalValue);
+    this.clearInvalid();
+  }
+  checkDirty() {
+    const dirty = this.isDirty();
+    if (dirty !== this._wasDirty) {
+      this._wasDirty = dirty;
+      this.fire("dirtychange", this, dirty);
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Validation
+  // -----------------------------------------------------------------------
+  getErrors() {
+    return this.computeErrors();
+  }
+  isValid() {
+    const errors = this.computeErrors();
+    return errors.length === 0;
+  }
+  validate() {
+    const errors = this.computeErrors();
+    if (errors.length > 0) {
+      this.markInvalid(errors);
+      return false;
+    }
+    this.clearInvalid();
+    return true;
+  }
+  /** Subclasses override to add field-specific validation. */
+  computeErrors() {
+    return [];
+  }
+  markInvalid(errors) {
+    this._errors = Array.isArray(errors) ? errors : [errors];
+    if (this.el) {
+      this.el.classList.add("x-field-invalid");
+      this.showErrors();
+    }
+    this.fire("errorchange", this, this._errors);
+  }
+  clearInvalid() {
+    this._errors = [];
+    if (this.el) {
+      this.el.classList.remove("x-field-invalid");
+      this.removeErrorEl();
+    }
+    this.fire("errorchange", this, []);
+  }
+  checkValidity() {
+    const valid = this.isValid();
+    if (valid !== this._wasValid) {
+      this._wasValid = valid;
+      this.fire("validitychange", this, valid);
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Error display
+  // -----------------------------------------------------------------------
+  showErrors() {
+    this.removeErrorEl();
+    if (this._errors.length === 0 || !this.el) return;
+    this._errorEl = document.createElement("div");
+    this._errorEl.classList.add("x-field-error");
+    this._errorEl.textContent = this._errors.join(", ");
+    this.el.appendChild(this._errorEl);
+  }
+  removeErrorEl() {
+    if (this._errorEl && this._errorEl.parentNode) {
+      this._errorEl.parentNode.removeChild(this._errorEl);
+    }
+    this._errorEl = null;
+  }
+  // -----------------------------------------------------------------------
+  // Submission
+  // -----------------------------------------------------------------------
+  getSubmitValue() {
+    const cfg = this._config;
+    if (cfg.submitValue === false) return "";
+    return String(this._value ?? "");
+  }
+  getName() {
+    return this._name;
+  }
+};
+
+// src/field/VTypes.ts
+var VTypes = {
+  email: {
+    regex: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+    test: (v) => /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(v),
+    text: "Not a valid email address"
+  },
+  url: {
+    regex: /^https?:\/\/.+/,
+    test: (v) => /^https?:\/\/.+/.test(v),
+    text: "Not a valid URL"
+  },
+  alpha: {
+    regex: /^[a-zA-Z]+$/,
+    test: (v) => /^[a-zA-Z]+$/.test(v),
+    text: "Only letters allowed"
+  },
+  alphanum: {
+    regex: /^[a-zA-Z0-9]+$/,
+    test: (v) => /^[a-zA-Z0-9]+$/.test(v),
+    text: "Only letters and numbers allowed"
+  }
+};
+
+// src/field/Text.ts
+var SPECIAL_KEYS = /* @__PURE__ */ new Set(["Enter", "Escape", "Tab"]);
+var TextField = class extends Field {
+  static $className = "Ext.form.field.Text";
+  constructor(config = {}) {
+    super({ xtype: "textfield", ...config });
+  }
+  afterRender() {
+    super.afterRender();
+    const cfg = this._config;
+    this._inputEl = document.createElement("input");
+    this._inputEl.type = cfg.inputType ?? "text";
+    this._inputEl.classList.add("x-field-input");
+    if (this._name) this._inputEl.name = this._name;
+    if (cfg.emptyText) this._inputEl.placeholder = cfg.emptyText;
+    if (cfg.readOnly) this._inputEl.readOnly = true;
+    if (cfg.disabled) this._inputEl.disabled = true;
+    if (cfg.maxLength) this._inputEl.maxLength = cfg.maxLength;
+    if (this._value !== void 0 && this._value !== null && this._value !== "") {
+      this._inputEl.value = String(this._value);
+    }
+    this._bodyWrapEl.appendChild(this._inputEl);
+    if (cfg.triggers) {
+      for (const trig of cfg.triggers) {
+        this.renderTrigger(trig);
+      }
+    }
+    this.attachInputEvents(cfg);
+    this.initFieldValidity();
+  }
+  // -----------------------------------------------------------------------
+  // Input element access
+  // -----------------------------------------------------------------------
+  getInputEl() {
+    return this._inputEl;
+  }
+  // -----------------------------------------------------------------------
+  // Value override — sync with DOM
+  // -----------------------------------------------------------------------
+  getValue() {
+    if (this._inputEl) return this._inputEl.value;
+    return String(this._value ?? "");
+  }
+  setValue(value) {
+    const old = this.getValue();
+    this._value = value;
+    if (this._inputEl) {
+      this._inputEl.value = String(value ?? "");
+    }
+    this.onValueChange(old, this.getValue());
+  }
+  getRawValue() {
+    return this._inputEl?.value ?? "";
+  }
+  setRawValue(value) {
+    if (this._inputEl) this._inputEl.value = value;
+    this._value = value;
+  }
+  getSubmitValue() {
+    if (this._config.submitValue === false) return "";
+    return this.getValue();
+  }
+  // -----------------------------------------------------------------------
+  // Validation
+  // -----------------------------------------------------------------------
+  computeErrors() {
+    const cfg = this._config;
+    const value = this.getValue();
+    const errors = [];
+    if (cfg.allowBlank === false && (!value || value.trim() === "")) {
+      errors.push("This field is required");
+    }
+    if (value && value.length > 0) {
+      if (cfg.minLength !== void 0 && value.length < cfg.minLength) {
+        errors.push(`Minimum length is ${cfg.minLength}`);
+      }
+      if (cfg.maxLength !== void 0 && value.length > cfg.maxLength) {
+        errors.push(`Maximum length is ${cfg.maxLength}`);
+      }
+      if (cfg.regex && !cfg.regex.test(value)) {
+        errors.push(cfg.regexText ?? "Invalid format");
+      }
+      if (cfg.vtype && VTypes[cfg.vtype]) {
+        const vt = VTypes[cfg.vtype];
+        if (!vt.test(value)) {
+          errors.push(vt.text);
+        }
+      }
+    }
+    return errors;
+  }
+  // -----------------------------------------------------------------------
+  // Events
+  // -----------------------------------------------------------------------
+  attachInputEvents(cfg) {
+    const input = this._inputEl;
+    input.addEventListener("input", () => {
+      const newVal = input.value;
+      const oldVal = this._value;
+      this._value = newVal;
+      if (newVal !== oldVal) {
+        this.fire("change", this, newVal, oldVal);
+        this.checkDirty();
+        if (cfg.validateOnChange) this.validate();
+        this.checkValidity();
+      }
+    });
+    input.addEventListener("focus", () => {
+      this.fire("focus", this);
+    });
+    input.addEventListener("blur", () => {
+      this.fire("blur", this);
+      if (cfg.validateOnBlur) this.validate();
+      if (cfg.stripCharsRe) {
+        input.value = input.value.replace(cfg.stripCharsRe, "");
+        this._value = input.value;
+      }
+    });
+    input.addEventListener("keydown", (e) => {
+      if (SPECIAL_KEYS.has(e.key)) {
+        this.fire("specialkey", this, e);
+      }
+    });
+    if (cfg.maskRe) {
+      const re = cfg.maskRe;
+      input.addEventListener("keypress", (e) => {
+        if (e.key.length === 1 && !re.test(e.key)) {
+          e.preventDefault();
+        }
+      });
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Triggers
+  // -----------------------------------------------------------------------
+  renderTrigger(trig) {
+    const el = document.createElement("div");
+    el.classList.add("x-field-trigger", `x-trigger-${trig.type}`);
+    if (trig.cls) el.classList.add(trig.cls);
+    el.setAttribute("role", "button");
+    if (trig.handler) {
+      const handler = trig.handler;
+      el.addEventListener("click", (e) => {
+        handler(this, el, e);
+      });
+    }
+    this._bodyWrapEl.appendChild(el);
+  }
+};
+
+// src/field/TextArea.ts
+var TextArea = class extends TextField {
+  static $className = "Ext.form.field.TextArea";
+  constructor(config = {}) {
+    super({ xtype: "textarea", ...config });
+  }
+  afterRender() {
+    const FieldProto = Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(this)));
+    FieldProto.afterRender?.call(this);
+    const cfg = this._config;
+    this._textareaEl = document.createElement("textarea");
+    this._textareaEl.classList.add("x-field-input");
+    if (this._name) this._textareaEl.name = this._name;
+    if (cfg.emptyText) this._textareaEl.placeholder = cfg.emptyText;
+    if (cfg.readOnly) this._textareaEl.readOnly = true;
+    if (cfg.disabled) this._textareaEl.disabled = true;
+    if (cfg.rows) this._textareaEl.rows = cfg.rows;
+    if (cfg.cols) this._textareaEl.cols = cfg.cols;
+    if (cfg.grow) {
+      if (cfg.growMin) this._textareaEl.style.minHeight = `${cfg.growMin}px`;
+      if (cfg.growMax) this._textareaEl.style.maxHeight = `${cfg.growMax}px`;
+      this._textareaEl.style.overflow = "auto";
+    }
+    if (this._value !== void 0 && this._value !== null && this._value !== "") {
+      this._textareaEl.value = String(this._value);
+    }
+    this._bodyWrapEl.appendChild(this._textareaEl);
+    this._inputEl = this._textareaEl;
+    this.attachInputEvents(cfg);
+    this.initFieldValidity();
+  }
+  getInputEl() {
+    return this._textareaEl;
+  }
+  getValue() {
+    if (this._textareaEl) return this._textareaEl.value;
+    return String(this._value ?? "");
+  }
+  setValue(value) {
+    const old = this.getValue();
+    this._value = value;
+    if (this._textareaEl) {
+      this._textareaEl.value = String(value ?? "");
+    }
+    this.onValueChange(old, this.getValue());
+  }
+};
+
+// src/field/Display.ts
+var DisplayField = class extends Field {
+  static $className = "Ext.form.field.Display";
+  constructor(config = {}) {
+    super({ xtype: "displayfield", submitValue: false, ...config });
+  }
+  initialize() {
+    super.initialize();
+    this._displayEl = null;
+  }
+  afterRender() {
+    super.afterRender();
+    this._displayEl = document.createElement("div");
+    this._displayEl.classList.add("x-display-field-value");
+    this.updateDisplay();
+    this._bodyWrapEl.appendChild(this._displayEl);
+    this.el.classList.add("x-display-field");
+  }
+  setValue(value) {
+    const old = this._value;
+    this._value = value;
+    this.updateDisplay();
+    this.onValueChange(old, value);
+  }
+  getSubmitValue() {
+    return "";
+  }
+  updateDisplay() {
+    if (!this._displayEl) return;
+    const cfg = this._config;
+    const text = cfg.renderer ? cfg.renderer(this._value) : String(this._value ?? "");
+    this._displayEl.textContent = text;
+  }
+};
+
+// src/field/Hidden.ts
+var HiddenField = class extends Field {
+  static $className = "Ext.form.field.Hidden";
+  constructor(config = {}) {
+    super({ xtype: "hiddenfield", ...config });
+  }
+  afterRender() {
+    const ComponentProto = Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(this)));
+    ComponentProto.afterRender?.call(this);
+    this.el.classList.add("x-field", "x-hidden-field");
+    this.el.style.display = "none";
+    this._hiddenInput = document.createElement("input");
+    this._hiddenInput.type = "hidden";
+    if (this._name) this._hiddenInput.name = this._name;
+    if (this._value !== void 0 && this._value !== null) {
+      this._hiddenInput.value = String(this._value);
+    }
+    this.el.appendChild(this._hiddenInput);
+  }
+  getValue() {
+    return this._hiddenInput?.value ?? String(this._value ?? "");
+  }
+  setValue(value) {
+    const old = this.getValue();
+    this._value = value;
+    if (this._hiddenInput) this._hiddenInput.value = String(value ?? "");
+    this.onValueChange(old, this.getValue());
+  }
+  getSubmitValue() {
+    return this.getValue();
+  }
+};
+
+// src/field/Number.ts
+var NumberField = class extends TextField {
+  static $className = "Ext.form.field.Number";
+  constructor(config = {}) {
+    const triggers = [
+      { type: "spinner-up", handler: (_f) => this.spinUp() },
+      { type: "spinner-down", handler: (_f) => this.spinDown() },
+      ...config.triggers ?? []
+    ];
+    super({ xtype: "numberfield", ...config, triggers, maskRe: config.maskRe ?? /[0-9.\-]/ });
+  }
+  initialize() {
+    super.initialize();
+    const cfg = this._config;
+    this._minValue = cfg.minValue;
+    this._maxValue = cfg.maxValue;
+    this._step = cfg.step ?? 1;
+    this._allowDecimals = cfg.allowDecimals ?? true;
+    this._decimalPrecision = cfg.decimalPrecision ?? 10;
+  }
+  afterRender() {
+    super.afterRender();
+    this.el.classList.add("x-numberfield");
+    if (this._config.value !== void 0 && this._config.value !== null) {
+      this.formatInputValue();
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Value
+  // -----------------------------------------------------------------------
+  getNumberValue() {
+    const raw = this.getInputEl()?.value ?? "";
+    const n = parseFloat(raw);
+    return isNaN(n) ? 0 : n;
+  }
+  setValue(value) {
+    super.setValue(value);
+    this.formatInputValue();
+  }
+  formatInputValue() {
+    if (!this._inputEl) return;
+    const n = parseFloat(this._inputEl.value);
+    if (!isNaN(n) && this._decimalPrecision < 10) {
+      this._inputEl.value = n.toFixed(this._decimalPrecision);
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Spin
+  // -----------------------------------------------------------------------
+  spinUp() {
+    let val = this.getNumberValue() + this._step;
+    if (this._maxValue !== void 0 && val > this._maxValue) val = this._maxValue;
+    this.setValue(val);
+    this.fire("spin", this, val, "up");
+  }
+  spinDown() {
+    let val = this.getNumberValue() - this._step;
+    if (this._minValue !== void 0 && val < this._minValue) val = this._minValue;
+    this.setValue(val);
+    this.fire("spin", this, val, "down");
+  }
+  // -----------------------------------------------------------------------
+  // Constraints
+  // -----------------------------------------------------------------------
+  setMinValue(value) {
+    this._minValue = value;
+  }
+  setMaxValue(value) {
+    this._maxValue = value;
+  }
+  // -----------------------------------------------------------------------
+  // Validation
+  // -----------------------------------------------------------------------
+  computeErrors() {
+    const errors = super.computeErrors();
+    const raw = this.getInputEl()?.value ?? "";
+    if (raw === "") return errors;
+    const num = parseFloat(raw);
+    if (isNaN(num)) {
+      errors.push("Not a valid number");
+      return errors;
+    }
+    if (!this._allowDecimals && raw.includes(".")) {
+      errors.push("Decimal values are not allowed");
+    }
+    if (this._minValue !== void 0 && num < this._minValue) {
+      errors.push(`Value must be at least ${this._minValue}`);
+    }
+    if (this._maxValue !== void 0 && num > this._maxValue) {
+      errors.push(`Value must be at most ${this._maxValue}`);
+    }
+    return errors;
+  }
+};
+
+// src/util/DateUtil.ts
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var MONTH_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+function pad(n, len = 2) {
+  return String(n).padStart(len, "0");
+}
+function formatDate(date, format2) {
+  const Y = date.getFullYear();
+  const m = date.getMonth();
+  const d = date.getDate();
+  const H = date.getHours();
+  const i = date.getMinutes();
+  const s = date.getSeconds();
+  const h12 = H % 12 || 12;
+  const ampm = H < 12 ? "AM" : "PM";
+  let result = "";
+  for (let idx = 0; idx < format2.length; idx++) {
+    const ch = format2[idx];
+    switch (ch) {
+      case "Y":
+        result += String(Y);
+        break;
+      case "m":
+        result += pad(m + 1);
+        break;
+      case "d":
+        result += pad(d);
+        break;
+      case "H":
+        result += pad(H);
+        break;
+      case "i":
+        result += pad(i);
+        break;
+      case "s":
+        result += pad(s);
+        break;
+      case "g":
+        result += String(h12);
+        break;
+      case "A":
+        result += ampm;
+        break;
+      case "F":
+        result += MONTH_NAMES[m];
+        break;
+      case "M":
+        result += MONTH_SHORT[m];
+        break;
+      case "j":
+        result += String(d);
+        break;
+      case "n":
+        result += String(m + 1);
+        break;
+      default:
+        result += ch;
+        break;
+    }
+  }
+  return result;
+}
+function parseDate(input, format2) {
+  let year = 0, month = 0, day = 1, hour = 0, minute = 0, second = 0;
+  let inputIdx = 0;
+  for (let fmtIdx = 0; fmtIdx < format2.length && inputIdx < input.length; fmtIdx++) {
+    const ch = format2[fmtIdx];
+    switch (ch) {
+      case "Y":
+        year = parseInt(input.slice(inputIdx, inputIdx + 4), 10);
+        inputIdx += 4;
+        break;
+      case "m":
+        month = parseInt(input.slice(inputIdx, inputIdx + 2), 10) - 1;
+        inputIdx += 2;
+        break;
+      case "d":
+        day = parseInt(input.slice(inputIdx, inputIdx + 2), 10);
+        inputIdx += 2;
+        break;
+      case "H":
+        hour = parseInt(input.slice(inputIdx, inputIdx + 2), 10);
+        inputIdx += 2;
+        break;
+      case "i":
+        minute = parseInt(input.slice(inputIdx, inputIdx + 2), 10);
+        inputIdx += 2;
+        break;
+      case "s":
+        second = parseInt(input.slice(inputIdx, inputIdx + 2), 10);
+        inputIdx += 2;
+        break;
+      default:
+        inputIdx++;
+        break;
+    }
+  }
+  return new Date(year, month, day, hour, minute, second);
+}
+function addDate(date, unit, amount) {
+  const d = new Date(date.getTime());
+  switch (unit) {
+    case "year":
+      d.setFullYear(d.getFullYear() + amount);
+      break;
+    case "month":
+      d.setMonth(d.getMonth() + amount);
+      break;
+    case "day":
+      d.setDate(d.getDate() + amount);
+      break;
+    case "hour":
+      d.setHours(d.getHours() + amount);
+      break;
+    case "minute":
+      d.setMinutes(d.getMinutes() + amount);
+      break;
+    case "second":
+      d.setSeconds(d.getSeconds() + amount);
+      break;
+  }
+  return d;
+}
+function diffDate(date1, date2, unit) {
+  const ms = date2.getTime() - date1.getTime();
+  switch (unit) {
+    case "second":
+      return Math.round(ms / 1e3);
+    case "minute":
+      return Math.round(ms / 6e4);
+    case "hour":
+      return Math.round(ms / 36e5);
+    case "day":
+      return Math.round(ms / 864e5);
+    case "month":
+      return (date2.getFullYear() - date1.getFullYear()) * 12 + (date2.getMonth() - date1.getMonth());
+    case "year":
+      return date2.getFullYear() - date1.getFullYear();
+  }
+}
+function isLeapYear(year) {
+  return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
+}
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getMonthName(month) {
+  return MONTH_NAMES[month] ?? "";
+}
+function getMonthShortName(month) {
+  return MONTH_SHORT[month] ?? "";
+}
+
+// src/field/Date.ts
+var DateField = class extends TextField {
+  static $className = "Ext.form.field.Date";
+  constructor(config = {}) {
+    const triggers = [
+      { type: "expand", handler: (_f) => {
+      } },
+      ...config.triggers ?? []
+    ];
+    super({ xtype: "datefield", ...config, triggers });
+  }
+  initialize() {
+    super.initialize();
+    const cfg = this._config;
+    this._format = cfg.format ?? "Y-m-d";
+    this._minDate = cfg.minValue;
+    this._maxDate = cfg.maxValue;
+    this._dateValue = cfg.value instanceof Date ? cfg.value : null;
+  }
+  afterRender() {
+    super.afterRender();
+    this.el.classList.add("x-datefield");
+    if (this._dateValue) {
+      this._inputEl.value = formatDate(this._dateValue, this._format);
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Value
+  // -----------------------------------------------------------------------
+  getDateValue() {
+    return this._dateValue;
+  }
+  setValue(value) {
+    if (value instanceof Date) {
+      this._dateValue = value;
+      const formatted = formatDate(value, this._format);
+      this._value = formatted;
+      if (this._inputEl) this._inputEl.value = formatted;
+      this.onValueChange(null, value);
+    } else if (typeof value === "string" && value) {
+      this._dateValue = parseDate(value, this._format);
+      this._value = value;
+      if (this._inputEl) this._inputEl.value = value;
+      this.onValueChange(null, this._dateValue);
+    } else {
+      this._dateValue = null;
+      this._value = "";
+      if (this._inputEl) this._inputEl.value = "";
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Constraints
+  // -----------------------------------------------------------------------
+  setMinValue(date) {
+    this._minDate = date;
+  }
+  setMaxValue(date) {
+    this._maxDate = date;
+  }
+  // -----------------------------------------------------------------------
+  // Validation
+  // -----------------------------------------------------------------------
+  computeErrors() {
+    const errors = super.computeErrors();
+    const d = this._dateValue;
+    if (!d) return errors;
+    if (this._minDate && d.getTime() < this._minDate.getTime()) {
+      errors.push(`Date must be on or after ${formatDate(this._minDate, this._format)}`);
+    }
+    if (this._maxDate && d.getTime() > this._maxDate.getTime()) {
+      errors.push(`Date must be on or before ${formatDate(this._maxDate, this._format)}`);
+    }
+    return errors;
+  }
+};
+
+// src/picker/DatePicker.ts
+import { Component as Component2 } from "@framesquared/component";
+var DatePicker = class extends Component2 {
+  static $className = "Ext.picker.Date";
+  constructor(config = {}) {
+    super({ xtype: "datepicker", ...config });
+  }
+  initialize() {
+    super.initialize();
+    const cfg = this._config;
+    const now = cfg.value ?? /* @__PURE__ */ new Date();
+    this._viewDate = new Date(now.getFullYear(), now.getMonth(), 1);
+    this._selectedDate = new Date(now.getTime());
+    this._minDate = cfg.minValue;
+    this._maxDate = cfg.maxValue;
+    this._disabledDays = new Set(cfg.disabledDays ?? []);
+    this._gridEl = null;
+    this._headerEl = null;
+  }
+  afterRender() {
+    super.afterRender();
+    this.el.classList.add("x-datepicker");
+    this.buildUI();
+  }
+  // -----------------------------------------------------------------------
+  // UI Build
+  // -----------------------------------------------------------------------
+  buildUI() {
+    const el = this.el;
+    el.innerHTML = "";
+    const nav = document.createElement("div");
+    nav.classList.add("x-datepicker-nav");
+    const prevBtn = document.createElement("button");
+    prevBtn.classList.add("x-datepicker-prev");
+    prevBtn.type = "button";
+    prevBtn.textContent = "\u2039";
+    prevBtn.addEventListener("click", () => this.navigate(-1));
+    this._headerEl = document.createElement("span");
+    this._headerEl.classList.add("x-datepicker-header");
+    const nextBtn = document.createElement("button");
+    nextBtn.classList.add("x-datepicker-next");
+    nextBtn.type = "button";
+    nextBtn.textContent = "\u203A";
+    nextBtn.addEventListener("click", () => this.navigate(1));
+    nav.appendChild(prevBtn);
+    nav.appendChild(this._headerEl);
+    nav.appendChild(nextBtn);
+    el.appendChild(nav);
+    const dayHeaders = document.createElement("div");
+    dayHeaders.classList.add("x-datepicker-days");
+    for (const d of ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]) {
+      const dh = document.createElement("span");
+      dh.classList.add("x-datepicker-dayname");
+      dh.textContent = d;
+      dayHeaders.appendChild(dh);
+    }
+    el.appendChild(dayHeaders);
+    this._gridEl = document.createElement("div");
+    this._gridEl.classList.add("x-datepicker-grid");
+    el.appendChild(this._gridEl);
+    const cfg = this._config;
+    if (cfg.showToday !== false) {
+      const todayBtn = document.createElement("button");
+      todayBtn.classList.add("x-datepicker-today");
+      todayBtn.type = "button";
+      todayBtn.textContent = "Today";
+      todayBtn.addEventListener("click", () => {
+        const today = /* @__PURE__ */ new Date();
+        this._selectedDate = today;
+        this._viewDate = new Date(today.getFullYear(), today.getMonth(), 1);
+        this.renderGrid();
+        this.fire("select", this, today);
+      });
+      el.appendChild(todayBtn);
+    }
+    this.renderGrid();
+  }
+  renderGrid() {
+    if (!this._gridEl || !this._headerEl) return;
+    const year = this._viewDate.getFullYear();
+    const month = this._viewDate.getMonth();
+    this._headerEl.textContent = `${getMonthName(month)} ${year}`;
+    this._gridEl.innerHTML = "";
+    const daysInMonth = getDaysInMonth(year, month);
+    const firstDay = new Date(year, month, 1).getDay();
+    for (let i = 0; i < firstDay; i++) {
+      const blank = document.createElement("span");
+      blank.classList.add("x-datepicker-blank");
+      this._gridEl.appendChild(blank);
+    }
+    for (let day = 1; day <= daysInMonth; day++) {
+      const cellDate = new Date(year, month, day);
+      const cell = document.createElement("span");
+      cell.classList.add("x-datepicker-cell");
+      cell.textContent = String(day);
+      cell.setAttribute("data-date", `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`);
+      const disabled = this.isDateDisabled(cellDate);
+      if (disabled) {
+        cell.classList.add("x-datepicker-disabled");
+      }
+      if (this._selectedDate && cellDate.getFullYear() === this._selectedDate.getFullYear() && cellDate.getMonth() === this._selectedDate.getMonth() && cellDate.getDate() === this._selectedDate.getDate()) {
+        cell.classList.add("x-datepicker-selected");
+      }
+      cell.addEventListener("click", () => {
+        if (disabled) return;
+        this._selectedDate = cellDate;
+        this.renderGrid();
+        this.fire("select", this, cellDate);
+      });
+      this._gridEl.appendChild(cell);
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Navigation
+  // -----------------------------------------------------------------------
+  navigate(delta) {
+    this._viewDate.setMonth(this._viewDate.getMonth() + delta);
+    this.renderGrid();
+  }
+  // -----------------------------------------------------------------------
+  // Disabled date check
+  // -----------------------------------------------------------------------
+  isDateDisabled(date) {
+    if (this._disabledDays.has(date.getDay())) return true;
+    if (this._minDate && date.getTime() < this.startOfDay(this._minDate).getTime()) return true;
+    if (this._maxDate && date.getTime() > this.startOfDay(this._maxDate).getTime()) return true;
+    return false;
+  }
+  startOfDay(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  }
+  // -----------------------------------------------------------------------
+  // Public
+  // -----------------------------------------------------------------------
+  getSelectedDate() {
+    return new Date(this._selectedDate.getTime());
+  }
+};
+
+// src/picker/ColorPicker.ts
+import { Component as Component3 } from "@framesquared/component";
+var DEFAULT_COLORS = [
+  "000000",
+  "993300",
+  "333300",
+  "003300",
+  "003366",
+  "000080",
+  "333399",
+  "333333",
+  "800000",
+  "FF6600",
+  "808000",
+  "008000",
+  "008080",
+  "0000FF",
+  "666699",
+  "808080",
+  "FF0000",
+  "FF9900",
+  "99CC00",
+  "339966",
+  "33CCCC",
+  "3366FF",
+  "800080",
+  "969696",
+  "FF00FF",
+  "FFCC00",
+  "FFFF00",
+  "00FF00",
+  "00FFFF",
+  "00CCFF",
+  "993366",
+  "C0C0C0",
+  "FF99CC",
+  "FFCC99",
+  "FFFF99",
+  "CCFFCC",
+  "CCFFFF",
+  "99CCFF",
+  "CC99FF",
+  "FFFFFF"
+];
+var ColorPicker = class extends Component3 {
+  static $className = "Ext.picker.Color";
+  constructor(config = {}) {
+    super({ xtype: "colorpicker", ...config });
+  }
+  initialize() {
+    super.initialize();
+    const cfg = this._config;
+    this._colors = cfg.colors ?? DEFAULT_COLORS;
+    this._selectedColor = null;
+  }
+  afterRender() {
+    super.afterRender();
+    this.el.classList.add("x-colorpicker");
+    this.buildSwatches();
+  }
+  buildSwatches() {
+    const el = this.el;
+    for (const color of this._colors) {
+      const swatch = document.createElement("div");
+      swatch.classList.add("x-colorpicker-swatch");
+      swatch.style.backgroundColor = `#${color}`;
+      swatch.setAttribute("data-color", color);
+      swatch.addEventListener("click", () => {
+        this._selectedColor = color;
+        this.fire("select", this, color);
+      });
+      el.appendChild(swatch);
+    }
+  }
+  getSelectedColor() {
+    return this._selectedColor;
+  }
+};
+
+// src/BoundList.ts
+import { Component as Component4 } from "@framesquared/component";
+var BoundList = class extends Component4 {
+  static $className = "Ext.form.BoundList";
+  constructor(config = {}) {
+    super({ xtype: "boundlist", ...config });
+  }
+  initialize() {
+    super.initialize();
+    const cfg = this._config;
+    this._store = cfg.store ?? null;
+    this._displayField = cfg.displayField ?? "text";
+    this._highlightIndex = -1;
+  }
+  afterRender() {
+    super.afterRender();
+    this.el.classList.add("x-boundlist");
+    this.el.setAttribute("role", "listbox");
+    this.el.tabIndex = -1;
+    this.renderItems();
+    this.el.addEventListener("keydown", (e) => {
+      this.onKeyDown(e);
+    });
+  }
+  refresh() {
+    this.renderItems();
+  }
+  renderItems() {
+    if (!this.el) return;
+    this.el.innerHTML = "";
+    this._highlightIndex = -1;
+    const records = Array.isArray(this._store) ? this._store : this._store?.getRange?.() ?? [];
+    for (let i = 0; i < records.length; i++) {
+      const rec = records[i];
+      const item = document.createElement("div");
+      item.classList.add("x-boundlist-item");
+      item.setAttribute("role", "option");
+      item.setAttribute("data-index", String(i));
+      item.textContent = rec.get ? rec.get(this._displayField) : String(rec.data?.[this._displayField] ?? rec[this._displayField] ?? "");
+      item.addEventListener("click", () => {
+        this.fire("itemclick", this, rec, item, i);
+        this.fire("select", this, rec);
+      });
+      item.addEventListener("mouseover", () => {
+        this.highlightItem(i);
+      });
+      this.el.appendChild(item);
+    }
+  }
+  highlightItem(index) {
+    const items = this.el.querySelectorAll(".x-boundlist-item");
+    items.forEach((el, i) => {
+      el.classList.toggle("x-boundlist-item-over", i === index);
+    });
+    this._highlightIndex = index;
+  }
+  onKeyDown(e) {
+    const items = this.el.querySelectorAll(".x-boundlist-item");
+    const count = items.length;
+    if (count === 0) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      this.highlightItem(Math.min(this._highlightIndex + 1, count - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      this.highlightItem(Math.max(this._highlightIndex - 1, 0));
+    } else if (e.key === "Enter" && this._highlightIndex >= 0) {
+      e.preventDefault();
+      const records = Array.isArray(this._store) ? this._store : this._store?.getRange?.() ?? [];
+      const rec = records[this._highlightIndex];
+      if (rec) {
+        this.fire("select", this, rec);
+      }
+    }
+  }
+  getStore() {
+    return this._store;
+  }
+};
+
+// src/field/ComboBox.ts
+var ComboBox = class extends TextField {
+  static $className = "Ext.form.field.ComboBox";
+  constructor(config = {}) {
+    const triggers = [
+      { type: "expand", handler: (_f) => {
+        if (this._expanded) this.collapse();
+        else this.expand();
+      } },
+      ...config.triggers ?? []
+    ];
+    super({ xtype: "combobox", ...config, triggers });
+  }
+  initialize() {
+    super.initialize();
+    const cfg = this._config;
+    this._store = cfg.store ?? null;
+    this._displayField = cfg.displayField ?? "text";
+    this._valueField = cfg.valueField ?? "id";
+    this._queryMode = cfg.queryMode ?? "local";
+    this._forceSelection = cfg.forceSelection ?? false;
+    this._multiSelect = cfg.multiSelect ?? false;
+    this._delimiter = cfg.delimiter ?? ", ";
+    this._expanded = false;
+    this._selection = [];
+    this._boundList = null;
+    this._selectedValue = null;
+  }
+  afterRender() {
+    super.afterRender();
+    this.el.classList.add("x-combobox");
+    if (this._forceSelection) {
+      this.getInputEl().addEventListener("blur", () => {
+        const raw = this.getInputEl().value;
+        if (raw && !this.findRecord(this._displayField, raw)) {
+          this.getInputEl().value = "";
+          this._selectedValue = null;
+        }
+      });
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Expand / Collapse
+  // -----------------------------------------------------------------------
+  expand() {
+    if (this._expanded) return;
+    this._expanded = true;
+    if (!this._boundList) {
+      this._boundList = new BoundList({
+        store: this._store,
+        displayField: this._displayField,
+        renderTo: document.body
+      });
+      const listEl2 = this._boundList.el;
+      listEl2.classList.add("x-combobox-list");
+      listEl2.style.display = "none";
+      listEl2.style.position = "fixed";
+      listEl2.style.zIndex = "1000";
+      listEl2.style.backgroundColor = "#fff";
+      listEl2.style.border = "1px solid #ccc";
+      listEl2.style.boxShadow = "0 2px 8px rgba(0,0,0,0.15)";
+      listEl2.style.minWidth = "100px";
+      listEl2.style.maxHeight = "200px";
+      listEl2.style.overflowY = "auto";
+      this._boundList.on?.("select", (_bl, rec) => {
+        this.select(rec);
+        this.collapse();
+      });
+    } else {
+      this._boundList.refresh();
+    }
+    const anchor = this.el ?? this.getInputEl();
+    const rect = anchor.getBoundingClientRect();
+    const listEl = this._boundList.el;
+    listEl.style.top = `${rect.bottom}px`;
+    listEl.style.left = `${rect.left}px`;
+    listEl.style.width = `${rect.width}px`;
+    listEl.style.display = "";
+    this.fire("expand", this);
+  }
+  collapse() {
+    if (!this._expanded) return;
+    this._expanded = false;
+    if (this._boundList?.el) this._boundList.el.style.display = "none";
+    this.fire("collapse", this);
+  }
+  isExpanded() {
+    return this._expanded;
+  }
+  // -----------------------------------------------------------------------
+  // Selection
+  // -----------------------------------------------------------------------
+  select(record) {
+    if (!record) return;
+    this.fire("beforeselect", this, record);
+    if (this._multiSelect) {
+      if (!this._selection.includes(record)) {
+        this._selection.push(record);
+      }
+      this.updateMultiDisplay();
+    } else {
+      this._selection = [record];
+      const display = record.get ? record.get(this._displayField) : record[this._displayField] ?? "";
+      const value = record.get ? record.get(this._valueField) : record[this._valueField] ?? "";
+      this.getInputEl().value = display;
+      this._selectedValue = value;
+      this._value = value;
+    }
+    this.fire("select", this, record);
+  }
+  deselect(record) {
+    this.fire("beforedeselect", this, record);
+    const idx = this._selection.indexOf(record);
+    if (idx !== -1) {
+      this._selection.splice(idx, 1);
+      if (this._multiSelect) this.updateMultiDisplay();
+    }
+  }
+  getSelection() {
+    return [...this._selection];
+  }
+  updateMultiDisplay() {
+    const display = this._selection.map((r) => r.get ? r.get(this._displayField) : r[this._displayField] ?? "").join(this._delimiter);
+    this.getInputEl().value = display;
+    this._value = this._selection.map((r) => r.get ? r.get(this._valueField) : r[this._valueField] ?? null);
+  }
+  // -----------------------------------------------------------------------
+  // Query
+  // -----------------------------------------------------------------------
+  doQuery(queryString) {
+    this.fire("beforequery", this, queryString);
+    if (this._queryMode === "local" && this._store) {
+      this._store.filter(this._displayField, queryString);
+    } else if (this._queryMode === "remote" && this._store) {
+      const cfg = this._config;
+      this._store.load({ params: { [cfg.queryParam ?? "query"]: queryString } });
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Finding
+  // -----------------------------------------------------------------------
+  findRecord(field, value) {
+    return this._store?.findRecord?.(field, value) ?? null;
+  }
+  // -----------------------------------------------------------------------
+  // Value override
+  // -----------------------------------------------------------------------
+  getValue() {
+    if (this._multiSelect) {
+      return this._selection.map((r) => r.get ? r.get(this._valueField) : r[this._valueField] ?? null);
+    }
+    return this._selectedValue ?? super.getValue();
+  }
+  // -----------------------------------------------------------------------
+  // Cleanup
+  // -----------------------------------------------------------------------
+  onDestroy() {
+    if (this._boundList) {
+      this._boundList.destroy();
+      this._boundList = null;
+    }
+    super.onDestroy();
+  }
+};
+
+// src/field/Tag.ts
+var TagField = class extends ComboBox {
+  static $className = "Ext.form.field.Tag";
+  constructor(config = {}) {
+    super({ xtype: "tagfield", multiSelect: true, ...config });
+  }
+  initialize() {
+    super.initialize();
+    this._tagWrapEl = null;
+  }
+  afterRender() {
+    super.afterRender();
+    this.el.classList.add("x-tagfield");
+    this._tagWrapEl = document.createElement("div");
+    this._tagWrapEl.classList.add("x-tagfield-tags");
+    this._bodyWrapEl.insertBefore(this._tagWrapEl, this._bodyWrapEl.firstChild);
+  }
+  // -----------------------------------------------------------------------
+  // Override select to render tags
+  // -----------------------------------------------------------------------
+  select(record) {
+    if (!record) return;
+    const selection = this.getSelection();
+    if (selection.includes(record)) return;
+    this.fire("beforeselect", this, record);
+    this._selection.push(record);
+    this.renderTags();
+    this.getInputEl().value = "";
+    this.fire("select", this, record);
+  }
+  deselect(record) {
+    this.fire("beforedeselect", this, record);
+    const sel = this._selection;
+    const idx = sel.indexOf(record);
+    if (idx !== -1) {
+      sel.splice(idx, 1);
+      this.renderTags();
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Tag rendering
+  // -----------------------------------------------------------------------
+  renderTags() {
+    if (!this._tagWrapEl) return;
+    this._tagWrapEl.innerHTML = "";
+    const displayField = this._displayField;
+    for (const rec of this.getSelection()) {
+      const tag = document.createElement("span");
+      tag.classList.add("x-tagfield-tag");
+      const text = document.createElement("span");
+      text.classList.add("x-tagfield-tag-text");
+      text.textContent = rec.get ? rec.get(displayField) : "";
+      tag.appendChild(text);
+      const close = document.createElement("span");
+      close.classList.add("x-tagfield-tag-close");
+      close.textContent = "\xD7";
+      close.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.deselect(rec);
+      });
+      tag.appendChild(close);
+      this._tagWrapEl.appendChild(tag);
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Value override
+  // -----------------------------------------------------------------------
+  getValue() {
+    const valueField = this._valueField;
+    return this.getSelection().map((r) => r.get ? r.get(valueField) : null);
+  }
+};
+
+// src/field/Checkbox.ts
+var Checkbox = class extends Field {
+  static $className = "Ext.form.field.Checkbox";
+  constructor(config = {}) {
+    super({ xtype: "checkboxfield", ...config });
+  }
+  initialize() {
+    super.initialize();
+    const cfg = this._config;
+    this._checked = cfg.checked ?? false;
+    this._inputValue = cfg.inputValue ?? "on";
+    this._uncheckedValue = cfg.uncheckedValue ?? "";
+  }
+  afterRender() {
+    super.afterRender();
+    const cfg = this._config;
+    this.el.classList.add("x-checkbox");
+    this._inputEl = document.createElement("input");
+    this._inputEl.type = "checkbox";
+    this._inputEl.classList.add("x-checkbox-input");
+    if (this._name) this._inputEl.name = this._name;
+    this._inputEl.checked = this._checked;
+    this._bodyWrapEl.appendChild(this._inputEl);
+    if (cfg.boxLabel) {
+      const label = document.createElement("span");
+      label.classList.add("x-checkbox-label");
+      label.textContent = cfg.boxLabel;
+      this._bodyWrapEl.appendChild(label);
+    }
+    this._inputEl.addEventListener("change", () => {
+      const prev = this._checked;
+      this._checked = this._inputEl.checked;
+      this.fire("change", this, this.getValue(), prev ? this._inputValue : this._uncheckedValue);
+    });
+  }
+  // -----------------------------------------------------------------------
+  // Value
+  // -----------------------------------------------------------------------
+  getValue() {
+    return this._checked ? this._inputValue : this._uncheckedValue;
+  }
+  isChecked() {
+    return this._checked;
+  }
+  setChecked(checked) {
+    this._checked = checked;
+    if (this._inputEl) this._inputEl.checked = checked;
+    this.fire("change", this, this.getValue());
+  }
+  getSubmitValue() {
+    return this.getValue();
+  }
+};
+
+// src/field/Radio.ts
+var radioGroups = /* @__PURE__ */ new Map();
+var Radio = class extends Checkbox {
+  static $className = "Ext.form.field.Radio";
+  constructor(config = {}) {
+    super({ xtype: "radiofield", ...config });
+  }
+  afterRender() {
+    super.afterRender();
+    this._inputEl.type = "radio";
+    this.el.classList.remove("x-checkbox");
+    this.el.classList.add("x-radio");
+    if (this._name) {
+      let group = radioGroups.get(this._name);
+      if (!group) {
+        group = /* @__PURE__ */ new Set();
+        radioGroups.set(this._name, group);
+      }
+      group.add(this);
+    }
+  }
+  setChecked(checked) {
+    if (checked && this._name) {
+      const group = radioGroups.get(this._name);
+      if (group) {
+        for (const radio of group) {
+          if (radio !== this && radio._checked) {
+            radio._checked = false;
+            if (radio._inputEl) radio._inputEl.checked = false;
+          }
+        }
+      }
+    }
+    super.setChecked(checked);
+  }
+  getGroupValue() {
+    if (this._name) {
+      const group = radioGroups.get(this._name);
+      if (group) {
+        for (const radio of group) {
+          if (radio.isChecked()) return radio._inputValue;
+        }
+      }
+    }
+    return "";
+  }
+  onDestroy() {
+    if (this._name) {
+      radioGroups.get(this._name)?.delete(this);
+    }
+    super.onDestroy();
+  }
+};
+
+// src/field/CheckboxGroup.ts
+import { Container } from "@framesquared/component";
+var CheckboxGroup = class extends Container {
+  static $className = "Ext.form.CheckboxGroup";
+  constructor(config = {}) {
+    super({ xtype: "checkboxgroup", ...config });
+  }
+  afterRender() {
+    super.afterRender();
+    this.el.classList.add("x-checkbox-group");
+    const cfg = this._config;
+    if (cfg.columns) {
+      const body = this.getBodyEl();
+      body.style.display = "grid";
+      body.style.gridTemplateColumns = `repeat(${cfg.columns}, 1fr)`;
+    }
+  }
+  getValue() {
+    return this.getItems().filter((item) => item instanceof Checkbox && item.isChecked()).map((cb) => cb.getValue());
+  }
+  setValue(values) {
+    for (const item of this.getItems()) {
+      if (item instanceof Checkbox) {
+        item.setChecked(values.includes(item.getValue()) || values.includes(item._inputValue));
+      }
+    }
+  }
+};
+
+// src/field/RadioGroup.ts
+import { Container as Container2 } from "@framesquared/component";
+var RadioGroup = class extends Container2 {
+  static $className = "Ext.form.RadioGroup";
+  constructor(config = {}) {
+    super({ xtype: "radiogroup", ...config });
+  }
+  afterRender() {
+    super.afterRender();
+    this.el.classList.add("x-radio-group");
+    const cfg = this._config;
+    if (cfg.columns) {
+      const body = this.getBodyEl();
+      body.style.display = "grid";
+      body.style.gridTemplateColumns = `repeat(${cfg.columns}, 1fr)`;
+    }
+  }
+  getValue() {
+    for (const item of this.getItems()) {
+      if (item instanceof Radio && item.isChecked()) {
+        return item.getValue();
+      }
+    }
+    return "";
+  }
+  setValue(value) {
+    for (const item of this.getItems()) {
+      if (item instanceof Radio) {
+        item.setChecked(item._inputValue === value);
+      }
+    }
+  }
+};
+
+// src/FormPanel.ts
+import { Panel } from "@framesquared/ui";
+import { Component as Component5 } from "@framesquared/component";
+
+// src/form/BasicForm.ts
+var BasicForm = class {
+  fields = [];
+  // -----------------------------------------------------------------------
+  // Field management
+  // -----------------------------------------------------------------------
+  addField(field) {
+    if (!this.fields.includes(field)) {
+      this.fields.push(field);
+    }
+  }
+  removeField(field) {
+    const idx = this.fields.indexOf(field);
+    if (idx !== -1) this.fields.splice(idx, 1);
+  }
+  getFields() {
+    return [...this.fields];
+  }
+  findField(name) {
+    return this.fields.find((f) => f.getName() === name);
+  }
+  // -----------------------------------------------------------------------
+  // Values
+  // -----------------------------------------------------------------------
+  getValues(asString = false, dirtyOnly = false) {
+    const values = {};
+    for (const field of this.fields) {
+      const name = field.getName();
+      if (!name) continue;
+      if (dirtyOnly && !field.isDirty()) continue;
+      values[name] = field.getSubmitValue?.() ?? field.getValue();
+    }
+    if (asString) {
+      return new URLSearchParams(values).toString();
+    }
+    return values;
+  }
+  setValues(values) {
+    for (const [key, val] of Object.entries(values)) {
+      const field = this.findField(key);
+      if (field) field.setValue(val);
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Validation
+  // -----------------------------------------------------------------------
+  isValid() {
+    return this.fields.every((f) => f.isValid());
+  }
+  isDirty() {
+    return this.fields.some((f) => f.isDirty());
+  }
+  reset() {
+    for (const field of this.fields) field.reset();
+  }
+  clearInvalid() {
+    for (const field of this.fields) field.clearInvalid();
+  }
+  markInvalid(errors) {
+    for (const err of errors) {
+      const field = this.findField(err.field);
+      if (field) field.markInvalid(err.message);
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Submit / Load
+  // -----------------------------------------------------------------------
+  async submit(url2, options = {}) {
+    const method = options.method ?? "POST";
+    const values = this.getValues();
+    const params = { ...values, ...options.params ?? {} };
+    let body;
+    const headers = { ...options.headers ?? {} };
+    if (options.jsonSubmit) {
+      headers["Content-Type"] = "application/json";
+      body = JSON.stringify(params);
+    } else {
+      headers["Content-Type"] = "application/x-www-form-urlencoded";
+      body = new URLSearchParams(params).toString();
+    }
+    const response = await fetch(url2, { method, headers, body });
+    const data = await response.json();
+    return {
+      success: response.ok && data.success !== false,
+      data
+    };
+  }
+  async load(url2, options = {}) {
+    const method = options.method ?? "GET";
+    const response = await fetch(url2, { method });
+    const data = await response.json();
+    if (response.ok && data.data) {
+      this.setValues(data.data);
+    }
+    return { success: response.ok, data };
+  }
+};
+
+// src/FormPanel.ts
+var FormPanel = class extends Panel {
+  static $className = "Ext.form.Panel";
+  constructor(config = {}) {
+    if (config.fieldDefaults && config.items) {
+      config.items = config.items.map((item) => {
+        if (item instanceof Component5) {
+          const cfg = item._config;
+          for (const [k, v] of Object.entries(config.fieldDefaults)) {
+            if (cfg[k] === void 0) cfg[k] = v;
+          }
+          return item;
+        }
+        return { ...config.fieldDefaults, ...item };
+      });
+    }
+    super({ xtype: "form", ...config });
+  }
+  initialize() {
+    super.initialize();
+    const cfg = this._config;
+    this._basicForm = new BasicForm();
+    this._url = cfg.url ?? "";
+    this._method = cfg.method ?? "POST";
+    this._jsonSubmit = cfg.jsonSubmit ?? false;
+  }
+  afterRender() {
+    super.afterRender();
+    this.el.classList.add("x-form");
+    this.collectFields();
+  }
+  // -----------------------------------------------------------------------
+  // Field collection
+  // -----------------------------------------------------------------------
+  collectFields() {
+    this.walkItems(this, (item) => {
+      if (item instanceof Field) {
+        this._basicForm.addField(item);
+      }
+    });
+  }
+  walkItems(container, fn) {
+    const items = container.getItems?.() ?? [];
+    for (const item of items) {
+      fn(item);
+      if (typeof item.getItems === "function") {
+        this.walkItems(item, fn);
+      }
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Public API (delegates to BasicForm)
+  // -----------------------------------------------------------------------
+  getValues(asString = false, dirtyOnly = false) {
+    return this._basicForm.getValues(asString, dirtyOnly);
+  }
+  setValues(values) {
+    this._basicForm.setValues(values);
+  }
+  isFormValid() {
+    return this._basicForm.isValid();
+  }
+  // Override component's isValid concept
+  isValid() {
+    return this._basicForm.isValid();
+  }
+  isDirty() {
+    return this._basicForm.isDirty();
+  }
+  getFields() {
+    return this._basicForm.getFields();
+  }
+  findField(name) {
+    return this._basicForm.findField(name);
+  }
+  reset() {
+    this._basicForm.reset();
+  }
+  clearInvalid() {
+    this._basicForm.clearInvalid();
+  }
+  markInvalid(errors) {
+    this._basicForm.markInvalid(errors);
+  }
+  hasInvalidField() {
+    return !this._basicForm.isValid();
+  }
+  // -----------------------------------------------------------------------
+  // Submit
+  // -----------------------------------------------------------------------
+  async submit(options = {}) {
+    if (options.clientValidation !== false && options.clientValidation !== void 0) {
+      if (!this.isValid()) {
+        return { success: false, errors: "Validation failed" };
+      }
+    }
+    const url2 = options.url ?? this._url;
+    if (!url2) return { success: false, errors: "No URL specified" };
+    this.fire("beforeaction", this, "submit");
+    try {
+      const result = await this._basicForm.submit(url2, {
+        method: options.method ?? this._method,
+        params: options.params,
+        headers: options.headers,
+        jsonSubmit: options.jsonSubmit ?? this._jsonSubmit
+      });
+      if (result.success) {
+        this.fire("actioncomplete", this, result);
+      } else {
+        this.fire("actionfailed", this, result);
+      }
+      return result;
+    } catch (err) {
+      const result = { success: false, errors: err };
+      this.fire("actionfailed", this, result);
+      return result;
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Load
+  // -----------------------------------------------------------------------
+  async load(options = {}) {
+    const url2 = options.url ?? this._url;
+    if (!url2) return;
+    this.fire("beforeaction", this, "load");
+    try {
+      const result = await this._basicForm.load(url2, {
+        method: options.method ?? "GET"
+      });
+      if (result.success) {
+        this.fire("actioncomplete", this, result);
+      } else {
+        this.fire("actionfailed", this, result);
+      }
+    } catch (err) {
+      this.fire("actionfailed", this, { success: false, errors: err });
+    }
+  }
+};
+
+// src/form/Validators.ts
+function presence(value) {
+  if (value === null || value === void 0 || String(value).trim() === "") {
+    return "This field is required";
+  }
+  return true;
+}
+function length(value, opts) {
+  const s = String(value ?? "");
+  if (opts.min !== void 0 && s.length < opts.min) {
+    return `Minimum length is ${opts.min}`;
+  }
+  if (opts.max !== void 0 && s.length > opts.max) {
+    return `Maximum length is ${opts.max}`;
+  }
+  return true;
+}
+function email(value) {
+  if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(String(value))) return true;
+  return "Not a valid email address";
+}
+function url(value) {
+  if (/^https?:\/\/.+/.test(String(value))) return true;
+  return "Not a valid URL";
+}
+function alpha(value) {
+  if (/^[a-zA-Z]+$/.test(String(value))) return true;
+  return "Only letters are allowed";
+}
+function alphanum(value) {
+  if (/^[a-zA-Z0-9]+$/.test(String(value))) return true;
+  return "Only letters and numbers are allowed";
+}
+function range(value, opts) {
+  const n = Number(value);
+  if (opts.min !== void 0 && n < opts.min) return `Value must be at least ${opts.min}`;
+  if (opts.max !== void 0 && n > opts.max) return `Value must be at most ${opts.max}`;
+  return true;
+}
+function format(value, opts) {
+  if (opts.matcher.test(String(value))) return true;
+  return opts.message ?? "Invalid format";
+}
+function inclusion(value, opts) {
+  if (opts.list.includes(value)) return true;
+  return "Value is not in the allowed list";
+}
+function exclusion(value, opts) {
+  if (!opts.list.includes(value)) return true;
+  return "Value is in the excluded list";
+}
+function custom(value, opts) {
+  return opts.fn(value);
+}
+var VALIDATORS = {
+  presence: (v) => presence(v),
+  length: (v, o) => length(v, o),
+  email: (v) => email(v),
+  url: (v) => url(v),
+  alpha: (v) => alpha(v),
+  alphanum: (v) => alphanum(v),
+  range: (v, o) => range(v, o),
+  format: (v, o) => format(v, o),
+  inclusion: (v, o) => inclusion(v, o),
+  exclusion: (v, o) => exclusion(v, o),
+  custom: (v, o) => custom(v, o)
+};
+function validateChain(value, chain) {
+  const errors = [];
+  for (const entry of chain) {
+    const fn = VALIDATORS[entry.type];
+    if (!fn) continue;
+    const result = fn(value, entry);
+    if (result !== true) {
+      errors.push(result);
+    }
+  }
+  return errors;
+}
+
+// src/field/FieldContainer.ts
+import { Container as Container3 } from "@framesquared/component";
+var FieldContainer = class extends Container3 {
+  static $className = "Ext.form.FieldContainer";
+  constructor(config = {}) {
+    super({ xtype: "fieldcontainer", ...config });
+  }
+  afterRender() {
+    super.afterRender();
+    const cfg = this._config;
+    this.el.classList.add("x-field-container");
+    if (cfg.fieldLabel) {
+      const label = document.createElement("label");
+      label.classList.add("x-field-label");
+      label.textContent = cfg.fieldLabel + (cfg.labelSeparator ?? ":");
+      this.el.insertBefore(label, this.el.firstChild);
+    }
+  }
+  getErrors() {
+    const errors = [];
+    for (const item of this.getItems()) {
+      if (item instanceof Field) {
+        errors.push(...item.getErrors());
+      }
+    }
+    return errors;
+  }
+  isValid() {
+    return this.getItems().filter((item) => item instanceof Field).every((f) => f.isValid());
+  }
+};
+
+// src/field/Slider.ts
+var Slider = class extends Field {
+  static $className = "Ext.slider.Slider";
+  constructor(config = {}) {
+    super({ xtype: "sliderfield", ...config });
+  }
+  initialize() {
+    super.initialize();
+    const cfg = this._config;
+    this._min = cfg.minValue ?? 0;
+    this._max = cfg.maxValue ?? 100;
+    this._increment = cfg.increment ?? 0;
+    this._vertical = cfg.vertical ?? false;
+    this._values = cfg.values ? cfg.values.map((v) => this.snap(this.clamp(v))) : [this.snap(this.clamp(Number(cfg.value ?? this._min)))];
+    this._trackEl = null;
+    this._thumbEls = [];
+    this._dragIndex = -1;
+    this._dragCleanup = null;
+  }
+  afterRender() {
+    super.afterRender();
+    const el = this.el;
+    el.classList.add("x-slider");
+    if (this._vertical) el.classList.add("x-slider-vertical");
+    this._trackEl = document.createElement("div");
+    this._trackEl.classList.add("x-slider-track");
+    (this._bodyWrapEl ?? el).appendChild(this._trackEl);
+    for (let i = 0; i < this._values.length; i++) {
+      const thumb = document.createElement("div");
+      thumb.classList.add("x-slider-thumb");
+      thumb.setAttribute("tabindex", "0");
+      thumb.setAttribute("role", "slider");
+      thumb.setAttribute("aria-valuemin", String(this._min));
+      thumb.setAttribute("aria-valuemax", String(this._max));
+      thumb.setAttribute("aria-valuenow", String(this._values[i]));
+      this._trackEl.appendChild(thumb);
+      this._thumbEls.push(thumb);
+      this.setupThumbDrag(thumb, i);
+    }
+    this.positionThumbs();
+  }
+  // -----------------------------------------------------------------------
+  // Value
+  // -----------------------------------------------------------------------
+  getValue() {
+    return this._values[0];
+  }
+  setValue(value) {
+    const num = this.snap(this.clamp(Number(value)));
+    const old = this._values[0];
+    this._values[0] = num;
+    this.positionThumbs();
+    this.updateAria(0);
+    if (num !== old) {
+      this.fire("change", this, num, old);
+    }
+  }
+  getValues() {
+    return [...this._values];
+  }
+  // -----------------------------------------------------------------------
+  // Constraints
+  // -----------------------------------------------------------------------
+  setMinValue(min) {
+    this._min = min;
+    this._values = this._values.map((v) => this.snap(this.clamp(v)));
+    this.positionThumbs();
+    this.updateAllAria();
+  }
+  setMaxValue(max) {
+    this._max = max;
+    this._values = this._values.map((v) => this.snap(this.clamp(v)));
+    this.positionThumbs();
+    this.updateAllAria();
+  }
+  setIncrement(inc) {
+    this._increment = inc;
+  }
+  clamp(v) {
+    return Math.max(this._min, Math.min(this._max, v));
+  }
+  snap(v) {
+    if (this._increment <= 0) return v;
+    return Math.round(v / this._increment) * this._increment;
+  }
+  // -----------------------------------------------------------------------
+  // Positioning
+  // -----------------------------------------------------------------------
+  positionThumbs() {
+    for (let i = 0; i < this._thumbEls.length; i++) {
+      const pct = (this._values[i] - this._min) / (this._max - this._min) * 100;
+      if (this._vertical) {
+        this._thumbEls[i].style.bottom = `${pct}%`;
+      } else {
+        this._thumbEls[i].style.left = `${pct}%`;
+      }
+    }
+  }
+  updateAria(index) {
+    const thumb = this._thumbEls[index];
+    if (!thumb) return;
+    thumb.setAttribute("aria-valuenow", String(this._values[index]));
+    thumb.setAttribute("aria-valuemin", String(this._min));
+    thumb.setAttribute("aria-valuemax", String(this._max));
+  }
+  updateAllAria() {
+    for (let i = 0; i < this._thumbEls.length; i++) this.updateAria(i);
+  }
+  // -----------------------------------------------------------------------
+  // Drag
+  // -----------------------------------------------------------------------
+  setupThumbDrag(thumb, index) {
+    const onDown = (e) => {
+      e.preventDefault();
+      this._dragIndex = index;
+      this.fire("dragstart", this, index);
+      const onMove = (me) => {
+        if (this._dragIndex < 0 || !this._trackEl) return;
+        const rect = this._trackEl.getBoundingClientRect();
+        let ratio;
+        if (this._vertical) {
+          ratio = 1 - (me.clientY - rect.top) / rect.height;
+        } else {
+          ratio = (me.clientX - rect.left) / rect.width;
+        }
+        ratio = Math.max(0, Math.min(1, ratio));
+        const raw = this._min + ratio * (this._max - this._min);
+        const val = this.snap(this.clamp(raw));
+        const old = this._values[this._dragIndex];
+        this._values[this._dragIndex] = val;
+        this.positionThumbs();
+        this.updateAria(this._dragIndex);
+        if (val !== old) this.fire("drag", this, val);
+      };
+      const onUp = () => {
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+        this.fire("dragend", this, this._values[this._dragIndex]);
+        this.fire("changecomplete", this, this._values[this._dragIndex]);
+        this._dragIndex = -1;
+      };
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+    };
+    thumb.addEventListener("pointerdown", onDown);
+  }
+};
+
+// src/field/FileUpload.ts
+var FileField = class extends Field {
+  static $className = "Ext.form.field.File";
+  constructor(config = {}) {
+    super({ xtype: "filefield", ...config });
+  }
+  initialize() {
+    super.initialize();
+    this._files = null;
+  }
+  afterRender() {
+    super.afterRender();
+    const cfg = this._config;
+    this.el.classList.add("x-filefield");
+    const wrap = this._bodyWrapEl ?? this.el;
+    this._textDisplay = document.createElement("span");
+    this._textDisplay.classList.add("x-filefield-text");
+    if (cfg.buttonOnly) this._textDisplay.style.display = "none";
+    wrap.appendChild(this._textDisplay);
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.classList.add("x-filefield-btn");
+    btn.textContent = cfg.buttonText ?? "Browse...";
+    btn.addEventListener("click", () => this._fileInput.click());
+    wrap.appendChild(btn);
+    this._fileInput = document.createElement("input");
+    this._fileInput.type = "file";
+    this._fileInput.style.display = "none";
+    if (cfg.accept) this._fileInput.accept = cfg.accept;
+    if (cfg.multiple) this._fileInput.multiple = true;
+    if (this._name) this._fileInput.name = this._name;
+    this._fileInput.addEventListener("change", () => {
+      this._files = this._fileInput.files;
+      const names = this._files ? Array.from(this._files).map((f) => f.name).join(", ") : "";
+      this._textDisplay.textContent = names;
+      this.fire("change", this, this._files);
+    });
+    wrap.appendChild(this._fileInput);
+  }
+  getValue() {
+    return this._files;
+  }
+  getFileInput() {
+    return this._fileInput;
+  }
+};
+
+// src/field/HtmlEditor.ts
+var TOOLBAR_BUTTONS = [
+  { cmd: "bold", label: "B", cls: "bold" },
+  { cmd: "italic", label: "I", cls: "italic" },
+  { cmd: "underline", label: "U", cls: "underline" },
+  { cmd: "strikeThrough", label: "S", cls: "strikethrough" },
+  { cmd: "justifyLeft", label: "\u21D0", cls: "align-left" },
+  { cmd: "justifyCenter", label: "\u21D4", cls: "align-center" },
+  { cmd: "justifyRight", label: "\u21D2", cls: "align-right" },
+  { cmd: "insertOrderedList", label: "OL", cls: "ordered-list" },
+  { cmd: "insertUnorderedList", label: "UL", cls: "unordered-list" },
+  { cmd: "indent", label: "\u2192", cls: "indent" },
+  { cmd: "outdent", label: "\u2190", cls: "outdent" },
+  { cmd: "undo", label: "\u21A9", cls: "undo" },
+  { cmd: "redo", label: "\u21AA", cls: "redo" }
+];
+var XSS_TAGS = /(<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>|<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>|on\w+="[^"]*"|on\w+='[^']*')/gi;
+var HtmlEditor = class extends Field {
+  static $className = "Ext.form.field.HtmlEditor";
+  constructor(config = {}) {
+    super({ xtype: "htmleditor", ...config });
+  }
+  initialize() {
+    super.initialize();
+    this._toolbarEl = null;
+    this._editorEl = null;
+    this._sourceEl = null;
+    this._sourceMode = false;
+  }
+  afterRender() {
+    super.afterRender();
+    this.el.classList.add("x-htmleditor");
+    const wrap = this._bodyWrapEl ?? this.el;
+    this._toolbarEl = document.createElement("div");
+    this._toolbarEl.classList.add("x-htmleditor-toolbar");
+    for (const btn of TOOLBAR_BUTTONS) {
+      const el = document.createElement("button");
+      el.type = "button";
+      el.classList.add("x-htmleditor-btn", `x-htmleditor-btn-${btn.cls}`);
+      el.textContent = btn.label;
+      el.title = btn.cmd;
+      el.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.execCommand(btn.cmd);
+      });
+      this._toolbarEl.appendChild(el);
+    }
+    const srcBtn = document.createElement("button");
+    srcBtn.type = "button";
+    srcBtn.classList.add("x-htmleditor-btn", "x-htmleditor-btn-source");
+    srcBtn.textContent = "HTML";
+    srcBtn.addEventListener("click", () => this.toggleSourceEdit());
+    this._toolbarEl.appendChild(srcBtn);
+    wrap.appendChild(this._toolbarEl);
+    this._editorEl = document.createElement("div");
+    this._editorEl.classList.add("x-htmleditor-body");
+    this._editorEl.contentEditable = "true";
+    this._editorEl.style.minHeight = "100px";
+    if (this._value) {
+      this._editorEl.innerHTML = this.sanitize(String(this._value));
+    }
+    this._editorEl.addEventListener("input", () => {
+      this.fire("change", this, this.getValue());
+    });
+    wrap.appendChild(this._editorEl);
+    this._sourceEl = document.createElement("textarea");
+    this._sourceEl.classList.add("x-htmleditor-source");
+    this._sourceEl.style.display = "none";
+    this._sourceEl.style.width = "100%";
+    this._sourceEl.style.minHeight = "100px";
+    wrap.appendChild(this._sourceEl);
+  }
+  // -----------------------------------------------------------------------
+  // Value
+  // -----------------------------------------------------------------------
+  getValue() {
+    if (this._sourceMode && this._sourceEl) {
+      return this.sanitize(this._sourceEl.value);
+    }
+    return this._editorEl ? this.sanitize(this._editorEl.innerHTML) : "";
+  }
+  setValue(value) {
+    const html = this.sanitize(String(value ?? ""));
+    this._value = html;
+    if (this._editorEl) this._editorEl.innerHTML = html;
+    if (this._sourceEl) this._sourceEl.value = html;
+  }
+  // -----------------------------------------------------------------------
+  // Commands
+  // -----------------------------------------------------------------------
+  execCommand(cmd, value) {
+    if (this._sourceMode) return;
+    try {
+      document.execCommand(cmd, false, value ?? "");
+    } catch {
+    }
+    this._editorEl?.focus();
+  }
+  // -----------------------------------------------------------------------
+  // Source edit
+  // -----------------------------------------------------------------------
+  toggleSourceEdit() {
+    this._sourceMode = !this._sourceMode;
+    if (this._sourceMode) {
+      if (this._sourceEl && this._editorEl) {
+        this._sourceEl.value = this._editorEl.innerHTML;
+        this._editorEl.style.display = "none";
+        this._sourceEl.style.display = "";
+      }
+    } else {
+      if (this._sourceEl && this._editorEl) {
+        this._editorEl.innerHTML = this.sanitize(this._sourceEl.value);
+        this._sourceEl.style.display = "none";
+        this._editorEl.style.display = "";
+      }
+    }
+  }
+  isSourceEdit() {
+    return this._sourceMode;
+  }
+  // -----------------------------------------------------------------------
+  // Sanitize
+  // -----------------------------------------------------------------------
+  sanitize(html) {
+    return html.replace(XSS_TAGS, "");
+  }
+};
+
+// src/field/Spinner.ts
+var Spinner = class extends TextField {
+  static $className = "Ext.form.field.Spinner";
+  constructor(config = {}) {
+    const triggers = [
+      { type: "spinner-up", handler: () => this.spinUp() },
+      { type: "spinner-down", handler: () => this.spinDown() },
+      ...config.triggers ?? []
+    ];
+    super({ xtype: "spinnerfield", ...config, triggers });
+  }
+  afterRender() {
+    super.afterRender();
+    this.el.classList.add("x-spinner");
+    this.getInputEl().addEventListener("keydown", (e) => {
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        this.spinUp();
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        this.spinDown();
+      }
+    });
+  }
+  spinUp() {
+    this.onSpinUp();
+    this.fire("spin", this, "up");
+  }
+  spinDown() {
+    this.onSpinDown();
+    this.fire("spin", this, "down");
+  }
+};
+export {
+  BasicForm,
+  BoundList,
+  Checkbox,
+  CheckboxGroup,
+  ColorPicker,
+  ComboBox,
+  DateField,
+  DatePicker,
+  DisplayField,
+  Field,
+  FieldContainer,
+  FileField,
+  FormPanel,
+  HiddenField,
+  HtmlEditor,
+  NumberField,
+  Radio,
+  RadioGroup,
+  Slider,
+  Spinner,
+  TagField,
+  TextArea,
+  TextField,
+  VTypes,
+  addDate,
+  alpha,
+  alphanum,
+  custom,
+  diffDate,
+  email,
+  exclusion,
+  format,
+  formatDate,
+  getDaysInMonth,
+  getMonthName,
+  getMonthShortName,
+  inclusion,
+  isLeapYear,
+  length,
+  parseDate,
+  presence,
+  range,
+  url,
+  validateChain
+};
+//# sourceMappingURL=index.js.map