@stackcraftmx/calcita 0.47.0 → 0.51.0

package/dist/types/forms/SubmitButton.d.ts

@@ -1,9 +1,9 @@
-/**
- * @param {{children: import('react').ReactNode, disabled?: boolean, isPending?: boolean} & Omit<import('@mui/material/Button').ButtonProps, 'type'|'children'>} props
- *     lo demás va al Button de MUI (sx, size, fullWidth…)
- */
-export default function SubmitButton({ children, disabled, isPending, ...buttonProps }: {
+declare const SubmitButton: (props: {
     children: import('react').ReactNode;
     disabled?: boolean;
     isPending?: boolean;
-} & Omit<import('@mui/material/Button').ButtonProps, 'type' | 'children'>): import("react").JSX.Element;
+} & Omit<import("@mui/material/Button").ButtonProps<"button", {}>, "children" | "type"> & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default SubmitButton;

package/dist/types/forms/auth/SignInForm.d.ts

@@ -1,13 +1,4 @@
-/**
- * @param {object} props
- * @param {(values: {email: string, password: string, remember: boolean}) => Promise<unknown>} props.onSubmit entra; si
- *     el servidor dice que no, truena con su problema
- * @param {string} [props.forgotPasswordPath] sin ella no sale la liga de «¿Olvidó su contraseña?»
- * @param {boolean} [props.showRememberMe] por omisión sí
- * @param {string} [props.initialEmail]
- * @param {object} [props.texts] los textos que cambian, con la forma de `auth` en los textos del paquete
- */
-export default function SignInForm(props: {
+declare const SignInForm: (props: {
     onSubmit: (values: {
         email: string;
         password: string;
@@ -17,4 +8,8 @@ export default function SignInForm(props: {
     showRememberMe?: boolean;
     initialEmail?: string;
     texts?: object;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default SignInForm;

package/dist/types/forms/fieldRules.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Igual a otro campo del mismo formulario (o del mismo renglón de una lista): la confirmación de una contraseña, de una CLABE
+ * o de un correo.
+ *
+ * @param {string} otherField el campo con el que se compara, en el mismo objeto ('password')
+ * @param {object} [options]
+ * @param {string} [options.otherLabel] cómo se llama ese campo en el mensaje («Debe ser igual a la contraseña»); sin él,
+ *     «No coincide»
+ * @returns {{name: string, message: {key: string, values: object, rule: string}, test: (value: unknown, context: {parent?: object}) => boolean}}
+ */
+export declare function sameAsFieldRule(otherField: string, { otherLabel }?: {
+    otherLabel?: string;
+}): {
+    name: string;
+    message: {
+        key: string;
+        values: object;
+        rule: string;
+    };
+    test: (value: unknown, context: {
+        parent?: object;
+    }) => boolean;
+};
+/**
+ * Un porcentaje: un número entre min y max (por omisión 0 y 100), con decimales. Acepta el texto que deja NumberInput
+ * ('12.5') o un número.
+ *
+ * @param {object} [options]
+ * @param {number} [options.min] por omisión 0
+ * @param {number} [options.max] por omisión 100
+ * @returns {{name: string, message: {key: string, values: object, rule: string}, test: (value: unknown) => boolean}}
+ */
+export declare function percentRule({ min, max }?: {
+    min?: number;
+    max?: number;
+}): {
+    name: string;
+    message: {
+        key: string;
+        values: object;
+        rule: string;
+    };
+    test: (value: unknown) => boolean;
+};

package/dist/types/forms/index.d.ts

@@ -11,6 +11,7 @@ export { default as FormProblemAlert } from './FormProblemAlert.js';
 export { default as FormRepeatingFields } from './FormRepeatingFields.js';
 export { default as FormTransferListField } from './FormTransferListField.js';
 export { listTotalAtMostRule, listTotalOf, orderedInListRule, uniqueInListRule } from './listRules.js';
+export { percentRule, sameAsFieldRule } from './fieldRules.js';
 export { default as FormSelectField } from './FormSelectField.js';
 export { default as FormServerProblem } from './FormServerProblem.js';
 export { default as FormTextField } from './FormTextField.js';

package/dist/types/forms/security/SecondStepForm.d.ts

@@ -4,19 +4,7 @@ export declare const SECOND_STEP_METHOD: Readonly<{
     totp: "totp";
     recoveryCode: "recoveryCode";
 }>;
-/**
- * @param {object} props
- * @param {string[]} props.methods los que tiene la cuenta (SECOND_STEP_METHOD), como los mandó el servidor
- * @param {boolean} [props.canUsePasskeys] passkeysSupported() de /passkeys
- * @param {() => Promise<unknown>} [props.onUsePasskey] firma con la llave y termina de entrar; truena si no se pudo
- * @param {(input: {method: string, code: string}) => Promise<unknown>} props.onSubmitCode manda el código ya limpio y
- *     termina de entrar; truena con el ApiError si no
- * @param {(message: string|null) => void} props.onCancel regresa a escribir la contraseña (con el motivo, si lo hay)
- * @param {import('react').ReactNode} [props.footer] abajo del botón, dentro del formulario: puede llenar el código con
- *     useFormikContext (p. ej. el atajo de los ejemplos)
- * @param {object} [props.texts] los textos que cambian, con la forma de `security` en los textos del paquete
- */
-export default function SecondStepForm(props: {
+declare const SecondStepForm: (props: {
     methods: string[];
     canUsePasskeys?: boolean;
     onUsePasskey?: () => Promise<unknown>;
@@ -27,4 +15,8 @@ export default function SecondStepForm(props: {
     onCancel: (message: string | null) => void;
     footer?: import('react').ReactNode;
     texts?: object;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default SecondStepForm;

package/dist/types/forms/security/TwoStepVerificationCard.d.ts

@@ -1,23 +1,4 @@
-/**
- * @param {object} props
- * @param {{isEnabled: boolean, enabledAt?: string|null, passkeys: Array<{id: string, name: string, createdAt: string, lastUsedAt?: string|null}>, totp: {isEnabled: boolean, enabledAt?: string|null}, recoveryCodesRemaining: number}} props.security
- * @param {(security: {isEnabled: boolean, enabledAt?: string|null, passkeys: Array<{id: string, name: string, createdAt: string, lastUsedAt?: string|null}>, totp: {isEnabled: boolean, enabledAt?: string|null}, recoveryCodesRemaining: number}) => void} props.onSecurityChange
- * @param {object} props.actions lo que hace el proyecto en cada caso; cada una regresa {security, recoveryCodes?}
- * @param {(name: string) => Promise<{security: object, recoveryCodes?: string[]}>} props.actions.addPasskey crea la llave
- *     (createPasskey) y la guarda en el servidor
- * @param {(passkey: {id: string, name: string}, password: string) => Promise<{security: object}>} props.actions.removePasskey
- * @param {() => Promise<{secret: string, qrImageUrl: string, extra?: import('react').ReactNode}>} props.actions.startTotp
- *     la clave y su QR; extra va abajo del campo (p. ej. un atajo de los ejemplos)
- * @param {(code: string) => Promise<{security: object, recoveryCodes?: string[]}>} props.actions.confirmTotp
- * @param {(password: string) => Promise<{security: object}>} props.actions.disableTotp
- * @param {(password: string) => Promise<{security: object, recoveryCodes: string[]}>} props.actions.regenerateRecoveryCodes
- * @param {boolean} [props.canUsePasskeys] passkeysSupported() de /passkeys; sin él no se ofrece agregar llaves
- * @param {string} [props.account] la cuenta (el correo), para el archivo de los códigos
- * @param {import('react').ReactNode} [props.passkeyNotice] un aviso en el diálogo de crear la llave, antes de que el
- *     navegador la guarde (p. ej. el de la demostración: la llave queda de verdad en el llavero de la persona)
- * @param {object} [props.texts] los textos que cambian, con la forma de `security` en los textos del paquete
- */
-export default function TwoStepVerificationCard(props: {
+declare const TwoStepVerificationCard: (props: {
     security: {
         isEnabled: boolean;
         enabledAt?: string | null;
@@ -80,4 +61,8 @@ export default function TwoStepVerificationCard(props: {
     account?: string;
     passkeyNotice?: import('react').ReactNode;
     texts?: object;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default TwoStepVerificationCard;

package/dist/types/forms/useValidationText.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @param {object} [options]
+ * @param {string} [options.name] el name del campo: para su texto propio (validation:fields.<campo>.<regla>)
+ * @param {string} [options.label] el nombre del campo, para los textos que lo dicen ({{label}})
+ * @param {Record<string, string|object>} [options.messages] los textos de la pantalla para este campo, por regla
+ * @returns {(error: unknown) => string|undefined}
+ */
+export declare function useValidationText({ name, label, messages }?: {
+    name?: string;
+    label?: string;
+    messages?: Record<string, string | object>;
+}): (error: unknown) => string | undefined;

package/dist/types/forms/validation.d.ts

@@ -1,245 +1,188 @@
 import * as Yup from 'yup';
-/** El locale de yup: cada mensaje por defecto es una llave del namespace validation. */
+/** El locale de yup: cada mensaje por defecto es una llave del namespace validation, con su regla y su campo. */
 export declare const YUP_LOCALE: Readonly<{
     mixed: {
-        default: {
+        default: (params?: object) => {
             key: string;
-            values?: undefined;
-        } | {
-            key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        required: {
-            key: string;
-            values?: undefined;
-        } | {
+        required: (params?: object) => {
             key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        defined: {
+        defined: (params?: object) => {
             key: string;
-            values?: undefined;
-        } | {
-            key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        notNull: {
-            key: string;
-            values?: undefined;
-        } | {
+        notNull: (params?: object) => {
             key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        notType: {
+        notType: (params?: object) => {
             key: string;
-            values?: undefined;
-        } | {
-            key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        oneOf: ({ values }: {
-            values: any;
-        }) => {
-            key: string;
-            values?: undefined;
-        } | {
+        oneOf: (params?: object) => {
             key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        notOneOf: ({ values }: {
-            values: any;
-        }) => {
+        notOneOf: (params?: object) => {
             key: string;
-            values?: undefined;
-        } | {
-            key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
     };
     string: {
-        length: ({ length }: {
-            length: any;
-        }) => {
-            key: string;
-            values?: undefined;
-        } | {
+        length: (params?: object) => {
             key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        min: ({ min }: {
-            min: any;
-        }) => {
+        min: (params?: object) => {
             key: string;
-            values?: undefined;
-        } | {
-            key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        max: ({ max }: {
-            max: any;
-        }) => {
-            key: string;
-            values?: undefined;
-        } | {
+        max: (params?: object) => {
             key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        matches: {
+        matches: (params?: object) => {
             key: string;
-            values?: undefined;
-        } | {
-            key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        email: {
-            key: string;
-            values?: undefined;
-        } | {
+        email: (params?: object) => {
             key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        url: {
+        url: (params?: object) => {
             key: string;
-            values?: undefined;
-        } | {
-            key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        uuid: {
-            key: string;
-            values?: undefined;
-        } | {
+        uuid: (params?: object) => {
             key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        trim: {
-            key: string;
-            values?: undefined;
-        } | {
+        trim: (params?: object) => {
             key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        lowercase: {
+        lowercase: (params?: object) => {
             key: string;
-            values?: undefined;
-        } | {
-            key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        uppercase: {
-            key: string;
-            values?: undefined;
-        } | {
+        uppercase: (params?: object) => {
             key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
     };
     number: {
-        min: ({ min }: {
-            min: any;
-        }) => {
+        min: (params?: object) => {
             key: string;
-            values?: undefined;
-        } | {
-            key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        max: ({ max }: {
-            max: any;
-        }) => {
-            key: string;
-            values?: undefined;
-        } | {
+        max: (params?: object) => {
             key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        lessThan: ({ less }: {
-            less: any;
-        }) => {
+        lessThan: (params?: object) => {
             key: string;
-            values?: undefined;
-        } | {
-            key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        moreThan: ({ more }: {
-            more: any;
-        }) => {
-            key: string;
-            values?: undefined;
-        } | {
+        moreThan: (params?: object) => {
             key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        positive: {
-            key: string;
-            values?: undefined;
-        } | {
+        positive: (params?: object) => {
             key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        negative: {
+        negative: (params?: object) => {
             key: string;
-            values?: undefined;
-        } | {
-            key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        integer: {
-            key: string;
-            values?: undefined;
-        } | {
+        integer: (params?: object) => {
             key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
     };
     date: {
-        min: ({ min }: {
-            min: any;
-        }) => {
+        min: (params?: object) => {
             key: string;
-            values?: undefined;
-        } | {
-            key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        max: ({ max }: {
-            max: any;
-        }) => {
-            key: string;
-            values?: undefined;
-        } | {
+        max: (params?: object) => {
             key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
     };
     array: {
-        min: ({ min }: {
-            min: any;
-        }) => {
+        min: (params?: object) => {
             key: string;
-            values?: undefined;
-        } | {
-            key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        max: ({ max }: {
-            max: any;
-        }) => {
-            key: string;
-            values?: undefined;
-        } | {
+        max: (params?: object) => {
             key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
-        length: ({ length }: {
-            length: any;
-        }) => {
-            key: string;
-            values?: undefined;
-        } | {
+        length: (params?: object) => {
             key: string;
-            values: any;
+            values: object;
+            rule: string;
+            path?: string;
         };
     };
 }>;

package/dist/types/forms/validationMessages.d.ts

@@ -1,12 +1,60 @@
+/**
+ * El campo sin índices de lista, para buscar su texto propio: 'contacts[2].email' y 'contacts.2.email' son 'contacts.email'.
+ *
+ * @param {string} path
+ * @returns {string}
+ */
+export declare function fieldKeyOf(path: string): string;
+/**
+ * Un mensaje en la forma de Calcita, venga como venga.
+ *
+ * @param {unknown} error
+ * @returns {{text: string}|{key: string, values: object, rule?: string, path?: string}|null} null: no se entendió
+ */
+export declare function normalizedValidationMessage(error: unknown): {
+    text: string;
+} | {
+    key: string;
+    values: object;
+    rule?: string;
+    path?: string;
+} | null;
 /**
  * Texto de un error de validación en el idioma activo.
- * Acepta las dos formas que llegan: {key, values} de yup (buildYupLocale), o un texto ya traducido (los del backend).
  *
- * @param {(key: string, values?: object) => string} translate el t de useToolkitTranslation
- * @param {string|{key: string, values?: object}|undefined|null} error
+ * @param {(key: string, values?: object) => string} translate el t de useToolkitTranslation (respeta `defaultValue`, como el
+ *     de i18next: con él busca los textos opcionales sin avisar que faltan)
+ * @param {unknown} error lo que dejó la validación en el campo
+ * @param {object} [options]
+ * @param {string} [options.label] el nombre del campo, para los textos que lo dicen ({{label}}: «Escriba {{label}}»)
+ * @param {Record<string, string|object>} [options.messages] los textos de la pantalla para este campo, por regla
+ *     ({required: 'Escriba el RFC', matches: 'El RFC lleva 12 o 13 caracteres'}); ya traducidos o como {key, values}
+ * @param {((error: unknown) => unknown)|null} [options.readMessage] cómo leer el mensaje de un sistema que ya existe
+ *     (readValidationMessage de ToolkitProvider): regresa un texto, {key, values} o undefined para la lectura de siempre
+ * @param {string} [options.fieldName] el name del campo que pinta el error: para el texto propio de ese campo cuando el
+ *     mensaje no trae su campo (las reglas propias, los de un sistema que ya existe)
  * @returns {string|undefined}
  */
-export declare function translateValidationMessage(translate: (key: string, values?: object) => string, error: string | {
+export declare function translateValidationMessage(translate: (key: string, values?: object) => string, error: unknown, { label, messages, readMessage, fieldName }?: {
+    label?: string;
+    messages?: Record<string, string | object>;
+    readMessage?: ((error: unknown) => unknown) | null;
+    fieldName?: string;
+}): string | undefined;
+/**
+ * El mensaje de una regla propia (.test) como lo dejan las de Calcita: su llave, sus valores y el nombre de la regla, para
+ * que la pantalla (messages del campo) o los textos del proyecto (validation:fields.<campo>.<regla>) pongan el suyo sin
+ * tocar el esquema. Es un objeto fijo: quien lo lea (rule.message.key) lo encuentra como siempre.
+ *
+ *   {name: 'percent', message: ruleMessageOf('validation:percent', 'percent', {min: 0, max: 100}), test: …}
+ *
+ * @param {string} key la llave del texto ('validation:percent')
+ * @param {string} rule el nombre de la regla
+ * @param {object} [values] los valores del texto
+ * @returns {{key: string, values: object, rule: string}}
+ */
+export declare function ruleMessageOf(key: string, rule: string, values?: object): {
     key: string;
-    values?: object;
-} | undefined | null): string | undefined;
+    values: object;
+    rule: string;
+};

package/dist/types/forms.d.ts

@@ -1,2 +1,2 @@
 export { FieldArray, Form, Formik, useField, useFormikContext } from 'formik';
-export { ChangePasswordForm, ForgotPasswordForm, FormAttachmentsField, FormCatalogField, FormCheckboxGroupField, FormColorField, FormFileField, FormFileUploadField, FormImageField, FormMaskedField, FormNumberField, FormProblemAlert, FormRepeatingFields, FormSelectField, FormServerProblem, FormTransferListField, FormTextField, FormWizard, RECOVERY_CODE_PATTERN, SECOND_STEP_METHOD, SecondStepForm, SignInForm, SubmitButton, TOTP_CODE_PATTERN, TwoStepVerificationCard, Yup, applyServerProblem, buildYupLocale, formLevelMessageOf, normalizeRecoveryCode, normalizeTotpCode, listTotalAtMostRule, listTotalOf, orderedInListRule, splitRowFieldErrors, splitServerFieldErrors, translateValidationMessage, uniqueInListRule, useFormikField, } from './forms/index.js';
+export { ChangePasswordForm, ForgotPasswordForm, FormAttachmentsField, FormCatalogField, FormCheckboxGroupField, FormColorField, FormFileField, FormFileUploadField, FormImageField, FormMaskedField, FormNumberField, FormProblemAlert, FormRepeatingFields, FormSelectField, FormServerProblem, FormTransferListField, FormTextField, FormWizard, RECOVERY_CODE_PATTERN, SECOND_STEP_METHOD, SecondStepForm, SignInForm, SubmitButton, TOTP_CODE_PATTERN, TwoStepVerificationCard, Yup, applyServerProblem, buildYupLocale, formLevelMessageOf, normalizeRecoveryCode, normalizeTotpCode, listTotalAtMostRule, listTotalOf, orderedInListRule, percentRule, sameAsFieldRule, splitRowFieldErrors, splitServerFieldErrors, translateValidationMessage, uniqueInListRule, useFormikField, } from './forms/index.js';

package/dist/types/hookForm/FormProblemAlert.d.ts

@@ -1,7 +1,8 @@
-/**
- * @param {{control?: object, sx?: object}} props control: el de useForm, si la pantalla no usa FormProvider
- */
-export default function FormProblemAlert({ control, sx, ...unknownProps }: {
+declare const FormProblemAlert: (props: {
     control?: object;
     sx?: object;
-}): import("react").JSX.Element | null;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element | null;
+export default FormProblemAlert;

package/dist/types/hookForm/SubmitButton.d.ts

@@ -1,15 +1,4 @@
-/**
- * @param {object} props
- * @param {import('react').ReactNode} props.children
- * @param {boolean} [props.disabled]
- * @param {boolean} [props.isPending] cuando el envío lo lleva una máquina de estados y no el handleSubmit
- * @param {object} [props.control] el de useForm, si la pantalla no usa FormProvider
- * @param {object} [props.sx] (y lo demás del Button de MUI: size, fullWidth, startIcon…)
- * @param {'small'|'medium'|'large'} [props.size]
- * @param {boolean} [props.fullWidth]
- * @param {import('react').ReactNode} [props.startIcon]
- */
-export default function SubmitButton({ children, disabled, isPending, control, ...buttonProps }: {
+declare const SubmitButton: (props: {
     children: import('react').ReactNode;
     disabled?: boolean;
     isPending?: boolean;
@@ -18,4 +7,8 @@ export default function SubmitButton({ children, disabled, isPending, control, .
     size?: 'small' | 'medium' | 'large';
     fullWidth?: boolean;
     startIcon?: import('react').ReactNode;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default SubmitButton;