@tachui/forms 0.7.0-alpha1 → 0.8.0-alpha

package/dist/index.js

@@ -1,383 +1,203 @@
-import { F as n, a as d } from "./Form-ylAr3o_e.js";
-import { b as Q } from "./Form-ylAr3o_e.js";
-import { d as c, a as m, c as u, b as g, V as f, C as p, r as F, g as h } from "./forms-core-B1bx1drO.js";
-import { m as Y, F as ee, l as te, j as re, k as ae, i as se, n as ie, e as oe, u as le, h as ne, f as de, v as ce } from "./forms-core-B1bx1drO.js";
-import { k as v, l as N, i as b, E as I, P as S, g as V, U as x, e as y, N as C, d as R, h as A, f as T, T as P, D as L, j as D, c as E, C as _, S as M, a as U, R as w, b as $ } from "./forms-inputs-6QdeMWFk.js";
-import { S as k, M as G, C as H } from "./forms-complex-BiQsZZlT.js";
-const O = {
-  /**
-   * Email validation
-   */
-  email: (e) => {
-    if (!e) return { valid: !0 };
-    const r = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
-    return {
-      valid: r,
-      ...r ? {} : { message: "Please enter a valid email address", code: "INVALID_EMAIL" }
-    };
-  },
-  /**
-   * Phone number validation
-   */
-  phone: (e) => {
-    if (!e) return { valid: !0 };
-    const t = /^[+]?[1-9][\d]{0,15}$/, r = e.replace(/\s/g, ""), a = t.test(r);
-    return {
-      valid: a,
-      ...a ? {} : { message: "Please enter a valid phone number", code: "INVALID_PHONE" }
-    };
-  },
-  /**
-   * URL validation
-   */
-  url: (e) => {
-    if (!e) return { valid: !0 };
-    try {
-      return new URL(e), { valid: !0 };
-    } catch {
-      return { valid: !1, message: "Please enter a valid URL", code: "INVALID_URL" };
-    }
-  },
-  /**
-   * Minimum length validation
-   */
-  minLength: (e) => (t) => {
-    const r = !t || t.length >= e;
-    return {
-      valid: r,
-      ...r ? {} : { message: `Minimum length is ${e} characters`, code: "MIN_LENGTH" }
-    };
-  },
-  /**
-   * Maximum length validation
-   */
-  maxLength: (e) => (t) => {
-    const r = !t || t.length <= e;
-    return {
-      valid: r,
-      ...r ? {} : { message: `Maximum length is ${e} characters`, code: "MAX_LENGTH" }
-    };
-  },
-  /**
-   * Required field validation
-   */
-  required: (e) => {
-    const t = !!(e && e.trim().length > 0);
-    return {
-      valid: t,
-      ...t ? {} : { message: "This field is required", code: "REQUIRED" }
-    };
-  },
-  /**
-   * Pattern validation
-   */
-  pattern: (e, t = "Invalid format") => (r) => {
-    if (!r) return { valid: !0 };
-    const a = e.test(r);
-    return {
-      valid: a,
-      ...a ? {} : { message: t, code: "PATTERN_MISMATCH" }
-    };
-  },
-  /**
-   * Numeric validation
-   */
-  numeric: (e) => {
-    if (!e) return { valid: !0 };
-    const t = !Number.isNaN(Number(e)) && Number.isFinite(Number(e));
-    return {
-      valid: t,
-      ...t ? {} : { message: "Please enter a valid number", code: "INVALID_NUMBER" }
-    };
-  },
-  /**
-   * Integer validation
-   */
-  integer: (e) => {
-    if (!e) return { valid: !0 };
-    const t = Number(e), r = Number.isInteger(t);
-    return {
-      valid: r,
-      ...r ? {} : { message: "Please enter a whole number", code: "INVALID_INTEGER" }
-    };
-  },
-  /**
-   * Minimum value validation
-   */
-  min: (e) => (t) => {
-    if (!t) return { valid: !0 };
-    const r = Number(t), a = !Number.isNaN(r) && r >= e;
-    return {
-      valid: a,
-      ...a ? {} : { message: `Value must be at least ${e}`, code: "MIN_VALUE" }
-    };
-  },
-  /**
-   * Maximum value validation
-   */
-  max: (e) => (t) => {
-    if (!t) return { valid: !0 };
-    const r = Number(t), a = !Number.isNaN(r) && r <= e;
-    return {
-      valid: a,
-      ...a ? {} : { message: `Value must be at most ${e}`, code: "MAX_VALUE" }
-    };
-  },
-  /**
-   * Range validation
-   */
-  range: (e, t) => (r) => {
-    if (!r) return { valid: !0 };
-    const a = Number(r), o = !Number.isNaN(a) && a >= e && a <= t;
-    return {
-      valid: o,
-      ...o ? {} : { message: `Value must be between ${e} and ${t}`, code: "OUT_OF_RANGE" }
-    };
-  },
-  /**
-   * Credit card validation (Luhn algorithm)
-   */
-  creditCard: (e) => {
-    if (!e) return { valid: !0 };
-    const t = e.replace(/\D/g, "");
-    if (t.length < 13 || t.length > 19)
-      return {
-        valid: !1,
-        message: "Credit card number must be 13-19 digits",
-        code: "INVALID_CREDIT_CARD"
-      };
-    let r = 0, a = !1;
-    for (let i = t.length - 1; i >= 0; i--) {
-      let s = parseInt(t[i]);
-      a && (s *= 2, s > 9 && (s -= 9)), r += s, a = !a;
-    }
-    const o = r % 10 === 0;
-    return {
-      valid: o,
-      ...o ? {} : { message: "Please enter a valid credit card number", code: "INVALID_CREDIT_CARD" }
-    };
-  },
-  /**
-   * Social Security Number validation
-   */
-  ssn: (e) => {
-    if (!e) return { valid: !0 };
-    const t = e.replace(/\D/g, ""), a = /^(?!666|000|9\d{2})\d{3}(?!00)\d{2}(?!0{4})\d{4}$/.test(t);
-    return {
-      valid: a,
-      ...a ? {} : { message: "Please enter a valid Social Security Number", code: "INVALID_SSN" }
-    };
-  },
-  /**
-   * US ZIP code validation
-   */
-  zipCode: (e) => {
-    if (!e) return { valid: !0 };
-    const r = /^\d{5}(-\d{4})?$/.test(e);
-    return {
-      valid: r,
-      ...r ? {} : { message: "Please enter a valid ZIP code", code: "INVALID_ZIP" }
-    };
-  },
-  /**
-   * Strong password validation
-   */
-  strongPassword: (e) => {
-    if (!e) return { valid: !0 };
-    const t = /[a-z]/.test(e), r = /[A-Z]/.test(e), a = /\d/.test(e), o = /[!@#$%^&*(),.?":{}|<>]/.test(e), i = e.length >= 8, s = [];
-    i || s.push("at least 8 characters"), t || s.push("lowercase letter"), r || s.push("uppercase letter"), a || s.push("number"), o || s.push("special character");
-    const l = s.length === 0;
-    return {
-      valid: l,
-      ...l ? {} : {
-        message: `Password must contain ${s.join(", ")}`,
-        code: "WEAK_PASSWORD"
+import { createSignal as n, createComputed as a } from "@tachui/core";
+import { c as o } from "./index-D3WfkqVv.js";
+import { a as N, b as T } from "./index-D3WfkqVv.js";
+import { f as D, C as M, D as w, E as A, N as L, P, a as R, c as $, b as k, S as O, d as U, T as H, e as I, U as z } from "./TextField-hX15dY3U.js";
+import { C as _, a as j, c as Z, M as q, R as B, b as J, d as K, S as Q } from "./Select-yZyKooXk.js";
+import { a as X, S as Y } from "./Slider-0-oal5YR.js";
+import { D as te } from "./DatePicker-D5nRFTUm.js";
+import { CrossFieldValidators as ie, FormsComponentValidation as se, FormsValidationError as ae, VALIDATION_RULES as ne, ValidationMessageFormatter as oe, ValidationPresets as de, ValidationUtils as pe, createDebouncedValidator as le, createFormsValidators as ce, defaultMessageFormatter as fe, getValidationRules as me, registerFormsValidators as he, registerValidationRule as ue, unregisterValidationRule as Se, validateField as xe, validateValue as ge, validateValueAsync as Ce } from "./validation/index.js";
+class d {
+  constructor(e) {
+    this.properties = e, this.formState = o(e.initialValues || {}), e.validation && Object.entries(e.validation).forEach(
+      ([t, r]) => {
+        this.formState.register(t, r);
+      }
+    );
+  }
+  type = "form-container";
+  formState;
+  get state() {
+    return this.formState.state;
+  }
+  async handleSubmit() {
+    this.properties.validateOnSubmit !== !1 && !await this.formState.validateForm() || (this.properties.onSubmit && await this.properties.onSubmit(
+      this.formState.watch(),
+      this.formState.state
+    ), this.properties.resetOnSubmit && this.formState.resetForm());
+  }
+  register(e, t) {
+    this.formState.register(e, t);
+  }
+  setValue(e, t) {
+    this.formState.setValue(e, t);
+  }
+  getValue(e) {
+    return this.formState.getValue(e);
+  }
+  getError(e) {
+    return this.formState.getError(e);
+  }
+  async validateField(e) {
+    return this.formState.validateField(e);
+  }
+  async validateForm() {
+    return this.formState.validateForm();
+  }
+  resetForm() {
+    this.formState.resetForm();
+  }
+  render() {
+    const e = document.createElement("form");
+    return this.properties.className && (e.className = this.properties.className), this.properties.id && (e.id = this.properties.id), e.addEventListener("submit", (t) => {
+      t.preventDefault(), this.handleSubmit();
+    }), this.properties.children && (Array.isArray(this.properties.children) ? this.properties.children.forEach((t) => {
+      typeof t == "string" ? e.appendChild(document.createTextNode(t)) : t && typeof t.render == "function" ? e.appendChild(t.render()) : t instanceof HTMLElement && e.appendChild(t);
+    }) : typeof this.properties.children == "string" ? e.appendChild(document.createTextNode(this.properties.children)) : this.properties.children && typeof this.properties.children.render == "function" ? e.appendChild(this.properties.children.render()) : this.properties.children instanceof HTMLElement && e.appendChild(this.properties.children)), e;
+  }
+}
+class p {
+  constructor(e) {
+    this.properties = e;
+    const [t, r] = n(
+      e.defaultExpanded ?? !0
+    );
+    this.expanded = t, this.setExpanded = r;
+  }
+  type = "form-section";
+  expanded;
+  setExpanded;
+  get isExpanded() {
+    return this.expanded();
+  }
+  toggle() {
+    this.properties.collapsible && this.setExpanded(!this.expanded());
+  }
+  expand() {
+    this.setExpanded(!0);
+  }
+  collapse() {
+    this.properties.collapsible && this.setExpanded(!1);
+  }
+  render() {
+    const e = document.createElement("section");
+    if (this.properties.className && (e.className = this.properties.className), this.properties.title) {
+      const r = document.createElement("h3");
+      if (r.textContent = this.properties.title, r.style.cssText = "margin: 0 0 1rem 0; font-weight: 600;", this.properties.collapsible) {
+        r.style.cursor = "pointer", r.addEventListener("click", () => this.toggle());
+        const s = document.createElement("span");
+        s.textContent = this.expanded() ? " ▼" : " ▶", s.style.cssText = "font-size: 0.8em; margin-left: 0.5rem;", r.appendChild(s), a(() => {
+          s.textContent = this.expanded() ? " ▼" : " ▶";
+        });
       }
-    };
-  },
-  /**
-   * Date validation (YYYY-MM-DD format)
-   */
-  date: (e) => {
-    if (!e) return { valid: !0 };
-    const t = new Date(e), r = !Number.isNaN(t.getTime());
-    return {
-      valid: r,
-      ...r ? {} : { message: "Please enter a valid date", code: "INVALID_DATE" }
-    };
-  },
-  /**
-   * Time validation (HH:MM format)
-   */
-  time: (e) => {
-    if (!e) return { valid: !0 };
-    const r = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/.test(e);
-    return {
-      valid: r,
-      ...r ? {} : { message: "Please enter a valid time (HH:MM)", code: "INVALID_TIME" }
-    };
-  },
-  /**
-   * Composite validator - combines multiple validators with AND logic
-   */
-  and: (...e) => (t) => {
-    for (const r of e) {
-      const a = r(t);
-      if (!a.valid)
-        return a;
+      e.appendChild(r);
+    }
+    if (this.properties.description) {
+      const r = document.createElement("p");
+      r.textContent = this.properties.description, r.style.cssText = "margin: 0 0 1rem 0; color: #666; font-size: 0.9em;", e.appendChild(r);
     }
-    return { valid: !0 };
-  },
-  /**
-   * Composite validator - combines multiple validators with OR logic
-   */
-  or: (...e) => (t) => {
-    const r = e.map((i) => i(t));
-    return r.some((i) => i.valid) ? { valid: !0 } : r.find((i) => !i.valid) || { valid: !1, message: "Validation failed", code: "VALIDATION_FAILED" };
-  },
-  /**
-   * Custom validator factory
-   */
-  custom: (e) => e
-}, z = {
-  name: "@tachui/forms",
-  version: "0.1.0",
-  async install(e) {
-    const t = (r, a, o) => {
-      e.registerComponent(r, a, o);
-    };
-    t("Form", n, {
-      category: "forms",
-      tags: ["form", "container", "validation"]
-    }), t("FormSection", d, {
-      category: "forms",
-      tags: ["form", "section", "fieldset"]
-    }), t("TextField", b, {
-      category: "forms",
-      tags: ["input", "text", "validation"]
-    }), t("EmailField", I, {
-      category: "forms",
-      tags: ["input", "email", "validation"]
-    }), t("PasswordField", S, {
-      category: "forms",
-      tags: ["input", "password", "validation"]
-    }), t("SearchField", V, {
-      category: "forms",
-      tags: ["input", "search"]
-    }), t("URLField", x, {
-      category: "forms",
-      tags: ["input", "url", "validation"]
-    }), t("PhoneField", y, {
-      category: "forms",
-      tags: ["input", "phone", "validation"]
-    }), t("NumberField", C, {
-      category: "forms",
-      tags: ["input", "number", "numeric", "validation"]
-    }), t("CreditCardField", R, {
-      category: "forms",
-      tags: ["input", "credit-card", "payment", "validation"]
-    }), t("SSNField", A, {
-      category: "forms",
-      tags: ["input", "ssn", "social-security", "validation"]
-    }), t("PostalCodeField", T, {
-      category: "forms",
-      tags: ["input", "postal-code", "zip", "validation"]
-    }), t("TextArea", P, {
-      category: "forms",
-      tags: ["input", "textarea", "multiline"]
-    }), t("DateField", L, {
-      category: "forms",
-      tags: ["input", "date", "calendar", "validation"]
-    }), t("TimeField", D, {
-      category: "forms",
-      tags: ["input", "time", "clock", "validation"]
-    }), t("ColorField", E, {
-      category: "forms",
-      tags: ["input", "color", "picker"]
-    }), t("Checkbox", _, {
-      category: "forms",
-      tags: ["input", "checkbox", "boolean"]
-    }), t("Switch", M, {
-      category: "forms",
-      tags: ["input", "switch", "toggle", "boolean"]
-    }), t("CheckboxGroup", U, {
-      category: "forms",
-      tags: ["input", "checkbox", "group", "multiple"]
-    }), t("Radio", w, {
-      category: "forms",
-      tags: ["input", "radio", "choice"]
-    }), t("RadioGroup", $, {
-      category: "forms",
-      tags: ["input", "radio", "group", "choice"]
-    }), t("Select", k, {
-      category: "forms",
-      tags: ["input", "select", "dropdown", "choice"]
-    }), t("MultiSelect", G, {
-      category: "forms",
-      tags: ["input", "select", "multiple", "choice"]
-    }), t("Combobox", H, {
-      category: "forms",
-      tags: ["input", "combobox", "search", "choice"]
-    }), e.registerService("formsConfig", {
-      theme: "default",
-      validation: {},
-      accessibility: {}
-    }), e.registerService("validationMessageFormatter", c), e.registerService("createFormState", m), e.registerService("createField", u), e.registerService("createMultiStepFormState", g), e.registerService("ValidationPresets", f), e.registerService("CrossFieldValidators", p), e.registerService("TextFieldFormatters", v), e.registerService("TextFieldParsers", N), e.registerService("TextFieldValidators", O), await F(), console.log("📝 TachUI Forms plugin installed successfully"), console.log("   • 24 form components (including enhanced TextField variants)"), console.log(`   • ${h().length} validation rules`), console.log("   • TextField formatters and validators included");
-  },
-  async uninstall() {
-    console.log("📝 TachUI Forms plugin uninstalled");
+    const t = document.createElement("div");
+    return a(() => {
+      t.style.display = this.expanded() ? "block" : "none";
+    }), this.properties.children && (Array.isArray(this.properties.children) ? this.properties.children.forEach((r) => {
+      typeof r == "string" ? t.appendChild(document.createTextNode(r)) : r && typeof r.render == "function" ? t.appendChild(r.render()) : r instanceof HTMLElement && t.appendChild(r);
+    }) : typeof this.properties.children == "string" ? t.appendChild(document.createTextNode(this.properties.children)) : this.properties.children && typeof this.properties.children.render == "function" ? t.appendChild(this.properties.children.render()) : this.properties.children instanceof HTMLElement && t.appendChild(this.properties.children)), e.appendChild(t), e;
   }
-}, W = async (e) => z.install(e);
+}
+function f(i) {
+  return new d(i);
+}
+function m(i) {
+  return new p(i);
+}
+function h() {
+  return {
+    /* TODO: Implement form state hook */
+  };
+}
+function u() {
+  return {
+    /* TODO: Implement form validation hook */
+  };
+}
+function S(i) {
+  return i.replace(/\D/g, "").replace(/(\d{4})(?=\d)/g, "$1 ");
+}
+function x(i) {
+  return i.replace(/\D/g, "").replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
+}
+function g(i) {
+  return i.replace(/\D/g, "").replace(/(\d{3})(\d{2})(\d{4})/, "$1-$2-$3");
+}
+function C(i) {
+  return i.toUpperCase().replace(/[^A-Z0-9]/g, "");
+}
+function F(i, e = "yyyy-MM-dd") {
+  return i.toISOString().split("T")[0];
+}
+function E(i) {
+  return new Date(i);
+}
+function y(i) {
+  return i instanceof Date && !isNaN(i.getTime());
+}
 export {
   _ as Checkbox,
-  U as CheckboxGroup,
-  E as ColorField,
-  H as Combobox,
-  R as CreditCardField,
-  p as CrossFieldValidators,
-  L as DateField,
-  I as EmailField,
-  n as Form,
-  d as FormSection,
-  Q as FormUtils,
-  Y as FormsComponentValidation,
-  ee as FormsValidationError,
-  G as MultiSelect,
-  C as NumberField,
-  S as PasswordField,
-  y as PhoneField,
-  T as PostalCodeField,
-  w as Radio,
-  $ as RadioGroup,
-  A as SSNField,
-  V as SearchField,
-  k as Select,
-  M as Switch,
-  P as TextArea,
-  b as TextField,
-  v as TextFieldFormatters,
-  N as TextFieldParsers,
-  O as TextFieldValidators,
-  D as TimeField,
-  x as URLField,
-  te as VALIDATION_RULES,
-  re as ValidationMessageFormatter,
-  f as ValidationPresets,
-  ae as ValidationUtils,
-  se as createDebouncedValidator,
-  u as createField,
-  m as createFormState,
-  ie as createFormsValidators,
-  g as createMultiStepFormState,
-  z as default,
-  c as defaultMessageFormatter,
-  h as getValidationRules,
-  W as installFormsPlugin,
-  F as registerFormsValidators,
-  oe as registerValidationRule,
-  le as unregisterValidationRule,
-  ne as validateField,
-  de as validateValue,
-  ce as validateValueAsync
+  j as CheckboxGroup,
+  D as ColorField,
+  Z as Combobox,
+  M as CreditCardField,
+  ie as CrossFieldValidators,
+  w as DateField,
+  te as DatePicker,
+  A as EmailField,
+  d as Form,
+  p as FormSection,
+  se as FormsComponentValidation,
+  ae as FormsValidationError,
+  q as MultiSelect,
+  L as NumberField,
+  P as PasswordField,
+  R as PhoneField,
+  $ as PostalCodeField,
+  B as Radio,
+  J as RadioGroup,
+  k as SSNField,
+  O as SearchField,
+  K as Select,
+  X as Slider,
+  Y as Stepper,
+  Q as Switch,
+  U as TextArea,
+  H as TextField,
+  I as TimeField,
+  z as URLField,
+  ne as VALIDATION_RULES,
+  oe as ValidationMessageFormatter,
+  de as ValidationPresets,
+  pe as ValidationUtils,
+  le as createDebouncedValidator,
+  N as createField,
+  o as createFormState,
+  ce as createFormsValidators,
+  T as createMultiStepFormState,
+  fe as defaultMessageFormatter,
+  f as form,
+  m as formSection,
+  S as formatCreditCard,
+  F as formatDate,
+  x as formatPhoneNumber,
+  C as formatPostalCode,
+  g as formatSSN,
+  me as getValidationRules,
+  y as isValidDate,
+  E as parseDate,
+  he as registerFormsValidators,
+  ue as registerValidationRule,
+  Se as unregisterValidationRule,
+  h as useFormState,
+  u as useFormValidation,
+  xe as validateField,
+  ge as validateValue,
+  Ce as validateValueAsync
 };
 //# sourceMappingURL=index.js.map