@stackcraftmx/calcita 0.51.0 → 0.53.0

package/dist/hookForm/useHookFormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHookFormField.js","sources":["../../src/hookForm/useHookFormField.js"],"sourcesContent":["// La conexión de un campo suelto (inputs/) con react-hook-form: lo que la vista necesita, sacado de useController.\n//\n// El campo se busca en el formulario de la pantalla (FormProvider); sin él, se le pasa control.\n//\n// Cuándo se enseña el error lo decide react-hook-form (por omisión, al intentar enviar y después al corregir): la vista\n// solo pinta el que llegue. Los errores de yup llegan como llave ({key, values}) y la vista los traduce.\n//\n// Hook genérico del paquete: function (regla de la casa).\nimport {useController, useFormContext} from 'react-hook-form';\n\n/**\n * @param {string} name el campo del formulario\n * @param {object} [control] el de useForm, si la pantalla no usa FormProvider\n * @returns {{name: string, value: unknown, onChange: (value: unknown) => void, onBlur: () => void, inputRef: Function, error: unknown}}\n */\nexport function useHookFormField(name, control) {\n    const formContext = useFormContext();\n    const {field, fieldState} = useController({name, control: control ?? formContext?.control});\n\n    return {\n        name,\n        value: field.value,\n        onChange: field.onChange,\n        onBlur: field.onBlur,\n        // react-hook-form enfoca el primer campo con error al enviar: necesita el input de verdad\n        inputRef: field.ref,\n        error: fieldState.error?.message,\n    };\n}\n"],"names":[],"mappings":";;AAeO,SAAS,iBAAiB,MAAM,SAAS;AAC5C,QAAM,cAAc,eAAc;AAClC,QAAM,EAAC,OAAO,WAAU,IAAI,cAAc,EAAC,MAAM,SAAS,WAAW,aAAa,QAAO,CAAC;AAE1F,SAAO;AAAA,IACH;AAAA,IACA,OAAO,MAAM;AAAA,IACb,UAAU,MAAM;AAAA,IAChB,QAAQ,MAAM;AAAA;AAAA,IAEd,UAAU,MAAM;AAAA,IAChB,OAAO,WAAW,OAAO;AAAA,EACjC;AACA;"}
+{"version":3,"file":"useHookFormField.js","sources":["../../src/hookForm/useHookFormField.js"],"sourcesContent":["// La conexión de un campo suelto (inputs/) con react-hook-form: lo que la vista necesita, sacado de useController.\n//\n// El campo se busca en el formulario de la pantalla (FormProvider); sin él, se le pasa control.\n//\n// Lo que la pantalla le pase al campo en onChange y onBlur también corre, después del de react-hook-form y con el valor\n// nuevo. OJO: antes el de react-hook-form iba después y lo pisaba sin avisar.\n//\n// Cuándo se enseña el error lo decide react-hook-form (por omisión, al intentar enviar y después al corregir): la vista\n// solo pinta el que llegue. Los errores de yup llegan como llave ({key, values}) y la vista los traduce.\n//\n// Hook genérico del paquete: function (regla de la casa).\nimport {useController, useFormContext} from 'react-hook-form';\n\n/**\n * @param {string} name el campo del formulario\n * @param {object} [control] el de useForm, si la pantalla no usa FormProvider\n * @param {{onChange?: Function, onBlur?: Function}} [screen] lo que la pantalla le dijo al campo\n * @returns {{name: string, value: unknown, onChange: (value: unknown, ...rest: unknown[]) => void, onBlur: (...args: unknown[]) => void, inputRef: Function, error: unknown}}\n */\nexport function useHookFormField(name, control, screen = {}) {\n    const formContext = useFormContext();\n    const {field, fieldState} = useController({name, control: control ?? formContext?.control});\n\n    return {\n        name,\n        value: field.value,\n        onChange: (value, ...rest) => {\n            field.onChange(value);\n            screen.onChange?.(value, ...rest);\n        },\n        onBlur: (...args) => {\n            field.onBlur();\n            screen.onBlur?.(...args);\n        },\n        // react-hook-form enfoca el primer campo con error al enviar: necesita el input de verdad\n        inputRef: field.ref,\n        error: fieldState.error?.message,\n    };\n}\n"],"names":[],"mappings":";;AAmBO,SAAS,iBAAiB,MAAM,SAAS,SAAS,CAAA,GAAI;AACzD,QAAM,cAAc,eAAc;AAClC,QAAM,EAAC,OAAO,WAAU,IAAI,cAAc,EAAC,MAAM,SAAS,WAAW,aAAa,QAAO,CAAC;AAE1F,SAAO;AAAA,IACH;AAAA,IACA,OAAO,MAAM;AAAA,IACb,UAAU,CAAC,UAAU,SAAS;AAC1B,YAAM,SAAS,KAAK;AACpB,aAAO,WAAW,OAAO,GAAG,IAAI;AAAA,IACpC;AAAA,IACA,QAAQ,IAAI,SAAS;AACjB,YAAM,OAAM;AACZ,aAAO,SAAS,GAAG,IAAI;AAAA,IAC3B;AAAA;AAAA,IAEA,UAAU,MAAM;AAAA,IAChB,OAAO,WAAW,OAAO;AAAA,EACjC;AACA;"}

package/dist/index.js

@@ -14,7 +14,7 @@ import { default as default5 } from "./feedback/ConfirmDialog.js";
 import { default as default6 } from "./feedback/ModalWaiting.js";
 import { NEW_BUILD_NOTICE_VARIANT, default as default7 } from "./feedback/NewBuildNotice.js";
 import { default as default8 } from "./feedback/StaleBuildBoundary.js";
-import { default as default9 } from "./feedback/Toaster.js";
+import { TOASTER_POSITION, default as default9 } from "./feedback/Toaster.js";
 import { confirmActionMachine } from "./feedback/confirmActionMachine.js";
 import { TOAST_DEFAULT_OPTIONS, dismissToast, errorsObjectToMessage, toastDefault, toastError, toastInfo, toastLoading, toastProblem, toastPromise, toastSuccess, toastWarn } from "./feedback/toast.js";
 import { useConfirmAction } from "./feedback/useConfirmAction.js";
@@ -95,7 +95,7 @@ import { default as default47 } from "./ui/navigation/PageBreadcrumbs.js";
 import { ROUTE_TABS_MODE, default as default48, useActiveRouteTab } from "./ui/navigation/RouteTabs.js";
 import { default as default49 } from "./ui/help/HelpButton.js";
 import { HELP_CLOSE_REASON, default as default50 } from "./ui/help/HelpCarouselDialog.js";
-import { default as default51 } from "./ui/cards/RecordCard.js";
+import { RECORD_CARD_FOOTER_ALIGN, default as default51 } from "./ui/cards/RecordCard.js";
 import { default as default52 } from "./ui/cards/RecordCardSkeleton.js";
 import { useHelpCarousel } from "./ui/help/useHelpCarousel.js";
 import { default as default53 } from "./ui/filters/DateRangeFilter.js";
@@ -120,7 +120,7 @@ import { default as default69 } from "./inputs/ColorInput.js";
 import { default as default70 } from "./inputs/FieldFrame.js";
 import { default as default71 } from "./inputs/MaskedInput.js";
 import { INPUT_MASK, isMaskComplete, maskPatternOf, maskedTextOf, rawValueOf } from "./inputs/inputMasks.js";
-import { FORM_ROW_CLASS, FormRow, default as default72 } from "./inputs/FormSection.js";
+import { FORM_LABEL_PLACEMENT, FORM_ROW_CLASS, FormRow, default as default72 } from "./inputs/FormSection.js";
 import { default as default73 } from "./inputs/CheckboxGroupInput.js";
 import { default as default74 } from "./inputs/NumberInput.js";
 import { default as default75 } from "./inputs/TransferListInput.js";
@@ -129,6 +129,7 @@ import { default as default76 } from "./inputs/RepeatingFields.js";
 import { useRowKeys } from "./inputs/useRowKeys.js";
 import { default as default77 } from "./inputs/SelectInput.js";
 import { default as default78 } from "./inputs/WizardLayout.js";
+import { WIZARD_ORIENTATION, WIZARD_STEP_SELECTION, isStepCompleted, openingStepOf, stepSelectionActionOf } from "./inputs/wizardSteps.js";
 import { default as default79 } from "./inputs/TextInput.js";
 import { HEX_COLOR, MIN_CONTRAST, contrastOnWhite, readableVariantOf } from "./inputs/colorContrast.js";
 import { cleanNumberText, completeDecimals, groupThousands } from "./inputs/numberText.js";
@@ -235,6 +236,7 @@ export {
   FILTER_DRAWER_ANCHOR,
   FILTER_FIELD_KIND,
   FONT_SIZE_LEVELS,
+  FORM_LABEL_PLACEMENT,
   FORM_ROW_CLASS,
   default70 as FieldFrame,
   default25 as FileDropzone,
@@ -294,6 +296,7 @@ export {
   default21 as PermissionMatrix,
   default39 as ProfileHeader,
   default56 as QuickFilters,
+  RECORD_CARD_FOOTER_ALIGN,
   REDIRECT_PARAM,
   ROUTE_TABS_MODE,
   default51 as RecordCard,
@@ -317,6 +320,7 @@ export {
   default8 as StaleBuildBoundary,
   default59 as StatusChip,
   THEME_LOOK,
+  TOASTER_POSITION,
   TOAST_DEFAULT_OPTIONS,
   TOP_BAR,
   TREND_DIRECTION,
@@ -329,6 +333,8 @@ export {
   ToolkitProvider,
   default75 as TransferListInput,
   UNKNOWN_FILE_TYPE,
+  WIZARD_ORIENTATION,
+  WIZARD_STEP_SELECTION,
   default78 as WizardLayout,
   XLSX_CONTENT_TYPE,
   accentTextStylesOf,
@@ -415,6 +421,7 @@ export {
   isPasswordAccepted,
   isPlainLeftClick,
   isStaleChunkError,
+  isStepCompleted,
   labelOf,
   lookup,
   maskPatternOf,
@@ -436,6 +443,7 @@ export {
   mobileTabsOf,
   newIdentifier,
   normalizedValidationMessage,
+  openingStepOf,
   pageNameAt,
   parentMenuItemOf,
   parseFileSize,
@@ -475,6 +483,7 @@ export {
   stackcraftDarkPalette,
   stackcraftLightPalette,
   startDownload,
+  stepSelectionActionOf,
   sxListOf,
   tableRowTextOf,
   toastDefault,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/inputs/CatalogInput.js

@@ -30,6 +30,7 @@ function CatalogInputContent(props) {
     helperText = " ",
     loading = false,
     disabled = false,
+    required = false,
     inputRef,
     placeholder,
     multiple = false,
@@ -63,7 +64,7 @@ function CatalogInputContent(props) {
     return selectAllState.allChosen ? t("form.unselectAll") : t("form.selectAll", { count: matchingCodes.length });
   })();
   const showsSelectAll = multiple && selectAll;
-  return /* @__PURE__ */ jsx(FieldFrame, { inputId, label, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(FieldFrame, { inputId, label, required, children: /* @__PURE__ */ jsx(
     CatalogInputField,
     {
       id: inputId,
@@ -132,7 +133,7 @@ function CatalogInputContent(props) {
         );
       } : void 0,
       onBlur,
-      renderInput: (inputProps) => /* @__PURE__ */ jsx(TextField, { ...inputProps, name, inputRef, placeholder, error: Boolean(errorText), helperText: errorText ?? helperText })
+      renderInput: (inputProps) => /* @__PURE__ */ jsx(TextField, { ...inputProps, inputProps: { ...inputProps.inputProps, "aria-required": required || void 0 }, name, inputRef, placeholder, error: Boolean(errorText), helperText: errorText ?? helperText })
     }
   ) });
 }

package/dist/inputs/CatalogInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CatalogInput.js","sources":["../../src/inputs/CatalogInput.jsx"],"sourcesContent":["// Campo suelto que elige una clave de un catálogo ([{code, label}]): actividad económica, giro, país, banco… Se busca por la\n// clave o por el texto, sin acentos ni mayúsculas, y al formulario llega solo la clave. Con `multiple` elige varias: cada una\n// queda como chip con su ×, la lista no se cierra al elegir y al formulario llega la lista de claves en el orden elegido.\n// Con varias, además (cada una se pide):\n//   selectAll    «Elegir todos» arriba de la lista, con su casilla a medias si hay algunos; con algo escrito en el buscador,\n//                «Elegir los N que coinciden» (todos los que coinciden, no solo los que se ven)\n//   checkboxes   una casilla en cada opción (se ve de un vistazo qué está elegido)\n//   limitTags    cuántos chips se ven con el campo sin foco; los demás, «+3 más»\n//\n// Por qué no un <select>: con catálogos de cientos de opciones no se puede usar; y con texto libre la gente inventa claves.\n// Se enseñan a lo más MAX_VISIBLE_OPTIONS coincidencias: con miles, la lista completa congela la pantalla.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaCatalogInput con defaultProps, styleOverrides de\n// sus partes (field) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport Checkbox from '@mui/material/Checkbox';\nimport TextField from '@mui/material/TextField';\n\nimport {useValidationText} from '@/forms/useValidationText.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {selectAllStateOf} from '@/inputs/selectAllState.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaCatalogInput)\nconst THEME_NAME = 'CalcitaCatalogInput';\nconst CatalogInputField = piecePart(THEME_NAME, 'Field', Autocomplete);\n\nconst MAX_VISIBLE_OPTIONS = 100;\n// la opción de «Elegir todos»: no es del catálogo y nunca llega al formulario\nconst SELECT_ALL_CODE = '__calcita_select_all__';\n\n/**\n * Un texto sin acentos ni mayúsculas, para que «credito» encuentre «Crédito».\n *\n * @param {unknown} text\n * @returns {string}\n */\nfunction plainTextOf(text) {\n    return String(text ?? '').normalize('NFD').replace(/\\p{Diacritic}/gu, '').toLowerCase();\n}\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|string[]|null|undefined} props.value la clave elegida ('' = ninguna); con multiple, la lista ([] = ninguna)\n * @param {(code: any) => void} props.onChange recibe la clave ('' al borrar); con multiple, la lista de claves\n * @param {() => void} [props.onBlur]\n * @param {Array<{code: string, label: string}>} props.options\n * @param {(option: {code: string, label: string}) => string} [props.formatLabel] por omisión «Nombre (clave)»\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText]\n * @param {boolean} [props.loading] el catálogo todavía no llega\n * @param {string} [props.placeholder] la pista con el campo vacío, ya traducida (p. ej. «Busque un estado»): sin ella, en un\n *     formulario agrupado el campo vacío solo enseña su botón y no se entiende qué es\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {boolean} [props.multiple] elegir varias claves\n * @param {boolean} [props.selectAll] con multiple: «Elegir todos» (o los que coinciden con lo buscado) arriba de la lista\n * @param {boolean} [props.checkboxes] con multiple: una casilla en cada opción\n * @param {number} [props.limitTags] con multiple: cuántos chips se ven sin foco; los demás como «+3 más»\n * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación\n *     ({required: 'Escriba el RFC', matches: 'El RFC lleva 12 o 13 caracteres'}): gana al de Calcita y al de los textos\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction CatalogInputContent(props) {\n    const {\n        name, label, value, onChange, onBlur, options = [], formatLabel, error, helperText = ' ', loading = false, disabled = false, inputRef, placeholder,\n        multiple = false, selectAll = false, checkboxes = false, limitTags, messages, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    // el texto del error: el de la pantalla (messages), el del proyecto para este campo o el de Calcita\n    const validationTextOf = useValidationText({name, label, messages});\n    const generatedId = useId();\n    const inputId = `${name ?? 'catalog'}-${generatedId}`;\n    const errorText = validationTextOf(error);\n    // con varias, en el orden en que se eligieron (el de la lista de claves)\n    const selectedOption = multiple\n        ? (Array.isArray(value) ? value : []).map((code) => options.find((option) => option.code === code)).filter(Boolean)\n        : options.find((option) => option.code === value) ?? null;\n    const optionLabelOf = (option) => (formatLabel ? formatLabel(option) : `${option.label} (${option.code})`);\n    // lo escrito en el buscador: «Elegir todos» abarca lo que coincide con eso\n    const [searchText, setSearchText] = useState('');\n    const matchesSearch = (option, text) => {\n        const wantedText = plainTextOf(text);\n        return !wantedText || plainTextOf(optionLabelOf(option)).includes(wantedText);\n    };\n    const selectedCodes = multiple && Array.isArray(value) ? value : [];\n    const matchingCodes = options.filter((option) => matchesSearch(option, searchText)).map((option) => option.code);\n    const selectAllState = selectAllStateOf(selectedCodes, matchingCodes);\n    const selectAllLabel = (() => {\n        if (searchText.trim()) {\n            return selectAllState.allChosen ? t('form.unselectMatching', {count: matchingCodes.length}) : t('form.selectMatching', {count: matchingCodes.length});\n        }\n        return selectAllState.allChosen ? t('form.unselectAll') : t('form.selectAll', {count: matchingCodes.length});\n    })();\n    const showsSelectAll = multiple && selectAll;\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <CatalogInputField\n                id={inputId}\n                multiple={multiple}\n                disableCloseOnSelect={multiple}\n                fullWidth\n                size=\"small\"\n                options={options}\n                value={selectedOption}\n                loading={loading}\n                disabled={disabled}\n                noOptionsText={t('form.noOptions')}\n                loadingText={t('form.loadingOptions')}\n                getOptionLabel={(option) => (option.code === SELECT_ALL_CODE ? selectAllLabel : optionLabelOf(option))}\n                isOptionEqualToValue={(option, currentOption) => option.code === currentOption.code}\n                filterOptions={(allOptions, {inputValue}) => {\n                    const matchingOptions = allOptions.filter((option) => matchesSearch(option, inputValue)).slice(0, MAX_VISIBLE_OPTIONS);\n                    // «Elegir todos» va arriba solo si hay de dónde elegir\n                    return showsSelectAll && matchingOptions.length > 0 ? [{code: SELECT_ALL_CODE, label: selectAllLabel}, ...matchingOptions] : matchingOptions;\n                }}\n                // con «Elegir todos», lo buscado se queda al elegir (MUI lo borraba): así se eligen varios de la misma búsqueda.\n                // Al salir del campo sí se borra. Sin «Elegir todos», el campo se porta como siempre\n                inputValue={showsSelectAll ? searchText : undefined}\n                onInputChange={(event, text, reason) => {\n                    // MUI 7 avisa con qué borra el texto: al elegir o quitar una opción ('selectOption', 'removeOption', 'reset');\n                    // al salir del campo es 'blur' y ese sí se borra\n                    const isResetByChoosing = ['selectOption', 'removeOption', 'reset'].includes(reason) && event?.type !== 'blur';\n                    if (!(showsSelectAll && isResetByChoosing)) {\n                        setSearchText(text);\n                    }\n                }}\n                onChange={(event, option, reason, details) => {\n                    if (!multiple) {\n                        onChange(option?.code ?? '');\n                        return;\n                    }\n                    if (details?.option?.code === SELECT_ALL_CODE) {\n                        onChange(selectAllState.toggled());\n                        return;\n                    }\n                    onChange(option.filter((chosenOption) => chosenOption.code !== SELECT_ALL_CODE).map((chosenOption) => chosenOption.code));\n                }}\n                limitTags={multiple ? limitTags : undefined}\n                getLimitTagsText={(hiddenCount) => t('form.moreSelected', {count: hiddenCount})}\n                renderOption={multiple && (checkboxes || selectAll) ? (optionProps, option, {selected}) => {\n                    // OJO: key va aparte; dentro de las props React avisa en la consola\n                    const {key, ...liProps} = optionProps;\n                    const isSelectAll = option.code === SELECT_ALL_CODE;\n                    const showsBox = checkboxes || isSelectAll;\n                    return (\n                        <li key={key} {...liProps} {...(isSelectAll && {'aria-selected': selectAllState.allChosen})}\n                            style={isSelectAll ? {fontWeight: 600} : undefined}>\n                            {showsBox && (\n                                <Checkbox size=\"small\" tabIndex={-1} disableRipple sx={{p: 0, mr: 1}}\n                                          checked={isSelectAll ? selectAllState.allChosen : selected}\n                                          indeterminate={isSelectAll && selectAllState.someChosen} />\n                            )}\n                            {isSelectAll ? selectAllLabel : optionLabelOf(option)}\n                        </li>\n                    );\n                } : undefined}\n                onBlur={onBlur}\n                renderInput={(inputProps) => (\n                    <TextField {...inputProps} name={name} inputRef={inputRef} placeholder={placeholder} error={Boolean(errorText)} helperText={errorText ?? helperText} />\n                )}\n            />\n        </FieldFrame>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst CatalogInput = withPieceSlots(CatalogInputContent, THEME_NAME);\nexport default CatalogInput;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CatalogInput.js","sources":["../../src/inputs/CatalogInput.jsx"],"sourcesContent":["// Campo suelto que elige una clave de un catálogo ([{code, label}]): actividad económica, giro, país, banco… Se busca por la\n// clave o por el texto, sin acentos ni mayúsculas, y al formulario llega solo la clave. Con `multiple` elige varias: cada una\n// queda como chip con su ×, la lista no se cierra al elegir y al formulario llega la lista de claves en el orden elegido.\n// Con varias, además (cada una se pide):\n//   selectAll    «Elegir todos» arriba de la lista, con su casilla a medias si hay algunos; con algo escrito en el buscador,\n//                «Elegir los N que coinciden» (todos los que coinciden, no solo los que se ven)\n//   checkboxes   una casilla en cada opción (se ve de un vistazo qué está elegido)\n//   limitTags    cuántos chips se ven con el campo sin foco; los demás, «+3 más»\n//\n// Por qué no un <select>: con catálogos de cientos de opciones no se puede usar; y con texto libre la gente inventa claves.\n// Se enseñan a lo más MAX_VISIBLE_OPTIONS coincidencias: con miles, la lista completa congela la pantalla.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaCatalogInput con defaultProps, styleOverrides de\n// sus partes (field) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport Checkbox from '@mui/material/Checkbox';\nimport TextField from '@mui/material/TextField';\n\nimport {useValidationText} from '@/forms/useValidationText.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {selectAllStateOf} from '@/inputs/selectAllState.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaCatalogInput)\nconst THEME_NAME = 'CalcitaCatalogInput';\nconst CatalogInputField = piecePart(THEME_NAME, 'Field', Autocomplete);\n\nconst MAX_VISIBLE_OPTIONS = 100;\n// la opción de «Elegir todos»: no es del catálogo y nunca llega al formulario\nconst SELECT_ALL_CODE = '__calcita_select_all__';\n\n/**\n * Un texto sin acentos ni mayúsculas, para que «credito» encuentre «Crédito».\n *\n * @param {unknown} text\n * @returns {string}\n */\nfunction plainTextOf(text) {\n    return String(text ?? '').normalize('NFD').replace(/\\p{Diacritic}/gu, '').toLowerCase();\n}\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|string[]|null|undefined} props.value la clave elegida ('' = ninguna); con multiple, la lista ([] = ninguna)\n * @param {(code: any) => void} props.onChange recibe la clave ('' al borrar); con multiple, la lista de claves\n * @param {() => void} [props.onBlur]\n * @param {Array<{code: string, label: string}>} props.options\n * @param {(option: {code: string, label: string}) => string} [props.formatLabel] por omisión «Nombre (clave)»\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText]\n * @param {boolean} [props.loading] el catálogo todavía no llega\n * @param {string} [props.placeholder] la pista con el campo vacío, ya traducida (p. ej. «Busque un estado»): sin ella, en un\n *     formulario agrupado el campo vacío solo enseña su botón y no se entiende qué es\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.required] obligatorio: el asterisco en la etiqueta y aria-required en el campo (sin required: con varias opciones elegidas el texto queda vacío y el navegador no dejaría enviar)\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {boolean} [props.multiple] elegir varias claves\n * @param {boolean} [props.selectAll] con multiple: «Elegir todos» (o los que coinciden con lo buscado) arriba de la lista\n * @param {boolean} [props.checkboxes] con multiple: una casilla en cada opción\n * @param {number} [props.limitTags] con multiple: cuántos chips se ven sin foco; los demás como «+3 más»\n * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación\n *     ({required: 'Escriba el RFC', matches: 'El RFC lleva 12 o 13 caracteres'}): gana al de Calcita y al de los textos\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction CatalogInputContent(props) {\n    const {\n        name, label, value, onChange, onBlur, options = [], formatLabel, error, helperText = ' ', loading = false, disabled = false, required = false, inputRef, placeholder,\n        multiple = false, selectAll = false, checkboxes = false, limitTags, messages, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    // el texto del error: el de la pantalla (messages), el del proyecto para este campo o el de Calcita\n    const validationTextOf = useValidationText({name, label, messages});\n    const generatedId = useId();\n    const inputId = `${name ?? 'catalog'}-${generatedId}`;\n    const errorText = validationTextOf(error);\n    // con varias, en el orden en que se eligieron (el de la lista de claves)\n    const selectedOption = multiple\n        ? (Array.isArray(value) ? value : []).map((code) => options.find((option) => option.code === code)).filter(Boolean)\n        : options.find((option) => option.code === value) ?? null;\n    const optionLabelOf = (option) => (formatLabel ? formatLabel(option) : `${option.label} (${option.code})`);\n    // lo escrito en el buscador: «Elegir todos» abarca lo que coincide con eso\n    const [searchText, setSearchText] = useState('');\n    const matchesSearch = (option, text) => {\n        const wantedText = plainTextOf(text);\n        return !wantedText || plainTextOf(optionLabelOf(option)).includes(wantedText);\n    };\n    const selectedCodes = multiple && Array.isArray(value) ? value : [];\n    const matchingCodes = options.filter((option) => matchesSearch(option, searchText)).map((option) => option.code);\n    const selectAllState = selectAllStateOf(selectedCodes, matchingCodes);\n    const selectAllLabel = (() => {\n        if (searchText.trim()) {\n            return selectAllState.allChosen ? t('form.unselectMatching', {count: matchingCodes.length}) : t('form.selectMatching', {count: matchingCodes.length});\n        }\n        return selectAllState.allChosen ? t('form.unselectAll') : t('form.selectAll', {count: matchingCodes.length});\n    })();\n    const showsSelectAll = multiple && selectAll;\n\n    return (\n        <FieldFrame inputId={inputId} label={label} required={required}>\n            <CatalogInputField\n                id={inputId}\n                multiple={multiple}\n                disableCloseOnSelect={multiple}\n                fullWidth\n                size=\"small\"\n                options={options}\n                value={selectedOption}\n                loading={loading}\n                disabled={disabled}\n                noOptionsText={t('form.noOptions')}\n                loadingText={t('form.loadingOptions')}\n                getOptionLabel={(option) => (option.code === SELECT_ALL_CODE ? selectAllLabel : optionLabelOf(option))}\n                isOptionEqualToValue={(option, currentOption) => option.code === currentOption.code}\n                filterOptions={(allOptions, {inputValue}) => {\n                    const matchingOptions = allOptions.filter((option) => matchesSearch(option, inputValue)).slice(0, MAX_VISIBLE_OPTIONS);\n                    // «Elegir todos» va arriba solo si hay de dónde elegir\n                    return showsSelectAll && matchingOptions.length > 0 ? [{code: SELECT_ALL_CODE, label: selectAllLabel}, ...matchingOptions] : matchingOptions;\n                }}\n                // con «Elegir todos», lo buscado se queda al elegir (MUI lo borraba): así se eligen varios de la misma búsqueda.\n                // Al salir del campo sí se borra. Sin «Elegir todos», el campo se porta como siempre\n                inputValue={showsSelectAll ? searchText : undefined}\n                onInputChange={(event, text, reason) => {\n                    // MUI 7 avisa con qué borra el texto: al elegir o quitar una opción ('selectOption', 'removeOption', 'reset');\n                    // al salir del campo es 'blur' y ese sí se borra\n                    const isResetByChoosing = ['selectOption', 'removeOption', 'reset'].includes(reason) && event?.type !== 'blur';\n                    if (!(showsSelectAll && isResetByChoosing)) {\n                        setSearchText(text);\n                    }\n                }}\n                onChange={(event, option, reason, details) => {\n                    if (!multiple) {\n                        onChange(option?.code ?? '');\n                        return;\n                    }\n                    if (details?.option?.code === SELECT_ALL_CODE) {\n                        onChange(selectAllState.toggled());\n                        return;\n                    }\n                    onChange(option.filter((chosenOption) => chosenOption.code !== SELECT_ALL_CODE).map((chosenOption) => chosenOption.code));\n                }}\n                limitTags={multiple ? limitTags : undefined}\n                getLimitTagsText={(hiddenCount) => t('form.moreSelected', {count: hiddenCount})}\n                renderOption={multiple && (checkboxes || selectAll) ? (optionProps, option, {selected}) => {\n                    // OJO: key va aparte; dentro de las props React avisa en la consola\n                    const {key, ...liProps} = optionProps;\n                    const isSelectAll = option.code === SELECT_ALL_CODE;\n                    const showsBox = checkboxes || isSelectAll;\n                    return (\n                        <li key={key} {...liProps} {...(isSelectAll && {'aria-selected': selectAllState.allChosen})}\n                            style={isSelectAll ? {fontWeight: 600} : undefined}>\n                            {showsBox && (\n                                <Checkbox size=\"small\" tabIndex={-1} disableRipple sx={{p: 0, mr: 1}}\n                                          checked={isSelectAll ? selectAllState.allChosen : selected}\n                                          indeterminate={isSelectAll && selectAllState.someChosen} />\n                            )}\n                            {isSelectAll ? selectAllLabel : optionLabelOf(option)}\n                        </li>\n                    );\n                } : undefined}\n                onBlur={onBlur}\n                renderInput={(inputProps) => (\n                    <TextField {...inputProps} inputProps={{...inputProps.inputProps, 'aria-required': required || undefined}} name={name} inputRef={inputRef} placeholder={placeholder} error={Boolean(errorText)} helperText={errorText ?? helperText} />\n                )}\n            />\n        </FieldFrame>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst CatalogInput = withPieceSlots(CatalogInputContent, THEME_NAME);\nexport default CatalogInput;\n"],"names":[],"mappings":";;;;;;;;;;;;AA6BA,MAAM,aAAa;AACnB,MAAM,oBAAoB,UAAU,YAAY,SAAS,YAAY;AAErE,MAAM,sBAAsB;AAE5B,MAAM,kBAAkB;AAQxB,SAAS,YAAY,MAAM;AACvB,SAAO,OAAO,QAAQ,EAAE,EAAE,UAAU,KAAK,EAAE,QAAQ,WAAA,kBAAA,IAAA,GAAmB,EAAE,EAAE,YAAA;AAC9E;AA2BA,SAAS,oBAAoB,OAAO;AAChC,QAAM;AAAA,IACF;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAU;AAAA,IAAQ,UAAU,CAAA;AAAA,IAAI;AAAA,IAAa;AAAA,IAAO,aAAa;AAAA,IAAK,UAAU;AAAA,IAAO,WAAW;AAAA,IAAO,WAAW;AAAA,IAAO;AAAA,IAAU;AAAA,IACzJ,WAAW;AAAA,IAAO,YAAY;AAAA,IAAO,aAAa;AAAA,IAAO;AAAA,IAAW;AAAA,IAAU;AAAA,IAC9E,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AACnC,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AAEjD,QAAM,mBAAmB,kBAAkB,EAAC,MAAM,OAAO,UAAS;AAClE,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,GAAG,QAAQ,SAAS,IAAI,WAAW;AACnD,QAAM,YAAY,iBAAiB,KAAK;AAExC,QAAM,iBAAiB,YAChB,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAA,GAAI,IAAI,CAAC,SAAS,QAAQ,KAAK,CAAC,WAAW,OAAO,SAAS,IAAI,CAAC,EAAE,OAAO,OAAO,IAChH,QAAQ,KAAK,CAAC,WAAW,OAAO,SAAS,KAAK,KAAK;AACzD,QAAM,gBAAgB,CAAC,WAAY,cAAc,YAAY,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,OAAO,IAAI;AAEtG,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,gBAAgB,CAAC,QAAQ,SAAS;AACpC,UAAM,aAAa,YAAY,IAAI;AACnC,WAAO,CAAC,cAAc,YAAY,cAAc,MAAM,CAAC,EAAE,SAAS,UAAU;AAAA,EAChF;AACA,QAAM,gBAAgB,YAAY,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAA;AACjE,QAAM,gBAAgB,QAAQ,OAAO,CAAC,WAAW,cAAc,QAAQ,UAAU,CAAC,EAAE,IAAI,CAAC,WAAW,OAAO,IAAI;AAC/G,QAAM,iBAAiB,iBAAiB,eAAe,aAAa;AACpE,QAAM,kBAAkB,MAAM;AAC1B,QAAI,WAAW,QAAQ;AACnB,aAAO,eAAe,YAAY,EAAE,yBAAyB,EAAC,OAAO,cAAc,OAAA,CAAO,IAAI,EAAE,uBAAuB,EAAC,OAAO,cAAc,QAAO;AAAA,IACxJ;AACA,WAAO,eAAe,YAAY,EAAE,kBAAkB,IAAI,EAAE,kBAAkB,EAAC,OAAO,cAAc,OAAA,CAAO;AAAA,EAC/G,GAAA;AACA,QAAM,iBAAiB,YAAY;AAEnC,SACI,oBAAC,YAAA,EAAW,SAAkB,OAAc,UACxC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,IAAI;AAAA,MACJ;AAAA,MACA,sBAAsB;AAAA,MACtB,WAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,eAAe,EAAE,gBAAgB;AAAA,MACjC,aAAa,EAAE,qBAAqB;AAAA,MACpC,gBAAgB,CAAC,WAAY,OAAO,SAAS,kBAAkB,iBAAiB,cAAc,MAAM;AAAA,MACpG,sBAAsB,CAAC,QAAQ,kBAAkB,OAAO,SAAS,cAAc;AAAA,MAC/E,eAAe,CAAC,YAAY,EAAC,iBAAgB;AACzC,cAAM,kBAAkB,WAAW,OAAO,CAAC,WAAW,cAAc,QAAQ,UAAU,CAAC,EAAE,MAAM,GAAG,mBAAmB;AAErH,eAAO,kBAAkB,gBAAgB,SAAS,IAAI,CAAC,EAAC,MAAM,iBAAiB,OAAO,eAAA,GAAiB,GAAG,eAAe,IAAI;AAAA,MACjI;AAAA,MAGA,YAAY,iBAAiB,aAAa;AAAA,MAC1C,eAAe,CAAC,OAAO,MAAM,WAAW;AAGpC,cAAM,oBAAoB,CAAC,gBAAgB,gBAAgB,OAAO,EAAE,SAAS,MAAM,KAAK,OAAO,SAAS;AACxG,YAAI,EAAE,kBAAkB,oBAAoB;AACxC,wBAAc,IAAI;AAAA,QACtB;AAAA,MACJ;AAAA,MACA,UAAU,CAAC,OAAO,QAAQ,QAAQ,YAAY;AAC1C,YAAI,CAAC,UAAU;AACX,mBAAS,QAAQ,QAAQ,EAAE;AAC3B;AAAA,QACJ;AACA,YAAI,SAAS,QAAQ,SAAS,iBAAiB;AAC3C,mBAAS,eAAe,SAAS;AACjC;AAAA,QACJ;AACA,iBAAS,OAAO,OAAO,CAAC,iBAAiB,aAAa,SAAS,eAAe,EAAE,IAAI,CAAC,iBAAiB,aAAa,IAAI,CAAC;AAAA,MAC5H;AAAA,MACA,WAAW,WAAW,YAAY;AAAA,MAClC,kBAAkB,CAAC,gBAAgB,EAAE,qBAAqB,EAAC,OAAO,aAAY;AAAA,MAC9E,cAAc,aAAa,cAAc,aAAa,CAAC,aAAa,QAAQ,EAAC,eAAc;AAEvF,cAAM,EAAC,KAAK,GAAG,QAAA,IAAW;AAC1B,cAAM,cAAc,OAAO,SAAS;AACpC,cAAM,WAAW,cAAc;AAC/B,eACI;AAAA,UAAC;AAAA,UAAA;AAAA,YAAc,GAAG;AAAA,YAAU,GAAI,eAAe,EAAC,iBAAiB,eAAe,UAAA;AAAA,YAC5E,OAAO,cAAc,EAAC,YAAY,QAAO;AAAA,YACxC,UAAA;AAAA,cAAA,YACG;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAAS,MAAK;AAAA,kBAAQ,UAAU;AAAA,kBAAI,eAAa;AAAA,kBAAC,IAAI,EAAC,GAAG,GAAG,IAAI,EAAA;AAAA,kBACxD,SAAS,cAAc,eAAe,YAAY;AAAA,kBAClD,eAAe,eAAe,eAAe;AAAA,gBAAA;AAAA,cAAA;AAAA,cAE1D,cAAc,iBAAiB,cAAc,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAP/C;AAAA,QAAA;AAAA,MAUjB,IAAI;AAAA,MACJ;AAAA,MACA,aAAa,CAAC,eACV,oBAAC,WAAA,EAAW,GAAG,YAAY,YAAY,EAAC,GAAG,WAAW,YAAY,iBAAiB,YAAY,UAAY,MAAY,UAAoB,aAA0B,OAAO,QAAQ,SAAS,GAAG,YAAY,aAAa,WAAA,CAAY;AAAA,IAAA;AAAA,EAAA,GAGjP;AAER;AAGA,MAAM,eAAe,eAAe,qBAAqB,UAAU;"}

package/dist/inputs/CheckboxGroupInput.js

@@ -30,6 +30,7 @@ function CheckboxGroupInputContent(props) {
     error,
     helperText = " ",
     disabled = false,
+    required = false,
     sx,
     messages,
     texts,
@@ -50,7 +51,7 @@ function CheckboxGroupInputContent(props) {
     onBlur?.();
   };
   const toggle = (optionValue) => change(checkedValues.includes(optionValue) ? checkedValues.filter((checkedValue) => checkedValue !== optionValue) : [...checkedValues, optionValue]);
-  return /* @__PURE__ */ jsx(FieldFrame, { inputId: `${groupId}-first`, labelId, label, children: /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsx(FieldFrame, { inputId: `${groupId}-first`, labelId, label, required, children: /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs(CheckboxGroupRoot, { row, role: "group", "aria-labelledby": labelId, ownSx: { columnGap: 2 }, sx, children: [
       selectAll && /* @__PURE__ */ jsx(
         CheckboxGroupSelectAll,

package/dist/inputs/CheckboxGroupInput.js.map

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

package/dist/inputs/ColorInput.js

@@ -32,6 +32,7 @@ function ColorInputContent(props) {
     helperText = " ",
     checkContrast = true,
     disabled = false,
+    required = false,
     inputRef,
     messages,
     texts,
@@ -49,7 +50,7 @@ function ColorInputContent(props) {
   const errorText = validationTextOf(error);
   const contrastText = contrastRatio && checkContrast ? t("form.colorContrast", { ratio: contrastRatio.toFixed(RATIO_DECIMALS) }) : helperText;
   const choose = (nextColor) => onChange(nextColor.toUpperCase());
-  return /* @__PURE__ */ jsx(FieldFrame, { inputId, label, children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+  return /* @__PURE__ */ jsx(FieldFrame, { inputId, label, required, children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
     /* @__PURE__ */ jsx(
       TextField,
       {
@@ -60,6 +61,7 @@ function ColorInputContent(props) {
         fullWidth: true,
         value: color,
         disabled,
+        required,
         placeholder: "#RRGGBB",
         onChange: (event) => choose(event.target.value),
         onBlur,

package/dist/inputs/ColorInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.js","sources":["../../src/inputs/ColorInput.jsx"],"sourcesContent":["// Campo de COLOR suelto (viene de «Identidad de documentos» de PLD): la muestra redonda (el «color well» de Apple, que abre\n// el selector del sistema) dentro del campo del texto #RRGGBB, el contraste contra el blanco mientras se elige y, si el color casi no se leería, el mismo tono más oscuro con su botón\n// para usarlo.\n//\n// Para lo que se imprime o se lee sobre blanco (el color de una marca en un comprobante). El color llega al formulario en\n// mayúsculas (#2B3A67); '' = sin color.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaColorInput con defaultProps y\n// styleOverrides de sus partes: swatch, nativeInput.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\n\nimport {useValidationText} from '@/forms/useValidationText.js';\nimport {HEX_COLOR, MIN_CONTRAST, contrastOnWhite, readableVariantOf} from '@/inputs/colorContrast.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaColorInput)\nconst THEME_NAME = 'CalcitaColorInput';\nconst ColorSwatch = piecePart(THEME_NAME, 'Swatch', Box);\nconst ColorNativeInput = piecePart(THEME_NAME, 'NativeInput', Box);\n\n// #RRGGBB\nconst COLOR_LENGTH = 7;\n// el color que enseña el selector del navegador mientras el texto no es un color\nconst NEUTRAL_COLOR = '#000000';\nconst RATIO_DECIMALS = 1;\n// la muestra redonda (px) y su orilla fina en claro y en oscuro\nconst SWATCH_PIXELS = 24;\nconst SWATCH_EDGE = Object.freeze({light: 'rgba(15, 23, 42, 0.18)', dark: 'rgba(255, 255, 255, 0.24)'});\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|null|undefined} props.value '#RRGGBB' o ''\n * @param {(color: string) => void} props.onChange recibe el color en mayúsculas\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] cuando no hay color\n * @param {boolean} [props.checkContrast] avisa si casi no se lee sobre blanco (por omisión sí)\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación\n *     ({required: 'Escriba el RFC', matches: 'El RFC lleva 12 o 13 caracteres'}): gana al de Calcita y al de los textos\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction ColorInputContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaColorInput.defaultProps) y encima lo que llega aquí\n    const {\n    name, label, value, onChange, onBlur, error, helperText = ' ', checkContrast = true, disabled = false, inputRef, messages, texts,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    // el texto del error: el de la pantalla (messages), el del proyecto para este campo o el de Calcita\n    const validationTextOf = useValidationText({name, label, messages});\n    const generatedId = useId();\n    const inputId = `${name ?? 'color'}-${generatedId}`;\n    const color = value ?? '';\n    const isValidColor = HEX_COLOR.test(color);\n    const contrastRatio = isValidColor ? contrastOnWhite(color) : null;\n    const suggestion = checkContrast && isValidColor && contrastRatio < MIN_CONTRAST ? readableVariantOf(color) : null;\n    const errorText = validationTextOf(error);\n    const contrastText = contrastRatio && checkContrast ? t('form.colorContrast', {ratio: contrastRatio.toFixed(RATIO_DECIMALS)}) : helperText;\n    const choose = (nextColor) => onChange(nextColor.toUpperCase());\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <Stack spacing={1}>\n                {/* un solo campo: la muestra redonda al inicio (el «color well» de Apple) y el código al lado. Picar la muestra\n                    abre el selector de colores del sistema (un input type=color invisible encima de ella). Antes eran dos cajas\n                    sueltas (el selector del navegador en la suya y el código en otra) y se veían como piezas sueltas */}\n                <TextField\n                    name={name}\n                    id={inputId}\n                    inputRef={inputRef}\n                    size=\"small\"\n                    fullWidth\n                    value={color}\n                    disabled={disabled}\n                    placeholder=\"#RRGGBB\"\n                    onChange={(event) => choose(event.target.value)}\n                    onBlur={onBlur}\n                    error={Boolean(errorText)}\n                    helperText={errorText ?? contrastText}\n                    slotProps={{\n                        input: {\n                            startAdornment: (\n                                <InputAdornment position=\"start\">\n                                    <ColorSwatch component=\"label\"\n                                         ownSx={(theme) => ({\n                                             position: 'relative', display: 'block', flexShrink: 0, width: SWATCH_PIXELS, height: SWATCH_PIXELS,\n                                             borderRadius: '50%', cursor: disabled ? 'default' : 'pointer',\n                                             backgroundColor: isValidColor ? color : 'transparent',\n                                             // la orilla de la muestra: que se vea aunque el color sea el del fondo (blanco en claro, negro en oscuro)\n                                             boxShadow: `inset 0 0 0 1px ${SWATCH_EDGE.light}`,\n                                             ...theme.applyStyles('dark', {boxShadow: `inset 0 0 0 1px ${SWATCH_EDGE.dark}`}),\n                                         })}>\n                                        <ColorNativeInput component=\"input\" type=\"color\" value={isValidColor ? color : NEUTRAL_COLOR} disabled={disabled}\n                                             aria-label={t('form.pickColor')} onChange={(event) => choose(event.target.value)}\n                                             ownSx={{position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0, border: 0, p: 0, cursor: 'inherit'}} />\n                                    </ColorSwatch>\n                                </InputAdornment>\n                            ),\n                        },\n                        htmlInput: {maxLength: COLOR_LENGTH, spellCheck: false, style: {fontVariantNumeric: 'tabular-nums'}},\n                    }}\n                />\n                {suggestion && (\n                    <Alert severity=\"warning\"\n                           action={<Button color=\"inherit\" size=\"small\" onClick={() => choose(suggestion)}>{t('form.colorUseSuggestion', {color: suggestion})}</Button>}>\n                        {t('form.colorLowContrast', {suggestion})}\n                    </Alert>\n                )}\n            </Stack>\n        </FieldFrame>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst ColorInput = withPieceSlots(ColorInputContent, THEME_NAME);\nexport default ColorInput;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColorInput.js","sources":["../../src/inputs/ColorInput.jsx"],"sourcesContent":["// Campo de COLOR suelto (viene de «Identidad de documentos» de PLD): la muestra redonda (el «color well» de Apple, que abre\n// el selector del sistema) dentro del campo del texto #RRGGBB, el contraste contra el blanco mientras se elige y, si el color casi no se leería, el mismo tono más oscuro con su botón\n// para usarlo.\n//\n// Para lo que se imprime o se lee sobre blanco (el color de una marca en un comprobante). El color llega al formulario en\n// mayúsculas (#2B3A67); '' = sin color.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaColorInput con defaultProps y\n// styleOverrides de sus partes: swatch, nativeInput.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\n\nimport {useValidationText} from '@/forms/useValidationText.js';\nimport {HEX_COLOR, MIN_CONTRAST, contrastOnWhite, readableVariantOf} from '@/inputs/colorContrast.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaColorInput)\nconst THEME_NAME = 'CalcitaColorInput';\nconst ColorSwatch = piecePart(THEME_NAME, 'Swatch', Box);\nconst ColorNativeInput = piecePart(THEME_NAME, 'NativeInput', Box);\n\n// #RRGGBB\nconst COLOR_LENGTH = 7;\n// el color que enseña el selector del navegador mientras el texto no es un color\nconst NEUTRAL_COLOR = '#000000';\nconst RATIO_DECIMALS = 1;\n// la muestra redonda (px) y su orilla fina en claro y en oscuro\nconst SWATCH_PIXELS = 24;\nconst SWATCH_EDGE = Object.freeze({light: 'rgba(15, 23, 42, 0.18)', dark: 'rgba(255, 255, 255, 0.24)'});\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|null|undefined} props.value '#RRGGBB' o ''\n * @param {(color: string) => void} props.onChange recibe el color en mayúsculas\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] cuando no hay color\n * @param {boolean} [props.checkContrast] avisa si casi no se lee sobre blanco (por omisión sí)\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.required] obligatorio: el asterisco en la etiqueta y, como en MUI, required en el campo\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación\n *     ({required: 'Escriba el RFC', matches: 'El RFC lleva 12 o 13 caracteres'}): gana al de Calcita y al de los textos\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction ColorInputContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaColorInput.defaultProps) y encima lo que llega aquí\n    const {\n    name, label, value, onChange, onBlur, error, helperText = ' ', checkContrast = true, disabled = false, required = false, inputRef, messages, texts,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    // el texto del error: el de la pantalla (messages), el del proyecto para este campo o el de Calcita\n    const validationTextOf = useValidationText({name, label, messages});\n    const generatedId = useId();\n    const inputId = `${name ?? 'color'}-${generatedId}`;\n    const color = value ?? '';\n    const isValidColor = HEX_COLOR.test(color);\n    const contrastRatio = isValidColor ? contrastOnWhite(color) : null;\n    const suggestion = checkContrast && isValidColor && contrastRatio < MIN_CONTRAST ? readableVariantOf(color) : null;\n    const errorText = validationTextOf(error);\n    const contrastText = contrastRatio && checkContrast ? t('form.colorContrast', {ratio: contrastRatio.toFixed(RATIO_DECIMALS)}) : helperText;\n    const choose = (nextColor) => onChange(nextColor.toUpperCase());\n\n    return (\n        <FieldFrame inputId={inputId} label={label} required={required}>\n            <Stack spacing={1}>\n                {/* un solo campo: la muestra redonda al inicio (el «color well» de Apple) y el código al lado. Picar la muestra\n                    abre el selector de colores del sistema (un input type=color invisible encima de ella). Antes eran dos cajas\n                    sueltas (el selector del navegador en la suya y el código en otra) y se veían como piezas sueltas */}\n                <TextField\n                    name={name}\n                    id={inputId}\n                    inputRef={inputRef}\n                    size=\"small\"\n                    fullWidth\n                    value={color}\n                    disabled={disabled}\n                    required={required}\n                    placeholder=\"#RRGGBB\"\n                    onChange={(event) => choose(event.target.value)}\n                    onBlur={onBlur}\n                    error={Boolean(errorText)}\n                    helperText={errorText ?? contrastText}\n                    slotProps={{\n                        input: {\n                            startAdornment: (\n                                <InputAdornment position=\"start\">\n                                    <ColorSwatch component=\"label\"\n                                         ownSx={(theme) => ({\n                                             position: 'relative', display: 'block', flexShrink: 0, width: SWATCH_PIXELS, height: SWATCH_PIXELS,\n                                             borderRadius: '50%', cursor: disabled ? 'default' : 'pointer',\n                                             backgroundColor: isValidColor ? color : 'transparent',\n                                             // la orilla de la muestra: que se vea aunque el color sea el del fondo (blanco en claro, negro en oscuro)\n                                             boxShadow: `inset 0 0 0 1px ${SWATCH_EDGE.light}`,\n                                             ...theme.applyStyles('dark', {boxShadow: `inset 0 0 0 1px ${SWATCH_EDGE.dark}`}),\n                                         })}>\n                                        <ColorNativeInput component=\"input\" type=\"color\" value={isValidColor ? color : NEUTRAL_COLOR} disabled={disabled}\n                                             aria-label={t('form.pickColor')} onChange={(event) => choose(event.target.value)}\n                                             ownSx={{position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0, border: 0, p: 0, cursor: 'inherit'}} />\n                                    </ColorSwatch>\n                                </InputAdornment>\n                            ),\n                        },\n                        htmlInput: {maxLength: COLOR_LENGTH, spellCheck: false, style: {fontVariantNumeric: 'tabular-nums'}},\n                    }}\n                />\n                {suggestion && (\n                    <Alert severity=\"warning\"\n                           action={<Button color=\"inherit\" size=\"small\" onClick={() => choose(suggestion)}>{t('form.colorUseSuggestion', {color: suggestion})}</Button>}>\n                        {t('form.colorLowContrast', {suggestion})}\n                    </Alert>\n                )}\n            </Stack>\n        </FieldFrame>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst ColorInput = withPieceSlots(ColorInputContent, THEME_NAME);\nexport default ColorInput;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,UAAU,GAAG;AACvD,MAAM,mBAAmB,UAAU,YAAY,eAAe,GAAG;AAGjE,MAAM,eAAe;AAErB,MAAM,gBAAgB;AACtB,MAAM,iBAAiB;AAEvB,MAAM,gBAAgB;AACtB,MAAM,cAAc,OAAO,OAAO,EAAC,OAAO,0BAA0B,MAAM,6BAA4B;AAmBtG,SAAS,kBAAkB,OAAO;AAE9B,QAAM;AAAA,IACN;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAO,aAAa;AAAA,IAAK,gBAAgB;AAAA,IAAM,WAAW;AAAA,IAAO,WAAW;AAAA,IAAO;AAAA,IAAU;AAAA,IAAU;AAAA,IAC7I,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AAC/B,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AAEjD,QAAM,mBAAmB,kBAAkB,EAAC,MAAM,OAAO,UAAS;AAClE,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,GAAG,QAAQ,OAAO,IAAI,WAAW;AACjD,QAAM,QAAQ,SAAS;AACvB,QAAM,eAAe,UAAU,KAAK,KAAK;AACzC,QAAM,gBAAgB,eAAe,gBAAgB,KAAK,IAAI;AAC9D,QAAM,aAAa,iBAAiB,gBAAgB,gBAAgB,eAAe,kBAAkB,KAAK,IAAI;AAC9G,QAAM,YAAY,iBAAiB,KAAK;AACxC,QAAM,eAAe,iBAAiB,gBAAgB,EAAE,sBAAsB,EAAC,OAAO,cAAc,QAAQ,cAAc,EAAA,CAAE,IAAI;AAChI,QAAM,SAAS,CAAC,cAAc,SAAS,UAAU,aAAa;AAE9D,SACI,oBAAC,cAAW,SAAkB,OAAc,UACxC,UAAA,qBAAC,OAAA,EAAM,SAAS,GAIZ,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA,IAAI;AAAA,QACJ;AAAA,QACA,MAAK;AAAA,QACL,WAAS;AAAA,QACT,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,aAAY;AAAA,QACZ,UAAU,CAAC,UAAU,OAAO,MAAM,OAAO,KAAK;AAAA,QAC9C;AAAA,QACA,OAAO,QAAQ,SAAS;AAAA,QACxB,YAAY,aAAa;AAAA,QACzB,WAAW;AAAA,UACP,OAAO;AAAA,YACH,gBACI,oBAAC,gBAAA,EAAe,UAAS,SACrB,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBAAY,WAAU;AAAA,gBAClB,OAAO,CAAC,WAAW;AAAA,kBACf,UAAU;AAAA,kBAAY,SAAS;AAAA,kBAAS,YAAY;AAAA,kBAAG,OAAO;AAAA,kBAAe,QAAQ;AAAA,kBACrF,cAAc;AAAA,kBAAO,QAAQ,WAAW,YAAY;AAAA,kBACpD,iBAAiB,eAAe,QAAQ;AAAA;AAAA,kBAExC,WAAW,mBAAmB,YAAY,KAAK;AAAA,kBAC/C,GAAG,MAAM,YAAY,QAAQ,EAAC,WAAW,mBAAmB,YAAY,IAAI,GAAA,CAAG;AAAA,gBAAA;AAAA,gBAEpF,UAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBAAiB,WAAU;AAAA,oBAAQ,MAAK;AAAA,oBAAQ,OAAO,eAAe,QAAQ;AAAA,oBAAe;AAAA,oBACzF,cAAY,EAAE,gBAAgB;AAAA,oBAAG,UAAU,CAAC,UAAU,OAAO,MAAM,OAAO,KAAK;AAAA,oBAC/E,OAAO,EAAC,UAAU,YAAY,OAAO,GAAG,OAAO,QAAQ,QAAQ,QAAQ,SAAS,GAAG,QAAQ,GAAG,GAAG,GAAG,QAAQ,UAAA;AAAA,kBAAS;AAAA,gBAAA;AAAA,cAAG;AAAA,YAAA,EACjI,CACJ;AAAA,UAAA;AAAA,UAGR,WAAW,EAAC,WAAW,cAAc,YAAY,OAAO,OAAO,EAAC,oBAAoB,eAAA,EAAc;AAAA,QAAC;AAAA,MACvG;AAAA,IAAA;AAAA,IAEH,cACG;AAAA,MAAC;AAAA,MAAA;AAAA,QAAM,UAAS;AAAA,QACT,QAAQ,oBAAC,QAAA,EAAO,OAAM,WAAU,MAAK,SAAQ,SAAS,MAAM,OAAO,UAAU,GAAI,UAAA,EAAE,2BAA2B,EAAC,OAAO,WAAA,CAAW,GAAE;AAAA,QACrI,UAAA,EAAE,yBAAyB,EAAC,WAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5C,EAAA,CAER,EAAA,CACJ;AAER;AAGA,MAAM,aAAa,eAAe,mBAAmB,UAAU;"}

package/dist/inputs/FieldFrame.js

@@ -4,20 +4,35 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { FormRow } from "./FormSection.js";
 import { useIsInsideFormSection } from "./formLayoutContext.js";
+import { requiredMarkSxOf, REQUIRED_LABEL_ATTRIBUTE } from "./requiredMark.js";
 import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 const THEME_NAME = "CalcitaFieldFrame";
 const FieldFrameRoot = piecePart(THEME_NAME, "Root", Stack);
 const FieldFrameLabel = piecePart(THEME_NAME, "Label", Typography);
 function FieldFrameContent(props) {
-  const { inputId, labelId, label, children, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  const { inputId, labelId, label, required = false, children, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const isRow = useIsInsideFormSection();
+  const { t } = useToolkitTranslation("common");
   if (isRow) {
-    return /* @__PURE__ */ jsx(FormRow, { label, htmlFor: inputId, labelId, children });
+    return /* @__PURE__ */ jsx(FormRow, { label, htmlFor: inputId, labelId, required, children });
   }
   return /* @__PURE__ */ jsxs(FieldFrameRoot, { spacing: 0.75, children: [
-    /* @__PURE__ */ jsx(FieldFrameLabel, { component: "label", id: labelId, htmlFor: inputId, variant: "overline", color: "text.secondary", children: label }),
+    /* @__PURE__ */ jsx(
+      FieldFrameLabel,
+      {
+        component: "label",
+        id: labelId,
+        htmlFor: inputId,
+        variant: "overline",
+        color: "text.secondary",
+        ...required && { [REQUIRED_LABEL_ATTRIBUTE]: "true" },
+        ownSx: required ? requiredMarkSxOf(t("form.requiredMark")) : void 0,
+        children: label
+      }
+    ),
     children
   ] });
 }

package/dist/inputs/FieldFrame.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldFrame.js","sources":["../../src/inputs/FieldFrame.jsx"],"sourcesContent":["// El marco de todos los campos del paquete. Fuera de una FormSection, la etiqueta va ARRIBA del campo, ligada a él por su\n// id; dentro de una FormSection (el formulario agrupado de Apple), el campo se vuelve un renglón: la etiqueta a la\n// izquierda y el valor a la derecha (FormRow).\n//\n// La etiqueta va afuera y no flotando adentro del campo: se lee igual con el campo vacío o lleno, y no brinca al escribir.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFieldFrame con styleOverrides de sus\n// partes root (la columna) y label (la etiqueta de arriba), y slots/slotProps para cambiarlas. Dentro de una FormSection el\n// renglón es CalcitaFormRow.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {FormRow} from '@/inputs/FormSection.jsx';\nimport {useIsInsideFormSection} from '@/inputs/formLayoutContext.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaFieldFrame)\nconst THEME_NAME = 'CalcitaFieldFrame';\nconst FieldFrameRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst FieldFrameLabel = piecePart(THEME_NAME, 'Label', Typography);\n\n/**\n * @param {object} props\n * @param {string} props.inputId el id del campo (la etiqueta lo nombra para el lector de pantalla)\n * @param {string} [props.labelId] el id de la etiqueta, para un campo que no es un <input> (la lista desplegable de MUI es un\n *     div: `for` no la une con su etiqueta y el campo la nombra con aria-labelledby)\n * @param {import('react').ReactNode} props.label ya traducida\n * @param {import('react').ReactNode} props.children el campo\n */\nfunction FieldFrameContent(props) {\n    const {inputId, labelId, label, children, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const isRow = useIsInsideFormSection();\n\n    if (isRow) {\n        return <FormRow label={label} htmlFor={inputId} labelId={labelId}>{children}</FormRow>;\n    }\n\n    return (\n        <FieldFrameRoot spacing={0.75}>\n            <FieldFrameLabel component=\"label\" id={labelId} htmlFor={inputId} variant=\"overline\" color=\"text.secondary\">{label}</FieldFrameLabel>\n            {children}\n        </FieldFrameRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst FieldFrame = withPieceSlots(FieldFrameContent, THEME_NAME);\nexport default FieldFrame;\n"],"names":[],"mappings":";;;;;;;;AAoBA,MAAM,aAAa;AACnB,MAAM,iBAAiB,UAAU,YAAY,QAAQ,KAAK;AAC1D,MAAM,kBAAkB,UAAU,YAAY,SAAS,UAAU;AAUjE,SAAS,kBAAkB,OAAO;AAC9B,QAAM,EAAC,SAAS,SAAS,OAAO,UAAU,GAAG,iBAAgB,cAAc,OAAO,UAAU;AAC5F,mBAAiB,YAAY,YAAY;AACzC,QAAM,QAAQ,uBAAA;AAEd,MAAI,OAAO;AACP,+BAAQ,SAAA,EAAQ,OAAc,SAAS,SAAS,SAAmB,UAAS;AAAA,EAChF;AAEA,SACI,qBAAC,gBAAA,EAAe,SAAS,MACrB,UAAA;AAAA,IAAA,oBAAC,iBAAA,EAAgB,WAAU,SAAQ,IAAI,SAAS,SAAS,SAAS,SAAQ,YAAW,OAAM,kBAAkB,UAAA,OAAM;AAAA,IAClH;AAAA,EAAA,GACL;AAER;AAGA,MAAM,aAAa,eAAe,mBAAmB,UAAU;"}
+{"version":3,"file":"FieldFrame.js","sources":["../../src/inputs/FieldFrame.jsx"],"sourcesContent":["// El marco de todos los campos del paquete. Fuera de una FormSection, la etiqueta va ARRIBA del campo, ligada a él por su\n// id; dentro de una FormSection (el formulario agrupado de Apple), el campo se vuelve un renglón: la etiqueta a la\n// izquierda y el valor a la derecha (FormRow).\n//\n// La etiqueta va afuera y no flotando adentro del campo: se lee igual con el campo vacío o lleno, y no brinca al escribir.\n//\n// Un campo obligatorio (required) lleva un asterisco en la etiqueta, como en MUI (requiredMark.js: va en el estilo y no como\n// texto, para que la etiqueta siga diciendo lo mismo). Antes no se veía por ningún lado: la etiqueta la pinta este marco y no\n// la de MUI, que es la que ponía el asterisco.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFieldFrame con styleOverrides de sus\n// partes root (la columna) y label (la etiqueta de arriba; el asterisco es su '&[data-required]::after'), y slots/slotProps\n// para cambiarlas. Dentro de una FormSection el\n// renglón es CalcitaFormRow.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {FormRow} from '@/inputs/FormSection.jsx';\nimport {useIsInsideFormSection} from '@/inputs/formLayoutContext.js';\nimport {REQUIRED_LABEL_ATTRIBUTE, requiredMarkSxOf} from '@/inputs/requiredMark.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaFieldFrame)\nconst THEME_NAME = 'CalcitaFieldFrame';\nconst FieldFrameRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst FieldFrameLabel = piecePart(THEME_NAME, 'Label', Typography);\n\n/**\n * @param {object} props\n * @param {string} props.inputId el id del campo (la etiqueta lo nombra para el lector de pantalla)\n * @param {string} [props.labelId] el id de la etiqueta, para un campo que no es un <input> (la lista desplegable de MUI es un\n *     div: `for` no la une con su etiqueta y el campo la nombra con aria-labelledby)\n * @param {import('react').ReactNode} props.label ya traducida\n * @param {boolean} [props.required] el asterisco en la etiqueta\n * @param {import('react').ReactNode} props.children el campo\n */\nfunction FieldFrameContent(props) {\n    const {inputId, labelId, label, required = false, children, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const isRow = useIsInsideFormSection();\n    const {t} = useToolkitTranslation('common');\n\n    if (isRow) {\n        return <FormRow label={label} htmlFor={inputId} labelId={labelId} required={required}>{children}</FormRow>;\n    }\n\n    return (\n        <FieldFrameRoot spacing={0.75}>\n            <FieldFrameLabel component=\"label\" id={labelId} htmlFor={inputId} variant=\"overline\" color=\"text.secondary\"\n                             {...(required && {[REQUIRED_LABEL_ATTRIBUTE]: 'true'})} ownSx={required ? requiredMarkSxOf(t('form.requiredMark')) : undefined}>\n                {label}\n            </FieldFrameLabel>\n            {children}\n        </FieldFrameRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst FieldFrame = withPieceSlots(FieldFrameContent, THEME_NAME);\nexport default FieldFrame;\n"],"names":[],"mappings":";;;;;;;;;;AA2BA,MAAM,aAAa;AACnB,MAAM,iBAAiB,UAAU,YAAY,QAAQ,KAAK;AAC1D,MAAM,kBAAkB,UAAU,YAAY,SAAS,UAAU;AAWjE,SAAS,kBAAkB,OAAO;AAC9B,QAAM,EAAC,SAAS,SAAS,OAAO,WAAW,OAAO,UAAU,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AAC9G,mBAAiB,YAAY,YAAY;AACzC,QAAM,QAAQ,uBAAA;AACd,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAE1C,MAAI,OAAO;AACP,+BAAQ,SAAA,EAAQ,OAAc,SAAS,SAAS,SAAkB,UAAqB,UAAS;AAAA,EACpG;AAEA,SACI,qBAAC,gBAAA,EAAe,SAAS,MACrB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAgB,WAAU;AAAA,QAAQ,IAAI;AAAA,QAAS,SAAS;AAAA,QAAS,SAAQ;AAAA,QAAW,OAAM;AAAA,QACzE,GAAI,YAAY,EAAC,CAAC,wBAAwB,GAAG,OAAA;AAAA,QAAU,OAAO,WAAW,iBAAiB,EAAE,mBAAmB,CAAC,IAAI;AAAA,QACjI,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEJ;AAAA,EAAA,GACL;AAER;AAGA,MAAM,aAAa,eAAe,mBAAmB,UAAU;"}

package/dist/inputs/FormSection.js

@@ -1,13 +1,16 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useId } from "react";
+import { useId, useMemo } from "react";
 import Box from "@mui/material/Box";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
 import { styled, useThemeProps } from "@mui/material/styles";
-import { FormSectionContext } from "./formLayoutContext.js";
+import { useFormSectionLayout, FormSectionContext } from "./formLayoutContext.js";
+import { requiredMarkSxOf, REQUIRED_LABEL_ATTRIBUTE } from "./requiredMark.js";
 import { fieldVariablesOf, accentTextStylesOf, PANEL_RADIUS, fieldWellFromVariablesOf } from "../theme/glassSurface.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+const FORM_LABEL_PLACEMENT = Object.freeze({ side: "side", topOnPhone: "topOnPhone" });
 const FORM_ROW_CLASS = "calcita-form-row";
 const ROW_MIN_HEIGHT_PIXELS = 52;
 const ROW_PADDING_BLOCK_PIXELS = 8;
@@ -37,8 +40,10 @@ function rowControlSxOf(theme) {
 }
 const SECTION_THEME_NAME = "CalcitaFormSection";
 const ROW_THEME_NAME = "CalcitaFormRow";
-const FormRowRoot = styled(Box, { name: ROW_THEME_NAME, slot: "Root" })(({ theme }) => {
+const isPartProp = (propName) => propName !== "ownerState";
+const FormRowRoot = styled(Box, { name: ROW_THEME_NAME, slot: "Root", shouldForwardProp: isPartProp })(({ theme, ownerState }) => {
   const palette = (theme.vars ?? theme).palette;
+  const isTopOnPhone = ownerState?.labelPlacement === FORM_LABEL_PLACEMENT.topOnPhone;
   return theme.unstable_sx({
     position: "relative",
     display: "flex",
@@ -51,15 +56,22 @@ const FormRowRoot = styled(Box, { name: ROW_THEME_NAME, slot: "Root" })(({ theme
     "&:has(.Mui-error) > label": { color: palette.error.main },
     // los tonos de los campos (los del proyecto con createToolkitTheme fields, o los de Apple) para sus campos
     ...fieldVariablesOf(theme),
-    ...rowControlSxOf(theme)
+    ...rowControlSxOf(theme),
+    // en el teléfono, la etiqueta arriba y el campo a todo lo ancho debajo
+    ...isTopOnPhone && { [theme.breakpoints.down("sm")]: { flexDirection: "column", alignItems: "stretch", gap: 0.5 } }
   });
 });
-const FormRowLabel = styled(Typography, { name: ROW_THEME_NAME, slot: "Label" })(({ theme }) => theme.unstable_sx({
+const FormRowLabel = styled(Typography, { name: ROW_THEME_NAME, slot: "Label", shouldForwardProp: isPartProp })(({ theme, ownerState }) => theme.unstable_sx({
   flex: `0 0 ${LABEL_COLUMN.share}`,
   maxWidth: LABEL_COLUMN.maxPixels,
   pt: `${LABEL_TOP_PIXELS}px`,
   lineHeight: 1.5,
-  color: "text.primary"
+  color: "text.primary",
+  ...ownerState?.labelPlacement === FORM_LABEL_PLACEMENT.topOnPhone && {
+    [theme.breakpoints.down("sm")]: { flex: "none", maxWidth: "none", pt: 0 }
+  },
+  // el asterisco de lo obligatorio: aquí, debajo de lo que el proyecto ponga en su tema
+  ...ownerState?.requiredMark && requiredMarkSxOf(ownerState.requiredMark)
 }));
 const FormRowControl = styled(Box, { name: ROW_THEME_NAME, slot: "Control" })({
   flex: 1,
@@ -86,24 +98,43 @@ const FormSectionCard = styled(Paper, { name: SECTION_THEME_NAME, slot: "Card" }
 }));
 const FormSectionFooter = styled(Typography, { name: SECTION_THEME_NAME, slot: "Footer" })(({ theme }) => theme.unstable_sx({ px: 2, mt: 0.75 }));
 function FormRow(props) {
-  const { label, htmlFor, labelId, children, ...unknownProps } = useThemeProps({ props, name: ROW_THEME_NAME });
+  const { label, htmlFor, labelId, required = false, children, ...unknownProps } = useThemeProps({ props, name: ROW_THEME_NAME });
   warnUnknownProps(ROW_THEME_NAME, unknownProps);
-  return /* @__PURE__ */ jsxs(FormRowRoot, { className: FORM_ROW_CLASS, children: [
-    /* @__PURE__ */ jsx(FormRowLabel, { component: "label", id: labelId, htmlFor, variant: "body1", children: label }),
+  const { t } = useToolkitTranslation("common");
+  const sectionLayout = useFormSectionLayout();
+  const ownerState = {
+    labelPlacement: sectionLayout ? sectionLayout.labelPlacement : FORM_LABEL_PLACEMENT.side,
+    requiredMark: required ? t("form.requiredMark") : null
+  };
+  return /* @__PURE__ */ jsxs(FormRowRoot, { className: FORM_ROW_CLASS, ownerState, children: [
+    /* @__PURE__ */ jsx(
+      FormRowLabel,
+      {
+        component: "label",
+        id: labelId,
+        htmlFor,
+        variant: "body1",
+        ownerState,
+        ...required && { [REQUIRED_LABEL_ATTRIBUTE]: "true" },
+        children: label
+      }
+    ),
     /* @__PURE__ */ jsx(FormRowControl, { children })
   ] });
 }
 function FormSection(props) {
-  const { title, footer, children, ...unknownProps } = useThemeProps({ props, name: SECTION_THEME_NAME });
+  const { title, footer, labelPlacement = FORM_LABEL_PLACEMENT.side, children, ...unknownProps } = useThemeProps({ props, name: SECTION_THEME_NAME });
   warnUnknownProps(SECTION_THEME_NAME, unknownProps);
   const titleId = useId();
-  return /* @__PURE__ */ jsx(FormSectionContext, { value: true, children: /* @__PURE__ */ jsxs(FormSectionRoot, { component: "section", "aria-labelledby": title ? titleId : void 0, children: [
+  const layout = useMemo(() => ({ labelPlacement }), [labelPlacement]);
+  return /* @__PURE__ */ jsx(FormSectionContext, { value: layout, children: /* @__PURE__ */ jsxs(FormSectionRoot, { component: "section", "aria-labelledby": title ? titleId : void 0, children: [
     title && /* @__PURE__ */ jsx(FormSectionTitle, { id: titleId, variant: "subtitle2", component: "h2", color: "text.secondary", children: title }),
     /* @__PURE__ */ jsx(FormSectionCard, { variant: "outlined", children: /* @__PURE__ */ jsx(Box, { sx: { mt: "-1px" }, children }) }),
     footer && /* @__PURE__ */ jsx(FormSectionFooter, { variant: "caption", component: "p", color: "text.secondary", children: footer })
   ] }) });
 }
 export {
+  FORM_LABEL_PLACEMENT,
   FORM_ROW_CLASS,
   FormRow,
   FormSection as default