@mediquo/medicore

MediCore, el design system de las plataformas web de mediQuo: componentes React 19 + TypeScript sobre Tailwind CSS v4 y Base UI.

Instalación

pnpm add @mediquo/medicore

Necesita react y react-dom 19 y Tailwind CSS v4 en la app. El paquete no trae CSS precompilado: publica sus tokens como @theme y le indica a Tailwind que escanee sus componentes.

@import "tailwindcss";
@import "@mediquo/medicore/theme.css";

Uso

import { Button, MediCoreProvider } from "@mediquo/medicore";
import { CalendarIcon } from "@mediquo/medicore/icons";

<MediCoreProvider labels={{ close: "Cerrar", loading: "Cargando" }}>
  <Button leadingIcon={<CalendarIcon />}>Pedir cita</Button>
</MediCoreProvider>;

• Textos: el copy de cada pantalla va por props. Los textos propios de los componentes (nombres accesibles, "Paso 1 de 2"…) se traducen una vez en MediCoreProvider. Sin provider, van en español.
• Fuente: los tokens usan Scoop, que no va incluida en el paquete. Cada app sirve sus propios @font-face.
• Modo oscuro: sigue prefers-color-scheme. Para forzarlo, data-theme="light" o data-theme="dark" en <html>.
• Marca propia: sobrescribe --color-brand, --color-brand-strong, --color-brand-subtle, --color-text-brand y --color-border-focus en :root.

Incluye componentes de formularios, overlays, navegación, contenido, agenda y citas, chat, videollamada, historial médico, acceso y home, además de 178 iconos en @mediquo/medicore/icons.