@stackcraftmx/calcita 0.32.2 → 0.51.0

package/dist/inputs/TransferListInput.js

@@ -0,0 +1,218 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import Button from "@mui/material/Button";
+import Checkbox from "@mui/material/Checkbox";
+import FormHelperText from "@mui/material/FormHelperText";
+import List from "@mui/material/List";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import ChevronLeftRoundedIcon from "@mui/icons-material/ChevronLeftRounded";
+import ChevronRightRoundedIcon from "@mui/icons-material/ChevronRightRounded";
+import KeyboardDoubleArrowLeftRoundedIcon from "@mui/icons-material/KeyboardDoubleArrowLeftRounded";
+import KeyboardDoubleArrowRightRoundedIcon from "@mui/icons-material/KeyboardDoubleArrowRightRounded";
+import { useValidationText } from "../forms/useValidationText.js";
+import FieldFrame from "./FieldFrame.js";
+import { selectAllStateOf } from "./selectAllState.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../toolkit/unknownProps.js";
+const DEFAULT_LIST_HEIGHT = 280;
+const PHONE_ROTATION = Object.freeze({ transform: { xs: "rotate(90deg)", md: "none" } });
+const THEME_NAME = "CalcitaTransferListInput";
+const TransferRoot = piecePart(THEME_NAME, "Root", Stack);
+const TransferList = piecePart(THEME_NAME, "List", Paper);
+const TransferActions = piecePart(THEME_NAME, "Actions", Stack);
+function plainTextOf(text) {
+  return String(text ?? "").normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();
+}
+function TransferColumn({ title, items, markedValues, onMark, onMarkMany, onMoveOne, searchable, searchLabel, emptyText, listHeight, disabled, t }) {
+  const titleId = useId();
+  const [searchText, setSearchText] = useState("");
+  const wantedText = plainTextOf(searchText);
+  const visibleItems = wantedText ? items.filter((item) => plainTextOf(`${item.label} ${item.description ?? ""}`).includes(wantedText)) : items;
+  const visibleValues = visibleItems.filter((item) => !item.disabled).map((item) => item.value);
+  const markState = selectAllStateOf(markedValues, visibleValues);
+  return /* @__PURE__ */ jsxs(TransferList, { variant: "outlined", ownSx: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { alignItems: "center", gap: 1, px: 1.5, py: 1, borderBottom: 1, borderColor: "divider" }, children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          size: "small",
+          sx: { p: 0.5 },
+          disabled: disabled || visibleValues.length === 0,
+          checked: markState.allChosen,
+          indeterminate: markState.someChosen,
+          onChange: () => onMarkMany(markState.toggled()),
+          slotProps: { input: { "aria-label": t("transfer.markVisible", { list: title }) } }
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { id: titleId, variant: "subtitle2", sx: { flexGrow: 1 }, children: title }),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: markedValues.length > 0 ? t("transfer.markedOf", { marked: markedValues.length, count: items.length }) : items.length })
+    ] }),
+    searchable && /* @__PURE__ */ jsx(
+      TextField,
+      {
+        size: "small",
+        type: "search",
+        value: searchText,
+        onChange: (event) => setSearchText(event.target.value),
+        placeholder: searchLabel,
+        disabled,
+        sx: { m: 1 },
+        slotProps: { htmlInput: { "aria-label": `${searchLabel} · ${title}` } }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      List,
+      {
+        dense: true,
+        role: "listbox",
+        "aria-labelledby": titleId,
+        "aria-multiselectable": "true",
+        sx: { height: listHeight, overflowY: "auto", py: 0 },
+        children: [
+          visibleItems.length === 0 && // vacía de verdad o vacía por lo buscado: no es lo mismo y se dice distinto
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { px: 2, py: 1.5 }, children: items.length > 0 ? t("transfer.noMatches", { text: searchText.trim() }) : emptyText }),
+          visibleItems.map((item) => {
+            const isMarked = markedValues.includes(item.value);
+            return /* @__PURE__ */ jsxs(
+              ListItemButton,
+              {
+                role: "option",
+                "aria-selected": isMarked,
+                disabled: disabled || item.disabled,
+                onClick: () => onMark(item.value),
+                onDoubleClick: () => onMoveOne(item.value),
+                sx: { py: 0.25 },
+                children: [
+                  /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(Checkbox, { size: "small", edge: "start", tabIndex: -1, disableRipple: true, checked: isMarked, sx: { p: 0.5 } }) }),
+                  /* @__PURE__ */ jsx(ListItemText, { primary: item.label, secondary: item.description })
+                ]
+              },
+              item.value
+            );
+          })
+        ]
+      }
+    )
+  ] });
+}
+function TransferListInputContent(props) {
+  const {
+    name,
+    label,
+    value,
+    onChange,
+    onBlur,
+    options,
+    availableTitle,
+    chosenTitle,
+    searchable,
+    listHeight = DEFAULT_LIST_HEIGHT,
+    error,
+    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 inputId = `${name ?? "transfer"}-${generatedId}`;
+  const errorText = validationTextOf(error);
+  const chosenValues = Array.isArray(value) ? value : [];
+  const [markedAvailable, setMarkedAvailable] = useState([]);
+  const [markedChosen, setMarkedChosen] = useState([]);
+  const available = options.filter((option) => !chosenValues.includes(option.value));
+  const chosen = chosenValues.map((chosenValue) => options.find((option) => option.value === chosenValue)).filter(Boolean);
+  const isSearchable = searchable ?? options.length > 8;
+  const titles = { available: availableTitle ?? t("transfer.available"), chosen: chosenTitle ?? t("transfer.chosen") };
+  const change = (values) => {
+    onChange(values);
+    onBlur?.();
+  };
+  const toggleIn = (setMarked) => (itemValue) => setMarked((current) => current.includes(itemValue) ? current.filter((markedValue) => markedValue !== itemValue) : [...current, itemValue]);
+  const moveToChosen = (values) => {
+    change([...chosenValues, ...values.filter((itemValue) => !chosenValues.includes(itemValue))]);
+    setMarkedAvailable((current) => current.filter((markedValue) => !values.includes(markedValue)));
+  };
+  const moveToAvailable = (values) => {
+    change(chosenValues.filter((chosenValue) => !values.includes(chosenValue)));
+    setMarkedChosen((current) => current.filter((markedValue) => !values.includes(markedValue)));
+  };
+  const movableOf = (items) => items.filter((item) => !item.disabled).map((item) => item.value);
+  const actionButton = (titleKey, Icon, onClick, isDisabled) => /* @__PURE__ */ jsx(Tooltip, { title: t(titleKey), children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outlined",
+      size: "small",
+      "aria-label": t(titleKey),
+      disabled: disabled || isDisabled,
+      onClick,
+      sx: { minWidth: 40, px: 1 },
+      children: /* @__PURE__ */ jsx(Icon, { fontSize: "small", sx: PHONE_ROTATION })
+    }
+  ) }) });
+  const lists = /* @__PURE__ */ jsxs(TransferRoot, { direction: { xs: "column", md: "row" }, ownSx: { gap: 1.5, alignItems: "stretch" }, sx, id: inputId, children: [
+    /* @__PURE__ */ jsx(
+      TransferColumn,
+      {
+        title: titles.available,
+        items: available,
+        markedValues: markedAvailable,
+        onMark: toggleIn(setMarkedAvailable),
+        onMarkMany: setMarkedAvailable,
+        onMoveOne: (itemValue) => moveToChosen([itemValue]),
+        searchable: isSearchable,
+        searchLabel: t("transfer.search"),
+        emptyText: t("transfer.emptyAvailable"),
+        listHeight,
+        disabled,
+        t
+      }
+    ),
+    /* @__PURE__ */ jsxs(TransferActions, { direction: { xs: "row", md: "column" }, ownSx: { gap: 1, justifyContent: "center", alignItems: "center" }, children: [
+      actionButton("transfer.moveMarked", ChevronRightRoundedIcon, () => moveToChosen(markedAvailable), markedAvailable.length === 0),
+      actionButton("transfer.moveAll", KeyboardDoubleArrowRightRoundedIcon, () => moveToChosen(movableOf(available)), movableOf(available).length === 0),
+      actionButton("transfer.returnMarked", ChevronLeftRoundedIcon, () => moveToAvailable(markedChosen), markedChosen.length === 0),
+      actionButton("transfer.returnAll", KeyboardDoubleArrowLeftRoundedIcon, () => moveToAvailable(movableOf(chosen)), movableOf(chosen).length === 0)
+    ] }),
+    /* @__PURE__ */ jsx(
+      TransferColumn,
+      {
+        title: titles.chosen,
+        items: chosen,
+        markedValues: markedChosen,
+        onMark: toggleIn(setMarkedChosen),
+        onMarkMany: setMarkedChosen,
+        onMoveOne: (itemValue) => moveToAvailable([itemValue]),
+        searchable: isSearchable,
+        searchLabel: t("transfer.search"),
+        emptyText: t("transfer.emptyChosen"),
+        listHeight,
+        disabled,
+        t
+      }
+    )
+  ] });
+  const field = /* @__PURE__ */ jsxs("div", { children: [
+    lists,
+    /* @__PURE__ */ jsx(FormHelperText, { error: Boolean(errorText), role: errorText ? "alert" : void 0, children: errorText ?? helperText })
+  ] });
+  return label ? /* @__PURE__ */ jsx(FieldFrame, { inputId, label, children: field }) : field;
+}
+const TransferListInput = withPieceSlots(TransferListInputContent, THEME_NAME);
+export {
+  TransferListInput as default
+};
+//# sourceMappingURL=TransferListInput.js.map

package/dist/inputs/TransferListInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransferListInput.js","sources":["../../src/inputs/TransferListInput.jsx"],"sourcesContent":["// La lista de transferencia: dos columnas, «Disponibles» y «Elegidos», y botones para pasar de una a otra. Para elegir\n// muchos de una lista larga viendo siempre qué quedó de cada lado (los usuarios que pueden ver un reporte, las sucursales donde\n// puede comprar un cliente). Al formulario llega la lista de los elegidos, en el orden en que se pasaron.\n//\n// Cada columna trae su título con cuántos tiene, su buscador (searchable) y su casilla de «todos los que se ven» (con algo\n// buscado, solo esos). Se marcan los que se quieren pasar (clic o espacio) y se pasan con ›; » pasa todos los de la\n// columna. Doble clic pasa uno directo. En el teléfono las columnas van una debajo de otra y los botones apuntan hacia\n// abajo y arriba. Va fuera de una FormSection: necesita el ancho completo.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaTransferListInput con defaultProps y\n// styleOverrides de sus partes: root, list, actions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useState} from 'react';\nimport Button from '@mui/material/Button';\nimport Checkbox from '@mui/material/Checkbox';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport List from '@mui/material/List';\nimport ListItemButton from '@mui/material/ListItemButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded';\nimport ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';\nimport KeyboardDoubleArrowLeftRoundedIcon from '@mui/icons-material/KeyboardDoubleArrowLeftRounded';\nimport KeyboardDoubleArrowRightRoundedIcon from '@mui/icons-material/KeyboardDoubleArrowRightRounded';\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// lo alto de cada columna antes de deslizar\nconst DEFAULT_LIST_HEIGHT = 280;\n// en el teléfono los botones apuntan hacia abajo (pasar) y hacia arriba (regresar)\nconst PHONE_ROTATION = Object.freeze({transform: {xs: 'rotate(90deg)', md: 'none'}});\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaTransferListInput)\nconst THEME_NAME = 'CalcitaTransferListInput';\nconst TransferRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst TransferList = piecePart(THEME_NAME, 'List', Paper);\nconst TransferActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n/**\n * Un texto sin acentos ni mayúsculas, para que «queretaro» encuentre «Querétaro».\n *\n * @param {unknown} text\n * @returns {string}\n */\nfunction plainTextOf(text) {\n    return String(text ?? '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase().trim();\n}\n\n/**\n * Una columna: su título con cuántos tiene, su buscador, su casilla de «todos los que se ven» y sus renglones.\n *\n * @param {object} props\n */\nfunction TransferColumn({title, items, markedValues, onMark, onMarkMany, onMoveOne, searchable, searchLabel, emptyText, listHeight, disabled, t}) {\n    const titleId = useId();\n    const [searchText, setSearchText] = useState('');\n    const wantedText = plainTextOf(searchText);\n    const visibleItems = wantedText\n        ? items.filter((item) => plainTextOf(`${item.label} ${item.description ?? ''}`).includes(wantedText))\n        : items;\n    const visibleValues = visibleItems.filter((item) => !item.disabled).map((item) => item.value);\n    const markState = selectAllStateOf(markedValues, visibleValues);\n\n    return (\n        <TransferList variant=\"outlined\" ownSx={{flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column'}}>\n            <Stack direction=\"row\" sx={{alignItems: 'center', gap: 1, px: 1.5, py: 1, borderBottom: 1, borderColor: 'divider'}}>\n                <Checkbox size=\"small\" sx={{p: 0.5}} disabled={disabled || visibleValues.length === 0}\n                          checked={markState.allChosen} indeterminate={markState.someChosen}\n                          onChange={() => onMarkMany(markState.toggled())}\n                          slotProps={{input: {'aria-label': t('transfer.markVisible', {list: title})}}} />\n                <Typography id={titleId} variant=\"subtitle2\" sx={{flexGrow: 1}}>{title}</Typography>\n                <Typography variant=\"caption\" color=\"text.secondary\">\n                    {markedValues.length > 0 ? t('transfer.markedOf', {marked: markedValues.length, count: items.length}) : items.length}\n                </Typography>\n            </Stack>\n            {searchable && (\n                <TextField size=\"small\" type=\"search\" value={searchText} onChange={(event) => setSearchText(event.target.value)}\n                           placeholder={searchLabel} disabled={disabled} sx={{m: 1}}\n                           slotProps={{htmlInput: {'aria-label': `${searchLabel} · ${title}`}}} />\n            )}\n            <List dense role=\"listbox\" aria-labelledby={titleId} aria-multiselectable=\"true\"\n                  sx={{height: listHeight, overflowY: 'auto', py: 0}}>\n                {visibleItems.length === 0 && (\n                    // vacía de verdad o vacía por lo buscado: no es lo mismo y se dice distinto\n                    <Typography variant=\"body2\" color=\"text.secondary\" sx={{px: 2, py: 1.5}}>\n                        {items.length > 0 ? t('transfer.noMatches', {text: searchText.trim()}) : emptyText}\n                    </Typography>\n                )}\n                {visibleItems.map((item) => {\n                    const isMarked = markedValues.includes(item.value);\n                    return (\n                        <ListItemButton key={item.value} role=\"option\" aria-selected={isMarked} disabled={disabled || item.disabled}\n                                        onClick={() => onMark(item.value)} onDoubleClick={() => onMoveOne(item.value)} sx={{py: 0.25}}>\n                            <ListItemIcon sx={{minWidth: 32}}>\n                                <Checkbox size=\"small\" edge=\"start\" tabIndex={-1} disableRipple checked={isMarked} sx={{p: 0.5}} />\n                            </ListItemIcon>\n                            <ListItemText primary={item.label} secondary={item.description} />\n                        </ListItemButton>\n                    );\n                })}\n            </List>\n        </TransferList>\n    );\n}\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 los elegidos\n * @param {(values: Array<string|number>) => void} props.onChange\n * @param {() => void} [props.onBlur]\n * @param {Array<{value: string|number, label: string, description?: string, disabled?: boolean}>} props.options todos\n * @param {string} [props.availableTitle] ya traducido; por omisión «Disponibles»\n * @param {string} [props.chosenTitle] ya traducido; por omisión «Elegidos»\n * @param {boolean} [props.searchable] un buscador en cada columna (por omisión, con más de 8 opciones)\n * @param {number} [props.listHeight] lo alto de cada columna, en px\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 TransferListInputContent(props) {\n    const {\n        name, label, value, onChange, onBlur, options, availableTitle, chosenTitle, searchable, listHeight = DEFAULT_LIST_HEIGHT, error,\n        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 inputId = `${name ?? 'transfer'}-${generatedId}`;\n    const errorText = validationTextOf(error);\n    const chosenValues = Array.isArray(value) ? value : [];\n    // lo marcado para pasar, de cada lado\n    const [markedAvailable, setMarkedAvailable] = useState([]);\n    const [markedChosen, setMarkedChosen] = useState([]);\n    const available = options.filter((option) => !chosenValues.includes(option.value));\n    // los elegidos en el orden en que se pasaron\n    const chosen = chosenValues.map((chosenValue) => options.find((option) => option.value === chosenValue)).filter(Boolean);\n    const isSearchable = searchable ?? options.length > 8;\n    const titles = {available: availableTitle ?? t('transfer.available'), chosen: chosenTitle ?? t('transfer.chosen')};\n\n    const change = (values) => {\n        onChange(values);\n        onBlur?.();\n    };\n    const toggleIn = (setMarked) => (itemValue) => setMarked((current) => (\n        current.includes(itemValue) ? current.filter((markedValue) => markedValue !== itemValue) : [...current, itemValue]\n    ));\n    const moveToChosen = (values) => {\n        change([...chosenValues, ...values.filter((itemValue) => !chosenValues.includes(itemValue))]);\n        setMarkedAvailable((current) => current.filter((markedValue) => !values.includes(markedValue)));\n    };\n    const moveToAvailable = (values) => {\n        change(chosenValues.filter((chosenValue) => !values.includes(chosenValue)));\n        setMarkedChosen((current) => current.filter((markedValue) => !values.includes(markedValue)));\n    };\n    const movableOf = (items) => items.filter((item) => !item.disabled).map((item) => item.value);\n    const actionButton = (titleKey, Icon, onClick, isDisabled) => (\n        <Tooltip title={t(titleKey)}>\n            <span>\n                <Button variant=\"outlined\" size=\"small\" aria-label={t(titleKey)} disabled={disabled || isDisabled} onClick={onClick}\n                        sx={{minWidth: 40, px: 1}}>\n                    <Icon fontSize=\"small\" sx={PHONE_ROTATION} />\n                </Button>\n            </span>\n        </Tooltip>\n    );\n\n    const lists = (\n        <TransferRoot direction={{xs: 'column', md: 'row'}} ownSx={{gap: 1.5, alignItems: 'stretch'}} sx={sx} id={inputId}>\n            <TransferColumn title={titles.available} items={available} markedValues={markedAvailable}\n                            onMark={toggleIn(setMarkedAvailable)} onMarkMany={setMarkedAvailable} onMoveOne={(itemValue) => moveToChosen([itemValue])}\n                            searchable={isSearchable} searchLabel={t('transfer.search')} emptyText={t('transfer.emptyAvailable')}\n                            listHeight={listHeight} disabled={disabled} t={t} />\n            <TransferActions direction={{xs: 'row', md: 'column'}} ownSx={{gap: 1, justifyContent: 'center', alignItems: 'center'}}>\n                {actionButton('transfer.moveMarked', ChevronRightRoundedIcon, () => moveToChosen(markedAvailable), markedAvailable.length === 0)}\n                {actionButton('transfer.moveAll', KeyboardDoubleArrowRightRoundedIcon, () => moveToChosen(movableOf(available)), movableOf(available).length === 0)}\n                {actionButton('transfer.returnMarked', ChevronLeftRoundedIcon, () => moveToAvailable(markedChosen), markedChosen.length === 0)}\n                {actionButton('transfer.returnAll', KeyboardDoubleArrowLeftRoundedIcon, () => moveToAvailable(movableOf(chosen)), movableOf(chosen).length === 0)}\n            </TransferActions>\n            <TransferColumn title={titles.chosen} items={chosen} markedValues={markedChosen}\n                            onMark={toggleIn(setMarkedChosen)} onMarkMany={setMarkedChosen} onMoveOne={(itemValue) => moveToAvailable([itemValue])}\n                            searchable={isSearchable} searchLabel={t('transfer.search')} emptyText={t('transfer.emptyChosen')}\n                            listHeight={listHeight} disabled={disabled} t={t} />\n        </TransferRoot>\n    );\n\n    const field = (\n        <div>\n            {lists}\n            <FormHelperText error={Boolean(errorText)} role={errorText ? 'alert' : undefined}>{errorText ?? helperText}</FormHelperText>\n        </div>\n    );\n    // sin etiqueta va solo (la pantalla pone el título a su manera)\n    return label ? <FieldFrame inputId={inputId} label={label}>{field}</FieldFrame> : field;\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst TransferListInput = withPieceSlots(TransferListInputContent, THEME_NAME);\nexport default TransferListInput;\n"],"names":[],"mappings":"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"}

package/dist/inputs/WizardLayout.js

@@ -8,13 +8,13 @@ import Step from "@mui/material/Step";
 import StepLabel from "@mui/material/StepLabel";
 import Stepper from "@mui/material/Stepper";
 import Typography from "@mui/material/Typography";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaWizardLayout";
 const WizardStepper = piecePart(THEME_NAME, "Stepper", Stepper);
 const WizardPhoneSteps = piecePart(THEME_NAME, "PhoneSteps", Box);
 const WizardActions = piecePart(THEME_NAME, "Actions", Stack);
-function WizardLayout(props) {
+function WizardLayoutContent(props) {
   const {
     steps,
     activeIndex,
@@ -57,6 +57,7 @@ function WizardLayout(props) {
     ] })
   ] });
 }
+const WizardLayout = withPieceSlots(WizardLayoutContent, THEME_NAME);
 export {
   WizardLayout as default
 };

package/dist/inputs/WizardLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardLayout.js","sources":["../../src/inputs/WizardLayout.jsx"],"sourcesContent":["// Lo que se ve de un formulario por pasos: los pasos arriba (en el teléfono, «Paso 2 de 4» y su nombre), los campos del paso\n// y los botones (Anterior · Omitir este paso · Siguiente o Enviar). No sabe de formik ni de react-hook-form: el FormWizard de\n// cada uno (/forms y /react-hook-form) pone la lógica (qué revisa «Siguiente», qué hace «Omitir») y le pasa su botón de\n// enviar y su aviso de errores. Suelto sirve para armar un asistente propio con otra librería.\n//\n// Los textos se cambian con `texts`, con la forma de `common` en los textos del paquete: {wizard: {next: 'Continuar'}}.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaWizardLayout con defaultProps y\n// styleOverrides de sus partes: stepper, phoneSteps, actions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Stack from '@mui/material/Stack';\nimport Step from '@mui/material/Step';\nimport StepLabel from '@mui/material/StepLabel';\nimport Stepper from '@mui/material/Stepper';\nimport Typography from '@mui/material/Typography';\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.CalcitaWizardLayout)\nconst THEME_NAME = 'CalcitaWizardLayout';\nconst WizardStepper = piecePart(THEME_NAME, 'Stepper', Stepper);\nconst WizardPhoneSteps = piecePart(THEME_NAME, 'PhoneSteps', Box);\nconst WizardActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n/**\n * @param {object} props\n * @param {Object[]} props.steps en orden\n * @param {string} props.steps[].key\n * @param {string} props.steps[].label ya traducido\n * @param {boolean} [props.steps[].optional] se puede omitir\n * @param {import('react').ReactNode} props.steps[].content los campos del paso\n * @param {number} props.activeIndex el paso que se ve\n * @param {Set<string>} props.skippedKeys los pasos omitidos\n * @param {boolean} [props.isSubmitting] mientras se envía, «Anterior» se apaga\n * @param {() => void} props.onBack\n * @param {() => void} props.onNext\n * @param {() => void} props.onSkip\n * @param {import('react').ReactNode} props.submitButton el botón de enviar del último paso\n * @param {import('react').ReactNode} [props.problemAlert] el aviso de errores del servidor, arriba de los botones del último paso\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {wizard: {next, back, skip, optional, skipped, stepOf}}\n */\nexport default function WizardLayout(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaWizardLayout.defaultProps) y encima lo que llega aquí\n    const {\n    steps, activeIndex, skippedKeys, isSubmitting = false, onBack, onNext, onSkip, submitButton, problemAlert, texts,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const activeStep = steps[activeIndex];\n    const isLastStep = activeIndex === steps.length - 1;\n\n    return (\n        <Stack spacing={3}>\n            {/* en el teléfono los nombres de los pasos no caben: se dice en qué paso va */}\n            <WizardStepper activeStep={activeIndex} alternativeLabel ownSx={{display: {xs: 'none', sm: 'flex'}}}>\n                {steps.map((step) => {\n                    let caption;\n                    if (skippedKeys.has(step.key)) {\n                        caption = t('wizard.skipped');\n                    } else if (step.optional) {\n                        caption = t('wizard.optional');\n                    }\n                    return (\n                        <Step key={step.key} completed={skippedKeys.has(step.key) ? false : undefined}>\n                            <StepLabel optional={caption && <Typography variant=\"caption\" color=\"text.secondary\">{caption}</Typography>}>\n                                {step.label}\n                            </StepLabel>\n                        </Step>\n                    );\n                })}\n            </WizardStepper>\n            <WizardPhoneSteps ownSx={{display: {xs: 'block', sm: 'none'}}}>\n                <Typography variant=\"overline\" color=\"text.secondary\">{t('wizard.stepOf', {current: activeIndex + 1, total: steps.length})}</Typography>\n                <Typography variant=\"h6\">{activeStep.label}</Typography>\n            </WizardPhoneSteps>\n\n            <Box>{activeStep.content}</Box>\n\n            {isLastStep && problemAlert}\n\n            <WizardActions direction={{xs: 'column-reverse', sm: 'row'}} spacing={1.5} ownSx={{justifyContent: 'space-between'}}>\n                <Button variant=\"text\" color=\"inherit\" disabled={activeIndex === 0 || isSubmitting} onClick={onBack}>\n                    {t('wizard.back')}\n                </Button>\n                <Stack direction={{xs: 'column-reverse', sm: 'row'}} spacing={1.5}>\n                    {activeStep.optional && !isLastStep && (\n                        <Button variant=\"text\" onClick={onSkip}>{t('wizard.skip')}</Button>\n                    )}\n                    {isLastStep\n                        ? submitButton\n                        : <Button variant=\"contained\" size=\"large\" onClick={onNext}>{t('wizard.next')}</Button>}\n                </Stack>\n            </WizardActions>\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAuBA,MAAM,aAAa;AACnB,MAAM,gBAAgB,UAAU,YAAY,WAAW,OAAO;AAC9D,MAAM,mBAAmB,UAAU,YAAY,cAAc,GAAG;AAChE,MAAM,gBAAgB,UAAU,YAAY,WAAW,KAAK;AAmB5D,SAAwB,aAAa,OAAO;AAExC,QAAM;AAAA,IACN;AAAA,IAAO;AAAA,IAAa;AAAA,IAAa,eAAe;AAAA,IAAO;AAAA,IAAQ;AAAA,IAAQ;AAAA,IAAQ;AAAA,IAAc;AAAA,IAAc;AAAA,IAC3G,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AAC/B,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,aAAa,MAAM,WAAW;AACpC,QAAM,aAAa,gBAAgB,MAAM,SAAS;AAElD,SACI,qBAAC,OAAA,EAAM,SAAS,GAEZ,UAAA;AAAA,IAAA,oBAAC,iBAAc,YAAY,aAAa,kBAAgB,MAAC,OAAO,EAAC,SAAS,EAAC,IAAI,QAAQ,IAAI,OAAA,EAAM,GAC5F,UAAA,MAAM,IAAI,CAAC,SAAS;AACjB,UAAI;AACJ,UAAI,YAAY,IAAI,KAAK,GAAG,GAAG;AAC3B,kBAAU,EAAE,gBAAgB;AAAA,MAChC,WAAW,KAAK,UAAU;AACtB,kBAAU,EAAE,iBAAiB;AAAA,MACjC;AACA,aACI,oBAAC,MAAA,EAAoB,WAAW,YAAY,IAAI,KAAK,GAAG,IAAI,QAAQ,QAChE,UAAA,oBAAC,WAAA,EAAU,UAAU,WAAW,oBAAC,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAkB,UAAA,QAAA,CAAQ,GACzF,UAAA,KAAK,MAAA,CACV,EAAA,GAHO,KAAK,GAIhB;AAAA,IAER,CAAC,EAAA,CACL;AAAA,IACA,qBAAC,kBAAA,EAAiB,OAAO,EAAC,SAAS,EAAC,IAAI,SAAS,IAAI,OAAA,EAAM,GACvD,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,SAAQ,YAAW,OAAM,kBAAkB,UAAA,EAAE,iBAAiB,EAAC,SAAS,cAAc,GAAG,OAAO,MAAM,OAAA,CAAO,GAAE;AAAA,MAC3H,oBAAC,YAAA,EAAW,SAAQ,MAAM,qBAAW,MAAA,CAAM;AAAA,IAAA,GAC/C;AAAA,IAEA,oBAAC,KAAA,EAAK,UAAA,WAAW,QAAA,CAAQ;AAAA,IAExB,cAAc;AAAA,IAEf,qBAAC,eAAA,EAAc,WAAW,EAAC,IAAI,kBAAkB,IAAI,MAAA,GAAQ,SAAS,KAAK,OAAO,EAAC,gBAAgB,mBAC/F,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAO,SAAQ,QAAO,OAAM,WAAU,UAAU,gBAAgB,KAAK,cAAc,SAAS,QACxF,UAAA,EAAE,aAAa,GACpB;AAAA,MACA,qBAAC,OAAA,EAAM,WAAW,EAAC,IAAI,kBAAkB,IAAI,MAAA,GAAQ,SAAS,KACzD,UAAA;AAAA,QAAA,WAAW,YAAY,CAAC,cACrB,oBAAC,QAAA,EAAO,SAAQ,QAAO,SAAS,QAAS,UAAA,EAAE,aAAa,EAAA,CAAE;AAAA,QAE7D,aACK,eACA,oBAAC,QAAA,EAAO,SAAQ,aAAY,MAAK,SAAQ,SAAS,QAAS,UAAA,EAAE,aAAa,EAAA,CAAE;AAAA,MAAA,EAAA,CACtF;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"WizardLayout.js","sources":["../../src/inputs/WizardLayout.jsx"],"sourcesContent":["// Lo que se ve de un formulario por pasos: los pasos arriba (en el teléfono, «Paso 2 de 4» y su nombre), los campos del paso\n// y los botones (Anterior · Omitir este paso · Siguiente o Enviar). No sabe de formik ni de react-hook-form: el FormWizard de\n// cada uno (/forms y /react-hook-form) pone la lógica (qué revisa «Siguiente», qué hace «Omitir») y le pasa su botón de\n// enviar y su aviso de errores. Suelto sirve para armar un asistente propio con otra librería.\n//\n// Los textos se cambian con `texts`, con la forma de `common` en los textos del paquete: {wizard: {next: 'Continuar'}}.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaWizardLayout con defaultProps y\n// styleOverrides de sus partes: stepper, phoneSteps, actions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Stack from '@mui/material/Stack';\nimport Step from '@mui/material/Step';\nimport StepLabel from '@mui/material/StepLabel';\nimport Stepper from '@mui/material/Stepper';\nimport Typography from '@mui/material/Typography';\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.CalcitaWizardLayout)\nconst THEME_NAME = 'CalcitaWizardLayout';\nconst WizardStepper = piecePart(THEME_NAME, 'Stepper', Stepper);\nconst WizardPhoneSteps = piecePart(THEME_NAME, 'PhoneSteps', Box);\nconst WizardActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n/**\n * @param {object} props\n * @param {Object[]} props.steps en orden\n * @param {string} props.steps[].key\n * @param {string} props.steps[].label ya traducido\n * @param {boolean} [props.steps[].optional] se puede omitir\n * @param {import('react').ReactNode} props.steps[].content los campos del paso\n * @param {number} props.activeIndex el paso que se ve\n * @param {Set<string>} props.skippedKeys los pasos omitidos\n * @param {boolean} [props.isSubmitting] mientras se envía, «Anterior» se apaga\n * @param {() => void} props.onBack\n * @param {() => void} props.onNext\n * @param {() => void} props.onSkip\n * @param {import('react').ReactNode} props.submitButton el botón de enviar del último paso\n * @param {import('react').ReactNode} [props.problemAlert] el aviso de errores del servidor, arriba de los botones del último paso\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {wizard: {next, back, skip, optional, skipped, stepOf}}\n */\nfunction WizardLayoutContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaWizardLayout.defaultProps) y encima lo que llega aquí\n    const {\n    steps, activeIndex, skippedKeys, isSubmitting = false, onBack, onNext, onSkip, submitButton, problemAlert, texts,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const activeStep = steps[activeIndex];\n    const isLastStep = activeIndex === steps.length - 1;\n\n    return (\n        <Stack spacing={3}>\n            {/* en el teléfono los nombres de los pasos no caben: se dice en qué paso va */}\n            <WizardStepper activeStep={activeIndex} alternativeLabel ownSx={{display: {xs: 'none', sm: 'flex'}}}>\n                {steps.map((step) => {\n                    let caption;\n                    if (skippedKeys.has(step.key)) {\n                        caption = t('wizard.skipped');\n                    } else if (step.optional) {\n                        caption = t('wizard.optional');\n                    }\n                    return (\n                        <Step key={step.key} completed={skippedKeys.has(step.key) ? false : undefined}>\n                            <StepLabel optional={caption && <Typography variant=\"caption\" color=\"text.secondary\">{caption}</Typography>}>\n                                {step.label}\n                            </StepLabel>\n                        </Step>\n                    );\n                })}\n            </WizardStepper>\n            <WizardPhoneSteps ownSx={{display: {xs: 'block', sm: 'none'}}}>\n                <Typography variant=\"overline\" color=\"text.secondary\">{t('wizard.stepOf', {current: activeIndex + 1, total: steps.length})}</Typography>\n                <Typography variant=\"h6\">{activeStep.label}</Typography>\n            </WizardPhoneSteps>\n\n            <Box>{activeStep.content}</Box>\n\n            {isLastStep && problemAlert}\n\n            <WizardActions direction={{xs: 'column-reverse', sm: 'row'}} spacing={1.5} ownSx={{justifyContent: 'space-between'}}>\n                <Button variant=\"text\" color=\"inherit\" disabled={activeIndex === 0 || isSubmitting} onClick={onBack}>\n                    {t('wizard.back')}\n                </Button>\n                <Stack direction={{xs: 'column-reverse', sm: 'row'}} spacing={1.5}>\n                    {activeStep.optional && !isLastStep && (\n                        <Button variant=\"text\" onClick={onSkip}>{t('wizard.skip')}</Button>\n                    )}\n                    {isLastStep\n                        ? submitButton\n                        : <Button variant=\"contained\" size=\"large\" onClick={onNext}>{t('wizard.next')}</Button>}\n                </Stack>\n            </WizardActions>\n        </Stack>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst WizardLayout = withPieceSlots(WizardLayoutContent, THEME_NAME);\nexport default WizardLayout;\n"],"names":[],"mappings":";;;;;;;;;;;;AAuBA,MAAM,aAAa;AACnB,MAAM,gBAAgB,UAAU,YAAY,WAAW,OAAO;AAC9D,MAAM,mBAAmB,UAAU,YAAY,cAAc,GAAG;AAChE,MAAM,gBAAgB,UAAU,YAAY,WAAW,KAAK;AAmB5D,SAAS,oBAAoB,OAAO;AAEhC,QAAM;AAAA,IACN;AAAA,IAAO;AAAA,IAAa;AAAA,IAAa,eAAe;AAAA,IAAO;AAAA,IAAQ;AAAA,IAAQ;AAAA,IAAQ;AAAA,IAAc;AAAA,IAAc;AAAA,IAC3G,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AAC/B,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,aAAa,MAAM,WAAW;AACpC,QAAM,aAAa,gBAAgB,MAAM,SAAS;AAElD,SACI,qBAAC,OAAA,EAAM,SAAS,GAEZ,UAAA;AAAA,IAAA,oBAAC,iBAAc,YAAY,aAAa,kBAAgB,MAAC,OAAO,EAAC,SAAS,EAAC,IAAI,QAAQ,IAAI,OAAA,EAAM,GAC5F,UAAA,MAAM,IAAI,CAAC,SAAS;AACjB,UAAI;AACJ,UAAI,YAAY,IAAI,KAAK,GAAG,GAAG;AAC3B,kBAAU,EAAE,gBAAgB;AAAA,MAChC,WAAW,KAAK,UAAU;AACtB,kBAAU,EAAE,iBAAiB;AAAA,MACjC;AACA,aACI,oBAAC,MAAA,EAAoB,WAAW,YAAY,IAAI,KAAK,GAAG,IAAI,QAAQ,QAChE,UAAA,oBAAC,WAAA,EAAU,UAAU,WAAW,oBAAC,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAkB,UAAA,QAAA,CAAQ,GACzF,UAAA,KAAK,MAAA,CACV,EAAA,GAHO,KAAK,GAIhB;AAAA,IAER,CAAC,EAAA,CACL;AAAA,IACA,qBAAC,kBAAA,EAAiB,OAAO,EAAC,SAAS,EAAC,IAAI,SAAS,IAAI,OAAA,EAAM,GACvD,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,SAAQ,YAAW,OAAM,kBAAkB,UAAA,EAAE,iBAAiB,EAAC,SAAS,cAAc,GAAG,OAAO,MAAM,OAAA,CAAO,GAAE;AAAA,MAC3H,oBAAC,YAAA,EAAW,SAAQ,MAAM,qBAAW,MAAA,CAAM;AAAA,IAAA,GAC/C;AAAA,IAEA,oBAAC,KAAA,EAAK,UAAA,WAAW,QAAA,CAAQ;AAAA,IAExB,cAAc;AAAA,IAEf,qBAAC,eAAA,EAAc,WAAW,EAAC,IAAI,kBAAkB,IAAI,MAAA,GAAQ,SAAS,KAAK,OAAO,EAAC,gBAAgB,mBAC/F,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAO,SAAQ,QAAO,OAAM,WAAU,UAAU,gBAAgB,KAAK,cAAc,SAAS,QACxF,UAAA,EAAE,aAAa,GACpB;AAAA,MACA,qBAAC,OAAA,EAAM,WAAW,EAAC,IAAI,kBAAkB,IAAI,MAAA,GAAQ,SAAS,KACzD,UAAA;AAAA,QAAA,WAAW,YAAY,CAAC,cACrB,oBAAC,QAAA,EAAO,SAAQ,QAAO,SAAS,QAAS,UAAA,EAAE,aAAa,EAAA,CAAE;AAAA,QAE7D,aACK,eACA,oBAAC,QAAA,EAAO,SAAQ,aAAY,MAAK,SAAQ,SAAS,QAAS,UAAA,EAAE,aAAa,EAAA,CAAE;AAAA,MAAA,EAAA,CACtF;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;AAGA,MAAM,eAAe,eAAe,qBAAqB,UAAU;"}

package/dist/inputs/inputMasks.js

@@ -0,0 +1,84 @@
+const INPUT_MASK = Object.freeze({
+  // 10 dígitos en grupos de 3, 3 y 4; si su país lo escribe distinto, pase su propio patrón
+  phone: "999 999 9999",
+  postalCode: "99999",
+  // la CLABE: banco (3), plaza (3), cuenta (11) y dígito verificador (1)
+  clabe: "999 999 99999999999 9",
+  card: "9999 9999 9999 9999",
+  // RFC de persona física (13); el de persona moral (12) cabe igual
+  rfc: "XXXXXXXXXXXXX",
+  curp: "XXXXXXXXXXXXXXXXXX",
+  // el folio fiscal (UUID) de una factura
+  uuid: "HHHHHHHH-HHHH-HHHH-HHHH-HHHHHHHHHHHH"
+});
+const SLOT_RULES = Object.freeze({
+  9: /^\d$/,
+  A: /^[A-ZÑ]$/,
+  X: /^[A-Z0-9Ñ&]$/,
+  H: /^[0-9A-F]$/
+});
+function maskPatternOf(mask) {
+  return INPUT_MASK[mask] ?? mask;
+}
+function isSlot(patternCharacter) {
+  return patternCharacter in SLOT_RULES;
+}
+function slotsOf(pattern) {
+  return [...pattern].filter(isSlot);
+}
+function rawValueOf(typedText, pattern) {
+  const slots = slotsOf(pattern);
+  let raw = "";
+  for (const character of (typedText ?? "").toLocaleUpperCase("es-MX")) {
+    if (raw.length === slots.length) {
+      break;
+    }
+    if (SLOT_RULES[slots[raw.length]].test(character)) {
+      raw += character;
+    }
+  }
+  return raw;
+}
+function maskedTextOf(rawValue, pattern) {
+  const raw = rawValueOf(rawValue ?? "", pattern);
+  let shown = "";
+  let usedCharacters = 0;
+  for (const patternCharacter of pattern) {
+    if (usedCharacters === raw.length) {
+      break;
+    }
+    if (isSlot(patternCharacter)) {
+      shown += raw[usedCharacters];
+      usedCharacters += 1;
+    } else {
+      shown += patternCharacter;
+    }
+  }
+  return shown;
+}
+function caretPositionOf(typedText, caretPosition, pattern) {
+  const valueCharactersBefore = rawValueOf(typedText.slice(0, caretPosition), pattern).length;
+  const shown = maskedTextOf(rawValueOf(typedText, pattern), pattern);
+  let seen = 0;
+  for (let position = 0; position < shown.length; position += 1) {
+    if (seen === valueCharactersBefore) {
+      return position;
+    }
+    if (isSlot(pattern[position])) {
+      seen += 1;
+    }
+  }
+  return shown.length;
+}
+function isMaskComplete(rawValue, pattern) {
+  return rawValueOf(rawValue ?? "", pattern).length === slotsOf(pattern).length;
+}
+export {
+  INPUT_MASK,
+  caretPositionOf,
+  isMaskComplete,
+  maskPatternOf,
+  maskedTextOf,
+  rawValueOf
+};
+//# sourceMappingURL=inputMasks.js.map

package/dist/inputs/inputMasks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputMasks.js","sources":["../../src/inputs/inputMasks.js"],"sourcesContent":["// Las máscaras de los campos que se escriben con forma fija: un teléfono, una CLABE, un RFC, un folio fiscal. MaskedInput\n// las usa para que la persona vea los separadores mientras escribe y al formulario llegue el valor LIMPIO (solo dígitos o\n// letras, en mayúsculas), que es lo que valida y guarda el servidor.\n//\n// Un patrón es un texto donde cada lugar dice qué cabe; lo demás son separadores que pone la máscara:\n//   9  un dígito\n//   A  una letra (Ñ incluida), en mayúscula\n//   X  una letra o un dígito, en mayúscula (también & y Ñ, que llevan los RFC)\n//   H  un dígito hexadecimal 0-9 A-F, en mayúscula (los folios fiscales)\n// Por ejemplo '999 999 9999' muestra «555 123 4567» y al formulario llega «5551234567».\n//\n// Lo que no cabe en el lugar que sigue se ignora (una letra donde va un dígito) y nada pasa del largo del patrón. El RFC y la\n// CURP solo se filtran y se pasan a mayúsculas mientras se escriben: que estén bien formados lo revisan sus reglas.\n//\n// Puro (sin React): se prueba con node (inputMasks.test.js).\n//\n// Genérico del paquete: function (regla de la casa).\n\n/** Los patrones de siempre, para no escribirlos en cada pantalla. Uno propio se pasa como texto. */\nexport const INPUT_MASK = Object.freeze({\n    // 10 dígitos en grupos de 3, 3 y 4; si su país lo escribe distinto, pase su propio patrón\n    phone: '999 999 9999',\n    postalCode: '99999',\n    // la CLABE: banco (3), plaza (3), cuenta (11) y dígito verificador (1)\n    clabe: '999 999 99999999999 9',\n    card: '9999 9999 9999 9999',\n    // RFC de persona física (13); el de persona moral (12) cabe igual\n    rfc: 'XXXXXXXXXXXXX',\n    curp: 'XXXXXXXXXXXXXXXXXX',\n    // el folio fiscal (UUID) de una factura\n    uuid: 'HHHHHHHH-HHHH-HHHH-HHHH-HHHHHHHHHHHH',\n});\n\n// qué cabe en cada clase de lugar del patrón\nconst SLOT_RULES = Object.freeze({\n    9: /^\\d$/,\n    A: /^[A-ZÑ]$/,\n    X: /^[A-Z0-9Ñ&]$/,\n    H: /^[0-9A-F]$/,\n});\n\n/**\n * El patrón de una máscara: el nombre de una de INPUT_MASK o el patrón mismo.\n *\n * @param {string} mask 'phone' | '999-999' …\n * @returns {string}\n */\nexport function maskPatternOf(mask) {\n    return INPUT_MASK[mask] ?? mask;\n}\n\n/**\n * @param {string} patternCharacter\n * @returns {boolean}\n */\nfunction isSlot(patternCharacter) {\n    return patternCharacter in SLOT_RULES;\n}\n\n/**\n * Los lugares del patrón, en orden (sin los separadores).\n *\n * @param {string} pattern\n * @returns {string[]}\n */\nfunction slotsOf(pattern) {\n    return [...pattern].filter(isSlot);\n}\n\n/**\n * El valor limpio de lo que se escribió (o se pegó): cada carácter va al lugar que sigue si cabe; lo que no, se ignora.\n *\n * @param {string} typedText lo que hay en el campo, con o sin separadores\n * @param {string} pattern\n * @returns {string} solo los dígitos o letras, en mayúsculas, hasta el largo del patrón\n */\nexport function rawValueOf(typedText, pattern) {\n    const slots = slotsOf(pattern);\n    let raw = '';\n    for (const character of (typedText ?? '').toLocaleUpperCase('es-MX')) {\n        if (raw.length === slots.length) {\n            break;\n        }\n        if (SLOT_RULES[slots[raw.length]].test(character)) {\n            raw += character;\n        }\n    }\n    return raw;\n}\n\n/**\n * El valor limpio con sus separadores, como se ve en el campo. Los separadores solo salen entre lo que ya se escribió (sin\n * guiones de más al final).\n *\n * @param {string|null|undefined} rawValue\n * @param {string} pattern\n * @returns {string}\n */\nexport function maskedTextOf(rawValue, pattern) {\n    const raw = rawValueOf(rawValue ?? '', pattern);\n    let shown = '';\n    let usedCharacters = 0;\n    for (const patternCharacter of pattern) {\n        if (usedCharacters === raw.length) {\n            break;\n        }\n        if (isSlot(patternCharacter)) {\n            shown += raw[usedCharacters];\n            usedCharacters += 1;\n        } else {\n            shown += patternCharacter;\n        }\n    }\n    return shown;\n}\n\n/**\n * Dónde queda el cursor después de poner los separadores: justo después del mismo número de dígitos o letras que tenía\n * antes. Sin esto, escribir en medio de un teléfono mandaría el cursor al final.\n *\n * @param {string} typedText lo que había en el campo al escribir\n * @param {number} caretPosition dónde estaba el cursor en typedText\n * @param {string} pattern\n * @returns {number} la posición en el texto ya con sus separadores\n */\nexport function caretPositionOf(typedText, caretPosition, pattern) {\n    const valueCharactersBefore = rawValueOf(typedText.slice(0, caretPosition), pattern).length;\n    const shown = maskedTextOf(rawValueOf(typedText, pattern), pattern);\n    let seen = 0;\n    for (let position = 0; position < shown.length; position += 1) {\n        if (seen === valueCharactersBefore) {\n            return position;\n        }\n        if (isSlot(pattern[position])) {\n            seen += 1;\n        }\n    }\n    return shown.length;\n}\n\n/**\n * ¿Ya se llenaron todos los lugares?\n *\n * @param {string|null|undefined} rawValue\n * @param {string} pattern\n * @returns {boolean}\n */\nexport function isMaskComplete(rawValue, pattern) {\n    return rawValueOf(rawValue ?? '', pattern).length === slotsOf(pattern).length;\n}\n"],"names":[],"mappings":"AAmBY,MAAC,aAAa,OAAO,OAAO;AAAA;AAAA,EAEpC,OAAO;AAAA,EACP,YAAY;AAAA;AAAA,EAEZ,OAAO;AAAA,EACP,MAAM;AAAA;AAAA,EAEN,KAAK;AAAA,EACL,MAAM;AAAA;AAAA,EAEN,MAAM;AACV,CAAC;AAGD,MAAM,aAAa,OAAO,OAAO;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACP,CAAC;AAQM,SAAS,cAAc,MAAM;AAChC,SAAO,WAAW,IAAI,KAAK;AAC/B;AAMA,SAAS,OAAO,kBAAkB;AAC9B,SAAO,oBAAoB;AAC/B;AAQA,SAAS,QAAQ,SAAS;AACtB,SAAO,CAAC,GAAG,OAAO,EAAE,OAAO,MAAM;AACrC;AASO,SAAS,WAAW,WAAW,SAAS;AAC3C,QAAM,QAAQ,QAAQ,OAAO;AAC7B,MAAI,MAAM;AACV,aAAW,cAAc,aAAa,IAAI,kBAAkB,OAAO,GAAG;AAClE,QAAI,IAAI,WAAW,MAAM,QAAQ;AAC7B;AAAA,IACJ;AACA,QAAI,WAAW,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,SAAS,GAAG;AAC/C,aAAO;AAAA,IACX;AAAA,EACJ;AACA,SAAO;AACX;AAUO,SAAS,aAAa,UAAU,SAAS;AAC5C,QAAM,MAAM,WAAW,YAAY,IAAI,OAAO;AAC9C,MAAI,QAAQ;AACZ,MAAI,iBAAiB;AACrB,aAAW,oBAAoB,SAAS;AACpC,QAAI,mBAAmB,IAAI,QAAQ;AAC/B;AAAA,IACJ;AACA,QAAI,OAAO,gBAAgB,GAAG;AAC1B,eAAS,IAAI,cAAc;AAC3B,wBAAkB;AAAA,IACtB,OAAO;AACH,eAAS;AAAA,IACb;AAAA,EACJ;AACA,SAAO;AACX;AAWO,SAAS,gBAAgB,WAAW,eAAe,SAAS;AAC/D,QAAM,wBAAwB,WAAW,UAAU,MAAM,GAAG,aAAa,GAAG,OAAO,EAAE;AACrF,QAAM,QAAQ,aAAa,WAAW,WAAW,OAAO,GAAG,OAAO;AAClE,MAAI,OAAO;AACX,WAAS,WAAW,GAAG,WAAW,MAAM,QAAQ,YAAY,GAAG;AAC3D,QAAI,SAAS,uBAAuB;AAChC,aAAO;AAAA,IACX;AACA,QAAI,OAAO,QAAQ,QAAQ,CAAC,GAAG;AAC3B,cAAQ;AAAA,IACZ;AAAA,EACJ;AACA,SAAO,MAAM;AACjB;AASO,SAAS,eAAe,UAAU,SAAS;AAC9C,SAAO,WAAW,YAAY,IAAI,OAAO,EAAE,WAAW,QAAQ,OAAO,EAAE;AAC3E;"}

package/dist/inputs/selectAllState.js

@@ -0,0 +1,20 @@
+function selectAllStateOf(selectedValues, candidateValues) {
+  const selected = new Set(selectedValues);
+  const chosenCount = candidateValues.filter((value) => selected.has(value)).length;
+  const allChosen = candidateValues.length > 0 && chosenCount === candidateValues.length;
+  return {
+    allChosen,
+    someChosen: chosenCount > 0 && !allChosen,
+    toggled: () => {
+      if (allChosen) {
+        const candidates = new Set(candidateValues);
+        return selectedValues.filter((value) => !candidates.has(value));
+      }
+      return [...selectedValues, ...candidateValues.filter((value) => !selected.has(value))];
+    }
+  };
+}
+export {
+  selectAllStateOf
+};
+//# sourceMappingURL=selectAllState.js.map

package/dist/inputs/selectAllState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectAllState.js","sources":["../../src/inputs/selectAllState.js"],"sourcesContent":["// «Elegir todos» de una lista de varias opciones: si su casilla va marcada, a medias o vacía, y qué queda al picarla.\n// Lo comparten la lista desplegable, el catálogo con buscador y el grupo de casillas.\n//\n// «Todos» son los candidatos: todas las opciones, o las que coinciden con lo buscado. Picarlo con todos ya elegidos los\n// quita; si no, agrega los que faltan al final (lo que ya estaba elegido se queda en su orden).\n//\n// Puro (sin React): se prueba con node (selectAllState.test.js).\n//\n// Genérico del paquete: function (regla de la casa).\n\n/**\n * @template T\n * @param {T[]} selectedValues lo elegido hoy\n * @param {T[]} candidateValues lo que abarca «todos» (sin las opciones apagadas)\n * @returns {{allChosen: boolean, someChosen: boolean, toggled: () => T[]}} someChosen: algunos sí y otros no (casilla a medias)\n */\nexport function selectAllStateOf(selectedValues, candidateValues) {\n    const selected = new Set(selectedValues);\n    const chosenCount = candidateValues.filter((value) => selected.has(value)).length;\n    const allChosen = candidateValues.length > 0 && chosenCount === candidateValues.length;\n    return {\n        allChosen,\n        someChosen: chosenCount > 0 && !allChosen,\n        toggled: () => {\n            if (allChosen) {\n                const candidates = new Set(candidateValues);\n                return selectedValues.filter((value) => !candidates.has(value));\n            }\n            return [...selectedValues, ...candidateValues.filter((value) => !selected.has(value))];\n        },\n    };\n}\n"],"names":[],"mappings":"AAgBO,SAAS,iBAAiB,gBAAgB,iBAAiB;AAC9D,QAAM,WAAW,IAAI,IAAI,cAAc;AACvC,QAAM,cAAc,gBAAgB,OAAO,CAAC,UAAU,SAAS,IAAI,KAAK,CAAC,EAAE;AAC3E,QAAM,YAAY,gBAAgB,SAAS,KAAK,gBAAgB,gBAAgB;AAChF,SAAO;AAAA,IACH;AAAA,IACA,YAAY,cAAc,KAAK,CAAC;AAAA,IAChC,SAAS,MAAM;AACX,UAAI,WAAW;AACX,cAAM,aAAa,IAAI,IAAI,eAAe;AAC1C,eAAO,eAAe,OAAO,CAAC,UAAU,CAAC,WAAW,IAAI,KAAK,CAAC;AAAA,MAClE;AACA,aAAO,CAAC,GAAG,gBAAgB,GAAG,gBAAgB,OAAO,CAAC,UAAU,CAAC,SAAS,IAAI,KAAK,CAAC,CAAC;AAAA,IACzF;AAAA,EACR;AACA;"}

package/dist/inputs/useRowKeys.js

@@ -0,0 +1,26 @@
+"use client";
+import { useRef } from "react";
+import { newIdentifier } from "../identifiers.js";
+function useRowKeys(rowCount) {
+  const keysRef = useRef([]);
+  if (keysRef.current.length !== rowCount) {
+    keysRef.current = Array.from({ length: rowCount }, (unused, index) => keysRef.current[index] ?? newIdentifier());
+  }
+  return {
+    keys: keysRef.current,
+    added: () => {
+      keysRef.current = [...keysRef.current, newIdentifier()];
+    },
+    removed: (index) => {
+      keysRef.current = keysRef.current.filter((unused, keyIndex) => keyIndex !== index);
+    },
+    // un renglón limpio es otro renglón: los campos de adentro empiezan de cero
+    renewed: (index) => {
+      keysRef.current = keysRef.current.map((key, keyIndex) => keyIndex === index ? newIdentifier() : key);
+    }
+  };
+}
+export {
+  useRowKeys
+};
+//# sourceMappingURL=useRowKeys.js.map

package/dist/inputs/useRowKeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowKeys.js","sources":["../../src/inputs/useRowKeys.js"],"sourcesContent":["// Una llave estable por renglón de una lista que se repite, para formik (react-hook-form ya trae la suya en useFieldArray).\n//\n// Por qué no el índice: al quitar el renglón 2, el 3 pasa a ser el 2; con el índice como llave React le dejaría al nuevo\n// 2 lo que tenía el viejo (lo escrito a medias en una lista de opciones, un error), y se vería el dato de otro renglón.\n//\n// Si la lista cambia desde afuera (el formulario se limpia o llega del servidor), las llaves se vuelven a hacer.\n//\n// Hook genérico: function (regla de la casa).\nimport {useRef} from 'react';\n\nimport {newIdentifier} from '@/identifiers.js';\n\n/**\n * @param {number} rowCount cuántos renglones tiene la lista hoy\n * @returns {{keys: string[], added: () => void, removed: (index: number) => void, renewed: (index: number) => void}}\n *     added / removed / renewed se llaman JUNTO con el cambio de la lista (agregar al final, quitar uno, limpiar uno)\n */\nexport function useRowKeys(rowCount) {\n    const keysRef = useRef([]);\n    // la lista cambió desde afuera: tantas llaves como renglones\n    if (keysRef.current.length !== rowCount) {\n        keysRef.current = Array.from({length: rowCount}, (unused, index) => keysRef.current[index] ?? newIdentifier());\n    }\n    return {\n        keys: keysRef.current,\n        added: () => {\n            keysRef.current = [...keysRef.current, newIdentifier()];\n        },\n        removed: (index) => {\n            keysRef.current = keysRef.current.filter((unused, keyIndex) => keyIndex !== index);\n        },\n        // un renglón limpio es otro renglón: los campos de adentro empiezan de cero\n        renewed: (index) => {\n            keysRef.current = keysRef.current.map((key, keyIndex) => (keyIndex === index ? newIdentifier() : key));\n        },\n    };\n}\n"],"names":[],"mappings":";;;AAiBO,SAAS,WAAW,UAAU;AACjC,QAAM,UAAU,OAAO,EAAE;AAEzB,MAAI,QAAQ,QAAQ,WAAW,UAAU;AACrC,YAAQ,UAAU,MAAM,KAAK,EAAC,QAAQ,SAAQ,GAAG,CAAC,QAAQ,UAAU,QAAQ,QAAQ,KAAK,KAAK,cAAa,CAAE;AAAA,EACjH;AACA,SAAO;AAAA,IACH,MAAM,QAAQ;AAAA,IACd,OAAO,MAAM;AACT,cAAQ,UAAU,CAAC,GAAG,QAAQ,SAAS,cAAa,CAAE;AAAA,IAC1D;AAAA,IACA,SAAS,CAAC,UAAU;AAChB,cAAQ,UAAU,QAAQ,QAAQ,OAAO,CAAC,QAAQ,aAAa,aAAa,KAAK;AAAA,IACrF;AAAA;AAAA,IAEA,SAAS,CAAC,UAAU;AAChB,cAAQ,UAAU,QAAQ,QAAQ,IAAI,CAAC,KAAK,aAAc,aAAa,QAAQ,cAAa,IAAK,GAAI;AAAA,IACzG;AAAA,EACR;AACA;"}

package/dist/kanban/KanbanBoard.js

@@ -27,7 +27,7 @@ import { DUE_STATUS, todayIsoDateOf, dueStatusOf } from "./kanbanCards.js";
 import { cardsOfColumn, isOverLimit } from "./kanbanMoves.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import ActionsMenu from "../ui/actions/ActionsMenu.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 import { tagOf } from "../ui/labels/tagOf.js";
 const THEME_NAME = "CalcitaKanbanBoard";
@@ -180,7 +180,7 @@ function QuickAdd({ columnTitle, onAdd, onClose, t }) {
     }
   );
 }
-function KanbanBoard(props) {
+function KanbanBoardContent(props) {
   const {
     columns,
     cards,
@@ -367,6 +367,7 @@ function KanbanBoard(props) {
     );
   }) }) });
 }
+const KanbanBoard = withPieceSlots(KanbanBoardContent, THEME_NAME);
 export {
   KanbanBoard as default
 };