@tachui/forms 0.7.1-alpha → 0.8.0-alpha

package/dist/validation/index.js

@@ -1,229 +1,313 @@
-var g = Object.defineProperty;
-var v = (e, t, r) => t in e ? g(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
-var m = (e, t, r) => v(e, typeof t != "symbol" ? t + "" : t, r);
 class s extends Error {
   constructor(t, r) {
     super(t), this.context = r, this.name = "FormsValidationError";
   }
   getFormattedMessage() {
-    const { component: t, suggestion: r, example: a, documentation: o } = this.context;
-    let i = `❌ [@tachui/forms] ${t} Component Error: ${this.message}
+    const { component: t, suggestion: r, example: a, documentation: n } = this.context;
+    let i = `❌ [@tachui/advanced-forms] ${t} Component Error: ${this.message}
 `;
     return r && (i += `
 💡 Suggestion: ${r}
 `), a && (i += `
 ❌ Wrong: ${a.wrong}`, i += `
 ✅ Correct: ${a.correct}
-`), o && (i += `
-📚 Documentation: ${o}`), i;
+`), n && (i += `
+📚 Documentation: ${n}`), i;
   }
 }
 const l = {
-  // EmailField Component
-  validateEmailField(e) {
+  // TextField Component
+  validateTextField(e) {
     if (e.length === 0)
-      throw new s("EmailField component requires a props object with value", {
-        component: "EmailField",
-        suggestion: "Add value: EmailField({ value: emailSignal })",
-        documentation: "https://docs.tachui.dev/forms/components/emailfield",
+      throw new s(
+        "TextField component requires a props object with name",
+        {
+          component: "TextField",
+          suggestion: 'Add name property: TextField({ name: "fieldName" })',
+          documentation: "https://docs.tachui.dev/advanced-forms/components/textfield",
+          example: {
+            wrong: "TextField()",
+            correct: 'TextField({ name: "email", value: emailSignal })'
+          }
+        }
+      );
+    const [t] = e;
+    if (!t || typeof t != "object")
+      throw new s("TextField requires a props object", {
+        component: "TextField",
+        suggestion: "Pass a props object with name property",
         example: {
-          wrong: "EmailField()",
-          correct: "EmailField({ value: emailSignal, onChange: handleChange })"
+          wrong: 'TextField("email")',
+          correct: 'TextField({ name: "email" })'
         }
       });
+    const r = t;
+    if (!r.name || typeof r.name != "string")
+      throw new s(
+        "TextField name property is required and must be a string",
+        {
+          component: "TextField",
+          suggestion: "Provide a unique name for the field",
+          example: {
+            wrong: 'TextField({ placeholder: "Email" })',
+            correct: 'TextField({ name: "email", placeholder: "Email" })'
+          }
+        }
+      );
+  },
+  // EmailField Component
+  validateEmailField(e) {
+    if (e.length === 0)
+      throw new s(
+        "EmailField component requires a props object with name",
+        {
+          component: "EmailField",
+          suggestion: 'Add name property: EmailField({ name: "email" })',
+          documentation: "https://docs.tachui.dev/advanced-forms/components/emailfield",
+          example: {
+            wrong: "EmailField()",
+            correct: 'EmailField({ name: "email", value: emailSignal })'
+          }
+        }
+      );
     const [t] = e;
     if (!t || typeof t != "object")
       throw new s("EmailField requires a props object", {
         component: "EmailField",
-        suggestion: "Pass a props object with value property",
+        suggestion: "Pass a props object with name property",
         example: {
           wrong: 'EmailField("email@example.com")',
-          correct: 'EmailField({ value: "email@example.com" })'
+          correct: 'EmailField({ name: "email", value: "email@example.com" })'
         }
       });
-    if (t.value === void 0)
-      throw new s("EmailField value property is required", {
-        component: "EmailField",
-        suggestion: "Provide a value for the email field",
-        example: {
-          wrong: 'EmailField({ placeholder: "Email" })',
-          correct: 'EmailField({ value: emailSignal, placeholder: "Email" })'
+    const r = t;
+    if (!r.name || typeof r.name != "string")
+      throw new s(
+        "EmailField name property is required and must be a string",
+        {
+          component: "EmailField",
+          suggestion: "Provide a unique name for the email field",
+          example: {
+            wrong: 'EmailField({ placeholder: "Email" })',
+            correct: 'EmailField({ name: "email", placeholder: "Email" })'
+          }
         }
-      });
+      );
   },
   // PasswordField Component
   validatePasswordField(e) {
     if (e.length === 0)
-      throw new s("PasswordField component requires a props object with value", {
-        component: "PasswordField",
-        suggestion: "Add value: PasswordField({ value: passwordSignal })",
-        documentation: "https://docs.tachui.dev/forms/components/passwordfield",
-        example: {
-          wrong: "PasswordField()",
-          correct: "PasswordField({ value: passwordSignal, onChange: handleChange })"
+      throw new s(
+        "PasswordField component requires a props object with name",
+        {
+          component: "PasswordField",
+          suggestion: 'Add name property: PasswordField({ name: "password" })',
+          documentation: "https://docs.tachui.dev/advanced-forms/components/passwordfield",
+          example: {
+            wrong: "PasswordField()",
+            correct: 'PasswordField({ name: "password", value: passwordSignal })'
+          }
         }
-      });
+      );
     const [t] = e;
     if (!t || typeof t != "object")
       throw new s("PasswordField requires a props object", {
         component: "PasswordField",
-        suggestion: "Pass a props object with value property",
+        suggestion: "Pass a props object with name property",
         example: {
           wrong: 'PasswordField("password")',
-          correct: "PasswordField({ value: passwordSignal })"
+          correct: 'PasswordField({ name: "password", value: passwordSignal })'
         }
       });
-    if (t.value === void 0)
-      throw new s("PasswordField value property is required", {
-        component: "PasswordField",
-        suggestion: "Provide a value for the password field",
-        example: {
-          wrong: 'PasswordField({ placeholder: "Password" })',
-          correct: 'PasswordField({ value: passwordSignal, placeholder: "Password" })'
+    const r = t;
+    if (!r.name || typeof r.name != "string")
+      throw new s(
+        "PasswordField name property is required and must be a string",
+        {
+          component: "PasswordField",
+          suggestion: "Provide a unique name for the password field",
+          example: {
+            wrong: 'PasswordField({ placeholder: "Password" })',
+            correct: 'PasswordField({ name: "password", placeholder: "Password" })'
+          }
         }
-      });
+      );
   },
-  // PhoneField Component  
+  // PhoneField Component
   validatePhoneField(e) {
     if (e.length === 0)
-      throw new s("PhoneField component requires a props object with value", {
-        component: "PhoneField",
-        suggestion: "Add value: PhoneField({ value: phoneSignal })",
-        documentation: "https://docs.tachui.dev/forms/components/phonefield",
-        example: {
-          wrong: "PhoneField()",
-          correct: 'PhoneField({ value: phoneSignal, format: "US" })'
+      throw new s(
+        "PhoneField component requires a props object with name",
+        {
+          component: "PhoneField",
+          suggestion: 'Add name property: PhoneField({ name: "phone" })',
+          documentation: "https://docs.tachui.dev/advanced-forms/components/phonefield",
+          example: {
+            wrong: "PhoneField()",
+            correct: 'PhoneField({ name: "phone", format: "US" })'
+          }
         }
-      });
+      );
     const [t] = e;
     if (!t || typeof t != "object")
       throw new s("PhoneField requires a props object", {
         component: "PhoneField",
-        suggestion: "Pass a props object with value property",
+        suggestion: "Pass a props object with name property",
         example: {
           wrong: 'PhoneField("(555) 123-4567")',
-          correct: "PhoneField({ value: phoneSignal })"
+          correct: 'PhoneField({ name: "phone", value: phoneSignal })'
         }
       });
-    if (t.value === void 0)
-      throw new s("PhoneField value property is required", {
-        component: "PhoneField",
-        suggestion: "Provide a value for the phone field",
-        example: {
-          wrong: 'PhoneField({ format: "US" })',
-          correct: 'PhoneField({ value: phoneSignal, format: "US" })'
+    const r = t;
+    if (!r.name || typeof r.name != "string")
+      throw new s(
+        "PhoneField name property is required and must be a string",
+        {
+          component: "PhoneField",
+          suggestion: "Provide a unique name for the phone field",
+          example: {
+            wrong: 'PhoneField({ format: "US" })',
+            correct: 'PhoneField({ name: "phone", format: "US" })'
+          }
         }
-      });
+      );
   },
   // NumberField Component
   validateNumberField(e) {
     if (e.length === 0)
-      throw new s("NumberField component requires a props object with value", {
-        component: "NumberField",
-        suggestion: "Add value: NumberField({ value: numberSignal })",
-        documentation: "https://docs.tachui.dev/forms/components/numberfield",
-        example: {
-          wrong: "NumberField()",
-          correct: "NumberField({ value: numberSignal, min: 0, max: 100 })"
+      throw new s(
+        "NumberField component requires a props object with name",
+        {
+          component: "NumberField",
+          suggestion: 'Add name property: NumberField({ name: "amount" })',
+          documentation: "https://docs.tachui.dev/advanced-forms/components/numberfield",
+          example: {
+            wrong: "NumberField()",
+            correct: 'NumberField({ name: "amount", min: 0, max: 100 })'
+          }
         }
-      });
+      );
     const [t] = e;
     if (!t || typeof t != "object")
       throw new s("NumberField requires a props object", {
         component: "NumberField",
-        suggestion: "Pass a props object with value property",
+        suggestion: "Pass a props object with name property",
         example: {
           wrong: "NumberField(42)",
-          correct: "NumberField({ value: 42 })"
+          correct: 'NumberField({ name: "amount", value: 42 })'
         }
       });
-    if (t.value === void 0)
-      throw new s("NumberField value property is required", {
-        component: "NumberField",
-        suggestion: "Provide a numeric value for the field",
-        example: {
-          wrong: "NumberField({ min: 0, max: 100 })",
-          correct: "NumberField({ value: 42, min: 0, max: 100 })"
+    const r = t;
+    if (!r.name || typeof r.name != "string")
+      throw new s(
+        "NumberField name property is required and must be a string",
+        {
+          component: "NumberField",
+          suggestion: "Provide a unique name for the number field",
+          example: {
+            wrong: "NumberField({ min: 0, max: 100 })",
+            correct: 'NumberField({ name: "amount", min: 0, max: 100 })'
+          }
         }
-      });
+      );
   },
   // CreditCardField Component
   validateCreditCardField(e) {
     if (e.length === 0)
-      throw new s("CreditCardField component requires a props object with value", {
-        component: "CreditCardField",
-        suggestion: "Add value: CreditCardField({ value: cardSignal })",
-        documentation: "https://docs.tachui.dev/forms/components/creditcardfield",
-        example: {
-          wrong: "CreditCardField()",
-          correct: "CreditCardField({ value: cardSignal, onChange: handleChange })"
+      throw new s(
+        "CreditCardField component requires a props object with name",
+        {
+          component: "CreditCardField",
+          suggestion: 'Add name property: CreditCardField({ name: "cardNumber" })',
+          documentation: "https://docs.tachui.dev/advanced-forms/components/creditcardfield",
+          example: {
+            wrong: "CreditCardField()",
+            correct: 'CreditCardField({ name: "cardNumber", onChange: handleChange })'
+          }
         }
-      });
+      );
     const [t] = e;
     if (!t || typeof t != "object")
-      throw new s("CreditCardField requires a props object", {
-        component: "CreditCardField",
-        suggestion: "Pass a props object with value property",
-        example: {
-          wrong: 'CreditCardField("4111111111111111")',
-          correct: "CreditCardField({ value: cardSignal })"
+      throw new s(
+        "CreditCardField requires a props object",
+        {
+          component: "CreditCardField",
+          suggestion: "Pass a props object with name property",
+          example: {
+            wrong: 'CreditCardField("4111111111111111")',
+            correct: 'CreditCardField({ name: "cardNumber", value: cardSignal })'
+          }
         }
-      });
-    if (t.value === void 0)
-      throw new s("CreditCardField value property is required", {
-        component: "CreditCardField",
-        suggestion: "Provide a value for the credit card field",
-        example: {
-          wrong: 'CreditCardField({ placeholder: "Card Number" })',
-          correct: 'CreditCardField({ value: cardSignal, placeholder: "Card Number" })'
+      );
+    const r = t;
+    if (!r.name || typeof r.name != "string")
+      throw new s(
+        "CreditCardField name property is required and must be a string",
+        {
+          component: "CreditCardField",
+          suggestion: "Provide a unique name for the credit card field",
+          example: {
+            wrong: 'CreditCardField({ placeholder: "Card Number" })',
+            correct: 'CreditCardField({ name: "cardNumber", placeholder: "Card Number" })'
+          }
         }
-      });
+      );
   }
   // Additional Forms components would go here...
-  // (SearchField, URLField, TextArea, ColorField, Select, MultiSelect, Checkbox, Radio, etc.)
+  // (SearchField, URLField, TextArea, ColorField, etc.)
 };
-function f() {
+function p() {
   return [
     {
-      packageName: "forms",
+      packageName: "advanced-forms",
+      componentName: "TextField",
+      validate: l.validateTextField
+    },
+    {
+      packageName: "advanced-forms",
       componentName: "EmailField",
       validate: l.validateEmailField
     },
     {
-      packageName: "forms",
+      packageName: "advanced-forms",
       componentName: "PasswordField",
       validate: l.validatePasswordField
     },
     {
-      packageName: "forms",
+      packageName: "advanced-forms",
       componentName: "PhoneField",
       validate: l.validatePhoneField
     },
     {
-      packageName: "forms",
+      packageName: "advanced-forms",
       componentName: "NumberField",
       validate: l.validateNumberField
     },
     {
-      packageName: "forms",
+      packageName: "advanced-forms",
       componentName: "CreditCardField",
       validate: l.validateCreditCardField
     }
-    // Additional validators would be added here for remaining 9+ Forms components
+    // Additional validators would be added here for remaining Forms components
   ];
 }
-async function h() {
+async function g() {
   try {
-    const { registerComponentValidator: e } = await import("@tachui/core/validation"), t = f();
+    const { registerComponentValidator: e } = await import("@tachui/core/validation"), t = p();
     for (const r of t)
       e(r);
-    process.env.NODE_ENV !== "production" && console.info(`🔍 [@tachui/forms] Registered ${t.length} component validators`);
+    process.env.NODE_ENV !== "production" && console.info(
+      `🔍 [@tachui/advanced-forms] Registered ${t.length} component validators`
+    );
   } catch (e) {
-    process.env.NODE_ENV !== "production" && console.warn("⚠️ [@tachui/forms] Could not register validators with Core:", e);
+    process.env.NODE_ENV !== "production" && console.warn(
+      "⚠️ [@tachui/advanced-forms] Could not register validators with Core:",
+      e
+    );
   }
 }
-typeof window < "u" && process.env.NODE_ENV !== "production" && setTimeout(h, 10);
-const u = {
+typeof window < "u" && process.env.NODE_ENV !== "production" && setTimeout(g, 10);
+const m = {
   required: (e) => ({
     valid: e != null && e !== "",
     message: "This field is required",
@@ -320,8 +404,8 @@ const u = {
     if (!e) return { valid: !0 };
     const t = e.replace(/\s/g, "");
     let r = 0, a = !1;
-    for (let o = t.length - 1; o >= 0; o--) {
-      let i = parseInt(t.charAt(o));
+    for (let n = t.length - 1; n >= 0; n--) {
+      let i = parseInt(t.charAt(n));
       a && (i *= 2, i > 9 && (i = i % 10 + 1)), r += i, a = !a;
     }
     return {
@@ -369,101 +453,101 @@ const u = {
   } : { valid: !0 },
   strongPassword: (e) => {
     if (!e) return { valid: !0 };
-    const t = /[A-Z]/.test(e), r = /[a-z]/.test(e), a = /\d/.test(e), o = /\W/.test(e), i = e.length >= 8, n = t && r && a && o && i;
+    const t = /[A-Z]/.test(e), r = /[a-z]/.test(e), a = /\d/.test(e), n = /\W/.test(e), i = e.length >= 8, o = t && r && a && n && i;
     return {
-      valid: n,
-      message: n ? void 0 : "Password must be at least 8 characters with uppercase, lowercase, number and special character",
+      valid: o,
+      message: o ? void 0 : "Password must be at least 8 characters with uppercase, lowercase, number and special character",
       code: "WEAK_PASSWORD"
     };
   }
 }, c = /* @__PURE__ */ new Map();
-function P(e) {
+function v(e) {
   c.set(e.name, e);
 }
-function E(e) {
+function F(e) {
   c.delete(e);
 }
-function C() {
-  return [...Object.keys(u), ...c.keys()];
+function N() {
+  return [...Object.keys(m), ...c.keys()];
 }
-function p(e, t, r) {
+function u(e, t, r) {
   for (const a of t) {
-    let o;
+    let n;
     if (typeof a == "string") {
-      const i = u[a];
+      const i = m[a];
       if (i)
-        o = i(e, r?.[a]);
+        n = i(e, r?.[a]);
       else {
-        const n = c.get(a);
-        if (n)
-          o = n.validate(e, n.options);
+        const o = c.get(a);
+        if (o)
+          n = o.validate(e, o.options);
         else {
           console.warn(`Unknown validation rule: ${a}`);
           continue;
         }
       }
     } else if ("validate" in a)
-      o = a.validate(e, a.options);
+      n = a.validate(e, a.options);
     else {
-      const i = u[a.name];
+      const i = m[a.name];
       if (i)
-        o = i(e, a.options);
+        n = i(e, a.options);
       else {
         console.warn(`Unknown built-in validation rule: ${a.name}`);
         continue;
       }
     }
-    if (!o.valid)
-      return o;
+    if (!n.valid)
+      return n;
   }
   return { valid: !0 };
 }
-function V(e, t) {
-  return !t?.rules || t.rules.length === 0 ? { valid: !0 } : p(e.value, t.rules);
+function b(e, t) {
+  return !t?.rules || t.rules.length === 0 ? { valid: !0 } : u(e.value, t.rules);
 }
-async function w(e, t, r) {
+async function f(e, t, r) {
   for (const a of t) {
-    let o;
+    let n;
     if (typeof a == "string") {
-      const n = u[a];
-      if (n)
-        o = n(e, r?.[a]);
+      const o = m[a];
+      if (o)
+        n = o(e, r?.[a]);
       else {
         const d = c.get(a);
         if (d)
-          o = d.validate(e, d.options);
+          n = d.validate(e, d.options);
         else
           continue;
       }
     } else if ("validate" in a)
-      o = a.validate(e, a.options);
+      n = a.validate(e, a.options);
     else {
-      const n = u[a.name];
-      if (n)
-        o = n(e, a.options);
+      const o = m[a.name];
+      if (o)
+        n = o(e, a.options);
       else
         continue;
     }
-    const i = await Promise.resolve(o);
+    const i = await Promise.resolve(n);
     if (!i.valid)
       return i;
   }
   return { valid: !0 };
 }
-function I(e, t = 300) {
-  let r, a, o;
-  return (i) => new Promise((n) => {
-    if (i === a && o) {
-      Promise.resolve(o).then(n);
+function P(e, t = 300) {
+  let r, a, n;
+  return (i) => new Promise((o) => {
+    if (i === a && n) {
+      Promise.resolve(n).then(o);
       return;
     }
     a = i, clearTimeout(r), r = setTimeout(async () => {
       try {
-        o = e(i);
-        const d = await Promise.resolve(o);
-        n(d);
+        n = e(i);
+        const d = await Promise.resolve(n);
+        o(d);
       } catch {
-        n({
+        o({
           valid: !1,
           message: "Validation error occurred",
           code: "VALIDATION_ERROR"
@@ -472,7 +556,7 @@ function I(e, t = 300) {
     }, t);
   });
 }
-const A = {
+const E = {
   /**
    * Validate that two fields match (e.g., password confirmation)
    */
@@ -484,8 +568,8 @@ const A = {
   /**
    * Validate that at least one field in a group is filled
    */
-  requireOneOf: (e, t = "At least one field is required") => (r) => e.some((o) => {
-    const i = r[o];
+  requireOneOf: (e, t = "At least one field is required") => (r) => e.some((n) => {
+    const i = r[n];
     return i != null && i !== "";
   }) ? { valid: !0 } : {
     valid: !1,
@@ -495,9 +579,9 @@ const A = {
   /**
    * Validate that a field is required when another field has a specific value
    */
-  requiredWhen: (e, t, r, a = `${e} is required`) => (o) => {
-    if (o[t] === r) {
-      const i = o[e];
+  requiredWhen: (e, t, r, a = `${e} is required`) => (n) => {
+    if (n[t] === r) {
+      const i = n[e];
       return i != null && i !== "" ? { valid: !0 } : {
         valid: !1,
         message: a,
@@ -510,10 +594,10 @@ const A = {
    * Validate date range (start date before end date)
    */
   dateRange: (e, t, r = "End date must be after start date") => (a) => {
-    const o = a[e], i = a[t];
-    if (!o || !i) return { valid: !0 };
-    const n = new Date(o);
-    return new Date(i) >= n ? { valid: !0 } : {
+    const n = a[e], i = a[t];
+    if (!n || !i) return { valid: !0 };
+    const o = new Date(n);
+    return new Date(i) >= o ? { valid: !0 } : {
       valid: !1,
       message: r,
       code: "INVALID_DATE_RANGE"
@@ -524,7 +608,10 @@ const A = {
   password: ["required", { name: "minLength", options: { minLength: 8 } }],
   phone: [
     "required",
-    { name: "pattern", options: { pattern: /^\+?[\d\s-()]+$/, message: "Invalid phone number" } }
+    {
+      name: "pattern",
+      options: { pattern: /^\+?[\d\s-()]+$/, message: "Invalid phone number" }
+    }
   ],
   url: ["required", "url"],
   positiveNumber: ["required", "number", { name: "min", options: { min: 0 } }],
@@ -535,9 +622,9 @@ const A = {
     { name: "max", options: { max: 100 } }
   ]
 };
-class F {
+class h {
+  messages = {};
   constructor(t = {}) {
-    m(this, "messages", {});
     this.messages = t;
   }
   setMessage(t, r) {
@@ -547,10 +634,13 @@ class F {
     this.messages = { ...this.messages, ...t };
   }
   format(t, r) {
-    return t.code && this.messages[t.code] ? this.messages[t.code].replace("${field}", r || "field") : t.message || "Validation failed";
+    return t.code && this.messages[t.code] ? this.messages[t.code].replace(
+      "${field}",
+      r || "field"
+    ) : t.message || "Validation failed";
   }
 }
-const R = new F(), L = {
+const C = new h(), V = {
   /**
    * Check if a validation result represents an error
    */
@@ -573,28 +663,29 @@ const R = new F(), L = {
   /**
    * Create a validation function from a rule configuration
    */
-  createValidator: (e, t) => (r) => p(r, e, t),
+  createValidator: (e, t) => (r) => u(r, e, t),
   /**
    * Create an async validation function
    */
-  createAsyncValidator: (e, t) => (r) => w(r, e, t)
+  createAsyncValidator: (e, t) => (r) => f(r, e, t)
 };
 export {
-  A as CrossFieldValidators,
+  E as CrossFieldValidators,
   l as FormsComponentValidation,
   s as FormsValidationError,
-  u as VALIDATION_RULES,
-  F as ValidationMessageFormatter,
+  m as VALIDATION_RULES,
+  h as ValidationMessageFormatter,
   x as ValidationPresets,
-  L as ValidationUtils,
-  I as createDebouncedValidator,
-  f as createFormsValidators,
-  R as defaultMessageFormatter,
-  C as getValidationRules,
-  h as registerFormsValidators,
-  P as registerValidationRule,
-  E as unregisterValidationRule,
-  V as validateField,
-  p as validateValue,
-  w as validateValueAsync
+  V as ValidationUtils,
+  P as createDebouncedValidator,
+  p as createFormsValidators,
+  C as defaultMessageFormatter,
+  N as getValidationRules,
+  g as registerFormsValidators,
+  v as registerValidationRule,
+  F as unregisterValidationRule,
+  b as validateField,
+  u as validateValue,
+  f as validateValueAsync
 };
+//# sourceMappingURL=index.js.map