@stackcraftmx/calcita 0.51.0 → 0.53.0

package/README.md

@@ -56,7 +56,10 @@ entrar y las del módulo de ejemplo, y `make:module` arma la de cada módulo nue
 Y dos revisiones para antes de subir: `pnpm lint` (ESLint: una variable que no existe, «t is not defined», se caza al
 escribir) y `pnpm check:texts` (`calcita check:texts`: que cada `t('llave')` escrita tal cual exista en todos los idiomas y
 que los idiomas tengan las mismas llaves). Sirve también en un proyecto que no salió del CLI: lee `src/**/*Texts.js` y
-`src/**/texts.js`.
+`src/**/texts.js`; con el código en otra carpeta, `calcita check:texts --source resources/js` (un Laravel). Un archivo de
+textos puede reexportar otro con ruta relativa o con `@/` (aquí apunta a la carpeta del código, como en Vite; pide Node 22.15
+o más). Nunca da un verde falso: sin la carpeta, sin ningún archivo de textos o con uno
+que no se pudo leer, sale con problema y no compara llaves.
 
 ## Arrancar en un proyecto que ya existe
 
@@ -66,7 +69,13 @@ pnpm add formik yup     # solo si usa /forms o /account
 ```
 
 Con npm es igual, con `npm install` en lugar de `pnpm add`. Desde la 0.25, formik y yup los pone el proyecto: Calcita usa
-la versión que ya tenga, no se casa con una.
+la versión que ya tenga, no se casa con una. Cada entrada aparte pide las suyas (la última columna de la tabla de entradas):
+sin ellas, el import truena al buscar el archivo y no dice qué falta. Por ejemplo, para las fechas,
+`pnpm add @mui/x-date-pickers dayjs`.
+
+Al subir de versión, apague y vuelva a prender el servidor de Vite (`pnpm dev` o `npm run dev`): Vite revisa lo instalado
+solo al arrancar, y con el servidor prendido sigue con la copia vieja del paquete y el error se busca en el código propio. No
+hace falta borrar `node_modules/.vite`; si de todos modos quiere que lo rehaga, `vite --force`.
 
 ```jsx
 import {ThemeProvider, createTheme} from '@mui/material/styles';
@@ -86,6 +95,10 @@ export const App = () => (
 
 Sin nada más, todo sale en español, con la zona horaria del navegador, montos en pesos y la navegación del navegador.
 
+`<Toaster />` va una sola vez y acepta lo de sonner tal cual (`duration`, `visibleToasts`, `offset`, `toastOptions`…). Por
+omisión los avisos salen abajo a la izquierda; si ahí estorban (el pie del menú lateral), `position` los cambia de esquina:
+`<Toaster position={TOASTER_POSITION.bottomCenter} />`.
+
 ## Lo que se conecta en ToolkitProvider
 
 | Prop | Para qué | Por omisión |
@@ -103,6 +116,7 @@ Sin nada más, todo sale en español, con la zona horaria del navegador, montos
 | `buildId` | la compilación del front que corre en la pestaña, para el aviso de versión nueva | ninguna (sin aviso) |
 | `fileTypes` | tipos de archivo propios para las descargas (su ícono y su color), además de Excel, CSV y PDF | los de la casa |
 | `onMissingText` | a quién avisarle de un texto que no existe (la pantalla enseña la llave): mandarlo a Sentry, tronar una prueba | un aviso en la consola, una vez por idioma y llave |
+| `requiredFromSchema` | los campos de formik leen del esquema de yup qué es obligatorio y ponen su asterisco (ver «Lo obligatorio, a la vista») | no |
 | `readValidationMessage` | cómo leer los mensajes de validación de un sistema que ya existe (ver «Mensajes de error propios») | `{key}`, `{msg}`, `{message}` y texto |
 
 Un `ToolkitProvider` dentro de otro (una parte de la app en otro idioma, una vista previa) toma del de afuera lo que no le
@@ -597,7 +611,8 @@ el servidor del proyecto); `HelpButton` es el «?» que la vuelve a abrir.
 
 Para listas donde una tabla se queda corta, `RecordCard`: arriba quién es (avatar con iniciales, folio, nombre) con su
 estatus, insignias, botón para abrirlo y menú «⋯»; en el cuerpo sus datos en grupos (`groups`, o `content` libre) y el dato
-principal grande; abajo lo que va a todo lo ancho y «Ver detalle», que despliega más. El orden es el que se da y nada se
+principal grande; abajo lo que va a todo lo ancho y «Ver detalle», que despliega más (`footerAlign` los junta a la
+izquierda o a la derecha; por omisión «Ver detalle» va en la otra orilla). El orden es el que se da y nada se
 reacomoda solo: para un orden obligatorio, `trailing` pone el estatus al final y `columns` fija el ancho de cada columna.
 `RecordCardSkeleton` es su esqueleto. El menú «⋯» (`ActionsMenu`) acepta secciones, separadores, ligas, renglones propios y
 submenús (`children`), que se abren dentro del mismo menú con «Regresar». Un renglón con `to` es una pantalla de la app: va
@@ -983,8 +998,28 @@ import {Form, Formik, FormNumberField, FormProblemAlert, FormTextField, SubmitBu
 ```
 
 formik y yup los instala el proyecto (`pnpm add formik yup`); `Formik`, `Form` y `Yup` también se pueden importar de
-`@stackcraftmx/calcita/forms`, que es la misma copia. `FormWizard` parte un formulario en pasos, con pasos opcionales (hay
-uno para formik y otro para react-hook-form); los ejemplos traen los dos.
+`@stackcraftmx/calcita/forms`, que es la misma copia (el `Formik` de Calcita es el de formik con el esquema a la vista de los
+campos, para lo obligatorio). `FormWizard` parte un formulario en pasos, con pasos opcionales (hay uno para formik y otro para
+react-hook-form); los ejemplos traen los dos. `hideBackOnFirstStep` no pinta «Anterior» en el primer paso (por omisión sale
+apagado, como antes).
+
+El `onChange` y el `onBlur` que la pantalla le pase a un campo de formik o de react-hook-form también corren, después de los
+del formulario y con el valor nuevo: `<FormSelectField name="kind" … onChange={(kind) => loadRatesFor(kind)} />`. Antes los
+del formulario los pisaban sin avisar.
+
+Para editar un registro de varios pasos (se entra a corregir un dato suelto, no a recorrer todo), el mismo `FormWizard`:
+
+```jsx
+<FormWizard steps={steps} submitLabel="Guardar cambios"
+            initialStepKey={review.stepKey}                   // abre en el paso que dice el servidor
+            orientation={WIZARD_ORIENTATION.vertical}         // un paso debajo del otro, con sus campos adentro
+            stepSelection={WIZARD_STEP_SELECTION.free}        // los títulos se pulsan: salta directo (o .checked: solo sin errores)
+            onStepChange={(stepKey) => setSearchParams({step: stepKey})} />
+```
+
+Con los títulos que se pulsan, la palomita de un paso la pone la pantalla (`steps[].completed`): «antes» ya no quiere decir
+«hecho». Al enviar, el formulario regresa al primer paso con error, como siempre. Sin estas opciones se porta igual que
+antes. `WizardLayout` suelto acepta lo mismo (`orientation`, `onStepSelect`); `skippedKeys` y `onSkip` ya no son obligatorios.
 
 Para que el formulario se vea como los de Apple (Ajustes, la hoja «Nuevo evento» de Calendario), los campos van dentro de
 una `FormSection`: cada uno se vuelve un renglón, con la etiqueta a la izquierda y el valor a la derecha, sin la caja de
@@ -1004,6 +1039,35 @@ import {FormRow, FormSection} from '@stackcraftmx/calcita';
 Los campos van directo dentro de la `FormSection` (sin Grid ni Stack en medio): la línea entre renglones se dibuja entre
 hermanos.
 
+En el teléfono la etiqueta se lleva el 38 % del renglón y un nombre largo se parte en tres renglones: con
+`labelPlacement={FORM_LABEL_PLACEMENT.topOnPhone}` la etiqueta sube arriba del campo por debajo de `sm`, y en pantallas más
+anchas sigue a la izquierda. Por omisión `side`, como antes. Para todos los formularios, una vez en el tema:
+`components: {CalcitaFormSection: {defaultProps: {labelPlacement: 'topOnPhone'}}}`.
+
+### Lo obligatorio, a la vista
+
+Un campo con `required` lleva un asterisco en su etiqueta, en los 17 campos de la casa (texto, número, listas, catálogo,
+color, casillas, transferencia, máscara, las cuatro fechas, archivos, imagen, adjuntos y texto con formato). El asterisco va
+en el estilo de la etiqueta y no como texto: la etiqueta sigue diciendo lo mismo (así la siguen encontrando
+`getByLabel('Nombre', {exact: true})` y `getByLabelText('Nombre')`) y el lector de pantalla no dice «asterisco»; el campo
+dice que es obligatorio con `required` (como en MUI) o, donde el navegador no sabe revisarlo, con `aria-required`.
+
+Con formik, el asterisco puede salir del mismo esquema de yup que revisa el formulario, sin marcar cada campo a mano:
+
+```jsx
+<ToolkitProvider requiredFromSchema>   {/* una vez, en la raíz */}
+```
+
+Cuenta lo que yup describe como no opcional (`.required()`, `.defined()`) y una lista con `.min(1)`; las condiciones
+(`.when`) se resuelven con los valores de ese momento. Lo que la pantalla diga con `required` gana. formik no les comparte el
+esquema a sus campos: el `Formik` de `@stackcraftmx/calcita/forms` lo hace solo; con el de `'formik'`, envuelva los campos en
+`<FormSchemaProvider schema={schema}>`. Con react-hook-form el esquema queda dentro del resolver: ahí cada campo lleva su
+`required`. La regla sin React: `isRequiredInSchema(schema, 'contacts.2.email', values)`.
+
+Como en MUI, `required` también lo revisa el navegador al enviar si el `<Form>` no lleva `noValidate`: póngaselo para que solo
+revise yup (en el idioma de la app). El asterisco se cambia desde el tema (`label: {'&[data-required]::after': {…}}` de
+`CalcitaFieldFrame` y `CalcitaFormRow`) o con el texto `common.form.requiredMark`.
+
 ### Mensajes de error propios (sin tocar el esquema)
 
 Los mensajes de `buildYupLocale()` son llaves que se traducen al pintarse, y cada uno lleva **su regla y su campo**. Cuando
@@ -1061,7 +1125,10 @@ idioma de la persona; la pantalla no convierte nada:
 La fecha con hora se ve en la zona del proyecto (`ToolkitProvider timeZone`) con el nombre de la zona abajo («Hora estándar
 central»), para que nadie dude en qué hora está escribiendo; `timeZone` la cambia en un solo campo (la hora de una
 sucursal) y el momento que viaja es el mismo. La hora sale de 24 horas o con a. m. y p. m. según `ToolkitProvider
-hourCycle`, y viaja igual. Lo que el selector de MUI X acepta y aquí no tiene nombre va en `pickerProps`.
+hourCycle`, y viaja igual. Lo que el selector de MUI X acepta y aquí no tiene nombre va en `pickerProps`; ahí también
+`format` y `ampm` ganan a los de la casa. `format` también va directo (`<DateInput format="DD/MMM/YYYY" />` enseña
+«16/jul/2029»; con el mes en letras no hay dudas entre día y mes) y lo que viaja no cambia. Piden
+`pnpm add @mui/x-date-pickers dayjs`.
 
 ```jsx
 import {FormDateTimeField, FormMonthField, FormTimeField} from '@stackcraftmx/calcita/date-pickers';

package/cli/calcita.js

@@ -36,6 +36,7 @@ const HELP = `Calcita: proyectos y esqueletos con la forma de los ejemplos.
        --module <módulo>                     … o solo de un módulo
   calcita check:texts                        revisa que cada t('llave') exista en todos los idiomas, y que los idiomas tengan
                                              las mismas llaves (lo que si no se descubre en la pantalla)
+       --source <carpeta>                    … con el código en otra carpeta (por omisión src; en Laravel, resources/js)
 
 Opciones:
   -y, --yes                 sin preguntas: lo recomendado, más lo que diga cada opción
@@ -54,6 +55,7 @@ const {values: options, positionals} = parseArgs({
         'yes': {type: 'boolean', short: 'y'},
         'help': {type: 'boolean', short: 'h'},
         'module': {type: 'string'},
+        'source': {type: 'string'},
         'label-es': {type: 'string'},
         'label-en': {type: 'string'},
         ...ANSWER_OPTIONS,
@@ -129,8 +131,8 @@ async function runMakeComponent(componentName) {
 }
 
 async function runCheckTexts() {
-    const {problems, checkedKeys, textFiles, languages} = await checkTexts({projectRoot: cwd()});
-    stdout.write(`Revisé ${checkedKeys} llaves escritas en el código contra ${textFiles.length} archivos de textos (${languages.join(', ') || 'sin idiomas'}).\n`);
+    const {problems, checkedKeys, textFiles, languages, sourceFolder} = await checkTexts({projectRoot: cwd(), sourceFolder: options.source});
+    stdout.write(`Revisé ${checkedKeys} llaves escritas en el código de ${sourceFolder}/ contra ${textFiles.length} archivos de textos (${languages.join(', ') || 'sin idiomas'}).\n`);
     if (problems.length === 0) {
         stdout.write('Todo en su lugar.\n');
         return;

package/cli/checkTexts.js

@@ -8,12 +8,17 @@
 // Para esas está el aviso de Calcita en la consola (onMissingText de ToolkitProvider).
 //
 // Lee los archivos de textos del proyecto (src/**/*Texts.js y src/**/texts.js: cada uno exporta {es: {...}, en: {...}}) con
-// node, así que no deben importar otros archivos; el que los junta (con import.meta.glob) se salta. Los namespaces de Calcita
-// (common, table, validation…) salen de su dist/.
+// node; el que los junta (con import.meta.glob) se salta. Si uno importa otro archivo, puede ser con ruta relativa o con el
+// alias @/, que aquí apunta a la carpeta del código, como en vite.config.js (trampa pagada: un texts.js que reexportaba con
+// @/ no se leía y sus 400 llaves salían como faltantes). Los namespaces de Calcita (common, table, validation…) salen de su dist/.
+//
+// Un verde falso es peor que un rojo: sin la carpeta, sin ningún archivo de textos o con uno que no se pudo leer, la revisión
+// sale con problema y no compara llaves (con un archivo sin leer, todas las suyas saldrían como faltantes).
 //
 // Solo node, sin dependencias (el CLI corre antes de que el proyecto tenga nada instalado): function (regla de la casa).
 // Pruebas en checkTexts.test.js.
-import {readdir, readFile} from 'node:fs/promises';
+import {readdir, readFile, stat} from 'node:fs/promises';
+import * as nodeModule from 'node:module';
 import {join, relative} from 'node:path';
 import {pathToFileURL} from 'node:url';
 
@@ -27,6 +32,30 @@ const NAMESPACE_CALL = /useToolkitTranslation\(\s*\[?\s*(['"])([\w-]+)\1/g;
 const KEY_CALL = /\bt\(\s*(['"])([^'"`$\n]+?)\1([^)]{0,200})/g;
 const PLURAL_SUFFIXES = ['', '_zero', '_one', '_two', '_few', '_many', '_other'];
 
+// la carpeta del código de la revisión en curso, para el alias @/ de los archivos de textos
+let aliasFolderUrl = null;
+let isAliasRegistered = false;
+
+/**
+ * Que node entienda @/ al leer los archivos de textos, como Vite. Se registra una sola vez por proceso y lee aliasFolderUrl,
+ * la carpeta de la revisión en curso. registerHooks llegó en Node 22.15: con uno anterior, un archivo de textos que importe
+ * con @/ no se puede leer y se dice.
+ */
+function understandAlias() {
+    if (isAliasRegistered || typeof nodeModule.registerHooks !== 'function') {
+        return;
+    }
+    nodeModule.registerHooks({
+        resolve(specifier, context, nextResolve) {
+            if (aliasFolderUrl && specifier.startsWith('@/')) {
+                return nextResolve(new URL(specifier.slice(2), aliasFolderUrl).href, context);
+            }
+            return nextResolve(specifier, context);
+        },
+    });
+    isAliasRegistered = true;
+}
+
 /**
  * Los archivos de una carpeta y sus subcarpetas, sin node_modules ni dist.
  *
@@ -126,20 +155,31 @@ async function packageTextsOf() {
 /**
  * @param {object} options
  * @param {string} options.projectRoot la carpeta del proyecto
- * @param {string} [options.sourceFolder] dónde está el código (por omisión src)
+ * @param {string} [options.sourceFolder] dónde está el código (por omisión src; en Laravel, resources/js): `--source` del CLI
  * @param {Record<string, object>} [options.packageTexts] los textos de Calcita (por omisión, los de su dist/)
- * @returns {Promise<{problems: string[], checkedKeys: number, textFiles: string[], languages: string[]}>}
+ * @returns {Promise<{problems: string[], checkedKeys: number, textFiles: string[], languages: string[], sourceFolder: string}>}
  */
-export async function checkTexts({projectRoot, sourceFolder = 'src', packageTexts}) {
+export async function checkTexts({projectRoot, sourceFolder: askedFolder = 'src', packageTexts}) {
+    // 'resources/js/' y 'resources/js' son la misma carpeta (el mensaje la dice sin la diagonal de más)
+    const sourceFolder = askedFolder.replace(/[\\/]+$/, '');
     const sourceRoot = join(projectRoot, sourceFolder);
+    const nothingChecked = {checkedKeys: 0, textFiles: [], languages: [], sourceFolder};
+    const isFolder = await stat(sourceRoot).then((found) => found.isDirectory(), () => false);
+    if (!isFolder) {
+        return {...nothingChecked, problems: [`No existe la carpeta ${sourceFolder}/ en el proyecto: no hay código que revisar (si está en otra, --source resources/js)`]};
+    }
     const files = await filesOf(sourceRoot);
     const problems = [];
+    aliasFolderUrl = `${pathToFileURL(sourceRoot).href}/`;
+    understandAlias();
 
     // 1. los textos del proyecto
     const projectTexts = {};
     const duplicates = [];
     const textFiles = files.filter((file) => TEXT_FILE.test(file.replaceAll('\\', '/')));
     const readTextFiles = [];
+    const unreadTextFiles = [];
+    const addedTexts = new Set();
     for (const file of textFiles) {
         const fileName = relative(projectRoot, file);
         // el que JUNTA los textos (appTexts.js, con el glob de Vite) no es un archivo de textos: se salta
@@ -153,11 +193,28 @@ export async function checkTexts({projectRoot, sourceFolder = 'src', packageText
             if (exported.length === 0) {
                 problems.push(`${fileName}: no exporta textos con la forma {es: {...}, en: {...}}`);
             }
-            exported.forEach((fileTexts) => addTexts(projectTexts, fileTexts, duplicates, fileName));
+            // el mismo objeto que otro archivo ya reexportó (texts.js que reexporta documentFileTexts.js) se suma una vez:
+            // node da el mismo objeto por archivo, y sumarlo dos veces lo haría pasar por repetido
+            exported.filter((fileTexts) => !addedTexts.has(fileTexts)).forEach((fileTexts) => {
+                addedTexts.add(fileTexts);
+                addTexts(projectTexts, fileTexts, duplicates, fileName);
+            });
         } catch (error) {
-            problems.push(`${fileName}: no se pudo leer (${error.message.split('\n')[0]}); un archivo de textos no debe importar otros archivos`);
+            unreadTextFiles.push(fileName);
+            const reason = error.message.split('\n')[0];
+            const hint = isAliasRegistered
+                ? 'revise lo que importa: otro archivo va con ruta relativa o con @/'
+                : 'si importa con @/, esta revisión necesita Node 22.15 o más';
+            problems.push(`${fileName}: no se pudo leer (${reason}); ${hint}`);
         }
     }
+    if (unreadTextFiles.length > 0) {
+        problems.push(`No revisé las llaves: sin ${unreadTextFiles.length === 1 ? 'ese archivo' : 'esos archivos'} de textos, sus llaves saldrían todas como faltantes`);
+        return {...nothingChecked, problems, textFiles: readTextFiles};
+    }
+    if (readTextFiles.length === 0) {
+        return {...nothingChecked, problems: [`No encontré archivos de textos (*Texts.js o texts.js) en ${sourceFolder}/: no hay con qué comparar (si el código está en otra carpeta, --source resources/js)`]};
+    }
     problems.push(...duplicates.map((duplicate) => `texto repetido: ${duplicate}`));
 
     const languages = Object.keys(projectTexts);
@@ -205,5 +262,5 @@ export async function checkTexts({projectRoot, sourceFolder = 'src', packageText
         }
     }
 
-    return {problems, checkedKeys, textFiles: readTextFiles, languages};
+    return {problems, checkedKeys, textFiles: readTextFiles, languages, sourceFolder};
 }

package/dist/appShell/BarActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarActionButton.js","sources":["../../src/appShell/BarActionButton.jsx"],"sourcesContent":["// Un botón de acción de la pantalla que se acomoda solo a donde quedó (lo pidió el autor, y es lo que pide la guía de Apple\n// para las barras: «Prefer simple, recognizable symbols for items instead of text»):\n//   - en una cápsula (arriba en la barra, flotando en el teléfono o en la franja): solo el ícono, con su nombre en el tooltip\n//     y para el lector de pantalla. En el teléfono el tooltip sale al dejar el dedo encima, como en iOS;\n//   - en el menú «⋯» del teléfono (las que ya no caben en el renglón flotante): un renglón con ícono y texto;\n//   - suelto (fuera de BarActions): ícono con texto, botón sin relleno.\n// Lo demás va al botón (disabled, color, component y to para una liga…). Sin ícono, en la cápsula va su texto (un botón sin\n// relleno) y en el «⋯» el renglón sin ícono: mejor un texto que un botón vacío.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaBarActionButton con defaultProps, styleOverrides de\n// sus partes (button, iconButton, menuItem) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Button from '@mui/material/Button';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\n\nimport {BAR_ACTIONS_PLACEMENT, useBarActionsPlacement, useCloseBarActionsMenu} from '@/appShell/barActionsSlot.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaBarActionButton)\nconst THEME_NAME = 'CalcitaBarActionButton';\nconst BarActionButtonButton = piecePart(THEME_NAME, 'Button', Button);\nconst BarActionButtonIconButton = piecePart(THEME_NAME, 'IconButton', IconButton);\nconst BarActionButtonMenuItem = piecePart(THEME_NAME, 'MenuItem', MenuItem);\n\n/**\n * @param {object} props\n * @param {string} props.label el nombre de la acción, ya traducido: «Agregar sucursal»\n * @param {import('react').ReactNode} [props.icon] el ícono (<AddRoundedIcon />); sin él, se ve su texto\n * @param {(event: object) => void} [props.onClick]\n * @param {boolean} [props.disabled]\n * @param {'inherit'|'primary'|'secondary'|'success'|'error'|'info'|'warning'} [props.color] por omisión primary\n */\nfunction BarActionButtonContent(props) {\n    const {label, icon, onClick, disabled, color = 'primary', ...buttonProps} = usePieceProps(props, THEME_NAME);\n    const placement = useBarActionsPlacement();\n    const closeMenu = useCloseBarActionsMenu();\n\n    if (placement === BAR_ACTIONS_PLACEMENT.menu) {\n        // primero se cierra el menú: la acción puede abrir una ventana y el menú quedaba encima\n        const pickFromMenu = (event) => {\n            closeMenu();\n            onClick?.(event);\n        };\n        return (\n            <BarActionButtonMenuItem onClick={pickFromMenu} disabled={disabled} {...buttonProps}>\n                {icon && <ListItemIcon>{icon}</ListItemIcon>}\n                <ListItemText inset={!icon}>{label}</ListItemText>\n            </BarActionButtonMenuItem>\n        );\n    }\n    if (placement === BAR_ACTIONS_PLACEMENT.capsule && icon) {\n        // OJO: el tooltip envuelve un span para que también salga con el botón deshabilitado (MUI no lo pinta sobre un\n        // elemento deshabilitado)\n        return (\n            <Tooltip title={label}>\n                <span>\n                    <BarActionButtonIconButton aria-label={label} onClick={onClick} disabled={disabled} color={color} {...buttonProps}>{icon}</BarActionButtonIconButton>\n                </span>\n            </Tooltip>\n        );\n    }\n    return <BarActionButtonButton startIcon={icon} onClick={onClick} disabled={disabled} color={color} {...buttonProps}>{label}</BarActionButtonButton>;\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst BarActionButton = withPieceSlots(BarActionButtonContent, THEME_NAME);\nexport default BarActionButton;\n"],"names":[],"mappings":";;;;;;;;;;AAwBA,MAAM,aAAa;AACnB,MAAM,wBAAwB,UAAU,YAAY,UAAU,MAAM;AACpE,MAAM,4BAA4B,UAAU,YAAY,cAAc,UAAU;AAChF,MAAM,0BAA0B,UAAU,YAAY,YAAY,QAAQ;AAU1E,SAAS,uBAAuB,OAAO;AACnC,QAAM,EAAC,OAAO,MAAM,SAAS,UAAU,QAAQ,WAAW,GAAG,YAAA,IAAe,cAAc,OAAO,UAAU;AAC3G,QAAM,YAAY,uBAAA;AAClB,QAAM,YAAY,uBAAA;AAElB,MAAI,cAAc,sBAAsB,MAAM;AAE1C,UAAM,eAAe,CAAC,UAAU;AAC5B,gBAAA;AACA,gBAAU,KAAK;AAAA,IACnB;AACA,gCACK,yBAAA,EAAwB,SAAS,cAAc,UAAqB,GAAG,aACnE,UAAA;AAAA,MAAA,QAAQ,oBAAC,gBAAc,UAAA,KAAA,CAAK;AAAA,MAC7B,oBAAC,cAAA,EAAa,OAAO,CAAC,MAAO,UAAA,MAAA,CAAM;AAAA,IAAA,GACvC;AAAA,EAER;AACA,MAAI,cAAc,sBAAsB,WAAW,MAAM;AAGrD,+BACK,SAAA,EAAQ,OAAO,OACZ,UAAA,oBAAC,UACG,UAAA,oBAAC,2BAAA,EAA0B,cAAY,OAAO,SAAkB,UAAoB,OAAe,GAAG,aAAc,UAAA,MAAK,GAC7H,EAAA,CACJ;AAAA,EAER;AACA,SAAO,oBAAC,yBAAsB,WAAW,MAAM,SAAkB,UAAoB,OAAe,GAAG,aAAc,UAAA,MAAA,CAAM;AAC/H;AAGA,MAAM,kBAAkB,eAAe,wBAAwB,UAAU;"}
+{"version":3,"file":"BarActionButton.js","sources":["../../src/appShell/BarActionButton.jsx"],"sourcesContent":["// Un botón de acción de la pantalla que se acomoda solo a donde quedó (lo pidió el autor, y es lo que pide la guía de Apple\n// para las barras: «Prefer simple, recognizable symbols for items instead of text»):\n//   - en una cápsula (arriba en la barra, flotando en el teléfono o en la franja): solo el ícono, con su nombre en el tooltip\n//     y para el lector de pantalla. En el teléfono el tooltip sale al dejar el dedo encima, como en iOS;\n//   - en el menú «⋯» del teléfono (las que ya no caben en el renglón flotante): un renglón con ícono y texto;\n//   - suelto (fuera de BarActions): ícono con texto, botón sin relleno.\n// Lo demás va al botón (disabled, color, component y to para una liga…). Sin ícono, en la cápsula va su texto (un botón sin\n// relleno) y en el «⋯» el renglón sin ícono: mejor un texto que un botón vacío.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaBarActionButton con defaultProps, styleOverrides de\n// sus partes (button, iconButton, menuItem) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Button from '@mui/material/Button';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\n\nimport {BAR_ACTIONS_PLACEMENT, useBarActionsPlacement, useCloseBarActionsMenu} from '@/appShell/barActionsSlot.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaBarActionButton)\nconst THEME_NAME = 'CalcitaBarActionButton';\nconst BarActionButtonButton = piecePart(THEME_NAME, 'Button', Button);\nconst BarActionButtonIconButton = piecePart(THEME_NAME, 'IconButton', IconButton);\nconst BarActionButtonMenuItem = piecePart(THEME_NAME, 'MenuItem', MenuItem);\n\n/**\n * @param {object} props\n * @param {string} props.label el nombre de la acción, ya traducido: «Agregar sucursal»\n * @param {import('react').ReactNode} [props.icon] el ícono (<AddRoundedIcon />); sin él, se ve su texto\n * @param {(event: object) => void} [props.onClick]\n * @param {boolean} [props.disabled]\n * @param {'inherit'|'primary'|'secondary'|'success'|'error'|'info'|'warning'} [props.color] por omisión primary\n * @param {object} [props.sx] ajustes del botón; lo demás que se le pase también llega al botón (o al renglón del «⋯»)\n */\nfunction BarActionButtonContent(props) {\n    const {label, icon, onClick, disabled, color = 'primary', ...buttonProps} = usePieceProps(props, THEME_NAME);\n    const placement = useBarActionsPlacement();\n    const closeMenu = useCloseBarActionsMenu();\n\n    if (placement === BAR_ACTIONS_PLACEMENT.menu) {\n        // primero se cierra el menú: la acción puede abrir una ventana y el menú quedaba encima\n        const pickFromMenu = (event) => {\n            closeMenu();\n            onClick?.(event);\n        };\n        return (\n            <BarActionButtonMenuItem onClick={pickFromMenu} disabled={disabled} {...buttonProps}>\n                {icon && <ListItemIcon>{icon}</ListItemIcon>}\n                <ListItemText inset={!icon}>{label}</ListItemText>\n            </BarActionButtonMenuItem>\n        );\n    }\n    if (placement === BAR_ACTIONS_PLACEMENT.capsule && icon) {\n        // OJO: el tooltip envuelve un span para que también salga con el botón deshabilitado (MUI no lo pinta sobre un\n        // elemento deshabilitado)\n        return (\n            <Tooltip title={label}>\n                <span>\n                    <BarActionButtonIconButton aria-label={label} onClick={onClick} disabled={disabled} color={color} {...buttonProps}>{icon}</BarActionButtonIconButton>\n                </span>\n            </Tooltip>\n        );\n    }\n    return <BarActionButtonButton startIcon={icon} onClick={onClick} disabled={disabled} color={color} {...buttonProps}>{label}</BarActionButtonButton>;\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst BarActionButton = withPieceSlots(BarActionButtonContent, THEME_NAME);\nexport default BarActionButton;\n"],"names":[],"mappings":";;;;;;;;;;AAwBA,MAAM,aAAa;AACnB,MAAM,wBAAwB,UAAU,YAAY,UAAU,MAAM;AACpE,MAAM,4BAA4B,UAAU,YAAY,cAAc,UAAU;AAChF,MAAM,0BAA0B,UAAU,YAAY,YAAY,QAAQ;AAW1E,SAAS,uBAAuB,OAAO;AACnC,QAAM,EAAC,OAAO,MAAM,SAAS,UAAU,QAAQ,WAAW,GAAG,YAAA,IAAe,cAAc,OAAO,UAAU;AAC3G,QAAM,YAAY,uBAAA;AAClB,QAAM,YAAY,uBAAA;AAElB,MAAI,cAAc,sBAAsB,MAAM;AAE1C,UAAM,eAAe,CAAC,UAAU;AAC5B,gBAAA;AACA,gBAAU,KAAK;AAAA,IACnB;AACA,gCACK,yBAAA,EAAwB,SAAS,cAAc,UAAqB,GAAG,aACnE,UAAA;AAAA,MAAA,QAAQ,oBAAC,gBAAc,UAAA,KAAA,CAAK;AAAA,MAC7B,oBAAC,cAAA,EAAa,OAAO,CAAC,MAAO,UAAA,MAAA,CAAM;AAAA,IAAA,GACvC;AAAA,EAER;AACA,MAAI,cAAc,sBAAsB,WAAW,MAAM;AAGrD,+BACK,SAAA,EAAQ,OAAO,OACZ,UAAA,oBAAC,UACG,UAAA,oBAAC,2BAAA,EAA0B,cAAY,OAAO,SAAkB,UAAoB,OAAe,GAAG,aAAc,UAAA,MAAK,GAC7H,EAAA,CACJ;AAAA,EAER;AACA,SAAO,oBAAC,yBAAsB,WAAW,MAAM,SAAkB,UAAoB,OAAe,GAAG,aAAc,UAAA,MAAA,CAAM;AAC/H;AAGA,MAAM,kBAAkB,eAAe,wBAAwB,UAAU;"}

package/dist/datePickers/DateInput.js

@@ -27,6 +27,8 @@ function DateInputContent(props) {
     disablePast = false,
     openTo = "day",
     disabled = false,
+    required = false,
+    format,
     inputRef,
     pickerProps,
     messages,
@@ -35,11 +37,11 @@ function DateInputContent(props) {
   } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { language, inputId, errorText, formats } = usePickerField({ name, kind: "date", error, label, messages, texts });
-  return /* @__PURE__ */ jsx(PickerFrame, { inputId, label, language, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PickerFrame, { inputId, label, required, language, children: /* @__PURE__ */ jsx(
     DateInputPicker,
     {
       ...pickerProps,
-      format: formats.date,
+      format: format ?? pickerProps?.format ?? formats.date,
       value: pickerValueOf(value),
       minDate: pickerValueOf(minDate) ?? void 0,
       maxDate: pickerValueOf(maxDate) ?? void 0,
@@ -54,7 +56,7 @@ function DateInputContent(props) {
         pickerProps?.onClose?.();
         onBlur?.();
       },
-      slotProps: textFieldSlotPropsOf({ id: inputId, name, onBlur, error: Boolean(errorText), helperText: errorText ?? helperText }, pickerProps)
+      slotProps: textFieldSlotPropsOf({ id: inputId, name, onBlur, required, error: Boolean(errorText), helperText: errorText ?? helperText }, pickerProps)
     }
   ) });
 }

package/dist/datePickers/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sources":["../../src/datePickers/DateInput.jsx"],"sourcesContent":["// Campo de FECHA suelto con el DatePicker de MUI X (@stackcraftmx/calcita/date-pickers), con la etiqueta arriba como los\n// demás campos del paquete.\n//\n// Al formulario (y al servidor) viaja la fecha de calendario 'AAAA-MM-DD' en texto; en pantalla se ve DD/MM/AAAA en español\n// y MM/DD/AAAA en inglés, con el calendario y sus textos en el idioma activo. '' = sin fecha. Una fecha de calendario no\n// tiene hora ni zona: nunca se pasa por Date (que la movería de día según la zona).\n//\n// Cada campo trae su LocalizationProvider con dayjs (PickerFrame): la pantalla no tiene que poner nada alrededor.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDateInput con defaultProps, styleOverrides de\n// sus partes (picker) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport dayjs from 'dayjs';\nimport {DatePicker} from '@mui/x-date-pickers/DatePicker';\n\nimport PickerFrame, {textFieldSlotPropsOf} from '@/datePickers/PickerFrame.jsx';\nimport {CALENDAR_DATE_FORMAT} from '@/datePickers/pickerValues.js';\nimport {usePickerField} from '@/datePickers/usePickerField.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaDateInput)\nconst THEME_NAME = 'CalcitaDateInput';\nconst DateInputPicker = piecePart(THEME_NAME, 'Picker', DatePicker);\n\nexport {CALENDAR_DATE_FORMAT};\n\n/**\n * Una fecha de calendario 'AAAA-MM-DD' como la quiere el DatePicker; null si está vacía.\n *\n * @param {string|null|undefined} calendarDate\n * @returns {import('dayjs').Dayjs|null}\n */\nfunction pickerValueOf(calendarDate) {\n    // dayjs lee 'AAAA-MM-DD' como día local (a diferencia de new Date, que lo toma en UTC y lo mueve de día)\n    return calendarDate ? dayjs(calendarDate) : null;\n}\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|null|undefined} props.value 'AAAA-MM-DD' o ''\n * @param {(value: string) => void} props.onChange recibe 'AAAA-MM-DD' ('' al borrar o con una fecha a medias)\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText]\n * @param {string} [props.minDate] 'AAAA-MM-DD'\n * @param {string} [props.maxDate] 'AAAA-MM-DD'\n * @param {boolean} [props.disableFuture] p. ej. una fecha de nacimiento\n * @param {boolean} [props.disablePast] p. ej. una cita\n * @param {'day'|'month'|'year'} [props.openTo] por dónde abre el calendario (year para un nacimiento)\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {object} [props.pickerProps] lo demás del DatePicker de MUI X que aquí no tiene nombre (shouldDisableDate, slots,\n *     slotProps…); value y onChange son del campo\n * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación\n *     ({required: 'Elija la fecha', min: 'Desde mañana'}): gana al de Calcita y al de los textos\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction DateInputContent(props) {\n    const {\n        name, label, value, onChange, onBlur, error, helperText = ' ', minDate, maxDate, disableFuture = false, disablePast = false,\n        openTo = 'day', disabled = false, inputRef, pickerProps, messages, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {language, inputId, errorText, formats} = usePickerField({name, kind: 'date', error, label, messages, texts});\n\n    return (\n        <PickerFrame inputId={inputId} label={label} language={language}>\n            <DateInputPicker\n                {...pickerProps}\n                format={formats.date}\n                value={pickerValueOf(value)}\n                minDate={pickerValueOf(minDate) ?? undefined}\n                maxDate={pickerValueOf(maxDate) ?? undefined}\n                disableFuture={disableFuture}\n                disablePast={disablePast}\n                disabled={disabled}\n                openTo={openTo}\n                views={openTo === 'year' ? ['year', 'month', 'day'] : pickerProps?.views}\n                inputRef={inputRef}\n                // una fecha a medias (25/1_/____) todavía no es fecha: viaja como vacía hasta que se complete\n                onChange={(pickedDate) => onChange(pickedDate?.isValid() ? pickedDate.format(CALENDAR_DATE_FORMAT) : '')}\n                onClose={() => {\n                    pickerProps?.onClose?.();\n                    onBlur?.();\n                }}\n                slotProps={textFieldSlotPropsOf({id: inputId, name, onBlur, error: Boolean(errorText), helperText: errorText ?? helperText}, pickerProps)}\n            />\n        </PickerFrame>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst DateInput = withPieceSlots(DateInputContent, THEME_NAME);\nexport default DateInput;\n"],"names":[],"mappings":";;;;;;;;;AAuBA,MAAM,aAAa;AACnB,MAAM,kBAAkB,UAAU,YAAY,UAAU,UAAU;AAUlE,SAAS,cAAc,cAAc;AAEjC,SAAO,eAAe,MAAM,YAAY,IAAI;AAChD;AAwBA,SAAS,iBAAiB,OAAO;AAC7B,QAAM;AAAA,IACF;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAO,aAAa;AAAA,IAAK;AAAA,IAAS;AAAA,IAAS,gBAAgB;AAAA,IAAO,cAAc;AAAA,IACtH,SAAS;AAAA,IAAO,WAAW;AAAA,IAAO;AAAA,IAAU;AAAA,IAAa;AAAA,IAAU;AAAA,IACnE,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AACnC,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,UAAU,SAAS,WAAW,YAAW,eAAe,EAAC,MAAM,MAAM,QAAQ,OAAO,OAAO,UAAU,OAAM;AAElH,SACI,oBAAC,aAAA,EAAY,SAAkB,OAAc,UACzC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,QAAQ,QAAQ;AAAA,MAChB,OAAO,cAAc,KAAK;AAAA,MAC1B,SAAS,cAAc,OAAO,KAAK;AAAA,MACnC,SAAS,cAAc,OAAO,KAAK;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,WAAW,SAAS,CAAC,QAAQ,SAAS,KAAK,IAAI,aAAa;AAAA,MACnE;AAAA,MAEA,UAAU,CAAC,eAAe,SAAS,YAAY,YAAY,WAAW,OAAO,oBAAoB,IAAI,EAAE;AAAA,MACvG,SAAS,MAAM;AACX,qBAAa,UAAA;AACb,iBAAA;AAAA,MACJ;AAAA,MACA,WAAW,qBAAqB,EAAC,IAAI,SAAS,MAAM,QAAQ,OAAO,QAAQ,SAAS,GAAG,YAAY,aAAa,WAAA,GAAa,WAAW;AAAA,IAAA;AAAA,EAAA,GAEhJ;AAER;AAGA,MAAM,YAAY,eAAe,kBAAkB,UAAU;"}
+{"version":3,"file":"DateInput.js","sources":["../../src/datePickers/DateInput.jsx"],"sourcesContent":["// Campo de FECHA suelto con el DatePicker de MUI X (@stackcraftmx/calcita/date-pickers), con la etiqueta arriba como los\n// demás campos del paquete.\n//\n// Al formulario (y al servidor) viaja la fecha de calendario 'AAAA-MM-DD' en texto; en pantalla se ve DD/MM/AAAA en español\n// y MM/DD/AAAA en inglés, con el calendario y sus textos en el idioma activo. '' = sin fecha. Una fecha de calendario no\n// tiene hora ni zona: nunca se pasa por Date (que la movería de día según la zona).\n//\n// Cada campo trae su LocalizationProvider con dayjs (PickerFrame): la pantalla no tiene que poner nada alrededor.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDateInput con defaultProps, styleOverrides de\n// sus partes (picker) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport dayjs from 'dayjs';\nimport {DatePicker} from '@mui/x-date-pickers/DatePicker';\n\nimport PickerFrame, {textFieldSlotPropsOf} from '@/datePickers/PickerFrame.jsx';\nimport {CALENDAR_DATE_FORMAT} from '@/datePickers/pickerValues.js';\nimport {usePickerField} from '@/datePickers/usePickerField.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaDateInput)\nconst THEME_NAME = 'CalcitaDateInput';\nconst DateInputPicker = piecePart(THEME_NAME, 'Picker', DatePicker);\n\nexport {CALENDAR_DATE_FORMAT};\n\n/**\n * Una fecha de calendario 'AAAA-MM-DD' como la quiere el DatePicker; null si está vacía.\n *\n * @param {string|null|undefined} calendarDate\n * @returns {import('dayjs').Dayjs|null}\n */\nfunction pickerValueOf(calendarDate) {\n    // dayjs lee 'AAAA-MM-DD' como día local (a diferencia de new Date, que lo toma en UTC y lo mueve de día)\n    return calendarDate ? dayjs(calendarDate) : null;\n}\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|null|undefined} props.value 'AAAA-MM-DD' o ''\n * @param {(value: string) => void} props.onChange recibe 'AAAA-MM-DD' ('' al borrar o con una fecha a medias)\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText]\n * @param {string} [props.minDate] 'AAAA-MM-DD'\n * @param {string} [props.maxDate] 'AAAA-MM-DD'\n * @param {boolean} [props.disableFuture] p. ej. una fecha de nacimiento\n * @param {boolean} [props.disablePast] p. ej. una cita\n * @param {'day'|'month'|'year'} [props.openTo] por dónde abre el calendario (year para un nacimiento)\n * @param {boolean} [props.disabled]\n * @param {string} [props.format] cómo se ve la fecha, con los códigos de dayjs ('DD/MMM/YYYY' enseña «16/jul/2029», sin dudas\n *     entre día y mes); por omisión DD/MM/YYYY en español y MM/DD/YYYY en inglés\n * @param {boolean} [props.required] obligatorio: el asterisco en la etiqueta y, como en MUI, required en el campo\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {object} [props.pickerProps] lo demás del DatePicker de MUI X que aquí no tiene nombre (shouldDisableDate, slots,\n *     slotProps…); value y onChange son del campo\n * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación\n *     ({required: 'Elija la fecha', min: 'Desde mañana'}): gana al de Calcita y al de los textos\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction DateInputContent(props) {\n    const {\n        name, label, value, onChange, onBlur, error, helperText = ' ', minDate, maxDate, disableFuture = false, disablePast = false,\n        openTo = 'day', disabled = false, required = false, format, inputRef, pickerProps, messages, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {language, inputId, errorText, formats} = usePickerField({name, kind: 'date', error, label, messages, texts});\n\n    return (\n        <PickerFrame inputId={inputId} label={label} required={required} language={language}>\n            <DateInputPicker\n                {...pickerProps}\n                // el formato de la pantalla gana al de la casa (antes el de la casa iba después y lo pisaba sin avisar)\n                format={format ?? pickerProps?.format ?? formats.date}\n                value={pickerValueOf(value)}\n                minDate={pickerValueOf(minDate) ?? undefined}\n                maxDate={pickerValueOf(maxDate) ?? undefined}\n                disableFuture={disableFuture}\n                disablePast={disablePast}\n                disabled={disabled}\n                openTo={openTo}\n                views={openTo === 'year' ? ['year', 'month', 'day'] : pickerProps?.views}\n                inputRef={inputRef}\n                // una fecha a medias (25/1_/____) todavía no es fecha: viaja como vacía hasta que se complete\n                onChange={(pickedDate) => onChange(pickedDate?.isValid() ? pickedDate.format(CALENDAR_DATE_FORMAT) : '')}\n                onClose={() => {\n                    pickerProps?.onClose?.();\n                    onBlur?.();\n                }}\n                slotProps={textFieldSlotPropsOf({id: inputId, name, onBlur, required, error: Boolean(errorText), helperText: errorText ?? helperText}, pickerProps)}\n            />\n        </PickerFrame>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst DateInput = withPieceSlots(DateInputContent, THEME_NAME);\nexport default DateInput;\n"],"names":[],"mappings":";;;;;;;;;AAuBA,MAAM,aAAa;AACnB,MAAM,kBAAkB,UAAU,YAAY,UAAU,UAAU;AAUlE,SAAS,cAAc,cAAc;AAEjC,SAAO,eAAe,MAAM,YAAY,IAAI;AAChD;AA2BA,SAAS,iBAAiB,OAAO;AAC7B,QAAM;AAAA,IACF;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAO,aAAa;AAAA,IAAK;AAAA,IAAS;AAAA,IAAS,gBAAgB;AAAA,IAAO,cAAc;AAAA,IACtH,SAAS;AAAA,IAAO,WAAW;AAAA,IAAO,WAAW;AAAA,IAAO;AAAA,IAAQ;AAAA,IAAU;AAAA,IAAa;AAAA,IAAU;AAAA,IAC7F,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AACnC,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,UAAU,SAAS,WAAW,YAAW,eAAe,EAAC,MAAM,MAAM,QAAQ,OAAO,OAAO,UAAU,OAAM;AAElH,SACI,oBAAC,aAAA,EAAY,SAAkB,OAAc,UAAoB,UAC7D,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MAEJ,QAAQ,UAAU,aAAa,UAAU,QAAQ;AAAA,MACjD,OAAO,cAAc,KAAK;AAAA,MAC1B,SAAS,cAAc,OAAO,KAAK;AAAA,MACnC,SAAS,cAAc,OAAO,KAAK;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,WAAW,SAAS,CAAC,QAAQ,SAAS,KAAK,IAAI,aAAa;AAAA,MACnE;AAAA,MAEA,UAAU,CAAC,eAAe,SAAS,YAAY,YAAY,WAAW,OAAO,oBAAoB,IAAI,EAAE;AAAA,MACvG,SAAS,MAAM;AACX,qBAAa,UAAA;AACb,iBAAA;AAAA,MACJ;AAAA,MACA,WAAW,qBAAqB,EAAC,IAAI,SAAS,MAAM,QAAQ,UAAU,OAAO,QAAQ,SAAS,GAAG,YAAY,aAAa,WAAA,GAAa,WAAW;AAAA,IAAA;AAAA,EAAA,GAE1J;AAER;AAGA,MAAM,YAAY,eAAe,kBAAkB,UAAU;"}

package/dist/datePickers/DateTimeInput.js

@@ -31,6 +31,8 @@ function DateTimeInputContent(props) {
     showTimeZone = true,
     timeZoneLabel,
     disabled = false,
+    required = false,
+    format,
     inputRef,
     pickerProps,
     messages,
@@ -46,13 +48,13 @@ function DateTimeInputContent(props) {
   const hasClockRule = minimumMinutesFromNow != null;
   const currentMinute = useCurrentMinute(hasClockRule);
   const earliest = latestInstantOf(minDateTime, hasClockRule ? earliestInstantFromNow(minimumMinutesFromNow, currentMinute) : "");
-  return /* @__PURE__ */ jsx(PickerFrame, { inputId: field.inputId, label, language: field.language, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PickerFrame, { inputId: field.inputId, label, required, language: field.language, children: /* @__PURE__ */ jsx(
     DateTimeInputPicker,
     {
       ...pickerProps,
       timezone: shownTimeZone,
-      format: field.formats.dateTime,
-      ampm: field.formats.ampm,
+      format: format ?? pickerProps?.format ?? field.formats.dateTime,
+      ampm: pickerProps?.ampm ?? field.formats.ampm,
       value: pickerInstantOf(value, shownTimeZone),
       minDateTime: pickerInstantOf(earliest, shownTimeZone) ?? void 0,
       maxDateTime: pickerInstantOf(maxDateTime, shownTimeZone) ?? void 0,
@@ -68,7 +70,7 @@ function DateTimeInputContent(props) {
         onBlur?.();
       },
       slotProps: textFieldSlotPropsOf(
-        { id: field.inputId, name, onBlur, error: Boolean(field.errorText), helperText: field.errorText ?? helperLine },
+        { id: field.inputId, name, onBlur, required, error: Boolean(field.errorText), helperText: field.errorText ?? helperLine },
         pickerProps
       )
     }

package/dist/datePickers/DateTimeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.js","sources":["../../src/datePickers/DateTimeInput.jsx"],"sourcesContent":["// Campo de FECHA CON HORA suelto con el DateTimePicker de MUI X (@stackcraftmx/calcita/date-pickers), para un instante:\n// una cita, un envío programado, «posponer hasta».\n//\n// Viaja como instante en UTC ('2026-11-01T18:30:00Z') y se pinta en la zona del proveedor (ToolkitProvider timeZone),\n// rotulada abajo con su nombre («Hora estándar central»): quien lo ve sabe en qué hora está escribiendo aunque su equipo\n// esté en otra zona. Lee también lo que llega del servidor con desfase ('…-06:00'). '' = vacío. La hora sale de 24 horas o\n// con a.m. y p.m. según el hourCycle del proveedor.\n//\n// Los minutos van de uno en uno (minutesStep los cambia). Para «al menos N minutos después de ahora» (publicar con\n// anticipación) está minimumMinutesFromNow: el mínimo se recorre solo con el reloj mientras la pantalla está abierta. Para\n// «el fin, al menos N minutos después del inicio», minDateTime={instantPlusMinutes(startsAt, N)}. Con formik, las mismas\n// reglas en yup: minutesFromNowRule y minutesAfterRule (el servidor vuelve a revisar).\n//\n// Para una hora del día sin fecha («abre a las 09:00») va TimeInput; para una fecha sin hora, DateInput.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDateTimeInput con defaultProps, styleOverrides de\n// sus partes (picker) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {DateTimePicker} from '@mui/x-date-pickers/DateTimePicker';\n\nimport PickerFrame, {textFieldSlotPropsOf} from '@/datePickers/PickerFrame.jsx';\nimport {\n    DEFAULT_MINUTES_STEP, earliestInstantFromNow, instantTextOf, latestInstantOf, pickerInstantOf, timeZoneNameOf,\n} from '@/datePickers/pickerValues.js';\nimport {useCurrentMinute} from '@/datePickers/useCurrentMinute.js';\nimport {usePickerField} from '@/datePickers/usePickerField.js';\nimport {intlLocaleOf} from '@/toolkit/toolkitSettings.js';\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaDateTimeInput)\nconst THEME_NAME = 'CalcitaDateTimeInput';\nconst DateTimeInputPicker = piecePart(THEME_NAME, 'Picker', DateTimePicker);\n\n// entre la ayuda de la pantalla y el nombre de la zona\nconst HELPER_SEPARATOR = ' · ';\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|null|undefined} props.value el instante ('2026-11-01T18:30:00Z' o con desfase) o ''\n * @param {(value: string) => void} props.onChange recibe el instante en UTC ('' al borrar o a medias)\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] ya traducida; va antes del nombre de la zona\n * @param {string} [props.minDateTime] instante (el fin de algo: instantPlusMinutes(startsAt, 30))\n * @param {number} [props.minimumMinutesFromNow] al menos tantos minutos después de ahora; se recorre con el reloj\n * @param {string} [props.maxDateTime] instante\n * @param {boolean} [props.disableFuture]\n * @param {boolean} [props.disablePast] p. ej. un envío programado\n * @param {number} [props.minutesStep] de cuánto en cuánto van los minutos; por omisión de uno en uno (15 para citas de\n *     cuarto de hora)\n * @param {string} [props.timeZone] otra zona que la del proveedor (la de una sucursal); rotulada igual\n * @param {boolean} [props.showTimeZone] false quita el nombre de la zona de abajo (por omisión se ve)\n * @param {string} [props.timeZoneLabel] ya traducido, en lugar del nombre que da el navegador\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {object} [props.pickerProps] lo demás del DateTimePicker de MUI X que aquí no tiene nombre (views, shouldDisableDate,\n *     slots, slotProps…); value y onChange son del campo\n * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación\n *     ({required: 'Elija la fecha', min: 'Desde mañana'}): gana al de Calcita y al de los textos\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction DateTimeInputContent(props) {\n    const {\n        name, label, value, onChange, onBlur, error, helperText, minDateTime, minimumMinutesFromNow, maxDateTime, disableFuture = false,\n        disablePast = false, minutesStep = DEFAULT_MINUTES_STEP, timeZone, showTimeZone = true, timeZoneLabel, disabled = false, inputRef, pickerProps, messages, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const field = usePickerField({name, kind: 'dateTime', error, label, messages, texts});\n    const {languages} = useToolkitSettings();\n    const shownTimeZone = timeZone ?? field.timeZone;\n    const zoneText = showTimeZone ? (timeZoneLabel ?? timeZoneNameOf(shownTimeZone, intlLocaleOf(field.language, languages))) : null;\n    const helperLine = [helperText, zoneText].filter(Boolean).join(HELPER_SEPARATOR) || ' ';\n    // el mínimo que de verdad aplica: el que da la pantalla o el de «ahora + N minutos», el más tarde\n    const hasClockRule = minimumMinutesFromNow != null;\n    const currentMinute = useCurrentMinute(hasClockRule);\n    const earliest = latestInstantOf(minDateTime, hasClockRule ? earliestInstantFromNow(minimumMinutesFromNow, currentMinute) : '');\n\n    return (\n        <PickerFrame inputId={field.inputId} label={label} language={field.language}>\n            <DateTimeInputPicker\n                {...pickerProps}\n                timezone={shownTimeZone}\n                format={field.formats.dateTime}\n                ampm={field.formats.ampm}\n                value={pickerInstantOf(value, shownTimeZone)}\n                minDateTime={pickerInstantOf(earliest, shownTimeZone) ?? undefined}\n                maxDateTime={pickerInstantOf(maxDateTime, shownTimeZone) ?? undefined}\n                disableFuture={disableFuture}\n                disablePast={disablePast}\n                disabled={disabled}\n                minutesStep={minutesStep}\n                timeSteps={{minutes: minutesStep, ...pickerProps?.timeSteps}}\n                inputRef={inputRef}\n                onChange={(pickedValue) => onChange(instantTextOf(pickedValue))}\n                onClose={() => {\n                    pickerProps?.onClose?.();\n                    onBlur?.();\n                }}\n                slotProps={textFieldSlotPropsOf(\n                    {id: field.inputId, name, onBlur, error: Boolean(field.errorText), helperText: field.errorText ?? helperLine},\n                    pickerProps,\n                )}\n            />\n        </PickerFrame>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst DateTimeInput = withPieceSlots(DateTimeInputContent, THEME_NAME);\nexport default DateTimeInput;\n"],"names":[],"mappings":";;;;;;;;;;;AAiCA,MAAM,aAAa;AACnB,MAAM,sBAAsB,UAAU,YAAY,UAAU,cAAc;AAG1E,MAAM,mBAAmB;AA6BzB,SAAS,qBAAqB,OAAO;AACjC,QAAM;AAAA,IACF;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAO;AAAA,IAAY;AAAA,IAAa;AAAA,IAAuB;AAAA,IAAa,gBAAgB;AAAA,IAC1H,cAAc;AAAA,IAAO,cAAc;AAAA,IAAsB;AAAA,IAAU,eAAe;AAAA,IAAM;AAAA,IAAe,WAAW;AAAA,IAAO;AAAA,IAAU;AAAA,IAAa;AAAA,IAAU;AAAA,IAC1J,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AACnC,mBAAiB,YAAY,YAAY;AACzC,QAAM,QAAQ,eAAe,EAAC,MAAM,MAAM,YAAY,OAAO,OAAO,UAAU,OAAM;AACpF,QAAM,EAAC,UAAA,IAAa,mBAAA;AACpB,QAAM,gBAAgB,YAAY,MAAM;AACxC,QAAM,WAAW,eAAgB,iBAAiB,eAAe,eAAe,aAAa,MAAM,UAAU,SAAS,CAAC,IAAK;AAC5H,QAAM,aAAa,CAAC,YAAY,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,gBAAgB,KAAK;AAEpF,QAAM,eAAe,yBAAyB;AAC9C,QAAM,gBAAgB,iBAAiB,YAAY;AACnD,QAAM,WAAW,gBAAgB,aAAa,eAAe,uBAAuB,uBAAuB,aAAa,IAAI,EAAE;AAE9H,SACI,oBAAC,eAAY,SAAS,MAAM,SAAS,OAAc,UAAU,MAAM,UAC/D,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,QAAQ,MAAM,QAAQ;AAAA,MACtB,MAAM,MAAM,QAAQ;AAAA,MACpB,OAAO,gBAAgB,OAAO,aAAa;AAAA,MAC3C,aAAa,gBAAgB,UAAU,aAAa,KAAK;AAAA,MACzD,aAAa,gBAAgB,aAAa,aAAa,KAAK;AAAA,MAC5D;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,EAAC,SAAS,aAAa,GAAG,aAAa,UAAA;AAAA,MAClD;AAAA,MACA,UAAU,CAAC,gBAAgB,SAAS,cAAc,WAAW,CAAC;AAAA,MAC9D,SAAS,MAAM;AACX,qBAAa,UAAA;AACb,iBAAA;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACP,EAAC,IAAI,MAAM,SAAS,MAAM,QAAQ,OAAO,QAAQ,MAAM,SAAS,GAAG,YAAY,MAAM,aAAa,WAAA;AAAA,QAClG;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA,GAER;AAER;AAGA,MAAM,gBAAgB,eAAe,sBAAsB,UAAU;"}
+{"version":3,"file":"DateTimeInput.js","sources":["../../src/datePickers/DateTimeInput.jsx"],"sourcesContent":["// Campo de FECHA CON HORA suelto con el DateTimePicker de MUI X (@stackcraftmx/calcita/date-pickers), para un instante:\n// una cita, un envío programado, «posponer hasta».\n//\n// Viaja como instante en UTC ('2026-11-01T18:30:00Z') y se pinta en la zona del proveedor (ToolkitProvider timeZone),\n// rotulada abajo con su nombre («Hora estándar central»): quien lo ve sabe en qué hora está escribiendo aunque su equipo\n// esté en otra zona. Lee también lo que llega del servidor con desfase ('…-06:00'). '' = vacío. La hora sale de 24 horas o\n// con a.m. y p.m. según el hourCycle del proveedor.\n//\n// Los minutos van de uno en uno (minutesStep los cambia). Para «al menos N minutos después de ahora» (publicar con\n// anticipación) está minimumMinutesFromNow: el mínimo se recorre solo con el reloj mientras la pantalla está abierta. Para\n// «el fin, al menos N minutos después del inicio», minDateTime={instantPlusMinutes(startsAt, N)}. Con formik, las mismas\n// reglas en yup: minutesFromNowRule y minutesAfterRule (el servidor vuelve a revisar).\n//\n// Para una hora del día sin fecha («abre a las 09:00») va TimeInput; para una fecha sin hora, DateInput.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDateTimeInput con defaultProps, styleOverrides de\n// sus partes (picker) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {DateTimePicker} from '@mui/x-date-pickers/DateTimePicker';\n\nimport PickerFrame, {textFieldSlotPropsOf} from '@/datePickers/PickerFrame.jsx';\nimport {\n    DEFAULT_MINUTES_STEP, earliestInstantFromNow, instantTextOf, latestInstantOf, pickerInstantOf, timeZoneNameOf,\n} from '@/datePickers/pickerValues.js';\nimport {useCurrentMinute} from '@/datePickers/useCurrentMinute.js';\nimport {usePickerField} from '@/datePickers/usePickerField.js';\nimport {intlLocaleOf} from '@/toolkit/toolkitSettings.js';\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaDateTimeInput)\nconst THEME_NAME = 'CalcitaDateTimeInput';\nconst DateTimeInputPicker = piecePart(THEME_NAME, 'Picker', DateTimePicker);\n\n// entre la ayuda de la pantalla y el nombre de la zona\nconst HELPER_SEPARATOR = ' · ';\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|null|undefined} props.value el instante ('2026-11-01T18:30:00Z' o con desfase) o ''\n * @param {(value: string) => void} props.onChange recibe el instante en UTC ('' al borrar o a medias)\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] ya traducida; va antes del nombre de la zona\n * @param {string} [props.minDateTime] instante (el fin de algo: instantPlusMinutes(startsAt, 30))\n * @param {number} [props.minimumMinutesFromNow] al menos tantos minutos después de ahora; se recorre con el reloj\n * @param {string} [props.maxDateTime] instante\n * @param {boolean} [props.disableFuture]\n * @param {boolean} [props.disablePast] p. ej. un envío programado\n * @param {number} [props.minutesStep] de cuánto en cuánto van los minutos; por omisión de uno en uno (15 para citas de\n *     cuarto de hora)\n * @param {string} [props.timeZone] otra zona que la del proveedor (la de una sucursal); rotulada igual\n * @param {boolean} [props.showTimeZone] false quita el nombre de la zona de abajo (por omisión se ve)\n * @param {string} [props.timeZoneLabel] ya traducido, en lugar del nombre que da el navegador\n * @param {boolean} [props.disabled]\n * @param {string} [props.format] cómo se ven la fecha y la hora, con los códigos de dayjs ('DD/MMM/YYYY HH:mm'); por omisión\n *     DD/MM/YYYY HH:mm en español y el reloj de ToolkitProvider hourCycle\n * @param {boolean} [props.required] obligatorio: el asterisco en la etiqueta y, como en MUI, required en el campo\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {object} [props.pickerProps] lo demás del DateTimePicker de MUI X que aquí no tiene nombre (views, shouldDisableDate,\n *     slots, slotProps…); value y onChange son del campo\n * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación\n *     ({required: 'Elija la fecha', min: 'Desde mañana'}): gana al de Calcita y al de los textos\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction DateTimeInputContent(props) {\n    const {\n        name, label, value, onChange, onBlur, error, helperText, minDateTime, minimumMinutesFromNow, maxDateTime, disableFuture = false,\n        disablePast = false, minutesStep = DEFAULT_MINUTES_STEP, timeZone, showTimeZone = true, timeZoneLabel, disabled = false, required = false, format, inputRef, pickerProps, messages, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const field = usePickerField({name, kind: 'dateTime', error, label, messages, texts});\n    const {languages} = useToolkitSettings();\n    const shownTimeZone = timeZone ?? field.timeZone;\n    const zoneText = showTimeZone ? (timeZoneLabel ?? timeZoneNameOf(shownTimeZone, intlLocaleOf(field.language, languages))) : null;\n    const helperLine = [helperText, zoneText].filter(Boolean).join(HELPER_SEPARATOR) || ' ';\n    // el mínimo que de verdad aplica: el que da la pantalla o el de «ahora + N minutos», el más tarde\n    const hasClockRule = minimumMinutesFromNow != null;\n    const currentMinute = useCurrentMinute(hasClockRule);\n    const earliest = latestInstantOf(minDateTime, hasClockRule ? earliestInstantFromNow(minimumMinutesFromNow, currentMinute) : '');\n\n    return (\n        <PickerFrame inputId={field.inputId} label={label} required={required} language={field.language}>\n            <DateTimeInputPicker\n                {...pickerProps}\n                timezone={shownTimeZone}\n                // el formato y el reloj de la pantalla ganan a los de la casa (antes iban después y los pisaban sin avisar)\n                format={format ?? pickerProps?.format ?? field.formats.dateTime}\n                ampm={pickerProps?.ampm ?? field.formats.ampm}\n                value={pickerInstantOf(value, shownTimeZone)}\n                minDateTime={pickerInstantOf(earliest, shownTimeZone) ?? undefined}\n                maxDateTime={pickerInstantOf(maxDateTime, shownTimeZone) ?? undefined}\n                disableFuture={disableFuture}\n                disablePast={disablePast}\n                disabled={disabled}\n                minutesStep={minutesStep}\n                timeSteps={{minutes: minutesStep, ...pickerProps?.timeSteps}}\n                inputRef={inputRef}\n                onChange={(pickedValue) => onChange(instantTextOf(pickedValue))}\n                onClose={() => {\n                    pickerProps?.onClose?.();\n                    onBlur?.();\n                }}\n                slotProps={textFieldSlotPropsOf(\n                    {id: field.inputId, name, onBlur, required, error: Boolean(field.errorText), helperText: field.errorText ?? helperLine},\n                    pickerProps,\n                )}\n            />\n        </PickerFrame>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst DateTimeInput = withPieceSlots(DateTimeInputContent, THEME_NAME);\nexport default DateTimeInput;\n"],"names":[],"mappings":";;;;;;;;;;;AAiCA,MAAM,aAAa;AACnB,MAAM,sBAAsB,UAAU,YAAY,UAAU,cAAc;AAG1E,MAAM,mBAAmB;AAgCzB,SAAS,qBAAqB,OAAO;AACjC,QAAM;AAAA,IACF;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAO;AAAA,IAAY;AAAA,IAAa;AAAA,IAAuB;AAAA,IAAa,gBAAgB;AAAA,IAC1H,cAAc;AAAA,IAAO,cAAc;AAAA,IAAsB;AAAA,IAAU,eAAe;AAAA,IAAM;AAAA,IAAe,WAAW;AAAA,IAAO,WAAW;AAAA,IAAO;AAAA,IAAQ;AAAA,IAAU;AAAA,IAAa;AAAA,IAAU;AAAA,IACpL,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AACnC,mBAAiB,YAAY,YAAY;AACzC,QAAM,QAAQ,eAAe,EAAC,MAAM,MAAM,YAAY,OAAO,OAAO,UAAU,OAAM;AACpF,QAAM,EAAC,UAAA,IAAa,mBAAA;AACpB,QAAM,gBAAgB,YAAY,MAAM;AACxC,QAAM,WAAW,eAAgB,iBAAiB,eAAe,eAAe,aAAa,MAAM,UAAU,SAAS,CAAC,IAAK;AAC5H,QAAM,aAAa,CAAC,YAAY,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,gBAAgB,KAAK;AAEpF,QAAM,eAAe,yBAAyB;AAC9C,QAAM,gBAAgB,iBAAiB,YAAY;AACnD,QAAM,WAAW,gBAAgB,aAAa,eAAe,uBAAuB,uBAAuB,aAAa,IAAI,EAAE;AAE9H,SACI,oBAAC,eAAY,SAAS,MAAM,SAAS,OAAc,UAAoB,UAAU,MAAM,UACnF,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,UAAU;AAAA,MAEV,QAAQ,UAAU,aAAa,UAAU,MAAM,QAAQ;AAAA,MACvD,MAAM,aAAa,QAAQ,MAAM,QAAQ;AAAA,MACzC,OAAO,gBAAgB,OAAO,aAAa;AAAA,MAC3C,aAAa,gBAAgB,UAAU,aAAa,KAAK;AAAA,MACzD,aAAa,gBAAgB,aAAa,aAAa,KAAK;AAAA,MAC5D;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,EAAC,SAAS,aAAa,GAAG,aAAa,UAAA;AAAA,MAClD;AAAA,MACA,UAAU,CAAC,gBAAgB,SAAS,cAAc,WAAW,CAAC;AAAA,MAC9D,SAAS,MAAM;AACX,qBAAa,UAAA;AACb,iBAAA;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACP,EAAC,IAAI,MAAM,SAAS,MAAM,QAAQ,UAAU,OAAO,QAAQ,MAAM,SAAS,GAAG,YAAY,MAAM,aAAa,WAAA;AAAA,QAC5G;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA,GAER;AAER;AAGA,MAAM,gBAAgB,eAAe,sBAAsB,UAAU;"}

package/dist/datePickers/FormDateField.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import DateInput from "./DateInput.js";
 import { useFormikField } from "../forms/useFormikField.js";
 function FormDateField({ name, ...dateInputProps }) {
-  const fieldProps = useFormikField(name);
+  const fieldProps = useFormikField(name, dateInputProps);
   return /* @__PURE__ */ jsx(DateInput, { ...dateInputProps, ...fieldProps });
 }
 export {

package/dist/datePickers/FormDateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormDateField.js","sources":["../../src/datePickers/FormDateField.jsx"],"sourcesContent":["// Campo de fecha de formik: DateInput conectado a su campo. Al formulario llega 'AAAA-MM-DD'.\n//\n// Con react-hook-form no hay uno listo (esta puerta no pide react-hook-form): DateInput va dentro de un Controller.\n//\n// Genérico del paquete: function (regla de la casa).\nimport DateInput from '@/datePickers/DateInput.jsx';\nimport {useFormikField} from '@/forms/useFormikField.js';\n\n/**\n * @param {{name: string} & Omit<Parameters<typeof import('@/datePickers/DateInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las de\n *     DateInput (minDate, maxDate, disableFuture, openTo…), sin value / onChange / onBlur / error\n */\nexport default function FormDateField({name, ...dateInputProps}) {\n    const fieldProps = useFormikField(name);\n    return <DateInput {...dateInputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAYA,SAAwB,cAAc,EAAC,MAAM,GAAG,kBAAiB;AAC7D,QAAM,aAAa,eAAe,IAAI;AACtC,SAAO,oBAAC,WAAA,EAAW,GAAG,gBAAiB,GAAG,WAAA,CAAY;AAC1D;"}
+{"version":3,"file":"FormDateField.js","sources":["../../src/datePickers/FormDateField.jsx"],"sourcesContent":["// Campo de fecha de formik: DateInput conectado a su campo. Al formulario llega 'AAAA-MM-DD'.\n//\n// Con react-hook-form no hay uno listo (esta puerta no pide react-hook-form): DateInput va dentro de un Controller.\n//\n// Genérico del paquete: function (regla de la casa).\nimport DateInput from '@/datePickers/DateInput.jsx';\nimport {useFormikField} from '@/forms/useFormikField.js';\n\n/**\n * @param {{name: string} & Omit<Parameters<typeof import('@/datePickers/DateInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('@/datePickers/DateInput.jsx').default>[0], 'onChange'|'onBlur'>>} props las de\n *     DateInput (minDate, maxDate, disableFuture, openTo…), sin value ni error (su onChange y su onBlur corren después de los del formulario)\n */\nexport default function FormDateField({name, ...dateInputProps}) {\n    const fieldProps = useFormikField(name, dateInputProps);\n    return <DateInput {...dateInputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAYA,SAAwB,cAAc,EAAC,MAAM,GAAG,kBAAiB;AAC7D,QAAM,aAAa,eAAe,MAAM,cAAc;AACtD,SAAO,oBAAC,WAAA,EAAW,GAAG,gBAAiB,GAAG,WAAA,CAAY;AAC1D;"}

package/dist/datePickers/FormDateTimeField.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import DateTimeInput from "./DateTimeInput.js";
 import { useFormikField } from "../forms/useFormikField.js";
 function FormDateTimeField({ name, ...inputProps }) {
-  const fieldProps = useFormikField(name);
+  const fieldProps = useFormikField(name, inputProps);
   return /* @__PURE__ */ jsx(DateTimeInput, { ...inputProps, ...fieldProps });
 }
 export {

package/dist/datePickers/FormDateTimeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormDateTimeField.js","sources":["../../src/datePickers/FormDateTimeField.jsx"],"sourcesContent":["// Campo de fecha con hora de formik: DateTimeInput conectado a su campo. Al formulario llega el instante en\n// UTC ('2026-11-01T18:30:00Z').\n//\n// Con react-hook-form no hay uno listo (esta puerta no pide react-hook-form): DateTimeInput va dentro de un Controller.\n//\n// Genérico del paquete: function (regla de la casa).\nimport DateTimeInput from '@/datePickers/DateTimeInput.jsx';\nimport {useFormikField} from '@/forms/useFormikField.js';\n\n/**\n * @param {{name: string} & Omit<Parameters<typeof import('@/datePickers/DateTimeInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las de\n *     DateTimeInput (minDateTime, minimumMinutesFromNow, disablePast, minutesStep, timeZone…), sin value / onChange / onBlur / error\n */\nexport default function FormDateTimeField({name, ...inputProps}) {\n    const fieldProps = useFormikField(name);\n    return <DateTimeInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAaA,SAAwB,kBAAkB,EAAC,MAAM,GAAG,cAAa;AAC7D,QAAM,aAAa,eAAe,IAAI;AACtC,SAAO,oBAAC,eAAA,EAAe,GAAG,YAAa,GAAG,WAAA,CAAY;AAC1D;"}
+{"version":3,"file":"FormDateTimeField.js","sources":["../../src/datePickers/FormDateTimeField.jsx"],"sourcesContent":["// Campo de fecha con hora de formik: DateTimeInput conectado a su campo. Al formulario llega el instante en\n// UTC ('2026-11-01T18:30:00Z').\n//\n// Con react-hook-form no hay uno listo (esta puerta no pide react-hook-form): DateTimeInput va dentro de un Controller.\n//\n// Genérico del paquete: function (regla de la casa).\nimport DateTimeInput from '@/datePickers/DateTimeInput.jsx';\nimport {useFormikField} from '@/forms/useFormikField.js';\n\n/**\n * @param {{name: string} & Omit<Parameters<typeof import('@/datePickers/DateTimeInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('@/datePickers/DateTimeInput.jsx').default>[0], 'onChange'|'onBlur'>>} props las de\n *     DateTimeInput (minDateTime, minimumMinutesFromNow, disablePast, minutesStep, timeZone…), sin value ni error (su onChange y su onBlur corren después de los del formulario)\n */\nexport default function FormDateTimeField({name, ...inputProps}) {\n    const fieldProps = useFormikField(name, inputProps);\n    return <DateTimeInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAaA,SAAwB,kBAAkB,EAAC,MAAM,GAAG,cAAa;AAC7D,QAAM,aAAa,eAAe,MAAM,UAAU;AAClD,SAAO,oBAAC,eAAA,EAAe,GAAG,YAAa,GAAG,WAAA,CAAY;AAC1D;"}

package/dist/datePickers/FormMonthField.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import MonthInput from "./MonthInput.js";
 import { useFormikField } from "../forms/useFormikField.js";
 function FormMonthField({ name, ...inputProps }) {
-  const fieldProps = useFormikField(name);
+  const fieldProps = useFormikField(name, inputProps);
   return /* @__PURE__ */ jsx(MonthInput, { ...inputProps, ...fieldProps });
 }
 export {

package/dist/datePickers/FormMonthField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormMonthField.js","sources":["../../src/datePickers/FormMonthField.jsx"],"sourcesContent":["// Campo de mes de formik: MonthInput conectado a su campo. Al formulario llega 'AAAA-MM'.\n//\n// Con react-hook-form no hay uno listo (esta puerta no pide react-hook-form): MonthInput va dentro de un Controller.\n//\n// Genérico del paquete: function (regla de la casa).\nimport MonthInput from '@/datePickers/MonthInput.jsx';\nimport {useFormikField} from '@/forms/useFormikField.js';\n\n/**\n * @param {{name: string} & Omit<Parameters<typeof import('@/datePickers/MonthInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las de\n *     MonthInput (minMonth, maxMonth, disableFuture…), sin value / onChange / onBlur / error\n */\nexport default function FormMonthField({name, ...inputProps}) {\n    const fieldProps = useFormikField(name);\n    return <MonthInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAYA,SAAwB,eAAe,EAAC,MAAM,GAAG,cAAa;AAC1D,QAAM,aAAa,eAAe,IAAI;AACtC,SAAO,oBAAC,YAAA,EAAY,GAAG,YAAa,GAAG,WAAA,CAAY;AACvD;"}
+{"version":3,"file":"FormMonthField.js","sources":["../../src/datePickers/FormMonthField.jsx"],"sourcesContent":["// Campo de mes de formik: MonthInput conectado a su campo. Al formulario llega 'AAAA-MM'.\n//\n// Con react-hook-form no hay uno listo (esta puerta no pide react-hook-form): MonthInput va dentro de un Controller.\n//\n// Genérico del paquete: function (regla de la casa).\nimport MonthInput from '@/datePickers/MonthInput.jsx';\nimport {useFormikField} from '@/forms/useFormikField.js';\n\n/**\n * @param {{name: string} & Omit<Parameters<typeof import('@/datePickers/MonthInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('@/datePickers/MonthInput.jsx').default>[0], 'onChange'|'onBlur'>>} props las de\n *     MonthInput (minMonth, maxMonth, disableFuture…), sin value ni error (su onChange y su onBlur corren después de los del formulario)\n */\nexport default function FormMonthField({name, ...inputProps}) {\n    const fieldProps = useFormikField(name, inputProps);\n    return <MonthInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAYA,SAAwB,eAAe,EAAC,MAAM,GAAG,cAAa;AAC1D,QAAM,aAAa,eAAe,MAAM,UAAU;AAClD,SAAO,oBAAC,YAAA,EAAY,GAAG,YAAa,GAAG,WAAA,CAAY;AACvD;"}

package/dist/datePickers/FormTimeField.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import TimeInput from "./TimeInput.js";
 import { useFormikField } from "../forms/useFormikField.js";
 function FormTimeField({ name, ...inputProps }) {
-  const fieldProps = useFormikField(name);
+  const fieldProps = useFormikField(name, inputProps);
   return /* @__PURE__ */ jsx(TimeInput, { ...inputProps, ...fieldProps });
 }
 export {

package/dist/datePickers/FormTimeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormTimeField.js","sources":["../../src/datePickers/FormTimeField.jsx"],"sourcesContent":["// Campo de hora de formik: TimeInput conectado a su campo. Al formulario llega 'HH:mm'.\n//\n// Con react-hook-form no hay uno listo (esta puerta no pide react-hook-form): TimeInput va dentro de un Controller.\n//\n// Genérico del paquete: function (regla de la casa).\nimport TimeInput from '@/datePickers/TimeInput.jsx';\nimport {useFormikField} from '@/forms/useFormikField.js';\n\n/**\n * @param {{name: string} & Omit<Parameters<typeof import('@/datePickers/TimeInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las de\n *     TimeInput (minTime, maxTime, minutesStep…), sin value / onChange / onBlur / error\n */\nexport default function FormTimeField({name, ...inputProps}) {\n    const fieldProps = useFormikField(name);\n    return <TimeInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAYA,SAAwB,cAAc,EAAC,MAAM,GAAG,cAAa;AACzD,QAAM,aAAa,eAAe,IAAI;AACtC,SAAO,oBAAC,WAAA,EAAW,GAAG,YAAa,GAAG,WAAA,CAAY;AACtD;"}
+{"version":3,"file":"FormTimeField.js","sources":["../../src/datePickers/FormTimeField.jsx"],"sourcesContent":["// Campo de hora de formik: TimeInput conectado a su campo. Al formulario llega 'HH:mm'.\n//\n// Con react-hook-form no hay uno listo (esta puerta no pide react-hook-form): TimeInput va dentro de un Controller.\n//\n// Genérico del paquete: function (regla de la casa).\nimport TimeInput from '@/datePickers/TimeInput.jsx';\nimport {useFormikField} from '@/forms/useFormikField.js';\n\n/**\n * @param {{name: string} & Omit<Parameters<typeof import('@/datePickers/TimeInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('@/datePickers/TimeInput.jsx').default>[0], 'onChange'|'onBlur'>>} props las de\n *     TimeInput (minTime, maxTime, minutesStep…), sin value ni error (su onChange y su onBlur corren después de los del formulario)\n */\nexport default function FormTimeField({name, ...inputProps}) {\n    const fieldProps = useFormikField(name, inputProps);\n    return <TimeInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAYA,SAAwB,cAAc,EAAC,MAAM,GAAG,cAAa;AACzD,QAAM,aAAa,eAAe,MAAM,UAAU;AAClD,SAAO,oBAAC,WAAA,EAAW,GAAG,YAAa,GAAG,WAAA,CAAY;AACtD;"}

package/dist/datePickers/MonthInput.js

@@ -23,6 +23,8 @@ function MonthInputContent(props) {
     disableFuture = false,
     disablePast = false,
     disabled = false,
+    required = false,
+    format,
     inputRef,
     pickerProps,
     messages,
@@ -31,13 +33,13 @@ function MonthInputContent(props) {
   } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const field = usePickerField({ name, kind: "month", error, label, messages, texts });
-  return /* @__PURE__ */ jsx(PickerFrame, { inputId: field.inputId, label, language: field.language, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PickerFrame, { inputId: field.inputId, label, required, language: field.language, children: /* @__PURE__ */ jsx(
     MonthInputPicker,
     {
       ...pickerProps,
       views: MONTH_VIEWS,
       openTo: "month",
-      format: field.formats.month,
+      format: format ?? pickerProps?.format ?? field.formats.month,
       value: pickerMonthOf(value),
       minDate: pickerMonthOf(minMonth) ?? void 0,
       maxDate: pickerMonthOf(maxMonth) ?? void 0,
@@ -51,7 +53,7 @@ function MonthInputContent(props) {
         onBlur?.();
       },
       slotProps: textFieldSlotPropsOf(
-        { id: field.inputId, name, onBlur, error: Boolean(field.errorText), helperText: field.errorText ?? helperText },
+        { id: field.inputId, name, onBlur, required, error: Boolean(field.errorText), helperText: field.errorText ?? helperText },
         pickerProps
       )
     }