@stackcraftmx/calcita 0.0.0-stage → 0.23.0

package/dist/inputs/FormSection.js

@@ -0,0 +1,105 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+import { FormSectionContext } from "./formLayoutContext.js";
+import { GLASS_PANEL_RADIUS_PIXELS, accentTextStylesOf, fieldWellStylesOf } from "../theme/glassSurface.js";
+const FORM_ROW_CLASS = "calcita-form-row";
+const ROW_MIN_HEIGHT_PIXELS = 52;
+const ROW_PADDING_BLOCK_PIXELS = 8;
+const LABEL_COLUMN = Object.freeze({ share: "38%", maxPixels: 200 });
+const LABEL_TOP_PIXELS = 8;
+const RING = Object.freeze({ focusPercent: 45, errorPercent: 60, pixels: 2 });
+function rowControlSxOf(theme) {
+  const palette = (theme.vars ?? theme).palette;
+  const strong = (selectors) => selectors.map((selector) => `html body &&& ${selector}`).join(", ");
+  const roots = [".MuiOutlinedInput-root", ".MuiFilledInput-root", ".MuiPickersOutlinedInput-root"];
+  const ringOf = (color, percent) => ({ outline: `${RING.pixels}px solid color-mix(in srgb, ${color} ${percent}%, transparent)`, outlineOffset: 0 });
+  return {
+    [strong(roots)]: { ...fieldWellStylesOf(theme), outline: "none" },
+    [strong(roots.map((root) => `${root}.Mui-focused`))]: ringOf(palette.primary.main, RING.focusPercent),
+    [strong(roots.map((root) => `${root}.Mui-error`))]: ringOf(palette.error.main, RING.errorPercent),
+    [strong([".MuiOutlinedInput-notchedOutline", ".MuiPickersOutlinedInput-notchedOutline"])]: { display: "none" },
+    [strong([".MuiFilledInput-root::before", ".MuiFilledInput-root::after"])]: { display: "none" },
+    // la fecha: el mismo campo que los demás, a todo lo ancho de su columna (en cápsula al final del renglón quedaba
+    // descuadrada, con su ayuda a la izquierda debajo de nada; lo reportaron), con el ícono del calendario discreto
+    [strong([".MuiPickersOutlinedInput-root"])]: { color: palette.text.primary },
+    [strong([".MuiPickersOutlinedInput-root .MuiInputAdornment-root .MuiSvgIcon-root"])]: { fontSize: "1.125rem", color: palette.text.secondary },
+    // la ayuda y el error, debajo del campo; el renglón no guarda lugar para una ayuda vacía
+    "& .MuiFormHelperText-root": { marginInline: theme.spacing(0.5), marginTop: "4px", marginBottom: "2px" },
+    "& .MuiFormHelperText-root:has(> .notranslate:only-child)": { display: "none" }
+  };
+}
+function FormRow({ label, htmlFor, labelId, children }) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: FORM_ROW_CLASS,
+      sx: (theme) => {
+        const palette = (theme.vars ?? theme).palette;
+        return {
+          position: "relative",
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 2,
+          minHeight: ROW_MIN_HEIGHT_PIXELS,
+          px: 2,
+          py: `${ROW_PADDING_BLOCK_PIXELS}px`,
+          "&:focus-within > label": accentTextStylesOf(theme),
+          "&:has(.Mui-error) > label": { color: palette.error.main },
+          ...rowControlSxOf(theme)
+        };
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "label",
+            id: labelId,
+            htmlFor,
+            variant: "body1",
+            sx: { flex: `0 0 ${LABEL_COLUMN.share}`, maxWidth: LABEL_COLUMN.maxPixels, pt: `${LABEL_TOP_PIXELS}px`, lineHeight: 1.5, color: "text.primary" },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { sx: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", justifyContent: "center", minHeight: 40 }, children })
+      ]
+    }
+  );
+}
+function FormSection({ title, footer, children }) {
+  const titleId = useId();
+  return /* @__PURE__ */ jsx(FormSectionContext, { value: true, children: /* @__PURE__ */ jsxs(Box, { component: "section", "aria-labelledby": title ? titleId : void 0, children: [
+    title && /* @__PURE__ */ jsx(Typography, { id: titleId, variant: "subtitle2", component: "h2", color: "text.secondary", sx: { px: 2, mb: 0.75, fontWeight: 600 }, children: title }),
+    /* @__PURE__ */ jsx(
+      Paper,
+      {
+        variant: "outlined",
+        sx: (theme) => ({
+          borderRadius: `${GLASS_PANEL_RADIUS_PIXELS}px`,
+          overflow: "hidden",
+          // la línea entre dos renglones seguidos, desde donde empieza el texto
+          [`& > .${FORM_ROW_CLASS} + .${FORM_ROW_CLASS}::before`]: {
+            content: '""',
+            position: "absolute",
+            top: 0,
+            right: 0,
+            left: theme.spacing(2),
+            height: "1px",
+            backgroundColor: (theme.vars ?? theme).palette.divider
+          }
+        }),
+        children
+      }
+    ),
+    footer && /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "p", color: "text.secondary", sx: { px: 2, mt: 0.75 }, children: footer })
+  ] }) });
+}
+export {
+  FORM_ROW_CLASS,
+  FormRow,
+  FormSection as default
+};
+//# sourceMappingURL=FormSection.js.map

package/dist/inputs/FormSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSection.js","sources":["../../src/inputs/FormSection.jsx"],"sourcesContent":["// El formulario agrupado de Apple (el de Ajustes y el de la hoja «Nuevo evento» de Calendario): una tarjeta redonda con\n// renglones, el título de la sección arriba de la tarjeta y la explicación abajo. Dentro de una FormSection cada campo del\n// framework (TextInput, NumberInput, SelectInput, CatalogInput, ColorInput, DateInput y sus versiones de formik y de\n// react-hook-form) se pinta solo como renglón: la etiqueta a la izquierda y el campo a la derecha.\n//\n//   <FormSection title=\"Datos del cliente\" footer=\"Le enviaremos la factura al correo.\">\n//       <FormTextField name=\"name\" label=\"Nombre\" />\n//       <FormTextField name=\"email\" label=\"Correo\" />\n//       <FormRow label=\"Recibir avisos\"><Switch /></FormRow>\n//   </FormSection>\n//\n// Las reglas, de la guía de Apple (HIG «Text fields», «Pickers», «Combo boxes» y sus imágenes):\n//   - la etiqueta siempre a la vista, a la izquierda (la pista se va al escribir; la etiqueta no);\n//   - el campo es un «pozo» parejo con esquinas de 12 px (fieldWellStylesOf): gris tenue en claro y más oscuro que la\n//     tarjeta en oscuro, con la letra clara, como el campo de la imagen de Apple. Antes iba transparente y el relleno solo\n//     salía con el cursor encima, en cuadro: no se entendía dónde escribir (lo reportaron);\n//   - la fecha es el mismo campo que los demás, a todo lo ancho (en cápsula al final del renglón quedaba descuadrada), con\n//     la letra del texto (no del color del tema: en oscuro el naranja ahí «se veía horrible», lo reportaron);\n//   - al escribir, un aro tenue del color principal y la etiqueta del color del tema; con error, aro y etiqueta en rojo y\n//     el mensaje debajo del campo;\n//   - una línea fina entre renglones, que empieza donde empieza el texto.\n//\n// OJO: los campos van DIRECTO dentro de la FormSection (sin Grid ni Stack en medio): la línea entre renglones se dibuja\n// entre hermanos.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport Box from '@mui/material/Box';\nimport Paper from '@mui/material/Paper';\nimport Typography from '@mui/material/Typography';\n\nimport {FormSectionContext} from '@/inputs/formLayoutContext.js';\nimport {GLASS_PANEL_RADIUS_PIXELS, accentTextStylesOf, fieldWellStylesOf} from '@/theme/glassSurface.js';\n\n/** La clase de cada renglón: la sección dibuja la línea entre dos renglones seguidos. */\nexport const FORM_ROW_CLASS = 'calcita-form-row';\n\n// el renglón: alto mínimo para el dedo, su aire arriba y abajo, y lo ancho de la columna de las etiquetas\nconst ROW_MIN_HEIGHT_PIXELS = 52;\nconst ROW_PADDING_BLOCK_PIXELS = 8;\nconst LABEL_COLUMN = Object.freeze({share: '38%', maxPixels: 200});\n// lo que la etiqueta baja para quedar en la misma línea que el texto del campo (el campo mide 40 px y su letra 24 px)\nconst LABEL_TOP_PIXELS = 8;\n// el aro al escribir y con error (por ciento del color) y su grosor\nconst RING = Object.freeze({focusPercent: 45, errorPercent: 60, pixels: 2});\n\n/**\n * Los campos de MUI dentro de un renglón: el pozo de Apple (fieldWellStylesOf), sin el borde de MUI ni el vidrio del tema,\n * con su aro al escribir. Los selectores van con «html body &&&» para ganarle a los ajustes del tema dentro de una\n * tarjeta, que con el lente llevan una etiqueta y hasta cuatro clases (con menos, el relleno del tema salía al pasar el\n * cursor, en cuadro: los «hovers espantosos» que reportaron).\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction rowControlSxOf(theme) {\n    const palette = (theme.vars ?? theme).palette;\n    const strong = (selectors) => selectors.map((selector) => `html body &&& ${selector}`).join(', ');\n    const roots = ['.MuiOutlinedInput-root', '.MuiFilledInput-root', '.MuiPickersOutlinedInput-root'];\n    const ringOf = (color, percent) => ({outline: `${RING.pixels}px solid color-mix(in srgb, ${color} ${percent}%, transparent)`, outlineOffset: 0});\n    return {\n        [strong(roots)]: {...fieldWellStylesOf(theme), outline: 'none'},\n        [strong(roots.map((root) => `${root}.Mui-focused`))]: ringOf(palette.primary.main, RING.focusPercent),\n        [strong(roots.map((root) => `${root}.Mui-error`))]: ringOf(palette.error.main, RING.errorPercent),\n        [strong(['.MuiOutlinedInput-notchedOutline', '.MuiPickersOutlinedInput-notchedOutline'])]: {display: 'none'},\n        [strong(['.MuiFilledInput-root::before', '.MuiFilledInput-root::after'])]: {display: 'none'},\n        // la fecha: el mismo campo que los demás, a todo lo ancho de su columna (en cápsula al final del renglón quedaba\n        // descuadrada, con su ayuda a la izquierda debajo de nada; lo reportaron), con el ícono del calendario discreto\n        [strong(['.MuiPickersOutlinedInput-root'])]: {color: palette.text.primary},\n        [strong(['.MuiPickersOutlinedInput-root .MuiInputAdornment-root .MuiSvgIcon-root'])]: {fontSize: '1.125rem', color: palette.text.secondary},\n        // la ayuda y el error, debajo del campo; el renglón no guarda lugar para una ayuda vacía\n        '& .MuiFormHelperText-root': {marginInline: theme.spacing(0.5), marginTop: '4px', marginBottom: '2px'},\n        '& .MuiFormHelperText-root:has(> .notranslate:only-child)': {display: 'none'},\n    };\n}\n\n/**\n * Un renglón del formulario agrupado: la etiqueta a la izquierda y lo que sea a la derecha (un campo, un interruptor, un\n * texto). Los campos del framework lo usan solos dentro de una FormSection; FormRow suelto es para lo demás.\n *\n * @param {object} props\n * @param {import('react').ReactNode} props.label ya traducida\n * @param {string} [props.htmlFor] el id del campo que nombra la etiqueta\n * @param {string} [props.labelId] el id de la etiqueta (para un campo que la nombra con aria-labelledby)\n * @param {import('react').ReactNode} props.children\n */\nexport function FormRow({label, htmlFor, labelId, children}) {\n    return (\n        <Box className={FORM_ROW_CLASS}\n             sx={(theme) => {\n                 const palette = (theme.vars ?? theme).palette;\n                 return {\n                     position: 'relative',\n                     display: 'flex',\n                     alignItems: 'flex-start',\n                     gap: 2,\n                     minHeight: ROW_MIN_HEIGHT_PIXELS,\n                     px: 2,\n                     py: `${ROW_PADDING_BLOCK_PIXELS}px`,\n                     '&:focus-within > label': accentTextStylesOf(theme),\n                     '&:has(.Mui-error) > label': {color: palette.error.main},\n                     ...rowControlSxOf(theme),\n                 };\n             }}>\n            <Typography component=\"label\" id={labelId} htmlFor={htmlFor} variant=\"body1\"\n                        sx={{flex: `0 0 ${LABEL_COLUMN.share}`, maxWidth: LABEL_COLUMN.maxPixels, pt: `${LABEL_TOP_PIXELS}px`, lineHeight: 1.5, color: 'text.primary'}}>\n                {label}\n            </Typography>\n            <Box sx={{flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', minHeight: 40}}>\n                {children}\n            </Box>\n        </Box>\n    );\n}\n\n/**\n * @param {object} props\n * @param {string} [props.title] ya traducido; va arriba de la tarjeta\n * @param {import('react').ReactNode} [props.footer] la explicación, abajo de la tarjeta\n * @param {import('react').ReactNode} props.children los campos, directo (ver el OJO de arriba)\n */\nexport default function FormSection({title, footer, children}) {\n    const titleId = useId();\n    return (\n        <FormSectionContext value>\n            <Box component=\"section\" aria-labelledby={title ? titleId : undefined}>\n                {title && (\n                    <Typography id={titleId} variant=\"subtitle2\" component=\"h2\" color=\"text.secondary\" sx={{px: 2, mb: 0.75, fontWeight: 600}}>\n                        {title}\n                    </Typography>\n                )}\n                <Paper variant=\"outlined\"\n                       sx={(theme) => ({\n                           borderRadius: `${GLASS_PANEL_RADIUS_PIXELS}px`,\n                           overflow: 'hidden',\n                           // la línea entre dos renglones seguidos, desde donde empieza el texto\n                           [`& > .${FORM_ROW_CLASS} + .${FORM_ROW_CLASS}::before`]: {\n                               content: '\"\"', position: 'absolute', top: 0, right: 0, left: theme.spacing(2), height: '1px',\n                               backgroundColor: (theme.vars ?? theme).palette.divider,\n                           },\n                       })}>\n                    {children}\n                </Paper>\n                {footer && (\n                    <Typography variant=\"caption\" component=\"p\" color=\"text.secondary\" sx={{px: 2, mt: 0.75}}>{footer}</Typography>\n                )}\n            </Box>\n        </FormSectionContext>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/inputs/NumberInput.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import InputAdornment from "@mui/material/InputAdornment";
+import TextField from "@mui/material/TextField";
+import { translateValidationMessage } from "../forms/validationMessages.js";
+import FieldFrame from "./FieldFrame.js";
+import { groupThousands, completeDecimals, cleanNumberText } from "./numberText.js";
+const SEPARATORS_ROOM = 6;
+function NumberInput({
+  name,
+  label,
+  value,
+  onChange,
+  onBlur,
+  error,
+  helperText = " ",
+  decimals = 2,
+  allowNegative = false,
+  prefix,
+  suffix,
+  maxDigits = 17,
+  disabled = false,
+  inputRef
+}) {
+  const { t } = useToolkitTranslation("common");
+  const generatedId = useId();
+  const inputId = `${name ?? "number"}-${generatedId}`;
+  const [isTyping, setIsTyping] = useState(false);
+  const errorText = translateValidationMessage(t, error);
+  const valueText = value === null || value === void 0 ? "" : String(value);
+  const shownText = groupThousands(isTyping ? valueText : completeDecimals(valueText, decimals));
+  return /* @__PURE__ */ jsx(FieldFrame, { inputId, label, children: /* @__PURE__ */ jsx(
+    TextField,
+    {
+      name,
+      id: inputId,
+      inputRef,
+      value: shownText,
+      disabled,
+      size: "small",
+      fullWidth: true,
+      error: Boolean(errorText),
+      helperText: errorText ?? helperText,
+      onFocus: () => setIsTyping(true),
+      onChange: (event) => onChange(cleanNumberText(event.target.value, decimals, allowNegative)),
+      onBlur: () => {
+        setIsTyping(false);
+        const completedText = completeDecimals(cleanNumberText(valueText, decimals, allowNegative), decimals);
+        if (completedText !== valueText) {
+          onChange(completedText);
+        }
+        onBlur?.();
+      },
+      slotProps: {
+        htmlInput: { inputMode: "decimal", maxLength: maxDigits + SEPARATORS_ROOM, style: { textAlign: "right" } },
+        input: {
+          startAdornment: prefix ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: prefix }) : void 0,
+          endAdornment: suffix ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: suffix }) : void 0
+        }
+      }
+    }
+  ) });
+}
+export {
+  NumberInput as default
+};
+//# sourceMappingURL=NumberInput.js.map

package/dist/inputs/NumberInput.js.map

@@ -0,0 +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';\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 */\nexport default function NumberInput({\n    name, label, value, onChange, onBlur, error, helperText = ' ', decimals = 2, allowNegative = false, prefix, suffix, maxDigits = 17,\n    disabled = false, inputRef,\n}) {\n    const {t} = useToolkitTranslation('common');\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":";;;;;;;;;AAmBA,MAAM,kBAAkB;AAmBxB,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;AACtB,GAAG;AACC,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,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;"}

package/dist/inputs/SelectInput.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+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";
+function SelectInput({
+  name,
+  label,
+  value,
+  onChange,
+  onBlur,
+  options,
+  error,
+  helperText = " ",
+  placeholder,
+  disabled = false,
+  inputRef
+}) {
+  const { t } = useToolkitTranslation("common");
+  const generatedId = useId();
+  const inputId = `${name ?? "select"}-${generatedId}`;
+  const labelId = `${inputId}-label`;
+  const errorText = translateValidationMessage(t, error);
+  const placeholderText = /* @__PURE__ */ jsx(
+    Typography,
+    {
+      component: "span",
+      color: disabled ? "text.disabled" : "text.secondary",
+      children: placeholder ?? t("form.selectPlaceholder")
+    }
+  );
+  const renderSelectedValue = (selectedValue) => options.find((option) => option.value === selectedValue)?.label ?? placeholderText;
+  return /* @__PURE__ */ jsx(FieldFrame, { inputId, labelId, label, children: /* @__PURE__ */ jsxs(
+    TextField,
+    {
+      name,
+      id: inputId,
+      inputRef,
+      select: true,
+      size: "small",
+      fullWidth: true,
+      disabled,
+      value: value ?? "",
+      onChange: (event) => onChange(event.target.value),
+      onBlur,
+      error: Boolean(errorText),
+      helperText: errorText ?? helperText,
+      slotProps: { select: { displayEmpty: true, renderValue: renderSelectedValue, labelId } },
+      children: [
+        /* @__PURE__ */ jsx(MenuItem, { value: "", disabled: true, children: placeholderText }),
+        options.map((option) => /* @__PURE__ */ jsxs(MenuItem, { value: option.value, sx: { whiteSpace: "normal", flexDirection: "column", alignItems: "flex-start" }, 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))
+      ]
+    }
+  ) });
+}
+export {
+  SelectInput as default
+};
+//# sourceMappingURL=SelectInput.js.map

package/dist/inputs/SelectInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.js","sources":["../../src/inputs/SelectInput.jsx"],"sourcesContent":["// Lista desplegable suelta, con la etiqueta arriba (mismo look que TextInput): la que pintan FormSelectField (formik) y la\n// de react-hook-form, y la que se usa sin formulario.\n//\n// Cada opción puede traer una explicación (description) que se lee en la lista para escoger; en la caja queda solo el\n// nombre de lo elegido. OJO: sin renderValue, MUI copiaba la opción completa a la caja y se leía «MenudeoCompra por pieza…».\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport MenuItem from '@mui/material/MenuItem';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\n\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\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 '' = sin elegir\n * @param {(value: string|number) => void} props.onChange recibe el valor elegido, no el evento\n * @param {() => void} [props.onBlur]\n * @param {Array<{value: string|number, label: string, description?: string}>} props.options\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] ayuda fija; el error la reemplaza\n * @param {string} [props.placeholder] texto de la opción vacía\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n */\nexport default function SelectInput({\n    name, label, value, onChange, onBlur, options, error, helperText = ' ', placeholder, disabled = false, inputRef,\n}) {\n    const {t} = useToolkitTranslation('common');\n    const generatedId = useId();\n    const inputId = `${name ?? 'select'}-${generatedId}`;\n    // OJO: la lista desplegable de MUI es un div y no un <input>: el `for` de la etiqueta no la une. Se nombra con su etiqueta\n    // por aria-labelledby (labelId); sin esto el lector de pantalla no decía «Ciudad», solo lo elegido\n    const labelId = `${inputId}-label`;\n    const errorText = translateValidationMessage(t, error);\n    const placeholderText = (\n        <Typography component=\"span\"\n                    // OJO: el placeholder de un select activo se lee (text.secondary); text.disabled solo con el campo inactivo\n                    color={disabled ? 'text.disabled' : 'text.secondary'}>{placeholder ?? t('form.selectPlaceholder')}</Typography>\n    );\n    const renderSelectedValue = (selectedValue) => options.find((option) => option.value === selectedValue)?.label ?? placeholderText;\n\n    return (\n        <FieldFrame inputId={inputId} labelId={labelId} label={label}>\n            <TextField\n                name={name}\n                id={inputId}\n                inputRef={inputRef}\n                select\n                size=\"small\"\n                fullWidth\n                disabled={disabled}\n                value={value ?? ''}\n                onChange={(event) => onChange(event.target.value)}\n                onBlur={onBlur}\n                error={Boolean(errorText)}\n                helperText={errorText ?? helperText}\n                slotProps={{select: {displayEmpty: true, renderValue: renderSelectedValue, labelId}}}>\n                <MenuItem value=\"\" disabled>{placeholderText}</MenuItem>\n                {options.map((option) => (\n                    <MenuItem key={option.value} value={option.value} sx={{whiteSpace: 'normal', flexDirection: 'column', alignItems: 'flex-start'}}>\n                        <Typography component=\"span\" variant=\"body2\">{option.label}</Typography>\n                        {option.description && (\n                            <Typography component=\"span\" variant=\"caption\" color=\"text.secondary\">{option.description}</Typography>\n                        )}\n                    </MenuItem>\n                ))}\n            </TextField>\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;AA8BA,SAAwB,YAAY;AAAA,EAChC;AAAA,EAAM;AAAA,EAAO;AAAA,EAAO;AAAA,EAAU;AAAA,EAAQ;AAAA,EAAS;AAAA,EAAO,aAAa;AAAA,EAAK;AAAA,EAAa,WAAW;AAAA,EAAO;AAC3G,GAAG;AACC,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,GAAG,QAAQ,QAAQ,IAAI,WAAW;AAGlD,QAAM,UAAU,GAAG,OAAO;AAC1B,QAAM,YAAY,2BAA2B,GAAG,KAAK;AACrD,QAAM,kBACF;AAAA,IAAC;AAAA,IAAA;AAAA,MAAW,WAAU;AAAA,MAEV,OAAO,WAAW,kBAAkB;AAAA,MAAmB,UAAA,eAAe,EAAE,wBAAwB;AAAA,IAAA;AAAA,EAAA;AAEhH,QAAM,sBAAsB,CAAC,kBAAkB,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,aAAa,GAAG,SAAS;AAElH,SACI,oBAAC,YAAA,EAAW,SAAkB,SAAkB,OAC5C,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,IAAI;AAAA,MACJ;AAAA,MACA,QAAM;AAAA,MACN,MAAK;AAAA,MACL,WAAS;AAAA,MACT;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,MAChD;AAAA,MACA,OAAO,QAAQ,SAAS;AAAA,MACxB,YAAY,aAAa;AAAA,MACzB,WAAW,EAAC,QAAQ,EAAC,cAAc,MAAM,aAAa,qBAAqB,UAAO;AAAA,MAClF,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAS,OAAM,IAAG,UAAQ,MAAE,UAAA,iBAAgB;AAAA,QAC5C,QAAQ,IAAI,CAAC,WACV,qBAAC,YAA4B,OAAO,OAAO,OAAO,IAAI,EAAC,YAAY,UAAU,eAAe,UAAU,YAAY,gBAC9G,UAAA;AAAA,UAAA,oBAAC,cAAW,WAAU,QAAO,SAAQ,SAAS,iBAAO,OAAM;AAAA,UAC1D,OAAO,eACJ,oBAAC,YAAA,EAAW,WAAU,QAAO,SAAQ,WAAU,OAAM,kBAAkB,UAAA,OAAO,YAAA,CAAY;AAAA,QAAA,EAAA,GAHnF,OAAO,KAKtB,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAET;AAER;"}

package/dist/inputs/TextInput.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useId } from "react";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
+import CancelIcon from "@mui/icons-material/Cancel";
+import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined";
+import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
+import { translateValidationMessage } from "../forms/validationMessages.js";
+import FieldFrame from "./FieldFrame.js";
+const CLEAR_BUTTON_CLASS = "calcita-clear-button";
+const CLEAR_BUTTON_SX = Object.freeze({
+  [`& .${CLEAR_BUTTON_CLASS}`]: { visibility: "hidden", color: "text.secondary" },
+  [`& .MuiInputBase-root:hover .${CLEAR_BUTTON_CLASS}, & .MuiInputBase-root.Mui-focused .${CLEAR_BUTTON_CLASS}`]: { visibility: "visible" }
+});
+function TextInput({
+  name,
+  label,
+  value,
+  onChange,
+  onBlur,
+  error,
+  type = "text",
+  helperText = " ",
+  startAdornment,
+  endAdornment: customEndAdornment,
+  uppercase = false,
+  normalizeOnBlur,
+  inputRef,
+  clearable = true,
+  ...textFieldProps
+}) {
+  const { t } = useToolkitTranslation("common");
+  const [isRevealed, setIsRevealed] = useState(false);
+  const generatedId = useId();
+  const inputId = textFieldProps.id ?? `${name ?? "text"}-${generatedId}`;
+  const errorText = translateValidationMessage(t, error);
+  const isPassword = type === "password";
+  const revealLabel = isRevealed ? t("form.hidePassword") : t("form.showPassword");
+  const passwordAdornment = isPassword ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(Tooltip, { title: revealLabel, children: /* @__PURE__ */ jsx(IconButton, { size: "small", edge: "end", "aria-label": revealLabel, onClick: () => setIsRevealed((currentValue) => !currentValue), children: isRevealed ? /* @__PURE__ */ jsx(VisibilityOffOutlinedIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(VisibilityOutlinedIcon, { fontSize: "small" }) }) }) }) : void 0;
+  const isEditable = !textFieldProps.disabled && !textFieldProps.slotProps?.htmlInput?.readOnly;
+  const canClear = clearable && !isPassword && !customEndAdornment && isEditable && Boolean(value);
+  const clearAdornment = canClear ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "small",
+      edge: "end",
+      tabIndex: -1,
+      "aria-label": t("form.clear"),
+      className: CLEAR_BUTTON_CLASS,
+      onMouseDown: (event) => event.preventDefault(),
+      onClick: () => onChange(""),
+      children: /* @__PURE__ */ jsx(CancelIcon, { fontSize: "small" })
+    }
+  ) }) : void 0;
+  const endAdornment = customEndAdornment ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: customEndAdornment }) : passwordAdornment ?? clearAdornment;
+  const handleBlur = () => {
+    if (normalizeOnBlur) {
+      const normalizedValue = normalizeOnBlur(value ?? "");
+      if (normalizedValue !== value) {
+        onChange(normalizedValue);
+      }
+    }
+    onBlur?.();
+  };
+  return /* @__PURE__ */ jsx(FieldFrame, { inputId, label, children: /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ...textFieldProps,
+      name,
+      id: inputId,
+      inputRef,
+      value: value ?? "",
+      onChange: (event) => onChange(uppercase ? event.target.value.toUpperCase() : event.target.value),
+      onBlur: handleBlur,
+      type: isPassword && isRevealed ? "text" : type,
+      sx: [CLEAR_BUTTON_SX, ...[].concat(textFieldProps.sx ?? [])],
+      error: Boolean(errorText),
+      helperText: errorText ?? helperText,
+      fullWidth: true,
+      size: "small",
+      slotProps: {
+        input: {
+          startAdornment: startAdornment ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: startAdornment }) : void 0,
+          endAdornment
+        }
+      }
+    }
+  ) });
+}
+export {
+  TextInput as default
+};
+//# sourceMappingURL=TextInput.js.map

package/dist/inputs/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sources":["../../src/inputs/TextInput.jsx"],"sourcesContent":["// Campo de texto suelto, con la etiqueta arriba: el que pintan FormTextField (formik) y el de react-hook-form, y el que se\n// usa sin formulario (controlado: value / onChange).\n//\n// Lo que resuelve, y por lo que existe en vez de un <TextField> suelto:\n//   - el renglón de ayuda está reservado desde el principio, así la tarjeta no brinca cuando aparece un error;\n//   - las contraseñas traen el ojo para revelarlas (con aria-label traducido);\n//   - con texto, la ⓧ para borrarlo de un toque, como los campos de Apple («Display a Clear button in the trailing end of\n//     a text field», HIG «Text fields»). Sale con el cursor encima o al escribir, para que un formulario lleno no se vea\n//     lleno de ⓧ; no entra al recorrido del teclado (con el teclado se borra seleccionando el texto);\n//   - normalizeOnBlur deja el valor como lo va a mandar el formulario (el correo en minúsculas y sin espacios) al salir del\n//     campo: la persona ve lo que se envía;\n//   - uppercase normaliza a mayúsculas mientras se escribe (claves, RFC);\n//   - el error llega como LLAVE de yup ({key, values}) o como texto ya traducido (el del servidor) y se pinta en el idioma\n//     activo. Cuándo enseñarlo (ya se tocó, ya se envió) lo decide quien lo conecta al formulario.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport IconButton from '@mui/material/IconButton';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport TextField from '@mui/material/TextField';\nimport Tooltip from '@mui/material/Tooltip';\nimport CancelIcon from '@mui/icons-material/Cancel';\nimport VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';\nimport VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';\n\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\n\n// la ⓧ de borrar: escondida hasta que el campo tiene el cursor encima o se está escribiendo en él\nconst CLEAR_BUTTON_CLASS = 'calcita-clear-button';\nconst CLEAR_BUTTON_SX = Object.freeze({\n    [`& .${CLEAR_BUTTON_CLASS}`]: {visibility: 'hidden', color: 'text.secondary'},\n    [`& .MuiInputBase-root:hover .${CLEAR_BUTTON_CLASS}, & .MuiInputBase-root.Mui-focused .${CLEAR_BUTTON_CLASS}`]: {visibility: 'visible'},\n});\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|null|undefined} props.value\n * @param {(value: string) => void} props.onChange recibe el texto, no el evento\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error] el error a enseñar (undefined = sin error)\n * @param {string} [props.type] 'password' agrega el ojo\n * @param {string} [props.helperText] ayuda fija; el error la reemplaza\n * @param {string} [props.placeholder] ya traducido; el ejemplo de qué escribir (se va al escribir)\n * @param {import('react').ReactNode} [props.startAdornment]\n * @param {import('react').ReactNode} [props.endAdornment] adorno al final (en contraseñas manda el ojo)\n * @param {boolean} [props.uppercase] normaliza a mayúsculas mientras se escribe\n * @param {(value: string) => string} [props.normalizeOnBlur]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef] para enfocar el campo (react-hook-form lo usa)\n * @param {boolean} [props.clearable] la ⓧ para borrar el texto; por omisión sí (no en contraseñas ni con adorno propio)\n * @param {boolean} [props.multiline] (y lo demás de TextField de MUI: minRows, autoComplete, autoFocus, slotProps, sx…)\n * @param {number} [props.minRows]\n * @param {number} [props.maxRows]\n * @param {string} [props.autoComplete]\n * @param {boolean} [props.autoFocus]\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.required]\n * @param {boolean} [props.fullWidth]\n * @param {string} [props.id]\n * @param {object} [props.slotProps]\n * @param {object} [props.sx]\n */\nexport default function TextInput({\n    name, label, value, onChange, onBlur, error, type = 'text', helperText = ' ', startAdornment, endAdornment: customEndAdornment,\n    uppercase = false, normalizeOnBlur, inputRef, clearable = true, ...textFieldProps\n}) {\n    const {t} = useToolkitTranslation('common');\n    const [isRevealed, setIsRevealed] = useState(false);\n    const generatedId = useId();\n    const inputId = textFieldProps.id ?? `${name ?? 'text'}-${generatedId}`;\n    const errorText = translateValidationMessage(t, error);\n    const isPassword = type === 'password';\n    const revealLabel = isRevealed ? t('form.hidePassword') : t('form.showPassword');\n\n    const passwordAdornment = isPassword ? (\n        <InputAdornment position=\"end\">\n            <Tooltip title={revealLabel}>\n                <IconButton size=\"small\" edge=\"end\" aria-label={revealLabel} onClick={() => setIsRevealed((currentValue) => !currentValue)}>\n                    {isRevealed ? <VisibilityOffOutlinedIcon fontSize=\"small\" /> : <VisibilityOutlinedIcon fontSize=\"small\" />}\n                </IconButton>\n            </Tooltip>\n        </InputAdornment>\n    ) : undefined;\n    const isEditable = !textFieldProps.disabled && !textFieldProps.slotProps?.htmlInput?.readOnly;\n    const canClear = clearable && !isPassword && !customEndAdornment && isEditable && Boolean(value);\n    // onMouseDown sin acción: el foco se queda en el campo al borrar (si no, el campo pierde el foco y se valida de más)\n    const clearAdornment = canClear ? (\n        <InputAdornment position=\"end\">\n            <IconButton size=\"small\" edge=\"end\" tabIndex={-1} aria-label={t('form.clear')} className={CLEAR_BUTTON_CLASS}\n                        onMouseDown={(event) => event.preventDefault()} onClick={() => onChange('')}>\n                <CancelIcon fontSize=\"small\" />\n            </IconButton>\n        </InputAdornment>\n    ) : undefined;\n    const endAdornment = customEndAdornment ? <InputAdornment position=\"end\">{customEndAdornment}</InputAdornment> : (passwordAdornment ?? clearAdornment);\n\n    const handleBlur = () => {\n        if (normalizeOnBlur) {\n            const normalizedValue = normalizeOnBlur(value ?? '');\n            // solo si cambió: un cambio de más dispara una validación de más\n            if (normalizedValue !== value) {\n                onChange(normalizedValue);\n            }\n        }\n        onBlur?.();\n    };\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <TextField\n                {...textFieldProps}\n                name={name}\n                id={inputId}\n                inputRef={inputRef}\n                value={value ?? ''}\n                onChange={(event) => onChange(uppercase ? event.target.value.toUpperCase() : event.target.value)}\n                onBlur={handleBlur}\n                type={isPassword && isRevealed ? 'text' : type}\n                sx={[CLEAR_BUTTON_SX, ...[].concat(textFieldProps.sx ?? [])]}\n                error={Boolean(errorText)}\n                helperText={errorText ?? helperText}\n                fullWidth\n                size=\"small\"\n                slotProps={{\n                    input: {\n                        startAdornment: startAdornment ? <InputAdornment position=\"start\">{startAdornment}</InputAdornment> : undefined,\n                        endAdornment,\n                    },\n                }}\n            />\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/inputs/colorContrast.js

@@ -0,0 +1,46 @@
+const MIN_CONTRAST = 4.5;
+const HEX_COLOR = /^#[0-9A-Fa-f]{6}$/;
+const CHANNEL_MAX = 255;
+const LINEAR_THRESHOLD = 0.04045;
+const LINEAR_DIVISOR = 12.92;
+const GAMMA_OFFSET = 0.055;
+const GAMMA_DIVISOR = 1.055;
+const GAMMA = 2.4;
+const LUMINANCE_WEIGHTS = [0.2126, 0.7152, 0.0722];
+const WHITE_LUMINANCE_PLUS_FLARE = 1.05;
+const FLARE = 0.05;
+const DARKENING_STEP = 0.02;
+function channelsOf(color) {
+  return [1, 3, 5].map((start) => parseInt(color.slice(start, start + 2), 16));
+}
+function linearChannelOf(value) {
+  const scaled = value / CHANNEL_MAX;
+  return scaled <= LINEAR_THRESHOLD ? scaled / LINEAR_DIVISOR : ((scaled + GAMMA_OFFSET) / GAMMA_DIVISOR) ** GAMMA;
+}
+function contrastOnWhite(color) {
+  if (!HEX_COLOR.test(color ?? "")) {
+    return null;
+  }
+  const luminance = channelsOf(color).map(linearChannelOf).reduce((sum, value, position) => sum + value * LUMINANCE_WEIGHTS[position], 0);
+  return WHITE_LUMINANCE_PLUS_FLARE / (luminance + FLARE);
+}
+function readableVariantOf(color) {
+  if (!HEX_COLOR.test(color ?? "")) {
+    return null;
+  }
+  const channels = channelsOf(color);
+  let factor = 1;
+  let candidate = color.toUpperCase();
+  while (contrastOnWhite(candidate) < MIN_CONTRAST && factor > 0) {
+    factor = Math.round((factor - DARKENING_STEP) * 100) / 100;
+    candidate = `#${channels.map((value) => Math.round(value * factor).toString(16).padStart(2, "0")).join("")}`.toUpperCase();
+  }
+  return candidate;
+}
+export {
+  HEX_COLOR,
+  MIN_CONTRAST,
+  contrastOnWhite,
+  readableVariantOf
+};
+//# sourceMappingURL=colorContrast.js.map

package/dist/inputs/colorContrast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorContrast.js","sources":["../../src/inputs/colorContrast.js"],"sourcesContent":["// Contraste de un color contra el papel blanco, con la fórmula de WCAG 2.2 (criterio 1.4.3), y el mismo tono oscurecido lo\n// justo para que se lea. Viene del campo de color de PLD («Identidad de documentos»).\n//\n// Sirve para avisar MIENTRAS se elige un color; si el color importa (un comprobante, la marca de un cliente), el servidor\n// vuelve a revisarlo.\n//\n// Funciones puras, sin React: function (regla de la casa). Se prueban con node --test (colorContrast.test.js).\n\n/** El contraste mínimo de WCAG AA para texto normal. */\nexport const MIN_CONTRAST = 4.5;\n/** Un color escrito como #RRGGBB. */\nexport const HEX_COLOR = /^#[0-9A-Fa-f]{6}$/;\n\nconst CHANNEL_MAX = 255;\n// la fórmula de luminancia relativa de WCAG (sRGB)\nconst LINEAR_THRESHOLD = 0.04045;\nconst LINEAR_DIVISOR = 12.92;\nconst GAMMA_OFFSET = 0.055;\nconst GAMMA_DIVISOR = 1.055;\nconst GAMMA = 2.4;\nconst LUMINANCE_WEIGHTS = [0.2126, 0.7152, 0.0722];\nconst WHITE_LUMINANCE_PLUS_FLARE = 1.05;\nconst FLARE = 0.05;\n// cuánto se oscurece en cada intento al buscar el tono que sí se lee\nconst DARKENING_STEP = 0.02;\n\n/**\n * Los tres canales de un color #RRGGBB, de 0 a 255.\n *\n * @param {string} color\n * @returns {number[]}\n */\nfunction channelsOf(color) {\n    return [1, 3, 5].map((start) => parseInt(color.slice(start, start + 2), 16));\n}\n\n/**\n * Un canal en su valor lineal (la fórmula de WCAG).\n *\n * @param {number} value 0 a 255\n * @returns {number}\n */\nfunction linearChannelOf(value) {\n    const scaled = value / CHANNEL_MAX;\n    return scaled <= LINEAR_THRESHOLD ? scaled / LINEAR_DIVISOR : ((scaled + GAMMA_OFFSET) / GAMMA_DIVISOR) ** GAMMA;\n}\n\n/**\n * Cuánto contrasta un color sobre blanco: 21 es negro, 1 es blanco.\n *\n * @param {string} color #RRGGBB\n * @returns {number|null} null si no es un color #RRGGBB\n */\nexport function contrastOnWhite(color) {\n    if (!HEX_COLOR.test(color ?? '')) {\n        return null;\n    }\n    const luminance = channelsOf(color).map(linearChannelOf).reduce((sum, value, position) => sum + value * LUMINANCE_WEIGHTS[position], 0);\n    return WHITE_LUMINANCE_PLUS_FLARE / (luminance + FLARE);\n}\n\n/**\n * El mismo tono, oscurecido lo justo para llegar a MIN_CONTRAST sobre blanco. Si ya se lee, regresa el mismo.\n *\n * @param {string} color #RRGGBB\n * @returns {string|null} #RRGGBB en mayúsculas; null si no es un color #RRGGBB\n */\nexport function readableVariantOf(color) {\n    if (!HEX_COLOR.test(color ?? '')) {\n        return null;\n    }\n    const channels = channelsOf(color);\n    let factor = 1;\n    let candidate = color.toUpperCase();\n    while (contrastOnWhite(candidate) < MIN_CONTRAST && factor > 0) {\n        factor = Math.round((factor - DARKENING_STEP) * 100) / 100;\n        candidate = `#${channels.map((value) => Math.round(value * factor).toString(16).padStart(2, '0')).join('')}`.toUpperCase();\n    }\n    return candidate;\n}\n"],"names":[],"mappings":"AASY,MAAC,eAAe;AAEhB,MAAC,YAAY;AAEzB,MAAM,cAAc;AAEpB,MAAM,mBAAmB;AACzB,MAAM,iBAAiB;AACvB,MAAM,eAAe;AACrB,MAAM,gBAAgB;AACtB,MAAM,QAAQ;AACd,MAAM,oBAAoB,CAAC,QAAQ,QAAQ,MAAM;AACjD,MAAM,6BAA6B;AACnC,MAAM,QAAQ;AAEd,MAAM,iBAAiB;AAQvB,SAAS,WAAW,OAAO;AACvB,SAAO,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,UAAU,SAAS,MAAM,MAAM,OAAO,QAAQ,CAAC,GAAG,EAAE,CAAC;AAC/E;AAQA,SAAS,gBAAgB,OAAO;AAC5B,QAAM,SAAS,QAAQ;AACvB,SAAO,UAAU,mBAAmB,SAAS,mBAAmB,SAAS,gBAAgB,kBAAkB;AAC/G;AAQO,SAAS,gBAAgB,OAAO;AACnC,MAAI,CAAC,UAAU,KAAK,SAAS,EAAE,GAAG;AAC9B,WAAO;AAAA,EACX;AACA,QAAM,YAAY,WAAW,KAAK,EAAE,IAAI,eAAe,EAAE,OAAO,CAAC,KAAK,OAAO,aAAa,MAAM,QAAQ,kBAAkB,QAAQ,GAAG,CAAC;AACtI,SAAO,8BAA8B,YAAY;AACrD;AAQO,SAAS,kBAAkB,OAAO;AACrC,MAAI,CAAC,UAAU,KAAK,SAAS,EAAE,GAAG;AAC9B,WAAO;AAAA,EACX;AACA,QAAM,WAAW,WAAW,KAAK;AACjC,MAAI,SAAS;AACb,MAAI,YAAY,MAAM,YAAW;AACjC,SAAO,gBAAgB,SAAS,IAAI,gBAAgB,SAAS,GAAG;AAC5D,aAAS,KAAK,OAAO,SAAS,kBAAkB,GAAG,IAAI;AACvD,gBAAY,IAAI,SAAS,IAAI,CAAC,UAAU,KAAK,MAAM,QAAQ,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,YAAW;AAAA,EAC5H;AACA,SAAO;AACX;"}

package/dist/inputs/formLayoutContext.js

@@ -0,0 +1,9 @@
+"use client";
+import { createContext, useContext } from "react";
+const FormSectionContext = createContext(false);
+const useIsInsideFormSection = () => useContext(FormSectionContext);
+export {
+  FormSectionContext,
+  useIsInsideFormSection
+};
+//# sourceMappingURL=formLayoutContext.js.map

package/dist/inputs/formLayoutContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formLayoutContext.js","sources":["../../src/inputs/formLayoutContext.js"],"sourcesContent":["// Si un campo está dentro de una FormSection (el formulario agrupado de Apple): ahí cada campo se pinta como renglón, con\n// la etiqueta a la izquierda y el valor a la derecha. Fuera de ella, la etiqueta va arriba del campo.\n//\n// Va en su propio archivo y no junto a FormSection: FieldFrame lo lee, y así FieldFrame no importa a FormSection (que a su\n// vez usa FormRow).\nimport {createContext, useContext} from 'react';\n\nexport const FormSectionContext = createContext(false);\n\n/** true si el campo va dentro de una FormSection. */\nexport const useIsInsideFormSection = () => useContext(FormSectionContext);\n"],"names":[],"mappings":";;AAOY,MAAC,qBAAqB,cAAc,KAAK;AAGzC,MAAC,yBAAyB,MAAM,WAAW,kBAAkB;"}

package/dist/inputs/numberText.js

@@ -0,0 +1,48 @@
+const DECIMAL_POINT = ".";
+const THOUSANDS_SEPARATOR = ",";
+const DIGITS_PER_GROUP = 3;
+const NEGATIVE_SIGN = "-";
+function cleanNumberText(text, decimals, allowNegative = false) {
+  const rawText = String(text ?? "").trim();
+  const isNegative = allowNegative && rawText.startsWith(NEGATIVE_SIGN);
+  const digitsAndPoints = rawText.replace(/[^\d.]/g, "");
+  const [wholeDigits, ...decimalParts] = digitsAndPoints.split(DECIMAL_POINT);
+  const sign = isNegative ? NEGATIVE_SIGN : "";
+  if (decimalParts.length === 0 || decimals === 0) {
+    return `${sign}${wholeDigits}`;
+  }
+  return `${sign}${wholeDigits}${DECIMAL_POINT}${decimalParts.join("").slice(0, decimals)}`;
+}
+function groupThousands(numberText) {
+  if (numberText === "" || numberText === null || numberText === void 0) {
+    return "";
+  }
+  const text = String(numberText);
+  const sign = text.startsWith(NEGATIVE_SIGN) ? NEGATIVE_SIGN : "";
+  const [wholeDigits, decimalDigits] = text.slice(sign.length).split(DECIMAL_POINT);
+  const groups = [];
+  for (let end = wholeDigits.length; end > 0; end -= DIGITS_PER_GROUP) {
+    groups.unshift(wholeDigits.slice(Math.max(0, end - DIGITS_PER_GROUP), end));
+  }
+  const groupedWhole = groups.join(THOUSANDS_SEPARATOR) || (decimalDigits === void 0 ? "" : "0");
+  return decimalDigits === void 0 ? `${sign}${groupedWhole}` : `${sign}${groupedWhole}${DECIMAL_POINT}${decimalDigits}`;
+}
+function completeDecimals(numberText, decimals) {
+  const sign = numberText.startsWith(NEGATIVE_SIGN) ? NEGATIVE_SIGN : "";
+  const unsignedText = numberText.slice(sign.length);
+  if (unsignedText === "" || unsignedText === DECIMAL_POINT) {
+    return "";
+  }
+  const [wholeDigits, decimalDigits = ""] = unsignedText.split(DECIMAL_POINT);
+  const wholePart = wholeDigits.replace(/^0+(?=\d)/, "") || "0";
+  if (decimals === 0) {
+    return `${sign}${wholePart}`;
+  }
+  return `${sign}${wholePart}${DECIMAL_POINT}${decimalDigits.slice(0, decimals).padEnd(decimals, "0")}`;
+}
+export {
+  cleanNumberText,
+  completeDecimals,
+  groupThousands
+};
+//# sourceMappingURL=numberText.js.map

package/dist/inputs/numberText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberText.js","sources":["../../src/inputs/numberText.js"],"sourcesContent":["// El texto de un número mientras se escribe: lo que se ve («2,850,000.50») y lo que viaja al servidor («2850000.50»).\n//\n// Todo se hace sobre el TEXTO, nunca con números de JavaScript: Number('12345678901234567.89') ya no es exacto y\n// (1.005).toFixed(2) da '1.00'. Así un importe llega al servidor (y a Money) tal cual se escribió.\n//\n// Funciones puras, sin React: function (regla de la casa). Se prueban con node --test (numberText.test.js).\n\nconst DECIMAL_POINT = '.';\nconst THOUSANDS_SEPARATOR = ',';\nconst DIGITS_PER_GROUP = 3;\nconst NEGATIVE_SIGN = '-';\n\n/**\n * Deja solo dígitos y UN punto, con el tope de decimales del campo. Lo demás (letras, comas, espacios) se va.\n *\n * @param {string|number|null|undefined} text lo que se tecleó o se pegó\n * @param {number} decimals cuántos decimales caben\n * @param {boolean} [allowNegative] si se puede escribir el signo de menos al principio\n * @returns {string} '2850000.5'; '' si no quedó nada\n */\nexport function cleanNumberText(text, decimals, allowNegative = false) {\n    const rawText = String(text ?? '').trim();\n    const isNegative = allowNegative && rawText.startsWith(NEGATIVE_SIGN);\n    const digitsAndPoints = rawText.replace(/[^\\d.]/g, '');\n    const [wholeDigits, ...decimalParts] = digitsAndPoints.split(DECIMAL_POINT);\n    const sign = isNegative ? NEGATIVE_SIGN : '';\n    if (decimalParts.length === 0 || decimals === 0) {\n        return `${sign}${wholeDigits}`;\n    }\n    return `${sign}${wholeDigits}${DECIMAL_POINT}${decimalParts.join('').slice(0, decimals)}`;\n}\n\n/**\n * Con separador de miles, sin tocar los decimales que se están escribiendo: '2850000.5' → '2,850,000.5'.\n *\n * @param {string|null|undefined} numberText lo que regresa cleanNumberText\n * @returns {string}\n */\nexport function groupThousands(numberText) {\n    if (numberText === '' || numberText === null || numberText === undefined) {\n        return '';\n    }\n    const text = String(numberText);\n    const sign = text.startsWith(NEGATIVE_SIGN) ? NEGATIVE_SIGN : '';\n    const [wholeDigits, decimalDigits] = text.slice(sign.length).split(DECIMAL_POINT);\n    // los grupos de tres se cuentan de derecha a izquierda: 2850000 → 2,850,000\n    const groups = [];\n    for (let end = wholeDigits.length; end > 0; end -= DIGITS_PER_GROUP) {\n        groups.unshift(wholeDigits.slice(Math.max(0, end - DIGITS_PER_GROUP), end));\n    }\n    const groupedWhole = groups.join(THOUSANDS_SEPARATOR) || (decimalDigits === undefined ? '' : '0');\n    return decimalDigits === undefined ? `${sign}${groupedWhole}` : `${sign}${groupedWhole}${DECIMAL_POINT}${decimalDigits}`;\n}\n\n/**\n * Al salir del campo: con todos sus decimales, completando con ceros y cortando lo de más (nunca redondea).\n * '2850000.5' → '2850000.50'; '1.005' → '1.00'; '' se queda '' (el campo puede ser opcional).\n *\n * @param {string} numberText lo que regresa cleanNumberText\n * @param {number} decimals\n * @returns {string}\n */\nexport function completeDecimals(numberText, decimals) {\n    const sign = numberText.startsWith(NEGATIVE_SIGN) ? NEGATIVE_SIGN : '';\n    const unsignedText = numberText.slice(sign.length);\n    // guard clause: vacío, o solo un punto o un menos, no es un número\n    if (unsignedText === '' || unsignedText === DECIMAL_POINT) {\n        return '';\n    }\n    const [wholeDigits, decimalDigits = ''] = unsignedText.split(DECIMAL_POINT);\n    // sin ceros de más a la izquierda («007» → «7»), pero sin dejar el entero vacío («.5» → «0.5»)\n    const wholePart = wholeDigits.replace(/^0+(?=\\d)/, '') || '0';\n    if (decimals === 0) {\n        return `${sign}${wholePart}`;\n    }\n    // lo de más se corta (un valor que llegó del servidor con más decimales que el campo); nunca se redondea\n    return `${sign}${wholePart}${DECIMAL_POINT}${decimalDigits.slice(0, decimals).padEnd(decimals, '0')}`;\n}\n"],"names":[],"mappings":"AAOA,MAAM,gBAAgB;AACtB,MAAM,sBAAsB;AAC5B,MAAM,mBAAmB;AACzB,MAAM,gBAAgB;AAUf,SAAS,gBAAgB,MAAM,UAAU,gBAAgB,OAAO;AACnE,QAAM,UAAU,OAAO,QAAQ,EAAE,EAAE,KAAI;AACvC,QAAM,aAAa,iBAAiB,QAAQ,WAAW,aAAa;AACpE,QAAM,kBAAkB,QAAQ,QAAQ,WAAW,EAAE;AACrD,QAAM,CAAC,aAAa,GAAG,YAAY,IAAI,gBAAgB,MAAM,aAAa;AAC1E,QAAM,OAAO,aAAa,gBAAgB;AAC1C,MAAI,aAAa,WAAW,KAAK,aAAa,GAAG;AAC7C,WAAO,GAAG,IAAI,GAAG,WAAW;AAAA,EAChC;AACA,SAAO,GAAG,IAAI,GAAG,WAAW,GAAG,aAAa,GAAG,aAAa,KAAK,EAAE,EAAE,MAAM,GAAG,QAAQ,CAAC;AAC3F;AAQO,SAAS,eAAe,YAAY;AACvC,MAAI,eAAe,MAAM,eAAe,QAAQ,eAAe,QAAW;AACtE,WAAO;AAAA,EACX;AACA,QAAM,OAAO,OAAO,UAAU;AAC9B,QAAM,OAAO,KAAK,WAAW,aAAa,IAAI,gBAAgB;AAC9D,QAAM,CAAC,aAAa,aAAa,IAAI,KAAK,MAAM,KAAK,MAAM,EAAE,MAAM,aAAa;AAEhF,QAAM,SAAS,CAAA;AACf,WAAS,MAAM,YAAY,QAAQ,MAAM,GAAG,OAAO,kBAAkB;AACjE,WAAO,QAAQ,YAAY,MAAM,KAAK,IAAI,GAAG,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAAA,EAC9E;AACA,QAAM,eAAe,OAAO,KAAK,mBAAmB,MAAM,kBAAkB,SAAY,KAAK;AAC7F,SAAO,kBAAkB,SAAY,GAAG,IAAI,GAAG,YAAY,KAAK,GAAG,IAAI,GAAG,YAAY,GAAG,aAAa,GAAG,aAAa;AAC1H;AAUO,SAAS,iBAAiB,YAAY,UAAU;AACnD,QAAM,OAAO,WAAW,WAAW,aAAa,IAAI,gBAAgB;AACpE,QAAM,eAAe,WAAW,MAAM,KAAK,MAAM;AAEjD,MAAI,iBAAiB,MAAM,iBAAiB,eAAe;AACvD,WAAO;AAAA,EACX;AACA,QAAM,CAAC,aAAa,gBAAgB,EAAE,IAAI,aAAa,MAAM,aAAa;AAE1E,QAAM,YAAY,YAAY,QAAQ,aAAa,EAAE,KAAK;AAC1D,MAAI,aAAa,GAAG;AAChB,WAAO,GAAG,IAAI,GAAG,SAAS;AAAA,EAC9B;AAEA,SAAO,GAAG,IAAI,GAAG,SAAS,GAAG,aAAa,GAAG,cAAc,MAAM,GAAG,QAAQ,EAAE,OAAO,UAAU,GAAG,CAAC;AACvG;"}