@stackcraftmx/calcita 0.32.1 → 0.47.0

package/dist/inputs/CheckboxGroupInput.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+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 FieldFrame from "./FieldFrame.js";
+import { selectAllStateOf } from "./selectAllState.js";
+import { piecePart, 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) {
+  const {
+    name,
+    label,
+    value,
+    onChange,
+    onBlur,
+    options,
+    row = false,
+    selectAll = false,
+    error,
+    helperText = " ",
+    disabled = false,
+    sx,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const generatedId = useId();
+  const groupId = `${name ?? "checkbox-group"}-${generatedId}`;
+  const labelId = `${groupId}-label`;
+  const errorText = translateValidationMessage(t, 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));
+  const change = (values) => {
+    onChange(inOptionsOrder(values));
+    onBlur?.();
+  };
+  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: [
+      selectAll && /* @__PURE__ */ jsx(
+        CheckboxGroupSelectAll,
+        {
+          disabled,
+          label: selectAllState.allChosen ? t("form.unselectAll") : t("form.selectAll", { count: options.length }),
+          control: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size: "small",
+              checked: selectAllState.allChosen,
+              indeterminate: selectAllState.someChosen,
+              onChange: () => change(selectAllState.toggled())
+            }
+          ),
+          ownSx: { "& .MuiFormControlLabel-label": { fontWeight: 600 } }
+        }
+      ),
+      options.map((option, index) => /* @__PURE__ */ jsx(
+        CheckboxGroupOption,
+        {
+          disabled: disabled || option.disabled,
+          ownSx: { alignItems: option.description ? "flex-start" : "center" },
+          control: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size: "small",
+              name,
+              id: index === 0 ? `${groupId}-first` : void 0,
+              checked: checkedValues.includes(option.value),
+              onChange: () => toggle(option.value),
+              sx: option.description ? { mt: -0.5 } : void 0
+            }
+          ),
+          label: option.description ? /* @__PURE__ */ jsxs(Stack, { component: "span", children: [
+            /* @__PURE__ */ jsx(Typography, { component: "span", variant: "body2", children: option.label }),
+            /* @__PURE__ */ jsx(Typography, { component: "span", variant: "caption", color: "text.secondary", children: option.description })
+          ] }) : option.label
+        },
+        option.value
+      ))
+    ] }),
+    /* @__PURE__ */ jsx(FormHelperText, { error: Boolean(errorText), children: errorText ?? helperText })
+  ] }) });
+}
+export {
+  CheckboxGroupInput as default
+};
+//# sourceMappingURL=CheckboxGroupInput.js.map

package/dist/inputs/CheckboxGroupInput.js.map

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

package/dist/inputs/MaskedInput.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useLayoutEffect } from "react";
+import { maskPatternOf, maskedTextOf, caretPositionOf, rawValueOf } from "./inputMasks.js";
+import TextInput from "./TextInput.js";
+import { warnUnknownProps } from "../toolkit/unknownProps.js";
+const NUMERIC_ONLY = /^[^AXH]*$/;
+function MaskedInput({ mask, value, onChange, inputRef, slotProps, ...textInputProps }) {
+  const { unknownProps, knownProps } = splitTextInputProps(textInputProps);
+  warnUnknownProps("MaskedInput", unknownProps);
+  const pattern = maskPatternOf(mask);
+  const ownInputRef = useRef(null);
+  const pendingCaret = useRef(null);
+  useLayoutEffect(() => {
+    const input = ownInputRef.current;
+    if (pendingCaret.current === null || !input || input !== input.ownerDocument.activeElement) {
+      return;
+    }
+    input.setSelectionRange(pendingCaret.current, pendingCaret.current);
+    pendingCaret.current = null;
+  });
+  const keepInputRef = (input) => {
+    ownInputRef.current = input;
+    if (typeof inputRef === "function") {
+      inputRef(input);
+    } else if (inputRef) {
+      inputRef.current = input;
+    }
+  };
+  const change = (typedText) => {
+    const caretPosition = ownInputRef.current?.selectionStart ?? typedText.length;
+    pendingCaret.current = caretPositionOf(typedText, caretPosition, pattern);
+    onChange(rawValueOf(typedText, pattern));
+  };
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      ...knownProps,
+      value: maskedTextOf(value, pattern),
+      onChange: change,
+      inputRef: keepInputRef,
+      slotProps: {
+        ...slotProps,
+        // OJO: sin maxLength. El navegador cortaría lo pegado ANTES de limpiarlo: «(555) 123-4567» trae 14 caracteres para
+        // un patrón de 12 y se perderían los últimos dígitos. El largo lo cuida la máscara
+        htmlInput: {
+          inputMode: NUMERIC_ONLY.test(pattern) ? "numeric" : "text",
+          autoCapitalize: "characters",
+          spellCheck: false,
+          ...slotProps?.htmlInput
+        }
+      }
+    }
+  );
+}
+const TEXT_INPUT_PROPS = /* @__PURE__ */ new Set([
+  "name",
+  "label",
+  "onBlur",
+  "error",
+  "helperText",
+  "placeholder",
+  "startAdornment",
+  "endAdornment",
+  "clearable",
+  "autoComplete",
+  "autoFocus",
+  "disabled",
+  "required",
+  "fullWidth",
+  "id",
+  "sx",
+  "texts"
+]);
+function splitTextInputProps(props) {
+  const knownProps = {};
+  const unknownProps = {};
+  for (const [key, propValue] of Object.entries(props)) {
+    (TEXT_INPUT_PROPS.has(key) ? knownProps : unknownProps)[key] = propValue;
+  }
+  return { knownProps, unknownProps };
+}
+export {
+  MaskedInput as default
+};
+//# sourceMappingURL=MaskedInput.js.map

package/dist/inputs/MaskedInput.js.map

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

package/dist/inputs/NumberInput.js

@@ -47,7 +47,18 @@ function NumberInput({
       fullWidth: true,
       error: Boolean(errorText),
       helperText: errorText ?? helperText,
-      onFocus: () => setIsTyping(true),
+      onFocus: (event) => {
+        const input = event.target;
+        const wasAllSelected = input.value.length > 0 && input.selectionStart === 0 && input.selectionEnd === input.value.length;
+        setIsTyping(true);
+        if (wasAllSelected) {
+          requestAnimationFrame(() => {
+            if (document.activeElement === input) {
+              input.select();
+            }
+          });
+        }
+      },
       onChange: (event) => onChange(cleanNumberText(event.target.value, decimals, allowNegative)),
       onBlur: () => {
         setIsTyping(false);

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={() => setIsTyping(true)}\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,MAAM,YAAY,IAAI;AAAA,MAC/B,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// 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;"}

package/dist/inputs/RepeatingFields.js

@@ -0,0 +1,177 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useId } from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import FormHelperText from "@mui/material/FormHelperText";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import AddRoundedIcon from "@mui/icons-material/AddRounded";
+import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
+import RestartAltRoundedIcon from "@mui/icons-material/RestartAltRounded";
+import ConfirmDialog from "../feedback/ConfirmDialog.js";
+import { translateValidationMessage } from "../forms/validationMessages.js";
+import { FormSectionContext } from "./formLayoutContext.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../toolkit/unknownProps.js";
+const DEFAULT_COLUMNS = Object.freeze({ xs: 1, sm: 2, md: 3 });
+const THEME_NAME = "CalcitaRepeatingFields";
+const RepeatingRoot = piecePart(THEME_NAME, "Root", Stack);
+const RepeatingRow = piecePart(THEME_NAME, "Row", Paper);
+const RepeatingRowHeader = piecePart(THEME_NAME, "RowHeader", Stack);
+const RepeatingRowContent = piecePart(THEME_NAME, "RowContent", Box);
+const RepeatingAddButton = piecePart(THEME_NAME, "AddButton", Button);
+const RepeatingHelper = piecePart(THEME_NAME, "Helper", FormHelperText);
+function gridColumnsOf(columns) {
+  const templateOf = (count) => `repeat(${count}, minmax(0, 1fr))`;
+  if (typeof columns === "number") {
+    return templateOf(columns);
+  }
+  return Object.fromEntries(Object.entries(columns).map(([breakpoint, count]) => [breakpoint, templateOf(count)]));
+}
+function RepeatingFields(props) {
+  const {
+    label,
+    rowKeys,
+    renderRow,
+    rowLabelOf,
+    rowActionsOf,
+    columns = DEFAULT_COLUMNS,
+    minRows = 1,
+    maxRows = null,
+    onAdd,
+    onRemove,
+    onClear,
+    removeBlockedReasonOf,
+    confirmRemoveOf,
+    rowHasErrorOf,
+    error,
+    helperText,
+    footer,
+    addLabel,
+    disabled = false,
+    sx,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const [pendingRemoval, setPendingRemoval] = useState(null);
+  const blockedTitleId = `${useId()}-blocked-title`;
+  const rowCount = rowKeys.length;
+  const isAtMinimum = rowCount <= minRows;
+  const isAtMaximum = maxRows != null && rowCount >= maxRows;
+  const errorText = translateValidationMessage(t, error);
+  const titleOf = (index) => rowLabelOf?.(index) ?? t("repeating.row", { number: index + 1 });
+  const requestRemove = (index) => {
+    const blockedReason = removeBlockedReasonOf?.(index) ?? null;
+    if (blockedReason) {
+      setPendingRemoval({ index, kind: "blocked", reason: blockedReason });
+      return;
+    }
+    if (confirmRemoveOf?.(index)) {
+      setPendingRemoval({ index, kind: "confirm" });
+      return;
+    }
+    removeOrClear(index);
+  };
+  const removeOrClear = (index) => {
+    if (isAtMinimum) {
+      onClear(index);
+    } else {
+      onRemove(index);
+    }
+  };
+  return /* @__PURE__ */ jsxs(RepeatingRoot, { spacing: 1.5, ownSx: { minWidth: 0, ...sx }, children: [
+    label && /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", component: "h3", children: label }),
+    rowKeys.map((rowKey, index) => {
+      const removeText = isAtMinimum ? t("repeating.clear", { row: titleOf(index) }) : t("repeating.remove", { row: titleOf(index) });
+      return /* @__PURE__ */ jsxs(
+        RepeatingRow,
+        {
+          variant: "outlined",
+          role: "group",
+          "aria-label": titleOf(index),
+          ownSx: { p: { xs: 1.5, sm: 2 }, ...rowHasErrorOf?.(index) && { borderColor: "error.main" } },
+          children: [
+            /* @__PURE__ */ jsxs(RepeatingRowHeader, { direction: "row", ownSx: { alignItems: "center", gap: 1, mb: 1.5 }, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", sx: { flexGrow: 1, minWidth: 0 }, color: rowHasErrorOf?.(index) ? "error" : "text.primary", children: titleOf(index) }),
+              rowActionsOf?.(index),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  color: "inherit",
+                  disabled,
+                  onClick: () => requestRemove(index),
+                  "aria-label": removeText,
+                  startIcon: isAtMinimum ? /* @__PURE__ */ jsx(RestartAltRoundedIcon, {}) : /* @__PURE__ */ jsx(DeleteOutlineRoundedIcon, {}),
+                  children: isAtMinimum ? t("repeating.clearShort") : t("repeating.removeShort")
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(FormSectionContext.Provider, { value: false, children: /* @__PURE__ */ jsx(RepeatingRowContent, { ownSx: { display: "grid", gap: 2, gridTemplateColumns: gridColumnsOf(columns), alignItems: "start" }, children: renderRow(index) }) })
+          ]
+        },
+        rowKey
+      );
+    }),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { alignItems: "center", gap: 2, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx(
+        RepeatingAddButton,
+        {
+          variant: "outlined",
+          startIcon: /* @__PURE__ */ jsx(AddRoundedIcon, {}),
+          onClick: onAdd,
+          disabled: disabled || isAtMaximum,
+          ownSx: { alignSelf: "flex-start" },
+          children: addLabel ?? t("repeating.add")
+        }
+      ),
+      maxRows != null && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("repeating.maxRows", { count: maxRows }) }),
+      footer
+    ] }),
+    (errorText || helperText) && /* @__PURE__ */ jsx(RepeatingHelper, { error: Boolean(errorText), role: errorText ? "alert" : void 0, ownSx: { mx: 0 }, children: errorText ?? helperText }),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: pendingRemoval?.kind === "confirm",
+        title: t("repeating.confirmTitle", { row: pendingRemoval ? titleOf(pendingRemoval.index) : "" }),
+        description: t("repeating.confirmText"),
+        confirmLabel: t("repeating.removeShort"),
+        tone: "error",
+        onConfirm: () => {
+          removeOrClear(pendingRemoval.index);
+          setPendingRemoval(null);
+        },
+        onClose: () => setPendingRemoval(null),
+        texts
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open: pendingRemoval?.kind === "blocked",
+        onClose: () => setPendingRemoval(null),
+        maxWidth: "xs",
+        fullWidth: true,
+        "aria-labelledby": blockedTitleId,
+        children: [
+          /* @__PURE__ */ jsx(DialogTitle, { id: blockedTitleId, children: t("repeating.blockedTitle") }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Typography, { children: pendingRemoval?.reason }) }),
+          /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: () => setPendingRemoval(null), autoFocus: true, children: t("repeating.understood") }) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  RepeatingFields as default
+};
+//# sourceMappingURL=RepeatingFields.js.map

package/dist/inputs/RepeatingFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RepeatingFields.js","sources":["../../src/inputs/RepeatingFields.jsx"],"sourcesContent":["// Renglones de campos que se repiten (los contactos de un cliente, los precios por volumen, el reparto de un presupuesto):\n// cada renglón con su número y «Quitar», y «Agregar» al final. Es solo la VISTA: los renglones los guarda el formulario\n// (FormRepeatingFields de formik o de react-hook-form los conecta por name).\n//\n// Reglas de la vista:\n//   - minRows (por omisión 1): con el mínimo, «Quitar» se vuelve «Limpiar» y deja el renglón vacío (nunca queda la\n//     lista sin renglones para escribir);\n//   - maxRows: con el máximo, «Agregar» se apaga y dice hasta cuántos;\n//   - quitar un renglón lo decide la pantalla: removeBlockedReasonOf(index) da el motivo si NO se puede (sale en una\n//     ventana con «Entendido»), y confirmRemoveOf(index) pide confirmar antes (un renglón ya guardado);\n//   - el renglón con un error se marca en rojo, para encontrarlo en una lista larga.\n//\n// En escritorio los campos de un renglón van lado a lado (columns); en el teléfono, uno debajo de otro, como tarjetas.\n// Dentro de un renglón los campos van con su etiqueta arriba aunque la lista esté dentro de una FormSection.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaRepeatingFields con defaultProps y\n// styleOverrides de sus partes: root, row, rowHeader, rowContent, addButton, helper.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport AddRoundedIcon from '@mui/icons-material/AddRounded';\nimport DeleteOutlineRoundedIcon from '@mui/icons-material/DeleteOutlineRounded';\nimport RestartAltRoundedIcon from '@mui/icons-material/RestartAltRounded';\n\nimport ConfirmDialog from '@/feedback/ConfirmDialog.jsx';\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport {FormSectionContext} from '@/inputs/formLayoutContext.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// por omisión: uno en el teléfono, dos en tableta, tres en escritorio\nconst DEFAULT_COLUMNS = Object.freeze({xs: 1, sm: 2, md: 3});\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaRepeatingFields)\nconst THEME_NAME = 'CalcitaRepeatingFields';\nconst RepeatingRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst RepeatingRow = piecePart(THEME_NAME, 'Row', Paper);\nconst RepeatingRowHeader = piecePart(THEME_NAME, 'RowHeader', Stack);\nconst RepeatingRowContent = piecePart(THEME_NAME, 'RowContent', Box);\nconst RepeatingAddButton = piecePart(THEME_NAME, 'AddButton', Button);\nconst RepeatingHelper = piecePart(THEME_NAME, 'Helper', FormHelperText);\n\n/**\n * El número de columnas de la rejilla como CSS: {xs: 1, md: 3} → {xs: 'repeat(1, minmax(0, 1fr))', …}.\n *\n * @param {number|Record<string, number>} columns\n * @returns {string|Record<string, string>}\n */\nfunction gridColumnsOf(columns) {\n    const templateOf = (count) => `repeat(${count}, minmax(0, 1fr))`;\n    if (typeof columns === 'number') {\n        return templateOf(columns);\n    }\n    return Object.fromEntries(Object.entries(columns).map(([breakpoint, count]) => [breakpoint, templateOf(count)]));\n}\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} [props.label] ya traducido: el título de la lista («Contactos»)\n * @param {string[]} props.rowKeys una llave estable por renglón (no el índice: al quitar uno, los de abajo no deben\n *     confundirse con el que se fue)\n * @param {(index: number) => import('react').ReactNode} props.renderRow los campos del renglón\n * @param {(index: number) => string} [props.rowLabelOf] el título de cada renglón; por omisión «Renglón 1», «Renglón 2»…\n * @param {(index: number) => import('react').ReactNode} [props.rowActionsOf] botones suyos en el título del renglón\n * @param {number|Record<string, number>} [props.columns] cuántos campos lado a lado: 2 o {xs: 1, sm: 2, md: 3}\n * @param {number} [props.minRows] cuántos renglones quedan siempre (por omisión 1); con 0 se puede quedar vacía\n * @param {number|null} [props.maxRows] hasta cuántos; sin él, los que quiera\n * @param {() => void} props.onAdd agrega un renglón vacío al final\n * @param {(index: number) => void} props.onRemove quita ese renglón\n * @param {(index: number) => void} props.onClear deja ese renglón vacío (cuando ya no se puede quitar por el mínimo)\n * @param {(index: number) => string|null} [props.removeBlockedReasonOf] si ese renglón NO se puede quitar, el motivo ya\n *     traducido (sale en una ventana)\n * @param {(index: number) => boolean} [props.confirmRemoveOf] true si hay que confirmar antes de quitarlo\n * @param {(index: number) => boolean} [props.rowHasErrorOf] true si el renglón tiene un error (se marca en rojo)\n * @param {string|{key: string, values?: object}} [props.error] el error de toda la lista (la suma no alcanza, faltan renglones)\n * @param {import('react').ReactNode} [props.helperText] ya traducida\n * @param {import('react').ReactNode} [props.footer] lo que va junto a «Agregar» (p. ej. «Suman $40,000 de $50,000»)\n * @param {string} [props.addLabel] ya traducido; por omisión «Agregar»\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 RepeatingFields(props) {\n    const {\n        label, rowKeys, renderRow, rowLabelOf, rowActionsOf, columns = DEFAULT_COLUMNS, minRows = 1, maxRows = null, onAdd, onRemove,\n        onClear, removeBlockedReasonOf, confirmRemoveOf, rowHasErrorOf, error, helperText, footer, addLabel, disabled = false, sx, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    // el renglón que se va a quitar y por qué se pregunta: {index, kind: 'confirm' | 'blocked', reason}\n    const [pendingRemoval, setPendingRemoval] = useState(null);\n    const blockedTitleId = `${useId()}-blocked-title`;\n    const rowCount = rowKeys.length;\n    const isAtMinimum = rowCount <= minRows;\n    const isAtMaximum = maxRows != null && rowCount >= maxRows;\n    const errorText = translateValidationMessage(t, error);\n    const titleOf = (index) => rowLabelOf?.(index) ?? t('repeating.row', {number: index + 1});\n\n    // quitar (o limpiar, si ya está en el mínimo): primero lo que diga la pantalla\n    const requestRemove = (index) => {\n        const blockedReason = removeBlockedReasonOf?.(index) ?? null;\n        if (blockedReason) {\n            setPendingRemoval({index, kind: 'blocked', reason: blockedReason});\n            return;\n        }\n        if (confirmRemoveOf?.(index)) {\n            setPendingRemoval({index, kind: 'confirm'});\n            return;\n        }\n        removeOrClear(index);\n    };\n    const removeOrClear = (index) => {\n        if (isAtMinimum) {\n            onClear(index);\n        } else {\n            onRemove(index);\n        }\n    };\n\n    return (\n        <RepeatingRoot spacing={1.5} ownSx={{minWidth: 0, ...sx}}>\n            {label && <Typography variant=\"subtitle2\" component=\"h3\">{label}</Typography>}\n            {rowKeys.map((rowKey, index) => {\n                const removeText = isAtMinimum ? t('repeating.clear', {row: titleOf(index)}) : t('repeating.remove', {row: titleOf(index)});\n                return (\n                    <RepeatingRow\n                        key={rowKey}\n                        variant=\"outlined\"\n                        role=\"group\"\n                        aria-label={titleOf(index)}\n                        ownSx={{p: {xs: 1.5, sm: 2}, ...(rowHasErrorOf?.(index) && {borderColor: 'error.main'})}}\n                    >\n                        <RepeatingRowHeader direction=\"row\" ownSx={{alignItems: 'center', gap: 1, mb: 1.5}}>\n                            <Typography variant=\"subtitle2\" sx={{flexGrow: 1, minWidth: 0}} color={rowHasErrorOf?.(index) ? 'error' : 'text.primary'}>\n                                {titleOf(index)}\n                            </Typography>\n                            {rowActionsOf?.(index)}\n                            <Button size=\"small\" color=\"inherit\" disabled={disabled} onClick={() => requestRemove(index)} aria-label={removeText}\n                                    startIcon={isAtMinimum ? <RestartAltRoundedIcon /> : <DeleteOutlineRoundedIcon />}>\n                                {isAtMinimum ? t('repeating.clearShort') : t('repeating.removeShort')}\n                            </Button>\n                        </RepeatingRowHeader>\n                        {/* los campos del renglón llevan su etiqueta arriba aunque la lista esté dentro de una FormSection */}\n                        <FormSectionContext.Provider value={false}>\n                            <RepeatingRowContent ownSx={{display: 'grid', gap: 2, gridTemplateColumns: gridColumnsOf(columns), alignItems: 'start'}}>\n                                {renderRow(index)}\n                            </RepeatingRowContent>\n                        </FormSectionContext.Provider>\n                    </RepeatingRow>\n                );\n            })}\n            <Stack direction=\"row\" sx={{alignItems: 'center', gap: 2, flexWrap: 'wrap'}}>\n                <RepeatingAddButton variant=\"outlined\" startIcon={<AddRoundedIcon />} onClick={onAdd} disabled={disabled || isAtMaximum}\n                                    ownSx={{alignSelf: 'flex-start'}}>\n                    {addLabel ?? t('repeating.add')}\n                </RepeatingAddButton>\n                {maxRows != null && (\n                    <Typography variant=\"caption\" color=\"text.secondary\">{t('repeating.maxRows', {count: maxRows})}</Typography>\n                )}\n                {footer}\n            </Stack>\n            {(errorText || helperText) && (\n                <RepeatingHelper error={Boolean(errorText)} role={errorText ? 'alert' : undefined} ownSx={{mx: 0}}>\n                    {errorText ?? helperText}\n                </RepeatingHelper>\n            )}\n\n            <ConfirmDialog\n                open={pendingRemoval?.kind === 'confirm'}\n                title={t('repeating.confirmTitle', {row: pendingRemoval ? titleOf(pendingRemoval.index) : ''})}\n                description={t('repeating.confirmText')}\n                confirmLabel={t('repeating.removeShort')}\n                tone=\"error\"\n                onConfirm={() => {\n                    removeOrClear(pendingRemoval.index);\n                    setPendingRemoval(null);\n                }}\n                onClose={() => setPendingRemoval(null)}\n                texts={texts}\n            />\n            <Dialog open={pendingRemoval?.kind === 'blocked'} onClose={() => setPendingRemoval(null)} maxWidth=\"xs\" fullWidth\n                    aria-labelledby={blockedTitleId}>\n                <DialogTitle id={blockedTitleId}>{t('repeating.blockedTitle')}</DialogTitle>\n                <DialogContent><Typography>{pendingRemoval?.reason}</Typography></DialogContent>\n                <DialogActions>\n                    <Button variant=\"contained\" onClick={() => setPendingRemoval(null)} autoFocus>{t('repeating.understood')}</Button>\n                </DialogActions>\n            </Dialog>\n        </RepeatingRoot>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/inputs/SelectInput.js

@@ -3,16 +3,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import Box from "@mui/material/Box";
+import Checkbox from "@mui/material/Checkbox";
 import MenuItem from "@mui/material/MenuItem";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import { translateValidationMessage } from "../forms/validationMessages.js";
 import FieldFrame from "./FieldFrame.js";
+import { selectAllStateOf } from "./selectAllState.js";
 import { piecePart, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaSelectInput";
 const SelectOption = piecePart(THEME_NAME, "Option", MenuItem);
 const SelectOptionText = piecePart(THEME_NAME, "OptionText", Box);
+const SELECT_ALL_VALUE = "__calcita_select_all__";
+const WITHOUT_CHECKMARK = Object.freeze({ "&.Mui-selected::after": { content: "none" } });
 function SelectInput(props) {
   const {
     name,
@@ -27,6 +31,8 @@ function SelectInput(props) {
     disabled = false,
     inputRef,
     multiple = false,
+    selectAll = false,
+    checkboxes = false,
     texts,
     ...unknownProps
   } = usePieceProps(props, THEME_NAME);
@@ -52,9 +58,15 @@ function SelectInput(props) {
     return options.find((option) => option.value === selectedValue)?.label ?? placeholderText;
   };
   const currentValue = multiple ? Array.isArray(value) ? value : [] : value ?? "";
+  const selectAllState = selectAllStateOf(currentValue, options.filter((option) => !option.disabled).map((option) => option.value));
   const handleChange = (event) => {
     const nextValue = event.target.value;
-    onChange(multiple && typeof nextValue === "string" ? nextValue.split(",") : nextValue);
+    const values = multiple && typeof nextValue === "string" ? nextValue.split(",") : nextValue;
+    if (multiple && values.includes(SELECT_ALL_VALUE)) {
+      onChange(selectAllState.toggled());
+      return;
+    }
+    onChange(values);
   };
   return /* @__PURE__ */ jsx(FieldFrame, { inputId, labelId, label, children: /* @__PURE__ */ jsxs(
     TextField,
@@ -74,13 +86,39 @@ function SelectInput(props) {
       slotProps: { select: { multiple, displayEmpty: true, renderValue: renderSelectedValue, labelId } },
       children: [
         !multiple && /* @__PURE__ */ jsx(MenuItem, { value: "", disabled: true, children: placeholderText }),
+        multiple && selectAll && /* @__PURE__ */ jsxs(SelectOption, { value: SELECT_ALL_VALUE, ownSx: { fontWeight: 600, ...WITHOUT_CHECKMARK }, children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size: "small",
+              tabIndex: -1,
+              disableRipple: true,
+              sx: { p: 0, mr: 1 },
+              checked: selectAllState.allChosen,
+              indeterminate: selectAllState.someChosen
+            }
+          ),
+          selectAllState.allChosen ? t("form.unselectAll") : t("form.selectAll", { count: options.length })
+        ] }),
         options.map((option) => (
           // la opción en renglón y su nombre con su explicación en un bloque: con la opción en columna, la palomita del
           // elegido (el tema la pinta al final) se bajaba a otro renglón (lo cachó una captura de Tareas)
-          /* @__PURE__ */ jsx(SelectOption, { value: option.value, ownSx: { whiteSpace: "normal" }, children: /* @__PURE__ */ jsxs(SelectOptionText, { component: "span", ownSx: { display: "flex", flexDirection: "column", minWidth: 0, flexGrow: 1 }, children: [
-            /* @__PURE__ */ jsx(Typography, { component: "span", variant: "body2", children: option.label }),
-            option.description && /* @__PURE__ */ jsx(Typography, { component: "span", variant: "caption", color: "text.secondary", children: option.description })
-          ] }) }, option.value)
+          /* @__PURE__ */ jsxs(
+            SelectOption,
+            {
+              value: option.value,
+              disabled: option.disabled,
+              ownSx: { whiteSpace: "normal", ...multiple && checkboxes && WITHOUT_CHECKMARK },
+              children: [
+                multiple && checkboxes && /* @__PURE__ */ jsx(Checkbox, { size: "small", tabIndex: -1, disableRipple: true, sx: { p: 0, mr: 1 }, checked: currentValue.includes(option.value) }),
+                /* @__PURE__ */ jsxs(SelectOptionText, { component: "span", ownSx: { display: "flex", flexDirection: "column", minWidth: 0, flexGrow: 1 }, children: [
+                  /* @__PURE__ */ jsx(Typography, { component: "span", variant: "body2", children: option.label }),
+                  option.description && /* @__PURE__ */ jsx(Typography, { component: "span", variant: "caption", color: "text.secondary", children: option.description })
+                ] })
+              ]
+            },
+            option.value
+          )
         ))
       ]
     }