easy-forms-core 1.0.0

package/dist/easy-form.js

@@ -0,0 +1,2093 @@
+// src/core/schema-parser.ts
+var SchemaParser = class {
+  /**
+   * Parsea y valida un schema
+   */
+  parse(schema) {
+    if (!schema) {
+      throw new Error("Schema es requerido");
+    }
+    if (!schema.fields && !schema.steps) {
+      throw new Error("Schema debe tener fields o steps");
+    }
+    if (schema.steps) {
+      for (const step of schema.steps) {
+        if (!step.fields || step.fields.length === 0) {
+          throw new Error("Cada step debe tener al menos un field");
+        }
+      }
+    }
+    const normalizedFields = schema.fields ? this.normalizeFields(schema.fields) : [];
+    const normalizedSteps = schema.steps ? schema.steps.map((step) => ({
+      ...step,
+      fields: this.normalizeFields(step.fields)
+    })) : void 0;
+    return {
+      fields: normalizedFields,
+      steps: normalizedSteps,
+      isWizard: Boolean(schema.steps && schema.steps.length > 0)
+    };
+  }
+  /**
+   * Normaliza y valida campos
+   */
+  normalizeFields(fields) {
+    return fields.map((field, index) => {
+      if (!field.type) {
+        throw new Error(`Field en \xEDndice ${index} debe tener un type`);
+      }
+      if (!field.name) {
+        throw new Error(`Field en \xEDndice ${index} debe tener un name`);
+      }
+      this.validateFieldType(field, index);
+      return this.applyDefaults(field);
+    });
+  }
+  /**
+   * Valida el tipo de campo
+   */
+  validateFieldType(field, index) {
+    const validTypes = [
+      "text",
+      "email",
+      "number",
+      "password",
+      "textarea",
+      "select",
+      "checkbox",
+      "radio",
+      "switch",
+      "date",
+      "file",
+      "array",
+      "group",
+      "custom"
+    ];
+    if (!validTypes.includes(field.type)) {
+      throw new Error(
+        `Field en \xEDndice ${index} tiene un type inv\xE1lido: ${field.type}`
+      );
+    }
+    switch (field.type) {
+      case "select":
+      case "radio":
+        if (!("options" in field) || !field.options || field.options.length === 0) {
+          throw new Error(
+            `Field "${field.name}" de tipo ${field.type} debe tener options`
+          );
+        }
+        break;
+      case "array":
+        if (!("itemSchema" in field) || !field.itemSchema) {
+          throw new Error(
+            `Field "${field.name}" de tipo array debe tener itemSchema`
+          );
+        }
+        break;
+      case "group":
+        if (!("fields" in field) || !field.fields || field.fields.length === 0) {
+          throw new Error(
+            `Field "${field.name}" de tipo group debe tener fields`
+          );
+        }
+        break;
+    }
+  }
+  /**
+   * Aplica valores por defecto a un campo
+   */
+  applyDefaults(field) {
+    const defaults = {
+      disabled: false,
+      hidden: false
+    };
+    switch (field.type) {
+      case "checkbox":
+      case "switch":
+        if (!("checked" in field)) {
+          defaults.checked = false;
+        }
+        break;
+      case "select":
+        if (!("multiple" in field)) {
+          defaults.multiple = false;
+        }
+        break;
+      case "file":
+        if (!("multiple" in field)) {
+          defaults.multiple = false;
+        }
+        break;
+    }
+    return { ...defaults, ...field };
+  }
+  /**
+   * Obtiene todos los campos de un schema (incluyendo nested)
+   */
+  getAllFields(schema) {
+    const parsed = this.parse(schema);
+    const allFields = [];
+    const extractFields = (fields) => {
+      for (const field of fields) {
+        allFields.push(field);
+        if (field.type === "group" && "fields" in field) {
+          extractFields(field.fields);
+        }
+        if (field.type === "array" && "itemSchema" in field && field.itemSchema.fields) {
+          extractFields(field.itemSchema.fields);
+        }
+      }
+    };
+    if (parsed.fields) {
+      extractFields(parsed.fields);
+    }
+    if (parsed.steps) {
+      for (const step of parsed.steps) {
+        extractFields(step.fields);
+      }
+    }
+    return allFields;
+  }
+};
+
+// src/utils/styles.ts
+var defaultColors = {
+  primary: "#007bff",
+  secondary: "#6c757d",
+  error: "#dc3545",
+  success: "#28a745",
+  text: "#212529",
+  border: "#ddd",
+  background: "#ffffff"
+};
+function getColors(colors) {
+  return { ...defaultColors, ...colors };
+}
+function getThemeStyles(theme, colors) {
+  const baseStyles = getBaseStyles(colors);
+  const themeStyles = getThemeSpecificStyles(theme, colors);
+  return baseStyles + themeStyles;
+}
+function getBaseStyles(colors) {
+  return `
+    :host {
+      display: block;
+      --easy-form-primary: ${colors.primary};
+      --easy-form-secondary: ${colors.secondary};
+      --easy-form-error: ${colors.error};
+      --easy-form-success: ${colors.success};
+      --easy-form-text: ${colors.text};
+      --easy-form-border: ${colors.border};
+      --easy-form-background: ${colors.background};
+    }
+    .easy-form-field {
+      margin-bottom: 1rem;
+    }
+    .easy-form-label {
+      display: block;
+      margin-bottom: 0.5rem;
+      font-weight: 500;
+      color: var(--easy-form-text);
+    }
+    .easy-form-required {
+      color: var(--easy-form-error);
+    }
+    .easy-form-input-error {
+      border-color: var(--easy-form-error) !important;
+    }
+    .easy-form-error {
+      color: var(--easy-form-error);
+      font-size: 0.875rem;
+      margin-top: 0.25rem;
+    }
+    .easy-form-description {
+      font-size: 0.875rem;
+      color: #666;
+      margin-top: 0.25rem;
+    }
+    .easy-form-submit {
+      padding: 0.5rem 1rem;
+      background: var(--easy-form-primary);
+      color: white;
+      border: none;
+      cursor: pointer;
+      font-size: 1rem;
+      transition: all 0.2s ease;
+    }
+    .easy-form-submit:hover {
+      opacity: 0.9;
+    }
+    .easy-form-submit:active {
+      transform: scale(0.98);
+    }
+    input:not([type="checkbox"]):not([type="radio"]), textarea, select {
+      width: 100%;
+      padding: 0.5rem;
+      font-size: 1rem;
+      color: var(--easy-form-text);
+      background: var(--easy-form-background);
+      transition: all 0.2s ease;
+    }
+    input[type="checkbox"],
+    input[type="radio"] {
+      width: 18px !important;
+      height: 18px !important;
+      min-width: 18px !important;
+      min-height: 18px !important;
+      max-width: 18px !important;
+      margin: 0;
+      padding: 0;
+      cursor: pointer;
+      accent-color: var(--easy-form-primary);
+      flex-shrink: 0;
+    }
+    input:focus, textarea:focus, select:focus {
+      outline: none;
+    }
+    .easy-form-group {
+      padding: 1rem;
+      margin-bottom: 1rem;
+    }
+    .easy-form-radio-group {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      margin-top: 0.5rem;
+    }
+    .easy-form-radio-option {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.5rem;
+      border-radius: 6px;
+      transition: background-color 0.2s ease;
+    }
+    .easy-form-radio-option:hover {
+      background-color: rgba(0, 0, 0, 0.03);
+    }
+    .easy-form-radio-option input[type="radio"] {
+      margin: 0;
+      flex-shrink: 0;
+    }
+    .easy-form-radio-label {
+      cursor: pointer;
+      user-select: none;
+      color: var(--easy-form-text);
+      font-weight: 400;
+    }
+    .easy-form-label-checkbox,
+    .easy-form-label-switch {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      cursor: pointer;
+      user-select: none;
+      padding: 0.5rem;
+      border-radius: 6px;
+      transition: background-color 0.2s ease;
+      color: var(--easy-form-text);
+    }
+    .easy-form-label-checkbox input[type="checkbox"],
+    .easy-form-label-switch input[type="checkbox"] {
+      margin: 0;
+      flex-shrink: 0;
+    }
+    .easy-form-label-checkbox:hover,
+    .easy-form-label-switch:hover {
+      background-color: rgba(0, 0, 0, 0.03);
+    }
+    .easy-form-wizard-steps {
+      display: flex;
+      gap: 1rem;
+      margin-bottom: 2rem;
+    }
+    .easy-form-wizard-step {
+      padding: 0.5rem 1rem;
+      transition: all 0.2s ease;
+    }
+    .easy-form-wizard-step.active {
+      background: var(--easy-form-primary);
+      color: white;
+    }
+    .easy-form-wizard-step.completed {
+      background: var(--easy-form-success);
+      color: white;
+    }
+    .easy-form-wizard-nav {
+      display: flex;
+      gap: 1rem;
+      margin-top: 1rem;
+    }
+    .easy-form-array-item {
+      padding: 1rem;
+      margin-bottom: 1rem;
+    }
+    .easy-form-array-add,
+    .easy-form-array-remove {
+      padding: 0.25rem 0.5rem;
+      background: var(--easy-form-secondary);
+      color: white;
+      border: none;
+      cursor: pointer;
+      font-size: 0.875rem;
+      transition: all 0.2s ease;
+    }
+    .easy-form-array-remove {
+      background: var(--easy-form-error);
+    }
+    .easy-form-array-add:hover,
+    .easy-form-array-remove:hover {
+      opacity: 0.9;
+    }
+  `;
+}
+function getThemeSpecificStyles(theme, colors) {
+  switch (theme) {
+    case "plano":
+      return getPlanoStyles(colors);
+    case "tradicional":
+      return getTradicionalStyles(colors);
+    case "material":
+      return getMaterialStyles(colors);
+    case "rounded-shadow":
+      return getRoundedShadowStyles(colors);
+    case "lines":
+      return getLinesStyles(colors);
+    default:
+      return getPlanoStyles(colors);
+  }
+}
+function getPlanoStyles(_colors) {
+  return `
+    input:not([type="checkbox"]):not([type="radio"]), textarea, select {
+      border: none;
+      border-bottom: 2px solid var(--easy-form-border);
+      border-radius: 0;
+      padding: 0.75rem 0;
+    }
+    input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
+      border-bottom-color: var(--easy-form-primary);
+    }
+    .easy-form-submit {
+      border-radius: 0;
+      font-weight: 600;
+    }
+    .easy-form-group {
+      border: none;
+      border-bottom: 1px solid var(--easy-form-border);
+      border-radius: 0;
+    }
+    .easy-form-wizard-step {
+      border: none;
+      border-bottom: 2px solid var(--easy-form-border);
+      border-radius: 0;
+    }
+    .easy-form-array-item {
+      border: none;
+      border-bottom: 1px solid var(--easy-form-border);
+      border-radius: 0;
+    }
+  `;
+}
+function getTradicionalStyles(_colors) {
+  return `
+    input:not([type="checkbox"]):not([type="radio"]), textarea, select {
+      border: 2px solid var(--easy-form-border);
+      border-radius: 4px;
+      padding: 0.625rem;
+    }
+    input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
+      border-color: var(--easy-form-primary);
+      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+    }
+    .easy-form-submit {
+      border-radius: 4px;
+      font-weight: 500;
+    }
+    .easy-form-group {
+      border: 2px solid var(--easy-form-border);
+      border-radius: 4px;
+      background: #f8f9fa;
+    }
+    .easy-form-wizard-step {
+      border: 2px solid var(--easy-form-border);
+      border-radius: 4px;
+      background: #f8f9fa;
+    }
+    .easy-form-wizard-step.active {
+      border-color: var(--easy-form-primary);
+    }
+    .easy-form-array-item {
+      border: 2px solid var(--easy-form-border);
+      border-radius: 4px;
+      background: #f8f9fa;
+    }
+  `;
+}
+function getMaterialStyles(_colors) {
+  return `
+    .easy-form-label {
+      font-size: 0.875rem;
+      font-weight: 500;
+      margin-bottom: 0.25rem;
+      color: rgba(0, 0, 0, 0.6);
+    }
+    input:not([type="checkbox"]):not([type="radio"]), textarea, select {
+      border: none;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+      border-radius: 4px 4px 0 0;
+      padding: 0.75rem 0.75rem 0.5rem 0.75rem;
+      background: transparent;
+    }
+    input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
+      border-bottom-color: var(--easy-form-primary);
+      border-bottom-width: 2px;
+      padding-bottom: calc(0.5rem - 1px);
+    }
+    .easy-form-submit {
+      border-radius: 4px;
+      text-transform: uppercase;
+      font-weight: 500;
+      letter-spacing: 0.5px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    }
+    .easy-form-submit:hover {
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    }
+    .easy-form-group {
+      border: none;
+      border-radius: 4px;
+      background: #f5f5f5;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+    }
+    .easy-form-wizard-step {
+      border: none;
+      border-radius: 4px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+    }
+    .easy-form-array-item {
+      border: none;
+      border-radius: 4px;
+      background: #f5f5f5;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+    }
+  `;
+}
+function getRoundedShadowStyles(_colors) {
+  return `
+    input:not([type="checkbox"]):not([type="radio"]), textarea, select {
+      border: 1px solid var(--easy-form-border);
+      border-radius: 12px;
+      padding: 0.75rem 1rem;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    }
+    input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
+      border-color: var(--easy-form-primary);
+      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
+      transform: translateY(-1px);
+    }
+    .easy-form-submit {
+      border-radius: 12px;
+      font-weight: 600;
+      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
+    }
+    .easy-form-submit:hover {
+      box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);
+      transform: translateY(-2px);
+    }
+    .easy-form-group {
+      border: 1px solid var(--easy-form-border);
+      border-radius: 16px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      background: var(--easy-form-background);
+    }
+    .easy-form-wizard-step {
+      border: 1px solid var(--easy-form-border);
+      border-radius: 12px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+    .easy-form-wizard-step.active {
+      box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3);
+    }
+    .easy-form-array-item {
+      border: 1px solid var(--easy-form-border);
+      border-radius: 12px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+      background: var(--easy-form-background);
+    }
+  `;
+}
+function getLinesStyles(_colors) {
+  return `
+    .easy-form-field {
+      border-bottom: 1px solid var(--easy-form-border);
+      padding-bottom: 1rem;
+      margin-bottom: 1.5rem;
+    }
+    .easy-form-field:last-child {
+      border-bottom: none;
+    }
+    input:not([type="checkbox"]):not([type="radio"]), textarea, select {
+      border: none;
+      border-radius: 0;
+      padding: 0.5rem 0;
+      background: transparent;
+    }
+    input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
+      border-bottom: 2px solid var(--easy-form-primary);
+      padding-bottom: calc(0.5rem - 1px);
+    }
+    .easy-form-submit {
+      border-radius: 0;
+      border-bottom: 3px solid var(--easy-form-primary);
+      background: transparent;
+      color: var(--easy-form-primary);
+      font-weight: 600;
+      padding: 0.75rem 0;
+    }
+    .easy-form-submit:hover {
+      background: rgba(0, 123, 255, 0.05);
+    }
+    .easy-form-group {
+      border: none;
+      border-bottom: 2px solid var(--easy-form-border);
+      border-radius: 0;
+      padding-bottom: 1rem;
+    }
+    .easy-form-wizard-step {
+      border: none;
+      border-bottom: 3px solid var(--easy-form-border);
+      border-radius: 0;
+      background: transparent;
+    }
+    .easy-form-wizard-step.active {
+      border-bottom-color: var(--easy-form-primary);
+      background: transparent;
+      color: var(--easy-form-primary);
+    }
+    .easy-form-wizard-step.completed {
+      border-bottom-color: var(--easy-form-success);
+      background: transparent;
+      color: var(--easy-form-success);
+    }
+    .easy-form-array-item {
+      border: none;
+      border-bottom: 1px solid var(--easy-form-border);
+      border-radius: 0;
+    }
+  `;
+}
+
+// src/utils/index.ts
+function attributeValue(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "boolean") {
+    return value ? "true" : "false";
+  }
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+  return String(value);
+}
+function parseAttributeValue(value) {
+  if (!value) {
+    return null;
+  }
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+function getNestedValue(obj, path) {
+  return path.split(".").reduce((current, key) => current?.[key], obj);
+}
+function setNestedValue(obj, path, value) {
+  const keys = path.split(".");
+  const lastKey = keys.pop();
+  const target = keys.reduce((current, key) => {
+    if (!current[key] || typeof current[key] !== "object") {
+      current[key] = {};
+    }
+    return current[key];
+  }, obj);
+  target[lastKey] = value;
+}
+function isValidEmail(email) {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+}
+
+// src/core/validation-engine.ts
+var ValidationEngine = class {
+  /**
+   * Valida un campo con todas sus validaciones
+   */
+  async validateField(field, value) {
+    const errors = [];
+    if (!field.validations || field.validations.length === 0) {
+      return errors;
+    }
+    for (const validation of field.validations) {
+      const result = await this.validateValue(validation, value);
+      if (!result.isValid) {
+        errors.push(result.message || this.getDefaultMessage(validation));
+      }
+    }
+    return errors;
+  }
+  /**
+   * Valida un valor con una validación específica
+   */
+  async validateValue(validation, value) {
+    switch (validation.type) {
+      case "required":
+        return this.validateRequired(value);
+      case "email":
+        return this.validateEmail(value);
+      case "minLength":
+        return this.validateMinLength(value, validation.value);
+      case "maxLength":
+        return this.validateMaxLength(value, validation.value);
+      case "min":
+        return this.validateMin(value, validation.value);
+      case "max":
+        return this.validateMax(value, validation.value);
+      case "pattern":
+        return this.validatePattern(value, validation.value);
+      case "custom":
+        return await this.validateCustom(value, validation);
+      default:
+        return { isValid: true };
+    }
+  }
+  /**
+   * Valida campo requerido
+   */
+  validateRequired(value) {
+    const isValid = value !== null && value !== void 0 && value !== "" && !(Array.isArray(value) && value.length === 0);
+    return {
+      isValid,
+      message: isValid ? void 0 : "Este campo es requerido"
+    };
+  }
+  /**
+   * Valida email
+   */
+  validateEmail(value) {
+    if (!value) {
+      return { isValid: true };
+    }
+    const isValid = typeof value === "string" && isValidEmail(value);
+    return {
+      isValid,
+      message: isValid ? void 0 : "Debe ser un email v\xE1lido"
+    };
+  }
+  /**
+   * Valida longitud mínima
+   */
+  validateMinLength(value, minLength) {
+    if (!value) {
+      return { isValid: true };
+    }
+    const str = String(value);
+    const isValid = str.length >= minLength;
+    return {
+      isValid,
+      message: isValid ? void 0 : `Debe tener al menos ${minLength} caracteres`
+    };
+  }
+  /**
+   * Valida longitud máxima
+   */
+  validateMaxLength(value, maxLength) {
+    if (!value) {
+      return { isValid: true };
+    }
+    const str = String(value);
+    const isValid = str.length <= maxLength;
+    return {
+      isValid,
+      message: isValid ? void 0 : `Debe tener m\xE1ximo ${maxLength} caracteres`
+    };
+  }
+  /**
+   * Valida valor mínimo
+   */
+  validateMin(value, min) {
+    if (value === null || value === void 0 || value === "") {
+      return { isValid: true };
+    }
+    const num = Number(value);
+    const isValid = !isNaN(num) && num >= min;
+    return {
+      isValid,
+      message: isValid ? void 0 : `Debe ser mayor o igual a ${min}`
+    };
+  }
+  /**
+   * Valida valor máximo
+   */
+  validateMax(value, max) {
+    if (value === null || value === void 0 || value === "") {
+      return { isValid: true };
+    }
+    const num = Number(value);
+    const isValid = !isNaN(num) && num <= max;
+    return {
+      isValid,
+      message: isValid ? void 0 : `Debe ser menor o igual a ${max}`
+    };
+  }
+  /**
+   * Valida patrón regex
+   */
+  validatePattern(value, pattern) {
+    if (!value) {
+      return { isValid: true };
+    }
+    const regex = typeof pattern === "string" ? new RegExp(pattern) : pattern;
+    const isValid = regex.test(String(value));
+    return {
+      isValid,
+      message: isValid ? void 0 : "El formato no es v\xE1lido"
+    };
+  }
+  /**
+   * Valida con función personalizada
+   */
+  async validateCustom(value, validation) {
+    try {
+      const result = await validation.validator(value);
+      return {
+        isValid: Boolean(result),
+        message: result ? void 0 : validation.message || "Validaci\xF3n fallida"
+      };
+    } catch (error) {
+      return {
+        isValid: false,
+        message: validation.message || "Error en la validaci\xF3n"
+      };
+    }
+  }
+  /**
+   * Obtiene mensaje por defecto para una validación
+   */
+  getDefaultMessage(validation) {
+    switch (validation.type) {
+      case "required":
+        return "Este campo es requerido";
+      case "email":
+        return "Debe ser un email v\xE1lido";
+      case "minLength":
+        return `Debe tener al menos ${validation.value} caracteres`;
+      case "maxLength":
+        return `Debe tener m\xE1ximo ${validation.value} caracteres`;
+      case "min":
+        return `Debe ser mayor o igual a ${validation.value}`;
+      case "max":
+        return `Debe ser menor o igual a ${validation.value}`;
+      case "pattern":
+        return "El formato no es v\xE1lido";
+      case "custom":
+        return "Validaci\xF3n fallida";
+      default:
+        return "Campo inv\xE1lido";
+    }
+  }
+  /**
+   * Valida todos los campos de un formulario
+   */
+  async validateForm(fields, values) {
+    const errors = {};
+    for (const field of fields) {
+      const value = values[field.name];
+      const fieldErrors = await this.validateField(field, value);
+      if (fieldErrors.length > 0) {
+        errors[field.name] = fieldErrors;
+      }
+    }
+    return errors;
+  }
+};
+
+// src/core/state-manager.ts
+var StateManager = class {
+  constructor() {
+    this.wizardState = null;
+    this.schema = null;
+    this.parser = new SchemaParser();
+    this.validator = new ValidationEngine();
+    this.state = this.createInitialState();
+  }
+  /**
+   * Crea el estado inicial
+   */
+  createInitialState() {
+    return {
+      values: {},
+      errors: {},
+      touched: {},
+      isValid: true,
+      isSubmitting: false
+    };
+  }
+  /**
+   * Inicializa el schema
+   */
+  initializeSchema(schema) {
+    this.schema = this.parser.parse(schema);
+    this.initializeValues();
+    this.initializeWizard();
+  }
+  /**
+   * Inicializa los valores por defecto
+   */
+  initializeValues() {
+    if (!this.schema) return;
+    const allFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields;
+    const existingValues = { ...this.state.values };
+    const values = {};
+    for (const field of allFields) {
+      const existingValue = getNestedValue(existingValues, field.name);
+      if (existingValue !== void 0 && existingValue !== null) {
+        values[field.name] = existingValue;
+      } else {
+        this.initializeFieldValue(field, values);
+      }
+    }
+    for (const key in existingValues) {
+      if (!(key in values)) {
+        values[key] = existingValues[key];
+      }
+    }
+    this.state.values = values;
+  }
+  /**
+   * Inicializa el valor de un campo
+   */
+  initializeFieldValue(field, values) {
+    if (field.defaultValue !== void 0) {
+      values[field.name] = field.defaultValue;
+    } else {
+      switch (field.type) {
+        case "checkbox":
+        case "switch":
+          values[field.name] = field.checked || false;
+          break;
+        case "select":
+          if ("multiple" in field && field.multiple) {
+            values[field.name] = [];
+          } else {
+            values[field.name] = null;
+          }
+          break;
+        case "array":
+          values[field.name] = [];
+          break;
+        case "group":
+          values[field.name] = {};
+          if ("fields" in field) {
+            for (const subField of field.fields) {
+              this.initializeFieldValue(subField, values[field.name]);
+            }
+          }
+          break;
+        default:
+          values[field.name] = null;
+      }
+    }
+  }
+  /**
+   * Inicializa el estado del wizard
+   */
+  initializeWizard() {
+    if (!this.schema || !this.schema.isWizard) {
+      this.wizardState = null;
+      return;
+    }
+    this.wizardState = {
+      currentStep: 0,
+      totalSteps: this.schema.steps.length,
+      completedSteps: []
+    };
+  }
+  /**
+   * Obtiene el estado actual
+   */
+  getState() {
+    return { ...this.state };
+  }
+  /**
+   * Obtiene el estado del wizard
+   */
+  getWizardState() {
+    return this.wizardState ? { ...this.wizardState } : null;
+  }
+  /**
+   * Obtiene un valor del formulario
+   */
+  getValue(fieldName) {
+    return getNestedValue(this.state.values, fieldName);
+  }
+  /**
+   * Establece un valor
+   */
+  async setValue(fieldName, value) {
+    setNestedValue(this.state.values, fieldName, value);
+    this.state.touched[fieldName] = true;
+    if (this.state.touched[fieldName] && this.schema) {
+      await this.validateField(fieldName);
+    }
+    this.updateValidity();
+  }
+  /**
+   * Establece un valor sin validar (útil para preservar valores durante re-renderizado)
+   */
+  setValueWithoutValidation(fieldName, value) {
+    setNestedValue(this.state.values, fieldName, value);
+  }
+  /**
+   * Valida un campo específico
+   */
+  async validateField(fieldName) {
+    if (!this.schema) return;
+    const allFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields;
+    const field = allFields.find((f) => f.name === fieldName);
+    if (!field) return;
+    const value = this.getValue(fieldName);
+    const errors = await this.validator.validateField(
+      field,
+      value
+    );
+    if (errors.length > 0) {
+      this.state.errors[fieldName] = errors;
+    } else {
+      delete this.state.errors[fieldName];
+    }
+  }
+  /**
+   * Valida todo el formulario
+   */
+  async validateForm() {
+    if (!this.schema) {
+      return {};
+    }
+    const allFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields;
+    const errors = await this.validator.validateForm(
+      allFields,
+      this.state.values
+    );
+    this.state.errors = errors;
+    this.updateValidity();
+    return errors;
+  }
+  /**
+   * Actualiza la validez del formulario
+   */
+  updateValidity() {
+    this.state.isValid = Object.keys(this.state.errors).length === 0;
+  }
+  /**
+   * Marca un campo como touched
+   */
+  setTouched(fieldName) {
+    this.state.touched[fieldName] = true;
+  }
+  /**
+   * Obtiene los errores de un campo
+   */
+  getErrors(fieldName) {
+    return this.state.errors[fieldName] || [];
+  }
+  /**
+   * Obtiene todos los errores
+   */
+  getAllErrors() {
+    return { ...this.state.errors };
+  }
+  /**
+   * Resetea el formulario
+   */
+  reset() {
+    this.state = this.createInitialState();
+    if (this.schema) {
+      this.initializeValues();
+      this.initializeWizard();
+    }
+  }
+  /**
+   * Avanza al siguiente step del wizard
+   */
+  nextStep() {
+    if (!this.wizardState) return false;
+    if (this.wizardState.currentStep < this.wizardState.totalSteps - 1) {
+      this.wizardState.currentStep++;
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Retrocede al step anterior del wizard
+   */
+  previousStep() {
+    if (!this.wizardState) return false;
+    if (this.wizardState.currentStep > 0) {
+      this.wizardState.currentStep--;
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Va a un step específico
+   */
+  goToStep(stepIndex) {
+    if (!this.wizardState) return false;
+    if (stepIndex >= 0 && stepIndex < this.wizardState.totalSteps) {
+      this.wizardState.currentStep = stepIndex;
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Marca un step como completado
+   */
+  completeStep(stepIndex) {
+    if (!this.wizardState) return;
+    if (!this.wizardState.completedSteps.includes(stepIndex)) {
+      this.wizardState.completedSteps.push(stepIndex);
+    }
+  }
+  /**
+   * Establece el estado de submitting
+   */
+  setSubmitting(isSubmitting) {
+    this.state.isSubmitting = isSubmitting;
+  }
+  /**
+   * Obtiene los campos del step actual
+   */
+  getCurrentStepFields() {
+    if (!this.schema || !this.schema.isWizard || !this.wizardState) {
+      return this.schema?.fields || [];
+    }
+    return this.schema.steps[this.wizardState.currentStep].fields;
+  }
+};
+
+// src/components/inputs/base-input.ts
+var BaseInput = class {
+  constructor(field, value, error, onChange, onBlur) {
+    this.field = field;
+    this.value = value;
+    this.error = error;
+    this.onChange = onChange;
+    this.onBlur = onBlur;
+  }
+  /**
+   * Crea un contenedor con label y error
+   */
+  createFieldContainer(input) {
+    const container = document.createElement("div");
+    container.className = "easy-form-field";
+    if (this.field.label) {
+      const label = document.createElement("label");
+      label.className = "easy-form-label";
+      label.setAttribute("for", this.getFieldId());
+      label.textContent = this.field.label;
+      if (this.field.validations?.some((v) => v.type === "required")) {
+        const required = document.createElement("span");
+        required.className = "easy-form-required";
+        required.textContent = " *";
+        label.appendChild(required);
+      }
+      container.appendChild(label);
+    }
+    container.appendChild(input);
+    if (this.field.description) {
+      const description = document.createElement("p");
+      description.className = "easy-form-description";
+      description.textContent = this.field.description;
+      container.appendChild(description);
+    }
+    if (this.error) {
+      const errorEl = document.createElement("p");
+      errorEl.className = "easy-form-error";
+      errorEl.textContent = this.error;
+      container.appendChild(errorEl);
+    }
+    return container;
+  }
+  /**
+   * Obtiene el ID del campo
+   */
+  getFieldId() {
+    return `easy-form-${this.field.name}`;
+  }
+  /**
+   * Aplica props comunes a un elemento
+   */
+  applyCommonProps(element) {
+    element.id = this.getFieldId();
+    element.setAttribute("name", this.field.name);
+    if (this.field.disabled) {
+      element.setAttribute("disabled", "true");
+    }
+    if (this.field.hidden) {
+      element.style.display = "none";
+    }
+    if (this.error) {
+      element.classList.add("easy-form-input-error");
+    }
+    if (this.field.props) {
+      for (const [key, value] of Object.entries(this.field.props)) {
+        if (key.startsWith("data-") || key.startsWith("aria-")) {
+          element.setAttribute(key, String(value));
+        }
+      }
+    }
+  }
+};
+
+// src/components/inputs/text-input.ts
+var TextInput = class extends BaseInput {
+  render() {
+    const input = document.createElement("input");
+    input.type = this.field.type === "email" ? "email" : this.field.type === "password" ? "password" : "text";
+    input.value = this.value ?? "";
+    input.placeholder = this.field.placeholder || "";
+    this.applyCommonProps(input);
+    input.addEventListener("input", (e) => {
+      const target = e.target;
+      this.onChange(target.value);
+    });
+    input.addEventListener("blur", () => {
+      this.onBlur();
+    });
+    return this.createFieldContainer(input);
+  }
+};
+
+// src/components/inputs/number-input.ts
+var NumberInput = class extends BaseInput {
+  render() {
+    const input = document.createElement("input");
+    input.type = "number";
+    input.value = this.value ?? "";
+    input.placeholder = this.field.placeholder || "";
+    const numberField = this.field;
+    if (numberField.min !== void 0) {
+      input.min = String(numberField.min);
+    }
+    if (numberField.max !== void 0) {
+      input.max = String(numberField.max);
+    }
+    if (numberField.step !== void 0) {
+      input.step = String(numberField.step);
+    }
+    this.applyCommonProps(input);
+    input.addEventListener("input", (e) => {
+      const target = e.target;
+      const numValue = target.value === "" ? null : Number(target.value);
+      this.onChange(numValue);
+    });
+    input.addEventListener("blur", () => {
+      this.onBlur();
+    });
+    return this.createFieldContainer(input);
+  }
+};
+
+// src/components/inputs/textarea-input.ts
+var TextareaInput = class extends BaseInput {
+  render() {
+    const textarea = document.createElement("textarea");
+    textarea.value = this.value ?? "";
+    textarea.placeholder = this.field.placeholder || "";
+    const textareaField = this.field;
+    if (textareaField.rows) {
+      textarea.rows = textareaField.rows;
+    }
+    if (textareaField.cols) {
+      textarea.cols = textareaField.cols;
+    }
+    this.applyCommonProps(textarea);
+    textarea.addEventListener("input", (e) => {
+      const target = e.target;
+      this.onChange(target.value);
+    });
+    textarea.addEventListener("blur", () => {
+      this.onBlur();
+    });
+    return this.createFieldContainer(textarea);
+  }
+};
+
+// src/components/inputs/select-input.ts
+var SelectInput = class extends BaseInput {
+  render() {
+    const select = document.createElement("select");
+    const selectField = this.field;
+    if (selectField.multiple) {
+      select.multiple = true;
+    }
+    for (const option of selectField.options) {
+      const optionEl = document.createElement("option");
+      if (typeof option === "string") {
+        optionEl.value = option;
+        optionEl.textContent = option;
+      } else {
+        optionEl.value = String(option.value);
+        optionEl.textContent = option.label;
+      }
+      select.appendChild(optionEl);
+    }
+    if (selectField.multiple && Array.isArray(this.value)) {
+      for (const option of select.options) {
+        option.selected = this.value.includes(option.value);
+      }
+    } else {
+      select.value = this.value ?? "";
+    }
+    this.applyCommonProps(select);
+    select.addEventListener("change", (e) => {
+      const target = e.target;
+      if (selectField.multiple) {
+        const selectedValues = Array.from(target.selectedOptions).map(
+          (opt) => opt.value
+        );
+        this.onChange(selectedValues);
+      } else {
+        this.onChange(target.value || null);
+      }
+    });
+    select.addEventListener("blur", () => {
+      this.onBlur();
+    });
+    return this.createFieldContainer(select);
+  }
+};
+
+// src/components/inputs/checkbox-input.ts
+var CheckboxInput = class extends BaseInput {
+  render() {
+    const checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.checked = Boolean(this.value);
+    this.applyCommonProps(checkbox);
+    checkbox.addEventListener("change", (e) => {
+      const target = e.target;
+      this.onChange(target.checked);
+    });
+    checkbox.addEventListener("blur", () => {
+      this.onBlur();
+    });
+    const container = document.createElement("div");
+    container.className = "easy-form-field";
+    const label = document.createElement("label");
+    label.className = "easy-form-label-checkbox";
+    label.setAttribute("for", this.getFieldId());
+    label.appendChild(checkbox);
+    if (this.field.label) {
+      const labelText = document.createTextNode(this.field.label);
+      label.appendChild(labelText);
+    }
+    container.appendChild(label);
+    if (this.field.description) {
+      const description = document.createElement("p");
+      description.className = "easy-form-description";
+      description.textContent = this.field.description;
+      container.appendChild(description);
+    }
+    if (this.error) {
+      const errorEl = document.createElement("p");
+      errorEl.className = "easy-form-error";
+      errorEl.textContent = this.error;
+      container.appendChild(errorEl);
+    }
+    return container;
+  }
+};
+
+// src/components/inputs/radio-input.ts
+var RadioInput = class extends BaseInput {
+  render() {
+    const container = document.createElement("div");
+    container.className = "easy-form-field";
+    if (this.field.label) {
+      const label = document.createElement("label");
+      label.className = "easy-form-label";
+      label.textContent = this.field.label;
+      if (this.field.validations?.some((v) => v.type === "required")) {
+        const required = document.createElement("span");
+        required.className = "easy-form-required";
+        required.textContent = " *";
+        label.appendChild(required);
+      }
+      container.appendChild(label);
+    }
+    const radioGroup = document.createElement("div");
+    radioGroup.className = "easy-form-radio-group";
+    const radioField = this.field;
+    for (const option of radioField.options) {
+      const optionValue = typeof option === "string" ? option : option.value;
+      const optionLabel = typeof option === "string" ? option : option.label;
+      const radioContainer = document.createElement("div");
+      radioContainer.className = "easy-form-radio-option";
+      const radio = document.createElement("input");
+      radio.type = "radio";
+      radio.name = this.field.name;
+      radio.id = `${this.getFieldId()}-${optionValue}`;
+      radio.value = String(optionValue);
+      radio.checked = String(this.value) === String(optionValue);
+      if (this.field.disabled) {
+        radio.disabled = true;
+      }
+      const label = document.createElement("label");
+      label.setAttribute("for", radio.id);
+      label.textContent = optionLabel;
+      label.className = "easy-form-radio-label";
+      radio.addEventListener("change", () => {
+        this.onChange(optionValue);
+      });
+      radio.addEventListener("blur", () => {
+        this.onBlur();
+      });
+      radioContainer.appendChild(radio);
+      radioContainer.appendChild(label);
+      radioGroup.appendChild(radioContainer);
+    }
+    container.appendChild(radioGroup);
+    if (this.field.description) {
+      const description = document.createElement("p");
+      description.className = "easy-form-description";
+      description.textContent = this.field.description;
+      container.appendChild(description);
+    }
+    if (this.error) {
+      const errorEl = document.createElement("p");
+      errorEl.className = "easy-form-error";
+      errorEl.textContent = this.error;
+      container.appendChild(errorEl);
+    }
+    return container;
+  }
+};
+
+// src/components/inputs/switch-input.ts
+var SwitchInput = class extends BaseInput {
+  render() {
+    const switchEl = document.createElement("input");
+    switchEl.type = "checkbox";
+    switchEl.className = "easy-form-switch";
+    switchEl.checked = Boolean(this.value);
+    this.applyCommonProps(switchEl);
+    switchEl.addEventListener("change", (e) => {
+      const target = e.target;
+      this.onChange(target.checked);
+    });
+    switchEl.addEventListener("blur", () => {
+      this.onBlur();
+    });
+    const container = document.createElement("div");
+    container.className = "easy-form-field";
+    const label = document.createElement("label");
+    label.className = "easy-form-label-switch";
+    label.setAttribute("for", this.getFieldId());
+    if (this.field.label) {
+      const labelText = document.createTextNode(this.field.label);
+      label.appendChild(labelText);
+    }
+    label.appendChild(switchEl);
+    container.appendChild(label);
+    if (this.field.description) {
+      const description = document.createElement("p");
+      description.className = "easy-form-description";
+      description.textContent = this.field.description;
+      container.appendChild(description);
+    }
+    if (this.error) {
+      const errorEl = document.createElement("p");
+      errorEl.className = "easy-form-error";
+      errorEl.textContent = this.error;
+      container.appendChild(errorEl);
+    }
+    return container;
+  }
+};
+
+// src/components/inputs/date-input.ts
+var DateInput = class extends BaseInput {
+  render() {
+    const input = document.createElement("input");
+    input.type = "date";
+    const dateField = this.field;
+    if (dateField.min) {
+      input.min = dateField.min;
+    }
+    if (dateField.max) {
+      input.max = dateField.max;
+    }
+    if (this.value) {
+      const date = this.value instanceof Date ? this.value.toISOString().split("T")[0] : String(this.value);
+      input.value = date;
+    }
+    this.applyCommonProps(input);
+    input.addEventListener("change", (e) => {
+      const target = e.target;
+      this.onChange(target.value || null);
+    });
+    input.addEventListener("blur", () => {
+      this.onBlur();
+    });
+    return this.createFieldContainer(input);
+  }
+};
+
+// src/components/inputs/file-input.ts
+var FileInput = class extends BaseInput {
+  render() {
+    const input = document.createElement("input");
+    input.type = "file";
+    const fileField = this.field;
+    if (fileField.accept) {
+      input.accept = fileField.accept;
+    }
+    if (fileField.multiple) {
+      input.multiple = true;
+    }
+    this.applyCommonProps(input);
+    input.addEventListener("change", (e) => {
+      const target = e.target;
+      if (target.files) {
+        if (fileField.multiple) {
+          this.onChange(Array.from(target.files));
+        } else {
+          this.onChange(target.files[0] || null);
+        }
+      }
+    });
+    input.addEventListener("blur", () => {
+      this.onBlur();
+    });
+    return this.createFieldContainer(input);
+  }
+};
+
+// src/components/inputs/index.ts
+function createInput(field, value, error, onChange, onBlur) {
+  switch (field.type) {
+    case "text":
+    case "email":
+    case "password":
+      return new TextInput(field, value, error, onChange, onBlur).render();
+    case "number":
+      return new NumberInput(field, value, error, onChange, onBlur).render();
+    case "textarea":
+      return new TextareaInput(field, value, error, onChange, onBlur).render();
+    case "select":
+      return new SelectInput(field, value, error, onChange, onBlur).render();
+    case "checkbox":
+      return new CheckboxInput(field, value, error, onChange, onBlur).render();
+    case "radio":
+      return new RadioInput(field, value, error, onChange, onBlur).render();
+    case "switch":
+      return new SwitchInput(field, value, error, onChange, onBlur).render();
+    case "date":
+      return new DateInput(field, value, error, onChange, onBlur).render();
+    case "file":
+      return new FileInput(field, value, error, onChange, onBlur).render();
+    default:
+      const div = document.createElement("div");
+      div.textContent = `Tipo de campo no soportado: ${field.type}`;
+      return div;
+  }
+}
+var customComponents = /* @__PURE__ */ new Map();
+function registerComponent(type, component) {
+  customComponents.set(type, component);
+}
+function registerComponents(components) {
+  for (const [type, component] of Object.entries(components)) {
+    registerComponent(type, component);
+  }
+}
+function getCustomComponent(type) {
+  return customComponents.get(type);
+}
+
+// src/components/easy-form.ts
+var BrowserHTMLElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+};
+var EasyForm = class extends BrowserHTMLElement {
+  constructor() {
+    if (typeof HTMLElement === "undefined") {
+      throw new Error("EasyForm can only be used in a browser environment");
+    }
+    super();
+    this.customComponents = {};
+    this.isRendering = false;
+    this.stateManager = new StateManager();
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["schema", "theme", "colors"];
+  }
+  /**
+   * Obtiene el schema
+   */
+  get schema() {
+    const schemaAttr = this.getAttribute("schema");
+    if (!schemaAttr) return null;
+    return parseAttributeValue(schemaAttr);
+  }
+  /**
+   * Establece el schema
+   */
+  set schema(value) {
+    if (value) {
+      this.setAttribute("schema", attributeValue(value));
+    } else {
+      this.removeAttribute("schema");
+    }
+  }
+  /**
+   * Se llama cuando el componente se conecta al DOM
+   */
+  connectedCallback() {
+    this.setupStyles();
+    this.render();
+  }
+  /**
+   * Se llama cuando un atributo cambia
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "schema" && newValue !== oldValue) {
+      this.handleSchemaChange();
+    }
+    if ((name === "theme" || name === "colors") && newValue !== oldValue) {
+      this.setupStyles();
+    }
+  }
+  /**
+   * Maneja el cambio de schema
+   */
+  handleSchemaChange() {
+    const schema = this.schema;
+    if (schema) {
+      this.stateManager.initializeSchema(schema);
+      this.render();
+    }
+  }
+  /**
+   * Renderiza el formulario
+   */
+  async render() {
+    if (this.isRendering) {
+      return;
+    }
+    this.isRendering = true;
+    try {
+      const schema = this.schema;
+      if (!schema) {
+        const form = this.shadow.querySelector("form");
+        if (form && form.parentNode === this.shadow) {
+          form.remove();
+        }
+        return;
+      }
+      const preservedValues = this.preserveCurrentValues();
+      if (preservedValues && Object.keys(preservedValues).length > 0) {
+        for (const [key, value] of Object.entries(preservedValues)) {
+          this.stateManager.setValueWithoutValidation(key, value);
+        }
+      }
+      this.stateManager.initializeSchema(schema);
+      const wizardState = this.stateManager.getWizardState();
+      const newFormElement = document.createElement("form");
+      newFormElement.addEventListener("submit", (e) => this.handleSubmit(e));
+      if (wizardState) {
+        this.renderWizard(newFormElement, wizardState);
+      } else {
+        this.renderFields(newFormElement, schema.fields || []);
+      }
+      const submitButton = document.createElement("button");
+      submitButton.type = "submit";
+      submitButton.textContent = "Enviar";
+      submitButton.className = "easy-form-submit";
+      newFormElement.appendChild(submitButton);
+      const oldForm = this.shadow.querySelector("form");
+      if (oldForm && oldForm.parentNode === this.shadow && oldForm !== newFormElement) {
+        try {
+          oldForm.remove();
+        } catch (e) {
+          console.warn("Error al eliminar formulario anterior:", e);
+        }
+      }
+      this.shadow.appendChild(newFormElement);
+    } finally {
+      this.isRendering = false;
+    }
+  }
+  /**
+   * Preserva los valores actuales del DOM antes de re-renderizar
+   * Retorna un objeto con los valores preservados
+   */
+  preserveCurrentValues() {
+    const form = this.shadow.querySelector("form");
+    const preservedValues = {};
+    if (!form) return preservedValues;
+    const inputs = form.querySelectorAll("input, textarea, select");
+    for (const input of inputs) {
+      const name = input.getAttribute("name");
+      if (!name) continue;
+      let value;
+      if (input instanceof HTMLInputElement) {
+        if (input.type === "checkbox") {
+          value = input.checked;
+        } else if (input.type === "radio") {
+          if (input.checked) {
+            value = input.value;
+          } else {
+            continue;
+          }
+        } else if (input.type === "number") {
+          value = input.value === "" ? null : Number(input.value);
+        } else {
+          value = input.value;
+        }
+      } else if (input instanceof HTMLTextAreaElement) {
+        value = input.value;
+      } else if (input instanceof HTMLSelectElement) {
+        if (input.multiple) {
+          value = Array.from(input.selectedOptions).map((opt) => opt.value);
+        } else {
+          value = input.value || null;
+        }
+      }
+      if (value !== void 0) {
+        preservedValues[name] = value === "" ? null : value;
+      }
+    }
+    return preservedValues;
+  }
+  /**
+   * Renderiza campos normales
+   */
+  renderFields(container, fields) {
+    for (const field of fields) {
+      const fieldElement = this.renderField(field);
+      if (fieldElement) {
+        container.appendChild(fieldElement);
+      }
+    }
+  }
+  /**
+   * Renderiza un campo
+   */
+  renderField(field) {
+    if (field.type === "group") {
+      return this.renderGroup(field);
+    }
+    if (field.type === "array") {
+      return this.renderArray(field);
+    }
+    if (field.type === "custom") {
+      return this.renderCustom(field);
+    }
+    const value = this.stateManager.getValue(field.name);
+    const errors = this.stateManager.getErrors(field.name);
+    const error = errors.length > 0 ? errors[0] : void 0;
+    const customComponent = getCustomComponent(field.type);
+    if (customComponent) {
+      return customComponent({
+        field,
+        value,
+        error,
+        onChange: (val) => this.handleFieldChange(field.name, val),
+        onBlur: () => this.handleFieldBlur(field.name)
+      });
+    }
+    return createInput(
+      field,
+      value,
+      error,
+      (val) => this.handleFieldChange(field.name, val),
+      () => this.handleFieldBlur(field.name)
+    );
+  }
+  /**
+   * Renderiza un grupo de campos
+   */
+  renderGroup(field) {
+    const groupContainer = document.createElement("div");
+    groupContainer.className = "easy-form-group";
+    if (field.label) {
+      const label = document.createElement("h3");
+      label.className = "easy-form-group-label";
+      label.textContent = field.label;
+      groupContainer.appendChild(label);
+    }
+    if ("fields" in field && field.fields) {
+      for (const subField of field.fields) {
+        const fieldElement = this.renderField(subField);
+        if (fieldElement) {
+          groupContainer.appendChild(fieldElement);
+        }
+      }
+    }
+    return groupContainer;
+  }
+  /**
+   * Renderiza un array dinámico
+   */
+  renderArray(field) {
+    const arrayContainer = document.createElement("div");
+    arrayContainer.className = "easy-form-array";
+    if (field.label) {
+      const label = document.createElement("label");
+      label.className = "easy-form-label";
+      label.textContent = field.label;
+      arrayContainer.appendChild(label);
+    }
+    const values = this.stateManager.getValue(field.name) || [];
+    const arrayField = field;
+    const itemsContainer = document.createElement("div");
+    itemsContainer.className = "easy-form-array-items";
+    for (let i = 0; i < values.length; i++) {
+      const itemContainer = document.createElement("div");
+      itemContainer.className = "easy-form-array-item";
+      if (arrayField.itemSchema?.fields) {
+        for (const itemField of arrayField.itemSchema.fields) {
+          const itemFieldWithName = {
+            ...itemField,
+            name: `${field.name}.${i}.${itemField.name}`
+          };
+          const fieldElement = this.renderField(itemFieldWithName);
+          if (fieldElement) {
+            itemContainer.appendChild(fieldElement);
+          }
+        }
+      }
+      const removeButton = document.createElement("button");
+      removeButton.type = "button";
+      removeButton.textContent = "Eliminar";
+      removeButton.className = "easy-form-array-remove";
+      removeButton.addEventListener("click", () => {
+        const newValues = [...values];
+        newValues.splice(i, 1);
+        this.handleFieldChange(field.name, newValues);
+      });
+      itemContainer.appendChild(removeButton);
+      itemsContainer.appendChild(itemContainer);
+    }
+    arrayContainer.appendChild(itemsContainer);
+    const addButton = document.createElement("button");
+    addButton.type = "button";
+    addButton.textContent = "Agregar";
+    addButton.className = "easy-form-array-add";
+    addButton.addEventListener("click", () => {
+      const newValues = [...values, {}];
+      this.handleFieldChange(field.name, newValues);
+    });
+    arrayContainer.appendChild(addButton);
+    return arrayContainer;
+  }
+  /**
+   * Renderiza un campo custom
+   */
+  renderCustom(field) {
+    const customComponent = getCustomComponent("custom");
+    if (!customComponent) {
+      const div = document.createElement("div");
+      div.textContent = `Componente custom no registrado para: ${field.name}`;
+      return div;
+    }
+    const value = this.stateManager.getValue(field.name);
+    const errors = this.stateManager.getErrors(field.name);
+    const error = errors.length > 0 ? errors[0] : void 0;
+    return customComponent({
+      field,
+      value,
+      error,
+      onChange: (val) => this.handleFieldChange(field.name, val),
+      onBlur: () => this.handleFieldBlur(field.name)
+    });
+  }
+  /**
+   * Renderiza wizard
+   */
+  renderWizard(container, wizardState) {
+    const wizardContainer = document.createElement("div");
+    wizardContainer.className = "easy-form-wizard";
+    const stepsIndicator = document.createElement("div");
+    stepsIndicator.className = "easy-form-wizard-steps";
+    const schema = this.schema;
+    if (schema?.steps) {
+      for (let i = 0; i < schema.steps.length; i++) {
+        const stepEl = document.createElement("div");
+        stepEl.className = "easy-form-wizard-step";
+        if (i === wizardState.currentStep) {
+          stepEl.classList.add("active");
+        }
+        if (wizardState.completedSteps.includes(i)) {
+          stepEl.classList.add("completed");
+        }
+        stepEl.textContent = schema.steps[i].title;
+        stepsIndicator.appendChild(stepEl);
+      }
+    }
+    wizardContainer.appendChild(stepsIndicator);
+    const fieldsContainer = document.createElement("div");
+    fieldsContainer.className = "easy-form-wizard-fields";
+    const currentFields = this.stateManager.getCurrentStepFields();
+    for (const field of currentFields) {
+      const fieldElement = this.renderField(field);
+      if (fieldElement) {
+        fieldsContainer.appendChild(fieldElement);
+      }
+    }
+    wizardContainer.appendChild(fieldsContainer);
+    const navContainer = document.createElement("div");
+    navContainer.className = "easy-form-wizard-nav";
+    const prevButton = document.createElement("button");
+    prevButton.type = "button";
+    prevButton.textContent = "Anterior";
+    prevButton.className = "easy-form-wizard-prev";
+    prevButton.disabled = wizardState.currentStep === 0;
+    prevButton.addEventListener("click", () => {
+      if (this.stateManager.previousStep()) {
+        this.render();
+        this.emitStepChange();
+      }
+    });
+    navContainer.appendChild(prevButton);
+    const nextButton = document.createElement("button");
+    nextButton.type = "button";
+    nextButton.textContent = wizardState.currentStep === wizardState.totalSteps - 1 ? "Enviar" : "Siguiente";
+    nextButton.className = "easy-form-wizard-next";
+    nextButton.addEventListener("click", async () => {
+      if (wizardState.currentStep === wizardState.totalSteps - 1) {
+        await this.handleSubmit(new Event("submit"));
+      } else {
+        const currentFields2 = this.stateManager.getCurrentStepFields();
+        const errors = await this.stateManager.validateForm();
+        const hasErrors = currentFields2.some(
+          (f) => errors[f.name] && errors[f.name].length > 0
+        );
+        if (!hasErrors) {
+          this.stateManager.completeStep(wizardState.currentStep);
+          if (this.stateManager.nextStep()) {
+            this.render();
+            this.emitStepChange();
+          }
+        } else {
+          this.emitError(errors);
+        }
+      }
+    });
+    navContainer.appendChild(nextButton);
+    wizardContainer.appendChild(navContainer);
+    container.appendChild(wizardContainer);
+  }
+  /**
+   * Maneja el cambio de un campo
+   */
+  async handleFieldChange(fieldName, value) {
+    await this.stateManager.setValue(fieldName, value);
+    const changeEvent = new CustomEvent("change", {
+      detail: {
+        field: fieldName,
+        value,
+        values: this.stateManager.getState().values
+      },
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(changeEvent);
+  }
+  /**
+   * Maneja el blur de un campo
+   */
+  async handleFieldBlur(fieldName) {
+    this.stateManager.setTouched(fieldName);
+    await this.stateManager.validateField(fieldName);
+    this.updateSingleField(fieldName);
+  }
+  /**
+   * Actualiza solo un campo específico sin re-renderizar todo el formulario
+   */
+  updateSingleField(fieldName) {
+    const schema = this.schema;
+    if (!schema) return;
+    const field = this.findFieldInSchema(schema, fieldName);
+    if (!field) return;
+    const errors = this.stateManager.getErrors(fieldName);
+    const error = errors.length > 0 ? errors[0] : void 0;
+    const fieldContainer = this.shadow.querySelector(`[name="${fieldName}"]`)?.closest(".easy-form-field");
+    if (!fieldContainer) return;
+    const errorElement = fieldContainer.querySelector(".easy-form-error");
+    if (error) {
+      if (!errorElement) {
+        const errorEl = document.createElement("p");
+        errorEl.className = "easy-form-error";
+        errorEl.textContent = error;
+        fieldContainer.appendChild(errorEl);
+      } else {
+        errorElement.textContent = error;
+      }
+      const input = fieldContainer.querySelector("input, textarea, select");
+      input?.classList.add("easy-form-input-error");
+    } else {
+      errorElement?.remove();
+      const input = fieldContainer.querySelector("input, textarea, select");
+      input?.classList.remove("easy-form-input-error");
+    }
+  }
+  /**
+   * Busca un campo por nombre en el schema
+   */
+  findFieldInSchema(schema, name) {
+    const fields = schema.fields || [];
+    for (const field of fields) {
+      if (field.name === name) {
+        return field;
+      }
+      if (field.type === "group" && "fields" in field) {
+        const found = this.findFieldInSchema({ fields: field.fields }, name);
+        if (found) return found;
+      }
+    }
+    return null;
+  }
+  /**
+   * Maneja el submit del formulario
+   */
+  async handleSubmit(event) {
+    event.preventDefault();
+    const errors = await this.stateManager.validateForm();
+    const state = this.stateManager.getState();
+    if (Object.keys(errors).length > 0) {
+      this.emitError(errors);
+      this.render();
+      return;
+    }
+    const submitEvent = new CustomEvent("submit", {
+      detail: {
+        values: state.values,
+        isValid: true,
+        errors: {}
+      },
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(submitEvent);
+  }
+  /**
+   * Emite evento de error
+   */
+  emitError(errors) {
+    const errorEvent = new CustomEvent("error", {
+      detail: {
+        errors
+      },
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(errorEvent);
+  }
+  /**
+   * Emite evento de cambio de step
+   */
+  emitStepChange() {
+    const wizardState = this.stateManager.getWizardState();
+    if (!wizardState) return;
+    const stepChangeEvent = new CustomEvent(
+      "stepChange",
+      {
+        detail: {
+          currentStep: wizardState.currentStep,
+          previousStep: wizardState.currentStep > 0 ? wizardState.currentStep - 1 : wizardState.currentStep,
+          totalSteps: wizardState.totalSteps
+        },
+        bubbles: true,
+        composed: true
+      }
+    );
+    this.dispatchEvent(stepChangeEvent);
+  }
+  /**
+   * Registra componentes personalizados
+   */
+  registerComponents(components) {
+    this.customComponents = { ...this.customComponents, ...components };
+    registerComponents(components);
+  }
+  /**
+   * Obtiene el tema del formulario
+   */
+  get theme() {
+    const themeAttr = this.getAttribute("theme");
+    if (themeAttr && ["plano", "tradicional", "material", "rounded-shadow", "lines"].includes(themeAttr)) {
+      return themeAttr;
+    }
+    return "plano";
+  }
+  /**
+   * Establece el tema del formulario
+   */
+  set theme(value) {
+    if (value) {
+      this.setAttribute("theme", value);
+    } else {
+      this.removeAttribute("theme");
+    }
+  }
+  /**
+   * Obtiene los colores personalizados
+   */
+  get colors() {
+    const colorsAttr = this.getAttribute("colors");
+    if (!colorsAttr) return null;
+    return parseAttributeValue(colorsAttr);
+  }
+  /**
+   * Establece los colores personalizados
+   */
+  set colors(value) {
+    if (value) {
+      this.setAttribute("colors", attributeValue(value));
+    } else {
+      this.removeAttribute("colors");
+    }
+  }
+  /**
+   * Configura estilos básicos
+   */
+  setupStyles() {
+    const existingStyle = this.shadow.querySelector("style");
+    if (existingStyle) {
+      existingStyle.remove();
+    }
+    const theme = this.theme;
+    const colors = getColors(this.colors || void 0);
+    const styles = getThemeStyles(theme, colors);
+    const style = document.createElement("style");
+    style.textContent = styles;
+    if (this.shadow.firstChild) {
+      this.shadow.insertBefore(style, this.shadow.firstChild);
+    } else {
+      this.shadow.appendChild(style);
+    }
+  }
+};
+if (typeof window !== "undefined" && typeof customElements !== "undefined" && !customElements.get("easy-form")) {
+  customElements.define("easy-form", EasyForm);
+}
+export {
+  EasyForm
+};
+//# sourceMappingURL=easy-form.js.map