@stackcraftmx/calcita 0.52.0 → 0.53.0

package/dist/types/hookForm/FormTransferListField.d.ts

@@ -1,8 +1,8 @@
 /**
- * @param {{name: string, control?: object} & Omit<Parameters<typeof import('../inputs/TransferListInput.js').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las del campo de la casa, sin
- *     value / onChange / onBlur / error; control: el de useForm, si la pantalla no usa FormProvider
+ * @param {{name: string, control?: object} & Omit<Parameters<typeof import('../inputs/TransferListInput.js').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('../inputs/TransferListInput.js').default>[0], 'onChange'|'onBlur'>>} props las del campo de la casa, sin
+ *     value ni error (su onChange y su onBlur corren después de los del formulario); control: el de useForm, si la pantalla no usa FormProvider
  */
 export default function FormTransferListField({ name, control, ...inputProps }: {
     name: string;
     control?: object;
-} & Omit<Parameters<typeof import('../inputs/TransferListInput.js').default>[0], 'name' | 'value' | 'onChange' | 'onBlur' | 'error'>): import("react").JSX.Element;
+} & Omit<Parameters<typeof import('../inputs/TransferListInput.js').default>[0], 'name' | 'value' | 'onChange' | 'onBlur' | 'error'> & Partial<Pick<Parameters<typeof import('../inputs/TransferListInput.js').default>[0], 'onChange' | 'onBlur'>>): import("react").JSX.Element;

package/dist/types/hookForm/FormWizard.d.ts

@@ -9,13 +9,14 @@
  * @param {boolean} [props.steps[].completed] lleva la palomita (cuando los títulos se pulsan, solo si la pantalla lo dice)
  * @param {string} props.submitLabel ya traducido: el botón del último paso
  * @param {'horizontal'|'vertical'} [props.orientation] uno de WIZARD_ORIENTATION; por omisión horizontal
+ * @param {boolean} [props.hideBackOnFirstStep] en el primer paso no se pinta «Anterior»; por omisión sale apagado, como antes
  * @param {string} [props.initialStepKey] la llave del paso en el que se abre (la que diga el servidor); por omisión el primero
  * @param {'none'|'free'|'checked'} [props.stepSelection] uno de WIZARD_STEP_SELECTION: si el título de otro paso se pulsa y qué
  *   revisa antes; por omisión none (se avanza con «Siguiente», como siempre)
  * @param {(stepKey: string, index: number) => void} [props.onStepChange] cada vez que cambia el paso abierto
  * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {wizard: {next, back, skip, optional, skipped, stepOf}}
  */
-export default function FormWizard({ steps, submitLabel, orientation, initialStepKey, stepSelection, onStepChange, texts, ...unknownProps }: {
+export default function FormWizard({ steps, submitLabel, orientation, hideBackOnFirstStep, initialStepKey, stepSelection, onStepChange, texts, ...unknownProps }: {
     steps: {
         key: string;
         label: string;
@@ -26,6 +27,7 @@ export default function FormWizard({ steps, submitLabel, orientation, initialSte
     }[];
     submitLabel: string;
     orientation?: 'horizontal' | 'vertical';
+    hideBackOnFirstStep?: boolean;
     initialStepKey?: string;
     stepSelection?: 'none' | 'free' | 'checked';
     onStepChange?: (stepKey: string, index: number) => void;

package/dist/types/hookForm/useHookFormField.d.ts

@@ -1,13 +1,17 @@
 /**
  * @param {string} name el campo del formulario
  * @param {object} [control] el de useForm, si la pantalla no usa FormProvider
- * @returns {{name: string, value: unknown, onChange: (value: unknown) => void, onBlur: () => void, inputRef: Function, error: unknown}}
+ * @param {{onChange?: Function, onBlur?: Function}} [screen] lo que la pantalla le dijo al campo
+ * @returns {{name: string, value: unknown, onChange: (value: unknown, ...rest: unknown[]) => void, onBlur: (...args: unknown[]) => void, inputRef: Function, error: unknown}}
  */
-export declare function useHookFormField(name: string, control?: object): {
+export declare function useHookFormField(name: string, control?: object, screen?: {
+    onChange?: Function;
+    onBlur?: Function;
+}): {
     name: string;
     value: unknown;
-    onChange: (value: unknown) => void;
-    onBlur: () => void;
+    onChange: (value: unknown, ...rest: unknown[]) => void;
+    onBlur: (...args: unknown[]) => void;
     inputRef: Function;
     error: unknown;
 };

package/dist/types/index.d.ts

@@ -10,7 +10,7 @@ export { createPathIndex, fillPath } from './toolkit/pathIndex.js';
 export { combineTexts } from './toolkit/combineTexts.js';
 export { default as toolkitTextsEs } from './locales/es.js';
 export { default as toolkitTextsEn } from './locales/en.js';
-export { ConfirmDialog, ModalWaiting, NEW_BUILD_NOTICE_VARIANT, NewBuildNotice, StaleBuildBoundary, TOAST_DEFAULT_OPTIONS, Toaster, confirmActionMachine, dismissToast, errorsObjectToMessage, toastDefault, toastError, toastInfo, toastLoading, toastProblem, toastPromise, toastSuccess, toastWarn, useConfirmAction, } from './feedback/index.js';
+export { ConfirmDialog, ModalWaiting, NEW_BUILD_NOTICE_VARIANT, NewBuildNotice, StaleBuildBoundary, TOAST_DEFAULT_OPTIONS, TOASTER_POSITION, Toaster, confirmActionMachine, dismissToast, errorsObjectToMessage, toastDefault, toastError, toastInfo, toastLoading, toastProblem, toastPromise, toastSuccess, toastWarn, useConfirmAction, } from './feedback/index.js';
 export { DEFAULT_FILE_TYPES, DOWNLOAD_STATUS, DownloadManager, UNKNOWN_FILE_TYPE, cancelDownload, clearFinishedDownloads, downloadsMachine, startDownload, useFileTypes, } from './downloads/index.js';
 export { THEME_LOOK, TOP_BAR, createToolkitTheme } from './theme/createToolkitTheme.js';
 export { isAndroidDevice } from './theme/androidDevice.js';
@@ -68,7 +68,7 @@ export { default as ColorInput } from './inputs/ColorInput.js';
 export { default as FieldFrame } from './inputs/FieldFrame.js';
 export { default as MaskedInput } from './inputs/MaskedInput.js';
 export { INPUT_MASK, isMaskComplete, maskPatternOf, maskedTextOf, rawValueOf } from './inputs/inputMasks.js';
-export { FORM_ROW_CLASS, FormRow, default as FormSection } from './inputs/FormSection.js';
+export { FORM_LABEL_PLACEMENT, FORM_ROW_CLASS, FormRow, default as FormSection } from './inputs/FormSection.js';
 export { default as CheckboxGroupInput } from './inputs/CheckboxGroupInput.js';
 export { default as NumberInput } from './inputs/NumberInput.js';
 export { default as TransferListInput } from './inputs/TransferListInput.js';

package/dist/types/inputs/CatalogInput.d.ts

@@ -20,6 +20,7 @@ declare const CatalogInput: (props: {
     loading?: boolean;
     placeholder?: string;
     disabled?: boolean;
+    required?: boolean;
     inputRef?: import('react').Ref<HTMLInputElement>;
     multiple?: boolean;
     selectAll?: boolean;

package/dist/types/inputs/CheckboxGroupInput.d.ts

@@ -18,6 +18,7 @@ declare const CheckboxGroupInput: (props: {
     };
     helperText?: string;
     disabled?: boolean;
+    required?: boolean;
     sx?: object;
     messages?: Record<string, string | object>;
     texts?: object;

package/dist/types/inputs/ColorInput.d.ts

@@ -11,6 +11,7 @@ declare const ColorInput: (props: {
     helperText?: string;
     checkContrast?: boolean;
     disabled?: boolean;
+    required?: boolean;
     inputRef?: import('react').Ref<HTMLInputElement>;
     messages?: Record<string, string | object>;
     texts?: object;

package/dist/types/inputs/FieldFrame.d.ts

@@ -2,6 +2,7 @@ declare const FieldFrame: (props: {
     inputId: string;
     labelId?: string;
     label: import('react').ReactNode;
+    required?: boolean;
     children: import('react').ReactNode;
 } & {
     slots?: Record<string, import('react').ElementType>;

package/dist/types/inputs/FormSection.d.ts

@@ -1,3 +1,11 @@
+/**
+ * Dónde va la etiqueta de cada renglón: a la izquierda siempre (side, lo de siempre) o arriba del campo en el teléfono
+ * (topOnPhone: por debajo de `sm` en el tema; más ancho, a la izquierda).
+ */
+export declare const FORM_LABEL_PLACEMENT: Readonly<{
+    side: "side";
+    topOnPhone: "topOnPhone";
+}>;
 /** La clase de cada renglón: la sección le dibuja su línea de arriba, esté donde esté adentro de la tarjeta. */
 export declare const FORM_ROW_CLASS = "calcita-form-row";
 /**
@@ -8,22 +16,27 @@ export declare const FORM_ROW_CLASS = "calcita-form-row";
  * @param {import('react').ReactNode} props.label ya traducida
  * @param {string} [props.htmlFor] el id del campo que nombra la etiqueta
  * @param {string} [props.labelId] el id de la etiqueta (para un campo que la nombra con aria-labelledby)
+ * @param {boolean} [props.required] el asterisco en la etiqueta (el lector de pantalla no lo lee: el campo ya lo dice)
  * @param {import('react').ReactNode} props.children
  */
 export declare function FormRow(props: {
     label: import('react').ReactNode;
     htmlFor?: string;
     labelId?: string;
+    required?: boolean;
     children: import('react').ReactNode;
 }): import("react").JSX.Element;
 /**
  * @param {object} props
  * @param {string} [props.title] ya traducido; va arriba de la tarjeta
  * @param {import('react').ReactNode} [props.footer] la explicación, abajo de la tarjeta
+ * @param {string} [props.labelPlacement] uno de FORM_LABEL_PLACEMENT: side (por omisión, la etiqueta a la izquierda) o
+ *     topOnPhone (arriba del campo por debajo de `sm`)
  * @param {import('react').ReactNode} props.children los campos, directo o dentro de un Grid, un Stack o un componente propio
  */
 export default function FormSection(props: {
     title?: string;
     footer?: import('react').ReactNode;
+    labelPlacement?: string;
     children: import('react').ReactNode;
 }): import("react").JSX.Element;

package/dist/types/inputs/NumberInput.d.ts

@@ -15,6 +15,7 @@ declare const NumberInput: (props: {
     suffix?: import('react').ReactNode;
     maxDigits?: number;
     disabled?: boolean;
+    required?: boolean;
     inputRef?: import('react').Ref<HTMLInputElement>;
     messages?: Record<string, string | object>;
     texts?: object;

package/dist/types/inputs/SelectInput.d.ts

@@ -17,6 +17,7 @@ declare const SelectInput: (props: {
     helperText?: string;
     placeholder?: string;
     disabled?: boolean;
+    required?: boolean;
     inputRef?: import('react').Ref<HTMLInputElement>;
     multiple?: boolean;
     selectAll?: boolean;

package/dist/types/inputs/TextInput.d.ts

@@ -22,7 +22,7 @@
  * @param {string} [props.autoComplete]
  * @param {boolean} [props.autoFocus]
  * @param {boolean} [props.disabled]
- * @param {boolean} [props.required]
+ * @param {boolean} [props.required] obligatorio: el asterisco en la etiqueta y, como en MUI, required en el campo
  * @param {boolean} [props.fullWidth]
  * @param {string} [props.id]
  * @param {object} [props.slotProps]

package/dist/types/inputs/TransferListInput.d.ts

@@ -20,6 +20,7 @@ declare const TransferListInput: (props: {
     };
     helperText?: string;
     disabled?: boolean;
+    required?: boolean;
     sx?: object;
     messages?: Record<string, string | object>;
     texts?: object;

package/dist/types/inputs/WizardLayout.d.ts

@@ -10,6 +10,7 @@ declare const WizardLayout: (props: {
     skippedKeys?: Set<string>;
     isSubmitting?: boolean;
     orientation?: 'horizontal' | 'vertical';
+    hideBackOnFirstStep?: boolean;
     onBack: () => void;
     onNext: () => void;
     onSkip?: () => void;

package/dist/types/inputs/formLayoutContext.d.ts

@@ -1,3 +1,10 @@
-export declare const FormSectionContext: import("react").Context<boolean>;
+/** @type {import('react').Context<false|{labelPlacement: string}>} */
+export declare const FormSectionContext: import('react').Context<false | {
+    labelPlacement: string;
+}>;
 /** true si el campo va dentro de una FormSection. */
 export declare const useIsInsideFormSection: () => boolean;
+/** Cómo pide la sección sus renglones ({labelPlacement}); false fuera de una sección. */
+export declare const useFormSectionLayout: () => false | {
+    labelPlacement: string;
+};

package/dist/types/inputs/requiredMark.d.ts

@@ -0,0 +1,9 @@
+/** El atributo que marca la etiqueta de un campo obligatorio. */
+export declare const REQUIRED_LABEL_ATTRIBUTE = "data-required";
+/**
+ * Los estilos de la etiqueta de un campo obligatorio: la marca después del texto, pegada y del mismo color.
+ *
+ * @param {string} mark el texto de la marca, ya traducido (common.form.requiredMark: «*»)
+ * @returns {object} para el sx de la etiqueta
+ */
+export declare function requiredMarkSxOf(mark: string): object;

package/dist/types/locales/en.d.ts

@@ -134,6 +134,7 @@ declare const _default: Readonly<{
             showPassword: string;
             hidePassword: string;
             clear: string;
+            requiredMark: string;
             selectPlaceholder: string;
             copy: string;
             copied: string;

package/dist/types/locales/es.d.ts

@@ -134,6 +134,7 @@ declare const _default: Readonly<{
             showPassword: string;
             hidePassword: string;
             clear: string;
+            requiredMark: string;
             selectPlaceholder: string;
             copy: string;
             copied: string;

package/dist/types/richText/FormRichTextField.d.ts

@@ -1,7 +1,7 @@
 /**
- * @param {{name: string} & Omit<Parameters<typeof import('./RichTextEditor.js').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las de
- *     RichTextEditor (features, maxLength, placeholder…), sin value / onChange / onBlur / error
+ * @param {{name: string} & Omit<Parameters<typeof import('./RichTextEditor.js').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'> & Partial<Pick<Parameters<typeof import('./RichTextEditor.js').default>[0], 'onChange'|'onBlur'>>} props las de
+ *     RichTextEditor (features, maxLength, placeholder…), sin value ni error (su onChange y su onBlur corren después de los del formulario)
  */
 export default function FormRichTextField({ name, ...editorProps }: {
     name: string;
-} & Omit<Parameters<typeof import('./RichTextEditor.js').default>[0], 'name' | 'value' | 'onChange' | 'onBlur' | 'error'>): import("react").JSX.Element;
+} & Omit<Parameters<typeof import('./RichTextEditor.js').default>[0], 'name' | 'value' | 'onChange' | 'onBlur' | 'error'> & Partial<Pick<Parameters<typeof import('./RichTextEditor.js').default>[0], 'onChange' | 'onBlur'>>): import("react").JSX.Element;

package/dist/types/richText/RichTextEditor.d.ts

@@ -17,6 +17,7 @@ declare const RichTextEditor: (props: {
     onEditorReady?: (editor: import('@tiptap/react').Editor) => void;
     minHeight?: number;
     disabled?: boolean;
+    required?: boolean;
     sx?: object;
     messages?: Record<string, string | object>;
     texts?: object;

package/dist/types/toolkit/ToolkitProvider.d.ts

@@ -16,6 +16,9 @@
  *     consola una vez por idioma y llave
  * @param {(namespace: string, key: string, values?: object) => string|undefined} [props.translate] traductor del
  *     proyecto (por ejemplo i18next); undefined deja el texto del paquete
+ * @param {boolean} [props.requiredFromSchema] los campos de formik leen del esquema de yup del formulario (validationSchema)
+ *     qué es obligatorio y le ponen su asterisco: el esquema manda y la pantalla no los marca a mano. Lo que la pantalla diga
+ *     con required gana. Por omisión no (cada campo con su required, como antes)
  * @param {string} [props.timeZone] zona de las fechas (por omisión la del navegador)
  * @param {string} [props.currency] moneda de los montos, código ISO 4217 (por omisión MXN)
  * @param {'h23'|'h12'} [props.hourCycle] la hora de 24 horas («15:10», por omisión) o de 12 con a.m. y p.m. («3:10 p.m.»):
@@ -29,7 +32,7 @@
  *     tiene regla
  * @param {import('react').ReactNode} props.children
  */
-export declare const ToolkitProvider: ({ language, languages, onLanguageChange, onMissingText, readValidationMessage, texts, translate, timeZone, currency, hourCycle, appName, navigation, buildId, canAccess, fileTypes, children, ...unknownProps }: {
+export declare const ToolkitProvider: ({ language, languages, onLanguageChange, onMissingText, readValidationMessage, requiredFromSchema, texts, translate, timeZone, currency, hourCycle, appName, navigation, buildId, canAccess, fileTypes, children, ...unknownProps }: {
     language?: string;
     languages?: Array<{
         code: string;
@@ -51,6 +54,7 @@ export declare const ToolkitProvider: ({ language, languages, onLanguageChange,
         language: string;
     }) => void;
     translate?: (namespace: string, key: string, values?: object) => string | undefined;
+    requiredFromSchema?: boolean;
     timeZone?: string;
     currency?: string;
     hourCycle?: 'h23' | 'h12';

package/dist/types/toolkit/toolkitContext.d.ts

@@ -2,11 +2,12 @@ export declare const ToolkitContext: import("react").Context<null>;
 /**
  * La configuración del proveedor; sin proveedor, la vigente con la navegación del navegador.
  *
- * @returns {{language: string, onLanguageChange: Function|null, texts: object, translate: Function|null, timeZone: string, currency: string, hourCycle: 'h23'|'h12', appName: string, buildId: string, navigation: object, canAccess: Function}}
+ * @returns {{language: string, onLanguageChange: Function|null, requiredFromSchema?: boolean, texts: object, translate: Function|null, timeZone: string, currency: string, hourCycle: 'h23'|'h12', appName: string, buildId: string, navigation: object, canAccess: Function}}
  */
 export declare function useToolkitSettings(): {
     language: string;
     onLanguageChange: Function | null;
+    requiredFromSchema?: boolean;
     texts: object;
     translate: Function | null;
     timeZone: string;

package/dist/types/upload/AttachmentsInput.d.ts

@@ -19,6 +19,7 @@
  * @param {boolean} [props.showButton] false esconde «Adjuntar» (la ventana se abre con pickerRef desde un botón suyo)
  * @param {import('react').Ref<{open: () => void}>} [props.pickerRef] recibe {open} para abrir la ventana de archivos
  * @param {boolean} [props.disabled]
+ * @param {boolean} [props.required] obligatorio: el asterisco en la etiqueta (lo revisa el esquema del formulario)
  * @param {boolean} [props.busy] candado mientras se sube: no se puede agregar ni quitar
  * @param {(file: File, reason: string) => void} [props.onReject] reason es uno de FILE_REJECTION; sin él, un aviso
  * @param {Parameters<typeof import('./TemplateDownloadButton.js').default>[0]} [props.template] «Descargar la
@@ -57,6 +58,7 @@ declare function AttachmentsInputContent<T extends File | {
         open: () => void;
     }>;
     disabled?: boolean;
+    required?: boolean;
     busy?: boolean;
     onReject?: (file: File, reason: string) => void;
     template?: Parameters<typeof import('./TemplateDownloadButton.js').default>[0];

package/dist/types/upload/FileInput.d.ts

@@ -17,6 +17,7 @@ declare const FileInput: (props: {
     buttonLabel?: string;
     emptyText?: string;
     disabled?: boolean;
+    required?: boolean;
     busy?: boolean;
     onReject?: (file: File, reason: string) => void;
     template?: Parameters<typeof import('./TemplateDownloadButton.js').default>[0];

package/dist/types/upload/FileUploadInput.d.ts

@@ -40,6 +40,7 @@ declare const FileUploadInput: (props: {
     };
     helperText?: string;
     disabled?: boolean;
+    required?: boolean;
     actions?: import('react').ReactNode;
     onUploaded?: (result: any) => void;
     onUploadFailed?: (error: unknown) => void;

package/dist/types/upload/ImageInput.d.ts

@@ -23,6 +23,7 @@ declare const ImageInput: (props: {
     chooseLabel?: string;
     removeLabel?: string;
     disabled?: boolean;
+    required?: boolean;
     busy?: boolean;
     onReject?: (file: File, reason: string) => void;
     sx?: object;

package/dist/upload/AttachmentsInput.js

@@ -42,6 +42,7 @@ function AttachmentsInputContent(props) {
     showButton = true,
     pickerRef,
     disabled = false,
+    required = false,
     busy = false,
     onReject,
     template,
@@ -121,7 +122,7 @@ function AttachmentsInputContent(props) {
       ]
     }
   );
-  return label ? /* @__PURE__ */ jsx(FieldFrame, { inputId: buttonId, label, children: content }) : content;
+  return label ? /* @__PURE__ */ jsx(FieldFrame, { inputId: buttonId, label, required, children: content }) : content;
 }
 const AttachmentsInput = withPieceSlots(AttachmentsInputContent, THEME_NAME);
 export {

package/dist/upload/AttachmentsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentsInput.js","sources":["../../src/upload/AttachmentsInput.jsx"],"sourcesContent":["// Varios archivos como en un correo: el botón «Adjuntar» con su clip y cada archivo en un chip con su × (Excel en verde,\n// PDF en rojo…). También se pueden soltar encima. Volver a elegir un archivo con el mismo nombre lo reemplaza (se corrigió en\n// disco) y no cuenta doble.\n//\n// Solo ELIGE (controlado: value / onChange recibe la lista completa), con las reglas de los demás cargadores (accept,\n// maxSize por archivo, maxFiles y maxTotalSize; useFilePicker). La lista puede mezclar archivos nuevos (File) con los que ya\n// están guardados ({id?, name, size?}): al editar un registro, los de antes se ven igual y también se quitan.\n//\n// Huecos: showButton={false} + pickerRef para abrir la ventana desde un botón suyo (el clip de la barra de un correo);\n// template («Descargar la plantilla»); actions (botones suyos junto a «Adjuntar»); onRemove (avisar al API que se quitó uno\n// que ya estaba guardado); label, buttonLabel y texts. Con formik: FormAttachmentsField; con react-hook-form, el del mismo\n// nombre.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAttachmentsInput con defaultProps y\n// styleOverrides de sus partes: root, actions, button, list, fileChip, limits.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useImperativeHandle} from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';\n\nimport {useValidationText} from '@/forms/useValidationText.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport FileChip from '@/upload/FileChip.jsx';\nimport TemplateDownloadButton from '@/upload/TemplateDownloadButton.jsx';\nimport {useFilePicker} from '@/upload/useFilePicker.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaAttachmentsInput)\nconst THEME_NAME = 'CalcitaAttachmentsInput';\nconst AttachmentsRoot = piecePart(THEME_NAME, 'Root', Box);\nconst AttachmentsActions = piecePart(THEME_NAME, 'Actions', Stack);\nconst AttachmentsButton = piecePart(THEME_NAME, 'Button', Button);\nconst AttachmentsList = piecePart(THEME_NAME, 'List', Stack);\nconst AttachmentsChip = piecePart(THEME_NAME, 'FileChip', Chip);\nconst AttachmentsLimits = piecePart(THEME_NAME, 'Limits', Typography);\n\n/**\n * La lista conserva el tipo que usa la pantalla para lo ya guardado (T): onChange regresa esos mismos y los File nuevos.\n *\n * @template {File|{id?: string, name: string, size?: number}} T\n * @param {object} props\n * @param {string} [props.name]\n * @param {import('react').ReactNode} [props.label] ya traducida; sin ella, va sin etiqueta (dentro de un correo, por ejemplo)\n * @param {T[]} [props.value] los nuevos y los que ya están guardados\n * @param {(files: Array<T|File>) => void} props.onChange la lista completa\n * @param {() => void} [props.onBlur] se llama al agregar o quitar (para que el formulario lo marque como tocado)\n * @param {(file: T) => void} [props.onRemove] al quitar uno (antes de onChange)\n * @param {string|string[]} [props.accept] 'excel' | ['pdf', 'image'] | '.xlsx,.xls' | 'image/*'\n * @param {number|string} [props.maxSize] el peso máximo de cada archivo: bytes o '10 MB'\n * @param {number} [props.maxFiles] cuántos como máximo\n * @param {number|string} [props.maxTotalSize] cuánto pueden pesar todos juntos\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] ya traducida\n * @param {string} [props.buttonLabel] ya traducido; por omisión «Adjuntar»\n * @param {boolean} [props.showButton] false esconde «Adjuntar» (la ventana se abre con pickerRef desde un botón suyo)\n * @param {import('react').Ref<{open: () => void}>} [props.pickerRef] recibe {open} para abrir la ventana de archivos\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.busy] candado mientras se sube: no se puede agregar ni quitar\n * @param {(file: File, reason: string) => void} [props.onReject] reason es uno de FILE_REJECTION; sin él, un aviso\n * @param {Parameters<typeof import('@/upload/TemplateDownloadButton.jsx').default>[0]} [props.template] «Descargar la\n *     plantilla» junto a «Adjuntar»\n * @param {import('react').ReactNode} [props.actions] botones suyos junto a «Adjuntar»\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 * @param {Record<string, import('react').ElementType>} [props.slots] otro componente en lugar de una parte (root, actions, list…)\n * @param {Record<string, object>} [props.slotProps] props de más para una parte\n */\nfunction AttachmentsInputContent(props) {\n    const {\n        name, label, value = [], onChange, onBlur, onRemove, accept, maxSize, maxFiles, maxTotalSize, error, helperText, buttonLabel,\n        showButton = true, pickerRef, disabled = false, busy = false, onReject, template, actions, 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 {formatFileSize} = useFormatters();\n    const generatedId = useId();\n    const buttonId = `${name ?? 'attachments'}-${generatedId}`;\n    const errorText = validationTextOf(error);\n    const isLocked = disabled || busy;\n    const change = (files) => {\n        onChange(files);\n        onBlur?.();\n    };\n    const picker = useFilePicker({\n        accept, maxSize, multiple: true, maxFiles, maxTotalSize, keptFiles: value, disabled: isLocked, onAccept: change, onReject, texts,\n    });\n    useImperativeHandle(pickerRef, () => ({open: picker.open}), [picker.open]);\n\n    const remove = (file) => {\n        onRemove?.(file);\n        change(value.filter((item) => item !== file));\n    };\n    const totalBytes = value.reduce((sum, file) => sum + (file.size ?? 0), 0);\n    // cuántos y cuánto pesan, solo si hay algún tope que cuidar\n    const limitsText = maxFiles || picker.maxTotalBytes\n        ? t(picker.maxTotalBytes ? 'upload.summaryOf' : 'upload.summary', {\n            count: value.length, total: formatFileSize(totalBytes), max: picker.maxTotalBytes ? formatFileSize(picker.maxTotalBytes) : undefined,\n        })\n        : null;\n    const bottomText = errorText ?? helperText;\n\n    const content = (\n        <AttachmentsRoot aria-busy={busy} {...picker.dropHandlers}\n                         ownSx={{\n                             borderRadius: 1, outline: picker.isDragging ? 2 : 0, outlineStyle: 'dashed', outlineColor: 'primary.main',\n                             bgcolor: picker.isDragging ? 'action.hover' : 'transparent',\n                         }}\n                         sx={sx}>\n            <input {...picker.inputProps} name={name} aria-hidden=\"true\" tabIndex={-1} />\n            {(showButton || template || actions) && (\n                <AttachmentsActions direction=\"row\" ownSx={{alignItems: 'center', flexWrap: 'wrap', gap: 1}}>\n                    {showButton && (\n                        <AttachmentsButton id={buttonId} size=\"small\" startIcon={<AttachFileRoundedIcon />} onClick={picker.open} disabled={isLocked}>\n                            {buttonLabel ?? t('upload.attach')}\n                        </AttachmentsButton>\n                    )}\n                    {template && <TemplateDownloadButton size=\"small\" texts={texts} {...template} />}\n                    {actions}\n                </AttachmentsActions>\n            )}\n            {value.length > 0 && (\n                <AttachmentsList direction=\"row\" role=\"list\" ownSx={{flexWrap: 'wrap', gap: 1, mt: showButton ? 1 : 0}}>\n                    {value.map((file) => (\n                        <Box key={file.id ?? file.name} role=\"listitem\" sx={{maxWidth: '100%'}}>\n                            <FileChip file={file} ChipComponent={AttachmentsChip} removeLabel={t('upload.remove', {name: file.name})}\n                                      onRemove={isLocked ? undefined : () => remove(file)} />\n                        </Box>\n                    ))}\n                </AttachmentsList>\n            )}\n            {limitsText && (\n                <AttachmentsLimits variant=\"caption\" color=\"text.secondary\" ownSx={{display: 'block', mt: 0.5}}>{limitsText}</AttachmentsLimits>\n            )}\n            {bottomText && <FormHelperText error={Boolean(errorText)}>{bottomText}</FormHelperText>}\n        </AttachmentsRoot>\n    );\n\n    return label ? <FieldFrame inputId={buttonId} label={label}>{content}</FieldFrame> : content;\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\n// OJO: con su tipo propio, el genérico (T: el tipo de cada archivo) que la envoltura borraría; slots y slotProps van en su\n// documentación\n/** @type {typeof AttachmentsInputContent} */\nconst AttachmentsInput = withPieceSlots(AttachmentsInputContent, THEME_NAME);\nexport default AttachmentsInput;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AttachmentsInput.js","sources":["../../src/upload/AttachmentsInput.jsx"],"sourcesContent":["// Varios archivos como en un correo: el botón «Adjuntar» con su clip y cada archivo en un chip con su × (Excel en verde,\n// PDF en rojo…). También se pueden soltar encima. Volver a elegir un archivo con el mismo nombre lo reemplaza (se corrigió en\n// disco) y no cuenta doble.\n//\n// Solo ELIGE (controlado: value / onChange recibe la lista completa), con las reglas de los demás cargadores (accept,\n// maxSize por archivo, maxFiles y maxTotalSize; useFilePicker). La lista puede mezclar archivos nuevos (File) con los que ya\n// están guardados ({id?, name, size?}): al editar un registro, los de antes se ven igual y también se quitan.\n//\n// Huecos: showButton={false} + pickerRef para abrir la ventana desde un botón suyo (el clip de la barra de un correo);\n// template («Descargar la plantilla»); actions (botones suyos junto a «Adjuntar»); onRemove (avisar al API que se quitó uno\n// que ya estaba guardado); label, buttonLabel y texts. Con formik: FormAttachmentsField; con react-hook-form, el del mismo\n// nombre.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAttachmentsInput con defaultProps y\n// styleOverrides de sus partes: root, actions, button, list, fileChip, limits.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useImperativeHandle} from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';\n\nimport {useValidationText} from '@/forms/useValidationText.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport FileChip from '@/upload/FileChip.jsx';\nimport TemplateDownloadButton from '@/upload/TemplateDownloadButton.jsx';\nimport {useFilePicker} from '@/upload/useFilePicker.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaAttachmentsInput)\nconst THEME_NAME = 'CalcitaAttachmentsInput';\nconst AttachmentsRoot = piecePart(THEME_NAME, 'Root', Box);\nconst AttachmentsActions = piecePart(THEME_NAME, 'Actions', Stack);\nconst AttachmentsButton = piecePart(THEME_NAME, 'Button', Button);\nconst AttachmentsList = piecePart(THEME_NAME, 'List', Stack);\nconst AttachmentsChip = piecePart(THEME_NAME, 'FileChip', Chip);\nconst AttachmentsLimits = piecePart(THEME_NAME, 'Limits', Typography);\n\n/**\n * La lista conserva el tipo que usa la pantalla para lo ya guardado (T): onChange regresa esos mismos y los File nuevos.\n *\n * @template {File|{id?: string, name: string, size?: number}} T\n * @param {object} props\n * @param {string} [props.name]\n * @param {import('react').ReactNode} [props.label] ya traducida; sin ella, va sin etiqueta (dentro de un correo, por ejemplo)\n * @param {T[]} [props.value] los nuevos y los que ya están guardados\n * @param {(files: Array<T|File>) => void} props.onChange la lista completa\n * @param {() => void} [props.onBlur] se llama al agregar o quitar (para que el formulario lo marque como tocado)\n * @param {(file: T) => void} [props.onRemove] al quitar uno (antes de onChange)\n * @param {string|string[]} [props.accept] 'excel' | ['pdf', 'image'] | '.xlsx,.xls' | 'image/*'\n * @param {number|string} [props.maxSize] el peso máximo de cada archivo: bytes o '10 MB'\n * @param {number} [props.maxFiles] cuántos como máximo\n * @param {number|string} [props.maxTotalSize] cuánto pueden pesar todos juntos\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] ya traducida\n * @param {string} [props.buttonLabel] ya traducido; por omisión «Adjuntar»\n * @param {boolean} [props.showButton] false esconde «Adjuntar» (la ventana se abre con pickerRef desde un botón suyo)\n * @param {import('react').Ref<{open: () => void}>} [props.pickerRef] recibe {open} para abrir la ventana de archivos\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.required] obligatorio: el asterisco en la etiqueta (lo revisa el esquema del formulario)\n * @param {boolean} [props.busy] candado mientras se sube: no se puede agregar ni quitar\n * @param {(file: File, reason: string) => void} [props.onReject] reason es uno de FILE_REJECTION; sin él, un aviso\n * @param {Parameters<typeof import('@/upload/TemplateDownloadButton.jsx').default>[0]} [props.template] «Descargar la\n *     plantilla» junto a «Adjuntar»\n * @param {import('react').ReactNode} [props.actions] botones suyos junto a «Adjuntar»\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 * @param {Record<string, import('react').ElementType>} [props.slots] otro componente en lugar de una parte (root, actions, list…)\n * @param {Record<string, object>} [props.slotProps] props de más para una parte\n */\nfunction AttachmentsInputContent(props) {\n    const {\n        name, label, value = [], onChange, onBlur, onRemove, accept, maxSize, maxFiles, maxTotalSize, error, helperText, buttonLabel,\n        showButton = true, pickerRef, disabled = false, required = false, busy = false, onReject, template, actions, 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 {formatFileSize} = useFormatters();\n    const generatedId = useId();\n    const buttonId = `${name ?? 'attachments'}-${generatedId}`;\n    const errorText = validationTextOf(error);\n    const isLocked = disabled || busy;\n    const change = (files) => {\n        onChange(files);\n        onBlur?.();\n    };\n    const picker = useFilePicker({\n        accept, maxSize, multiple: true, maxFiles, maxTotalSize, keptFiles: value, disabled: isLocked, onAccept: change, onReject, texts,\n    });\n    useImperativeHandle(pickerRef, () => ({open: picker.open}), [picker.open]);\n\n    const remove = (file) => {\n        onRemove?.(file);\n        change(value.filter((item) => item !== file));\n    };\n    const totalBytes = value.reduce((sum, file) => sum + (file.size ?? 0), 0);\n    // cuántos y cuánto pesan, solo si hay algún tope que cuidar\n    const limitsText = maxFiles || picker.maxTotalBytes\n        ? t(picker.maxTotalBytes ? 'upload.summaryOf' : 'upload.summary', {\n            count: value.length, total: formatFileSize(totalBytes), max: picker.maxTotalBytes ? formatFileSize(picker.maxTotalBytes) : undefined,\n        })\n        : null;\n    const bottomText = errorText ?? helperText;\n\n    const content = (\n        <AttachmentsRoot aria-busy={busy} {...picker.dropHandlers}\n                         ownSx={{\n                             borderRadius: 1, outline: picker.isDragging ? 2 : 0, outlineStyle: 'dashed', outlineColor: 'primary.main',\n                             bgcolor: picker.isDragging ? 'action.hover' : 'transparent',\n                         }}\n                         sx={sx}>\n            <input {...picker.inputProps} name={name} aria-hidden=\"true\" tabIndex={-1} />\n            {(showButton || template || actions) && (\n                <AttachmentsActions direction=\"row\" ownSx={{alignItems: 'center', flexWrap: 'wrap', gap: 1}}>\n                    {showButton && (\n                        <AttachmentsButton id={buttonId} size=\"small\" startIcon={<AttachFileRoundedIcon />} onClick={picker.open} disabled={isLocked}>\n                            {buttonLabel ?? t('upload.attach')}\n                        </AttachmentsButton>\n                    )}\n                    {template && <TemplateDownloadButton size=\"small\" texts={texts} {...template} />}\n                    {actions}\n                </AttachmentsActions>\n            )}\n            {value.length > 0 && (\n                <AttachmentsList direction=\"row\" role=\"list\" ownSx={{flexWrap: 'wrap', gap: 1, mt: showButton ? 1 : 0}}>\n                    {value.map((file) => (\n                        <Box key={file.id ?? file.name} role=\"listitem\" sx={{maxWidth: '100%'}}>\n                            <FileChip file={file} ChipComponent={AttachmentsChip} removeLabel={t('upload.remove', {name: file.name})}\n                                      onRemove={isLocked ? undefined : () => remove(file)} />\n                        </Box>\n                    ))}\n                </AttachmentsList>\n            )}\n            {limitsText && (\n                <AttachmentsLimits variant=\"caption\" color=\"text.secondary\" ownSx={{display: 'block', mt: 0.5}}>{limitsText}</AttachmentsLimits>\n            )}\n            {bottomText && <FormHelperText error={Boolean(errorText)}>{bottomText}</FormHelperText>}\n        </AttachmentsRoot>\n    );\n\n    return label ? <FieldFrame inputId={buttonId} label={label} required={required}>{content}</FieldFrame> : content;\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\n// OJO: con su tipo propio, el genérico (T: el tipo de cada archivo) que la envoltura borraría; slots y slotProps van en su\n// documentación\n/** @type {typeof AttachmentsInputContent} */\nconst AttachmentsInput = withPieceSlots(AttachmentsInputContent, THEME_NAME);\nexport default AttachmentsInput;\n"],"names":[],"mappings":"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"}

package/dist/upload/FileInput.js

@@ -34,6 +34,7 @@ function FileInputContent(props) {
     buttonLabel,
     emptyText,
     disabled = false,
+    required = false,
     busy = false,
     onReject,
     template,
@@ -55,7 +56,7 @@ function FileInputContent(props) {
     onBlur?.();
   };
   const picker = useFilePicker({ accept, maxSize, disabled: isLocked, onAccept: change, onReject, texts });
-  return /* @__PURE__ */ jsx(FieldFrame, { inputId: buttonId, label, children: /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsx(FieldFrame, { inputId: buttonId, label, required, children: /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs(
       FileInputRoot,
       {

package/dist/upload/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","sources":["../../src/upload/FileInput.jsx"],"sourcesContent":["// Un archivo del tamaño de un campo, para un formulario (la constancia fiscal de un cliente, el contrato firmado): la\n// etiqueta como los demás campos, el botón «Elegir archivo», el elegido en su chip con la × y abajo su ayuda o su error.\n// Dentro de una FormSection se vuelve renglón, como los demás campos. También se puede soltar el archivo encima.\n//\n// Solo ELIGE (controlado: value / onChange), con las mismas reglas que la zona grande (accept, maxSize; useFilePicker):\n// enviarlo es de la pantalla. value puede ser un archivo nuevo (File) o uno que ya está guardado ({name, size?}), para\n// editar un registro que ya lo tiene.\n//\n// Huecos: template («Descargar la plantilla» junto al botón), actions (botones suyos en el mismo renglón), emptyText,\n// buttonLabel y texts. Con formik: FormFileField (/forms); con react-hook-form, el del mismo nombre (/react-hook-form).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFileInput con defaultProps y\n// styleOverrides de sus partes: root, button, fileChip, empty.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';\n\nimport {useValidationText} from '@/forms/useValidationText.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport FileChip from '@/upload/FileChip.jsx';\nimport TemplateDownloadButton from '@/upload/TemplateDownloadButton.jsx';\nimport {useFilePicker} from '@/upload/useFilePicker.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaFileInput)\nconst THEME_NAME = 'CalcitaFileInput';\nconst FileInputRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst FileInputButton = piecePart(THEME_NAME, 'Button', Button);\nconst FileInputChip = piecePart(THEME_NAME, 'FileChip', Chip);\nconst FileInputEmpty = piecePart(THEME_NAME, 'Empty', Typography);\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {import('react').ReactNode} [props.label] ya traducida\n * @param {File|{name: string, size?: number}|null} [props.value] el archivo nuevo o el que ya está guardado\n * @param {(file: File|null) => void} props.onChange null al quitarlo\n * @param {() => void} [props.onBlur] se llama al elegir o quitar (para que el formulario lo marque como tocado)\n * @param {string|string[]} [props.accept] 'excel' | ['pdf', 'image'] | '.xlsx,.xls' | 'image/*'\n * @param {number|string} [props.maxSize] bytes o '10 MB'\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] ya traducida\n * @param {string} [props.buttonLabel] ya traducido; por omisión «Elegir archivo»\n * @param {string} [props.emptyText] ya traducido; por omisión «Ningún archivo elegido»\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.busy] candado mientras se sube: no se puede elegir, soltar ni quitar\n * @param {(file: File, reason: string) => void} [props.onReject] reason es uno de FILE_REJECTION; sin él, un aviso\n * @param {Parameters<typeof import('@/upload/TemplateDownloadButton.jsx').default>[0]} [props.template] «Descargar la\n *     plantilla» junto al botón\n * @param {import('react').ReactNode} [props.actions] botones suyos en el mismo renglón\n * @param {object} [props.sx] ajustes del renglón\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 FileInputContent(props) {\n    const {\n        name, label, value = null, onChange, onBlur, accept, maxSize, error, helperText = ' ', buttonLabel, emptyText, disabled = false,\n        busy = false, onReject, template, actions, 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 buttonId = `${name ?? 'file'}-${generatedId}`;\n    const errorText = validationTextOf(error);\n    const isLocked = disabled || busy;\n    const change = (file) => {\n        onChange(file);\n        onBlur?.();\n    };\n    const picker = useFilePicker({accept, maxSize, disabled: isLocked, onAccept: change, onReject, texts});\n\n    return (\n        <FieldFrame inputId={buttonId} label={label}>\n            <div>\n                <FileInputRoot\n                    direction=\"row\"\n                    aria-busy={busy}\n                    {...picker.dropHandlers}\n                    ownSx={{\n                        alignItems: 'center', flexWrap: 'wrap', gap: 1, minHeight: 40, borderRadius: 1, px: 0.5, mx: -0.5,\n                        outline: picker.isDragging ? 2 : 0, outlineStyle: 'dashed', outlineColor: 'primary.main',\n                        bgcolor: picker.isDragging ? 'action.hover' : 'transparent',\n                    }}\n                    sx={sx}\n                >\n                    <input {...picker.inputProps} name={name} aria-hidden=\"true\" tabIndex={-1} />\n                    <FileInputButton id={buttonId} variant=\"outlined\" size=\"small\" startIcon={<AttachFileRoundedIcon />} onClick={picker.open}\n                                     disabled={isLocked} ownSx={{flexShrink: 0}}>\n                        {buttonLabel ?? t('upload.choose')}\n                    </FileInputButton>\n                    {value ? (\n                        <FileChip file={value} ChipComponent={FileInputChip} removeLabel={t('upload.remove', {name: value.name})}\n                                  onRemove={isLocked ? undefined : () => change(null)} />\n                    ) : (\n                        <FileInputEmpty variant=\"body2\" color=\"text.secondary\">{emptyText ?? t('upload.empty')}</FileInputEmpty>\n                    )}\n                    {template && <TemplateDownloadButton size=\"small\" texts={texts} {...template} />}\n                    {actions}\n                </FileInputRoot>\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 FileInput = withPieceSlots(FileInputContent, THEME_NAME);\nexport default FileInput;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAiCA,MAAM,aAAa;AACnB,MAAM,gBAAgB,UAAU,YAAY,QAAQ,KAAK;AACzD,MAAM,kBAAkB,UAAU,YAAY,UAAU,MAAM;AAC9D,MAAM,gBAAgB,UAAU,YAAY,YAAY,IAAI;AAC5D,MAAM,iBAAiB,UAAU,YAAY,SAAS,UAAU;AA0BhE,SAAS,iBAAiB,OAAO;AAC7B,QAAM;AAAA,IACF;AAAA,IAAM;AAAA,IAAO,QAAQ;AAAA,IAAM;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAQ;AAAA,IAAS;AAAA,IAAO,aAAa;AAAA,IAAK;AAAA,IAAa;AAAA,IAAW,WAAW;AAAA,IAC1H,OAAO;AAAA,IAAO;AAAA,IAAU;AAAA,IAAU;AAAA,IAAS;AAAA,IAAI;AAAA,IAAU;AAAA,IACzD,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,WAAW,GAAG,QAAQ,MAAM,IAAI,WAAW;AACjD,QAAM,YAAY,iBAAiB,KAAK;AACxC,QAAM,WAAW,YAAY;AAC7B,QAAM,SAAS,CAAC,SAAS;AACrB,aAAS,IAAI;AACb,aAAA;AAAA,EACJ;AACA,QAAM,SAAS,cAAc,EAAC,QAAQ,SAAS,UAAU,UAAU,UAAU,QAAQ,UAAU,MAAA,CAAM;AAErG,6BACK,YAAA,EAAW,SAAS,UAAU,OAC3B,+BAAC,OAAA,EACG,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,aAAW;AAAA,QACV,GAAG,OAAO;AAAA,QACX,OAAO;AAAA,UACH,YAAY;AAAA,UAAU,UAAU;AAAA,UAAQ,KAAK;AAAA,UAAG,WAAW;AAAA,UAAI,cAAc;AAAA,UAAG,IAAI;AAAA,UAAK,IAAI;AAAA,UAC7F,SAAS,OAAO,aAAa,IAAI;AAAA,UAAG,cAAc;AAAA,UAAU,cAAc;AAAA,UAC1E,SAAS,OAAO,aAAa,iBAAiB;AAAA,QAAA;AAAA,QAElD;AAAA,QAEA,UAAA;AAAA,UAAA,oBAAC,SAAA,EAAO,GAAG,OAAO,YAAY,MAAY,eAAY,QAAO,UAAU,IAAI;AAAA,UAC3E;AAAA,YAAC;AAAA,YAAA;AAAA,cAAgB,IAAI;AAAA,cAAU,SAAQ;AAAA,cAAW,MAAK;AAAA,cAAQ,+BAAY,uBAAA,EAAsB;AAAA,cAAI,SAAS,OAAO;AAAA,cACpG,UAAU;AAAA,cAAU,OAAO,EAAC,YAAY,EAAA;AAAA,cACpD,UAAA,eAAe,EAAE,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,UAEpC,QACG;AAAA,YAAC;AAAA,YAAA;AAAA,cAAS,MAAM;AAAA,cAAO,eAAe;AAAA,cAAe,aAAa,EAAE,iBAAiB,EAAC,MAAM,MAAM,MAAK;AAAA,cAC7F,UAAU,WAAW,SAAY,MAAM,OAAO,IAAI;AAAA,YAAA;AAAA,UAAA,IAE5D,oBAAC,gBAAA,EAAe,SAAQ,SAAQ,OAAM,kBAAkB,UAAA,aAAa,EAAE,cAAc,EAAA,CAAE;AAAA,UAE1F,YAAY,oBAAC,wBAAA,EAAuB,MAAK,SAAQ,OAAe,GAAG,UAAU;AAAA,UAC7E;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,wBAEJ,gBAAA,EAAe,OAAO,QAAQ,SAAS,GAAI,uBAAa,WAAA,CAAW;AAAA,EAAA,EAAA,CACxE,EAAA,CACJ;AAER;AAGA,MAAM,YAAY,eAAe,kBAAkB,UAAU;"}
+{"version":3,"file":"FileInput.js","sources":["../../src/upload/FileInput.jsx"],"sourcesContent":["// Un archivo del tamaño de un campo, para un formulario (la constancia fiscal de un cliente, el contrato firmado): la\n// etiqueta como los demás campos, el botón «Elegir archivo», el elegido en su chip con la × y abajo su ayuda o su error.\n// Dentro de una FormSection se vuelve renglón, como los demás campos. También se puede soltar el archivo encima.\n//\n// Solo ELIGE (controlado: value / onChange), con las mismas reglas que la zona grande (accept, maxSize; useFilePicker):\n// enviarlo es de la pantalla. value puede ser un archivo nuevo (File) o uno que ya está guardado ({name, size?}), para\n// editar un registro que ya lo tiene.\n//\n// Huecos: template («Descargar la plantilla» junto al botón), actions (botones suyos en el mismo renglón), emptyText,\n// buttonLabel y texts. Con formik: FormFileField (/forms); con react-hook-form, el del mismo nombre (/react-hook-form).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFileInput con defaultProps y\n// styleOverrides de sus partes: root, button, fileChip, empty.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';\n\nimport {useValidationText} from '@/forms/useValidationText.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport FileChip from '@/upload/FileChip.jsx';\nimport TemplateDownloadButton from '@/upload/TemplateDownloadButton.jsx';\nimport {useFilePicker} from '@/upload/useFilePicker.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaFileInput)\nconst THEME_NAME = 'CalcitaFileInput';\nconst FileInputRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst FileInputButton = piecePart(THEME_NAME, 'Button', Button);\nconst FileInputChip = piecePart(THEME_NAME, 'FileChip', Chip);\nconst FileInputEmpty = piecePart(THEME_NAME, 'Empty', Typography);\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {import('react').ReactNode} [props.label] ya traducida\n * @param {File|{name: string, size?: number}|null} [props.value] el archivo nuevo o el que ya está guardado\n * @param {(file: File|null) => void} props.onChange null al quitarlo\n * @param {() => void} [props.onBlur] se llama al elegir o quitar (para que el formulario lo marque como tocado)\n * @param {string|string[]} [props.accept] 'excel' | ['pdf', 'image'] | '.xlsx,.xls' | 'image/*'\n * @param {number|string} [props.maxSize] bytes o '10 MB'\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] ya traducida\n * @param {string} [props.buttonLabel] ya traducido; por omisión «Elegir archivo»\n * @param {string} [props.emptyText] ya traducido; por omisión «Ningún archivo elegido»\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.required] obligatorio: el asterisco en la etiqueta (lo revisa el esquema del formulario)\n * @param {boolean} [props.busy] candado mientras se sube: no se puede elegir, soltar ni quitar\n * @param {(file: File, reason: string) => void} [props.onReject] reason es uno de FILE_REJECTION; sin él, un aviso\n * @param {Parameters<typeof import('@/upload/TemplateDownloadButton.jsx').default>[0]} [props.template] «Descargar la\n *     plantilla» junto al botón\n * @param {import('react').ReactNode} [props.actions] botones suyos en el mismo renglón\n * @param {object} [props.sx] ajustes del renglón\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 FileInputContent(props) {\n    const {\n        name, label, value = null, onChange, onBlur, accept, maxSize, error, helperText = ' ', buttonLabel, emptyText, disabled = false, required = false,\n        busy = false, onReject, template, actions, 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 buttonId = `${name ?? 'file'}-${generatedId}`;\n    const errorText = validationTextOf(error);\n    const isLocked = disabled || busy;\n    const change = (file) => {\n        onChange(file);\n        onBlur?.();\n    };\n    const picker = useFilePicker({accept, maxSize, disabled: isLocked, onAccept: change, onReject, texts});\n\n    return (\n        <FieldFrame inputId={buttonId} label={label} required={required}>\n            <div>\n                <FileInputRoot\n                    direction=\"row\"\n                    aria-busy={busy}\n                    {...picker.dropHandlers}\n                    ownSx={{\n                        alignItems: 'center', flexWrap: 'wrap', gap: 1, minHeight: 40, borderRadius: 1, px: 0.5, mx: -0.5,\n                        outline: picker.isDragging ? 2 : 0, outlineStyle: 'dashed', outlineColor: 'primary.main',\n                        bgcolor: picker.isDragging ? 'action.hover' : 'transparent',\n                    }}\n                    sx={sx}\n                >\n                    <input {...picker.inputProps} name={name} aria-hidden=\"true\" tabIndex={-1} />\n                    <FileInputButton id={buttonId} variant=\"outlined\" size=\"small\" startIcon={<AttachFileRoundedIcon />} onClick={picker.open}\n                                     disabled={isLocked} ownSx={{flexShrink: 0}}>\n                        {buttonLabel ?? t('upload.choose')}\n                    </FileInputButton>\n                    {value ? (\n                        <FileChip file={value} ChipComponent={FileInputChip} removeLabel={t('upload.remove', {name: value.name})}\n                                  onRemove={isLocked ? undefined : () => change(null)} />\n                    ) : (\n                        <FileInputEmpty variant=\"body2\" color=\"text.secondary\">{emptyText ?? t('upload.empty')}</FileInputEmpty>\n                    )}\n                    {template && <TemplateDownloadButton size=\"small\" texts={texts} {...template} />}\n                    {actions}\n                </FileInputRoot>\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 FileInput = withPieceSlots(FileInputContent, THEME_NAME);\nexport default FileInput;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAiCA,MAAM,aAAa;AACnB,MAAM,gBAAgB,UAAU,YAAY,QAAQ,KAAK;AACzD,MAAM,kBAAkB,UAAU,YAAY,UAAU,MAAM;AAC9D,MAAM,gBAAgB,UAAU,YAAY,YAAY,IAAI;AAC5D,MAAM,iBAAiB,UAAU,YAAY,SAAS,UAAU;AA2BhE,SAAS,iBAAiB,OAAO;AAC7B,QAAM;AAAA,IACF;AAAA,IAAM;AAAA,IAAO,QAAQ;AAAA,IAAM;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAQ;AAAA,IAAS;AAAA,IAAO,aAAa;AAAA,IAAK;AAAA,IAAa;AAAA,IAAW,WAAW;AAAA,IAAO,WAAW;AAAA,IAC5I,OAAO;AAAA,IAAO;AAAA,IAAU;AAAA,IAAU;AAAA,IAAS;AAAA,IAAI;AAAA,IAAU;AAAA,IACzD,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,WAAW,GAAG,QAAQ,MAAM,IAAI,WAAW;AACjD,QAAM,YAAY,iBAAiB,KAAK;AACxC,QAAM,WAAW,YAAY;AAC7B,QAAM,SAAS,CAAC,SAAS;AACrB,aAAS,IAAI;AACb,aAAA;AAAA,EACJ;AACA,QAAM,SAAS,cAAc,EAAC,QAAQ,SAAS,UAAU,UAAU,UAAU,QAAQ,UAAU,MAAA,CAAM;AAErG,6BACK,YAAA,EAAW,SAAS,UAAU,OAAc,UACzC,+BAAC,OAAA,EACG,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,aAAW;AAAA,QACV,GAAG,OAAO;AAAA,QACX,OAAO;AAAA,UACH,YAAY;AAAA,UAAU,UAAU;AAAA,UAAQ,KAAK;AAAA,UAAG,WAAW;AAAA,UAAI,cAAc;AAAA,UAAG,IAAI;AAAA,UAAK,IAAI;AAAA,UAC7F,SAAS,OAAO,aAAa,IAAI;AAAA,UAAG,cAAc;AAAA,UAAU,cAAc;AAAA,UAC1E,SAAS,OAAO,aAAa,iBAAiB;AAAA,QAAA;AAAA,QAElD;AAAA,QAEA,UAAA;AAAA,UAAA,oBAAC,SAAA,EAAO,GAAG,OAAO,YAAY,MAAY,eAAY,QAAO,UAAU,IAAI;AAAA,UAC3E;AAAA,YAAC;AAAA,YAAA;AAAA,cAAgB,IAAI;AAAA,cAAU,SAAQ;AAAA,cAAW,MAAK;AAAA,cAAQ,+BAAY,uBAAA,EAAsB;AAAA,cAAI,SAAS,OAAO;AAAA,cACpG,UAAU;AAAA,cAAU,OAAO,EAAC,YAAY,EAAA;AAAA,cACpD,UAAA,eAAe,EAAE,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,UAEpC,QACG;AAAA,YAAC;AAAA,YAAA;AAAA,cAAS,MAAM;AAAA,cAAO,eAAe;AAAA,cAAe,aAAa,EAAE,iBAAiB,EAAC,MAAM,MAAM,MAAK;AAAA,cAC7F,UAAU,WAAW,SAAY,MAAM,OAAO,IAAI;AAAA,YAAA;AAAA,UAAA,IAE5D,oBAAC,gBAAA,EAAe,SAAQ,SAAQ,OAAM,kBAAkB,UAAA,aAAa,EAAE,cAAc,EAAA,CAAE;AAAA,UAE1F,YAAY,oBAAC,wBAAA,EAAuB,MAAK,SAAQ,OAAe,GAAG,UAAU;AAAA,UAC7E;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,wBAEJ,gBAAA,EAAe,OAAO,QAAQ,SAAS,GAAI,uBAAa,WAAA,CAAW;AAAA,EAAA,EAAA,CACxE,EAAA,CACJ;AAER;AAGA,MAAM,YAAY,eAAe,kBAAkB,UAAU;"}

package/dist/upload/FileUploadInput.js

@@ -73,6 +73,7 @@ function FileUploadInputContent(props) {
     error,
     helperText = " ",
     disabled = false,
+    required = false,
     actions,
     onUploaded,
     onUploadFailed,
@@ -278,7 +279,7 @@ function FileUploadInputContent(props) {
   if (!label) {
     return row;
   }
-  return /* @__PURE__ */ jsx(FieldFrame, { inputId, labelId, label, children: row });
+  return /* @__PURE__ */ jsx(FieldFrame, { inputId, labelId, label, required, children: row });
 }
 const FileUploadInput = withPieceSlots(FileUploadInputContent, THEME_NAME);
 export {