# @omaresquivel/design-system

Sistema de diseño para estandarizar estilos y componentes en aplicaciones Vue 3. Su núcleo son tokens semánticos sobrescribibles y una hoja CSS compilada; los componentes `Ds*` ofrecen implementaciones accesibles y consistentes sobre esos fundamentos.

## Requisitos

- Node.js 22 o posterior.
- Vue 3.5 o posterior en la aplicación consumidora.
- Navegadores modernos compatibles con Tailwind CSS v4 y `<dialog>`.

## Desarrollo

```bash
npm install
npm run dev
```

El playground queda disponible en la dirección indicada por Vite. Incluye catálogo, perfil, configuración, formulario largo y estados de panel.

## Validación

```bash
npm run check
```

`npm run build` genera la librería en `dist/` y el catálogo en `dist-playground/`.
Usa `npm run test:coverage` para revisar la cobertura antes de ampliar el catálogo.

## Consumo

Mientras el paquete sea privado puede instalarse desde una ruta local:

```bash
npm install ../design_system
```

Importa componentes y la hoja compilada una sola vez:

```ts
import { DsButton, DsTextInput } from "@omaresquivel/design-system";
import "@omaresquivel/design-system/style.css";
```

También puede registrarse el catálogo completo:

```ts
import { createApp } from "vue";
import { DesignSystem } from "@omaresquivel/design-system";
import "@omaresquivel/design-system/style.css";

createApp(App).use(DesignSystem).mount("#app");
```

Se recomienda usar importaciones nombradas para conservar tree-shaking. La personalización se realiza sobrescribiendo variables `--ds-*`; no es necesario instalar Tailwind en la aplicación consumidora.

## Documentación

- [Investigación y decisiones](docs/research.md)
- [Fundamentos y tokens](docs/foundations.md)
- [Catálogo de componentes](docs/components.md)
- [Accesibilidad](docs/accessibility.md)
- [Instalación y theming](docs/installation.md)
- [Herramientas interactivas](docs/interactive-tools.md)
- [Roadmap](docs/roadmap.md)

El paquete se publica en el registro npm de Gitea y no contiene lógica de negocio, router, almacenamiento ni acceso a APIs.