@t007/input 0.0.2 → 0.0.4

package/dist/index.global.js

@@ -1,6 +1,5 @@
-(function () {
-  'use strict';
-
+"use strict";
+(() => {
   // ../utils/dist/index.js
   function isSameURL(src1, src2) {
     if (typeof src1 !== "string" || typeof src2 !== "string" || !src1 || !src2) return false;
@@ -11,14 +10,20 @@
       return src1.replace(/\\/g, "/").split("?")[0].trim() === src2.replace(/\\/g, "/").split("?")[0].trim();
     }
   }
-  function createEl(tag, props = {}, dataset = {}, styles = {}) {
-    return assignEl(tag ? document?.createElement(tag) : void 0, props, dataset, styles) ?? null;
+  function createEl(tag, props, dataset, styles, el = tag ? document?.createElement(tag) : null) {
+    return assignEl(el, props, dataset, styles), el;
   }
-  function assignEl(el, props = {}, dataset = {}, styles = {}) {
+  function assignEl(el, props, dataset, styles) {
     if (!el) return;
-    for (const k of Object.keys(props)) if (props[k] !== void 0) el[k] = props[k];
-    for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) el.dataset[k] = String(dataset[k]);
-    for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
+    if (props) {
+      for (const k of Object.keys(props)) if (props[k] !== void 0) el[k] = props[k];
+    }
+    if (dataset) {
+      for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) el.dataset[k] = String(dataset[k]);
+    }
+    if (styles) {
+      for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
+    }
   }
   function loadResource(src, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
     w.t007._resourceCache ??= {};
@@ -121,13 +126,13 @@
     window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
     window.T007_INPUT_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest`;
     window.T007_DIALOG_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`;
-    window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/dist/style.css`;
-    window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/style.css`;
-    window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/style.css`;
+    window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/style.css`;
+    window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/style.css`;
+    window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/style.css`;
   }
 
   // src/index.js
-  var T007_Form_Manager = {
+  var formManager = {
     forms: document.getElementsByClassName("t007-input-form"),
     violationKeys: ["valueMissing", "typeMismatch", "patternMismatch", "stepMismatch", "tooShort", "tooLong", "rangeUnderflow", "rangeOverflow", "badInput", "customError"],
     init() {
@@ -139,7 +144,7 @@
         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;
-            for (const field of [...node.querySelector(".t007-input-field") ? node.querySelectorAll(".t007-input-field") : [node]]) t007.FM.setUpField(field);
+            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 });
@@ -176,14 +181,14 @@
     },
     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(field) {
-      const helperTextWrapper = field?.querySelector(".t007-input-helper-text-wrapper");
+    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" }));
     },
-    setFieldListeners(field) {
-      if (!field) return;
-      const input = field.querySelector(".t007-input"), floatingLabel = field.querySelector(".t007-input-floating-label"), eyeOpen = field.querySelector(".t007-input-password-visible-icon"), eyeClosed = field.querySelector(".t007-input-password-hidden-icon");
+    setFieldListeners(field2) {
+      if (!field2) return;
+      const input = field2.querySelector(".t007-input"), floatingLabel = field2.querySelector(".t007-input-floating-label"), eyeOpen = field2.querySelector(".t007-input-password-visible-icon"), eyeClosed = field2.querySelector(".t007-input-password-hidden-icon");
       if (input.type === "file")
         input.addEventListener("input", async () => {
           const file = input.files?.[0], img = new Image();
@@ -221,18 +226,18 @@
         });
       if (floatingLabel) floatingLabel.ontransitionend = () => floatingLabel.classList.remove("t007-input-shake");
       if (eyeOpen && eyeClosed) eyeOpen.onclick = eyeClosed.onclick = () => t007.FM.togglePasswordType(input);
-      initScrollAssist(field.querySelector(".t007-input-helper-text-wrapper"), { vertical: false });
+      initScrollAssist(field2.querySelector(".t007-input-helper-text-wrapper"), { vertical: false });
     },
-    setUpField(field) {
-      if (field.dataset.setUp) return;
-      t007.FM.toggleFilled(field.querySelector(".t007-input"));
-      t007.FM.setFallbackHelper(field);
-      t007.FM.setFieldListeners(field);
-      field.dataset.setUp = "true";
+    setUpField(field2) {
+      if (field2.dataset.setUp) return;
+      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 }) {
-      const isSelect = type === "select", isTextArea = type === "textarea", isCheckboxOrRadio = type === "checkbox" || type === "radio", field = createEl("div", { className: `t007-input-field${isWrapper ? " t007-input-is-wrapper" : ""}${indeterminate ? " t007-input-indeterminate" : ""}${!!nativeIcon ? " t007-input-icon-override" : ""}${helperText === false ? " t007-input-no-helper" : ""}${fieldClassName ? ` ${fieldClassName}` : ""}` }), labelEl = createEl("label", { className: isCheckboxOrRadio ? `t007-input-${type}-wrapper` : "t007-input-wrapper" });
-      field.append(labelEl);
+      const isSelect = type === "select", isTextArea = type === "textarea", isCheckboxOrRadio = type === "checkbox" || type === "radio", field2 = createEl("div", { className: `t007-input-field${isWrapper ? " t007-input-is-wrapper" : ""}${indeterminate ? " t007-input-indeterminate" : ""}${!!nativeIcon ? " t007-input-icon-override" : ""}${helperText === false ? " t007-input-no-helper" : ""}${fieldClassName ? ` ${fieldClassName}` : ""}` }), labelEl = createEl("label", { className: isCheckboxOrRadio ? `t007-input-${type}-wrapper` : "t007-input-wrapper" });
+      field2.append(labelEl);
       if (isCheckboxOrRadio) {
         labelEl.innerHTML = `
         <span class="t007-input-${type}-box">
@@ -251,7 +256,7 @@
       `;
         labelEl.append(outline);
       }
-      const inputEl = field.inputEl = createEl(isTextArea ? "textarea" : isSelect ? "select" : "input", { className: `t007-input${className ? ` ${className}` : ""}`, placeholder });
+      const inputEl = field2.inputEl = createEl(isTextArea ? "textarea" : isSelect ? "select" : "input", { className: `t007-input${className ? ` ${className}` : ""}`, placeholder });
       if (isSelect && Array.isArray(options)) inputEl.innerHTML = options.map((opt) => typeof opt === "string" ? `<option value="${opt}">${opt}</option>` : `<option value="${opt.value}">${opt.option}</option>`).join("");
       if (!isSelect && !isTextArea) inputEl.type = type;
       if (custom) inputEl.setAttribute("custom", custom);
@@ -273,7 +278,7 @@
         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);
-        field.append(helperLine);
+        field2.append(helperLine);
       }
       if (passwordMeter && type === "password") {
         const meter = createEl("div", { className: "t007-input-password-meter" }, { strengthLevel: "1" });
@@ -285,9 +290,9 @@
           <div class="t007-input-p-very-strong"></div>
         </div>
       `;
-        field.append(meter);
+        field2.append(meter);
       }
-      return field;
+      return field2;
     },
     handleFormValidation(form) {
       if (!form?.classList.contains("t007-input-form") || form.dataset?.isValidating) return;
@@ -321,7 +326,7 @@
         form.classList.toggle("t007-input-submit-loading", bool);
       }
       function toggleError(input, bool, flag = false) {
-        const field = input.closest(".t007-input-field"), floatingLabel = field.querySelector(".t007-input-floating-label");
+        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");
@@ -329,7 +334,7 @@
         toggleHelper(input, input.hasAttribute("data-error"));
       }
       function toggleHelper(input, bool) {
-        const field = input.closest(".t007-input-field"), violation = t007.FM.violationKeys.find((violation2) => input.Validity?.[violation2] || input.validity[violation2]) ?? "", helper = field.querySelector(`.t007-input-helper-text[data-violation="${violation}"]`), fallbackHelper = field.querySelector(`.t007-input-helper-text[data-violation="auto"]`);
+        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) {
@@ -413,22 +418,22 @@
       }
       function toggleFormGlobalError(bool) {
         form.toggleAttribute("data-global-error", bool);
-        form.querySelectorAll(".t007-input-field").forEach((field) => {
-          field.querySelector(".t007-input")?.toggleAttribute("data-error", bool);
-          if (bool) field.querySelector(".t007-input-floating-label")?.classList.add("t007-input-shake");
+        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");
         });
       }
     }
   };
+  var { field, handleFormValidation } = formManager;
   if (typeof window !== "undefined") {
-    t007.FM = T007_Form_Manager;
-    t007.field = t007.FM.field;
-    t007.handleFormValidation = t007.FM.handleFormValidation;
+    t007.FM = formManager;
+    t007.field = field;
+    t007.handleFormValidation = handleFormValidation;
     window.field ??= t007.field;
     window.handleFormValidation ??= t007.handleFormValidation;
     console.log("%cT007 Input helpers attached to window!", "color: darkturquoise");
     loadResource(T007_INPUT_CSS_SRC);
     t007.FM.init();
   }
-
 })();

package/dist/index.js

@@ -1,130 +1,6 @@
-// ../utils/dist/index.js
-function isSameURL(src1, src2) {
-  if (typeof src1 !== "string" || typeof src2 !== "string" || !src1 || !src2) return false;
-  try {
-    const u1 = new URL(src1, window.location.href), u2 = new URL(src2, window.location.href);
-    return decodeURIComponent(u1.origin + u1.pathname) === decodeURIComponent(u2.origin + u2.pathname);
-  } catch {
-    return src1.replace(/\\/g, "/").split("?")[0].trim() === src2.replace(/\\/g, "/").split("?")[0].trim();
-  }
-}
-function createEl(tag, props = {}, dataset = {}, styles = {}) {
-  return assignEl(tag ? document?.createElement(tag) : void 0, props, dataset, styles) ?? null;
-}
-function assignEl(el, props = {}, dataset = {}, styles = {}) {
-  if (!el) return;
-  for (const k of Object.keys(props)) if (props[k] !== void 0) el[k] = props[k];
-  for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) el.dataset[k] = String(dataset[k]);
-  for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
-}
-function loadResource(src, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
-  w.t007._resourceCache ??= {};
-  if (w.t007._resourceCache[src]) return w.t007._resourceCache[src];
-  const existing = type === "script" ? Array.prototype.find.call(w.document.scripts, (s) => isSameURL(s.src, src)) : type === "style" ? Array.prototype.find.call(w.document.styleSheets, (s) => isSameURL(s.href, src)) : null;
-  if (existing) return w.t007._resourceCache[src] = Promise.resolve(existing);
-  w.t007._resourceCache[src] = new Promise((resolve, reject) => {
-    (function tryLoad(remaining, el) {
-      const onerror = () => {
-        el?.remove?.();
-        if (remaining > 1) {
-          setTimeout(tryLoad, 1e3, remaining - 1);
-          console.warn(`Retrying ${type} load (${attempts - remaining + 1}): ${src}...`);
-        } else {
-          delete w.t007._resourceCache[src];
-          reject(new Error(`${type} load failed after ${attempts} attempts: ${src}`));
-        }
-      };
-      const url = retryKey && remaining < attempts ? `${src}${src.includes("?") ? "&" : "?"}_${retryKey}=${Date.now()}` : src;
-      if (type === "script") w.document.body.append(el = createEl("script", { src: url, type: module ? "module" : "text/javascript", crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
-      else if (type === "style") w.document.head.append(el = createEl("link", { rel: "stylesheet", href: url, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
-      else reject(new Error(`Unsupported resource type: ${type}`));
-    })(attempts);
-  });
-  return w.t007._resourceCache[src];
-}
-function initScrollAssist(el, { pxPerSecond = 80, assistClassName = "tmg-video-controls-scroll-assist", vertical = true, horizontal = true } = {}) {
-  t007._scrollers ??= /* @__PURE__ */ new WeakMap();
-  t007._scroller_r_observer ??= new ResizeObserver((entries) => entries.forEach(({ target }) => t007._scrollers.get(target)?.update()));
-  t007._scroller_m_observer ??= new MutationObserver((entries) => {
-    const els = /* @__PURE__ */ new Set();
-    for (const entry of entries) {
-      let node = entry.target instanceof Element ? entry.target : null;
-      while (node && !t007._scrollers.has(node)) node = node.parentElement;
-      if (node) els.add(node);
-    }
-    for (const el2 of els) t007._scrollers.get(el2)?.update();
-  });
-  const parent = el?.parentElement;
-  if (!parent || t007._scrollers.has(el)) return;
-  const assist = {};
-  let scrollId = null, last = performance.now(), assistWidth = 20, assistHeight = 20;
-  const update = () => {
-    const hasInteractive = !!parent.querySelector('button, a[href], input, select, textarea, [contenteditable="true"], [tabindex]:not([tabindex="-1"])');
-    if (horizontal) {
-      const w = assist.left?.offsetWidth || assistWidth, check = hasInteractive ? el.clientWidth < w * 2 : false;
-      assist.left.style.display = check ? "none" : el.scrollLeft > 0 ? "block" : "none";
-      assist.right.style.display = check ? "none" : el.scrollLeft + el.clientWidth < el.scrollWidth - 1 ? "block" : "none";
-      assistWidth = w;
-    }
-    if (vertical) {
-      const h = assist.up?.offsetHeight || assistHeight, check = hasInteractive ? el.clientHeight < h * 2 : false;
-      assist.up.style.display = check ? "none" : el.scrollTop > 0 ? "block" : "none";
-      assist.down.style.display = check ? "none" : el.scrollTop + el.clientHeight < el.scrollHeight - 1 ? "block" : "none";
-      assistHeight = h;
-    }
-  };
-  const scroll = (dir) => {
-    const frame = () => {
-      const now = performance.now(), dt = now - last;
-      last = now;
-      const d = pxPerSecond * dt / 1e3;
-      if (dir === "left") el.scrollLeft = Math.max(0, el.scrollLeft - d);
-      if (dir === "right") el.scrollLeft = Math.min(el.scrollWidth - el.clientWidth, el.scrollLeft + d);
-      if (dir === "up") el.scrollTop = Math.max(0, el.scrollTop - d);
-      if (dir === "down") el.scrollTop = Math.min(el.scrollHeight - el.clientHeight, el.scrollTop + d);
-      scrollId = requestAnimationFrame(frame);
-    };
-    last = performance.now();
-    frame();
-  };
-  const stop = () => (cancelAnimationFrame(scrollId ?? 0), scrollId = null);
-  const addAssist = (dir) => {
-    const div = createEl("div", { className: assistClassName }, { scrollDirection: dir }, { display: "none" });
-    if (!div) return;
-    ["pointerenter", "dragenter"].forEach((evt) => div.addEventListener(evt, () => scroll(dir)));
-    ["pointerleave", "pointerup", "pointercancel", "dragleave", "dragend"].forEach((evt) => div.addEventListener(evt, stop));
-    dir === "left" || dir === "up" ? parent.insertBefore(div, el) : parent.append(div);
-    assist[dir] = div;
-  };
-  if (horizontal) ["left", "right"].forEach(addAssist);
-  if (vertical) ["up", "down"].forEach(addAssist);
-  el.addEventListener("scroll", update);
-  t007._scroller_r_observer.observe(el);
-  t007._scroller_m_observer.observe(el, { childList: true, subtree: true, characterData: true });
-  t007._scrollers.set(el, {
-    update,
-    destroy() {
-      stop();
-      el.removeEventListener("scroll", update);
-      t007._scroller_r_observer.unobserve(el);
-      t007._scrollers.delete(el);
-      Object.values(assist).forEach((a) => a.remove());
-    }
-  });
-  return update(), t007._scrollers.get(el);
-}
-if (typeof window !== "undefined") {
-  window.t007 ??= {};
-  window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
-  window.T007_INPUT_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest`;
-  window.T007_DIALOG_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`;
-  window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/dist/style.css`;
-  window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/style.css`;
-  window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/style.css`;
-}
-
 // src/index.js
-var T007_Form_Manager = {
+import { createEl, loadResource, initScrollAssist } from "@t007/utils";
+var formManager = {
   forms: document.getElementsByClassName("t007-input-form"),
   violationKeys: ["valueMissing", "typeMismatch", "patternMismatch", "stepMismatch", "tooShort", "tooLong", "rangeUnderflow", "rangeOverflow", "badInput", "customError"],
   init() {
@@ -136,7 +12,7 @@ var T007_Form_Manager = {
       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;
-          for (const field of [...node.querySelector(".t007-input-field") ? node.querySelectorAll(".t007-input-field") : [node]]) t007.FM.setUpField(field);
+          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 });
@@ -173,14 +49,14 @@ var T007_Form_Manager = {
   },
   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(field) {
-    const helperTextWrapper = field?.querySelector(".t007-input-helper-text-wrapper");
+  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" }));
   },
-  setFieldListeners(field) {
-    if (!field) return;
-    const input = field.querySelector(".t007-input"), floatingLabel = field.querySelector(".t007-input-floating-label"), eyeOpen = field.querySelector(".t007-input-password-visible-icon"), eyeClosed = field.querySelector(".t007-input-password-hidden-icon");
+  setFieldListeners(field2) {
+    if (!field2) return;
+    const input = field2.querySelector(".t007-input"), floatingLabel = field2.querySelector(".t007-input-floating-label"), eyeOpen = field2.querySelector(".t007-input-password-visible-icon"), eyeClosed = field2.querySelector(".t007-input-password-hidden-icon");
     if (input.type === "file")
       input.addEventListener("input", async () => {
         const file = input.files?.[0], img = new Image();
@@ -218,18 +94,18 @@ var T007_Form_Manager = {
       });
     if (floatingLabel) floatingLabel.ontransitionend = () => floatingLabel.classList.remove("t007-input-shake");
     if (eyeOpen && eyeClosed) eyeOpen.onclick = eyeClosed.onclick = () => t007.FM.togglePasswordType(input);
-    initScrollAssist(field.querySelector(".t007-input-helper-text-wrapper"), { vertical: false });
+    initScrollAssist(field2.querySelector(".t007-input-helper-text-wrapper"), { vertical: false });
   },
-  setUpField(field) {
-    if (field.dataset.setUp) return;
-    t007.FM.toggleFilled(field.querySelector(".t007-input"));
-    t007.FM.setFallbackHelper(field);
-    t007.FM.setFieldListeners(field);
-    field.dataset.setUp = "true";
+  setUpField(field2) {
+    if (field2.dataset.setUp) return;
+    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 }) {
-    const isSelect = type === "select", isTextArea = type === "textarea", isCheckboxOrRadio = type === "checkbox" || type === "radio", field = createEl("div", { className: `t007-input-field${isWrapper ? " t007-input-is-wrapper" : ""}${indeterminate ? " t007-input-indeterminate" : ""}${!!nativeIcon ? " t007-input-icon-override" : ""}${helperText === false ? " t007-input-no-helper" : ""}${fieldClassName ? ` ${fieldClassName}` : ""}` }), labelEl = createEl("label", { className: isCheckboxOrRadio ? `t007-input-${type}-wrapper` : "t007-input-wrapper" });
-    field.append(labelEl);
+    const isSelect = type === "select", isTextArea = type === "textarea", isCheckboxOrRadio = type === "checkbox" || type === "radio", field2 = createEl("div", { className: `t007-input-field${isWrapper ? " t007-input-is-wrapper" : ""}${indeterminate ? " t007-input-indeterminate" : ""}${!!nativeIcon ? " t007-input-icon-override" : ""}${helperText === false ? " t007-input-no-helper" : ""}${fieldClassName ? ` ${fieldClassName}` : ""}` }), labelEl = createEl("label", { className: isCheckboxOrRadio ? `t007-input-${type}-wrapper` : "t007-input-wrapper" });
+    field2.append(labelEl);
     if (isCheckboxOrRadio) {
       labelEl.innerHTML = `
         <span class="t007-input-${type}-box">
@@ -248,7 +124,7 @@ var T007_Form_Manager = {
       `;
       labelEl.append(outline);
     }
-    const inputEl = field.inputEl = createEl(isTextArea ? "textarea" : isSelect ? "select" : "input", { className: `t007-input${className ? ` ${className}` : ""}`, placeholder });
+    const inputEl = field2.inputEl = createEl(isTextArea ? "textarea" : isSelect ? "select" : "input", { className: `t007-input${className ? ` ${className}` : ""}`, placeholder });
     if (isSelect && Array.isArray(options)) inputEl.innerHTML = options.map((opt) => typeof opt === "string" ? `<option value="${opt}">${opt}</option>` : `<option value="${opt.value}">${opt.option}</option>`).join("");
     if (!isSelect && !isTextArea) inputEl.type = type;
     if (custom) inputEl.setAttribute("custom", custom);
@@ -270,7 +146,7 @@ var T007_Form_Manager = {
       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);
-      field.append(helperLine);
+      field2.append(helperLine);
     }
     if (passwordMeter && type === "password") {
       const meter = createEl("div", { className: "t007-input-password-meter" }, { strengthLevel: "1" });
@@ -282,9 +158,9 @@ var T007_Form_Manager = {
           <div class="t007-input-p-very-strong"></div>
         </div>
       `;
-      field.append(meter);
+      field2.append(meter);
     }
-    return field;
+    return field2;
   },
   handleFormValidation(form) {
     if (!form?.classList.contains("t007-input-form") || form.dataset?.isValidating) return;
@@ -318,7 +194,7 @@ var T007_Form_Manager = {
       form.classList.toggle("t007-input-submit-loading", bool);
     }
     function toggleError(input, bool, flag = false) {
-      const field = input.closest(".t007-input-field"), floatingLabel = field.querySelector(".t007-input-floating-label");
+      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");
@@ -326,7 +202,7 @@ var T007_Form_Manager = {
       toggleHelper(input, input.hasAttribute("data-error"));
     }
     function toggleHelper(input, bool) {
-      const field = input.closest(".t007-input-field"), violation = t007.FM.violationKeys.find((violation2) => input.Validity?.[violation2] || input.validity[violation2]) ?? "", helper = field.querySelector(`.t007-input-helper-text[data-violation="${violation}"]`), fallbackHelper = field.querySelector(`.t007-input-helper-text[data-violation="auto"]`);
+      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) {
@@ -410,20 +286,26 @@ var T007_Form_Manager = {
     }
     function toggleFormGlobalError(bool) {
       form.toggleAttribute("data-global-error", bool);
-      form.querySelectorAll(".t007-input-field").forEach((field) => {
-        field.querySelector(".t007-input")?.toggleAttribute("data-error", bool);
-        if (bool) field.querySelector(".t007-input-floating-label")?.classList.add("t007-input-shake");
+      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");
       });
     }
   }
 };
+var { field, handleFormValidation } = formManager;
 if (typeof window !== "undefined") {
-  t007.FM = T007_Form_Manager;
-  t007.field = t007.FM.field;
-  t007.handleFormValidation = t007.FM.handleFormValidation;
+  t007.FM = formManager;
+  t007.field = field;
+  t007.handleFormValidation = handleFormValidation;
   window.field ??= t007.field;
   window.handleFormValidation ??= t007.handleFormValidation;
   console.log("%cT007 Input helpers attached to window!", "color: darkturquoise");
   loadResource(T007_INPUT_CSS_SRC);
   t007.FM.init();
 }
+export {
+  field,
+  formManager,
+  handleFormValidation
+};

package/dist/standalone.js

@@ -0,0 +1,441 @@
+// ../utils/dist/index.js
+function isSameURL(src1, src2) {
+  if (typeof src1 !== "string" || typeof src2 !== "string" || !src1 || !src2) return false;
+  try {
+    const u1 = new URL(src1, window.location.href), u2 = new URL(src2, window.location.href);
+    return decodeURIComponent(u1.origin + u1.pathname) === decodeURIComponent(u2.origin + u2.pathname);
+  } catch {
+    return src1.replace(/\\/g, "/").split("?")[0].trim() === src2.replace(/\\/g, "/").split("?")[0].trim();
+  }
+}
+function createEl(tag, props, dataset, styles, el = tag ? document?.createElement(tag) : null) {
+  return assignEl(el, props, dataset, styles), el;
+}
+function assignEl(el, props, dataset, styles) {
+  if (!el) return;
+  if (props) {
+    for (const k of Object.keys(props)) if (props[k] !== void 0) el[k] = props[k];
+  }
+  if (dataset) {
+    for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) el.dataset[k] = String(dataset[k]);
+  }
+  if (styles) {
+    for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
+  }
+}
+function loadResource(src, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
+  w.t007._resourceCache ??= {};
+  if (w.t007._resourceCache[src]) return w.t007._resourceCache[src];
+  const existing = type === "script" ? Array.prototype.find.call(w.document.scripts, (s) => isSameURL(s.src, src)) : type === "style" ? Array.prototype.find.call(w.document.styleSheets, (s) => isSameURL(s.href, src)) : null;
+  if (existing) return w.t007._resourceCache[src] = Promise.resolve(existing);
+  w.t007._resourceCache[src] = new Promise((resolve, reject) => {
+    (function tryLoad(remaining, el) {
+      const onerror = () => {
+        el?.remove?.();
+        if (remaining > 1) {
+          setTimeout(tryLoad, 1e3, remaining - 1);
+          console.warn(`Retrying ${type} load (${attempts - remaining + 1}): ${src}...`);
+        } else {
+          delete w.t007._resourceCache[src];
+          reject(new Error(`${type} load failed after ${attempts} attempts: ${src}`));
+        }
+      };
+      const url = retryKey && remaining < attempts ? `${src}${src.includes("?") ? "&" : "?"}_${retryKey}=${Date.now()}` : src;
+      if (type === "script") w.document.body.append(el = createEl("script", { src: url, type: module ? "module" : "text/javascript", crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
+      else if (type === "style") w.document.head.append(el = createEl("link", { rel: "stylesheet", href: url, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, onload: () => resolve(el), onerror }) || "");
+      else reject(new Error(`Unsupported resource type: ${type}`));
+    })(attempts);
+  });
+  return w.t007._resourceCache[src];
+}
+function initScrollAssist(el, { pxPerSecond = 80, assistClassName = "tmg-video-controls-scroll-assist", vertical = true, horizontal = true } = {}) {
+  t007._scrollers ??= /* @__PURE__ */ new WeakMap();
+  t007._scroller_r_observer ??= new ResizeObserver((entries) => entries.forEach(({ target }) => t007._scrollers.get(target)?.update()));
+  t007._scroller_m_observer ??= new MutationObserver((entries) => {
+    const els = /* @__PURE__ */ new Set();
+    for (const entry of entries) {
+      let node = entry.target instanceof Element ? entry.target : null;
+      while (node && !t007._scrollers.has(node)) node = node.parentElement;
+      if (node) els.add(node);
+    }
+    for (const el2 of els) t007._scrollers.get(el2)?.update();
+  });
+  const parent = el?.parentElement;
+  if (!parent || t007._scrollers.has(el)) return;
+  const assist = {};
+  let scrollId = null, last = performance.now(), assistWidth = 20, assistHeight = 20;
+  const update = () => {
+    const hasInteractive = !!parent.querySelector('button, a[href], input, select, textarea, [contenteditable="true"], [tabindex]:not([tabindex="-1"])');
+    if (horizontal) {
+      const w = assist.left?.offsetWidth || assistWidth, check = hasInteractive ? el.clientWidth < w * 2 : false;
+      assist.left.style.display = check ? "none" : el.scrollLeft > 0 ? "block" : "none";
+      assist.right.style.display = check ? "none" : el.scrollLeft + el.clientWidth < el.scrollWidth - 1 ? "block" : "none";
+      assistWidth = w;
+    }
+    if (vertical) {
+      const h = assist.up?.offsetHeight || assistHeight, check = hasInteractive ? el.clientHeight < h * 2 : false;
+      assist.up.style.display = check ? "none" : el.scrollTop > 0 ? "block" : "none";
+      assist.down.style.display = check ? "none" : el.scrollTop + el.clientHeight < el.scrollHeight - 1 ? "block" : "none";
+      assistHeight = h;
+    }
+  };
+  const scroll = (dir) => {
+    const frame = () => {
+      const now = performance.now(), dt = now - last;
+      last = now;
+      const d = pxPerSecond * dt / 1e3;
+      if (dir === "left") el.scrollLeft = Math.max(0, el.scrollLeft - d);
+      if (dir === "right") el.scrollLeft = Math.min(el.scrollWidth - el.clientWidth, el.scrollLeft + d);
+      if (dir === "up") el.scrollTop = Math.max(0, el.scrollTop - d);
+      if (dir === "down") el.scrollTop = Math.min(el.scrollHeight - el.clientHeight, el.scrollTop + d);
+      scrollId = requestAnimationFrame(frame);
+    };
+    last = performance.now();
+    frame();
+  };
+  const stop = () => (cancelAnimationFrame(scrollId ?? 0), scrollId = null);
+  const addAssist = (dir) => {
+    const div = createEl("div", { className: assistClassName }, { scrollDirection: dir }, { display: "none" });
+    if (!div) return;
+    ["pointerenter", "dragenter"].forEach((evt) => div.addEventListener(evt, () => scroll(dir)));
+    ["pointerleave", "pointerup", "pointercancel", "dragleave", "dragend"].forEach((evt) => div.addEventListener(evt, stop));
+    dir === "left" || dir === "up" ? parent.insertBefore(div, el) : parent.append(div);
+    assist[dir] = div;
+  };
+  if (horizontal) ["left", "right"].forEach(addAssist);
+  if (vertical) ["up", "down"].forEach(addAssist);
+  el.addEventListener("scroll", update);
+  t007._scroller_r_observer.observe(el);
+  t007._scroller_m_observer.observe(el, { childList: true, subtree: true, characterData: true });
+  t007._scrollers.set(el, {
+    update,
+    destroy() {
+      stop();
+      el.removeEventListener("scroll", update);
+      t007._scroller_r_observer.unobserve(el);
+      t007._scrollers.delete(el);
+      Object.values(assist).forEach((a) => a.remove());
+    }
+  });
+  return update(), t007._scrollers.get(el);
+}
+if (typeof window !== "undefined") {
+  window.t007 ??= {};
+  window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
+  window.T007_INPUT_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest`;
+  window.T007_DIALOG_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`;
+  window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/style.css`;
+  window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/style.css`;
+  window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/style.css`;
+}
+
+// src/index.js
+var formManager = {
+  forms: document.getElementsByClassName("t007-input-form"),
+  violationKeys: ["valueMissing", "typeMismatch", "patternMismatch", "stepMismatch", "tooShort", "tooLong", "rangeUnderflow", "rangeOverflow", "badInput", "customError"],
+  init() {
+    t007.FM.observeDOMForFields();
+    Array.from(t007.FM.forms).forEach(t007.FM.handleFormValidation);
+  },
+  observeDOMForFields() {
+    new MutationObserver((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;
+          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]}`;
+  },
+  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" }));
+  },
+  setFieldListeners(field2) {
+    if (!field2) return;
+    const input = field2.querySelector(".t007-input"), floatingLabel = field2.querySelector(".t007-input-floating-label"), eyeOpen = field2.querySelector(".t007-input-password-visible-icon"), eyeClosed = field2.querySelector(".t007-input-password-hidden-icon");
+    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);
+        };
+        let src;
+        if (file?.type?.startsWith("image")) src = URL.createObjectURL(file);
+        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);
+              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;
+        }
+        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 });
+  },
+  setUpField(field2) {
+    if (field2.dataset.setUp) return;
+    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 }) {
+    const isSelect = type === "select", isTextArea = type === "textarea", isCheckboxOrRadio = type === "checkbox" || type === "radio", field2 = createEl("div", { className: `t007-input-field${isWrapper ? " t007-input-is-wrapper" : ""}${indeterminate ? " t007-input-indeterminate" : ""}${!!nativeIcon ? " t007-input-icon-override" : ""}${helperText === false ? " t007-input-no-helper" : ""}${fieldClassName ? ` ${fieldClassName}` : ""}` }), labelEl = createEl("label", { className: isCheckboxOrRadio ? `t007-input-${type}-wrapper` : "t007-input-wrapper" });
+    field2.append(labelEl);
+    if (isCheckboxOrRadio) {
+      labelEl.innerHTML = `
+        <span class="t007-input-${type}-box">
+          <span class="t007-input-${type}-tag"></span>
+        </span>
+        <span class="t007-input-${type}-label">${label}</span>
+      `;
+    } else {
+      const outline = createEl("span", { className: "t007-input-outline" });
+      outline.innerHTML = `
+        <span class="t007-input-outline-leading"></span>
+        <span class="t007-input-outline-notch">
+          <span class="t007-input-floating-label">${label}</span>
+        </span>
+        <span class="t007-input-outline-trailing"></span>
+      `;
+      labelEl.append(outline);
+    }
+    const inputEl = field2.inputEl = createEl(isTextArea ? "textarea" : isSelect ? "select" : "input", { className: `t007-input${className ? ` ${className}` : ""}`, placeholder });
+    if (isSelect && Array.isArray(options)) inputEl.innerHTML = options.map((opt) => typeof opt === "string" ? `<option value="${opt}">${opt}</option>` : `<option value="${opt.value}">${opt.option}</option>`).join("");
+    if (!isSelect && !isTextArea) inputEl.type = type;
+    if (custom) inputEl.setAttribute("custom", custom);
+    if (minSize) inputEl.setAttribute("minsize", minSize);
+    if (maxSize) inputEl.setAttribute("maxsize", maxSize);
+    if (minTotalSize) inputEl.setAttribute("mintotalsize", minTotalSize);
+    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 }));
+    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 (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);
+    }
+    if (passwordMeter && type === "password") {
+      const meter = createEl("div", { className: "t007-input-password-meter" }, { strengthLevel: "1" });
+      meter.innerHTML = `
+        <div class="t007-input-password-strength-meter">
+          <div class="t007-input-p-weak"></div>
+          <div class="t007-input-p-fair"></div>
+          <div class="t007-input-p-strong"></div>
+          <div class="t007-input-p-very-strong"></div>
+        </div>
+      `;
+      field2.append(meter);
+    }
+    return field2;
+  },
+  handleFormValidation(form) {
+    if (!form?.classList.contains("t007-input-form") || form.dataset?.isValidating) return;
+    form.dataset.isValidating = "true";
+    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);
+    });
+    form.addEventListener("focusout", ({ target }) => validateInput(target, true));
+    form.addEventListener("submit", async (e) => {
+      toggleSubmitLoader(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();
+      } catch (error) {
+        console.error(error);
+      }
+      toggleSubmitLoader(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");
+      } else if (!bool) input.removeAttribute("data-error");
+      toggleHelper(input, input.hasAttribute("data-error"));
+    }
+    function toggleHelper(input, bool) {
+      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"));
+    }
+    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;
+    }
+    function validateInput(input, flag = false) {
+      if (form.dataset.globalError || !input?.classList.contains("t007-input")) return;
+      updatePasswordMeter(input);
+      let value, errorBool;
+      switch (input.custom ?? input.getAttribute("custom")) {
+        case "password":
+          value = input.value?.trim();
+          if (value === "") break;
+          const confirmPasswordInput = Array.from(inputs).find((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" : "");
+          toggleError(confirmPasswordInput, value !== confirmPasswordValue, flag);
+          break;
+        case "confirm_password":
+          value = input.value?.trim();
+          if (value === "") break;
+          const passwordInput = Array.from(inputs).find((input2) => (input2.custom ?? input2.getAttribute("custom")) === "password");
+          if (!passwordInput) break;
+          const passwordValue = passwordInput.value?.trim();
+          errorBool = value !== passwordValue;
+          input.setCustomValidity(errorBool ? "Both passwords do not match" : "");
+          break;
+        case "onward_date":
+          if (input.min) break;
+          input.min = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+          forceRevalidate(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"))
+        });
+        errorBool = !!message;
+        input.setCustomValidity(message);
+        if (violation) input.Validity[violation] = true;
+      }
+      errorBool = errorBool ?? !input.validity?.valid;
+      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));
+    }
+    function validateFormOnClient() {
+      Array.from(inputs).forEach((input) => validateInput(input, true));
+      form.querySelector("input:invalid")?.focus();
+      return Array.from(inputs).every((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");
+      });
+    }
+  }
+};
+var { field, handleFormValidation } = formManager;
+if (typeof window !== "undefined") {
+  t007.FM = formManager;
+  t007.field = field;
+  t007.handleFormValidation = handleFormValidation;
+  window.field ??= t007.field;
+  window.handleFormValidation ??= t007.handleFormValidation;
+  console.log("%cT007 Input helpers attached to window!", "color: darkturquoise");
+  loadResource(T007_INPUT_CSS_SRC);
+  t007.FM.init();
+}
+export {
+  field,
+  formManager,
+  handleFormValidation
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t007/input",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "A lightweight, pure JS input system.",
   "author": "Oketade Oluwatobiloba <tobioketade007@gmail.com>",
   "license": "MIT",
@@ -16,7 +16,8 @@
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "browser": "./dist/index.global.js",
+  "unpkg": "./dist/index.global.js",
+  "jsdelivr": "./dist/index.global.js",
   "types": "./src/ts/types/index.d.ts",
   "style": "./src/css/index.css",
   "sideEffects": [
@@ -26,17 +27,14 @@
     ".": {
       "types": "./src/ts/types/index.d.ts",
       "import": "./dist/index.js",
-      "default": "./dist/index.global.js"
+      "default": "./dist/index.js"
     },
+    "./standalone": "./dist/standalone.js",
+    "./global": "./dist/index.global.js",
     "./style.css": "./src/css/index.css"
   },
   "scripts": {
-    "build": "tsup src/index.js --format esm,iife --clean --treeshake"
-  },
-  "tsup": {
-    "noExternal": [
-      "@t007/utils"
-    ]
+    "build": "tsup --config ../../tsup.config.ts"
   },
   "files": [
     "dist",

package/src/ts/types/index.d.ts

@@ -27,7 +27,7 @@ export interface FieldOptions extends Partial<
   passwordHiddenIcon?: string;
 }
 
-export interface T007FormManager {
+export interface FormManager {
   forms: HTMLCollectionOf<HTMLFormElement>;
   violationKeys: string[];
   init(): void;
@@ -47,15 +47,15 @@ export interface T007FormManager {
 }
 
 // BUNDLE EXPORTS & GLOBAL DECLARATIONS
-export const T007_Form_Manager: T007FormManager;
-export const field = T007FormManager["field"];
-export const handleFormValidation = T007FormManager["handleFormValidation"];
+export const formManager: FormManager;
+export const field = FormManager["field"];
+export const handleFormValidation = FormManager["handleFormValidation"];
 
 declare global {
   interface T007Namespace {
-    FM: T007FormManager;
-    field?: T007FormManager["field"];
-    handleFormValidation?: T007FormManager["handleFormValidation"];
+    FM: FormManager;
+    field?: FormManager["field"];
+    handleFormValidation?: FormManager["handleFormValidation"];
   }
 
   interface Window {