# Sistema de diseño de Mantine ## Vista previa de la interfaz del sistema de diseño de Mantine Abre el panel lateral, activa la validación de campos, selecciona un estudio y una fecha, añade un participante local y retira el consentimiento de ejemplo. ## Referencia de diseño del sistema de diseño de Mantine Valores seleccionados de DEFAULT_THEME verificados con @mantine/core 9.6.3. Los equivalentes numéricos en píxeles presuponen una raíz de 16px y theme.scale=1; los tokens escalados se resuelven mediante --mantine-scale. El color primario cian, el tono 8 y el radio md son ajustes explícitos de la aplicación. ### Paleta cian utilizada en el ejemplo | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | colors.cyan[0] | #e3fafc | Superficie discreta para el resumen del tema. | | colors.cyan[1] | #c5f6fa | Tinte claro. | | colors.cyan[2] | #99e9f2 | Matiz. | | colors.cyan[3] | #66d9e8 | Matiz. | | colors.cyan[4] | #3bc9db | Matiz intermedio. | | colors.cyan[5] | #22b8cf | Sombra intermedia. | | colors.cyan[6] | #15aabf | Tono estándar de la paleta. | | colors.cyan[7] | #1098ad | Sombra más oscura. | | colors.cyan[8] | #0c8599 | Tono elegido para la acción principal. | | colors.cyan[9] | #0b7285 | Acento de texto intenso. | ### Escala tipográfica con scale 1 | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | fontSizes.xs / sm | 12px / 14px | Identificadores de registro / texto complementario. | | fontSizes.md / lg / xl | 16px / 18px / 20px | Texto del cuerpo predeterminado y tamaños mayores. | | lineHeights.xs / sm / md | 1.4 / 1.45 / 1.55 | Escalas emparejadas del cuerpo de texto. | | lineHeights.lg / xl | 1.6 / 1.65 | Tamaños de lectura mayores. | | headings.h1 | 34px / 1.3 | Título de las sesiones de participantes. | | headings.h2 / h3 | 26px / 1.35; 22px / 1.4 | Niveles de encabezado disponibles. | | fontFamily | Platform sans-serif stack | No se necesita descargar fuentes. | ### Espaciado y radio con scale 1 | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | spacing.xs / sm | 10px / 12px | Separaciones pequeñas. | | spacing.md / lg / xl | 16px / 20px / 32px | Margen interior móvil / separación de campos / separación de secciones. | | radius.xs / sm | 2px / 4px | Geometría pequeña. | | radius.md / lg / xl | 8px / 16px / 32px | Esquinas predeterminadas / mayores del ejemplo. | | defaultRadius | md (application override) | Se aplica de forma centralizada mediante createTheme. | ### Puntos de interrupción | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | breakpoints.xs | 36em | 576px con el valor predeterminado de 16px. | | breakpoints.sm | 48em | Las tarjetas de resumen pasan a tener tres columnas. | | breakpoints.md | 62em | 992px con el valor predeterminado de 16px. | | breakpoints.lg / xl | 75em / 88em | 1200px / 1408px con el valor predeterminado de 16px. | ### Mapeo de CSS y los componentes | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --mantine-primary-color-filled | Resolved from primaryColor and primaryShade | El ejemplo elige el tono cian 8. | | --mantine-spacing-lg | calc(1.25rem * var(--mantine-scale)) | Separación lg en Stack y relleno lg en los paneles. | | --mantine-radius-md | calc(0.5rem * var(--mantine-scale)) | Panel redondeado predeterminado. | | --mantine-font-size-sm | calc(0.875rem * var(--mantine-scale)) | Etiquetas de registro de la tabla. | | Button.extend defaultProps | size: sm | Valor predeterminado explícito de la aplicación. | | TextInput.extend defaultProps | size: md | Valor predeterminado explícito de la aplicación. | ## Guía completa del sistema de diseño de Mantine Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Sistema de diseño de Mantine: tema y límites de los paquetes ### Un proveedor y tres paquetes de funciones > El ejemplo usa core para la interfaz, form para la validación y los enlaces, y dates para el campo de calendario. MantineProvider recibe las sobrescrituras de createTheme. Se importan tanto Core CSS como dates CSS; cargar solo el componente de React no basta para reproducir el calendario con estilo aplicado. El tema selecciona cian con primaryShade 8 y defaultRadius md. Button.extend establece los botones pequeños como valor predeterminado de la aplicación, mientras que TextInput.extend selecciona controles medianos. Son ajustes deliberados que se muestran en el código, no una afirmación de que todos los productos de Mantine deban usarlos. Consulta la especificación complementaria ## Sistema de diseño de Mantine: usa índices de paleta y roles de color resueltos ### Una paleta ordenada no es una lista de muestras de color inconexas Los colores de Mantine son matrices de tonos indexadas. Esta muestra usa cyan.0 para un panel de resumen discreto, cyan.9 para texto de acento y el tono primario configurado para las acciones con relleno. La referencia enumera toda la escala de cian utilizada por este tema. La insignia de confirmado de la tabla usa una variante de cian claro; la de retirado, naranja. Ambos estados conservan su texto. La retirada cambia el estado del consentimiento, pero mantiene visible la sesión anterior, para evitar que un cambio de color elimine el historial sin avisar. Consulta la especificación complementaria ### Colores del tema frente a valores arbitrarios de CSS La propiedad color del componente puede hacer referencia a una paleta con nombre; aplicar por separado un fondo hexadecimal sin procesar omitiría algunas decisiones de variante. Al usar CSS sin más, prefiere las variables generadas para las decisiones de tema recurrentes. La correspondencia entre las variables de CSS y los valores del ejemplo explica cuáles siguen vinculados a la escala y al color principal. Consulta la especificación complementaria ## Sistema de diseño de Mantine: aplica las escalas de fuentes y encabezados exportadas ### Reproduce la jerarquía La tabla usa texto sm para los nombres y las etiquetas de estudio, y xs para los identificadores y las fechas. Title order={1} usa la escala h1; el cajón tiene un encabezado semántico h2 que se muestra con size="h3" para que su nivel visual sea más compacto. Estas decisiones son independientes de las etiquetas y el texto de ayuda que proporcionan los componentes de entrada. La pila de fuentes del sistema de Mantine no requiere descargar fuentes remotas. Los valores de fuente escalados incluyen --mantine-scale; los valores en píxeles de referencia presuponen una escala de 1. No trates esos equivalentes en píxeles como invariantes si la aplicación cambia la escala. Consulta la especificación complementaria ## Sistema de diseño de Mantine: vincula useForm a componentes de entrada reales ### La validación corresponde al modelo del formulario initialValues incluye un nombre, un estudio, una fecha que admite null y un consentimiento booleano. validate devuelve una cadena de error o null para los campos de nombre, fecha y consentimiento. form.onSubmit ejecuta esa validación antes de añadir la fila local. No hace falta recopilar por separado etiquetas de error dibujadas manualmente. TextInput y DatePickerInput reciben getInputProps para la ruta de su campo. Checkbox también especifica type:"checkbox" para que el valor checked se vincule correctamente. Select usa una lista fija de estudios y allowDeselect={false}; el flujo no admite que el estudio quede vacío. Consulta la especificación complementaria ### Valor y formato de visualización de la fecha El componente de fecha pertenece a @mantine/dates y su hoja de estilos correspondiente se importa después de los estilos básicos. El paquete del ejemplo usa valores de fecha en formato de cadena; el formato mostrado DD MMM YYYY es independiente de la cadena de fecha almacenada que aparece en la tabla. defaultDate abre el calendario en el mes del ejemplo sin rellenar una fecha de sesión válida. Consulta la especificación complementaria ## Sistema de diseño de Mantine: controla la densidad y el desbordamiento en los límites del componente ### Mantén la tabla dentro de su propia región desplazable Table.ScrollContainer usa minWidth={580} para conservar cuatro columnas legibles en pantallas estrechas. El documento permanece dentro de la ventana gráfica; solo la región de datos se desplaza horizontalmente cuando hace falta. horizontalSpacing="lg" y verticalSpacing="md" usan el espaciado del tema en lugar de un relleno de celda independiente. Las tres tarjetas de resumen usan SimpleGrid con una columna en el punto de ruptura base y tres a partir de sm. El margen interior de la página también cambia de md a xl. Son objetos de estilo adaptables; el ancho mínimo de la tabla es una decisión explícita sobre el contenido. Consulta la especificación complementaria ## Sistema de diseño de Mantine: diferencia la inscripción no válida de la retirada del consentimiento ### El ejemplo contempla dos cambios distintos El formulario de programación no puede añadir una fila hasta que el nombre, la fecha de la sesión y el consentimiento de ejemplo cumplan la validación. Si se añade correctamente, el cajón se cierra, se agrega un registro y se actualizan los recuentos del resumen. La alerta indica que no se almacenó ningún registro de investigación. Retirar el consentimiento solo cambia el estado de la fila seleccionada y desactiva la acción de esa fila. La fecha sigue visible como historial, mientras que el recuento de sesiones programadas excluye las filas con el consentimiento retirado. Esta es una política declarada para la vista previa, no una norma real de conservación de datos de investigación. - Formulario no válido: muestra errores junto a los campos y mantén abierto el cajón. - Entrada local aceptada: añade la fila una sola vez y restablece el siguiente borrador. - Consentimiento de ejemplo retirado: conserva el registro y desactiva la posibilidad de volver a retirarlo. ## Sistema de diseño de Mantine: combina el cajón con la semántica de los campos de entrada ### Foco y etiquetas El cajón recibe un título y usa la gestión de foco nativa. El campo de nombre tiene data-autofocus. Todos los controles del formulario muestran una etiqueta visible; los mensajes de validación proceden de la propiedad de error vinculada. El nombre accesible del botón para retirar el consentimiento incluye el nombre del participante, de modo que se puedan distinguir varios botones con la misma etiqueta visual. En este ejemplo, cerrar el cajón cancela el borrador: al abrir Add participant, se restablece el formulario. El calendario es una ventana emergente nativa de Mantine dentro del cajón. Prueba su interacción con el teclado junto con la trampa de foco que lo rodea; no des por sentado que dos componentes accesibles por separado siempre funcionan bien al combinarse. Consulta la especificación complementaria ## Sistema de diseño de Mantine: instala paquetes con versiones compatibles y ambas hojas de estilos ### Se proporciona la configuración completa Usa los comandos de terminal que aparecen a continuación, sustituye App.jsx por la composición completa y móntala con el main.jsx proporcionado. Las cuatro versiones de los paquetes de Mantine están alineadas deliberadamente. App.jsx contiene el proveedor y el tema, así que no se necesita ningún archivo oculto del proveedor. No copies un ejemplo de fecha de otra versión principal sin comprobar antes el tipo de valor. Asegúrate de que la fecha inicial del formulario y la validación coincidan con el API real de DatePickerInput. Este ejemplo se creó con las versiones de paquete especificadas; no se dedujo de un tutorial anterior. 1. Instala core, hooks, form y dates, además de la dependencia dayjs de dates. 2. Importa core/styles.css y dates/styles.css una sola vez, en el límite de la aplicación. 3. Prueba el formulario, añade un registro con fecha y, luego, revisa la tabla y el resultado de retirar el consentimiento. ## Sistema de diseño de Mantine: verifica el calendario, el formulario y la tabla como una sola unidad ### Qué probar Envía el cajón vacío para mostrar los errores de nombre, fecha y consentimiento. Escribe un nombre, selecciona un día en el calendario y confirma el consentimiento de ejemplo antes de volver a enviar el formulario. El nuevo participante debería aparecer con la fecha seleccionada y un ID de vista previa estable. Después, retira el consentimiento de ese participante y observa los cambios en la fila y el resumen. El modelo de datos es deliberadamente pequeño y solo existe en memoria. No hay captación de participantes para estudios, recopilación de consentimientos, persistencia en el servidor ni conversión de zonas horarias. El valor concreto de este ejemplo está en la integración nativa de paquetes y el comportamiento visible de los controles, no en un supuesto backend para gestionar investigaciones. ## Ejemplos de componentes del sistema de diseño de Mantine ### App.jsx — proveedor, tema, tabla y cajón de programación Ejemplo nativo completo de Mantine. Incluye las personalizaciones del tema, la validación de useForm, DatePickerInput, las actualizaciones de la tabla y el cambio del estado del consentimiento. ``` import React, {useState} from 'react'; import {MantineProvider, createTheme, Box, Group, Stack, Title, Text, Button, Paper, Badge, Table, Drawer, TextInput, Select, Checkbox, Alert, SimpleGrid} from '@mantine/core'; import {useForm} from '@mantine/form'; import {DatePickerInput} from '@mantine/dates'; import '@mantine/core/styles.css'; import '@mantine/dates/styles.css'; const theme=createTheme({primaryColor:'cyan',primaryShade:8,defaultRadius:'md',components:{Button:Button.extend({defaultProps:{size:'sm'}}),TextInput:TextInput.extend({defaultProps:{size:'md'}})}}); function Tracker(){ const[opened,setOpened]=useState(false),[notice,setNotice]=useState(''),[rows,setRows]=useState([{name:'Alex Morgan',study:'Navigation study',date:'2026-10-14',status:'Confirmed'},{name:'Sam Rivera',study:'Editor study',date:'2026-10-16',status:'Confirmed'}]); const form=useForm({initialValues:{name:'',study:'Navigation study',date:null,consent:false},validate:{name:v=>v.trim().length<2?'Enter a name with at least two characters.':null,date:v=>!v?'Choose a session date.':null,consent:v=>!v?'Confirm consent before scheduling this example.':null}}); const submit=values=>{setRows([...rows,{name:values.name.trim(),study:values.study,date:values.date,status:'Confirmed'}]);setOpened(false);setNotice('Participant added in this browser only. No research record was stored.');form.reset();}; return Mantine · Research operationsParticipant sessionsConsent and scheduling stay visible in the same working view. In this preview{rows.length}Participant recordsScheduled{rows.filter(r=>r.status==='Confirmed').length}With confirmed example consentWorking themecyan.8 action · radius md
spacing lg · body md {notice&&setNotice('')}>{notice}} ParticipantStudy / sessionConsentAction{rows.map((r,i)=>{r.name}P-{String(i+1).padStart(3,'0')}{r.study}{r.date}{r.status})}
 Native Mantine 9.6.3: Table, Drawer, useForm, DatePickerInput, and input error styles. All records are memory-only examples. setOpened(false)} position='right' size='md' title={Schedule a participant}>
All fields below belong to this one study enrollment. Closing discards the draft.