@stackcraftmx/calcita 0.0.0-stage → 0.25.0

package/dist/forms.js

@@ -0,0 +1,57 @@
+"use client";
+import { FieldArray, Form, Formik, useField, useFormikContext } from "formik";
+import { default as default2 } from "./forms/FormCatalogField.js";
+import { default as default3 } from "./forms/FormColorField.js";
+import { default as default4 } from "./forms/FormNumberField.js";
+import { default as default5 } from "./forms/FormProblemAlert.js";
+import { default as default6 } from "./forms/FormSelectField.js";
+import { default as default7 } from "./forms/FormServerProblem.js";
+import { default as default8 } from "./forms/FormTextField.js";
+import { default as default9 } from "./forms/FormWizard.js";
+import { default as default10 } from "./forms/auth/ChangePasswordForm.js";
+import { default as default11 } from "./forms/auth/ForgotPasswordForm.js";
+import { default as default12 } from "./forms/auth/SignInForm.js";
+import { SECOND_STEP_METHOD, default as default13 } from "./forms/security/SecondStepForm.js";
+import { default as default14 } from "./forms/security/TwoStepVerificationCard.js";
+import { RECOVERY_CODE_PATTERN, TOTP_CODE_PATTERN, normalizeRecoveryCode, normalizeTotpCode } from "./forms/security/securityRules.js";
+import { default as default15 } from "./forms/SubmitButton.js";
+import { applyServerProblem } from "./forms/applyServerProblem.js";
+import { formLevelMessageOf, splitServerFieldErrors } from "./forms/serverProblemFields.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 {
+  default10 as ChangePasswordForm,
+  FieldArray,
+  default11 as ForgotPasswordForm,
+  Form,
+  default2 as FormCatalogField,
+  default3 as FormColorField,
+  default4 as FormNumberField,
+  default5 as FormProblemAlert,
+  default6 as FormSelectField,
+  default7 as FormServerProblem,
+  default8 as FormTextField,
+  default9 as FormWizard,
+  Formik,
+  RECOVERY_CODE_PATTERN,
+  SECOND_STEP_METHOD,
+  default13 as SecondStepForm,
+  default12 as SignInForm,
+  default15 as SubmitButton,
+  TOTP_CODE_PATTERN,
+  default14 as TwoStepVerificationCard,
+  Yup,
+  applyServerProblem,
+  buildYupLocale,
+  formLevelMessageOf,
+  normalizeRecoveryCode,
+  normalizeTotpCode,
+  splitServerFieldErrors,
+  translateValidationMessage,
+  useField,
+  useFormikContext,
+  useFormikField
+};
+//# sourceMappingURL=forms.js.map

package/dist/forms.js.map

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

package/dist/hookForm/FormCatalogField.js

@@ -0,0 +1,12 @@
+"use client";
+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);
+  return /* @__PURE__ */ jsx(CatalogInput, { ...inputProps, ...fieldProps });
+}
+export {
+  FormCatalogField as default
+};
+//# sourceMappingURL=FormCatalogField.js.map

package/dist/hookForm/FormCatalogField.js.map

@@ -0,0 +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;"}

package/dist/hookForm/FormColorField.js

@@ -0,0 +1,12 @@
+"use client";
+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);
+  return /* @__PURE__ */ jsx(ColorInput, { ...inputProps, ...fieldProps });
+}
+export {
+  FormColorField as default
+};
+//# sourceMappingURL=FormColorField.js.map

package/dist/hookForm/FormColorField.js.map

@@ -0,0 +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;"}

package/dist/hookForm/FormNumberField.js

@@ -0,0 +1,12 @@
+"use client";
+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);
+  return /* @__PURE__ */ jsx(NumberInput, { ...inputProps, ...fieldProps });
+}
+export {
+  FormNumberField as default
+};
+//# sourceMappingURL=FormNumberField.js.map

package/dist/hookForm/FormNumberField.js.map

@@ -0,0 +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;"}

package/dist/hookForm/FormProblemAlert.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useFormContext, useFormState } from "react-hook-form";
+import Alert from "@mui/material/Alert";
+function FormProblemAlert({ control, sx }) {
+  const formContext = useFormContext();
+  const { errors } = useFormState({ control: control ?? formContext?.control });
+  const message = errors.root?.server?.message;
+  if (!message) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Alert, { severity: "error", role: "alert", sx, children: message });
+}
+export {
+  FormProblemAlert as default
+};
+//# sourceMappingURL=FormProblemAlert.js.map

package/dist/hookForm/FormProblemAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormProblemAlert.js","sources":["../../src/hookForm/FormProblemAlert.jsx"],"sourcesContent":["// El aviso de arriba del formulario de react-hook-form: lo que el servidor dijo que no es de un campo. applyServerProblem\n// lo deja en errors.root.server; aquí se pinta. Sin mensaje no pinta nada ni ocupa lugar.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useFormContext, useFormState} from 'react-hook-form';\nimport Alert from '@mui/material/Alert';\n\n/**\n * @param {{control?: object, sx?: object}} props control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormProblemAlert({control, sx}) {\n    const formContext = useFormContext();\n    const {errors} = useFormState({control: control ?? formContext?.control});\n    const message = errors.root?.server?.message;\n\n    // guard clause: sin aviso del servidor\n    if (!message) {\n        return null;\n    }\n    return <Alert severity=\"error\" role=\"alert\" sx={sx}>{message}</Alert>;\n}\n"],"names":[],"mappings":";;;;AAUA,SAAwB,iBAAiB,EAAC,SAAS,MAAK;AACpD,QAAM,cAAc,eAAA;AACpB,QAAM,EAAC,WAAU,aAAa,EAAC,SAAS,WAAW,aAAa,SAAQ;AACxE,QAAM,UAAU,OAAO,MAAM,QAAQ;AAGrC,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AACA,6BAAQ,OAAA,EAAM,UAAS,SAAQ,MAAK,SAAQ,IAAS,UAAA,SAAQ;AACjE;"}

package/dist/hookForm/FormSelectField.js

@@ -0,0 +1,12 @@
+"use client";
+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);
+  return /* @__PURE__ */ jsx(SelectInput, { ...inputProps, ...fieldProps });
+}
+export {
+  FormSelectField as default
+};
+//# sourceMappingURL=FormSelectField.js.map

package/dist/hookForm/FormSelectField.js.map

@@ -0,0 +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;"}

package/dist/hookForm/FormTextField.js

@@ -0,0 +1,12 @@
+"use client";
+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);
+  return /* @__PURE__ */ jsx(TextInput, { ...inputProps, ...fieldProps });
+}
+export {
+  FormTextField as default
+};
+//# sourceMappingURL=FormTextField.js.map

package/dist/hookForm/FormTextField.js.map

@@ -0,0 +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;"}

package/dist/hookForm/FormWizard.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { useFormContext } from "react-hook-form";
+import FormProblemAlert from "./FormProblemAlert.js";
+import SubmitButton from "./SubmitButton.js";
+import WizardLayout from "../inputs/WizardLayout.js";
+function FormWizard({ steps, submitLabel, texts }) {
+  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 activeStep = steps[activeIndex];
+  useEffect(() => {
+    if (wasSubmitting.current && !isSubmitting) {
+      const errorStepIndex = steps.findIndex((step) => (step.fields ?? []).some((field) => getFieldState(field, formState).invalid));
+      if (errorStepIndex >= 0) {
+        setActiveIndex(errorStepIndex);
+      }
+    }
+    wasSubmitting.current = isSubmitting;
+  }, [isSubmitting, submitCount]);
+  const goNext = async () => {
+    const stepFields = activeStep.fields ?? [];
+    const isStepValid = stepFields.length === 0 || await trigger(stepFields, { shouldFocus: true });
+    if (!isStepValid) {
+      return;
+    }
+    setSkippedKeys((currentKeys) => new Set([...currentKeys].filter((key) => key !== activeStep.key)));
+    setActiveIndex((currentIndex) => currentIndex + 1);
+  };
+  const skipStep = () => {
+    for (const field of activeStep.fields ?? []) {
+      resetField(field);
+    }
+    setSkippedKeys((currentKeys) => /* @__PURE__ */ new Set([...currentKeys, activeStep.key]));
+    setActiveIndex((currentIndex) => currentIndex + 1);
+  };
+  return /* @__PURE__ */ jsx(
+    WizardLayout,
+    {
+      steps,
+      activeIndex,
+      skippedKeys,
+      isSubmitting,
+      onBack: () => setActiveIndex((currentIndex) => currentIndex - 1),
+      onNext: goNext,
+      onSkip: skipStep,
+      submitButton: /* @__PURE__ */ jsx(SubmitButton, { children: submitLabel }),
+      problemAlert: /* @__PURE__ */ jsx(FormProblemAlert, {}),
+      texts
+    }
+  );
+}
+export {
+  FormWizard as default
+};
+//# sourceMappingURL=FormWizard.js.map

package/dist/hookForm/FormWizard.js.map

@@ -0,0 +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';\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}) {\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":";;;;;;;AAyCA,SAAwB,WAAW,EAAC,OAAO,aAAa,SAAQ;AAC5D,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;"}

package/dist/hookForm/SubmitButton.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useFormContext, useFormState } from "react-hook-form";
+import Button from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
+function SubmitButton({ children, disabled, isPending, control, ...buttonProps }) {
+  const formContext = useFormContext();
+  const { isSubmitting } = useFormState({ control: control ?? formContext?.control });
+  const isBusy = Boolean(isPending ?? isSubmitting);
+  return /* @__PURE__ */ jsx(Button, { type: "submit", variant: "contained", size: "large", disabled: disabled || isBusy, "aria-busy": isBusy, ...buttonProps, children: isBusy ? /* @__PURE__ */ jsx(CircularProgress, { size: 22, color: "inherit" }) : children });
+}
+export {
+  SubmitButton as default
+};
+//# sourceMappingURL=SubmitButton.js.map

package/dist/hookForm/SubmitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubmitButton.js","sources":["../../src/hookForm/SubmitButton.jsx"],"sourcesContent":["// Botón de enviar de react-hook-form: se bloquea y muestra su indicador mientras se envía (un doble clic no manda dos\n// peticiones). Mismo look que el SubmitButton de formik.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useFormContext, useFormState} from 'react-hook-form';\nimport Button from '@mui/material/Button';\nimport CircularProgress from '@mui/material/CircularProgress';\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} props.children\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.isPending] cuando el envío lo lleva una máquina de estados y no el handleSubmit\n * @param {object} [props.control] el de useForm, si la pantalla no usa FormProvider\n * @param {object} [props.sx] (y lo demás del Button de MUI: size, fullWidth, startIcon…)\n * @param {'small'|'medium'|'large'} [props.size]\n * @param {boolean} [props.fullWidth]\n * @param {import('react').ReactNode} [props.startIcon]\n */\nexport default function SubmitButton({children, disabled, isPending, control, ...buttonProps}) {\n    const formContext = useFormContext();\n    const {isSubmitting} = useFormState({control: control ?? formContext?.control});\n    const isBusy = Boolean(isPending ?? isSubmitting);\n\n    return (\n        <Button type=\"submit\" variant=\"contained\" size=\"large\" disabled={disabled || isBusy} aria-busy={isBusy} {...buttonProps}>\n            {isBusy ? <CircularProgress size={22} color=\"inherit\" /> : children}\n        </Button>\n    );\n}\n"],"names":[],"mappings":";;;;;AAmBA,SAAwB,aAAa,EAAC,UAAU,UAAU,WAAW,SAAS,GAAG,eAAc;AAC3F,QAAM,cAAc,eAAA;AACpB,QAAM,EAAC,iBAAgB,aAAa,EAAC,SAAS,WAAW,aAAa,SAAQ;AAC9E,QAAM,SAAS,QAAQ,aAAa,YAAY;AAEhD,SACI,oBAAC,UAAO,MAAK,UAAS,SAAQ,aAAY,MAAK,SAAQ,UAAU,YAAY,QAAQ,aAAW,QAAS,GAAG,aACvG,UAAA,SAAS,oBAAC,kBAAA,EAAiB,MAAM,IAAI,OAAM,WAAU,IAAK,SAAA,CAC/D;AAER;"}

package/dist/hookForm/applyServerProblem.js

@@ -0,0 +1,21 @@
+import { splitServerFieldErrors, formLevelMessageOf } from "../forms/serverProblemFields.js";
+import { fieldErrorsOf } from "../problems.js";
+const SERVER_PROBLEM_ROOT = "root.server";
+const SERVER_ERROR_TYPE = "server";
+function applyServerProblem(error, { setError, getValues }) {
+  const errorsByField = fieldErrorsOf(error?.problem);
+  const formFieldNames = Object.keys(getValues() ?? {});
+  const { fieldErrors } = splitServerFieldErrors(errorsByField, formFieldNames);
+  for (const [fieldName, message] of Object.entries(fieldErrors)) {
+    setError(fieldName, { type: SERVER_ERROR_TYPE, message }, { shouldFocus: false });
+  }
+  const formLevelMessage = formLevelMessageOf(errorsByField, formFieldNames, error?.message);
+  if (formLevelMessage) {
+    setError(SERVER_PROBLEM_ROOT, { type: SERVER_ERROR_TYPE, message: formLevelMessage });
+  }
+}
+export {
+  SERVER_PROBLEM_ROOT,
+  applyServerProblem
+};
+//# sourceMappingURL=applyServerProblem.js.map

package/dist/hookForm/applyServerProblem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyServerProblem.js","sources":["../../src/hookForm/applyServerProblem.js"],"sourcesContent":["// Del error del servidor (RFC 9457) a react-hook-form, con las mismas reglas que el applyServerProblem de formik:\n//   - el 422 trae `errors` por campo y cada uno se pinta EN su campo (setError);\n//   - lo que no es de un campo (401, 409, 500, sin conexión) o el error de un campo que el formulario no tiene va al aviso\n//     de arriba: errors.root.server, que pinta FormProblemAlert.\n//\n//   const form = useForm({...});\n//   const submit = form.handleSubmit(async (values) => {\n//       try { await api.save(values); } catch (error) { applyServerProblem(error, form); }\n//   });\n//\n// Función pura, no renderiza: function (regla de la casa).\nimport {formLevelMessageOf, splitServerFieldErrors} from '@/forms/serverProblemFields.js';\nimport {fieldErrorsOf} from '@/problems.js';\n\n/** Dónde queda el aviso de arriba en los errores de react-hook-form. */\nexport const SERVER_PROBLEM_ROOT = 'root.server';\nconst SERVER_ERROR_TYPE = 'server';\n\n/**\n * @param {unknown} error normalmente un ApiError (trae problem y message ya traducidos)\n * @param {{setError: Function, getValues: Function}} form lo que regresa useForm\n */\nexport function applyServerProblem(error, {setError, getValues}) {\n    const errorsByField = fieldErrorsOf(error?.problem);\n    const formFieldNames = Object.keys(getValues() ?? {});\n    const {fieldErrors} = splitServerFieldErrors(errorsByField, formFieldNames);\n\n    for (const [fieldName, message] of Object.entries(fieldErrors)) {\n        setError(fieldName, {type: SERVER_ERROR_TYPE, message}, {shouldFocus: false});\n    }\n\n    const formLevelMessage = formLevelMessageOf(errorsByField, formFieldNames, error?.message);\n    if (formLevelMessage) {\n        setError(SERVER_PROBLEM_ROOT, {type: SERVER_ERROR_TYPE, message: formLevelMessage});\n    }\n}\n"],"names":[],"mappings":";;AAeY,MAAC,sBAAsB;AACnC,MAAM,oBAAoB;AAMnB,SAAS,mBAAmB,OAAO,EAAC,UAAU,UAAS,GAAG;AAC7D,QAAM,gBAAgB,cAAc,OAAO,OAAO;AAClD,QAAM,iBAAiB,OAAO,KAAK,UAAS,KAAM,CAAA,CAAE;AACpD,QAAM,EAAC,YAAW,IAAI,uBAAuB,eAAe,cAAc;AAE1E,aAAW,CAAC,WAAW,OAAO,KAAK,OAAO,QAAQ,WAAW,GAAG;AAC5D,aAAS,WAAW,EAAC,MAAM,mBAAmB,QAAO,GAAG,EAAC,aAAa,MAAK,CAAC;AAAA,EAChF;AAEA,QAAM,mBAAmB,mBAAmB,eAAe,gBAAgB,OAAO,OAAO;AACzF,MAAI,kBAAkB;AAClB,aAAS,qBAAqB,EAAC,MAAM,mBAAmB,SAAS,iBAAgB,CAAC;AAAA,EACtF;AACJ;"}

package/dist/hookForm/useHookFormField.js

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

package/dist/hookForm/useHookFormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHookFormField.js","sources":["../../src/hookForm/useHookFormField.js"],"sourcesContent":["// La conexión de un campo suelto (inputs/) con react-hook-form: lo que la vista necesita, sacado de useController.\n//\n// El campo se busca en el formulario de la pantalla (FormProvider); sin él, se le pasa control.\n//\n// Cuándo se enseña el error lo decide react-hook-form (por omisión, al intentar enviar y después al corregir): la vista\n// solo pinta el que llegue. Los errores de yup llegan como llave ({key, values}) y la vista los traduce.\n//\n// Hook genérico del paquete: function (regla de la casa).\nimport {useController, useFormContext} from 'react-hook-form';\n\n/**\n * @param {string} name el campo del formulario\n * @param {object} [control] el de useForm, si la pantalla no usa FormProvider\n * @returns {{name: string, value: unknown, onChange: (value: unknown) => void, onBlur: () => void, inputRef: Function, error: unknown}}\n */\nexport function useHookFormField(name, control) {\n    const formContext = useFormContext();\n    const {field, fieldState} = useController({name, control: control ?? formContext?.control});\n\n    return {\n        name,\n        value: field.value,\n        onChange: field.onChange,\n        onBlur: field.onBlur,\n        // react-hook-form enfoca el primer campo con error al enviar: necesita el input de verdad\n        inputRef: field.ref,\n        error: fieldState.error?.message,\n    };\n}\n"],"names":[],"mappings":";;AAeO,SAAS,iBAAiB,MAAM,SAAS;AAC5C,QAAM,cAAc,eAAc;AAClC,QAAM,EAAC,OAAO,WAAU,IAAI,cAAc,EAAC,MAAM,SAAS,WAAW,aAAa,QAAO,CAAC;AAE1F,SAAO;AAAA,IACH;AAAA,IACA,OAAO,MAAM;AAAA,IACb,UAAU,MAAM;AAAA,IAChB,QAAQ,MAAM;AAAA;AAAA,IAEd,UAAU,MAAM;AAAA,IAChB,OAAO,WAAW,OAAO;AAAA,EACjC;AACA;"}

package/dist/i18next.js

@@ -0,0 +1,5 @@
+import { translateWithI18next } from "./adapters/i18next.js";
+export {
+  translateWithI18next
+};
+//# sourceMappingURL=i18next.js.map

package/dist/i18next.js.map

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

package/dist/identifiers.js

@@ -0,0 +1,8 @@
+import { v7 } from "uuid";
+function newIdentifier() {
+  return v7();
+}
+export {
+  newIdentifier
+};
+//# sourceMappingURL=identifiers.js.map

package/dist/identifiers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"identifiers.js","sources":["../src/identifiers.js"],"sourcesContent":["// Identificadores generados en el navegador: siempre UUID v7 (regla de la casa).\n//\n// v7 y no v4 (crypto.randomUUID): los v7 ordenan por tiempo, así que en un log o en una tabla con índice único\n// quedan en el orden en que se generaron y no fragmentan el índice B-tree de la base de datos.\n//\n// NOTA: el X-Request-Id NO se genera aquí; lo genera el backend y regresa en cada respuesta.\n//\n// Funciones puras, no renderizan: function (regla de la casa).\nimport {v7 as uuidV7} from 'uuid';\n\n/** Un UUID v7 nuevo, p. ej. para una llave de idempotencia o una fila temporal. */\nexport function newIdentifier() {\n    return uuidV7();\n}\n"],"names":["uuidV7"],"mappings":";AAWO,SAAS,gBAAgB;AAC5B,SAAOA,GAAM;AACjB;"}

package/dist/inbox/InboxLayout.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import Badge from "@mui/material/Badge";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import List from "@mui/material/List";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import ListSubheader from "@mui/material/ListSubheader";
+import Paper from "@mui/material/Paper";
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
+import Typography from "@mui/material/Typography";
+import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
+import { PHONE_MEDIA_QUERY, DESKTOP_MEDIA_QUERY } from "../appShell/shellSizes.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+const FOLDERS_WIDTH_PIXELS = 220;
+const LIST_WIDTH_PIXELS = 380;
+const DESKTOP_HEIGHT = "calc(100dvh - 220px)";
+const DESKTOP_MIN_HEIGHT_PIXELS = 480;
+const LABEL_DOT_PIXELS = 10;
+function FolderRow({ folder, isSelected, onSelect, t }) {
+  const { id, label, Icon, color, unreadCount } = folder;
+  let icon = null;
+  if (Icon) {
+    icon = /* @__PURE__ */ jsx(Icon, { fontSize: "small" });
+  } else if (color) {
+    icon = /* @__PURE__ */ jsx(Box, { "aria-hidden": "true", sx: { width: LABEL_DOT_PIXELS, height: LABEL_DOT_PIXELS, borderRadius: "50%", bgcolor: `${color}.main`, ml: 0.5 } });
+  }
+  return /* @__PURE__ */ jsxs(ListItemButton, { selected: isSelected, onClick: () => onSelect(id), sx: { borderRadius: 2 }, children: [
+    icon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 36 }, children: icon }),
+    /* @__PURE__ */ jsx(ListItemText, { primary: label }),
+    unreadCount > 0 && /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { fontWeight: 700 }, "aria-label": t("unreadCount", { count: unreadCount }), children: unreadCount })
+  ] });
+}
+function InboxLayout({
+  folders,
+  labels = [],
+  selectedFolderId,
+  onSelectFolder,
+  toolbar,
+  list,
+  detail,
+  isDetailOpen = false,
+  onCloseDetail,
+  foldersHeader,
+  texts
+}) {
+  const { t } = useToolkitTranslation("inbox", texts);
+  return /* @__PURE__ */ jsxs(Box, { sx: {
+    display: "grid",
+    gap: 2,
+    [DESKTOP_MEDIA_QUERY]: {
+      gridTemplateColumns: `${FOLDERS_WIDTH_PIXELS}px ${LIST_WIDTH_PIXELS}px minmax(0, 1fr)`,
+      height: DESKTOP_HEIGHT,
+      minHeight: DESKTOP_MIN_HEIGHT_PIXELS
+    }
+  }, children: [
+    /* @__PURE__ */ jsxs(Paper, { variant: "outlined", component: "nav", "aria-label": t("folders"), sx: { p: 1, overflowY: "auto", borderRadius: 3, [PHONE_MEDIA_QUERY]: { display: "none" } }, children: [
+      foldersHeader && /* @__PURE__ */ jsx(Box, { sx: { p: 0.5, pb: 1 }, children: foldersHeader }),
+      /* @__PURE__ */ jsx(List, { disablePadding: true, children: folders.map((folder) => /* @__PURE__ */ jsx(FolderRow, { folder, isSelected: folder.id === selectedFolderId, onSelect: onSelectFolder, t }, folder.id)) }),
+      labels.length > 0 && /* @__PURE__ */ jsx(
+        List,
+        {
+          disablePadding: true,
+          "aria-label": t("labels"),
+          subheader: /* @__PURE__ */ jsx(ListSubheader, { disableSticky: true, sx: { bgcolor: "transparent", lineHeight: 2.5, mt: 1 }, children: t("labels") }),
+          children: labels.map((label) => /* @__PURE__ */ jsx(FolderRow, { folder: label, isSelected: label.id === selectedFolderId, onSelect: onSelectFolder, t }, label.id))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Paper, { variant: "outlined", sx: {
+      display: "flex",
+      flexDirection: "column",
+      minHeight: 0,
+      borderRadius: 3,
+      overflow: "hidden",
+      [PHONE_MEDIA_QUERY]: isDetailOpen ? { display: "none" } : {}
+    }, children: [
+      /* @__PURE__ */ jsx(
+        Tabs,
+        {
+          value: selectedFolderId,
+          onChange: (event, folderId) => onSelectFolder(folderId),
+          variant: "scrollable",
+          "aria-label": t("folders"),
+          sx: { px: 1, [DESKTOP_MEDIA_QUERY]: { display: "none" } },
+          children: [...folders, ...labels].map(({ id, label, unreadCount }) => /* @__PURE__ */ jsx(Tab, { value: id, label: unreadCount > 0 ? /* @__PURE__ */ jsx(Badge, { color: "primary", badgeContent: unreadCount, sx: { pr: 1.5 }, children: label }) : label }, id))
+        }
+      ),
+      toolbar && /* @__PURE__ */ jsx(Box, { sx: { p: 1.5, pb: 1 }, children: toolbar }),
+      /* @__PURE__ */ jsx(Box, { sx: { flex: 1, minHeight: 0, overflowY: "auto", px: 1, pb: 1 }, children: list })
+    ] }),
+    /* @__PURE__ */ jsxs(Paper, { variant: "outlined", sx: { p: { xs: 2, md: 3 }, overflowY: "auto", borderRadius: 3, [PHONE_MEDIA_QUERY]: isDetailOpen ? {} : { display: "none" } }, children: [
+      onCloseDetail && /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(ArrowBackRoundedIcon, {}), onClick: onCloseDetail, sx: { mb: 1, [DESKTOP_MEDIA_QUERY]: { display: "none" } }, children: t("back") }),
+      detail
+    ] })
+  ] });
+}
+export {
+  InboxLayout as default
+};
+//# sourceMappingURL=InboxLayout.js.map

package/dist/inbox/InboxLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InboxLayout.js","sources":["../../src/inbox/InboxLayout.jsx"],"sourcesContent":["// El acomodo de una bandeja tipo correo: las carpetas, la lista y la lectura. En escritorio, tres columnas; en el teléfono,\n// una a la vez: las carpetas como pestañas arriba de la lista y, al abrir un mensaje, la lectura con «Regresar».\n//\n//   <InboxLayout folders={folders} selectedFolderId={folderId} onSelectFolder={setFolderId} toolbar={<Buscar y Redactar />}\n//                list={<MessageList … />} detail={<MessageView … />} isDetailOpen={Boolean(selectedId)} onCloseDetail={() => setSelectedId(null)} />\n//\n// Debajo de las carpetas, las etiquetas del proyecto (labels) con su punto de color, como Gmail; se eligen igual que una\n// carpeta. foldersHeader pone algo arriba de las carpetas (un botón «Redactar») y texts cambia cualquier texto.\n//\n// Escritorio o teléfono se decide con CSS (no con useMediaQuery): así el servidor pinta lo mismo que el navegador.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Badge from '@mui/material/Badge';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport List from '@mui/material/List';\nimport ListItemButton from '@mui/material/ListItemButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport ListSubheader from '@mui/material/ListSubheader';\nimport Paper from '@mui/material/Paper';\nimport Tab from '@mui/material/Tab';\nimport Tabs from '@mui/material/Tabs';\nimport Typography from '@mui/material/Typography';\nimport ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';\n\nimport {DESKTOP_MEDIA_QUERY, PHONE_MEDIA_QUERY} from '@/appShell/shellSizes.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\n\nconst FOLDERS_WIDTH_PIXELS = 220;\nconst LIST_WIDTH_PIXELS = 380;\n// la bandeja ocupa el alto de la ventana (menos la barra y el encabezado de la página): cada columna desliza por dentro\nconst DESKTOP_HEIGHT = 'calc(100dvh - 220px)';\nconst DESKTOP_MIN_HEIGHT_PIXELS = 480;\nconst LABEL_DOT_PIXELS = 10;\n\n/** Un renglón de carpeta o etiqueta: su ícono (o su punto de color), su nombre y cuántos sin leer. */\nfunction FolderRow({folder, isSelected, onSelect, t}) {\n    const {id, label, Icon, color, unreadCount} = folder;\n    let icon = null;\n    if (Icon) {\n        icon = <Icon fontSize=\"small\" />;\n    } else if (color) {\n        icon = <Box aria-hidden=\"true\" sx={{width: LABEL_DOT_PIXELS, height: LABEL_DOT_PIXELS, borderRadius: '50%', bgcolor: `${color}.main`, ml: 0.5}} />;\n    }\n    return (\n        <ListItemButton selected={isSelected} onClick={() => onSelect(id)} sx={{borderRadius: 2}}>\n            {icon && <ListItemIcon sx={{minWidth: 36}}>{icon}</ListItemIcon>}\n            <ListItemText primary={label} />\n            {unreadCount > 0 && <Typography variant=\"caption\" sx={{fontWeight: 700}} aria-label={t('unreadCount', {count: unreadCount})}>{unreadCount}</Typography>}\n        </ListItemButton>\n    );\n}\n\n/**\n * @param {object} props\n * @param {Array<{id: string, label: string, Icon?: import('react').ElementType, unreadCount?: number}>} props.folders\n * @param {Array<{id: string, label: string, color?: string, unreadCount?: number}>} [props.labels] las etiquetas, debajo de las\n *     carpetas con su punto de color (un color del tema); su id no debe repetir el de una carpeta\n * @param {string} props.selectedFolderId la carpeta o etiqueta elegida\n * @param {(folderId: string) => void} props.onSelectFolder\n * @param {import('react').ReactNode} [props.toolbar] arriba de la lista (buscar, redactar)\n * @param {import('react').ReactNode} props.list normalmente MessageList\n * @param {import('react').ReactNode} props.detail normalmente MessageView\n * @param {boolean} [props.isDetailOpen] en el teléfono, se ve la lectura en lugar de la lista\n * @param {() => void} [props.onCloseDetail] «Regresar» del teléfono\n * @param {import('react').ReactNode} [props.foldersHeader] arriba de las carpetas en escritorio (un botón «Redactar»)\n * @param {object} [props.texts] los textos que cambian, con la forma de `inbox` en los textos del paquete\n */\nexport default function InboxLayout({\n    folders, labels = [], selectedFolderId, onSelectFolder, toolbar, list, detail, isDetailOpen = false, onCloseDetail, foldersHeader, texts,\n}) {\n    const {t} = useToolkitTranslation('inbox', texts);\n\n    return (\n        <Box sx={{\n            display: 'grid', gap: 2,\n            [DESKTOP_MEDIA_QUERY]: {\n                gridTemplateColumns: `${FOLDERS_WIDTH_PIXELS}px ${LIST_WIDTH_PIXELS}px minmax(0, 1fr)`, height: DESKTOP_HEIGHT, minHeight: DESKTOP_MIN_HEIGHT_PIXELS,\n            },\n        }}>\n            {/* las carpetas: columna en escritorio */}\n            <Paper variant=\"outlined\" component=\"nav\" aria-label={t('folders')} sx={{p: 1, overflowY: 'auto', borderRadius: 3, [PHONE_MEDIA_QUERY]: {display: 'none'}}}>\n                {foldersHeader && <Box sx={{p: 0.5, pb: 1}}>{foldersHeader}</Box>}\n                <List disablePadding>\n                    {folders.map((folder) => (\n                        <FolderRow key={folder.id} folder={folder} isSelected={folder.id === selectedFolderId} onSelect={onSelectFolder} t={t} />\n                    ))}\n                </List>\n                {labels.length > 0 && (\n                    <List disablePadding aria-label={t('labels')}\n                          subheader={<ListSubheader disableSticky sx={{bgcolor: 'transparent', lineHeight: 2.5, mt: 1}}>{t('labels')}</ListSubheader>}>\n                        {labels.map((label) => (\n                            <FolderRow key={label.id} folder={label} isSelected={label.id === selectedFolderId} onSelect={onSelectFolder} t={t} />\n                        ))}\n                    </List>\n                )}\n            </Paper>\n\n            {/* la lista, con las carpetas como pestañas en el teléfono */}\n            <Paper variant=\"outlined\" sx={{display: 'flex', flexDirection: 'column', minHeight: 0, borderRadius: 3, overflow: 'hidden',\n                [PHONE_MEDIA_QUERY]: isDetailOpen ? {display: 'none'} : {}}}>\n                <Tabs value={selectedFolderId} onChange={(event, folderId) => onSelectFolder(folderId)} variant=\"scrollable\" aria-label={t('folders')}\n                      sx={{px: 1, [DESKTOP_MEDIA_QUERY]: {display: 'none'}}}>\n                    {[...folders, ...labels].map(({id, label, unreadCount}) => (\n                        <Tab key={id} value={id} label={unreadCount > 0 ? <Badge color=\"primary\" badgeContent={unreadCount} sx={{pr: 1.5}}>{label}</Badge> : label} />\n                    ))}\n                </Tabs>\n                {toolbar && <Box sx={{p: 1.5, pb: 1}}>{toolbar}</Box>}\n                <Box sx={{flex: 1, minHeight: 0, overflowY: 'auto', px: 1, pb: 1}}>{list}</Box>\n            </Paper>\n\n            {/* la lectura: en el teléfono solo con un mensaje abierto, con su «Regresar» */}\n            <Paper variant=\"outlined\" sx={{p: {xs: 2, md: 3}, overflowY: 'auto', borderRadius: 3, [PHONE_MEDIA_QUERY]: isDetailOpen ? {} : {display: 'none'}}}>\n                {onCloseDetail && (\n                    <Button startIcon={<ArrowBackRoundedIcon />} onClick={onCloseDetail} sx={{mb: 1, [DESKTOP_MEDIA_QUERY]: {display: 'none'}}}>{t('back')}</Button>\n                )}\n                {detail}\n            </Paper>\n        </Box>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/inbox/MessageList.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Avatar from "@mui/material/Avatar";
+import Box from "@mui/material/Box";
+import ButtonBase from "@mui/material/ButtonBase";
+import Chip from "@mui/material/Chip";
+import IconButton from "@mui/material/IconButton";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemAvatar from "@mui/material/ListItemAvatar";
+import ListItemButton from "@mui/material/ListItemButton";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import AttachFileRoundedIcon from "@mui/icons-material/AttachFileRounded";
+import CheckIcon from "@mui/icons-material/CheckRounded";
+import StarBorderRoundedIcon from "@mui/icons-material/StarBorderRounded";
+import StarRoundedIcon from "@mui/icons-material/StarRounded";
+import { initialsOf } from "../appShell/menuItemText.js";
+import { inboxDateOf } from "./inboxDates.js";
+import { useFormatters } from "../toolkit/useFormatters.js";
+import { tagOf } from "../ui/labels/tagOf.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import ActionsMenu from "../ui/actions/ActionsMenu.js";
+const UNREAD_DOT_PIXELS = 8;
+const AVATAR_PIXELS = 40;
+function MessageList({
+  messages,
+  selectedId = null,
+  onSelect,
+  onToggleStar,
+  selectedIds = [],
+  onSelectionChange,
+  messageActions,
+  renderMessage,
+  emptyText,
+  texts
+}) {
+  const { t } = useToolkitTranslation("inbox", texts);
+  const formatters = useFormatters();
+  if (messages.length === 0) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { p: 3, textAlign: "center" }, children: emptyText ?? t("empty") });
+  }
+  const toggleSelected = (messageId, isChecked) => {
+    onSelectionChange(isChecked ? [...selectedIds, messageId] : selectedIds.filter((id) => id !== messageId));
+  };
+  return /* @__PURE__ */ jsx(List, { disablePadding: true, "aria-label": t("listLabel"), children: messages.map((message) => {
+    const weight = message.isUnread ? 700 : 400;
+    const isChecked = selectedIds.includes(message.id);
+    const avatar = /* @__PURE__ */ jsx(Avatar, { sx: { width: AVATAR_PIXELS, height: AVATAR_PIXELS }, children: initialsOf(message.from.name) });
+    return /* @__PURE__ */ jsx(ListItem, { disablePadding: true, secondaryAction: (onToggleStar || messageActions) && /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { alignItems: "center" }, children: [
+      onToggleStar && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "small",
+          onClick: () => onToggleStar(message.id),
+          "aria-pressed": Boolean(message.isStarred),
+          "aria-label": message.isStarred ? t("unstar") : t("star"),
+          sx: { color: message.isStarred ? "warning.main" : "text.secondary" },
+          children: message.isStarred ? /* @__PURE__ */ jsx(StarRoundedIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(StarBorderRoundedIcon, { fontSize: "small" })
+        }
+      ),
+      messageActions && /* @__PURE__ */ jsx(ActionsMenu, { label: t("messageActions", { subject: message.subject }), actions: messageActions(message) })
+    ] }), sx: { "& .MuiListItemSecondaryAction-root": { right: 4 } }, children: /* @__PURE__ */ jsxs(
+      ListItemButton,
+      {
+        selected: message.id === selectedId || isChecked,
+        onClick: () => onSelect(message.id),
+        alignItems: "flex-start",
+        sx: { borderRadius: 2, pr: onToggleStar && messageActions ? 10 : 6 },
+        children: [
+          /* @__PURE__ */ jsx(ListItemAvatar, { sx: { mt: 0.5 }, children: onSelectionChange ? /* @__PURE__ */ jsx(
+            ButtonBase,
+            {
+              role: "checkbox",
+              "aria-checked": isChecked,
+              "aria-label": t("select", { subject: message.subject }),
+              sx: { borderRadius: "50%" },
+              onClick: (event) => {
+                event.stopPropagation();
+                toggleSelected(message.id, !isChecked);
+              },
+              children: isChecked ? /* @__PURE__ */ jsx(Avatar, { sx: { width: AVATAR_PIXELS, height: AVATAR_PIXELS, bgcolor: "primary.main", color: "primary.contrastText" }, children: /* @__PURE__ */ jsx(CheckIcon, {}) }) : avatar
+            }
+          ) : avatar }),
+          renderMessage ? /* @__PURE__ */ jsx(Box, { sx: { minWidth: 0, flex: 1 }, children: renderMessage(message) }) : /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0, flex: 1 }, children: [
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+              message.isUnread && /* @__PURE__ */ jsx(Box, { component: "span", "aria-label": t("unread"), sx: { width: UNREAD_DOT_PIXELS, height: UNREAD_DOT_PIXELS, borderRadius: "50%", bgcolor: "primary.main", flexShrink: 0 } }),
+              /* @__PURE__ */ jsxs(Typography, { variant: "body2", noWrap: true, sx: { fontWeight: weight, flex: 1 }, children: [
+                message.from.name,
+                message.threadCount > 1 && /* @__PURE__ */ jsxs(Typography, { component: "span", variant: "caption", color: "text.secondary", sx: { ml: 0.5 }, "aria-label": t("threadCount", { count: message.threadCount }), children: [
+                  "(",
+                  message.threadCount,
+                  ")"
+                ] })
+              ] }),
+              message.hasAttachments && /* @__PURE__ */ jsx(AttachFileRoundedIcon, { fontSize: "inherit", color: "action", "aria-label": t("attachments") }),
+              /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { flexShrink: 0, fontVariantNumeric: "tabular-nums" }, children: inboxDateOf(message.receivedAt, /* @__PURE__ */ new Date(), formatters) })
+            ] }),
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", noWrap: true, sx: { fontWeight: weight }, children: message.subject }),
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: message.preview }),
+            message.labels?.length > 0 && /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0.5, useFlexGap: true, sx: { flexWrap: "wrap", mt: 0.5 }, children: message.labels.map((rawLabel) => {
+              const label = tagOf(rawLabel);
+              return /* @__PURE__ */ jsx(Chip, { size: "small", variant: "outlined", color: label.color, label: label.label }, label.label);
+            }) })
+          ] })
+        ]
+      }
+    ) }, message.id);
+  }) });
+}
+export {
+  MessageList as default
+};
+//# sourceMappingURL=MessageList.js.map