@incodetech/web 0.0.0-dev-20260515-ec7243b → 0.0.0-dev-20260515-a07df20

package/dist/base.css

@@ -65,6 +65,7 @@
   margin: 0;
   padding: 0;
   position: relative;
+  overflow-y: auto;
 }
 .IncodeComponent *, .IncodeComponent :after, .IncodeComponent :before, .IncodeComponent ::backdrop {
   box-sizing: border-box;
@@ -1650,11 +1651,7 @@
   border-color: var(--color-dropdown-border-focused, var(--dropdown-border-focused));
   background-color: var(--color-dropdown-surface-focused, var(--dropdown-surface-focused));
 }
-.IncodeDropdownComposedTrigger[data-error="true"] {
-  border-color: var(--color-dropdown-border-negative, var(--dropdown-border-negative));
-  background-color: var(--color-dropdown-surface-negative, var(--dropdown-surface-negative));
-}
-.IncodeDropdownComposedTrigger[data-error="true"][data-focused="true"] {
+.IncodeDropdownComposedTrigger[data-error="true"], .IncodeDropdownComposedTrigger[data-error="true"][data-focused="true"] {
   border-style: var(--tw-border-style);
   border-width: 2px;
   border-color: var(--color-dropdown-border-negative, var(--dropdown-border-negative));
@@ -4027,7 +4024,6 @@
   flex-direction: column;
   flex: 1;
   display: flex;
-  overflow-y: auto;
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {

package/dist/curp-validation/curp-validation.es.js

@@ -18,8 +18,8 @@ import { n as g, t as _ } from "../requiredLabelHint-BLwgqozE.js";
 import { t as v } from "../autoFocusTitle-QexamZ4i.js";
 import { GENERATE_CURP_FIELDS as y, createCurpValidationManager as b, mexicanStates as x } from "@incodetech/core/curp-validation";
 //#region src/modules/curp-validation/curpInput.tsx
-var S = ({ curp: t, isValid: n, onCurpChange: i, onVerify: a, onSwitchToGenerate: s, disabled: c = !1, placeholder: u, continueLabel: d, dontHaveLabel: p }) => {
-	let { t: m } = e(), h = u ?? m("curp.placeholder.curp") ?? "CURP", g = d ?? m("curp.continue") ?? "Continue", _ = p ?? m("curp.dontHave") ?? "I don't have my CURP";
+var S = ({ curp: t, errorKey: n, onCurpChange: i, onCurpBlur: a, onVerify: s, onSwitchToGenerate: c, disabled: u = !1, placeholder: d, continueLabel: p, dontHaveLabel: m }) => {
+	let { t: h } = e(), g = d ?? h("curp.placeholder.curp") ?? "CURP", _ = p ?? h("curp.continue") ?? "Continue", v = m ?? h("curp.dontHave") ?? "I don't have my CURP", y = n ? h(n) : void 0, b = t.length === 0 || !!y || u;
 	return /* @__PURE__ */ r("div", {
 		class: "IncodeCurpValidation IncodeCurpInput",
 		children: [
@@ -30,146 +30,141 @@ var S = ({ curp: t, isValid: n, onCurpChange: i, onVerify: a, onSwitchToGenerate
 					let t = e.target;
 					i(t.value.toUpperCase());
 				},
-				placeholder: h,
-				disabled: c,
+				onBlur: a,
+				placeholder: g,
+				disabled: u,
 				required: !0,
 				maxLength: 18,
-				"aria-label": m("curp.placeholder.curp") ?? "CURP"
+				"aria-label": h("curp.placeholder.curp") ?? "CURP",
+				error: y,
+				showErrorIcon: !!y
 			}),
 			/* @__PURE__ */ r(o, {}),
 			/* @__PURE__ */ r(l, {
 				type: "button",
-				onClick: a,
-				disabled: !n || c,
+				onClick: s,
+				disabled: b,
 				"data-testid": "curp-verify",
-				children: g
+				children: _
 			}),
 			/* @__PURE__ */ r(l, {
 				type: "button",
 				variant: "secondary",
-				onClick: s,
-				disabled: c,
+				onClick: c,
+				disabled: u,
 				"data-testid": "curp-switch-to-generate",
-				children: _
+				children: v
 			})
 		]
 	});
-}, C = ({ form: t, isValid: i, onFormChange: a, onGenerate: s, disabled: c = !1, labels: u }) => {
-	let { t: d } = e(), h = {
-		firstName: d("curp.labels.firstName") ?? "Your First name",
-		firstLast: d("curp.labels.firstLast") ?? "Your First last name",
-		secondLast: d("curp.labels.secondLast") ?? "Your Second last name",
-		gender: d("curp.labels.genderV2") ?? "Gender",
-		genderPlaceholder: d("curp.placeholder.gender") ?? "Choose gender",
-		male: d("curp.labels.maleV2") ?? "Male",
-		female: d("curp.labels.femaleV2") ?? "Female",
-		other: d("curp.labels.other") ?? "Other",
-		dob: d("curp.labels.dob") ?? "Date of birth",
-		birthState: d("curp.labels.birthState") ?? "State of birth",
-		statePlaceholder: d("curp.placeholder.state") ?? "Select state",
-		generate: d("curp.generateCta") ?? "Generate CURP",
-		...u
-	}, v = n(() => g(y.map((e) => e.required)), []), b = n(() => Object.fromEntries(y.map((e) => [e.key, e.required])), []), S = (e) => {
-		let t = _(v, b[e]);
-		return t ? d(`forms.label.${t}`) : void 0;
-	}, C = (e) => (t) => {
+}, C = ({ form: t, validationErrors: i, onFormChange: a, onValidateField: s, onGenerate: c, disabled: u = !1, labels: d }) => {
+	let { t: h } = e(), v = {
+		firstName: h("curp.labels.firstName") ?? "Your First name",
+		firstLast: h("curp.labels.firstLast") ?? "Your First last name",
+		secondLast: h("curp.labels.secondLast") ?? "Your Second last name",
+		gender: h("curp.labels.genderV2") ?? "Gender",
+		genderPlaceholder: h("curp.placeholder.gender") ?? "Choose gender",
+		male: h("curp.labels.maleV2") ?? "Male",
+		female: h("curp.labels.femaleV2") ?? "Female",
+		other: h("curp.labels.other") ?? "Other",
+		dob: h("curp.labels.dob") ?? "Date of birth",
+		birthState: h("curp.labels.birthState") ?? "State of birth",
+		statePlaceholder: h("curp.placeholder.state") ?? "Select state",
+		generate: h("curp.generateCta") ?? "Generate CURP",
+		...d
+	}, b = n(() => g(y.map((e) => e.required)), []), S = !!i && Object.keys(i).length > 0, C = (e) => (t) => {
 		let n = t.target;
 		a({ [e]: n.value });
-	}, w = [
+	}, w = (e) => () => {
+		s(e);
+	}, T = [
 		{
 			value: "H",
-			label: h.male
+			label: v.male
 		},
 		{
 			value: "M",
-			label: h.female
+			label: v.female
 		},
 		{
 			value: "X",
-			label: h.other
+			label: v.other
 		}
-	], T = x.map((e) => ({
+	], E = x.map((e) => ({
 		value: e.value,
 		label: e.label
-	}));
+	})), D = (e) => {
+		switch (e) {
+			case "name": return v.firstName;
+			case "firstLastName": return v.firstLast;
+			case "secondLastName": return v.secondLast;
+			case "gender": return v.gender;
+			case "birthDate": return v.dob;
+			case "birthState": return v.birthState;
+		}
+	};
 	return /* @__PURE__ */ r("div", {
 		class: "IncodeCurpValidation IncodeGenerateCurpForm",
 		children: [
-			/* @__PURE__ */ r(f, {
-				id: "curp-first-name",
-				label: h.firstName,
-				labelHint: S("name"),
-				value: t.name,
-				onInput: C("name"),
-				placeholder: h.firstName,
-				disabled: c,
-				required: b.name,
-				autoComplete: "given-name"
-			}),
-			/* @__PURE__ */ r(f, {
-				id: "curp-first-last",
-				label: h.firstLast,
-				labelHint: S("firstLastName"),
-				value: t.firstLastName,
-				onInput: C("firstLastName"),
-				placeholder: h.firstLast,
-				disabled: c,
-				required: b.firstLastName
-			}),
-			/* @__PURE__ */ r(f, {
-				id: "curp-second-last",
-				label: h.secondLast,
-				labelHint: S("secondLastName"),
-				value: t.secondLastName,
-				onInput: C("secondLastName"),
-				placeholder: h.secondLast,
-				disabled: c,
-				required: b.secondLastName
-			}),
-			/* @__PURE__ */ r(p, {
-				id: "curp-gender",
-				label: h.gender,
-				labelHint: S("gender"),
-				placeholder: h.genderPlaceholder,
-				value: t.gender,
-				options: w,
-				disabled: c,
-				required: b.gender,
-				onChange: (e) => a({ gender: e }),
-				"data-testid": "curp-gender"
-			}),
-			/* @__PURE__ */ r(m, {
-				id: "curp-birth-date",
-				label: h.dob,
-				labelHint: S("birthDate"),
-				value: t.birthDate,
-				onInput: C("birthDate"),
-				max: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
-				placeholder: d("curp.placeholder.dob") ?? "mm/dd/yyyy",
-				disabled: c,
-				required: b.birthDate,
-				"data-testid": "curp-birth-date"
-			}),
-			/* @__PURE__ */ r(p, {
-				id: "curp-birth-state",
-				label: h.birthState,
-				labelHint: S("birthState"),
-				placeholder: h.statePlaceholder,
-				value: t.birthState,
-				options: T,
-				disabled: c,
-				required: b.birthState,
-				onChange: (e) => a({ birthState: e }),
-				"data-testid": "curp-birth-state",
-				searchable: !0
+			y.map((e) => {
+				let n = _(b, e.required), o = n ? h(`forms.label.${n}`) ?? void 0 : void 0, s = i?.[e.key], c = s ? h(s) ?? void 0 : void 0, l = D(e.key);
+				if (e.type === "dropdown") {
+					let n = e.key === "gender" ? T : E, i = e.key === "gender" ? v.genderPlaceholder : v.statePlaceholder;
+					return /* @__PURE__ */ r(p, {
+						id: `curp-${e.key === "birthState" ? "birth-state" : "gender"}`,
+						label: l,
+						labelHint: o,
+						placeholder: i,
+						value: t[e.key],
+						options: n,
+						disabled: u,
+						required: e.required,
+						onChange: (t) => {
+							e.key === "gender" ? a({ gender: t }) : a({ [e.key]: t });
+						},
+						onBlur: w(e.key),
+						error: c,
+						showErrorIcon: !!c,
+						"data-testid": e.key === "gender" ? "curp-gender" : "curp-birth-state",
+						...e.key === "birthState" ? { searchable: !0 } : {}
+					}, e.key);
+				}
+				return e.type === "date" ? /* @__PURE__ */ r(m, {
+					id: "curp-birth-date",
+					label: l,
+					labelHint: o,
+					value: t.birthDate,
+					onInput: C("birthDate"),
+					onBlur: w("birthDate"),
+					max: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
+					placeholder: h("curp.placeholder.dob") ?? "mm/dd/yyyy",
+					disabled: u,
+					required: e.required,
+					error: c,
+					showErrorIcon: !!c,
+					"data-testid": "curp-birth-date"
+				}, e.key) : /* @__PURE__ */ r(f, {
+					id: e.key === "name" ? "curp-first-name" : e.key === "firstLastName" ? "curp-first-last" : "curp-second-last",
+					label: l,
+					labelHint: o,
+					value: t[e.key],
+					onInput: C(e.key),
+					onBlur: w(e.key),
+					placeholder: l,
+					disabled: u,
+					required: e.required,
+					error: c,
+					showErrorIcon: !!c,
+					...e.autoComplete ? { autoComplete: e.autoComplete } : {}
+				}, e.key);
 			}),
 			/* @__PURE__ */ r(o, { size: 16 }),
 			/* @__PURE__ */ r(l, {
 				type: "button",
-				onClick: s,
-				disabled: !i || c,
+				onClick: c,
+				disabled: S || u,
 				"data-testid": "curp-generate",
-				children: h.generate
+				children: v.generate
 			})
 		]
 	});
@@ -184,8 +179,9 @@ var S = ({ curp: t, isValid: n, onCurpChange: i, onVerify: a, onSwitchToGenerate
 		title: m("curp.enterCurp") ?? "Enter your CURP",
 		children: /* @__PURE__ */ r(S, {
 			curp: h.curp,
-			isValid: h.isValid,
+			errorKey: h.validationErrors?.curp,
 			onCurpChange: (e) => g.setCurp(e),
+			onCurpBlur: () => g.validateField("curp"),
 			onVerify: () => g.verify(),
 			onSwitchToGenerate: () => g.switchToGenerate(),
 			placeholder: m("curp.placeholder.curp") ?? "CURP",
@@ -199,8 +195,9 @@ var S = ({ curp: t, isValid: n, onCurpChange: i, onVerify: a, onSwitchToGenerate
 		hideFooterBranding: !0,
 		children: /* @__PURE__ */ r(C, {
 			form: h.form,
-			isValid: h.isValid,
+			validationErrors: h.validationErrors,
 			onFormChange: (e) => g.setGenerateForm(e),
+			onValidateField: (e) => g.validateField(e),
 			onGenerate: () => g.generate()
 		})
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/web",
-  "version": "0.0.0-dev-20260515-ec7243b",
+  "version": "0.0.0-dev-20260515-a07df20",
   "type": "module",
   "main": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -239,7 +239,7 @@
     "qrcode": "^1.5.4",
     "signature_pad": "^5.1.3",
     "tailwindcss": "^4.1.17",
-    "@incodetech/core": "0.0.0-dev-20260515-ec7243b"
+    "@incodetech/core": "0.0.0-dev-20260515-a07df20"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.53.3",