@t007/input 0.0.22 → 0.0.24

package/dist/index.js

@@ -1,58 +1,74 @@
-// src/index.js
-import { isArr, isStr, createEl, loadResource, initScrollAssist } from "@t007/utils";
+// src/js/index.js
+import { isArr, isStr, createEl, loadResource, formatSize as formatFileSize } from "@t007/utils";
+import { initScrollAssist } from "@t007/utils/hooks/vanilla";
+
+// src/ts/utils/consts.ts
+var violationKeys = ["valueMissing", "typeMismatch", "patternMismatch", "stepMismatch", "tooShort", "tooLong", "rangeUnderflow", "rangeOverflow", "badInput", "customError"];
+var dateTypes = ["date", "time", "datetime-local", "month"];
+var nativeIconTypes = [...dateTypes];
+
+// src/ts/utils/fn.ts
+import { formatSize } from "@t007/utils";
+function getStrengthLevel(value, minLength = 0) {
+  value = value.trim();
+  let level = 0;
+  if (value.length < minLength) level = 1;
+  else {
+    if (/[a-z]/.test(value)) level++;
+    if (/[A-Z]/.test(value)) level++;
+    if (/[0-9]/.test(value)) level++;
+    if (/[\W_]/.test(value)) level++;
+  }
+  return Math.min(level, 4);
+}
+function getFilesHelper(files, opts) {
+  if (!files || !files.length) return { violation: null, message: "" };
+  const totalFiles = files.length;
+  let totalSize = 0, currFiles = 0;
+  const setMaxError = (size, max, n = 0) => ({ violation: "rangeOverflow", message: n ? `File ${files.length > 1 ? n : ""} size of ${formatSize(size)} exceeds the per file maximum of ${formatSize(max)}` : `Total files size of ${formatSize(size)} exceeds the total maximum of ${formatSize(max)}` });
+  const setMinError = (size, min, n = 0) => ({ violation: "rangeUnderflow", message: n ? `File ${files.length > 1 ? n : ""} size of ${formatSize(size)} is less than the per file minimum of ${formatSize(min)}` : `Total files size of ${formatSize(size)} is less than the total minimum of ${formatSize(min)}` });
+  for (const file of files) {
+    currFiles++;
+    totalSize += file.size;
+    if (opts.accept) {
+      const acceptedTypes = opts.accept.split(",").map((type) => type.trim().replace(/^[*\.]+|[*\.]+$/g, "")).filter(Boolean) || [];
+      if (!acceptedTypes.some((type) => file.type.includes(type))) return { violation: "typeMismatch", message: `File${currFiles > 1 ? currFiles : ""} type of '${file.type}' is not accepted.` };
+    }
+    if (opts.maxSize && file.size > opts.maxSize) return setMaxError(file.size, opts.maxSize, currFiles);
+    if (opts.minSize && file.size < opts.minSize) return setMinError(file.size, opts.minSize, currFiles);
+    if (opts.multiple) {
+      if (opts.maxTotalSize && totalSize > opts.maxTotalSize) return setMaxError(totalSize, opts.maxTotalSize);
+      if (opts.minTotalSize && totalSize < opts.minTotalSize) return setMinError(totalSize, opts.minTotalSize);
+      if (opts.maxLength && totalFiles > opts.maxLength) return { violation: "tooLong", message: `Selected ${totalFiles} files exceeds the maximum of ${opts.maxLength} allowed file${opts.maxLength == 1 ? "" : "s"}` };
+      if (opts.minLength && totalFiles < opts.minLength) return { violation: "tooShort", message: `Selected ${totalFiles} files is less than the minimum of ${opts.minLength} allowed file${opts.minLength == 1 ? "" : "s"}` };
+    }
+  }
+  return { violation: null, message: "" };
+}
+
+// src/js/index.js
 var formManager = {
   forms: document.getElementsByClassName("t007-input-form"),
-  violationKeys: ["valueMissing", "typeMismatch", "patternMismatch", "stepMismatch", "tooShort", "tooLong", "rangeUnderflow", "rangeOverflow", "badInput", "customError"],
+  violationKeys,
   init() {
-    t007.FM.observeDOMForFields();
-    Array.from(t007.FM.forms).forEach(t007.FM.handleFormValidation);
+    t007.FM.observeDOMForFields(), Array.prototype.forEach.call(t007.FM.forms, t007.FM.handleFormValidation);
   },
   observeDOMForFields() {
     new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
+      for (const mutation of mutations)
         for (const node of mutation.addedNodes) {
-          if (!node.tagName || !(node?.classList?.contains("t007-input-field") || node?.querySelector?.(".t007-input-field"))) continue;
+          if (!node.tagName || !(node.classList.contains("t007-input-field") || node.querySelector(".t007-input-field"))) continue;
           for (const field2 of [...node.querySelector(".t007-input-field") ? node.querySelectorAll(".t007-input-field") : [node]]) t007.FM.setUpField(field2);
         }
-      }
     }).observe(document.body, { childList: true, subtree: true });
   },
-  getFilesHelper(files, opts) {
-    if (!files || !files.length) return { violation: null, message: "" };
-    const totalFiles = files.length;
-    let totalSize = 0;
-    let currFiles = 0;
-    const setMaxError = (size, max, n = 0) => ({ violation: "rangeOverflow", message: n ? `File ${files.length > 1 ? n : ""} size of ${t007.FM.formatSize(size)} exceeds the per file maximum of ${t007.FM.formatSize(max)}` : `Total files size of ${t007.FM.formatSize(size)} exceeds the total maximum of ${t007.FM.formatSize(max)}` });
-    const setMinError = (size, min, n = 0) => ({ violation: "rangeUnderflow", message: n ? `File ${files.length > 1 ? n : ""} size of ${t007.FM.formatSize(size)} is less than the per file minimum of ${t007.FM.formatSize(min)}` : `Total files size of ${t007.FM.formatSize(size)} is less than the total minimum of ${t007.FM.formatSize(min)}` });
-    for (const file of files) {
-      currFiles++;
-      totalSize += file.size;
-      if (opts.accept) {
-        const acceptedTypes = opts.accept.split(",").map((type) => type.trim().replace(/^[*\.]+|[*\.]+$/g, "")).filter(Boolean) || [];
-        if (!acceptedTypes.some((type) => file.type.includes(type))) return { violation: "typeMismatch", message: `File${currFiles > 1 ? currFiles : ""} type of '${file.type}' is not accepted.` };
-      }
-      if (opts.maxSize && file.size > opts.maxSize) return setMaxError(file.size, opts.maxSize, currFiles);
-      if (opts.minSize && file.size < opts.minSize) return setMinError(file.size, opts.minSize, currFiles);
-      if (opts.multiple) {
-        if (opts.maxTotalSize && totalSize > opts.maxTotalSize) return setMaxError(totalSize, opts.maxTotalSize);
-        if (opts.minTotalSize && totalSize < opts.minTotalSize) return setMinError(totalSize, opts.minTotalSize);
-        if (opts.maxLength && totalFiles > opts.maxLength) return { violation: "tooLong", message: `Selected ${totalFiles} files exceeds the maximum of ${opts.maxLength} allowed file${opts.maxLength == 1 ? "" : "s"}` };
-        if (opts.minLength && totalFiles < opts.minLength) return { violation: "tooShort", message: `Selected ${totalFiles} files is less than the minimum of ${opts.minLength} allowed file${opts.minLength == 1 ? "" : "s"}` };
-      }
-    }
-    return { violation: null, message: "" };
-  },
-  formatSize(size, decimals = 3, base = 1e3) {
-    if (size < base) return `${size} byte${size == 1 ? "" : "s"}`;
-    const units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], exponent = Math.min(Math.floor(Math.log(size) / Math.log(base)), units.length - 1);
-    return `${(size / Math.pow(base, exponent)).toFixed(decimals).replace(/\.0+$/, "")} ${units[exponent]}`;
-  },
+  getFilesHelper: (files, opts) => getFilesHelper(files, opts),
+  formatSize: (size, decimals = 3, base = 1e3) => formatFileSize(size, decimals, base),
   togglePasswordType: (input) => input.type = input.type === "password" ? "text" : "password",
   toggleFilled: (input) => input?.toggleAttribute("data-filled", input.type === "checkbox" || input.type === "radio" ? input.checked : input.value !== "" || input.files?.length > 0),
   setFallbackHelper(field2) {
     const helperTextWrapper = field2?.querySelector(".t007-input-helper-text-wrapper");
-    if (!helperTextWrapper || helperTextWrapper.querySelector(".t007-input-helper-text[data-violation='auto']")) return;
-    helperTextWrapper.append(createEl("p", { className: "t007-input-helper-text" }, { violation: "auto" }));
+    !helperTextWrapper?.querySelector(".t007-input-helper-text[data-violation='auto']") && helperTextWrapper?.append(createEl("p", { className: "t007-input-helper-text" }, { violation: "auto" }));
   },
   setFieldListeners(field2) {
     if (!field2) return;
@@ -60,47 +76,31 @@ var formManager = {
     if (input.type === "file")
       input.addEventListener("input", async () => {
         const file = input.files?.[0], img = new Image();
-        img.onload = () => {
-          input.style.setProperty("--t007-input-image-src", `url(${src})`);
-          input.classList.add("t007-input-image-selected");
-          setTimeout(() => URL.revokeObjectURL(src), 1e3);
-        };
-        img.onerror = () => {
-          input.style.removeProperty("--t007-input-image-src");
-          input.classList.remove("t007-input-image-selected");
-          URL.revokeObjectURL(src);
-        };
+        img.onload = () => (input.style.setProperty("--t007-input-image-src", `url(${src})`), input.classList.add("t007-input-image-selected"), setTimeout(() => URL.revokeObjectURL(src), 1e3));
+        img.onerror = () => (input.style.removeProperty("--t007-input-image-src"), input.classList.remove("t007-input-image-selected"), URL.revokeObjectURL(src));
         let src;
         if (file?.type?.startsWith("image")) src = URL.createObjectURL(file);
-        else if (file?.type?.startsWith("video")) {
+        else if (file?.type?.startsWith("video"))
           src = await new Promise((resolve) => {
             let video = createEl("video"), canvas = createEl("canvas"), context = canvas.getContext("2d");
             video.ontimeupdate = () => {
               context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
-              canvas.toBlob((blob) => resolve(URL.createObjectURL(blob)));
-              URL.revokeObjectURL(video.src);
+              canvas.toBlob((blob) => resolve(URL.createObjectURL(blob))), URL.revokeObjectURL(video.src);
               video = video.src = video.onloadedmetadata = video.ontimeupdate = null;
             };
             video.onloadeddata = () => video.currentTime = 3;
             video.src = URL.createObjectURL(file);
           });
-        }
-        if (!src) {
-          input.style.removeProperty("--t007-input-image-src");
-          input.classList.remove("t007-input-image-selected");
-          return;
-        }
+        if (!src) return input.style.removeProperty("--t007-input-image-src"), input.classList.remove("t007-input-image-selected");
         img.src = src;
       });
     if (floatingLabel) floatingLabel.ontransitionend = () => floatingLabel.classList.remove("t007-input-shake");
     if (eyeOpen && eyeClosed) eyeOpen.onclick = eyeClosed.onclick = () => t007.FM.togglePasswordType(input);
-    initScrollAssist(field2.querySelector(".t007-input-helper-text-wrapper"), { vertical: false });
+    initScrollAssist(field2.querySelector(".t007-input-helper-text-wrapper"), { vertical: false, assistClassName: "t007-input-scroll-assist" });
   },
   setUpField(field2) {
     if (field2.dataset.setUp) return;
-    t007.FM.toggleFilled(field2.querySelector(".t007-input"));
-    t007.FM.setFallbackHelper(field2);
-    t007.FM.setFieldListeners(field2);
+    t007.FM.toggleFilled(field2.querySelector(".t007-input")), t007.FM.setFallbackHelper(field2), t007.FM.setFieldListeners(field2);
     field2.dataset.setUp = "true";
   },
   field({ isWrapper = false, label = "", type = "text", placeholder = "", custom = "", minSize, maxSize, minTotalSize, maxTotalSize, options = [], indeterminate = false, eyeToggler = true, passwordMeter = true, helperText = {}, className = "", fieldClassName = "", children, startIcon = "", endIcon = "", nativeIcon = "", passwordVisibleIcon = "", passwordHiddenIcon = "", ...otherProps }) {
@@ -134,19 +134,18 @@ var formManager = {
     if (maxTotalSize) inputEl.setAttribute("maxtotalsize", maxTotalSize);
     Object.keys(otherProps).forEach((key) => inputEl[key] = otherProps[key]);
     labelEl.append(!isWrapper ? inputEl : children);
-    const nativeTypes = ["date", "time", "month", "datetime-local"];
-    if (nativeTypes.includes(type) && nativeIcon) labelEl.append(createEl("i", { className: "t007-input-icon t007-input-native-icon", innerHTML: nativeIcon }));
+    if (nativeIconTypes.includes(type) && nativeIcon) labelEl.append(createEl("i", { className: "t007-input-icon t007-input-native-icon", innerHTML: nativeIcon }));
     else if (endIcon) labelEl.append(createEl("i", { className: "t007-input-icon", innerHTML: endIcon }));
-    if (type === "password" && eyeToggler) {
-      labelEl.append(createEl("i", { role: "button", ariaLabel: "Show password", className: "t007-input-icon t007-input-password-visible-icon", innerHTML: passwordVisibleIcon || `<svg width="24" height="24"><path fill="rgba(0,0,0,.54)" d="M12 16q1.875 0 3.188-1.312Q16.5 13.375 16.5 11.5q0-1.875-1.312-3.188Q13.875 7 12 7q-1.875 0-3.188 1.312Q7.5 9.625 7.5 11.5q0 1.875 1.312 3.188Q10.125 16 12 16Zm0-1.8q-1.125 0-1.912-.788Q9.3 12.625 9.3 11.5t.788-1.913Q10.875 8.8 12 8.8t1.913.787q.787.788.787 1.913t-.787 1.912q-.788.788-1.913.788Zm0 4.8q-3.65 0-6.65-2.038-3-2.037-4.35-5.462 1.35-3.425 4.35-5.463Q8.35 4 12 4q3.65 0 6.65 2.037 3 2.038 4.35 5.463-1.35 3.425-4.35 5.462Q15.65 19 12 19Z"/></svg>` }));
-      labelEl.append(createEl("i", { role: "button", ariaLabel: "Hide password", className: "t007-input-icon t007-input-password-hidden-icon", innerHTML: passwordHiddenIcon || `<svg width="24" height="24"><path fill="rgba(0,0,0,.54)" d="m19.8 22.6-4.2-4.15q-.875.275-1.762.413Q12.95 19 12 19q-3.775 0-6.725-2.087Q2.325 14.825 1 11.5q.525-1.325 1.325-2.463Q3.125 7.9 4.15 7L1.4 4.2l1.4-1.4 18.4 18.4ZM12 16q.275 0 .512-.025.238-.025.513-.1l-5.4-5.4q-.075.275-.1.513-.025.237-.025.512 0 1.875 1.312 3.188Q10.125 16 12 16Zm7.3.45-3.175-3.15q.175-.425.275-.862.1-.438.1-.938 0-1.875-1.312-3.188Q13.875 7 12 7q-.5 0-.938.1-.437.1-.862.3L7.65 4.85q1.025-.425 2.1-.638Q10.825 4 12 4q3.775 0 6.725 2.087Q21.675 8.175 23 11.5q-.575 1.475-1.512 2.738Q20.55 15.5 19.3 16.45Zm-4.625-4.6-3-3q.7-.125 1.288.112.587.238 1.012.688.425.45.613 1.038.187.587.087 1.162Z"/></svg>` }));
-    }
+    if (type === "password" && eyeToggler)
+      labelEl.append(
+        createEl("i", { role: "button", ariaLabel: "Show password", className: "t007-input-icon t007-input-password-visible-icon", innerHTML: passwordVisibleIcon || `<svg width="24" height="24"><path fill="rgba(0,0,0,.54)" d="M12 16q1.875 0 3.188-1.312Q16.5 13.375 16.5 11.5q0-1.875-1.312-3.188Q13.875 7 12 7q-1.875 0-3.188 1.312Q7.5 9.625 7.5 11.5q0 1.875 1.312 3.188Q10.125 16 12 16Zm0-1.8q-1.125 0-1.912-.788Q9.3 12.625 9.3 11.5t.788-1.913Q10.875 8.8 12 8.8t1.913.787q.787.788.787 1.913t-.787 1.912q-.788.788-1.913.788Zm0 4.8q-3.65 0-6.65-2.038-3-2.037-4.35-5.462 1.35-3.425 4.35-5.463Q8.35 4 12 4q3.65 0 6.65 2.037 3 2.038 4.35 5.463-1.35 3.425-4.35 5.462Q15.65 19 12 19Z"/></svg>` }),
+        createEl("i", { role: "button", ariaLabel: "Hide password", className: "t007-input-icon t007-input-password-hidden-icon", innerHTML: passwordHiddenIcon || `<svg width="24" height="24"><path fill="rgba(0,0,0,.54)" d="m19.8 22.6-4.2-4.15q-.875.275-1.762.413Q12.95 19 12 19q-3.775 0-6.725-2.087Q2.325 14.825 1 11.5q.525-1.325 1.325-2.463Q3.125 7.9 4.15 7L1.4 4.2l1.4-1.4 18.4 18.4ZM12 16q.275 0 .512-.025.238-.025.513-.1l-5.4-5.4q-.075.275-.1.513-.025.237-.025.512 0 1.875 1.312 3.188Q10.125 16 12 16Zm7.3.45-3.175-3.15q.175-.425.275-.862.1-.438.1-.938 0-1.875-1.312-3.188Q13.875 7 12 7q-.5 0-.938.1-.437.1-.862.3L7.65 4.85q1.025-.425 2.1-.638Q10.825 4 12 4q3.775 0 6.725 2.087Q21.675 8.175 23 11.5q-.575 1.475-1.512 2.738Q20.55 15.5 19.3 16.45Zm-4.625-4.6-3-3q.7-.125 1.288.112.587.238 1.012.688.425.45.613 1.038.187.587.087 1.162Z"/></svg>` })
+      );
     if (helperText !== false) {
       const helperLine = createEl("div", { className: "t007-input-helper-line" }), helperWrapper = createEl("div", { className: "t007-input-helper-text-wrapper", tabIndex: "-1" });
       if (helperText.info) helperWrapper.append(createEl("p", { className: "t007-input-helper-text", textContent: helperText.info }, { violation: "none" }));
-      t007.FM?.violationKeys?.forEach((key) => helperText[key] && helperWrapper.append(createEl("p", { className: "t007-input-helper-text", textContent: helperText[key] }, { violation: key })));
-      helperLine.append(helperWrapper);
-      field2.append(helperLine);
+      t007.FM.violationKeys?.forEach((key) => helperText[key] && helperWrapper.append(createEl("p", { className: "t007-input-helper-text", textContent: helperText[key] }, { violation: key })));
+      helperLine.append(helperWrapper), field2.append(helperLine);
     }
     if (passwordMeter && type === "password") {
       const meter = createEl("div", { className: "t007-input-password-meter" }, { strengthLevel: "1" });
@@ -168,36 +167,26 @@ var formManager = {
     form.validateOnClient = validateFormOnClient;
     form.toggleGlobalError = toggleFormGlobalError;
     const fields = form.getElementsByClassName("t007-input-field"), inputs = form.getElementsByClassName("t007-input");
-    Array.from(fields).forEach(t007.FM.setUpField);
-    form.addEventListener("input", ({ target }) => {
-      t007.FM.toggleFilled(target);
-      validateInput(target);
-    });
+    Array.prototype.forEach.call(fields, t007.FM.setUpField);
+    form.addEventListener("input", ({ target }) => (t007.FM.toggleFilled(target), validateInput(target)));
     form.addEventListener("focusout", ({ target }) => validateInput(target, true));
     form.addEventListener("submit", async (e) => {
-      toggleSubmitLoader(true);
+      form.classList.toggle("t007-input-submit-loading", true);
       try {
         e.preventDefault();
         if (!validateFormOnClient()) return;
-        if (form.validateOnServer && !await form.validateOnServer()) {
-          toggleFormGlobalError(true);
-          form.addEventListener("input", () => toggleFormGlobalError(false), { once: true, useCapture: true });
-          return;
-        }
-        form.onSubmit ? form.onSubmit() : form.submit();
+        if (form.validateOnServer && !await form.validateOnServer()) return toggleFormGlobalError(true), form.addEventListener("input", () => toggleFormGlobalError(false), { once: true, useCapture: true });
+        form.onSubmit ? form.onSubmit(e) : form.submit();
       } catch (error) {
         console.error(error);
       }
-      toggleSubmitLoader(false);
+      form.classList.toggle("t007-input-submit-loading", false);
     });
-    function toggleSubmitLoader(bool) {
-      form.classList.toggle("t007-input-submit-loading", bool);
-    }
     function toggleError(input, bool, flag = false) {
       const field2 = input.closest(".t007-input-field"), floatingLabel = field2.querySelector(".t007-input-floating-label");
       if (bool && flag) {
         input.setAttribute("data-error", "");
-        floatingLabel?.classList.add("t007-input-shake");
+        floatingLabel?.classList.add("t007-input-shake"), setTimeout(() => floatingLabel?.classList.remove("t007-input-shake"), 520);
       } else if (!bool) input.removeAttribute("data-error");
       toggleHelper(input, input.hasAttribute("data-error"));
     }
@@ -205,28 +194,11 @@ var formManager = {
       const field2 = input.closest(".t007-input-field"), violation = t007.FM.violationKeys.find((violation2) => input.Validity?.[violation2] || input.validity[violation2]) ?? "", helper = field2.querySelector(`.t007-input-helper-text[data-violation="${violation}"]`), fallbackHelper = field2.querySelector(`.t007-input-helper-text[data-violation="auto"]`);
       input.closest(".t007-input-field").querySelectorAll(`.t007-input-helper-text:not([data-violation="${violation}"])`).forEach((helper2) => helper2?.classList.remove("t007-input-show"));
       if (helper) helper.classList.toggle("t007-input-show", bool);
-      else if (fallbackHelper) {
-        fallbackHelper.textContent = input.validationMessage;
-        fallbackHelper.classList.toggle("t007-input-show", bool);
-      }
-    }
-    function forceRevalidate(input) {
-      input.checkValidity();
-      input.dispatchEvent(new Event("input"));
+      else if (fallbackHelper) fallbackHelper.textContent = input.validationMessage, fallbackHelper.classList.toggle("t007-input-show", bool);
     }
     function updatePasswordMeter(input) {
       const passwordMeter = input.closest(".t007-input-field").querySelector(".t007-input-password-meter");
-      if (!passwordMeter) return;
-      const value = input.value?.trim();
-      let strengthLevel = 0;
-      if (value.length < Number(input.minLength ?? 0)) strengthLevel = 1;
-      else {
-        if (/[a-z]/.test(value)) strengthLevel++;
-        if (/[A-Z]/.test(value)) strengthLevel++;
-        if (/[0-9]/.test(value)) strengthLevel++;
-        if (/[\W_]/.test(value)) strengthLevel++;
-      }
-      passwordMeter.dataset.strengthLevel = strengthLevel;
+      if (passwordMeter) passwordMeter.dataset.strengthLevel = `${getStrengthLevel(input.value, Number(input.minLength ?? 0))}`;
     }
     function validateInput(input, flag = false) {
       if (form.dataset.globalError || !input?.classList.contains("t007-input")) return;
@@ -236,7 +208,7 @@ var formManager = {
         case "password":
           value = input.value?.trim();
           if (value === "") break;
-          const confirmPasswordInput = Array.from(inputs).find((input2) => (input2.custom ?? input2.getAttribute("custom")) === "confirm-password");
+          const confirmPasswordInput = Array.prototype.find.call(inputs, (input2) => (input2.custom ?? input2.getAttribute("custom")) === "confirm-password");
           if (!confirmPasswordInput) break;
           const confirmPasswordValue = confirmPasswordInput.value?.trim();
           confirmPasswordInput.setCustomValidity(value !== confirmPasswordValue ? "Both passwords do not match" : "");
@@ -245,7 +217,7 @@ var formManager = {
         case "confirm_password":
           value = input.value?.trim();
           if (value === "") break;
-          const passwordInput = Array.from(inputs).find((input2) => (input2.custom ?? input2.getAttribute("custom")) === "password");
+          const passwordInput = Array.prototype.find.call(inputs, (input2) => (input2.custom ?? input2.getAttribute("custom")) === "password");
           if (!passwordInput) break;
           const passwordValue = passwordInput.value?.trim();
           errorBool = value !== passwordValue;
@@ -254,21 +226,17 @@ var formManager = {
         case "onward_date":
           if (input.min) break;
           input.min = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
-          forceRevalidate(input);
+          input.checkValidity(), input.dispatchEvent(new Event("input"));
+          break;
+        case "past_date":
+          if (input.max) break;
+          input.max = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+          input.checkValidity(), input.dispatchEvent(new Event("input"));
           break;
       }
       if (input.type === "file") {
         input.Validity = {};
-        const { violation, message } = t007.FM.getFilesHelper(input.files ?? [], {
-          accept: input.accept,
-          multiple: input.multiple,
-          maxSize: input.maxSize ?? Number(input.getAttribute("maxsize")),
-          minSize: input.minSize ?? Number(input.getAttribute("minsize")),
-          maxTotalSize: input.maxTotalSize ?? Number(input.getAttribute("maxtotalsize")),
-          minTotalSize: input.minTotalSize ?? Number(input.getAttribute("mintotalsize")),
-          maxLength: input.maxLength ?? Number(input.getAttribute("maxlength")),
-          minLength: input.minLength ?? Number(input.getAttribute("minLength"))
-        });
+        const { violation, message } = t007.FM.getFilesHelper(input.files ?? [], { accept: input.accept, multiple: input.multiple, maxSize: input.maxSize ?? Number(input.getAttribute("maxsize")), minSize: input.minSize ?? Number(input.getAttribute("minsize")), maxTotalSize: input.maxTotalSize ?? Number(input.getAttribute("maxtotalsize")), minTotalSize: input.minTotalSize ?? Number(input.getAttribute("mintotalsize")), maxLength: input.maxLength ?? Number(input.getAttribute("maxlength")), minLength: input.minLength ?? Number(input.getAttribute("minLength")) });
         errorBool = !!message;
         input.setCustomValidity(message);
         if (violation) input.Validity[violation] = true;
@@ -277,18 +245,22 @@ var formManager = {
       toggleError(input, errorBool, flag);
       if (errorBool) return;
       if (input.type === "radio")
-        Array.from(inputs)?.filter((i) => i.name == input.name)?.forEach((radio) => toggleError(radio, errorBool, flag));
+        Array.prototype.forEach.call(
+          Array.prototype.filter.call(inputs, (i) => i.name == input.name),
+          (radio) => toggleError(radio, errorBool, flag)
+        );
     }
     function validateFormOnClient() {
-      Array.from(inputs).forEach((input) => validateInput(input, true));
+      Array.prototype.forEach.call(inputs, (input) => validateInput(input, true));
       form.querySelector("input:invalid")?.focus();
-      return Array.from(inputs).every((input) => input.checkValidity());
+      return Array.prototype.every.call(inputs, (input) => input.checkValidity());
     }
     function toggleFormGlobalError(bool) {
       form.toggleAttribute("data-global-error", bool);
       form.querySelectorAll(".t007-input-field").forEach((field2) => {
         field2.querySelector(".t007-input")?.toggleAttribute("data-error", bool);
-        if (bool) field2.querySelector(".t007-input-floating-label")?.classList.add("t007-input-shake");
+        const floatingLabel = field2.querySelector(".t007-input-floating-label");
+        floatingLabel?.classList.toggle("t007-input-shake", bool), bool && setTimeout(() => floatingLabel?.classList.remove("t007-input-shake"), 520);
       });
     }
   }

package/dist/react.d.ts

@@ -0,0 +1,139 @@
+import React from 'react';
+
+/** Browser date-like input types supported by input field helpers. */
+declare const dateTypes: readonly ["date", "time", "datetime-local", "month"];
+/** Union of all supported native date-like input types. */
+type DateType = (typeof dateTypes)[number];
+
+/** React change event alias used by input helpers. */
+type CE<T> = React.ChangeEvent<T>;
+/** React input event alias used by input helpers. */
+type IE<T> = React.InputEvent<T>;
+/** React change handler alias used by input helpers. */
+type CEH<T> = React.ChangeEventHandler<T>;
+/** React input handler alias used by input helpers. */
+type IEH<T> = React.InputEventHandler<T>;
+
+/** Base input element attributes used by non-select/non-textarea fields. */
+type InputAttributes = React.InputHTMLAttributes<HTMLInputElement>;
+/** Select element attributes used by select fields. */
+type SelectAttributes = React.SelectHTMLAttributes<HTMLSelectElement>;
+/** Textarea element attributes used by textarea fields. */
+type TextareaAttributes = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+/** Union type for all input elements */
+type t007InputElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+/**  Define all possible `ValidityState` keys mapped to string messages */
+interface HelperTextMap extends Partial<Record<keyof ValidityState, string>> {
+  /** Informational helper text shown when there is no validation violation. */
+  info?: string;
+}
+
+interface BaseProps {
+  /** Wrap the field in its own container. */
+  isWrapper?: boolean;
+  /** Visible label text. */
+  label?: React.ReactNode;
+  /** Custom tokens for feature presets. */
+  custom?: "confirm_password" | "password" | "onward_date" | "past_date";
+  /** Class applied to the root field control. */
+  fieldClassName?: string;
+  /** Helper text shown under the field. */
+  helperText?: HelperTextMap | boolean;
+  /**  External resolver error text. When provided, the field is forced into error visuals even without native validity violations. */
+  error?: string;
+  /** Start icon rendered inside the field control. */
+  // startIcon?: React.ReactNode;
+  /** End icon rendered inside the field control. */
+  endIcon?: React.ReactNode;
+  // onFlagError?: (args: { violation: keyof ValidityState | null; helper: string }) => void;
+}
+type PasswordInputProps = BaseProps & InputAttributes & PasswordInputAddon;
+type FileInputProps = BaseProps & InputAttributes & FileInputAddon;
+type CheckboxInputProps = BaseProps & InputAttributes & CheckboxInputAddon;
+type DateInputProps = BaseProps & InputAttributes & DateInputAddon;
+type GenericInputProps = BaseProps & InputAttributes & { type?: Exclude<React.HTMLInputTypeAttribute, "password" | "file" | "checkbox" | DateType> };
+type TextareaElementProps = BaseProps & TextareaAttributes & { type: "textarea" };
+type SelectElementProps = BaseProps & SelectAttributes & SelectElementAddon;
+
+/** Union type for all input props, discriminated by the `type` property. */
+type InputProps = PasswordInputProps | FileInputProps | CheckboxInputProps | DateInputProps | GenericInputProps | TextareaElementProps | SelectElementProps;
+
+type WordsInputBaseProps = InputProps & {
+  /** Maximum count of words allowed. */
+  maxCount?: number;
+  /** Phrase template with %left%, %max%, %count% */
+  showCount?: string;
+  /** Whether to send the original change event instead of the plain string value. */
+  emitEventOnChange?: boolean;
+};
+type WordsInputStrictModeProps = WordsInputBaseProps & {
+  /** Whether to allow overflow of the word count. */
+  allowOverflow?: false;
+};
+type WordsInputLenientModeProps = WordsInputBaseProps & {
+  /** Whether to allow overflow of the word count. */
+  allowOverflow: true;
+  /** Helper text shown when the word count is exceeded. */
+  errorHelperText?: string;
+};
+
+/** Union type for all words input props. */
+type WordsInputProps = WordsInputStrictModeProps | WordsInputLenientModeProps;
+
+// Addon types for field options
+
+interface PasswordInputAddon {
+  type: "password";
+  /** Show the password visibility toggler. */
+  eyeToggler?: boolean;
+  /** Enable the password strength meter. */
+  passwordMeter?: boolean;
+  passwordVisibleIcon?: React.ReactNode;
+  passwordHiddenIcon?: React.ReactNode;
+}
+interface FileInputAddon {
+  type: "file";
+  /** Maximum value length or count. */
+  maxSize?: number;
+  /** Minimum value length or count. */
+  minSize?: number;
+  /** Maximum total size allowed across the field value. */
+  maxTotalSize?: number;
+  /** Minimum total size allowed across the field value. */
+  minTotalSize?: number;
+}
+interface CheckboxInputAddon {
+  type: "checkbox";
+  /** Whether the checkbox is a multi-state checkbox. */
+  indeterminate?: boolean;
+}
+interface DateInputAddon {
+  type: DateType;
+  /** Native icon rendered by the browser control. */
+  nativeIcon?: React.ReactNode;
+}
+interface SelectElementAddon {
+  type: "select";
+  /** Options used by select-like fields. */
+  options?: string[] | readonly string[] | Array<{ value: string; option: string }>;
+}
+
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<t007InputElement>>;
+
+declare const WordsInput: React.ForwardRefExoticComponent<WordsInputProps & React.RefAttributes<t007InputElement>>;
+
+/**
+ * FormManager hook to validate form-level inputs, does not force a form setup though.
+ * @param onSubmit Optional callback invoked after successful validation on submit.
+ * @param formRef Optional form ref; when omitted, the form passed to handlers is used.
+ * @returns handleSubmit: submit handler to attach to form elements, validate: function to trigger validation manually, fireInput: utility to trigger input events on fields.
+ */
+declare function useFormManager(onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void, formRef?: React.RefObject<HTMLElement>): {
+    handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+    validate: (formEl?: HTMLElement) => boolean;
+    fireInput: (el?: t007InputElement | null) => boolean | undefined;
+};
+
+export { type BaseProps, type CE, type CEH, type HelperTextMap, type IE, type IEH, Input, type InputProps, WordsInput, type WordsInputBaseProps, type WordsInputLenientModeProps, type WordsInputProps, type WordsInputStrictModeProps, type t007InputElement, useFormManager };