Biblioteca de Componentes UI - MedTime¶

Identificador: MTS-UI-COMPONENTS Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Aprobado

1. Proposito¶

Este documento define la biblioteca oficial de componentes UI para MedTime. Todos los componentes estan disenados para cumplir WCAG 2.1 AA y optimizados para aplicaciones moviles de salud.

2. Design Tokens¶

2.1. Colores¶

2.1.1. Colores Primarios¶

Token	Valor	Uso
`primary.main`	#2196F3	Acciones principales, links
`primary.light`	#64B5F6	Estados hover, fondos suaves
`primary.dark`	#1976D2	Estados pressed
`primary.contrast`	#FFFFFF	Texto sobre primary

2.1.2. Colores Semanticos¶

Token	Valor	Uso
`success.main`	#4CAF50	Confirmaciones, tomas completadas
`warning.main`	#FF9800	Alertas moderadas, proximas tomas
`error.main`	#F44336	Errores, alertas criticas
`info.main`	#2196F3	Informacion general

2.1.3. Colores de Severidad (Interacciones)¶

Nivel	Color	Uso
`severity.critical`	#D32F2F	CONTRAINDICADO - No usar juntos
`severity.serious`	#F57C00	SERIO - Riesgo significativo
`severity.moderate`	#FFC107	MODERADO - Precaucion necesaria
`severity.minor`	#4CAF50	MENOR - Riesgo minimo

2.1.4. Colores de Tier¶

Tier	Color	Uso
`tier.free`	#9E9E9E	Indicador tier gratuito
`tier.pro`	#2196F3	Indicador tier Pro
`tier.perfect`	#9C27B0	Indicador tier Perfect

2.2. Tipografia¶

Font Family:
- Primary: SF Pro Display / Roboto
- Secondary: SF Pro Text / Roboto
- Monospace: SF Mono / Roboto Mono

Tamanos:
- xs: 12sp (labels, captions)
- sm: 14sp (body secundario)
- md: 16sp (body principal)
- lg: 18sp (subtitulos)
- xl: 20sp (titulos seccion)
- 2xl: 24sp (titulos pantalla)
- 3xl: 30sp (headings grandes)
- 4xl: 36sp (hero text)

2.3. Espaciado¶

Token	Valor	Uso
`spacing.xs`	4dp	Espacios minimos entre elementos
`spacing.sm`	8dp	Padding interno de chips
`spacing.md`	16dp	Padding estandar de cards
`spacing.lg`	24dp	Margenes entre secciones
`spacing.xl`	32dp	Margenes de pantalla
`spacing.2xl`	48dp	Separacion de bloques grandes

2.4. Border Radius¶

Token	Valor	Uso
`radius.sm`	4dp	Chips, badges
`radius.md`	8dp	Buttons, inputs
`radius.lg`	12dp	Cards
`radius.xl`	16dp	Bottom sheets
`radius.full`	9999dp	Avatars, FABs

3. Componentes de Navegacion¶

Descripcion: Barra de navegacion principal con 4-5 destinos.

Variantes:

Default: Iconos y labels
With Badge: Incluye notificacion numerica
FAB Center: Con boton flotante central

Especificaciones:

+-----------------------------------------------+
|  [Home]   [Meds]   [+]   [Calendar]   [More]  |
|    o        o      FAB       o          o      |
+-----------------------------------------------+

- Height: 80dp (con safe area)
- Touch target: 48x48dp por item
- Iconos: 24x24dp
- Label: 12sp
- Contraste minimo: 4.5:1

Accesibilidad:

Cada item tiene contentDescription
Soporte para navegacion con teclado externo
Anuncio de seleccion actual para screen readers

Modulos que lo usan: Todos

3.2. Top App Bar (CMP-NAV-002)¶

Descripcion: Barra superior con titulo y acciones contextuales.

Variantes:

Regular: Titulo y hasta 3 acciones
Large: Titulo expandido (colapsable)
Medium: Intermedio
Small: Solo titulo compacto

Especificaciones:

+-----------------------------------------------+
| [<-]  Mis Medicamentos              [?] [...] |
+-----------------------------------------------+

- Height: 56dp (regular), 112dp (large)
- Titulo: 20sp medium
- Iconos de accion: 24x24dp
- Touch target acciones: 48x48dp

Accesibilidad:

Boton de navegacion con label "Volver"
Titulo es heading level 1 para screen readers

3.3. Tab Bar (CMP-NAV-003)¶

Descripcion: Navegacion por pestanas dentro de pantallas.

Variantes:

Fixed: Pestanas de ancho igual
Scrollable: Pestanas de ancho variable

Especificaciones:

+-----------------------------------------------+
|  [Activos]  |  [Pausados]  |  [Historial]     |
|     ====                                       |
+-----------------------------------------------+

- Height: 48dp
- Indicador: 2dp, full width del tab
- Touch target: 48dp height, min 90dp width

Modulos que lo usan: MTS-MED-001, MTS-EST-001, MTS-RPT-001

4. Componentes de Entrada¶

4.1. Text Field (CMP-INP-001)¶

Descripcion: Campo de entrada de texto.

Variantes:

Outlined: Borde completo (recomendado)
Filled: Fondo solido
Underlined: Solo linea inferior

Estados:

Estado	Visual
Default	Borde gris 300
Focused	Borde primary, label elevado
Error	Borde error, mensaje de error visible
Disabled	Opacidad 38%, no editable

Especificaciones:

+------------------------------------------+
|  Nombre del medicamento                   |
|  [Metformina 850mg________________]       |
|                                           |
+------------------------------------------+

- Height: 56dp (outlined)
- Padding horizontal: 16dp
- Label: 12sp cuando elevated, 16sp inline
- Helper text: 12sp
- Character counter: 12sp (si aplica)

Accesibilidad:

Label asociado al input
Mensajes de error anunciados automaticamente
Soporte para autocompletado

4.2. Search Field (CMP-INP-002)¶

Descripcion: Campo de busqueda con icono y sugerencias.

Variantes:

Expanding: Se expande al focus
Persistent: Siempre visible

Especificaciones:

+------------------------------------------+
|  [Q] Buscar medicamento...          [X]  |
+------------------------------------------+
|  Sugerencias:                             |
|  - Metformina 500mg                       |
|  - Metformina 850mg                       |
|  - Metformina 1000mg                      |
+------------------------------------------+

- Height: 48dp
- Icono busqueda: 24x24dp
- Padding: 16dp
- Sugerencias: max 5 visibles, scroll si mas

Modulos que lo usan: MTS-CAT-001, MTS-MED-001, MTS-EST-001

4.3. PIN Input (CMP-INP-003)¶

Descripcion: Campo para entrada de PIN numerico.

Variantes:

4 digitos: PIN basico
6 digitos: PIN seguro

Especificaciones:

+------------------------------------------+
|           Ingresa tu PIN                  |
|                                           |
|      [ * ]  [ * ]  [   ]  [   ]          |
|                                           |
|         Intentos restantes: 3             |
+------------------------------------------+

- Celda: 44x44dp
- Espacio entre celdas: 8dp
- Indicador de digito: circulo 8dp
- Teclado: numerico, sin preview

Accesibilidad:

Anuncio de digitos ingresados (sin revelar)
Feedback tactil por digito
Anuncio de intentos restantes

Modulos que lo usan: MTS-AUTH-001

4.4. Time Picker (CMP-INP-004)¶

Descripcion: Selector de hora para medicamentos.

Variantes:

Dial: Reloj analogico
Input: Entrada directa de texto
Quick Select: Opciones predefinidas

Especificaciones (Dial):

+------------------------------------------+
|         Selecciona la hora                |
|                                           |
|             12                            |
|        11      1                          |
|      10          2                        |
|       9    --o    3                       |
|      8           4                        |
|        7      5                           |
|             6                             |
|                                           |
|    [ AM ]  [ PM ]                         |
|                                           |
|    [Cancelar]              [Aceptar]      |
+------------------------------------------+

- Dial diameter: 256dp
- Touch targets en dial: 48dp radius
- AM/PM buttons: 48dp height

Quick Select Options:

Con el desayuno (7:00 - 9:00)
Con el almuerzo (12:00 - 14:00)
Con la cena (19:00 - 21:00)
Antes de dormir (21:00 - 23:00)
Personalizado

Modulos que lo usan: MTS-MED-001, MTS-ALT-001, MTS-CAL-001

4.5. Numeric Stepper (CMP-INP-008)¶

Descripcion: Control +/- para cantidades.

Variantes:

Horizontal: [-] valor [+]
Vertical: Stacked

Especificaciones:

+------------------------------------------+
|   Dosis:  [ - ]   2   [ + ]   tabletas   |
+------------------------------------------+

- Botones: 44x44dp
- Valor: 16sp bold, centered
- Min/Max: configurable
- Long press: incremento rapido

Modulos que lo usan: MTS-MED-001, MTS-EVT-001

5. Componentes de Boton¶

5.1. Primary Button (CMP-BTN-001)¶

Descripcion: Boton de accion principal.

Variantes:

Filled: Fondo solido primary
Elevated: Con sombra
Tonal: Fondo tonal primary

Estados:

Estado	Visual
Default	Fondo primary
Pressed	Fondo primary.dark
Disabled	Opacidad 38%
Loading	Spinner centrado

Especificaciones:

+------------------------------------------+
|           [ Guardar Medicamento ]         |
+------------------------------------------+

- Height: 48dp
- Min width: 88dp
- Padding horizontal: 24dp
- Text: 14sp medium, uppercase
- Border radius: 8dp

Accesibilidad:

Role: button
Estado disabled anunciado
Loading anunciado como "Cargando"

5.2. Panic Button (CMP-BTN-006)¶

Descripcion: Boton de emergencia/panico para alertas criticas.

Variantes:

Standard: En pantalla de emergencia
Widget: Para home screen

Especificaciones:

+------------------------------------------+
|                                           |
|        +-------------------------+        |
|        |                         |        |
|        |     EMERGENCIA          |        |
|        |         SOS             |        |
|        |                         |        |
|        +-------------------------+        |
|                                           |
|    Mantener presionado 3 segundos         |
+------------------------------------------+

- Size: 80x80dp minimum
- Color: error (rojo)
- Icono: 32x32dp
- Border: 4dp solid error.dark
- Long press: 3 segundos para activar

Accesibilidad:

Anuncio claro: "Boton de emergencia. Mantener presionado 3 segundos para activar"
Feedback tactil durante long press
Countdown audible

Modulos que lo usan: MTS-ALT-001

5.3. Quick Action Button (CMP-BTN-005)¶

Descripcion: Boton de accion rapida desde notificacion.

Variantes:

Confirm (checkmark): Confirmar toma
Postpone (clock): Posponer
View (arrow): Ver detalles

Especificaciones (iOS Notification):

+------------------------------------------+
| MedTime                            08:00  |
| Hora de tomar tus medicamentos            |
|                                           |
| Metformina 850mg, Lisinopril 10mg         |
|                                           |
| [Tomado]  [Posponer]  [Ver]               |
+------------------------------------------+

- Button height: 44dp
- Text: 12sp
- Iconos opcionales: 16x16dp

Modulos que lo usan: MTS-ALT-001

6. Componentes de Card¶

6.1. Medication Card (CMP-CRD-001)¶

Descripcion: Tarjeta de medicamento del paciente.

Variantes:

Compact: Solo nombre y proxima toma
Expanded: Todos los detalles
With Actions: Incluye botones

Especificaciones:

+------------------------------------------+
|  [Icon]  Metformina 850mg           [>]  |
|          850mg - 2 veces al dia          |
|          Proxima toma: 14:00             |
|  [COLOR BAR ==========================]  |
|                                           |
|  [Editar]  [Pausar]  [Historial]         |
+------------------------------------------+

- Padding: 16dp
- Icon: 40x40dp
- Title: 16sp medium
- Subtitle: 14sp regular, neutral.600
- Color bar: 4dp height, color personalizado
- Actions: 48dp touch target

Color Bar: El usuario puede asignar un color para identificar rapidamente cada medicamento.

Accesibilidad:

Card completa es tappable
Acciones accesibles via swipe (iOS) o menu contextual

Modulos que lo usan: MTS-MED-001

6.2. Alert Card (CMP-CRD-002)¶

Descripcion: Tarjeta de alerta/recordatorio.

Variantes:

Variante	Color	Uso
Pending	warning	Toma pendiente
Urgent	error	Tiempo agotandose
Completed	success	Toma confirmada
Missed	neutral.400	Toma omitida

Especificaciones:

+------------------------------------------+
|  [!] PENDIENTE                     08:00 |
+------------------------------------------+
|                                           |
|  Medicinas del desayuno                   |
|                                           |
|  - Metformina 850mg                       |
|  - Lisinopril 10mg                        |
|                                           |
|  [Tomado]               [Posponer 15min]  |
+------------------------------------------+

- Header: 40dp, color segun variante
- Padding content: 16dp
- Medication list: 14sp
- Actions: 48dp height

Modulos que lo usan: MTS-ALT-001

6.3. Drug Interaction Card (CMP-CRD-004)¶

Descripcion: Tarjeta de advertencia de interaccion entre medicamentos.

Variantes:

Compact: Solo severidad y titulo
Detailed: Incluye descripcion y recomendacion

Especificaciones:

+------------------------------------------+
|  [X] CONTRAINDICADO                       |
+------------------------------------------+
|                                           |
|  Warfarina + Aspirina                     |
|                                           |
|  Aumenta significativamente el riesgo     |
|  de sangrado. Evitar uso simultaneo.      |
|                                           |
|  Recomendacion: Consultar con medico      |
|  antes de combinar estos medicamentos.    |
|                                           |
|  Fuente: DrugBank, actualizado 2025-01    |
|                                           |
|  [Entiendo el riesgo]  [Mas informacion]  |
+------------------------------------------+

Header colors por severidad:
- CONTRAINDICADO: error (#D32F2F)
- SERIO: warning.dark (#F57C00)
- MODERADO: warning.light (#FFC107)
- MENOR: success (#4CAF50)

Accesibilidad:

Severidad anunciada claramente
Contenido leido completamente por screen reader
Acciones claramente diferenciadas

Modulos que lo usan: MTS-INT-001, MTS-INT-002

6.4. Tier Comparison Card (CMP-CRD-007)¶

Descripcion: Tarjeta comparativa de planes/tiers.

Especificaciones:

+------------------------------------------+
|            PRO                            |
|          $9.99/mes                        |
+------------------------------------------+
|                                           |
|  [check] Medicamentos ilimitados          |
|  [check] Sincronizacion en la nube        |
|  [check] 1 cuidador con sync              |
|  [check] Sin anuncios                     |
|  [check] 3 SMS/mes incluidos              |
|  [x] MFA obligatorio                      |
|  [x] Recovery Key                         |
|                                           |
|  [Seleccionar Pro]                        |
+------------------------------------------+

- Header: color del tier
- Feature list: 14sp
- Check icon: success
- X icon: neutral.400
- CTA button: primary

Modulos que lo usan: MTS-PAY-001

7. Componentes Especializados¶

7.1. Dose Tracker (CMP-SPC-001)¶

Descripcion: Registro visual de tomas del dia.

Especificaciones:

+------------------------------------------+
|  Hoy: 3 de 4 tomas                        |
|                                           |
|  08:00 [check]  12:00 [check]             |
|  18:00 [check]  22:00 [   ]               |
|                                           |
+------------------------------------------+

- Cada slot: 44x44dp
- Check: success icon
- Empty: outlined circle
- Missed: error icon with strikethrough

Modulos que lo usan: MTS-ADH-001, MTS-ALT-001

7.2. Adherence Ring (CMP-SPC-002)¶

Descripcion: Anillo circular de adherencia.

Variantes:

Daily: % del dia
Weekly: % de la semana
Monthly: % del mes

Especificaciones:

+------------------------------------------+
|                                           |
|           +-------------+                 |
|          /               \                |
|         |       87%       |               |
|         |   Adherencia    |               |
|          \               /                |
|           +-------------+                 |
|                                           |
|     Esta semana: Excelente!               |
+------------------------------------------+

- Ring diameter: 120dp (puede variar)
- Stroke width: 12dp
- Percentage: 36sp bold
- Label: 14sp
- Color: gradient de warning a success segun %
  - < 60%: error
  - 60-79%: warning
  - 80-89%: info
  - >= 90%: success

Modulos que lo usan: MTS-ADH-001, MTS-GAM-001

7.3. Achievement Badge (CMP-SPC-004)¶

Descripcion: Insignia de logro/gamificacion.

Variantes:

Variante	Visual	Descripcion
Locked	Grayscale, candado	No desbloqueado
Unlocked	Full color, brillo	Obtenido
In Progress	Partial color, progress	En proceso

Especificaciones:

+------------------------------------------+
|    [Badge]    [Badge]    [Badge]          |
|    7 dias     30 dias    100 dias         |
|    seguidos   seguidos   seguidos         |
|    OBTENIDO   80%        BLOQUEADO        |
+------------------------------------------+

- Badge size: 64x64dp
- Label: 12sp
- Progress bar (if in_progress): 4dp height

Modulos que lo usan: MTS-GAM-001

7.4. Offline Indicator (CMP-SPC-009)¶

Descripcion: Indicador de modo offline.

Variantes:

Banner: Barra fija superior
Icon: Solo icono en app bar
Toast: Mensaje temporal

Especificaciones (Banner):

+------------------------------------------+
| [cloud-off] Sin conexion - Modo offline  |
+------------------------------------------+

- Height: 32dp
- Background: neutral.800
- Text: 12sp, white
- Icon: 16x16dp

Modulos que lo usan: MTS-OFF-001

8. Componentes de Plataforma¶

8.1. iOS Notification Action (CMP-IOS-001)¶

Especificaciones:

Notification Category: MEDICATION_REMINDER
Actions:
- "Tomado" (destructive: false, foreground: false)
- "Posponer" (destructive: false, foreground: false, opens: time_picker)
- "Ver" (destructive: false, foreground: true)

8.2. Android Quick Reply (CMP-AND-005)¶

Especificaciones:

RemoteInput:
- Key: "note_reply"
- Label: "Agregar nota..."
- Max length: 200 chars
- Submit on enter: true

8.3. Apple Watch Complication (CMP-IOS-004)¶

Especificaciones:

Complication Types:
- Circular: Next dose time
- Modular: Next dose + medication name
- Graphic: Adherence ring

Content:
- Hora proxima toma
- Nombre medicamento (si cabe)
- Icono de forma farmaceutica

8.4. Wear OS Tile (CMP-AND-004)¶

Especificaciones:

Tile Layout:
- Header: "Proxima toma"
- Primary: Hora (ej: "14:00")
- Secondary: Medicamento
- Action: "Marcar tomado"

Refresh: cada 1 minuto

9. Accesibilidad Global¶

9.1. Requisitos WCAG 2.1 AA¶

Criterio	Requisito	Implementacion
1.4.3	Contraste texto 4.5:1	Todos los textos
1.4.11	Contraste UI 3:1	Bordes, iconos funcionales
2.4.7	Focus visible	Outline 2dp
2.5.5	Target size 44x44dp	Todos los elementos interactivos
1.3.1	Estructura semantica	Labels, headings, landmarks

9.2. Screen Readers¶

VoiceOver (iOS):

Todos los elementos tienen accessibilityLabel
Acciones personalizadas via accessibilityCustomActions
Hints para interacciones complejas

TalkBack (Android):

contentDescription en todos los elementos
Actions via AccessibilityNodeInfo
Traversal order logico

9.3. Preferencias de Usuario¶

Preferencia	Soporte
Text scaling	Hasta 200%
Bold text	Si
Reduce motion	Animaciones simplificadas
High contrast	Modo disponible
Color blind modes	Patrones ademas de colores

10. Referencias¶

11. Historial de Cambios¶

Version	Fecha	Cambios
1.0.0	2025-12-05	Version inicial - 59 componentes documentados

Documento generado por MobileUxUiDrone (Eight of Eight) "Cada pixel cuenta. Cada interaccion importa."

Biblioteca de Componentes UI - MedTime¶

1. Proposito¶

2. Design Tokens¶

2.1. Colores¶

2.1.1. Colores Primarios¶

2.1.2. Colores Semanticos¶

2.1.3. Colores de Severidad (Interacciones)¶

2.1.4. Colores de Tier¶

2.2. Tipografia¶

2.3. Espaciado¶

2.4. Border Radius¶

3. Componentes de Navegacion¶

3.1. Bottom Navigation Bar (CMP-NAV-001)¶

3.2. Top App Bar (CMP-NAV-002)¶

3.3. Tab Bar (CMP-NAV-003)¶

4. Componentes de Entrada¶

4.1. Text Field (CMP-INP-001)¶

4.2. Search Field (CMP-INP-002)¶

4.3. PIN Input (CMP-INP-003)¶

4.4. Time Picker (CMP-INP-004)¶

4.5. Numeric Stepper (CMP-INP-008)¶

5. Componentes de Boton¶

5.1. Primary Button (CMP-BTN-001)¶

5.2. Panic Button (CMP-BTN-006)¶

5.3. Quick Action Button (CMP-BTN-005)¶

6. Componentes de Card¶

6.1. Medication Card (CMP-CRD-001)¶

6.2. Alert Card (CMP-CRD-002)¶

6.3. Drug Interaction Card (CMP-CRD-004)¶

6.4. Tier Comparison Card (CMP-CRD-007)¶

7. Componentes Especializados¶

7.1. Dose Tracker (CMP-SPC-001)¶

7.2. Adherence Ring (CMP-SPC-002)¶

7.3. Achievement Badge (CMP-SPC-004)¶

7.4. Offline Indicator (CMP-SPC-009)¶

8. Componentes de Plataforma¶

8.1. iOS Notification Action (CMP-IOS-001)¶

8.2. Android Quick Reply (CMP-AND-005)¶

8.3. Apple Watch Complication (CMP-IOS-004)¶

8.4. Wear OS Tile (CMP-AND-004)¶

9. Accesibilidad Global¶

9.1. Requisitos WCAG 2.1 AA¶

9.2. Screen Readers¶

9.3. Preferencias de Usuario¶

10. Referencias¶

11. Historial de Cambios¶