easy-forms-core 1.0.5 → 1.0.6

package/dist/easy-form.js

@@ -62,7 +62,11 @@ var SchemaParser = class {
       "array",
       "group",
       "row",
-      "custom"
+      "custom",
+      "quantity",
+      "accordion-select",
+      "image-grid-select",
+      "otp"
     ];
     if (!validTypes.includes(field.type)) {
       throw new Error(
@@ -72,6 +76,8 @@ var SchemaParser = class {
     switch (field.type) {
       case "select":
       case "radio":
+      case "accordion-select":
+      case "image-grid-select":
         if (!("options" in field) || !field.options || field.options.length === 0) {
           throw new Error(
             `Field "${field.name}" de tipo ${field.type} debe tener options`
@@ -117,15 +123,41 @@ var SchemaParser = class {
         }
         break;
       case "select":
+      case "accordion-select":
+      case "image-grid-select":
         if (!("multiple" in field)) {
           defaults.multiple = false;
         }
+        if (field.type === "image-grid-select") {
+          if (!("columns" in field)) {
+            defaults.columns = 3;
+          }
+          if (!("imageSize" in field)) {
+            defaults.imageSize = "medium";
+          }
+        }
         break;
       case "file":
         if (!("multiple" in field)) {
           defaults.multiple = false;
         }
         break;
+      case "quantity":
+        if (!("min" in field)) {
+          defaults.min = 0;
+        }
+        if (!("step" in field)) {
+          defaults.step = 1;
+        }
+        break;
+      case "otp":
+        if (!("length" in field)) {
+          defaults.length = 6;
+        }
+        if (!("numeric" in field)) {
+          defaults.numeric = true;
+        }
+        break;
     }
     return { ...defaults, ...field };
   }
@@ -372,6 +404,249 @@ function getBaseStyles(colors) {
     .easy-form-array-remove:hover {
       opacity: 0.9;
     }
+    /* Quantity Input */
+    .easy-form-quantity-container {
+      display: flex;
+      flex-direction: column;
+    }
+    .easy-form-quantity-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .easy-form-quantity-btn {
+      width: 2.5rem;
+      height: 2.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--easy-form-primary);
+      color: white;
+      border: none;
+      border-radius: 4px;
+      font-size: 1.25rem;
+      font-weight: bold;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      user-select: none;
+    }
+    .easy-form-quantity-btn:hover:not(.disabled) {
+      opacity: 0.9;
+      transform: scale(1.05);
+    }
+    .easy-form-quantity-btn.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .easy-form-quantity-input {
+      flex: 1;
+      text-align: center;
+      max-width: 100px;
+    }
+    /* Accordion Select */
+    .easy-form-accordion-select-container {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+    .easy-form-accordion-item {
+      border: 1px solid var(--easy-form-border);
+      border-radius: 4px;
+      overflow: hidden;
+      transition: all 0.2s ease;
+    }
+    .easy-form-accordion-item.selected {
+      border-color: var(--easy-form-primary);
+      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
+    }
+    .easy-form-accordion-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.75rem 1rem;
+      cursor: pointer;
+      background: var(--easy-form-background);
+      transition: background 0.2s ease;
+    }
+    .easy-form-accordion-header:hover {
+      background: rgba(0, 0, 0, 0.02);
+    }
+    .easy-form-accordion-header-content {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      flex: 1;
+    }
+    .easy-form-accordion-indicator {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--easy-form-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: all 0.2s ease;
+    }
+    .easy-form-accordion-indicator.radio {
+      border-radius: 50%;
+    }
+    .easy-form-accordion-indicator.checkbox {
+      border-radius: 4px;
+    }
+    .easy-form-accordion-indicator.checked {
+      background: var(--easy-form-primary);
+      border-color: var(--easy-form-primary);
+      color: white;
+    }
+    .easy-form-accordion-indicator.checked.radio::after {
+      content: '';
+      width: 8px;
+      height: 8px;
+      background: white;
+      border-radius: 50%;
+    }
+    .easy-form-accordion-indicator.checked.checkbox::after {
+      content: '\u2713';
+      font-size: 12px;
+      color: white;
+    }
+    .easy-form-accordion-label {
+      font-weight: 500;
+      color: var(--easy-form-text);
+    }
+    .easy-form-accordion-arrow {
+      transition: transform 0.2s ease;
+      color: var(--easy-form-secondary);
+    }
+    .easy-form-accordion-content {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.3s ease;
+      padding: 0 1rem;
+    }
+    .easy-form-accordion-item.open .easy-form-accordion-content {
+      padding: 1rem;
+    }
+    .easy-form-accordion-description {
+      color: var(--easy-form-secondary);
+      font-size: 0.875rem;
+      margin: 0;
+    }
+    /* Image Grid Select */
+    .easy-form-image-grid-container {
+      display: grid;
+      gap: 1rem;
+    }
+    .easy-form-image-grid-item {
+      position: relative;
+      border: 2px solid var(--easy-form-border);
+      border-radius: 8px;
+      overflow: hidden;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      background: var(--easy-form-background);
+    }
+    .easy-form-image-grid-item:hover {
+      border-color: var(--easy-form-primary);
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+    .easy-form-image-grid-item.selected {
+      border-color: var(--easy-form-primary);
+      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
+    }
+    .easy-form-image-grid-image-container {
+      position: relative;
+      width: 100%;
+      aspect-ratio: 1;
+      overflow: hidden;
+      background: #f5f5f5;
+    }
+    .easy-form-image-grid-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .easy-form-image-grid-placeholder {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--easy-form-secondary);
+      color: white;
+      font-size: 2rem;
+      font-weight: bold;
+    }
+    .easy-form-image-grid-indicator {
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+      width: 24px;
+      height: 24px;
+      border: 2px solid white;
+      background: var(--easy-form-primary);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 12px;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+    .easy-form-image-grid-item.selected .easy-form-image-grid-indicator {
+      opacity: 1;
+    }
+    .easy-form-image-grid-indicator.checkbox {
+      border-radius: 4px;
+    }
+    .easy-form-image-grid-label {
+      padding: 0.75rem;
+      text-align: center;
+      font-weight: 500;
+      color: var(--easy-form-text);
+    }
+    .easy-form-image-grid-description {
+      padding: 0 0.75rem 0.75rem;
+      font-size: 0.875rem;
+      color: var(--easy-form-secondary);
+      text-align: center;
+    }
+    .easy-form-image-grid-small {
+      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+    }
+    .easy-form-image-grid-medium {
+      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    }
+    .easy-form-image-grid-large {
+      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    }
+    /* OTP Input */
+    .easy-form-otp-container {
+      display: flex;
+      gap: 0.5rem;
+      justify-content: center;
+      align-items: center;
+    }
+    .easy-form-otp-input {
+      width: 3rem;
+      height: 3rem;
+      text-align: center;
+      font-size: 1.5rem;
+      font-weight: bold;
+      border: 2px solid var(--easy-form-border);
+      border-radius: 4px;
+      transition: all 0.2s ease;
+    }
+    .easy-form-otp-input:focus {
+      border-color: var(--easy-form-primary);
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+    }
+    .easy-form-otp-input:invalid {
+      border-color: var(--easy-form-error);
+    }
   `;
 }
 function getThemeSpecificStyles(theme, colors) {
@@ -2470,6 +2745,452 @@ var FileInput = class extends BaseInput {
   }
 };
 
+// src/components/inputs/quantity-input.ts
+var QuantityInput = class extends BaseInput {
+  render() {
+    const container = document.createElement("div");
+    container.className = "easy-form-quantity-container";
+    const quantityField = this.field;
+    const min = quantityField.min ?? 0;
+    const max = quantityField.max ?? void 0;
+    const step = quantityField.step ?? 1;
+    const currentValue = this.value ?? min;
+    const inputWrapper = document.createElement("div");
+    inputWrapper.className = "easy-form-quantity-wrapper";
+    const decrementBtn = document.createElement("button");
+    decrementBtn.type = "button";
+    decrementBtn.className = "easy-form-quantity-btn easy-form-quantity-decrement";
+    decrementBtn.textContent = "\u2212";
+    decrementBtn.setAttribute("aria-label", "Decrementar");
+    if (currentValue <= min) {
+      decrementBtn.disabled = true;
+      decrementBtn.classList.add("disabled");
+    }
+    const input = document.createElement("input");
+    input.type = "number";
+    input.value = String(currentValue);
+    input.min = String(min);
+    if (max !== void 0) {
+      input.max = String(max);
+    }
+    input.step = String(step);
+    input.className = "easy-form-quantity-input";
+    this.applyCommonProps(input);
+    const incrementBtn = document.createElement("button");
+    incrementBtn.type = "button";
+    incrementBtn.className = "easy-form-quantity-btn easy-form-quantity-increment";
+    incrementBtn.textContent = "+";
+    incrementBtn.setAttribute("aria-label", "Incrementar");
+    if (max !== void 0 && currentValue >= max) {
+      incrementBtn.disabled = true;
+      incrementBtn.classList.add("disabled");
+    }
+    decrementBtn.addEventListener("click", () => {
+      const newValue = Math.max(min, Number(input.value) - step);
+      input.value = String(newValue);
+      this.onChange(newValue);
+      updateButtons();
+    });
+    incrementBtn.addEventListener("click", () => {
+      const newValue = max !== void 0 ? Math.min(max, Number(input.value) + step) : Number(input.value) + step;
+      input.value = String(newValue);
+      this.onChange(newValue);
+      updateButtons();
+    });
+    input.addEventListener("input", (e) => {
+      const target = e.target;
+      let numValue = Number(target.value);
+      if (isNaN(numValue)) {
+        numValue = min;
+      }
+      if (numValue < min) {
+        numValue = min;
+      }
+      if (max !== void 0 && numValue > max) {
+        numValue = max;
+      }
+      target.value = String(numValue);
+      this.onChange(numValue);
+      updateButtons();
+    });
+    input.addEventListener("blur", () => {
+      this.onBlur();
+    });
+    const updateButtons = () => {
+      const value = Number(input.value);
+      decrementBtn.disabled = value <= min;
+      decrementBtn.classList.toggle("disabled", value <= min);
+      if (max !== void 0) {
+        incrementBtn.disabled = value >= max;
+        incrementBtn.classList.toggle("disabled", value >= max);
+      } else {
+        incrementBtn.disabled = false;
+        incrementBtn.classList.remove("disabled");
+      }
+    };
+    inputWrapper.appendChild(decrementBtn);
+    inputWrapper.appendChild(input);
+    inputWrapper.appendChild(incrementBtn);
+    container.appendChild(inputWrapper);
+    return this.createFieldContainer(container);
+  }
+};
+
+// src/components/inputs/accordion-select-input.ts
+var AccordionSelectInput = class extends BaseInput {
+  constructor() {
+    super(...arguments);
+    this.openAccordion = null;
+  }
+  render() {
+    const container = document.createElement("div");
+    container.className = "easy-form-accordion-select-container";
+    const accordionField = this.field;
+    const selectedValue = this.value ?? null;
+    accordionField.options.forEach((option, index) => {
+      const optionValue = typeof option === "string" ? option : option.value;
+      const optionLabel = typeof option === "string" ? option : option.label;
+      const optionDescription = typeof option === "object" && "description" in option && option.description ? option.description : void 0;
+      const accordionItem = document.createElement("div");
+      accordionItem.className = "easy-form-accordion-item";
+      accordionItem.setAttribute("data-value", String(optionValue));
+      if (selectedValue === optionValue || Array.isArray(selectedValue) && selectedValue.includes(optionValue)) {
+        accordionItem.classList.add("selected");
+        if (!accordionField.multiple) {
+          this.openAccordion = String(optionValue);
+        }
+      }
+      const header = document.createElement("div");
+      header.className = "easy-form-accordion-header";
+      header.setAttribute("role", "button");
+      header.setAttribute("tabindex", "0");
+      header.setAttribute("aria-expanded", "false");
+      const headerContent = document.createElement("div");
+      headerContent.className = "easy-form-accordion-header-content";
+      const indicator = document.createElement("div");
+      indicator.className = "easy-form-accordion-indicator";
+      if (accordionField.multiple) {
+        indicator.classList.add("checkbox");
+        if (Array.isArray(selectedValue) && selectedValue.includes(optionValue)) {
+          indicator.classList.add("checked");
+        }
+      } else {
+        indicator.classList.add("radio");
+        if (selectedValue === optionValue) {
+          indicator.classList.add("checked");
+        }
+      }
+      const label = document.createElement("span");
+      label.className = "easy-form-accordion-label";
+      label.textContent = optionLabel;
+      const arrow = document.createElement("span");
+      arrow.className = "easy-form-accordion-arrow";
+      arrow.textContent = "\u25BC";
+      headerContent.appendChild(indicator);
+      headerContent.appendChild(label);
+      header.appendChild(headerContent);
+      header.appendChild(arrow);
+      const content = document.createElement("div");
+      content.className = "easy-form-accordion-content";
+      if (optionDescription) {
+        const description = document.createElement("p");
+        description.className = "easy-form-accordion-description";
+        description.textContent = optionDescription;
+        content.appendChild(description);
+      }
+      if (typeof option === "object" && "content" in option && option.content) {
+        const customContent = document.createElement("div");
+        customContent.className = "easy-form-accordion-custom-content";
+        if (typeof option.content === "string") {
+          customContent.innerHTML = option.content;
+        } else if (option.content instanceof HTMLElement) {
+          customContent.appendChild(option.content);
+        }
+        content.appendChild(customContent);
+      }
+      accordionItem.appendChild(header);
+      accordionItem.appendChild(content);
+      const toggleAccordion = () => {
+        const isOpen = accordionItem.classList.contains("open");
+        if (!accordionField.multiple) {
+          container.querySelectorAll(".easy-form-accordion-item").forEach((item) => {
+            if (item !== accordionItem) {
+              item.classList.remove("open");
+              const otherHeader = item.querySelector(".easy-form-accordion-header");
+              const otherContent = item.querySelector(".easy-form-accordion-content");
+              const otherArrow = item.querySelector(".easy-form-accordion-arrow");
+              if (otherHeader) otherHeader.setAttribute("aria-expanded", "false");
+              if (otherContent) otherContent.style.maxHeight = null;
+              if (otherArrow) otherArrow.style.transform = "rotate(0deg)";
+            }
+          });
+        }
+        if (isOpen) {
+          accordionItem.classList.remove("open");
+          header.setAttribute("aria-expanded", "false");
+          content.style.maxHeight = null;
+          arrow.style.transform = "rotate(0deg)";
+          this.openAccordion = null;
+        } else {
+          accordionItem.classList.add("open");
+          header.setAttribute("aria-expanded", "true");
+          content.style.maxHeight = content.scrollHeight + "px";
+          arrow.style.transform = "rotate(180deg)";
+          this.openAccordion = String(optionValue);
+        }
+      };
+      const selectOption = () => {
+        if (accordionField.multiple) {
+          const currentValues = Array.isArray(selectedValue) ? [...selectedValue] : [];
+          const index2 = currentValues.indexOf(optionValue);
+          if (index2 > -1) {
+            currentValues.splice(index2, 1);
+            accordionItem.classList.remove("selected");
+            indicator.classList.remove("checked");
+          } else {
+            currentValues.push(optionValue);
+            accordionItem.classList.add("selected");
+            indicator.classList.add("checked");
+          }
+          this.onChange(currentValues.length > 0 ? currentValues : null);
+        } else {
+          container.querySelectorAll(".easy-form-accordion-item").forEach((item) => {
+            item.classList.remove("selected");
+            const itemIndicator = item.querySelector(".easy-form-accordion-indicator");
+            if (itemIndicator) itemIndicator.classList.remove("checked");
+          });
+          accordionItem.classList.add("selected");
+          indicator.classList.add("checked");
+          this.onChange(optionValue);
+        }
+      };
+      header.addEventListener("click", (e) => {
+        e.stopPropagation();
+        selectOption();
+        toggleAccordion();
+      });
+      header.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          selectOption();
+          toggleAccordion();
+        }
+      });
+      if (selectedValue === optionValue || Array.isArray(selectedValue) && selectedValue.includes(optionValue)) {
+        if (!accordionField.multiple || accordionField.autoExpand) {
+          setTimeout(() => {
+            accordionItem.classList.add("open");
+            header.setAttribute("aria-expanded", "true");
+            content.style.maxHeight = content.scrollHeight + "px";
+            arrow.style.transform = "rotate(180deg)";
+          }, 0);
+        }
+      }
+      container.appendChild(accordionItem);
+    });
+    return this.createFieldContainer(container);
+  }
+};
+
+// src/components/inputs/image-grid-select-input.ts
+var ImageGridSelectInput = class extends BaseInput {
+  render() {
+    const container = document.createElement("div");
+    container.className = "easy-form-image-grid-container";
+    const imageGridField = this.field;
+    const selectedValue = this.value ?? null;
+    const columns = imageGridField.columns ?? 3;
+    const imageSize = imageGridField.imageSize ?? "medium";
+    container.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
+    container.style.gap = imageGridField.gap ?? "1rem";
+    imageGridField.options.forEach((option) => {
+      const optionValue = typeof option === "string" ? option : option.value;
+      const optionLabel = typeof option === "string" ? option : option.label;
+      const optionImage = typeof option === "object" && "image" in option && option.image ? option.image : void 0;
+      const optionDescription = typeof option === "object" && "description" in option && option.description ? option.description : void 0;
+      const gridItem = document.createElement("div");
+      gridItem.className = `easy-form-image-grid-item easy-form-image-grid-${imageSize}`;
+      gridItem.setAttribute("data-value", String(optionValue));
+      gridItem.setAttribute("role", "button");
+      gridItem.setAttribute("tabindex", "0");
+      gridItem.setAttribute("aria-label", optionLabel);
+      if (selectedValue === optionValue || Array.isArray(selectedValue) && selectedValue.includes(optionValue)) {
+        gridItem.classList.add("selected");
+      }
+      const imageContainer = document.createElement("div");
+      imageContainer.className = "easy-form-image-grid-image-container";
+      if (optionImage) {
+        const img = document.createElement("img");
+        img.src = optionImage;
+        img.alt = optionLabel;
+        img.className = "easy-form-image-grid-image";
+        imageContainer.appendChild(img);
+      } else {
+        const placeholder = document.createElement("div");
+        placeholder.className = "easy-form-image-grid-placeholder";
+        placeholder.textContent = optionLabel.charAt(0).toUpperCase();
+        imageContainer.appendChild(placeholder);
+      }
+      const indicator = document.createElement("div");
+      indicator.className = "easy-form-image-grid-indicator";
+      if (imageGridField.multiple) {
+        indicator.classList.add("checkbox");
+        if (Array.isArray(selectedValue) && selectedValue.includes(optionValue)) {
+          indicator.classList.add("checked");
+          indicator.innerHTML = "\u2713";
+        }
+      } else {
+        indicator.classList.add("radio");
+        if (selectedValue === optionValue) {
+          indicator.classList.add("checked");
+          indicator.innerHTML = "\u25CF";
+        }
+      }
+      imageContainer.appendChild(indicator);
+      const label = document.createElement("div");
+      label.className = "easy-form-image-grid-label";
+      label.textContent = optionLabel;
+      if (optionDescription) {
+        const description = document.createElement("div");
+        description.className = "easy-form-image-grid-description";
+        description.textContent = optionDescription;
+        gridItem.appendChild(description);
+      }
+      gridItem.appendChild(imageContainer);
+      gridItem.appendChild(label);
+      const selectOption = () => {
+        if (imageGridField.multiple) {
+          const currentValues = Array.isArray(selectedValue) ? [...selectedValue] : [];
+          const index = currentValues.indexOf(optionValue);
+          if (index > -1) {
+            currentValues.splice(index, 1);
+            gridItem.classList.remove("selected");
+            indicator.classList.remove("checked");
+            indicator.innerHTML = "";
+          } else {
+            currentValues.push(optionValue);
+            gridItem.classList.add("selected");
+            indicator.classList.add("checked");
+            indicator.innerHTML = "\u2713";
+          }
+          this.onChange(currentValues.length > 0 ? currentValues : null);
+        } else {
+          container.querySelectorAll(".easy-form-image-grid-item").forEach((item) => {
+            item.classList.remove("selected");
+            const itemIndicator = item.querySelector(".easy-form-image-grid-indicator");
+            if (itemIndicator) {
+              itemIndicator.classList.remove("checked");
+              itemIndicator.innerHTML = "";
+            }
+          });
+          gridItem.classList.add("selected");
+          indicator.classList.add("checked");
+          indicator.innerHTML = "\u25CF";
+          this.onChange(optionValue);
+        }
+      };
+      gridItem.addEventListener("click", selectOption);
+      gridItem.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          selectOption();
+        }
+      });
+      gridItem.addEventListener("blur", () => {
+        this.onBlur();
+      });
+      container.appendChild(gridItem);
+    });
+    return this.createFieldContainer(container);
+  }
+};
+
+// src/components/inputs/otp-input.ts
+var OTPInput = class extends BaseInput {
+  constructor() {
+    super(...arguments);
+    this.inputs = [];
+  }
+  render() {
+    const container = document.createElement("div");
+    container.className = "easy-form-otp-container";
+    const otpField = this.field;
+    const length = otpField.length ?? 6;
+    const value = this.value ?? "";
+    const valueString = String(value).padStart(length, "").slice(0, length);
+    for (let i = 0; i < length; i++) {
+      const input = document.createElement("input");
+      input.type = "text";
+      input.inputMode = "numeric";
+      input.maxLength = 1;
+      input.className = "easy-form-otp-input";
+      input.setAttribute("aria-label", `C\xF3digo d\xEDgito ${i + 1}`);
+      if (valueString[i]) {
+        input.value = valueString[i];
+      }
+      this.applyCommonProps(input);
+      input.id = `${this.getFieldId()}-${i}`;
+      const currentIndex = i;
+      input.addEventListener("input", (e) => {
+        const target = e.target;
+        const inputValue = target.value.replace(/[^0-9]/g, "");
+        target.value = inputValue;
+        if (inputValue && currentIndex < length - 1) {
+          this.inputs[currentIndex + 1].focus();
+        }
+        this.updateOTPValue();
+      });
+      input.addEventListener("keydown", (e) => {
+        const target = e.target;
+        if (e.key === "Backspace" && !target.value && currentIndex > 0) {
+          this.inputs[currentIndex - 1].focus();
+          this.inputs[currentIndex - 1].value = "";
+          this.updateOTPValue();
+        }
+        if (e.key === "ArrowLeft" && currentIndex > 0) {
+          e.preventDefault();
+          this.inputs[currentIndex - 1].focus();
+        }
+        if (e.key === "ArrowRight" && currentIndex < length - 1) {
+          e.preventDefault();
+          this.inputs[currentIndex + 1].focus();
+        }
+      });
+      input.addEventListener("paste", (e) => {
+        e.preventDefault();
+        const pastedData = (e.clipboardData || window.clipboardData).getData("text");
+        const digits = pastedData.replace(/[^0-9]/g, "").slice(0, length);
+        for (let j = 0; j < digits.length && currentIndex + j < length; j++) {
+          this.inputs[currentIndex + j].value = digits[j];
+        }
+        const nextEmptyIndex = Math.min(currentIndex + digits.length, length - 1);
+        this.inputs[nextEmptyIndex].focus();
+        this.updateOTPValue();
+      });
+      input.addEventListener("focus", (e) => {
+        const target = e.target;
+        target.select();
+      });
+      input.addEventListener("blur", () => {
+        this.onBlur();
+      });
+      this.inputs.push(input);
+      container.appendChild(input);
+    }
+    return this.createFieldContainer(container);
+  }
+  updateOTPValue() {
+    const otpValue = this.inputs.map((input) => input.value).join("");
+    const otpField = this.field;
+    const finalValue = otpValue.length === this.inputs.length ? otpValue : null;
+    if (otpField.numeric && finalValue) {
+      this.onChange(Number(finalValue));
+    } else {
+      this.onChange(finalValue);
+    }
+  }
+};
+
 // src/components/inputs/index.ts
 function createInput(field, value, error, onChange, onBlur) {
   switch (field.type) {
@@ -2493,6 +3214,14 @@ function createInput(field, value, error, onChange, onBlur) {
       return new DateInput(field, value, error, onChange, onBlur).render();
     case "file":
       return new FileInput(field, value, error, onChange, onBlur).render();
+    case "quantity":
+      return new QuantityInput(field, value, error, onChange, onBlur).render();
+    case "accordion-select":
+      return new AccordionSelectInput(field, value, error, onChange, onBlur).render();
+    case "image-grid-select":
+      return new ImageGridSelectInput(field, value, error, onChange, onBlur).render();
+    case "otp":
+      return new OTPInput(field, value, error, onChange, onBlur).render();
     default:
       const div = document.createElement("div");
       div.textContent = `Tipo de campo no soportado: ${field.type}`;