@stackcraftmx/calcita 0.47.0 → 0.52.0

package/dist/inputs/CatalogInput.js

@@ -5,41 +5,47 @@ import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import Autocomplete from "@mui/material/Autocomplete";
 import Checkbox from "@mui/material/Checkbox";
 import TextField from "@mui/material/TextField";
-import { translateValidationMessage } from "../forms/validationMessages.js";
+import { useValidationText } from "../forms/useValidationText.js";
 import FieldFrame from "./FieldFrame.js";
 import { selectAllStateOf } from "./selectAllState.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaCatalogInput";
+const CatalogInputField = piecePart(THEME_NAME, "Field", Autocomplete);
 const MAX_VISIBLE_OPTIONS = 100;
 const SELECT_ALL_CODE = "__calcita_select_all__";
 function plainTextOf(text) {
   return String(text ?? "").normalize("NFD").replace(new RegExp("\\p{Diacritic}", "gu"), "").toLowerCase();
 }
-function CatalogInput({
-  name,
-  label,
-  value,
-  onChange,
-  onBlur,
-  options = [],
-  formatLabel,
-  error,
-  helperText = " ",
-  loading = false,
-  disabled = false,
-  inputRef,
-  placeholder,
-  multiple = false,
-  selectAll = false,
-  checkboxes = false,
-  limitTags,
-  texts,
-  ...unknownProps
-}) {
-  warnUnknownProps("CatalogInput", unknownProps);
+function CatalogInputContent(props) {
+  const {
+    name,
+    label,
+    value,
+    onChange,
+    onBlur,
+    options = [],
+    formatLabel,
+    error,
+    helperText = " ",
+    loading = false,
+    disabled = false,
+    inputRef,
+    placeholder,
+    multiple = false,
+    selectAll = false,
+    checkboxes = false,
+    limitTags,
+    messages,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("common", texts);
+  const validationTextOf = useValidationText({ name, label, messages });
   const generatedId = useId();
   const inputId = `${name ?? "catalog"}-${generatedId}`;
-  const errorText = translateValidationMessage(t, error);
+  const errorText = validationTextOf(error);
   const selectedOption = multiple ? (Array.isArray(value) ? value : []).map((code) => options.find((option) => option.code === code)).filter(Boolean) : options.find((option) => option.code === value) ?? null;
   const optionLabelOf = (option) => formatLabel ? formatLabel(option) : `${option.label} (${option.code})`;
   const [searchText, setSearchText] = useState("");
@@ -58,7 +64,7 @@ function CatalogInput({
   })();
   const showsSelectAll = multiple && selectAll;
   return /* @__PURE__ */ jsx(FieldFrame, { inputId, label, children: /* @__PURE__ */ jsx(
-    Autocomplete,
+    CatalogInputField,
     {
       id: inputId,
       multiple,
@@ -130,6 +136,7 @@ function CatalogInput({
     }
   ) });
 }
+const CatalogInput = withPieceSlots(CatalogInputContent, THEME_NAME);
 export {
   CatalogInput as default
 };

package/dist/inputs/CatalogInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CatalogInput.js","sources":["../../src/inputs/CatalogInput.jsx"],"sourcesContent":["// Campo suelto que elige una clave de un catálogo ([{code, label}]): actividad económica, giro, país, banco… Se busca por la\n// clave o por el texto, sin acentos ni mayúsculas, y al formulario llega solo la clave. Con `multiple` elige varias: cada una\n// queda como chip con su ×, la lista no se cierra al elegir y al formulario llega la lista de claves en el orden elegido.\n// Con varias, además (cada una se pide):\n//   selectAll    «Elegir todos» arriba de la lista, con su casilla a medias si hay algunos; con algo escrito en el buscador,\n//                «Elegir los N que coinciden» (todos los que coinciden, no solo los que se ven)\n//   checkboxes   una casilla en cada opción (se ve de un vistazo qué está elegido)\n//   limitTags    cuántos chips se ven con el campo sin foco; los demás, «+3 más»\n//\n// Por qué no un <select>: con catálogos de cientos de opciones no se puede usar; y con texto libre la gente inventa claves.\n// Se enseñan a lo más MAX_VISIBLE_OPTIONS coincidencias: con miles, la lista completa congela la pantalla.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport Checkbox from '@mui/material/Checkbox';\nimport TextField from '@mui/material/TextField';\n\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {selectAllStateOf} from '@/inputs/selectAllState.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\nconst MAX_VISIBLE_OPTIONS = 100;\n// la opción de «Elegir todos»: no es del catálogo y nunca llega al formulario\nconst SELECT_ALL_CODE = '__calcita_select_all__';\n\n/**\n * Un texto sin acentos ni mayúsculas, para que «credito» encuentre «Crédito».\n *\n * @param {unknown} text\n * @returns {string}\n */\nfunction plainTextOf(text) {\n    return String(text ?? '').normalize('NFD').replace(/\\p{Diacritic}/gu, '').toLowerCase();\n}\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|string[]|null|undefined} props.value la clave elegida ('' = ninguna); con multiple, la lista ([] = ninguna)\n * @param {(code: any) => void} props.onChange recibe la clave ('' al borrar); con multiple, la lista de claves\n * @param {() => void} [props.onBlur]\n * @param {Array<{code: string, label: string}>} props.options\n * @param {(option: {code: string, label: string}) => string} [props.formatLabel] por omisión «Nombre (clave)»\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText]\n * @param {boolean} [props.loading] el catálogo todavía no llega\n * @param {string} [props.placeholder] la pista con el campo vacío, ya traducida (p. ej. «Busque un estado»): sin ella, en un\n *     formulario agrupado el campo vacío solo enseña su botón y no se entiende qué es\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {boolean} [props.multiple] elegir varias claves\n * @param {boolean} [props.selectAll] con multiple: «Elegir todos» (o los que coinciden con lo buscado) arriba de la lista\n * @param {boolean} [props.checkboxes] con multiple: una casilla en cada opción\n * @param {number} [props.limitTags] con multiple: cuántos chips se ven sin foco; los demás como «+3 más»\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function CatalogInput({\n    name, label, value, onChange, onBlur, options = [], formatLabel, error, helperText = ' ', loading = false, disabled = false, inputRef, placeholder,\n    multiple = false, selectAll = false, checkboxes = false, limitTags, texts,\n    ...unknownProps\n}) {\n    warnUnknownProps('CatalogInput', unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const generatedId = useId();\n    const inputId = `${name ?? 'catalog'}-${generatedId}`;\n    const errorText = translateValidationMessage(t, error);\n    // con varias, en el orden en que se eligieron (el de la lista de claves)\n    const selectedOption = multiple\n        ? (Array.isArray(value) ? value : []).map((code) => options.find((option) => option.code === code)).filter(Boolean)\n        : options.find((option) => option.code === value) ?? null;\n    const optionLabelOf = (option) => (formatLabel ? formatLabel(option) : `${option.label} (${option.code})`);\n    // lo escrito en el buscador: «Elegir todos» abarca lo que coincide con eso\n    const [searchText, setSearchText] = useState('');\n    const matchesSearch = (option, text) => {\n        const wantedText = plainTextOf(text);\n        return !wantedText || plainTextOf(optionLabelOf(option)).includes(wantedText);\n    };\n    const selectedCodes = multiple && Array.isArray(value) ? value : [];\n    const matchingCodes = options.filter((option) => matchesSearch(option, searchText)).map((option) => option.code);\n    const selectAllState = selectAllStateOf(selectedCodes, matchingCodes);\n    const selectAllLabel = (() => {\n        if (searchText.trim()) {\n            return selectAllState.allChosen ? t('form.unselectMatching', {count: matchingCodes.length}) : t('form.selectMatching', {count: matchingCodes.length});\n        }\n        return selectAllState.allChosen ? t('form.unselectAll') : t('form.selectAll', {count: matchingCodes.length});\n    })();\n    const showsSelectAll = multiple && selectAll;\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <Autocomplete\n                id={inputId}\n                multiple={multiple}\n                disableCloseOnSelect={multiple}\n                fullWidth\n                size=\"small\"\n                options={options}\n                value={selectedOption}\n                loading={loading}\n                disabled={disabled}\n                noOptionsText={t('form.noOptions')}\n                loadingText={t('form.loadingOptions')}\n                getOptionLabel={(option) => (option.code === SELECT_ALL_CODE ? selectAllLabel : optionLabelOf(option))}\n                isOptionEqualToValue={(option, currentOption) => option.code === currentOption.code}\n                filterOptions={(allOptions, {inputValue}) => {\n                    const matchingOptions = allOptions.filter((option) => matchesSearch(option, inputValue)).slice(0, MAX_VISIBLE_OPTIONS);\n                    // «Elegir todos» va arriba solo si hay de dónde elegir\n                    return showsSelectAll && matchingOptions.length > 0 ? [{code: SELECT_ALL_CODE, label: selectAllLabel}, ...matchingOptions] : matchingOptions;\n                }}\n                // con «Elegir todos», lo buscado se queda al elegir (MUI lo borraba): así se eligen varios de la misma búsqueda.\n                // Al salir del campo sí se borra. Sin «Elegir todos», el campo se porta como siempre\n                inputValue={showsSelectAll ? searchText : undefined}\n                onInputChange={(event, text, reason) => {\n                    // MUI 7 avisa con qué borra el texto: al elegir o quitar una opción ('selectOption', 'removeOption', 'reset');\n                    // al salir del campo es 'blur' y ese sí se borra\n                    const isResetByChoosing = ['selectOption', 'removeOption', 'reset'].includes(reason) && event?.type !== 'blur';\n                    if (!(showsSelectAll && isResetByChoosing)) {\n                        setSearchText(text);\n                    }\n                }}\n                onChange={(event, option, reason, details) => {\n                    if (!multiple) {\n                        onChange(option?.code ?? '');\n                        return;\n                    }\n                    if (details?.option?.code === SELECT_ALL_CODE) {\n                        onChange(selectAllState.toggled());\n                        return;\n                    }\n                    onChange(option.filter((chosenOption) => chosenOption.code !== SELECT_ALL_CODE).map((chosenOption) => chosenOption.code));\n                }}\n                limitTags={multiple ? limitTags : undefined}\n                getLimitTagsText={(hiddenCount) => t('form.moreSelected', {count: hiddenCount})}\n                renderOption={multiple && (checkboxes || selectAll) ? (optionProps, option, {selected}) => {\n                    // OJO: key va aparte; dentro de las props React avisa en la consola\n                    const {key, ...liProps} = optionProps;\n                    const isSelectAll = option.code === SELECT_ALL_CODE;\n                    const showsBox = checkboxes || isSelectAll;\n                    return (\n                        <li key={key} {...liProps} {...(isSelectAll && {'aria-selected': selectAllState.allChosen})}\n                            style={isSelectAll ? {fontWeight: 600} : undefined}>\n                            {showsBox && (\n                                <Checkbox size=\"small\" tabIndex={-1} disableRipple sx={{p: 0, mr: 1}}\n                                          checked={isSelectAll ? selectAllState.allChosen : selected}\n                                          indeterminate={isSelectAll && selectAllState.someChosen} />\n                            )}\n                            {isSelectAll ? selectAllLabel : optionLabelOf(option)}\n                        </li>\n                    );\n                } : undefined}\n                onBlur={onBlur}\n                renderInput={(inputProps) => (\n                    <TextField {...inputProps} name={name} inputRef={inputRef} placeholder={placeholder} error={Boolean(errorText)} helperText={errorText ?? helperText} />\n                )}\n            />\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CatalogInput.js","sources":["../../src/inputs/CatalogInput.jsx"],"sourcesContent":["// Campo suelto que elige una clave de un catálogo ([{code, label}]): actividad económica, giro, país, banco… Se busca por la\n// clave o por el texto, sin acentos ni mayúsculas, y al formulario llega solo la clave. Con `multiple` elige varias: cada una\n// queda como chip con su ×, la lista no se cierra al elegir y al formulario llega la lista de claves en el orden elegido.\n// Con varias, además (cada una se pide):\n//   selectAll    «Elegir todos» arriba de la lista, con su casilla a medias si hay algunos; con algo escrito en el buscador,\n//                «Elegir los N que coinciden» (todos los que coinciden, no solo los que se ven)\n//   checkboxes   una casilla en cada opción (se ve de un vistazo qué está elegido)\n//   limitTags    cuántos chips se ven con el campo sin foco; los demás, «+3 más»\n//\n// Por qué no un <select>: con catálogos de cientos de opciones no se puede usar; y con texto libre la gente inventa claves.\n// Se enseñan a lo más MAX_VISIBLE_OPTIONS coincidencias: con miles, la lista completa congela la pantalla.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaCatalogInput con defaultProps, styleOverrides de\n// sus partes (field) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport Checkbox from '@mui/material/Checkbox';\nimport TextField from '@mui/material/TextField';\n\nimport {useValidationText} from '@/forms/useValidationText.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {selectAllStateOf} from '@/inputs/selectAllState.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.CalcitaCatalogInput)\nconst THEME_NAME = 'CalcitaCatalogInput';\nconst CatalogInputField = piecePart(THEME_NAME, 'Field', Autocomplete);\n\nconst MAX_VISIBLE_OPTIONS = 100;\n// la opción de «Elegir todos»: no es del catálogo y nunca llega al formulario\nconst SELECT_ALL_CODE = '__calcita_select_all__';\n\n/**\n * Un texto sin acentos ni mayúsculas, para que «credito» encuentre «Crédito».\n *\n * @param {unknown} text\n * @returns {string}\n */\nfunction plainTextOf(text) {\n    return String(text ?? '').normalize('NFD').replace(/\\p{Diacritic}/gu, '').toLowerCase();\n}\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|string[]|null|undefined} props.value la clave elegida ('' = ninguna); con multiple, la lista ([] = ninguna)\n * @param {(code: any) => void} props.onChange recibe la clave ('' al borrar); con multiple, la lista de claves\n * @param {() => void} [props.onBlur]\n * @param {Array<{code: string, label: string}>} props.options\n * @param {(option: {code: string, label: string}) => string} [props.formatLabel] por omisión «Nombre (clave)»\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText]\n * @param {boolean} [props.loading] el catálogo todavía no llega\n * @param {string} [props.placeholder] la pista con el campo vacío, ya traducida (p. ej. «Busque un estado»): sin ella, en un\n *     formulario agrupado el campo vacío solo enseña su botón y no se entiende qué es\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {boolean} [props.multiple] elegir varias claves\n * @param {boolean} [props.selectAll] con multiple: «Elegir todos» (o los que coinciden con lo buscado) arriba de la lista\n * @param {boolean} [props.checkboxes] con multiple: una casilla en cada opción\n * @param {number} [props.limitTags] con multiple: cuántos chips se ven sin foco; los demás como «+3 más»\n * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación\n *     ({required: 'Escriba el RFC', matches: 'El RFC lleva 12 o 13 caracteres'}): 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 CatalogInputContent(props) {\n    const {\n        name, label, value, onChange, onBlur, options = [], formatLabel, error, helperText = ' ', loading = false, disabled = false, inputRef, placeholder,\n        multiple = false, selectAll = false, checkboxes = false, limitTags, messages, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    // el texto del error: el de la pantalla (messages), el del proyecto para este campo o el de Calcita\n    const validationTextOf = useValidationText({name, label, messages});\n    const generatedId = useId();\n    const inputId = `${name ?? 'catalog'}-${generatedId}`;\n    const errorText = validationTextOf(error);\n    // con varias, en el orden en que se eligieron (el de la lista de claves)\n    const selectedOption = multiple\n        ? (Array.isArray(value) ? value : []).map((code) => options.find((option) => option.code === code)).filter(Boolean)\n        : options.find((option) => option.code === value) ?? null;\n    const optionLabelOf = (option) => (formatLabel ? formatLabel(option) : `${option.label} (${option.code})`);\n    // lo escrito en el buscador: «Elegir todos» abarca lo que coincide con eso\n    const [searchText, setSearchText] = useState('');\n    const matchesSearch = (option, text) => {\n        const wantedText = plainTextOf(text);\n        return !wantedText || plainTextOf(optionLabelOf(option)).includes(wantedText);\n    };\n    const selectedCodes = multiple && Array.isArray(value) ? value : [];\n    const matchingCodes = options.filter((option) => matchesSearch(option, searchText)).map((option) => option.code);\n    const selectAllState = selectAllStateOf(selectedCodes, matchingCodes);\n    const selectAllLabel = (() => {\n        if (searchText.trim()) {\n            return selectAllState.allChosen ? t('form.unselectMatching', {count: matchingCodes.length}) : t('form.selectMatching', {count: matchingCodes.length});\n        }\n        return selectAllState.allChosen ? t('form.unselectAll') : t('form.selectAll', {count: matchingCodes.length});\n    })();\n    const showsSelectAll = multiple && selectAll;\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <CatalogInputField\n                id={inputId}\n                multiple={multiple}\n                disableCloseOnSelect={multiple}\n                fullWidth\n                size=\"small\"\n                options={options}\n                value={selectedOption}\n                loading={loading}\n                disabled={disabled}\n                noOptionsText={t('form.noOptions')}\n                loadingText={t('form.loadingOptions')}\n                getOptionLabel={(option) => (option.code === SELECT_ALL_CODE ? selectAllLabel : optionLabelOf(option))}\n                isOptionEqualToValue={(option, currentOption) => option.code === currentOption.code}\n                filterOptions={(allOptions, {inputValue}) => {\n                    const matchingOptions = allOptions.filter((option) => matchesSearch(option, inputValue)).slice(0, MAX_VISIBLE_OPTIONS);\n                    // «Elegir todos» va arriba solo si hay de dónde elegir\n                    return showsSelectAll && matchingOptions.length > 0 ? [{code: SELECT_ALL_CODE, label: selectAllLabel}, ...matchingOptions] : matchingOptions;\n                }}\n                // con «Elegir todos», lo buscado se queda al elegir (MUI lo borraba): así se eligen varios de la misma búsqueda.\n                // Al salir del campo sí se borra. Sin «Elegir todos», el campo se porta como siempre\n                inputValue={showsSelectAll ? searchText : undefined}\n                onInputChange={(event, text, reason) => {\n                    // MUI 7 avisa con qué borra el texto: al elegir o quitar una opción ('selectOption', 'removeOption', 'reset');\n                    // al salir del campo es 'blur' y ese sí se borra\n                    const isResetByChoosing = ['selectOption', 'removeOption', 'reset'].includes(reason) && event?.type !== 'blur';\n                    if (!(showsSelectAll && isResetByChoosing)) {\n                        setSearchText(text);\n                    }\n                }}\n                onChange={(event, option, reason, details) => {\n                    if (!multiple) {\n                        onChange(option?.code ?? '');\n                        return;\n                    }\n                    if (details?.option?.code === SELECT_ALL_CODE) {\n                        onChange(selectAllState.toggled());\n                        return;\n                    }\n                    onChange(option.filter((chosenOption) => chosenOption.code !== SELECT_ALL_CODE).map((chosenOption) => chosenOption.code));\n                }}\n                limitTags={multiple ? limitTags : undefined}\n                getLimitTagsText={(hiddenCount) => t('form.moreSelected', {count: hiddenCount})}\n                renderOption={multiple && (checkboxes || selectAll) ? (optionProps, option, {selected}) => {\n                    // OJO: key va aparte; dentro de las props React avisa en la consola\n                    const {key, ...liProps} = optionProps;\n                    const isSelectAll = option.code === SELECT_ALL_CODE;\n                    const showsBox = checkboxes || isSelectAll;\n                    return (\n                        <li key={key} {...liProps} {...(isSelectAll && {'aria-selected': selectAllState.allChosen})}\n                            style={isSelectAll ? {fontWeight: 600} : undefined}>\n                            {showsBox && (\n                                <Checkbox size=\"small\" tabIndex={-1} disableRipple sx={{p: 0, mr: 1}}\n                                          checked={isSelectAll ? selectAllState.allChosen : selected}\n                                          indeterminate={isSelectAll && selectAllState.someChosen} />\n                            )}\n                            {isSelectAll ? selectAllLabel : optionLabelOf(option)}\n                        </li>\n                    );\n                } : undefined}\n                onBlur={onBlur}\n                renderInput={(inputProps) => (\n                    <TextField {...inputProps} name={name} inputRef={inputRef} placeholder={placeholder} error={Boolean(errorText)} helperText={errorText ?? helperText} />\n                )}\n            />\n        </FieldFrame>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst CatalogInput = withPieceSlots(CatalogInputContent, THEME_NAME);\nexport default CatalogInput;\n"],"names":[],"mappings":"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"}

package/dist/inputs/CheckboxGroupInput.js

@@ -7,17 +7,17 @@ import FormGroup from "@mui/material/FormGroup";
 import FormHelperText from "@mui/material/FormHelperText";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import { translateValidationMessage } from "../forms/validationMessages.js";
+import { useValidationText } from "../forms/useValidationText.js";
 import FieldFrame from "./FieldFrame.js";
 import { selectAllStateOf } from "./selectAllState.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaCheckboxGroupInput";
 const CheckboxGroupRoot = piecePart(THEME_NAME, "Root", FormGroup);
 const CheckboxGroupSelectAll = piecePart(THEME_NAME, "SelectAll", FormControlLabel);
 const CheckboxGroupOption = piecePart(THEME_NAME, "Option", FormControlLabel);
-function CheckboxGroupInput(props) {
+function CheckboxGroupInputContent(props) {
   const {
     name,
     label,
@@ -31,15 +31,17 @@ function CheckboxGroupInput(props) {
     helperText = " ",
     disabled = false,
     sx,
+    messages,
     texts,
     ...unknownProps
   } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("common", texts);
+  const validationTextOf = useValidationText({ name, label, messages });
   const generatedId = useId();
   const groupId = `${name ?? "checkbox-group"}-${generatedId}`;
   const labelId = `${groupId}-label`;
-  const errorText = translateValidationMessage(t, error);
+  const errorText = validationTextOf(error);
   const checkedValues = Array.isArray(value) ? value : [];
   const selectAllState = selectAllStateOf(checkedValues, options.filter((option) => !option.disabled).map((option) => option.value));
   const inOptionsOrder = (values) => options.map((option) => option.value).filter((optionValue) => values.includes(optionValue));
@@ -49,7 +51,7 @@ function CheckboxGroupInput(props) {
   };
   const toggle = (optionValue) => change(checkedValues.includes(optionValue) ? checkedValues.filter((checkedValue) => checkedValue !== optionValue) : [...checkedValues, optionValue]);
   return /* @__PURE__ */ jsx(FieldFrame, { inputId: `${groupId}-first`, labelId, label, children: /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(CheckboxGroupRoot, { row, role: "group", "aria-labelledby": labelId, ownSx: { columnGap: 2, ...sx }, children: [
+    /* @__PURE__ */ jsxs(CheckboxGroupRoot, { row, role: "group", "aria-labelledby": labelId, ownSx: { columnGap: 2 }, sx, children: [
       selectAll && /* @__PURE__ */ jsx(
         CheckboxGroupSelectAll,
         {
@@ -94,6 +96,7 @@ function CheckboxGroupInput(props) {
     /* @__PURE__ */ jsx(FormHelperText, { error: Boolean(errorText), children: errorText ?? helperText })
   ] }) });
 }
+const CheckboxGroupInput = withPieceSlots(CheckboxGroupInputContent, THEME_NAME);
 export {
   CheckboxGroupInput as default
 };

package/dist/inputs/CheckboxGroupInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroupInput.js","sources":["../../src/inputs/CheckboxGroupInput.jsx"],"sourcesContent":["// El grupo de casillas: pocas opciones a la vista (los canales de aviso, los días que abre una sucursal), cada una con su\n// casilla y, si hace falta, una explicación abajo; al formulario llega la lista de las marcadas. Con pocas opciones es más\n// rápido que abrir una lista; con muchas, SelectInput o CatalogInput con `multiple`.\n//\n// selectAll pone «Elegir todos» arriba, con su casilla a medias si hay algunas marcadas. row las acomoda en renglón (en el\n// teléfono bajan solas). Dentro de una FormSection se vuelve renglón, como los demás campos.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaCheckboxGroupInput con defaultProps y\n// styleOverrides de sus partes: root, selectAll, option.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport Checkbox from '@mui/material/Checkbox';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport FormGroup from '@mui/material/FormGroup';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {selectAllStateOf} from '@/inputs/selectAllState.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaCheckboxGroupInput)\nconst THEME_NAME = 'CalcitaCheckboxGroupInput';\nconst CheckboxGroupRoot = piecePart(THEME_NAME, 'Root', FormGroup);\nconst CheckboxGroupSelectAll = piecePart(THEME_NAME, 'SelectAll', FormControlLabel);\nconst CheckboxGroupOption = piecePart(THEME_NAME, 'Option', FormControlLabel);\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {import('react').ReactNode} props.label ya traducida\n * @param {Array<string|number>|null|undefined} props.value las marcadas ([] = ninguna)\n * @param {(values: Array<string|number>) => void} props.onChange la lista nueva, en el orden de las opciones\n * @param {() => void} [props.onBlur]\n * @param {Array<{value: string|number, label: string, description?: string, disabled?: boolean}>} props.options\n * @param {boolean} [props.row] en renglón en lugar de una debajo de otra\n * @param {boolean} [props.selectAll] «Elegir todos» arriba\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] ya traducida\n * @param {boolean} [props.disabled]\n * @param {object} [props.sx]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function CheckboxGroupInput(props) {\n    const {\n        name, label, value, onChange, onBlur, options, row = false, selectAll = false, error, helperText = ' ', disabled = false, sx, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const generatedId = useId();\n    const groupId = `${name ?? 'checkbox-group'}-${generatedId}`;\n    const labelId = `${groupId}-label`;\n    const errorText = translateValidationMessage(t, error);\n    const checkedValues = Array.isArray(value) ? value : [];\n    const selectAllState = selectAllStateOf(checkedValues, options.filter((option) => !option.disabled).map((option) => option.value));\n    // la lista en el orden de las opciones, no en el que se fueron marcando (así viaja siempre igual)\n    const inOptionsOrder = (values) => options.map((option) => option.value).filter((optionValue) => values.includes(optionValue));\n    const change = (values) => {\n        onChange(inOptionsOrder(values));\n        onBlur?.();\n    };\n    const toggle = (optionValue) => change(checkedValues.includes(optionValue)\n        ? checkedValues.filter((checkedValue) => checkedValue !== optionValue)\n        : [...checkedValues, optionValue]);\n\n    return (\n        <FieldFrame inputId={`${groupId}-first`} labelId={labelId} label={label}>\n            <div>\n                <CheckboxGroupRoot row={row} role=\"group\" aria-labelledby={labelId} ownSx={{columnGap: 2, ...sx}}>\n                    {selectAll && (\n                        <CheckboxGroupSelectAll\n                            disabled={disabled}\n                            label={selectAllState.allChosen ? t('form.unselectAll') : t('form.selectAll', {count: options.length})}\n                            control={(\n                                <Checkbox size=\"small\" checked={selectAllState.allChosen} indeterminate={selectAllState.someChosen}\n                                          onChange={() => change(selectAllState.toggled())} />\n                            )}\n                            ownSx={{'& .MuiFormControlLabel-label': {fontWeight: 600}}}\n                        />\n                    )}\n                    {options.map((option, index) => (\n                        <CheckboxGroupOption\n                            key={option.value}\n                            disabled={disabled || option.disabled}\n                            ownSx={{alignItems: option.description ? 'flex-start' : 'center'}}\n                            control={(\n                                <Checkbox size=\"small\" name={name} id={index === 0 ? `${groupId}-first` : undefined}\n                                          checked={checkedValues.includes(option.value)} onChange={() => toggle(option.value)}\n                                          sx={option.description ? {mt: -0.5} : undefined} />\n                            )}\n                            label={option.description ? (\n                                <Stack component=\"span\">\n                                    <Typography component=\"span\" variant=\"body2\">{option.label}</Typography>\n                                    <Typography component=\"span\" variant=\"caption\" color=\"text.secondary\">{option.description}</Typography>\n                                </Stack>\n                            ) : option.label}\n                        />\n                    ))}\n                </CheckboxGroupRoot>\n                <FormHelperText error={Boolean(errorText)}>{errorText ?? helperText}</FormHelperText>\n            </div>\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CheckboxGroupInput.js","sources":["../../src/inputs/CheckboxGroupInput.jsx"],"sourcesContent":["// El grupo de casillas: pocas opciones a la vista (los canales de aviso, los días que abre una sucursal), cada una con su\n// casilla y, si hace falta, una explicación abajo; al formulario llega la lista de las marcadas. Con pocas opciones es más\n// rápido que abrir una lista; con muchas, SelectInput o CatalogInput con `multiple`.\n//\n// selectAll pone «Elegir todos» arriba, con su casilla a medias si hay algunas marcadas. row las acomoda en renglón (en el\n// teléfono bajan solas). Dentro de una FormSection se vuelve renglón, como los demás campos.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaCheckboxGroupInput con defaultProps y\n// styleOverrides de sus partes: root, selectAll, option.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport Checkbox from '@mui/material/Checkbox';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport FormGroup from '@mui/material/FormGroup';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {useValidationText} from '@/forms/useValidationText.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {selectAllStateOf} from '@/inputs/selectAllState.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaCheckboxGroupInput)\nconst THEME_NAME = 'CalcitaCheckboxGroupInput';\nconst CheckboxGroupRoot = piecePart(THEME_NAME, 'Root', FormGroup);\nconst CheckboxGroupSelectAll = piecePart(THEME_NAME, 'SelectAll', FormControlLabel);\nconst CheckboxGroupOption = piecePart(THEME_NAME, 'Option', FormControlLabel);\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {import('react').ReactNode} props.label ya traducida\n * @param {Array<string|number>|null|undefined} props.value las marcadas ([] = ninguna)\n * @param {(values: Array<string|number>) => void} props.onChange la lista nueva, en el orden de las opciones\n * @param {() => void} [props.onBlur]\n * @param {Array<{value: string|number, label: string, description?: string, disabled?: boolean}>} props.options\n * @param {boolean} [props.row] en renglón en lugar de una debajo de otra\n * @param {boolean} [props.selectAll] «Elegir todos» arriba\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] ya traducida\n * @param {boolean} [props.disabled]\n * @param {object} [props.sx]\n * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación\n *     ({required: 'Escriba el RFC', matches: 'El RFC lleva 12 o 13 caracteres'}): 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 CheckboxGroupInputContent(props) {\n    const {\n        name, label, value, onChange, onBlur, options, row = false, selectAll = false, error, helperText = ' ', disabled = false, sx, messages, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    // el texto del error: el de la pantalla (messages), el del proyecto para este campo o el de Calcita\n    const validationTextOf = useValidationText({name, label, messages});\n    const generatedId = useId();\n    const groupId = `${name ?? 'checkbox-group'}-${generatedId}`;\n    const labelId = `${groupId}-label`;\n    const errorText = validationTextOf(error);\n    const checkedValues = Array.isArray(value) ? value : [];\n    const selectAllState = selectAllStateOf(checkedValues, options.filter((option) => !option.disabled).map((option) => option.value));\n    // la lista en el orden de las opciones, no en el que se fueron marcando (así viaja siempre igual)\n    const inOptionsOrder = (values) => options.map((option) => option.value).filter((optionValue) => values.includes(optionValue));\n    const change = (values) => {\n        onChange(inOptionsOrder(values));\n        onBlur?.();\n    };\n    const toggle = (optionValue) => change(checkedValues.includes(optionValue)\n        ? checkedValues.filter((checkedValue) => checkedValue !== optionValue)\n        : [...checkedValues, optionValue]);\n\n    return (\n        <FieldFrame inputId={`${groupId}-first`} labelId={labelId} label={label}>\n            <div>\n                <CheckboxGroupRoot row={row} role=\"group\" aria-labelledby={labelId} ownSx={{columnGap: 2}} sx={sx}>\n                    {selectAll && (\n                        <CheckboxGroupSelectAll\n                            disabled={disabled}\n                            label={selectAllState.allChosen ? t('form.unselectAll') : t('form.selectAll', {count: options.length})}\n                            control={(\n                                <Checkbox size=\"small\" checked={selectAllState.allChosen} indeterminate={selectAllState.someChosen}\n                                          onChange={() => change(selectAllState.toggled())} />\n                            )}\n                            ownSx={{'& .MuiFormControlLabel-label': {fontWeight: 600}}}\n                        />\n                    )}\n                    {options.map((option, index) => (\n                        <CheckboxGroupOption\n                            key={option.value}\n                            disabled={disabled || option.disabled}\n                            ownSx={{alignItems: option.description ? 'flex-start' : 'center'}}\n                            control={(\n                                <Checkbox size=\"small\" name={name} id={index === 0 ? `${groupId}-first` : undefined}\n                                          checked={checkedValues.includes(option.value)} onChange={() => toggle(option.value)}\n                                          sx={option.description ? {mt: -0.5} : undefined} />\n                            )}\n                            label={option.description ? (\n                                <Stack component=\"span\">\n                                    <Typography component=\"span\" variant=\"body2\">{option.label}</Typography>\n                                    <Typography component=\"span\" variant=\"caption\" color=\"text.secondary\">{option.description}</Typography>\n                                </Stack>\n                            ) : option.label}\n                        />\n                    ))}\n                </CheckboxGroupRoot>\n                <FormHelperText error={Boolean(errorText)}>{errorText ?? helperText}</FormHelperText>\n            </div>\n        </FieldFrame>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst CheckboxGroupInput = withPieceSlots(CheckboxGroupInputContent, THEME_NAME);\nexport default CheckboxGroupInput;\n"],"names":[],"mappings":"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"}

package/dist/inputs/ColorInput.js

@@ -8,10 +8,10 @@ import Button from "@mui/material/Button";
 import InputAdornment from "@mui/material/InputAdornment";
 import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
-import { translateValidationMessage } from "../forms/validationMessages.js";
+import { useValidationText } from "../forms/useValidationText.js";
 import { contrastOnWhite, MIN_CONTRAST, readableVariantOf, HEX_COLOR } from "./colorContrast.js";
 import FieldFrame from "./FieldFrame.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaColorInput";
 const ColorSwatch = piecePart(THEME_NAME, "Swatch", Box);
@@ -21,7 +21,7 @@ const NEUTRAL_COLOR = "#000000";
 const RATIO_DECIMALS = 1;
 const SWATCH_PIXELS = 24;
 const SWATCH_EDGE = Object.freeze({ light: "rgba(15, 23, 42, 0.18)", dark: "rgba(255, 255, 255, 0.24)" });
-function ColorInput(props) {
+function ColorInputContent(props) {
   const {
     name,
     label,
@@ -33,18 +33,20 @@ function ColorInput(props) {
     checkContrast = true,
     disabled = false,
     inputRef,
+    messages,
     texts,
     ...unknownProps
   } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("common", texts);
+  const validationTextOf = useValidationText({ name, label, messages });
   const generatedId = useId();
   const inputId = `${name ?? "color"}-${generatedId}`;
   const color = value ?? "";
   const isValidColor = HEX_COLOR.test(color);
   const contrastRatio = isValidColor ? contrastOnWhite(color) : null;
   const suggestion = checkContrast && isValidColor && contrastRatio < MIN_CONTRAST ? readableVariantOf(color) : null;
-  const errorText = translateValidationMessage(t, error);
+  const errorText = validationTextOf(error);
   const contrastText = contrastRatio && checkContrast ? t("form.colorContrast", { ratio: contrastRatio.toFixed(RATIO_DECIMALS) }) : helperText;
   const choose = (nextColor) => onChange(nextColor.toUpperCase());
   return /* @__PURE__ */ jsx(FieldFrame, { inputId, label, children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
@@ -111,6 +113,7 @@ function ColorInput(props) {
     )
   ] }) });
 }
+const ColorInput = withPieceSlots(ColorInputContent, THEME_NAME);
 export {
   ColorInput as default
 };

package/dist/inputs/ColorInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.js","sources":["../../src/inputs/ColorInput.jsx"],"sourcesContent":["// Campo de COLOR suelto (viene de «Identidad de documentos» de PLD): la muestra redonda (el «color well» de Apple, que abre\n// el selector del sistema) dentro del campo del texto #RRGGBB, el contraste contra el blanco mientras se elige y, si el color casi no se leería, el mismo tono más oscuro con su botón\n// para usarlo.\n//\n// Para lo que se imprime o se lee sobre blanco (el color de una marca en un comprobante). El color llega al formulario en\n// mayúsculas (#2B3A67); '' = sin color.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaColorInput con defaultProps y\n// styleOverrides de sus partes: swatch, nativeInput.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\n\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport {HEX_COLOR, MIN_CONTRAST, contrastOnWhite, readableVariantOf} from '@/inputs/colorContrast.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaColorInput)\nconst THEME_NAME = 'CalcitaColorInput';\nconst ColorSwatch = piecePart(THEME_NAME, 'Swatch', Box);\nconst ColorNativeInput = piecePart(THEME_NAME, 'NativeInput', Box);\n\n// #RRGGBB\nconst COLOR_LENGTH = 7;\n// el color que enseña el selector del navegador mientras el texto no es un color\nconst NEUTRAL_COLOR = '#000000';\nconst RATIO_DECIMALS = 1;\n// la muestra redonda (px) y su orilla fina en claro y en oscuro\nconst SWATCH_PIXELS = 24;\nconst SWATCH_EDGE = Object.freeze({light: 'rgba(15, 23, 42, 0.18)', dark: 'rgba(255, 255, 255, 0.24)'});\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 '#RRGGBB' o ''\n * @param {(color: string) => void} props.onChange recibe el color en mayúsculas\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] cuando no hay color\n * @param {boolean} [props.checkContrast] avisa si casi no se lee sobre blanco (por omisión sí)\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function ColorInput(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaColorInput.defaultProps) y encima lo que llega aquí\n    const {\n    name, label, value, onChange, onBlur, error, helperText = ' ', checkContrast = true, disabled = false, inputRef, texts,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const generatedId = useId();\n    const inputId = `${name ?? 'color'}-${generatedId}`;\n    const color = value ?? '';\n    const isValidColor = HEX_COLOR.test(color);\n    const contrastRatio = isValidColor ? contrastOnWhite(color) : null;\n    const suggestion = checkContrast && isValidColor && contrastRatio < MIN_CONTRAST ? readableVariantOf(color) : null;\n    const errorText = translateValidationMessage(t, error);\n    const contrastText = contrastRatio && checkContrast ? t('form.colorContrast', {ratio: contrastRatio.toFixed(RATIO_DECIMALS)}) : helperText;\n    const choose = (nextColor) => onChange(nextColor.toUpperCase());\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <Stack spacing={1}>\n                {/* un solo campo: la muestra redonda al inicio (el «color well» de Apple) y el código al lado. Picar la muestra\n                    abre el selector de colores del sistema (un input type=color invisible encima de ella). Antes eran dos cajas\n                    sueltas (el selector del navegador en la suya y el código en otra) y se veían como piezas sueltas */}\n                <TextField\n                    name={name}\n                    id={inputId}\n                    inputRef={inputRef}\n                    size=\"small\"\n                    fullWidth\n                    value={color}\n                    disabled={disabled}\n                    placeholder=\"#RRGGBB\"\n                    onChange={(event) => choose(event.target.value)}\n                    onBlur={onBlur}\n                    error={Boolean(errorText)}\n                    helperText={errorText ?? contrastText}\n                    slotProps={{\n                        input: {\n                            startAdornment: (\n                                <InputAdornment position=\"start\">\n                                    <ColorSwatch component=\"label\"\n                                         ownSx={(theme) => ({\n                                             position: 'relative', display: 'block', flexShrink: 0, width: SWATCH_PIXELS, height: SWATCH_PIXELS,\n                                             borderRadius: '50%', cursor: disabled ? 'default' : 'pointer',\n                                             backgroundColor: isValidColor ? color : 'transparent',\n                                             // la orilla de la muestra: que se vea aunque el color sea el del fondo (blanco en claro, negro en oscuro)\n                                             boxShadow: `inset 0 0 0 1px ${SWATCH_EDGE.light}`,\n                                             ...theme.applyStyles('dark', {boxShadow: `inset 0 0 0 1px ${SWATCH_EDGE.dark}`}),\n                                         })}>\n                                        <ColorNativeInput component=\"input\" type=\"color\" value={isValidColor ? color : NEUTRAL_COLOR} disabled={disabled}\n                                             aria-label={t('form.pickColor')} onChange={(event) => choose(event.target.value)}\n                                             ownSx={{position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0, border: 0, p: 0, cursor: 'inherit'}} />\n                                    </ColorSwatch>\n                                </InputAdornment>\n                            ),\n                        },\n                        htmlInput: {maxLength: COLOR_LENGTH, spellCheck: false, style: {fontVariantNumeric: 'tabular-nums'}},\n                    }}\n                />\n                {suggestion && (\n                    <Alert severity=\"warning\"\n                           action={<Button color=\"inherit\" size=\"small\" onClick={() => choose(suggestion)}>{t('form.colorUseSuggestion', {color: suggestion})}</Button>}>\n                        {t('form.colorLowContrast', {suggestion})}\n                    </Alert>\n                )}\n            </Stack>\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColorInput.js","sources":["../../src/inputs/ColorInput.jsx"],"sourcesContent":["// Campo de COLOR suelto (viene de «Identidad de documentos» de PLD): la muestra redonda (el «color well» de Apple, que abre\n// el selector del sistema) dentro del campo del texto #RRGGBB, el contraste contra el blanco mientras se elige y, si el color casi no se leería, el mismo tono más oscuro con su botón\n// para usarlo.\n//\n// Para lo que se imprime o se lee sobre blanco (el color de una marca en un comprobante). El color llega al formulario en\n// mayúsculas (#2B3A67); '' = sin color.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaColorInput con defaultProps y\n// styleOverrides de sus partes: swatch, nativeInput.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\n\nimport {useValidationText} from '@/forms/useValidationText.js';\nimport {HEX_COLOR, MIN_CONTRAST, contrastOnWhite, readableVariantOf} from '@/inputs/colorContrast.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaColorInput)\nconst THEME_NAME = 'CalcitaColorInput';\nconst ColorSwatch = piecePart(THEME_NAME, 'Swatch', Box);\nconst ColorNativeInput = piecePart(THEME_NAME, 'NativeInput', Box);\n\n// #RRGGBB\nconst COLOR_LENGTH = 7;\n// el color que enseña el selector del navegador mientras el texto no es un color\nconst NEUTRAL_COLOR = '#000000';\nconst RATIO_DECIMALS = 1;\n// la muestra redonda (px) y su orilla fina en claro y en oscuro\nconst SWATCH_PIXELS = 24;\nconst SWATCH_EDGE = Object.freeze({light: 'rgba(15, 23, 42, 0.18)', dark: 'rgba(255, 255, 255, 0.24)'});\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 '#RRGGBB' o ''\n * @param {(color: string) => void} props.onChange recibe el color en mayúsculas\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] cuando no hay color\n * @param {boolean} [props.checkContrast] avisa si casi no se lee sobre blanco (por omisión sí)\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación\n *     ({required: 'Escriba el RFC', matches: 'El RFC lleva 12 o 13 caracteres'}): 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 ColorInputContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaColorInput.defaultProps) y encima lo que llega aquí\n    const {\n    name, label, value, onChange, onBlur, error, helperText = ' ', checkContrast = true, disabled = false, inputRef, messages, texts,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    // el texto del error: el de la pantalla (messages), el del proyecto para este campo o el de Calcita\n    const validationTextOf = useValidationText({name, label, messages});\n    const generatedId = useId();\n    const inputId = `${name ?? 'color'}-${generatedId}`;\n    const color = value ?? '';\n    const isValidColor = HEX_COLOR.test(color);\n    const contrastRatio = isValidColor ? contrastOnWhite(color) : null;\n    const suggestion = checkContrast && isValidColor && contrastRatio < MIN_CONTRAST ? readableVariantOf(color) : null;\n    const errorText = validationTextOf(error);\n    const contrastText = contrastRatio && checkContrast ? t('form.colorContrast', {ratio: contrastRatio.toFixed(RATIO_DECIMALS)}) : helperText;\n    const choose = (nextColor) => onChange(nextColor.toUpperCase());\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <Stack spacing={1}>\n                {/* un solo campo: la muestra redonda al inicio (el «color well» de Apple) y el código al lado. Picar la muestra\n                    abre el selector de colores del sistema (un input type=color invisible encima de ella). Antes eran dos cajas\n                    sueltas (el selector del navegador en la suya y el código en otra) y se veían como piezas sueltas */}\n                <TextField\n                    name={name}\n                    id={inputId}\n                    inputRef={inputRef}\n                    size=\"small\"\n                    fullWidth\n                    value={color}\n                    disabled={disabled}\n                    placeholder=\"#RRGGBB\"\n                    onChange={(event) => choose(event.target.value)}\n                    onBlur={onBlur}\n                    error={Boolean(errorText)}\n                    helperText={errorText ?? contrastText}\n                    slotProps={{\n                        input: {\n                            startAdornment: (\n                                <InputAdornment position=\"start\">\n                                    <ColorSwatch component=\"label\"\n                                         ownSx={(theme) => ({\n                                             position: 'relative', display: 'block', flexShrink: 0, width: SWATCH_PIXELS, height: SWATCH_PIXELS,\n                                             borderRadius: '50%', cursor: disabled ? 'default' : 'pointer',\n                                             backgroundColor: isValidColor ? color : 'transparent',\n                                             // la orilla de la muestra: que se vea aunque el color sea el del fondo (blanco en claro, negro en oscuro)\n                                             boxShadow: `inset 0 0 0 1px ${SWATCH_EDGE.light}`,\n                                             ...theme.applyStyles('dark', {boxShadow: `inset 0 0 0 1px ${SWATCH_EDGE.dark}`}),\n                                         })}>\n                                        <ColorNativeInput component=\"input\" type=\"color\" value={isValidColor ? color : NEUTRAL_COLOR} disabled={disabled}\n                                             aria-label={t('form.pickColor')} onChange={(event) => choose(event.target.value)}\n                                             ownSx={{position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0, border: 0, p: 0, cursor: 'inherit'}} />\n                                    </ColorSwatch>\n                                </InputAdornment>\n                            ),\n                        },\n                        htmlInput: {maxLength: COLOR_LENGTH, spellCheck: false, style: {fontVariantNumeric: 'tabular-nums'}},\n                    }}\n                />\n                {suggestion && (\n                    <Alert severity=\"warning\"\n                           action={<Button color=\"inherit\" size=\"small\" onClick={() => choose(suggestion)}>{t('form.colorUseSuggestion', {color: suggestion})}</Button>}>\n                        {t('form.colorLowContrast', {suggestion})}\n                    </Alert>\n                )}\n            </Stack>\n        </FieldFrame>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst ColorInput = withPieceSlots(ColorInputContent, THEME_NAME);\nexport default ColorInput;\n"],"names":[],"mappings":"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"}

package/dist/inputs/FieldFrame.js

@@ -4,18 +4,24 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { FormRow } from "./FormSection.js";
 import { useIsInsideFormSection } from "./formLayoutContext.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
-function FieldFrame({ inputId, labelId, label, children, ...unknownProps }) {
-  warnUnknownProps("FieldFrame", unknownProps);
+const THEME_NAME = "CalcitaFieldFrame";
+const FieldFrameRoot = piecePart(THEME_NAME, "Root", Stack);
+const FieldFrameLabel = piecePart(THEME_NAME, "Label", Typography);
+function FieldFrameContent(props) {
+  const { inputId, labelId, label, children, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const isRow = useIsInsideFormSection();
   if (isRow) {
     return /* @__PURE__ */ jsx(FormRow, { label, htmlFor: inputId, labelId, children });
   }
-  return /* @__PURE__ */ jsxs(Stack, { spacing: 0.75, children: [
-    /* @__PURE__ */ jsx(Typography, { component: "label", id: labelId, htmlFor: inputId, variant: "overline", color: "text.secondary", children: label }),
+  return /* @__PURE__ */ jsxs(FieldFrameRoot, { spacing: 0.75, children: [
+    /* @__PURE__ */ jsx(FieldFrameLabel, { component: "label", id: labelId, htmlFor: inputId, variant: "overline", color: "text.secondary", children: label }),
     children
   ] });
 }
+const FieldFrame = withPieceSlots(FieldFrameContent, THEME_NAME);
 export {
   FieldFrame as default
 };

package/dist/inputs/FieldFrame.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldFrame.js","sources":["../../src/inputs/FieldFrame.jsx"],"sourcesContent":["// El marco de todos los campos del paquete. Fuera de una FormSection, la etiqueta va ARRIBA del campo, ligada a él por su\n// id; dentro de una FormSection (el formulario agrupado de Apple), el campo se vuelve un renglón: la etiqueta a la\n// izquierda y el valor a la derecha (FormRow).\n//\n// La etiqueta va afuera y no flotando adentro del campo: se lee igual con el campo vacío o lleno, y no brinca al escribir.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {FormRow} from '@/inputs/FormSection.jsx';\nimport {useIsInsideFormSection} from '@/inputs/formLayoutContext.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n/**\n * @param {object} props\n * @param {string} props.inputId el id del campo (la etiqueta lo nombra para el lector de pantalla)\n * @param {string} [props.labelId] el id de la etiqueta, para un campo que no es un <input> (la lista desplegable de MUI es un\n *     div: `for` no la une con su etiqueta y el campo la nombra con aria-labelledby)\n * @param {import('react').ReactNode} props.label ya traducida\n * @param {import('react').ReactNode} props.children el campo\n */\nexport default function FieldFrame({inputId, labelId, label, children, ...unknownProps}) {\n    warnUnknownProps('FieldFrame', unknownProps);\n    const isRow = useIsInsideFormSection();\n\n    if (isRow) {\n        return <FormRow label={label} htmlFor={inputId} labelId={labelId}>{children}</FormRow>;\n    }\n\n    return (\n        <Stack spacing={0.75}>\n            <Typography component=\"label\" id={labelId} htmlFor={inputId} variant=\"overline\" color=\"text.secondary\">{label}</Typography>\n            {children}\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;AAsBA,SAAwB,WAAW,EAAC,SAAS,SAAS,OAAO,UAAU,GAAG,gBAAe;AACrF,mBAAiB,cAAc,YAAY;AAC3C,QAAM,QAAQ,uBAAA;AAEd,MAAI,OAAO;AACP,+BAAQ,SAAA,EAAQ,OAAc,SAAS,SAAS,SAAmB,UAAS;AAAA,EAChF;AAEA,SACI,qBAAC,OAAA,EAAM,SAAS,MACZ,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW,WAAU,SAAQ,IAAI,SAAS,SAAS,SAAS,SAAQ,YAAW,OAAM,kBAAkB,UAAA,OAAM;AAAA,IAC7G;AAAA,EAAA,GACL;AAER;"}
+{"version":3,"file":"FieldFrame.js","sources":["../../src/inputs/FieldFrame.jsx"],"sourcesContent":["// El marco de todos los campos del paquete. Fuera de una FormSection, la etiqueta va ARRIBA del campo, ligada a él por su\n// id; dentro de una FormSection (el formulario agrupado de Apple), el campo se vuelve un renglón: la etiqueta a la\n// izquierda y el valor a la derecha (FormRow).\n//\n// La etiqueta va afuera y no flotando adentro del campo: se lee igual con el campo vacío o lleno, y no brinca al escribir.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFieldFrame con styleOverrides de sus\n// partes root (la columna) y label (la etiqueta de arriba), y slots/slotProps para cambiarlas. Dentro de una FormSection el\n// renglón es CalcitaFormRow.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {FormRow} from '@/inputs/FormSection.jsx';\nimport {useIsInsideFormSection} from '@/inputs/formLayoutContext.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaFieldFrame)\nconst THEME_NAME = 'CalcitaFieldFrame';\nconst FieldFrameRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst FieldFrameLabel = piecePart(THEME_NAME, 'Label', Typography);\n\n/**\n * @param {object} props\n * @param {string} props.inputId el id del campo (la etiqueta lo nombra para el lector de pantalla)\n * @param {string} [props.labelId] el id de la etiqueta, para un campo que no es un <input> (la lista desplegable de MUI es un\n *     div: `for` no la une con su etiqueta y el campo la nombra con aria-labelledby)\n * @param {import('react').ReactNode} props.label ya traducida\n * @param {import('react').ReactNode} props.children el campo\n */\nfunction FieldFrameContent(props) {\n    const {inputId, labelId, label, children, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const isRow = useIsInsideFormSection();\n\n    if (isRow) {\n        return <FormRow label={label} htmlFor={inputId} labelId={labelId}>{children}</FormRow>;\n    }\n\n    return (\n        <FieldFrameRoot spacing={0.75}>\n            <FieldFrameLabel component=\"label\" id={labelId} htmlFor={inputId} variant=\"overline\" color=\"text.secondary\">{label}</FieldFrameLabel>\n            {children}\n        </FieldFrameRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst FieldFrame = withPieceSlots(FieldFrameContent, THEME_NAME);\nexport default FieldFrame;\n"],"names":[],"mappings":";;;;;;;;AAoBA,MAAM,aAAa;AACnB,MAAM,iBAAiB,UAAU,YAAY,QAAQ,KAAK;AAC1D,MAAM,kBAAkB,UAAU,YAAY,SAAS,UAAU;AAUjE,SAAS,kBAAkB,OAAO;AAC9B,QAAM,EAAC,SAAS,SAAS,OAAO,UAAU,GAAG,iBAAgB,cAAc,OAAO,UAAU;AAC5F,mBAAiB,YAAY,YAAY;AACzC,QAAM,QAAQ,uBAAA;AAEd,MAAI,OAAO;AACP,+BAAQ,SAAA,EAAQ,OAAc,SAAS,SAAS,SAAmB,UAAS;AAAA,EAChF;AAEA,SACI,qBAAC,gBAAA,EAAe,SAAS,MACrB,UAAA;AAAA,IAAA,oBAAC,iBAAA,EAAgB,WAAU,SAAQ,IAAI,SAAS,SAAS,SAAS,SAAQ,YAAW,OAAM,kBAAkB,UAAA,OAAM;AAAA,IAClH;AAAA,EAAA,GACL;AAER;AAGA,MAAM,aAAa,eAAe,mBAAmB,UAAU;"}

package/dist/inputs/FormSection.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import Box from "@mui/material/Box";
 import Paper from "@mui/material/Paper";

package/dist/inputs/MaskedInput.js

@@ -70,6 +70,7 @@ const TEXT_INPUT_PROPS = /* @__PURE__ */ new Set([
   "fullWidth",
   "id",
   "sx",
+  "messages",
   "texts"
 ]);
 function splitTextInputProps(props) {

package/dist/inputs/MaskedInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"MaskedInput.js","sources":["../../src/inputs/MaskedInput.jsx"],"sourcesContent":["// Campo de texto con máscara: un teléfono, una CLABE, un RFC, un folio fiscal. Mientras se escribe se ven los separadores\n// («555 123 4567») y al formulario llega el valor LIMPIO («5551234567»), que es lo que valida y guarda el servidor. Pegar un\n// número con otros separadores también sirve: se queda con los dígitos o letras que caben.\n//\n// Es TextInput por dentro (la etiqueta arriba, la ⓧ para borrar, el error y la ayuda, el renglón en una FormSection), con la\n// máscara de inputMasks.js: mask es el nombre de una de INPUT_MASK ('phone', 'clabe', 'rfc', 'curp', 'uuid'…) o un patrón\n// propio ('AAA-999'). Escribir en medio no manda el cursor al final.\n//\n// Con formik: FormMaskedField (/forms); con react-hook-form, el del mismo nombre (/react-hook-form).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useLayoutEffect, useRef} from 'react';\n\nimport {caretPositionOf, maskPatternOf, maskedTextOf, rawValueOf} from '@/inputs/inputMasks.js';\nimport TextInput from '@/inputs/TextInput.jsx';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el teclado del teléfono según lo que cabe: solo dígitos abre el numérico\nconst NUMERIC_ONLY = /^[^AXH]*$/;\n\n/**\n * @param {object} props las de TextInput (label, helperText, error, placeholder, disabled, slotProps…), y:\n * @param {string} props.mask 'phone' | 'postalCode' | 'clabe' | 'card' | 'rfc' | 'curp' | 'uuid' (INPUT_MASK) o un patrón propio\n *     con 9 (dígito), A (letra), X (letra o dígito) y H (hexadecimal)\n * @param {string|null|undefined} props.value el valor limpio, sin separadores\n * @param {(value: string) => void} props.onChange recibe el valor limpio\n * @param {string} props.label ya traducido\n * @param {string} [props.name]\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText]\n * @param {string} [props.placeholder] ya traducido; por omisión ninguno (un ejemplo con la forma ayuda: «555 123 4567»)\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {boolean} [props.disabled]\n * @param {object} [props.slotProps]\n * @param {object} [props.texts]\n */\nexport default function MaskedInput({mask, value, onChange, inputRef, slotProps, ...textInputProps}) {\n    const {unknownProps, knownProps} = splitTextInputProps(textInputProps);\n    warnUnknownProps('MaskedInput', unknownProps);\n    const pattern = maskPatternOf(mask);\n    const ownInputRef = useRef(null);\n    // dónde dejar el cursor cuando el campo ya tenga sus separadores (se pone después de pintar)\n    const pendingCaret = useRef(null);\n\n    useLayoutEffect(() => {\n        const input = ownInputRef.current;\n        if (pendingCaret.current === null || !input || input !== input.ownerDocument.activeElement) {\n            return;\n        }\n        input.setSelectionRange(pendingCaret.current, pendingCaret.current);\n        pendingCaret.current = null;\n    });\n\n    const keepInputRef = (input) => {\n        ownInputRef.current = input;\n        if (typeof inputRef === 'function') {\n            inputRef(input);\n        } else if (inputRef) {\n            inputRef.current = input;\n        }\n    };\n\n    const change = (typedText) => {\n        const caretPosition = ownInputRef.current?.selectionStart ?? typedText.length;\n        pendingCaret.current = caretPositionOf(typedText, caretPosition, pattern);\n        onChange(rawValueOf(typedText, pattern));\n    };\n\n    return (\n        <TextInput\n            {...knownProps}\n            value={maskedTextOf(value, pattern)}\n            onChange={change}\n            inputRef={keepInputRef}\n            slotProps={{\n                ...slotProps,\n                // OJO: sin maxLength. El navegador cortaría lo pegado ANTES de limpiarlo: «(555) 123-4567» trae 14 caracteres para\n                // un patrón de 12 y se perderían los últimos dígitos. El largo lo cuida la máscara\n                htmlInput: {\n                    inputMode: NUMERIC_ONLY.test(pattern) ? 'numeric' : 'text', autoCapitalize: 'characters', spellCheck: false,\n                    ...slotProps?.htmlInput,\n                },\n            }}\n        />\n    );\n}\n\n// lo que TextInput entiende; lo demás se avisa en la consola mientras se programa. uppercase y normalizeOnBlur no van: la\n// máscara ya decide cómo se escribe\nconst TEXT_INPUT_PROPS = new Set([\n    'name', 'label', 'onBlur', 'error', 'helperText', 'placeholder', 'startAdornment', 'endAdornment', 'clearable', 'autoComplete', 'autoFocus',\n    'disabled', 'required', 'fullWidth', 'id', 'sx', 'texts',\n]);\n\n/**\n * @param {object} props\n * @returns {{knownProps: object, unknownProps: object}}\n */\nfunction splitTextInputProps(props) {\n    const knownProps = {};\n    const unknownProps = {};\n    for (const [key, propValue] of Object.entries(props)) {\n        (TEXT_INPUT_PROPS.has(key) ? knownProps : unknownProps)[key] = propValue;\n    }\n    return {knownProps, unknownProps};\n}\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,eAAe;AAmBrB,SAAwB,YAAY,EAAC,MAAM,OAAO,UAAU,UAAU,WAAW,GAAG,kBAAiB;AACjG,QAAM,EAAC,cAAc,eAAc,oBAAoB,cAAc;AACrE,mBAAiB,eAAe,YAAY;AAC5C,QAAM,UAAU,cAAc,IAAI;AAClC,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,eAAe,OAAO,IAAI;AAEhC,kBAAgB,MAAM;AAClB,UAAM,QAAQ,YAAY;AAC1B,QAAI,aAAa,YAAY,QAAQ,CAAC,SAAS,UAAU,MAAM,cAAc,eAAe;AACxF;AAAA,IACJ;AACA,UAAM,kBAAkB,aAAa,SAAS,aAAa,OAAO;AAClE,iBAAa,UAAU;AAAA,EAC3B,CAAC;AAED,QAAM,eAAe,CAAC,UAAU;AAC5B,gBAAY,UAAU;AACtB,QAAI,OAAO,aAAa,YAAY;AAChC,eAAS,KAAK;AAAA,IAClB,WAAW,UAAU;AACjB,eAAS,UAAU;AAAA,IACvB;AAAA,EACJ;AAEA,QAAM,SAAS,CAAC,cAAc;AAC1B,UAAM,gBAAgB,YAAY,SAAS,kBAAkB,UAAU;AACvE,iBAAa,UAAU,gBAAgB,WAAW,eAAe,OAAO;AACxE,aAAS,WAAW,WAAW,OAAO,CAAC;AAAA,EAC3C;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,OAAO,aAAa,OAAO,OAAO;AAAA,MAClC,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW;AAAA,QACP,GAAG;AAAA;AAAA;AAAA,QAGH,WAAW;AAAA,UACP,WAAW,aAAa,KAAK,OAAO,IAAI,YAAY;AAAA,UAAQ,gBAAgB;AAAA,UAAc,YAAY;AAAA,UACtG,GAAG,WAAW;AAAA,QAAA;AAAA,MAClB;AAAA,IACJ;AAAA,EAAA;AAGZ;AAIA,MAAM,uCAAuB,IAAI;AAAA,EAC7B;AAAA,EAAQ;AAAA,EAAS;AAAA,EAAU;AAAA,EAAS;AAAA,EAAc;AAAA,EAAe;AAAA,EAAkB;AAAA,EAAgB;AAAA,EAAa;AAAA,EAAgB;AAAA,EAChI;AAAA,EAAY;AAAA,EAAY;AAAA,EAAa;AAAA,EAAM;AAAA,EAAM;AACrD,CAAC;AAMD,SAAS,oBAAoB,OAAO;AAChC,QAAM,aAAa,CAAA;AACnB,QAAM,eAAe,CAAA;AACrB,aAAW,CAAC,KAAK,SAAS,KAAK,OAAO,QAAQ,KAAK,GAAG;AAClD,KAAC,iBAAiB,IAAI,GAAG,IAAI,aAAa,cAAc,GAAG,IAAI;AAAA,EACnE;AACA,SAAO,EAAC,YAAY,aAAA;AACxB;"}
+{"version":3,"file":"MaskedInput.js","sources":["../../src/inputs/MaskedInput.jsx"],"sourcesContent":["// Campo de texto con máscara: un teléfono, una CLABE, un RFC, un folio fiscal. Mientras se escribe se ven los separadores\n// («555 123 4567») y al formulario llega el valor LIMPIO («5551234567»), que es lo que valida y guarda el servidor. Pegar un\n// número con otros separadores también sirve: se queda con los dígitos o letras que caben.\n//\n// Es TextInput por dentro (la etiqueta arriba, la ⓧ para borrar, el error y la ayuda, el renglón en una FormSection), con la\n// máscara de inputMasks.js: mask es el nombre de una de INPUT_MASK ('phone', 'clabe', 'rfc', 'curp', 'uuid'…) o un patrón\n// propio ('AAA-999'). Escribir en medio no manda el cursor al final.\n//\n// Con formik: FormMaskedField (/forms); con react-hook-form, el del mismo nombre (/react-hook-form).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useLayoutEffect, useRef} from 'react';\n\nimport {caretPositionOf, maskPatternOf, maskedTextOf, rawValueOf} from '@/inputs/inputMasks.js';\nimport TextInput from '@/inputs/TextInput.jsx';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el teclado del teléfono según lo que cabe: solo dígitos abre el numérico\nconst NUMERIC_ONLY = /^[^AXH]*$/;\n\n/**\n * @param {object} props las de TextInput (label, helperText, error, placeholder, disabled, slotProps…), y:\n * @param {string} props.mask 'phone' | 'postalCode' | 'clabe' | 'card' | 'rfc' | 'curp' | 'uuid' (INPUT_MASK) o un patrón propio\n *     con 9 (dígito), A (letra), X (letra o dígito) y H (hexadecimal)\n * @param {string|null|undefined} props.value el valor limpio, sin separadores\n * @param {(value: string) => void} props.onChange recibe el valor limpio\n * @param {string} props.label ya traducido\n * @param {string} [props.name]\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText]\n * @param {string} [props.placeholder] ya traducido; por omisión ninguno (un ejemplo con la forma ayuda: «555 123 4567»)\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {boolean} [props.disabled]\n * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación: gana al de\n *     Calcita y al de los textos\n * @param {object} [props.slotProps]\n * @param {object} [props.texts]\n */\nexport default function MaskedInput({mask, value, onChange, inputRef, slotProps, ...textInputProps}) {\n    const {unknownProps, knownProps} = splitTextInputProps(textInputProps);\n    warnUnknownProps('MaskedInput', unknownProps);\n    const pattern = maskPatternOf(mask);\n    const ownInputRef = useRef(null);\n    // dónde dejar el cursor cuando el campo ya tenga sus separadores (se pone después de pintar)\n    const pendingCaret = useRef(null);\n\n    useLayoutEffect(() => {\n        const input = ownInputRef.current;\n        if (pendingCaret.current === null || !input || input !== input.ownerDocument.activeElement) {\n            return;\n        }\n        input.setSelectionRange(pendingCaret.current, pendingCaret.current);\n        pendingCaret.current = null;\n    });\n\n    const keepInputRef = (input) => {\n        ownInputRef.current = input;\n        if (typeof inputRef === 'function') {\n            inputRef(input);\n        } else if (inputRef) {\n            inputRef.current = input;\n        }\n    };\n\n    const change = (typedText) => {\n        const caretPosition = ownInputRef.current?.selectionStart ?? typedText.length;\n        pendingCaret.current = caretPositionOf(typedText, caretPosition, pattern);\n        onChange(rawValueOf(typedText, pattern));\n    };\n\n    return (\n        <TextInput\n            {...knownProps}\n            value={maskedTextOf(value, pattern)}\n            onChange={change}\n            inputRef={keepInputRef}\n            slotProps={{\n                ...slotProps,\n                // OJO: sin maxLength. El navegador cortaría lo pegado ANTES de limpiarlo: «(555) 123-4567» trae 14 caracteres para\n                // un patrón de 12 y se perderían los últimos dígitos. El largo lo cuida la máscara\n                htmlInput: {\n                    inputMode: NUMERIC_ONLY.test(pattern) ? 'numeric' : 'text', autoCapitalize: 'characters', spellCheck: false,\n                    ...slotProps?.htmlInput,\n                },\n            }}\n        />\n    );\n}\n\n// lo que TextInput entiende; lo demás se avisa en la consola mientras se programa. uppercase y normalizeOnBlur no van: la\n// máscara ya decide cómo se escribe\nconst TEXT_INPUT_PROPS = new Set([\n    'name', 'label', 'onBlur', 'error', 'helperText', 'placeholder', 'startAdornment', 'endAdornment', 'clearable', 'autoComplete', 'autoFocus',\n    'disabled', 'required', 'fullWidth', 'id', 'sx', 'messages', 'texts',\n]);\n\n/**\n * @param {object} props\n * @returns {{knownProps: object, unknownProps: object}}\n */\nfunction splitTextInputProps(props) {\n    const knownProps = {};\n    const unknownProps = {};\n    for (const [key, propValue] of Object.entries(props)) {\n        (TEXT_INPUT_PROPS.has(key) ? knownProps : unknownProps)[key] = propValue;\n    }\n    return {knownProps, unknownProps};\n}\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,eAAe;AAqBrB,SAAwB,YAAY,EAAC,MAAM,OAAO,UAAU,UAAU,WAAW,GAAG,kBAAiB;AACjG,QAAM,EAAC,cAAc,eAAc,oBAAoB,cAAc;AACrE,mBAAiB,eAAe,YAAY;AAC5C,QAAM,UAAU,cAAc,IAAI;AAClC,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,eAAe,OAAO,IAAI;AAEhC,kBAAgB,MAAM;AAClB,UAAM,QAAQ,YAAY;AAC1B,QAAI,aAAa,YAAY,QAAQ,CAAC,SAAS,UAAU,MAAM,cAAc,eAAe;AACxF;AAAA,IACJ;AACA,UAAM,kBAAkB,aAAa,SAAS,aAAa,OAAO;AAClE,iBAAa,UAAU;AAAA,EAC3B,CAAC;AAED,QAAM,eAAe,CAAC,UAAU;AAC5B,gBAAY,UAAU;AACtB,QAAI,OAAO,aAAa,YAAY;AAChC,eAAS,KAAK;AAAA,IAClB,WAAW,UAAU;AACjB,eAAS,UAAU;AAAA,IACvB;AAAA,EACJ;AAEA,QAAM,SAAS,CAAC,cAAc;AAC1B,UAAM,gBAAgB,YAAY,SAAS,kBAAkB,UAAU;AACvE,iBAAa,UAAU,gBAAgB,WAAW,eAAe,OAAO;AACxE,aAAS,WAAW,WAAW,OAAO,CAAC;AAAA,EAC3C;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,OAAO,aAAa,OAAO,OAAO;AAAA,MAClC,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW;AAAA,QACP,GAAG;AAAA;AAAA;AAAA,QAGH,WAAW;AAAA,UACP,WAAW,aAAa,KAAK,OAAO,IAAI,YAAY;AAAA,UAAQ,gBAAgB;AAAA,UAAc,YAAY;AAAA,UACtG,GAAG,WAAW;AAAA,QAAA;AAAA,MAClB;AAAA,IACJ;AAAA,EAAA;AAGZ;AAIA,MAAM,uCAAuB,IAAI;AAAA,EAC7B;AAAA,EAAQ;AAAA,EAAS;AAAA,EAAU;AAAA,EAAS;AAAA,EAAc;AAAA,EAAe;AAAA,EAAkB;AAAA,EAAgB;AAAA,EAAa;AAAA,EAAgB;AAAA,EAChI;AAAA,EAAY;AAAA,EAAY;AAAA,EAAa;AAAA,EAAM;AAAA,EAAM;AAAA,EAAY;AACjE,CAAC;AAMD,SAAS,oBAAoB,OAAO;AAChC,QAAM,aAAa,CAAA;AACnB,QAAM,eAAe,CAAA;AACrB,aAAW,CAAC,KAAK,SAAS,KAAK,OAAO,QAAQ,KAAK,GAAG;AAClD,KAAC,iBAAiB,IAAI,GAAG,IAAI,aAAa,cAAc,GAAG,IAAI;AAAA,EACnE;AACA,SAAO,EAAC,YAAY,aAAA;AACxB;"}

package/dist/inputs/NumberInput.js

@@ -1,42 +1,46 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useId, useState } from "react";
-import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField from "@mui/material/TextField";
-import { translateValidationMessage } from "../forms/validationMessages.js";
+import { useValidationText } from "../forms/useValidationText.js";
 import FieldFrame from "./FieldFrame.js";
 import { groupThousands, completeDecimals, cleanNumberText } from "./numberText.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaNumberInput";
+const NumberInputField = piecePart(THEME_NAME, "Field", TextField);
 const SEPARATORS_ROOM = 6;
-function NumberInput({
-  name,
-  label,
-  value,
-  onChange,
-  onBlur,
-  error,
-  helperText = " ",
-  decimals = 2,
-  allowNegative = false,
-  prefix,
-  suffix,
-  maxDigits = 17,
-  disabled = false,
-  inputRef,
-  texts,
-  ...unknownProps
-}) {
-  warnUnknownProps("NumberInput", unknownProps);
-  const { t } = useToolkitTranslation("common", texts);
+function NumberInputContent(props) {
+  const {
+    name,
+    label,
+    value,
+    onChange,
+    onBlur,
+    error,
+    helperText = " ",
+    decimals = 2,
+    allowNegative = false,
+    prefix,
+    suffix,
+    maxDigits = 17,
+    disabled = false,
+    inputRef,
+    messages,
+    texts: unusedTexts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const validationTextOf = useValidationText({ name, label, messages });
   const generatedId = useId();
   const inputId = `${name ?? "number"}-${generatedId}`;
   const [isTyping, setIsTyping] = useState(false);
-  const errorText = translateValidationMessage(t, error);
+  const errorText = validationTextOf(error);
   const valueText = value === null || value === void 0 ? "" : String(value);
   const shownText = groupThousands(isTyping ? valueText : completeDecimals(valueText, decimals));
   return /* @__PURE__ */ jsx(FieldFrame, { inputId, label, children: /* @__PURE__ */ jsx(
-    TextField,
+    NumberInputField,
     {
       name,
       id: inputId,
@@ -78,6 +82,7 @@ function NumberInput({
     }
   ) });
 }
+const NumberInput = withPieceSlots(NumberInputContent, THEME_NAME);
 export {
   NumberInput as default
 };

package/dist/inputs/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sources":["../../src/inputs/NumberInput.jsx"],"sourcesContent":["// Campo de NÚMERO suelto: se escribe y se lee con separador de miles («2,850,000.50») y al formulario (y al servidor)\n// llega el texto limpio («2850000.50»), que es lo que lee Money.fromString sin pasar por decimales.\n//\n// Por qué no type=\"number\": pinta flechitas que nadie usa, no agrupa miles, acepta «e» y en el teléfono deja escribir\n// cosas raras. Este usa el teclado numérico (inputMode decimal) y alinea a la derecha, como en una hoja de cálculo.\n//\n// Mientras se escribe se respeta lo tecleado (no completa decimales a medias); al salir se completan con ceros.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport TextField from '@mui/material/TextField';\n\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {cleanNumberText, completeDecimals, groupThousands} from '@/inputs/numberText.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// lo que caben los separadores y el punto además de los dígitos\nconst SEPARATORS_ROOM = 6;\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|number|null|undefined} props.value el texto limpio ('2850000.50'); '' = vacío\n * @param {(value: string) => void} props.onChange recibe el texto limpio\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText]\n * @param {number} [props.decimals] por omisión 2\n * @param {boolean} [props.allowNegative]\n * @param {import('react').ReactNode} [props.prefix] p. ej. «$»\n * @param {import('react').ReactNode} [props.suffix] p. ej. «MXN» o «%»\n * @param {number} [props.maxDigits] tope de dígitos (por omisión 17)\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function NumberInput({\n    name, label, value, onChange, onBlur, error, helperText = ' ', decimals = 2, allowNegative = false, prefix, suffix, maxDigits = 17,\n    disabled = false, inputRef, texts,\n    ...unknownProps\n}) {\n    warnUnknownProps('NumberInput', unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const generatedId = useId();\n    const inputId = `${name ?? 'number'}-${generatedId}`;\n    const [isTyping, setIsTyping] = useState(false);\n    const errorText = translateValidationMessage(t, error);\n    const valueText = value === null || value === undefined ? '' : String(value);\n    // escribiendo: lo que hay; fuera del campo: con sus decimales completos\n    const shownText = groupThousands(isTyping ? valueText : completeDecimals(valueText, decimals));\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <TextField\n                name={name}\n                id={inputId}\n                inputRef={inputRef}\n                value={shownText}\n                disabled={disabled}\n                size=\"small\"\n                fullWidth\n                error={Boolean(errorText)}\n                helperText={errorText ?? helperText}\n                onFocus={(event) => {\n                    const input = event.target;\n                    // OJO: al entrar, el texto cambia («50,000.00» → «50,000») y el navegador pierde lo seleccionado; al entrar\n                    // con Tab estaba todo seleccionado y lo tecleado se pegaba al final (50,000,100,000). Si estaba todo\n                    // seleccionado, se vuelve a seleccionar ya pintado; con un clic (el cursor en un lugar) no se toca\n                    const wasAllSelected = input.value.length > 0 && input.selectionStart === 0 && input.selectionEnd === input.value.length;\n                    setIsTyping(true);\n                    if (wasAllSelected) {\n                        requestAnimationFrame(() => {\n                            if (document.activeElement === input) {\n                                input.select();\n                            }\n                        });\n                    }\n                }}\n                onChange={(event) => onChange(cleanNumberText(event.target.value, decimals, allowNegative))}\n                onBlur={() => {\n                    setIsTyping(false);\n                    const completedText = completeDecimals(cleanNumberText(valueText, decimals, allowNegative), decimals);\n                    if (completedText !== valueText) {\n                        onChange(completedText);\n                    }\n                    onBlur?.();\n                }}\n                slotProps={{\n                    htmlInput: {inputMode: 'decimal', maxLength: maxDigits + SEPARATORS_ROOM, style: {textAlign: 'right'}},\n                    input: {\n                        startAdornment: prefix ? <InputAdornment position=\"start\">{prefix}</InputAdornment> : undefined,\n                        endAdornment: suffix ? <InputAdornment position=\"end\">{suffix}</InputAdornment> : undefined,\n                    },\n                }}\n            />\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAoBA,MAAM,kBAAkB;AAoBxB,SAAwB,YAAY;AAAA,EAChC;AAAA,EAAM;AAAA,EAAO;AAAA,EAAO;AAAA,EAAU;AAAA,EAAQ;AAAA,EAAO,aAAa;AAAA,EAAK,WAAW;AAAA,EAAG,gBAAgB;AAAA,EAAO;AAAA,EAAQ;AAAA,EAAQ,YAAY;AAAA,EAChI,WAAW;AAAA,EAAO;AAAA,EAAU;AAAA,EAC5B,GAAG;AACP,GAAG;AACC,mBAAiB,eAAe,YAAY;AAC5C,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,GAAG,QAAQ,QAAQ,IAAI,WAAW;AAClD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,YAAY,2BAA2B,GAAG,KAAK;AACrD,QAAM,YAAY,UAAU,QAAQ,UAAU,SAAY,KAAK,OAAO,KAAK;AAE3E,QAAM,YAAY,eAAe,WAAW,YAAY,iBAAiB,WAAW,QAAQ,CAAC;AAE7F,SACI,oBAAC,YAAA,EAAW,SAAkB,OAC1B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,IAAI;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,MAAK;AAAA,MACL,WAAS;AAAA,MACT,OAAO,QAAQ,SAAS;AAAA,MACxB,YAAY,aAAa;AAAA,MACzB,SAAS,CAAC,UAAU;AAChB,cAAM,QAAQ,MAAM;AAIpB,cAAM,iBAAiB,MAAM,MAAM,SAAS,KAAK,MAAM,mBAAmB,KAAK,MAAM,iBAAiB,MAAM,MAAM;AAClH,oBAAY,IAAI;AAChB,YAAI,gBAAgB;AAChB,gCAAsB,MAAM;AACxB,gBAAI,SAAS,kBAAkB,OAAO;AAClC,oBAAM,OAAA;AAAA,YACV;AAAA,UACJ,CAAC;AAAA,QACL;AAAA,MACJ;AAAA,MACA,UAAU,CAAC,UAAU,SAAS,gBAAgB,MAAM,OAAO,OAAO,UAAU,aAAa,CAAC;AAAA,MAC1F,QAAQ,MAAM;AACV,oBAAY,KAAK;AACjB,cAAM,gBAAgB,iBAAiB,gBAAgB,WAAW,UAAU,aAAa,GAAG,QAAQ;AACpG,YAAI,kBAAkB,WAAW;AAC7B,mBAAS,aAAa;AAAA,QAC1B;AACA,iBAAA;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACP,WAAW,EAAC,WAAW,WAAW,WAAW,YAAY,iBAAiB,OAAO,EAAC,WAAW,UAAO;AAAA,QACpG,OAAO;AAAA,UACH,gBAAgB,SAAS,oBAAC,kBAAe,UAAS,SAAS,kBAAO,IAAoB;AAAA,UACtF,cAAc,SAAS,oBAAC,kBAAe,UAAS,OAAO,kBAAO,IAAoB;AAAA,QAAA;AAAA,MACtF;AAAA,IACJ;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"NumberInput.js","sources":["../../src/inputs/NumberInput.jsx"],"sourcesContent":["// Campo de NÚMERO suelto: se escribe y se lee con separador de miles («2,850,000.50») y al formulario (y al servidor)\n// llega el texto limpio («2850000.50»), que es lo que lee Money.fromString sin pasar por decimales.\n//\n// Por qué no type=\"number\": pinta flechitas que nadie usa, no agrupa miles, acepta «e» y en el teléfono deja escribir\n// cosas raras. Este usa el teclado numérico (inputMode decimal) y alinea a la derecha, como en una hoja de cálculo.\n//\n// Mientras se escribe se respeta lo tecleado (no completa decimales a medias); al salir se completan con ceros.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaNumberInput con defaultProps, styleOverrides de\n// sus partes (field) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useState} from 'react';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport TextField from '@mui/material/TextField';\n\nimport {useValidationText} from '@/forms/useValidationText.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {cleanNumberText, completeDecimals, groupThousands} from '@/inputs/numberText.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.CalcitaNumberInput)\nconst THEME_NAME = 'CalcitaNumberInput';\nconst NumberInputField = piecePart(THEME_NAME, 'Field', TextField);\n\n// lo que caben los separadores y el punto además de los dígitos\nconst SEPARATORS_ROOM = 6;\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|number|null|undefined} props.value el texto limpio ('2850000.50'); '' = vacío\n * @param {(value: string) => void} props.onChange recibe el texto limpio\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText]\n * @param {number} [props.decimals] por omisión 2\n * @param {boolean} [props.allowNegative]\n * @param {import('react').ReactNode} [props.prefix] p. ej. «$»\n * @param {import('react').ReactNode} [props.suffix] p. ej. «MXN» o «%»\n * @param {number} [props.maxDigits] tope de dígitos (por omisión 17)\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación\n *     ({required: 'Escriba el RFC', matches: 'El RFC lleva 12 o 13 caracteres'}): gana al de Calcita y al de los textos\n * @param {object} [props.texts] se acepta como en los demás campos; este no tiene textos propios (su error usa `messages`)\n */\nfunction NumberInputContent(props) {\n    const {\n        name, label, value, onChange, onBlur, error, helperText = ' ', decimals = 2, allowNegative = false, prefix, suffix, maxDigits = 17,\n        disabled = false, inputRef, messages, texts: unusedTexts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    // el texto del error: el de la pantalla (messages), el del proyecto para este campo o el de Calcita\n    const validationTextOf = useValidationText({name, label, messages});\n    const generatedId = useId();\n    const inputId = `${name ?? 'number'}-${generatedId}`;\n    const [isTyping, setIsTyping] = useState(false);\n    const errorText = validationTextOf(error);\n    const valueText = value === null || value === undefined ? '' : String(value);\n    // escribiendo: lo que hay; fuera del campo: con sus decimales completos\n    const shownText = groupThousands(isTyping ? valueText : completeDecimals(valueText, decimals));\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <NumberInputField\n                name={name}\n                id={inputId}\n                inputRef={inputRef}\n                value={shownText}\n                disabled={disabled}\n                size=\"small\"\n                fullWidth\n                error={Boolean(errorText)}\n                helperText={errorText ?? helperText}\n                onFocus={(event) => {\n                    const input = event.target;\n                    // OJO: al entrar, el texto cambia («50,000.00» → «50,000») y el navegador pierde lo seleccionado; al entrar\n                    // con Tab estaba todo seleccionado y lo tecleado se pegaba al final (50,000,100,000). Si estaba todo\n                    // seleccionado, se vuelve a seleccionar ya pintado; con un clic (el cursor en un lugar) no se toca\n                    const wasAllSelected = input.value.length > 0 && input.selectionStart === 0 && input.selectionEnd === input.value.length;\n                    setIsTyping(true);\n                    if (wasAllSelected) {\n                        requestAnimationFrame(() => {\n                            if (document.activeElement === input) {\n                                input.select();\n                            }\n                        });\n                    }\n                }}\n                onChange={(event) => onChange(cleanNumberText(event.target.value, decimals, allowNegative))}\n                onBlur={() => {\n                    setIsTyping(false);\n                    const completedText = completeDecimals(cleanNumberText(valueText, decimals, allowNegative), decimals);\n                    if (completedText !== valueText) {\n                        onChange(completedText);\n                    }\n                    onBlur?.();\n                }}\n                slotProps={{\n                    htmlInput: {inputMode: 'decimal', maxLength: maxDigits + SEPARATORS_ROOM, style: {textAlign: 'right'}},\n                    input: {\n                        startAdornment: prefix ? <InputAdornment position=\"start\">{prefix}</InputAdornment> : undefined,\n                        endAdornment: suffix ? <InputAdornment position=\"end\">{suffix}</InputAdornment> : undefined,\n                    },\n                }}\n            />\n        </FieldFrame>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst NumberInput = withPieceSlots(NumberInputContent, THEME_NAME);\nexport default NumberInput;\n"],"names":[],"mappings":";;;;;;;;;;AAuBA,MAAM,aAAa;AACnB,MAAM,mBAAmB,UAAU,YAAY,SAAS,SAAS;AAGjE,MAAM,kBAAkB;AAsBxB,SAAS,mBAAmB,OAAO;AAC/B,QAAM;AAAA,IACF;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAO,aAAa;AAAA,IAAK,WAAW;AAAA,IAAG,gBAAgB;AAAA,IAAO;AAAA,IAAQ;AAAA,IAAQ,YAAY;AAAA,IAChI,WAAW;AAAA,IAAO;AAAA,IAAU;AAAA,IAAU,OAAO;AAAA,IAC7C,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AACnC,mBAAiB,YAAY,YAAY;AAEzC,QAAM,mBAAmB,kBAAkB,EAAC,MAAM,OAAO,UAAS;AAClE,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,GAAG,QAAQ,QAAQ,IAAI,WAAW;AAClD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,YAAY,iBAAiB,KAAK;AACxC,QAAM,YAAY,UAAU,QAAQ,UAAU,SAAY,KAAK,OAAO,KAAK;AAE3E,QAAM,YAAY,eAAe,WAAW,YAAY,iBAAiB,WAAW,QAAQ,CAAC;AAE7F,SACI,oBAAC,YAAA,EAAW,SAAkB,OAC1B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,IAAI;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,MAAK;AAAA,MACL,WAAS;AAAA,MACT,OAAO,QAAQ,SAAS;AAAA,MACxB,YAAY,aAAa;AAAA,MACzB,SAAS,CAAC,UAAU;AAChB,cAAM,QAAQ,MAAM;AAIpB,cAAM,iBAAiB,MAAM,MAAM,SAAS,KAAK,MAAM,mBAAmB,KAAK,MAAM,iBAAiB,MAAM,MAAM;AAClH,oBAAY,IAAI;AAChB,YAAI,gBAAgB;AAChB,gCAAsB,MAAM;AACxB,gBAAI,SAAS,kBAAkB,OAAO;AAClC,oBAAM,OAAA;AAAA,YACV;AAAA,UACJ,CAAC;AAAA,QACL;AAAA,MACJ;AAAA,MACA,UAAU,CAAC,UAAU,SAAS,gBAAgB,MAAM,OAAO,OAAO,UAAU,aAAa,CAAC;AAAA,MAC1F,QAAQ,MAAM;AACV,oBAAY,KAAK;AACjB,cAAM,gBAAgB,iBAAiB,gBAAgB,WAAW,UAAU,aAAa,GAAG,QAAQ;AACpG,YAAI,kBAAkB,WAAW;AAC7B,mBAAS,aAAa;AAAA,QAC1B;AACA,iBAAA;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACP,WAAW,EAAC,WAAW,WAAW,WAAW,YAAY,iBAAiB,OAAO,EAAC,WAAW,UAAO;AAAA,QACpG,OAAO;AAAA,UACH,gBAAgB,SAAS,oBAAC,kBAAe,UAAS,SAAS,kBAAO,IAAoB;AAAA,UACtF,cAAc,SAAS,oBAAC,kBAAe,UAAS,OAAO,kBAAO,IAAoB;AAAA,QAAA;AAAA,MACtF;AAAA,IACJ;AAAA,EAAA,GAER;AAER;AAGA,MAAM,cAAc,eAAe,oBAAoB,UAAU;"}