@stackcraftmx/calcita 0.51.0 → 0.53.0

package/dist/forms/schemaRequired.js

@@ -0,0 +1,33 @@
+function fieldPathOf(name) {
+  return name.replace(/\[(\d+)]/g, ".$1").split(".").filter(Boolean);
+}
+function describesRequired(description) {
+  if (description.optional === false) {
+    return true;
+  }
+  return description.type === "array" && (description.tests ?? []).some((test) => test.name === "min" && Number(test.params?.min) >= 1);
+}
+function isRequiredInSchema(schema, name, values) {
+  let current = typeof schema === "function" ? schema() : schema;
+  if (!current || typeof current.describe !== "function") {
+    return false;
+  }
+  let value = values;
+  let parent;
+  for (const part of fieldPathOf(name)) {
+    const resolved = typeof current.resolve === "function" ? current.resolve({ value, parent }) : current;
+    const next = resolved.fields ? resolved.fields[part] : resolved.innerType;
+    if (!next) {
+      return false;
+    }
+    current = next;
+    parent = value;
+    value = value?.[part];
+  }
+  return describesRequired(current.describe({ value, parent }));
+}
+export {
+  fieldPathOf,
+  isRequiredInSchema
+};
+//# sourceMappingURL=schemaRequired.js.map

package/dist/forms/schemaRequired.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schemaRequired.js","sources":["../../src/forms/schemaRequired.js"],"sourcesContent":["// Si el esquema de yup del formulario pide un campo: lo lee el campo de formik para ponerle su asterisco cuando el proyecto\n// lo prende (ToolkitProvider requiredFromSchema). Así el esquema manda y la pantalla no repite a mano cuáles son\n// obligatorios (un paso de 33 campos tenía 23).\n//\n// Cuenta como obligatorio lo que yup describe como no opcional: .required() y .defined(); y una lista con .min(1) o más,\n// porque pide al menos uno. Las condiciones (.when) se resuelven con los valores de ese momento: un RFC que solo se pide a\n// una empresa lleva su asterisco solo cuando se elige empresa.\n//\n// Sin importar yup: camina el esquema por lo que todos los de yup traen (fields de un objeto, innerType de una lista,\n// resolve y describe). Así /date-pickers y /rich-text no le piden yup al proyecto que no lo usa.\n//\n// Funciones puras, sin React.\n\n/**\n * Las partes de un nombre de campo de formik: 'contacts.2.email' y 'contacts[2].email' dan ['contacts', '2', 'email'].\n *\n * @param {string} name\n * @returns {string[]}\n */\nexport function fieldPathOf(name) {\n    return name.replace(/\\[(\\d+)]/g, '.$1').split('.').filter(Boolean);\n}\n\n/**\n * @param {object} description lo que da describe() de un esquema de yup\n * @returns {boolean}\n */\nfunction describesRequired(description) {\n    if (description.optional === false) {\n        return true;\n    }\n    // una lista con .min(1) pide al menos uno aunque yup la llame opcional\n    return description.type === 'array' && (description.tests ?? []).some((test) => test.name === 'min' && Number(test.params?.min) >= 1);\n}\n\n/**\n * @param {unknown} schema el validationSchema del formulario (un esquema de yup o una función que lo da, como en formik)\n * @param {string} name el campo, con la forma de formik ('contacts.2.email')\n * @param {object} [values] los valores del formulario, para las condiciones (.when)\n * @returns {boolean} false si no hay esquema, si no es de yup o si el campo no está en él\n */\nexport function isRequiredInSchema(schema, name, values) {\n    let current = typeof schema === 'function' ? schema() : schema;\n    if (!current || typeof current.describe !== 'function') {\n        return false;\n    }\n    let value = values;\n    let parent;\n    for (const part of fieldPathOf(name)) {\n        // con sus condiciones ya resueltas: un campo puede existir o pedirse según otro\n        const resolved = typeof current.resolve === 'function' ? current.resolve({value, parent}) : current;\n        const next = resolved.fields ? resolved.fields[part] : resolved.innerType;\n        if (!next) {\n            return false;\n        }\n        current = next;\n        parent = value;\n        value = value?.[part];\n    }\n    return describesRequired(current.describe({value, parent}));\n}\n"],"names":[],"mappings":"AAmBO,SAAS,YAAY,MAAM;AAC9B,SAAO,KAAK,QAAQ,aAAa,KAAK,EAAE,MAAM,GAAG,EAAE,OAAO,OAAO;AACrE;AAMA,SAAS,kBAAkB,aAAa;AACpC,MAAI,YAAY,aAAa,OAAO;AAChC,WAAO;AAAA,EACX;AAEA,SAAO,YAAY,SAAS,YAAY,YAAY,SAAS,CAAA,GAAI,KAAK,CAAC,SAAS,KAAK,SAAS,SAAS,OAAO,KAAK,QAAQ,GAAG,KAAK,CAAC;AACxI;AAQO,SAAS,mBAAmB,QAAQ,MAAM,QAAQ;AACrD,MAAI,UAAU,OAAO,WAAW,aAAa,OAAM,IAAK;AACxD,MAAI,CAAC,WAAW,OAAO,QAAQ,aAAa,YAAY;AACpD,WAAO;AAAA,EACX;AACA,MAAI,QAAQ;AACZ,MAAI;AACJ,aAAW,QAAQ,YAAY,IAAI,GAAG;AAElC,UAAM,WAAW,OAAO,QAAQ,YAAY,aAAa,QAAQ,QAAQ,EAAC,OAAO,OAAM,CAAC,IAAI;AAC5F,UAAM,OAAO,SAAS,SAAS,SAAS,OAAO,IAAI,IAAI,SAAS;AAChE,QAAI,CAAC,MAAM;AACP,aAAO;AAAA,IACX;AACA,cAAU;AACV,aAAS;AACT,YAAQ,QAAQ,IAAI;AAAA,EACxB;AACA,SAAO,kBAAkB,QAAQ,SAAS,EAAC,OAAO,OAAM,CAAC,CAAC;AAC9D;"}

package/dist/forms/useFormikField.js

@@ -1,13 +1,26 @@
 "use client";
-import { useField } from "formik";
-function useFormikField(name) {
+import { useField, useFormikContext } from "formik";
+import { useFormSchema } from "./FormSchemaProvider.js";
+import { isRequiredInSchema } from "./schemaRequired.js";
+import { useToolkitSettings } from "../toolkit/toolkitContext.js";
+function useFormikField(name, screen = {}) {
   const [field, meta, helpers] = useField(name);
+  const { values } = useFormikContext();
+  const schema = useFormSchema();
+  const { requiredFromSchema } = useToolkitSettings();
   return {
     name,
     value: field.value,
-    onChange: (value) => helpers.setValue(value),
-    onBlur: () => helpers.setTouched(true),
-    error: meta.touched ? meta.error : void 0
+    onChange: (value, ...rest) => {
+      helpers.setValue(value);
+      screen.onChange?.(value, ...rest);
+    },
+    onBlur: (...args) => {
+      helpers.setTouched(true);
+      screen.onBlur?.(...args);
+    },
+    error: meta.touched ? meta.error : void 0,
+    required: screen.required ?? (requiredFromSchema === true && isRequiredInSchema(schema, name, values))
   };
 }
 export {

package/dist/forms/useFormikField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormikField.js","sources":["../../src/forms/useFormikField.js"],"sourcesContent":["// La conexión de un campo suelto (inputs/) con formik: lo que la vista necesita, sacado del campo de formik.\n//\n// Una sola regla vive aquí: el error se enseña cuando el campo ya se tocó (o ya se intentó enviar, que formik marca como\n// tocados todos). Marcar en rojo lo que nadie ha llenado regaña a alguien por no adivinar.\n//\n// Hook genérico del paquete: function (regla de la casa).\nimport {useField} from 'formik';\n\n/**\n * @param {string} name el campo del formulario\n * @returns {{name: string, value: unknown, onChange: (value: unknown) => void, onBlur: () => void, error: unknown}}\n */\nexport function useFormikField(name) {\n    const [field, meta, helpers] = useField(name);\n\n    return {\n        name,\n        value: field.value,\n        onChange: (value) => helpers.setValue(value),\n        onBlur: () => helpers.setTouched(true),\n        error: meta.touched ? meta.error : undefined,\n    };\n}\n"],"names":[],"mappings":";;AAYO,SAAS,eAAe,MAAM;AACjC,QAAM,CAAC,OAAO,MAAM,OAAO,IAAI,SAAS,IAAI;AAE5C,SAAO;AAAA,IACH;AAAA,IACA,OAAO,MAAM;AAAA,IACb,UAAU,CAAC,UAAU,QAAQ,SAAS,KAAK;AAAA,IAC3C,QAAQ,MAAM,QAAQ,WAAW,IAAI;AAAA,IACrC,OAAO,KAAK,UAAU,KAAK,QAAQ;AAAA,EAC3C;AACA;"}
+{"version":3,"file":"useFormikField.js","sources":["../../src/forms/useFormikField.js"],"sourcesContent":["// La conexión de un campo suelto (inputs/) con formik: lo que la vista necesita, sacado del campo de formik.\n//\n// Una regla vive aquí: el error se enseña cuando el campo ya se tocó (o ya se intentó enviar, que formik marca como\n// tocados todos). Marcar en rojo lo que nadie ha llenado regaña a alguien por no adivinar.\n//\n// Lo que la pantalla le pase al campo en onChange y onBlur también corre, después del de formik y con el valor nuevo. OJO:\n// antes el de formik iba después y lo pisaba sin avisar (la pantalla tenía que observar el valor para enterarse).\n//\n// Y lo obligatorio: lo que diga la pantalla con required; si no dice nada y el proyecto lo prendió\n// (ToolkitProvider requiredFromSchema), lo que pida el esquema de yup del formulario (schemaRequired.js). El esquema llega\n// por FormSchemaProvider (el Formik de Calcita lo pone solo): formik no lo comparte con sus campos.\n//\n// Hook genérico del paquete: function (regla de la casa).\nimport {useField, useFormikContext} from 'formik';\n\nimport {useFormSchema} from '@/forms/FormSchemaProvider.jsx';\nimport {isRequiredInSchema} from '@/forms/schemaRequired.js';\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\n\n/**\n * @param {string} name el campo del formulario\n * @param {{required?: boolean, onChange?: Function, onBlur?: Function}} [screen] lo que la pantalla le dijo al campo\n * @returns {{name: string, value: unknown, onChange: (value: unknown, ...rest: unknown[]) => void, onBlur: (...args: unknown[]) => void, error: unknown, required: boolean}}\n */\nexport function useFormikField(name, screen = {}) {\n    const [field, meta, helpers] = useField(name);\n    const {values} = useFormikContext();\n    const schema = useFormSchema();\n    const {requiredFromSchema} = useToolkitSettings();\n\n    return {\n        name,\n        value: field.value,\n        onChange: (value, ...rest) => {\n            helpers.setValue(value);\n            screen.onChange?.(value, ...rest);\n        },\n        onBlur: (...args) => {\n            helpers.setTouched(true);\n            screen.onBlur?.(...args);\n        },\n        error: meta.touched ? meta.error : undefined,\n        required: screen.required ?? (requiredFromSchema === true && isRequiredInSchema(schema, name, values)),\n    };\n}\n"],"names":[],"mappings":";;;;;AAwBO,SAAS,eAAe,MAAM,SAAS,IAAI;AAC9C,QAAM,CAAC,OAAO,MAAM,OAAO,IAAI,SAAS,IAAI;AAC5C,QAAM,EAAC,OAAM,IAAI,iBAAgB;AACjC,QAAM,SAAS,cAAa;AAC5B,QAAM,EAAC,mBAAkB,IAAI,mBAAkB;AAE/C,SAAO;AAAA,IACH;AAAA,IACA,OAAO,MAAM;AAAA,IACb,UAAU,CAAC,UAAU,SAAS;AAC1B,cAAQ,SAAS,KAAK;AACtB,aAAO,WAAW,OAAO,GAAG,IAAI;AAAA,IACpC;AAAA,IACA,QAAQ,IAAI,SAAS;AACjB,cAAQ,WAAW,IAAI;AACvB,aAAO,SAAS,GAAG,IAAI;AAAA,IAC3B;AAAA,IACA,OAAO,KAAK,UAAU,KAAK,QAAQ;AAAA,IACnC,UAAU,OAAO,aAAa,uBAAuB,QAAQ,mBAAmB,QAAQ,MAAM,MAAM;AAAA,EAC5G;AACA;"}

package/dist/forms.js

@@ -1,69 +1,74 @@
 "use client";
-import { FieldArray, Form, Formik, useField, useFormikContext } from "formik";
-import { default as default2 } from "./forms/FormAttachmentsField.js";
-import { default as default3 } from "./forms/FormCatalogField.js";
-import { default as default4 } from "./forms/FormCheckboxGroupField.js";
-import { default as default5 } from "./forms/FormColorField.js";
-import { default as default6 } from "./forms/FormFileField.js";
-import { default as default7 } from "./forms/FormFileUploadField.js";
-import { default as default8 } from "./forms/FormImageField.js";
-import { default as default9 } from "./forms/FormMaskedField.js";
-import { default as default10 } from "./forms/FormNumberField.js";
-import { default as default11 } from "./forms/FormProblemAlert.js";
-import { default as default12 } from "./forms/FormRepeatingFields.js";
-import { default as default13 } from "./forms/FormTransferListField.js";
+import { FieldArray, Form, useField, useFormikContext } from "formik";
+import { default as default2 } from "./forms/CalcitaFormik.js";
+import { FormSchemaProvider, useFormSchema } from "./forms/FormSchemaProvider.js";
+import { default as default3 } from "./forms/FormAttachmentsField.js";
+import { default as default4 } from "./forms/FormCatalogField.js";
+import { default as default5 } from "./forms/FormCheckboxGroupField.js";
+import { default as default6 } from "./forms/FormColorField.js";
+import { default as default7 } from "./forms/FormFileField.js";
+import { default as default8 } from "./forms/FormFileUploadField.js";
+import { default as default9 } from "./forms/FormImageField.js";
+import { default as default10 } from "./forms/FormMaskedField.js";
+import { default as default11 } from "./forms/FormNumberField.js";
+import { default as default12 } from "./forms/FormProblemAlert.js";
+import { default as default13 } from "./forms/FormRepeatingFields.js";
+import { default as default14 } from "./forms/FormTransferListField.js";
 import { listTotalAtMostRule, listTotalOf, orderedInListRule, uniqueInListRule } from "./forms/listRules.js";
 import { percentRule, sameAsFieldRule } from "./forms/fieldRules.js";
-import { default as default14 } from "./forms/FormSelectField.js";
-import { default as default15 } from "./forms/FormServerProblem.js";
-import { default as default16 } from "./forms/FormTextField.js";
-import { default as default17 } from "./forms/FormWizard.js";
-import { default as default18 } from "./forms/auth/ChangePasswordForm.js";
-import { default as default19 } from "./forms/auth/ForgotPasswordForm.js";
-import { default as default20 } from "./forms/auth/SignInForm.js";
-import { SECOND_STEP_METHOD, default as default21 } from "./forms/security/SecondStepForm.js";
-import { default as default22 } from "./forms/security/TwoStepVerificationCard.js";
+import { default as default15 } from "./forms/FormSelectField.js";
+import { default as default16 } from "./forms/FormServerProblem.js";
+import { default as default17 } from "./forms/FormTextField.js";
+import { default as default18 } from "./forms/FormWizard.js";
+import { default as default19 } from "./forms/auth/ChangePasswordForm.js";
+import { default as default20 } from "./forms/auth/ForgotPasswordForm.js";
+import { default as default21 } from "./forms/auth/SignInForm.js";
+import { SECOND_STEP_METHOD, default as default22 } from "./forms/security/SecondStepForm.js";
+import { default as default23 } from "./forms/security/TwoStepVerificationCard.js";
 import { RECOVERY_CODE_PATTERN, TOTP_CODE_PATTERN, normalizeRecoveryCode, normalizeTotpCode } from "./forms/security/securityRules.js";
-import { default as default23 } from "./forms/SubmitButton.js";
+import { default as default24 } from "./forms/SubmitButton.js";
 import { applyServerProblem } from "./forms/applyServerProblem.js";
 import { formLevelMessageOf, splitRowFieldErrors, splitServerFieldErrors } from "./forms/serverProblemFields.js";
+import { isRequiredInSchema } from "./forms/schemaRequired.js";
 import { useFormikField } from "./forms/useFormikField.js";
 import { buildYupLocale } from "./forms/validation.js";
 import * as Yup from "yup";
 import { translateValidationMessage } from "./forms/validationMessages.js";
 export {
-  default18 as ChangePasswordForm,
+  default19 as ChangePasswordForm,
   FieldArray,
-  default19 as ForgotPasswordForm,
+  default20 as ForgotPasswordForm,
   Form,
-  default2 as FormAttachmentsField,
-  default3 as FormCatalogField,
-  default4 as FormCheckboxGroupField,
-  default5 as FormColorField,
-  default6 as FormFileField,
-  default7 as FormFileUploadField,
-  default8 as FormImageField,
-  default9 as FormMaskedField,
-  default10 as FormNumberField,
-  default11 as FormProblemAlert,
-  default12 as FormRepeatingFields,
-  default14 as FormSelectField,
-  default15 as FormServerProblem,
-  default16 as FormTextField,
-  default13 as FormTransferListField,
-  default17 as FormWizard,
-  Formik,
+  default3 as FormAttachmentsField,
+  default4 as FormCatalogField,
+  default5 as FormCheckboxGroupField,
+  default6 as FormColorField,
+  default7 as FormFileField,
+  default8 as FormFileUploadField,
+  default9 as FormImageField,
+  default10 as FormMaskedField,
+  default11 as FormNumberField,
+  default12 as FormProblemAlert,
+  default13 as FormRepeatingFields,
+  FormSchemaProvider,
+  default15 as FormSelectField,
+  default16 as FormServerProblem,
+  default17 as FormTextField,
+  default14 as FormTransferListField,
+  default18 as FormWizard,
+  default2 as Formik,
   RECOVERY_CODE_PATTERN,
   SECOND_STEP_METHOD,
-  default21 as SecondStepForm,
-  default20 as SignInForm,
-  default23 as SubmitButton,
+  default22 as SecondStepForm,
+  default21 as SignInForm,
+  default24 as SubmitButton,
   TOTP_CODE_PATTERN,
-  default22 as TwoStepVerificationCard,
+  default23 as TwoStepVerificationCard,
   Yup,
   applyServerProblem,
   buildYupLocale,
   formLevelMessageOf,
+  isRequiredInSchema,
   listTotalAtMostRule,
   listTotalOf,
   normalizeRecoveryCode,
@@ -76,6 +81,7 @@ export {
   translateValidationMessage,
   uniqueInListRule,
   useField,
+  useFormSchema,
   useFormikContext,
   useFormikField
 };

package/dist/forms.js.map

@@ -1 +1 @@
-{"version":3,"file":"forms.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"forms.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/hookForm/FormAttachmentsField.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useHookFormField } from "./useHookFormField.js";
 import AttachmentsInput from "../upload/AttachmentsInput.js";
 function FormAttachmentsField({ name, control, ...inputProps }) {
-  const fieldProps = useHookFormField(name, control);
+  const fieldProps = useHookFormField(name, control, inputProps);
   return /* @__PURE__ */ jsx(AttachmentsInput, { ...inputProps, ...fieldProps });
 }
 export {

package/dist/hookForm/FormAttachmentsField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormAttachmentsField.js","sources":["../../src/hookForm/FormAttachmentsField.jsx"],"sourcesContent":["// Campo de varios archivos de react-hook-form: AttachmentsInput (upload/) conectado a su campo con useController. Se ve y\n// se porta igual que el FormAttachmentsField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\nimport AttachmentsInput from '@/upload/AttachmentsInput.jsx';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/upload/AttachmentsInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las del campo de la casa, sin\n *     value / onChange / onBlur / error; control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormAttachmentsField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control);\n    return <AttachmentsInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,qBAAqB,EAAC,MAAM,SAAS,GAAG,cAAa;AACzE,QAAM,aAAa,iBAAiB,MAAM,OAAO;AACjD,SAAO,oBAAC,kBAAA,EAAkB,GAAG,YAAa,GAAG,WAAA,CAAY;AAC7D;"}
+{"version":3,"file":"FormAttachmentsField.js","sources":["../../src/hookForm/FormAttachmentsField.jsx"],"sourcesContent":["// Campo de varios archivos de react-hook-form: AttachmentsInput (upload/) conectado a su campo con useController. Se ve y\n// se porta igual que el FormAttachmentsField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\nimport AttachmentsInput from '@/upload/AttachmentsInput.jsx';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/upload/AttachmentsInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('@/upload/AttachmentsInput.jsx').default>[0], 'onChange'|'onBlur'>>} props las del campo de la casa, sin\n *     value ni error (su onChange y su onBlur corren después de los del formulario); control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormAttachmentsField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control, inputProps);\n    return <AttachmentsInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,qBAAqB,EAAC,MAAM,SAAS,GAAG,cAAa;AACzE,QAAM,aAAa,iBAAiB,MAAM,SAAS,UAAU;AAC7D,SAAO,oBAAC,kBAAA,EAAkB,GAAG,YAAa,GAAG,WAAA,CAAY;AAC7D;"}

package/dist/hookForm/FormCatalogField.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import CatalogInput from "../inputs/CatalogInput.js";
 import { useHookFormField } from "./useHookFormField.js";
 function FormCatalogField({ name, control, ...inputProps }) {
-  const fieldProps = useHookFormField(name, control);
+  const fieldProps = useHookFormField(name, control, inputProps);
   return /* @__PURE__ */ jsx(CatalogInput, { ...inputProps, ...fieldProps });
 }
 export {

package/dist/hookForm/FormCatalogField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormCatalogField.js","sources":["../../src/hookForm/FormCatalogField.jsx"],"sourcesContent":["// Campo de catálogo de react-hook-form: CatalogInput (inputs/) conectado a su campo con useController. Se ve y se porta igual que\n// el FormCatalogField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport CatalogInput from '@/inputs/CatalogInput.jsx';\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/CatalogInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las del campo de la casa, sin\n *     value / onChange / onBlur / error; control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormCatalogField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control);\n    return <CatalogInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,iBAAiB,EAAC,MAAM,SAAS,GAAG,cAAa;AACrE,QAAM,aAAa,iBAAiB,MAAM,OAAO;AACjD,SAAO,oBAAC,cAAA,EAAc,GAAG,YAAa,GAAG,WAAA,CAAY;AACzD;"}
+{"version":3,"file":"FormCatalogField.js","sources":["../../src/hookForm/FormCatalogField.jsx"],"sourcesContent":["// Campo de catálogo de react-hook-form: CatalogInput (inputs/) conectado a su campo con useController. Se ve y se porta igual que\n// el FormCatalogField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport CatalogInput from '@/inputs/CatalogInput.jsx';\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/CatalogInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('@/inputs/CatalogInput.jsx').default>[0], 'onChange'|'onBlur'>>} props las del campo de la casa, sin\n *     value ni error (su onChange y su onBlur corren después de los del formulario); control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormCatalogField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control, inputProps);\n    return <CatalogInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,iBAAiB,EAAC,MAAM,SAAS,GAAG,cAAa;AACrE,QAAM,aAAa,iBAAiB,MAAM,SAAS,UAAU;AAC7D,SAAO,oBAAC,cAAA,EAAc,GAAG,YAAa,GAAG,WAAA,CAAY;AACzD;"}

package/dist/hookForm/FormCheckboxGroupField.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useHookFormField } from "./useHookFormField.js";
 import CheckboxGroupInput from "../inputs/CheckboxGroupInput.js";
 function FormCheckboxGroupField({ name, control, ...inputProps }) {
-  const fieldProps = useHookFormField(name, control);
+  const fieldProps = useHookFormField(name, control, inputProps);
   return /* @__PURE__ */ jsx(CheckboxGroupInput, { ...inputProps, ...fieldProps });
 }
 export {

package/dist/hookForm/FormCheckboxGroupField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormCheckboxGroupField.js","sources":["../../src/hookForm/FormCheckboxGroupField.jsx"],"sourcesContent":["// El grupo de casillas de react-hook-form: CheckboxGroupInput (inputs/) conectado con useController. Se ve y se porta\n// igual que el de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\nimport CheckboxGroupInput from '@/inputs/CheckboxGroupInput.jsx';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/CheckboxGroupInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las del campo de la casa, sin\n *     value / onChange / onBlur / error; control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormCheckboxGroupField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control);\n    return <CheckboxGroupInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,uBAAuB,EAAC,MAAM,SAAS,GAAG,cAAa;AAC3E,QAAM,aAAa,iBAAiB,MAAM,OAAO;AACjD,SAAO,oBAAC,oBAAA,EAAoB,GAAG,YAAa,GAAG,WAAA,CAAY;AAC/D;"}
+{"version":3,"file":"FormCheckboxGroupField.js","sources":["../../src/hookForm/FormCheckboxGroupField.jsx"],"sourcesContent":["// El grupo de casillas de react-hook-form: CheckboxGroupInput (inputs/) conectado con useController. Se ve y se porta\n// igual que el de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\nimport CheckboxGroupInput from '@/inputs/CheckboxGroupInput.jsx';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/CheckboxGroupInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('@/inputs/CheckboxGroupInput.jsx').default>[0], 'onChange'|'onBlur'>>} props las del campo de la casa, sin\n *     value ni error (su onChange y su onBlur corren después de los del formulario); control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormCheckboxGroupField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control, inputProps);\n    return <CheckboxGroupInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,uBAAuB,EAAC,MAAM,SAAS,GAAG,cAAa;AAC3E,QAAM,aAAa,iBAAiB,MAAM,SAAS,UAAU;AAC7D,SAAO,oBAAC,oBAAA,EAAoB,GAAG,YAAa,GAAG,WAAA,CAAY;AAC/D;"}

package/dist/hookForm/FormColorField.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import ColorInput from "../inputs/ColorInput.js";
 import { useHookFormField } from "./useHookFormField.js";
 function FormColorField({ name, control, ...inputProps }) {
-  const fieldProps = useHookFormField(name, control);
+  const fieldProps = useHookFormField(name, control, inputProps);
   return /* @__PURE__ */ jsx(ColorInput, { ...inputProps, ...fieldProps });
 }
 export {

package/dist/hookForm/FormColorField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormColorField.js","sources":["../../src/hookForm/FormColorField.jsx"],"sourcesContent":["// Campo de color de react-hook-form: ColorInput (inputs/) conectado a su campo con useController. Se ve y se porta igual que\n// el FormColorField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport ColorInput from '@/inputs/ColorInput.jsx';\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/ColorInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las del campo de la casa, sin\n *     value / onChange / onBlur / error; control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormColorField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control);\n    return <ColorInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,eAAe,EAAC,MAAM,SAAS,GAAG,cAAa;AACnE,QAAM,aAAa,iBAAiB,MAAM,OAAO;AACjD,SAAO,oBAAC,YAAA,EAAY,GAAG,YAAa,GAAG,WAAA,CAAY;AACvD;"}
+{"version":3,"file":"FormColorField.js","sources":["../../src/hookForm/FormColorField.jsx"],"sourcesContent":["// Campo de color de react-hook-form: ColorInput (inputs/) conectado a su campo con useController. Se ve y se porta igual que\n// el FormColorField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport ColorInput from '@/inputs/ColorInput.jsx';\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/ColorInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('@/inputs/ColorInput.jsx').default>[0], 'onChange'|'onBlur'>>} props las del campo de la casa, sin\n *     value ni error (su onChange y su onBlur corren después de los del formulario); control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormColorField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control, inputProps);\n    return <ColorInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,eAAe,EAAC,MAAM,SAAS,GAAG,cAAa;AACnE,QAAM,aAAa,iBAAiB,MAAM,SAAS,UAAU;AAC7D,SAAO,oBAAC,YAAA,EAAY,GAAG,YAAa,GAAG,WAAA,CAAY;AACvD;"}

package/dist/hookForm/FormFileField.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useHookFormField } from "./useHookFormField.js";
 import FileInput from "../upload/FileInput.js";
 function FormFileField({ name, control, ...inputProps }) {
-  const fieldProps = useHookFormField(name, control);
+  const fieldProps = useHookFormField(name, control, inputProps);
   return /* @__PURE__ */ jsx(FileInput, { ...inputProps, ...fieldProps });
 }
 export {

package/dist/hookForm/FormFileField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFileField.js","sources":["../../src/hookForm/FormFileField.jsx"],"sourcesContent":["// Campo de un archivo de react-hook-form: FileInput (upload/) conectado a su campo con useController. Se ve y se porta igual\n// que el FormFileField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\nimport FileInput from '@/upload/FileInput.jsx';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/upload/FileInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las del campo de la casa, sin\n *     value / onChange / onBlur / error; control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormFileField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control);\n    return <FileInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,cAAc,EAAC,MAAM,SAAS,GAAG,cAAa;AAClE,QAAM,aAAa,iBAAiB,MAAM,OAAO;AACjD,SAAO,oBAAC,WAAA,EAAW,GAAG,YAAa,GAAG,WAAA,CAAY;AACtD;"}
+{"version":3,"file":"FormFileField.js","sources":["../../src/hookForm/FormFileField.jsx"],"sourcesContent":["// Campo de un archivo de react-hook-form: FileInput (upload/) conectado a su campo con useController. Se ve y se porta igual\n// que el FormFileField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\nimport FileInput from '@/upload/FileInput.jsx';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/upload/FileInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('@/upload/FileInput.jsx').default>[0], 'onChange'|'onBlur'>>} props las del campo de la casa, sin\n *     value ni error (su onChange y su onBlur corren después de los del formulario); control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormFileField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control, inputProps);\n    return <FileInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,cAAc,EAAC,MAAM,SAAS,GAAG,cAAa;AAClE,QAAM,aAAa,iBAAiB,MAAM,SAAS,UAAU;AAC7D,SAAO,oBAAC,WAAA,EAAW,GAAG,YAAa,GAAG,WAAA,CAAY;AACtD;"}

package/dist/hookForm/FormFileUploadField.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useHookFormField } from "./useHookFormField.js";
 import FileUploadInput from "../upload/FileUploadInput.js";
 function FormFileUploadField({ name, control, ...inputProps }) {
-  const fieldProps = useHookFormField(name, control);
+  const fieldProps = useHookFormField(name, control, inputProps);
   return /* @__PURE__ */ jsx(FileUploadInput, { ...inputProps, ...fieldProps });
 }
 export {

package/dist/hookForm/FormFileUploadField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFileUploadField.js","sources":["../../src/hookForm/FormFileUploadField.jsx"],"sourcesContent":["// El cargador mini de react-hook-form: FileUploadInput (upload/) conectado a su campo con useController. Se ve y se porta\n// igual que el FormFileUploadField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\nimport FileUploadInput from '@/upload/FileUploadInput.jsx';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/upload/FileUploadInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las del campo de la casa, sin\n *     value / onChange / onBlur / error; control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormFileUploadField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control);\n    return <FileUploadInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,oBAAoB,EAAC,MAAM,SAAS,GAAG,cAAa;AACxE,QAAM,aAAa,iBAAiB,MAAM,OAAO;AACjD,SAAO,oBAAC,iBAAA,EAAiB,GAAG,YAAa,GAAG,WAAA,CAAY;AAC5D;"}
+{"version":3,"file":"FormFileUploadField.js","sources":["../../src/hookForm/FormFileUploadField.jsx"],"sourcesContent":["// El cargador mini de react-hook-form: FileUploadInput (upload/) conectado a su campo con useController. Se ve y se porta\n// igual que el FormFileUploadField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\nimport FileUploadInput from '@/upload/FileUploadInput.jsx';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/upload/FileUploadInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('@/upload/FileUploadInput.jsx').default>[0], 'onChange'|'onBlur'>>} props las del campo de la casa, sin\n *     value ni error (su onChange y su onBlur corren después de los del formulario); control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormFileUploadField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control, inputProps);\n    return <FileUploadInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,oBAAoB,EAAC,MAAM,SAAS,GAAG,cAAa;AACxE,QAAM,aAAa,iBAAiB,MAAM,SAAS,UAAU;AAC7D,SAAO,oBAAC,iBAAA,EAAiB,GAAG,YAAa,GAAG,WAAA,CAAY;AAC5D;"}

package/dist/hookForm/FormImageField.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useHookFormField } from "./useHookFormField.js";
 import ImageInput from "../upload/ImageInput.js";
 function FormImageField({ name, control, ...inputProps }) {
-  const fieldProps = useHookFormField(name, control);
+  const fieldProps = useHookFormField(name, control, inputProps);
   return /* @__PURE__ */ jsx(ImageInput, { ...inputProps, ...fieldProps });
 }
 export {

package/dist/hookForm/FormImageField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormImageField.js","sources":["../../src/hookForm/FormImageField.jsx"],"sourcesContent":["// Campo de una imagen de react-hook-form: ImageInput (upload/) conectado a su campo con useController. Se ve y se porta igual\n// que el FormImageField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\nimport ImageInput from '@/upload/ImageInput.jsx';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/upload/ImageInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las del campo de la casa, sin\n *     value / onChange / onBlur / error; control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormImageField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control);\n    return <ImageInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,eAAe,EAAC,MAAM,SAAS,GAAG,cAAa;AACnE,QAAM,aAAa,iBAAiB,MAAM,OAAO;AACjD,SAAO,oBAAC,YAAA,EAAY,GAAG,YAAa,GAAG,WAAA,CAAY;AACvD;"}
+{"version":3,"file":"FormImageField.js","sources":["../../src/hookForm/FormImageField.jsx"],"sourcesContent":["// Campo de una imagen de react-hook-form: ImageInput (upload/) conectado a su campo con useController. Se ve y se porta igual\n// que el FormImageField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\nimport ImageInput from '@/upload/ImageInput.jsx';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/upload/ImageInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('@/upload/ImageInput.jsx').default>[0], 'onChange'|'onBlur'>>} props las del campo de la casa, sin\n *     value ni error (su onChange y su onBlur corren después de los del formulario); control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormImageField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control, inputProps);\n    return <ImageInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,eAAe,EAAC,MAAM,SAAS,GAAG,cAAa;AACnE,QAAM,aAAa,iBAAiB,MAAM,SAAS,UAAU;AAC7D,SAAO,oBAAC,YAAA,EAAY,GAAG,YAAa,GAAG,WAAA,CAAY;AACvD;"}

package/dist/hookForm/FormMaskedField.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useHookFormField } from "./useHookFormField.js";
 import MaskedInput from "../inputs/MaskedInput.js";
 function FormMaskedField({ name, control, ...inputProps }) {
-  const fieldProps = useHookFormField(name, control);
+  const fieldProps = useHookFormField(name, control, inputProps);
   return /* @__PURE__ */ jsx(MaskedInput, { ...inputProps, ...fieldProps });
 }
 export {

package/dist/hookForm/FormMaskedField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormMaskedField.js","sources":["../../src/hookForm/FormMaskedField.jsx"],"sourcesContent":["// Campo con máscara de react-hook-form: MaskedInput (inputs/) conectado a su campo. Al formulario llega el valor LIMPIO (sin\n// separadores, en mayúsculas): «5551234567», no «555 123 4567».\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\nimport MaskedInput from '@/inputs/MaskedInput.jsx';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/MaskedInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props\n *     las de MaskedInput (mask, label, helperText, placeholder…), sin value / onChange / onBlur / error; control: el de useForm,\n *     si la pantalla no usa FormProvider\n */\nexport default function FormMaskedField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control);\n    return <MaskedInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAYA,SAAwB,gBAAgB,EAAC,MAAM,SAAS,GAAG,cAAa;AACpE,QAAM,aAAa,iBAAiB,MAAM,OAAO;AACjD,SAAO,oBAAC,aAAA,EAAa,GAAG,YAAa,GAAG,WAAA,CAAY;AACxD;"}
+{"version":3,"file":"FormMaskedField.js","sources":["../../src/hookForm/FormMaskedField.jsx"],"sourcesContent":["// Campo con máscara de react-hook-form: MaskedInput (inputs/) conectado a su campo. Al formulario llega el valor LIMPIO (sin\n// separadores, en mayúsculas): «5551234567», no «555 123 4567».\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\nimport MaskedInput from '@/inputs/MaskedInput.jsx';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/MaskedInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('@/inputs/MaskedInput.jsx').default>[0], 'onChange'|'onBlur'>>} props\n *     las de MaskedInput (mask, label, helperText, placeholder…), sin value ni error (su onChange y su onBlur corren después de los del formulario); control: el de useForm,\n *     si la pantalla no usa FormProvider\n */\nexport default function FormMaskedField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control, inputProps);\n    return <MaskedInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAYA,SAAwB,gBAAgB,EAAC,MAAM,SAAS,GAAG,cAAa;AACpE,QAAM,aAAa,iBAAiB,MAAM,SAAS,UAAU;AAC7D,SAAO,oBAAC,aAAA,EAAa,GAAG,YAAa,GAAG,WAAA,CAAY;AACxD;"}

package/dist/hookForm/FormNumberField.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import NumberInput from "../inputs/NumberInput.js";
 import { useHookFormField } from "./useHookFormField.js";
 function FormNumberField({ name, control, ...inputProps }) {
-  const fieldProps = useHookFormField(name, control);
+  const fieldProps = useHookFormField(name, control, inputProps);
   return /* @__PURE__ */ jsx(NumberInput, { ...inputProps, ...fieldProps });
 }
 export {

package/dist/hookForm/FormNumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormNumberField.js","sources":["../../src/hookForm/FormNumberField.jsx"],"sourcesContent":["// Campo de número de react-hook-form: NumberInput (inputs/) conectado a su campo con useController. Se ve y se porta igual que\n// el FormNumberField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport NumberInput from '@/inputs/NumberInput.jsx';\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/NumberInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las del campo de la casa, sin\n *     value / onChange / onBlur / error; control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormNumberField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control);\n    return <NumberInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,gBAAgB,EAAC,MAAM,SAAS,GAAG,cAAa;AACpE,QAAM,aAAa,iBAAiB,MAAM,OAAO;AACjD,SAAO,oBAAC,aAAA,EAAa,GAAG,YAAa,GAAG,WAAA,CAAY;AACxD;"}
+{"version":3,"file":"FormNumberField.js","sources":["../../src/hookForm/FormNumberField.jsx"],"sourcesContent":["// Campo de número de react-hook-form: NumberInput (inputs/) conectado a su campo con useController. Se ve y se porta igual que\n// el FormNumberField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport NumberInput from '@/inputs/NumberInput.jsx';\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/NumberInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('@/inputs/NumberInput.jsx').default>[0], 'onChange'|'onBlur'>>} props las del campo de la casa, sin\n *     value ni error (su onChange y su onBlur corren después de los del formulario); control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormNumberField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control, inputProps);\n    return <NumberInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,gBAAgB,EAAC,MAAM,SAAS,GAAG,cAAa;AACpE,QAAM,aAAa,iBAAiB,MAAM,SAAS,UAAU;AAC7D,SAAO,oBAAC,aAAA,EAAa,GAAG,YAAa,GAAG,WAAA,CAAY;AACxD;"}

package/dist/hookForm/FormSelectField.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import SelectInput from "../inputs/SelectInput.js";
 import { useHookFormField } from "./useHookFormField.js";
 function FormSelectField({ name, control, ...inputProps }) {
-  const fieldProps = useHookFormField(name, control);
+  const fieldProps = useHookFormField(name, control, inputProps);
   return /* @__PURE__ */ jsx(SelectInput, { ...inputProps, ...fieldProps });
 }
 export {

package/dist/hookForm/FormSelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormSelectField.js","sources":["../../src/hookForm/FormSelectField.jsx"],"sourcesContent":["// Campo de lista desplegable de react-hook-form: SelectInput (inputs/) conectado a su campo con useController. Se ve y se porta igual que\n// el FormSelectField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport SelectInput from '@/inputs/SelectInput.jsx';\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/SelectInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las del campo de la casa, sin\n *     value / onChange / onBlur / error; control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormSelectField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control);\n    return <SelectInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,gBAAgB,EAAC,MAAM,SAAS,GAAG,cAAa;AACpE,QAAM,aAAa,iBAAiB,MAAM,OAAO;AACjD,SAAO,oBAAC,aAAA,EAAa,GAAG,YAAa,GAAG,WAAA,CAAY;AACxD;"}
+{"version":3,"file":"FormSelectField.js","sources":["../../src/hookForm/FormSelectField.jsx"],"sourcesContent":["// Campo de lista desplegable de react-hook-form: SelectInput (inputs/) conectado a su campo con useController. Se ve y se porta igual que\n// el FormSelectField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport SelectInput from '@/inputs/SelectInput.jsx';\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/SelectInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('@/inputs/SelectInput.jsx').default>[0], 'onChange'|'onBlur'>>} props las del campo de la casa, sin\n *     value ni error (su onChange y su onBlur corren después de los del formulario); control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormSelectField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control, inputProps);\n    return <SelectInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,gBAAgB,EAAC,MAAM,SAAS,GAAG,cAAa;AACpE,QAAM,aAAa,iBAAiB,MAAM,SAAS,UAAU;AAC7D,SAAO,oBAAC,aAAA,EAAa,GAAG,YAAa,GAAG,WAAA,CAAY;AACxD;"}

package/dist/hookForm/FormTextField.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import TextInput from "../inputs/TextInput.js";
 import { useHookFormField } from "./useHookFormField.js";
 function FormTextField({ name, control, ...inputProps }) {
-  const fieldProps = useHookFormField(name, control);
+  const fieldProps = useHookFormField(name, control, inputProps);
   return /* @__PURE__ */ jsx(TextInput, { ...inputProps, ...fieldProps });
 }
 export {

package/dist/hookForm/FormTextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormTextField.js","sources":["../../src/hookForm/FormTextField.jsx"],"sourcesContent":["// Campo de texto de react-hook-form: TextInput (inputs/) conectado a su campo con useController. Se ve y se porta igual que\n// el FormTextField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport TextInput from '@/inputs/TextInput.jsx';\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/TextInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las del campo de la casa, sin\n *     value / onChange / onBlur / error; control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormTextField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control);\n    return <TextInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,cAAc,EAAC,MAAM,SAAS,GAAG,cAAa;AAClE,QAAM,aAAa,iBAAiB,MAAM,OAAO;AACjD,SAAO,oBAAC,WAAA,EAAW,GAAG,YAAa,GAAG,WAAA,CAAY;AACtD;"}
+{"version":3,"file":"FormTextField.js","sources":["../../src/hookForm/FormTextField.jsx"],"sourcesContent":["// Campo de texto de react-hook-form: TextInput (inputs/) conectado a su campo con useController. Se ve y se porta igual que\n// el FormTextField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport TextInput from '@/inputs/TextInput.jsx';\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/TextInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('@/inputs/TextInput.jsx').default>[0], 'onChange'|'onBlur'>>} props las del campo de la casa, sin\n *     value ni error (su onChange y su onBlur corren después de los del formulario); control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormTextField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control, inputProps);\n    return <TextInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,cAAc,EAAC,MAAM,SAAS,GAAG,cAAa;AAClE,QAAM,aAAa,iBAAiB,MAAM,SAAS,UAAU;AAC7D,SAAO,oBAAC,WAAA,EAAW,GAAG,YAAa,GAAG,WAAA,CAAY;AACtD;"}

package/dist/hookForm/FormTransferListField.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useHookFormField } from "./useHookFormField.js";
 import TransferListInput from "../inputs/TransferListInput.js";
 function FormTransferListField({ name, control, ...inputProps }) {
-  const fieldProps = useHookFormField(name, control);
+  const fieldProps = useHookFormField(name, control, inputProps);
   return /* @__PURE__ */ jsx(TransferListInput, { ...inputProps, ...fieldProps });
 }
 export {

package/dist/hookForm/FormTransferListField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormTransferListField.js","sources":["../../src/hookForm/FormTransferListField.jsx"],"sourcesContent":["// La lista de transferencia de react-hook-form: TransferListInput (inputs/) conectada con useController. Se ve y se porta\n// igual que la de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\nimport TransferListInput from '@/inputs/TransferListInput.jsx';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/TransferListInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las del campo de la casa, sin\n *     value / onChange / onBlur / error; control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormTransferListField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control);\n    return <TransferListInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,sBAAsB,EAAC,MAAM,SAAS,GAAG,cAAa;AAC1E,QAAM,aAAa,iBAAiB,MAAM,OAAO;AACjD,SAAO,oBAAC,mBAAA,EAAmB,GAAG,YAAa,GAAG,WAAA,CAAY;AAC9D;"}
+{"version":3,"file":"FormTransferListField.js","sources":["../../src/hookForm/FormTransferListField.jsx"],"sourcesContent":["// La lista de transferencia de react-hook-form: TransferListInput (inputs/) conectada con useController. Se ve y se porta\n// igual que la de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\nimport TransferListInput from '@/inputs/TransferListInput.jsx';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/TransferListInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('@/inputs/TransferListInput.jsx').default>[0], 'onChange'|'onBlur'>>} props las del campo de la casa, sin\n *     value ni error (su onChange y su onBlur corren después de los del formulario); control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormTransferListField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control, inputProps);\n    return <TransferListInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,sBAAsB,EAAC,MAAM,SAAS,GAAG,cAAa;AAC1E,QAAM,aAAa,iBAAiB,MAAM,SAAS,UAAU;AAC7D,SAAO,oBAAC,mBAAA,EAAmB,GAAG,YAAa,GAAG,WAAA,CAAY;AAC9D;"}

package/dist/hookForm/FormWizard.js

@@ -4,15 +4,30 @@ import { useState, useRef, useEffect } from "react";
 import { useFormContext } from "react-hook-form";
 import FormProblemAlert from "./FormProblemAlert.js";
 import SubmitButton from "./SubmitButton.js";
+import { useWizardSteps } from "../inputs/useWizardSteps.js";
 import WizardLayout from "../inputs/WizardLayout.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
-function FormWizard({ steps, submitLabel, texts, ...unknownProps }) {
+function FormWizard({
+  steps,
+  submitLabel,
+  orientation,
+  hideBackOnFirstStep,
+  initialStepKey,
+  stepSelection,
+  onStepChange,
+  texts,
+  ...unknownProps
+}) {
   warnUnknownProps("FormWizard", unknownProps);
   const { trigger, resetField, getFieldState, formState } = useFormContext();
   const { isSubmitting, submitCount } = formState;
-  const [activeIndex, setActiveIndex] = useState(0);
   const [skippedKeys, setSkippedKeys] = useState(() => /* @__PURE__ */ new Set());
   const wasSubmitting = useRef(false);
+  const isStepValid = async (index) => {
+    const stepFields = steps[index].fields ?? [];
+    return stepFields.length === 0 || trigger(stepFields, { shouldFocus: true });
+  };
+  const { activeIndex, setActiveIndex, selectStep } = useWizardSteps({ steps, initialStepKey, stepSelection, onStepChange, isStepValid });
   const activeStep = steps[activeIndex];
   useEffect(() => {
     if (wasSubmitting.current && !isSubmitting) {
@@ -24,9 +39,7 @@ function FormWizard({ steps, submitLabel, texts, ...unknownProps }) {
     wasSubmitting.current = isSubmitting;
   }, [isSubmitting, submitCount]);
   const goNext = async () => {
-    const stepFields = activeStep.fields ?? [];
-    const isStepValid = stepFields.length === 0 || await trigger(stepFields, { shouldFocus: true });
-    if (!isStepValid) {
+    if (!await isStepValid(activeIndex)) {
       return;
     }
     setSkippedKeys((currentKeys) => new Set([...currentKeys].filter((key) => key !== activeStep.key)));
@@ -46,9 +59,12 @@ function FormWizard({ steps, submitLabel, texts, ...unknownProps }) {
       activeIndex,
       skippedKeys,
       isSubmitting,
+      orientation,
+      hideBackOnFirstStep,
       onBack: () => setActiveIndex((currentIndex) => currentIndex - 1),
       onNext: goNext,
       onSkip: skipStep,
+      onStepSelect: selectStep,
       submitButton: /* @__PURE__ */ jsx(SubmitButton, { children: submitLabel }),
       problemAlert: /* @__PURE__ */ jsx(FormProblemAlert, {}),
       texts

package/dist/hookForm/FormWizard.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormWizard.js","sources":["../../src/hookForm/FormWizard.jsx"],"sourcesContent":["// Formulario por pasos (wizard) con react-hook-form: el mismo del de formik (@stackcraftmx/calcita/forms), con las mismas\n// props y el mismo comportamiento:\n//   - «Siguiente» revisa SOLO los campos del paso (trigger con sus nombres) y no avanza si alguno tiene error;\n//   - «Omitir este paso» (solo en los opcionales) regresa sus campos a su valor de inicio (resetField): omitir es no dar ese\n//     dato, no dejar lo que se escribió a medias;\n//   - el último paso envía TODO el formulario (el esquema de yup completo vale para todos los pasos);\n//   - si el envío falla por un campo de un paso anterior (yup o el 422 del servidor con applyServerProblem), regresa solo a\n//     ese paso: un error que no se ve no se puede corregir.\n//\n// Va DENTRO de <FormProvider> y del <form> con su handleSubmit (usa useFormContext):\n//   const form = useForm({resolver: yupResolver(schema), defaultValues});\n//   <FormProvider {...form}>\n//       <form noValidate onSubmit={form.handleSubmit(send)}>\n//           <FormWizard submitLabel=\"Enviar solicitud\" steps={[\n//               {key: 'datos', label: 'Sus datos', fields: ['name', 'email'], content: <>…campos…</>},\n//               {key: 'aval', label: 'Aval', optional: true, fields: ['guarantor'], content: <>…</>},\n//           ]} />\n//       </form>\n//   </FormProvider>\n//\n// Lo que se ve vive en WizardLayout (inputs/). Los textos se cambian con `texts`: {wizard: {next: 'Continuar'}}.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useRef, useState} from 'react';\nimport {useFormContext} from 'react-hook-form';\n\nimport FormProblemAlert from '@/hookForm/FormProblemAlert.jsx';\nimport SubmitButton from '@/hookForm/SubmitButton.jsx';\nimport WizardLayout from '@/inputs/WizardLayout.jsx';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n/**\n * @param {object} props\n * @param {Object[]} props.steps en orden\n * @param {string} props.steps[].key\n * @param {string} props.steps[].label ya traducido\n * @param {string[]} [props.steps[].fields] los campos del paso (los que revisa «Siguiente»)\n * @param {boolean} [props.steps[].optional] se puede omitir\n * @param {import('react').ReactNode} props.steps[].content los campos del paso\n * @param {string} props.submitLabel ya traducido: el botón del último paso\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {wizard: {next, back, skip, optional, skipped, stepOf}}\n */\nexport default function FormWizard({steps, submitLabel, texts, ...unknownProps}) {\n    warnUnknownProps('FormWizard', unknownProps);\n    const {trigger, resetField, getFieldState, formState} = useFormContext();\n    const {isSubmitting, submitCount} = formState;\n    const [activeIndex, setActiveIndex] = useState(0);\n    const [skippedKeys, setSkippedKeys] = useState(() => new Set());\n    const wasSubmitting = useRef(false);\n    const activeStep = steps[activeIndex];\n\n    // al terminar un envío fallido, regresa al paso con el primer error (solo en ese momento: escribir en otro paso no\n    // debe jalar a la persona de regreso). OJO: getFieldState necesita formState para leer los errores de ahora\n    useEffect(() => {\n        if (wasSubmitting.current && !isSubmitting) {\n            const errorStepIndex = steps.findIndex((step) => (step.fields ?? []).some((field) => getFieldState(field, formState).invalid));\n            if (errorStepIndex >= 0) {\n                setActiveIndex(errorStepIndex);\n            }\n        }\n        wasSubmitting.current = isSubmitting;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isSubmitting, submitCount]);\n\n    const goNext = async () => {\n        const stepFields = activeStep.fields ?? [];\n        // guard clause: el paso tiene errores; se queda para que se corrijan (trigger los marca y los pinta)\n        const isStepValid = stepFields.length === 0 || await trigger(stepFields, {shouldFocus: true});\n        if (!isStepValid) {\n            return;\n        }\n        setSkippedKeys((currentKeys) => new Set([...currentKeys].filter((key) => key !== activeStep.key)));\n        setActiveIndex((currentIndex) => currentIndex + 1);\n    };\n\n    const skipStep = () => {\n        for (const field of activeStep.fields ?? []) {\n            resetField(field);\n        }\n        setSkippedKeys((currentKeys) => new Set([...currentKeys, activeStep.key]));\n        setActiveIndex((currentIndex) => currentIndex + 1);\n    };\n\n    return (\n        <WizardLayout steps={steps} activeIndex={activeIndex} skippedKeys={skippedKeys} isSubmitting={isSubmitting}\n                      onBack={() => setActiveIndex((currentIndex) => currentIndex - 1)} onNext={goNext} onSkip={skipStep}\n                      submitButton={<SubmitButton>{submitLabel}</SubmitButton>} problemAlert={<FormProblemAlert />} texts={texts} />\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AA0CA,SAAwB,WAAW,EAAC,OAAO,aAAa,OAAO,GAAG,gBAAe;AAC7E,mBAAiB,cAAc,YAAY;AAC3C,QAAM,EAAC,SAAS,YAAY,eAAe,UAAA,IAAa,eAAA;AACxD,QAAM,EAAC,cAAc,YAAA,IAAe;AACpC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,MAAM,oBAAI,KAAK;AAC9D,QAAM,gBAAgB,OAAO,KAAK;AAClC,QAAM,aAAa,MAAM,WAAW;AAIpC,YAAU,MAAM;AACZ,QAAI,cAAc,WAAW,CAAC,cAAc;AACxC,YAAM,iBAAiB,MAAM,UAAU,CAAC,UAAU,KAAK,UAAU,CAAA,GAAI,KAAK,CAAC,UAAU,cAAc,OAAO,SAAS,EAAE,OAAO,CAAC;AAC7H,UAAI,kBAAkB,GAAG;AACrB,uBAAe,cAAc;AAAA,MACjC;AAAA,IACJ;AACA,kBAAc,UAAU;AAAA,EAE5B,GAAG,CAAC,cAAc,WAAW,CAAC;AAE9B,QAAM,SAAS,YAAY;AACvB,UAAM,aAAa,WAAW,UAAU,CAAA;AAExC,UAAM,cAAc,WAAW,WAAW,KAAK,MAAM,QAAQ,YAAY,EAAC,aAAa,MAAK;AAC5F,QAAI,CAAC,aAAa;AACd;AAAA,IACJ;AACA,mBAAe,CAAC,gBAAgB,IAAI,IAAI,CAAC,GAAG,WAAW,EAAE,OAAO,CAAC,QAAQ,QAAQ,WAAW,GAAG,CAAC,CAAC;AACjG,mBAAe,CAAC,iBAAiB,eAAe,CAAC;AAAA,EACrD;AAEA,QAAM,WAAW,MAAM;AACnB,eAAW,SAAS,WAAW,UAAU,CAAA,GAAI;AACzC,iBAAW,KAAK;AAAA,IACpB;AACA,mBAAe,CAAC,gBAAgB,oBAAI,IAAI,CAAC,GAAG,aAAa,WAAW,GAAG,CAAC,CAAC;AACzE,mBAAe,CAAC,iBAAiB,eAAe,CAAC;AAAA,EACrD;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAa;AAAA,MAAc;AAAA,MAA0B;AAAA,MAA0B;AAAA,MAClE,QAAQ,MAAM,eAAe,CAAC,iBAAiB,eAAe,CAAC;AAAA,MAAG,QAAQ;AAAA,MAAQ,QAAQ;AAAA,MAC1F,cAAc,oBAAC,cAAA,EAAc,UAAA,YAAA,CAAY;AAAA,MAAiB,kCAAe,kBAAA,EAAiB;AAAA,MAAI;AAAA,IAAA;AAAA,EAAA;AAEpH;"}
+{"version":3,"file":"FormWizard.js","sources":["../../src/hookForm/FormWizard.jsx"],"sourcesContent":["// Formulario por pasos (wizard) con react-hook-form: el mismo del de formik (@stackcraftmx/calcita/forms), con las mismas\n// props y el mismo comportamiento:\n//   - «Siguiente» revisa SOLO los campos del paso (trigger con sus nombres) y no avanza si alguno tiene error;\n//   - «Omitir este paso» (solo en los opcionales) regresa sus campos a su valor de inicio (resetField): omitir es no dar ese\n//     dato, no dejar lo que se escribió a medias;\n//   - el último paso envía TODO el formulario (el esquema de yup completo vale para todos los pasos);\n//   - si el envío falla por un campo de un paso anterior (yup o el 422 del servidor con applyServerProblem), regresa solo a\n//     ese paso: un error que no se ve no se puede corregir;\n//   - para editar un registro (se entra a corregir un dato suelto): initialStepKey abre en el paso que diga el servidor,\n//     orientation=\"vertical\" pone los campos dentro de su paso, y stepSelection deja pulsar el título de otro paso para\n//     saltar directo (free) o solo si el paso abierto no tiene errores (checked). onStepChange avisa cada cambio de paso.\n//\n// Va DENTRO de <FormProvider> y del <form> con su handleSubmit (usa useFormContext):\n//   const form = useForm({resolver: yupResolver(schema), defaultValues});\n//   <FormProvider {...form}>\n//       <form noValidate onSubmit={form.handleSubmit(send)}>\n//           <FormWizard submitLabel=\"Enviar solicitud\" steps={[\n//               {key: 'datos', label: 'Sus datos', fields: ['name', 'email'], content: <>…campos…</>},\n//               {key: 'aval', label: 'Aval', optional: true, fields: ['guarantor'], content: <>…</>},\n//           ]} />\n//       </form>\n//   </FormProvider>\n//\n// Lo que se ve vive en WizardLayout (inputs/). Los textos se cambian con `texts`: {wizard: {next: 'Continuar'}}.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useRef, useState} from 'react';\nimport {useFormContext} from 'react-hook-form';\n\nimport FormProblemAlert from '@/hookForm/FormProblemAlert.jsx';\nimport SubmitButton from '@/hookForm/SubmitButton.jsx';\nimport {useWizardSteps} from '@/inputs/useWizardSteps.js';\nimport WizardLayout from '@/inputs/WizardLayout.jsx';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n/**\n * @param {object} props\n * @param {Object[]} props.steps en orden\n * @param {string} props.steps[].key\n * @param {string} props.steps[].label ya traducido\n * @param {string[]} [props.steps[].fields] los campos del paso (los que revisa «Siguiente»)\n * @param {boolean} [props.steps[].optional] se puede omitir\n * @param {import('react').ReactNode} props.steps[].content los campos del paso\n * @param {boolean} [props.steps[].completed] lleva la palomita (cuando los títulos se pulsan, solo si la pantalla lo dice)\n * @param {string} props.submitLabel ya traducido: el botón del último paso\n * @param {'horizontal'|'vertical'} [props.orientation] uno de WIZARD_ORIENTATION; por omisión horizontal\n * @param {boolean} [props.hideBackOnFirstStep] en el primer paso no se pinta «Anterior»; por omisión sale apagado, como antes\n * @param {string} [props.initialStepKey] la llave del paso en el que se abre (la que diga el servidor); por omisión el primero\n * @param {'none'|'free'|'checked'} [props.stepSelection] uno de WIZARD_STEP_SELECTION: si el título de otro paso se pulsa y qué\n *   revisa antes; por omisión none (se avanza con «Siguiente», como siempre)\n * @param {(stepKey: string, index: number) => void} [props.onStepChange] cada vez que cambia el paso abierto\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {wizard: {next, back, skip, optional, skipped, stepOf}}\n */\nexport default function FormWizard({\n    steps, submitLabel, orientation, hideBackOnFirstStep, initialStepKey, stepSelection, onStepChange, texts, ...unknownProps\n}) {\n    warnUnknownProps('FormWizard', unknownProps);\n    const {trigger, resetField, getFieldState, formState} = useFormContext();\n    const {isSubmitting, submitCount} = formState;\n    const [skippedKeys, setSkippedKeys] = useState(() => new Set());\n    const wasSubmitting = useRef(false);\n\n    // revisa SOLO los campos de un paso (trigger los marca, los pinta y pone el foco en el primero con error)\n    const isStepValid = async (index) => {\n        const stepFields = steps[index].fields ?? [];\n        return stepFields.length === 0 || trigger(stepFields, {shouldFocus: true});\n    };\n    const {activeIndex, setActiveIndex, selectStep} = useWizardSteps({steps, initialStepKey, stepSelection, onStepChange, isStepValid});\n    const activeStep = steps[activeIndex];\n\n    // al terminar un envío fallido, regresa al paso con el primer error (solo en ese momento: escribir en otro paso no\n    // debe jalar a la persona de regreso). OJO: getFieldState necesita formState para leer los errores de ahora\n    useEffect(() => {\n        if (wasSubmitting.current && !isSubmitting) {\n            const errorStepIndex = steps.findIndex((step) => (step.fields ?? []).some((field) => getFieldState(field, formState).invalid));\n            if (errorStepIndex >= 0) {\n                setActiveIndex(errorStepIndex);\n            }\n        }\n        wasSubmitting.current = isSubmitting;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isSubmitting, submitCount]);\n\n    const goNext = async () => {\n        // el paso tiene errores: se queda ahí para que se corrijan\n        if (!(await isStepValid(activeIndex))) {\n            return;\n        }\n        setSkippedKeys((currentKeys) => new Set([...currentKeys].filter((key) => key !== activeStep.key)));\n        setActiveIndex((currentIndex) => currentIndex + 1);\n    };\n\n    const skipStep = () => {\n        for (const field of activeStep.fields ?? []) {\n            resetField(field);\n        }\n        setSkippedKeys((currentKeys) => new Set([...currentKeys, activeStep.key]));\n        setActiveIndex((currentIndex) => currentIndex + 1);\n    };\n\n    return (\n        <WizardLayout steps={steps} activeIndex={activeIndex} skippedKeys={skippedKeys} isSubmitting={isSubmitting} orientation={orientation} hideBackOnFirstStep={hideBackOnFirstStep}\n                      onBack={() => setActiveIndex((currentIndex) => currentIndex - 1)} onNext={goNext} onSkip={skipStep} onStepSelect={selectStep}\n                      submitButton={<SubmitButton>{submitLabel}</SubmitButton>} problemAlert={<FormProblemAlert />} texts={texts} />\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;AAqDA,SAAwB,WAAW;AAAA,EAC/B;AAAA,EAAO;AAAA,EAAa;AAAA,EAAa;AAAA,EAAqB;AAAA,EAAgB;AAAA,EAAe;AAAA,EAAc;AAAA,EAAO,GAAG;AACjH,GAAG;AACC,mBAAiB,cAAc,YAAY;AAC3C,QAAM,EAAC,SAAS,YAAY,eAAe,UAAA,IAAa,eAAA;AACxD,QAAM,EAAC,cAAc,YAAA,IAAe;AACpC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,MAAM,oBAAI,KAAK;AAC9D,QAAM,gBAAgB,OAAO,KAAK;AAGlC,QAAM,cAAc,OAAO,UAAU;AACjC,UAAM,aAAa,MAAM,KAAK,EAAE,UAAU,CAAA;AAC1C,WAAO,WAAW,WAAW,KAAK,QAAQ,YAAY,EAAC,aAAa,MAAK;AAAA,EAC7E;AACA,QAAM,EAAC,aAAa,gBAAgB,WAAA,IAAc,eAAe,EAAC,OAAO,gBAAgB,eAAe,cAAc,YAAA,CAAY;AAClI,QAAM,aAAa,MAAM,WAAW;AAIpC,YAAU,MAAM;AACZ,QAAI,cAAc,WAAW,CAAC,cAAc;AACxC,YAAM,iBAAiB,MAAM,UAAU,CAAC,UAAU,KAAK,UAAU,CAAA,GAAI,KAAK,CAAC,UAAU,cAAc,OAAO,SAAS,EAAE,OAAO,CAAC;AAC7H,UAAI,kBAAkB,GAAG;AACrB,uBAAe,cAAc;AAAA,MACjC;AAAA,IACJ;AACA,kBAAc,UAAU;AAAA,EAE5B,GAAG,CAAC,cAAc,WAAW,CAAC;AAE9B,QAAM,SAAS,YAAY;AAEvB,QAAI,CAAE,MAAM,YAAY,WAAW,GAAI;AACnC;AAAA,IACJ;AACA,mBAAe,CAAC,gBAAgB,IAAI,IAAI,CAAC,GAAG,WAAW,EAAE,OAAO,CAAC,QAAQ,QAAQ,WAAW,GAAG,CAAC,CAAC;AACjG,mBAAe,CAAC,iBAAiB,eAAe,CAAC;AAAA,EACrD;AAEA,QAAM,WAAW,MAAM;AACnB,eAAW,SAAS,WAAW,UAAU,CAAA,GAAI;AACzC,iBAAW,KAAK;AAAA,IACpB;AACA,mBAAe,CAAC,gBAAgB,oBAAI,IAAI,CAAC,GAAG,aAAa,WAAW,GAAG,CAAC,CAAC;AACzE,mBAAe,CAAC,iBAAiB,eAAe,CAAC;AAAA,EACrD;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAa;AAAA,MAAc;AAAA,MAA0B;AAAA,MAA0B;AAAA,MAA4B;AAAA,MAA0B;AAAA,MACxH,QAAQ,MAAM,eAAe,CAAC,iBAAiB,eAAe,CAAC;AAAA,MAAG,QAAQ;AAAA,MAAQ,QAAQ;AAAA,MAAU,cAAc;AAAA,MAClH,cAAc,oBAAC,cAAA,EAAc,UAAA,YAAA,CAAY;AAAA,MAAiB,kCAAe,kBAAA,EAAiB;AAAA,MAAI;AAAA,IAAA;AAAA,EAAA;AAEpH;"}

package/dist/hookForm/useHookFormField.js

@@ -1,13 +1,19 @@
 "use client";
 import { useFormContext, useController } from "react-hook-form";
-function useHookFormField(name, control) {
+function useHookFormField(name, control, screen = {}) {
   const formContext = useFormContext();
   const { field, fieldState } = useController({ name, control: control ?? formContext?.control });
   return {
     name,
     value: field.value,
-    onChange: field.onChange,
-    onBlur: field.onBlur,
+    onChange: (value, ...rest) => {
+      field.onChange(value);
+      screen.onChange?.(value, ...rest);
+    },
+    onBlur: (...args) => {
+      field.onBlur();
+      screen.onBlur?.(...args);
+    },
     // react-hook-form enfoca el primer campo con error al enviar: necesita el input de verdad
     inputRef: field.ref,
     error: fieldState.error?.message