innoboxrr-form-core 1.0.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "innoboxrr-form-core",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "El nucleo agnostico de los formularios innoboxrr: tema, archivos y zonas horarias.",
   "type": "module",
   "main": "index.js",
@@ -9,13 +9,21 @@
     "./theme": "./src/theme.js",
     "./files": "./src/files.js",
     "./timezone": "./src/timezone.js",
+    "./styles": "./styles.css",
+    "./styles.css": "./styles.css",
+    "./tokens.css": "./src/tokens.css",
+    "./components.css": "./src/components.css",
+    "./layout.css": "./src/layout.css",
     "./src/*": "./src/*"
   },
   "files": [
     "index.js",
+    "styles.css",
     "src"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "scripts": {
     "test": "vitest run",
     "test:watch": "vitest"

package/src/components.css

@@ -0,0 +1,543 @@
+/**
+ * Las clases del sistema de diseño innoboxrr, construidas sobre las
+ * primitivas de tokens.css.
+ *
+ * Sustituyen a lo que antes venía de fuera sin declararse: 305 clases de
+ * UIkit y 551 de Tailwind repartidas por los paquetes, ninguna de las dos
+ * declarada como dependencia. Un módulo generado solo se montaba dentro de
+ * una aplicación que ya trajera UIkit cargado, y nada lo decía.
+ *
+ * Todo lo de aquí depende únicamente de las variables de tokens.css, así que
+ * el paquete ya no exige ningún framework de CSS y el aspecto de todo el
+ * ecosistema se cambia en un sitio.
+ */
+
+/* ============================================================
+   CAMPOS
+   ============================================================ */
+
+.fe-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fe-space-1);
+    margin-bottom: var(--fe-space-4);
+}
+
+.fe-field-inner {
+    position: relative;
+    width: 100%;
+}
+
+.fe-label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fe-space-1);
+    font-size: var(--fe-text-sm);
+    font-weight: 500;
+    color: var(--fe-text);
+}
+
+.fe-help {
+    cursor: help;
+    color: var(--fe-text-subtle);
+}
+
+/* Dibujado, no una fuente de iconos. El token `helpIcon` valía
+   `fa-solid fa-circle-question`, así que el paquete exigía Font Awesome sin
+   declararlo: si la aplicación no lo cargaba, el icono no aparecía y nadie
+   se enteraba. */
+.fe-help-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    line-height: 1;
+    color: var(--fe-text-inverse);
+    background: var(--fe-text-subtle);
+    border-radius: var(--fe-radius-full);
+    cursor: help;
+    user-select: none;
+}
+
+.fe-help-icon::before {
+    content: '?';
+}
+
+.fe-error {
+    font-size: var(--fe-text-xs);
+    font-weight: 500;
+    color: var(--fe-danger);
+}
+
+/* ============================================================
+   CONTROLES
+   ============================================================ */
+
+.fe-input,
+.fe-select,
+.fe-textarea,
+.fe-file {
+    width: 100%;
+    min-height: var(--fe-control-height);
+    padding: 0 var(--fe-control-padding-x);
+    font-family: var(--fe-font);
+    font-size: var(--fe-text-base);
+    color: var(--fe-text);
+    background: var(--fe-surface);
+    border: 1px solid var(--fe-border);
+    border-radius: var(--fe-radius);
+    transition: border-color var(--fe-transition), box-shadow var(--fe-transition);
+    appearance: none;
+}
+
+.fe-textarea {
+    padding: var(--fe-space-2) var(--fe-control-padding-x);
+    min-height: calc(var(--fe-control-height) * 3);
+    line-height: 1.5;
+    resize: vertical;
+}
+
+.fe-select {
+    /* La flecha va en el CSS y no en un icono suelto: así el control no
+       depende de que la aplicación haya cargado una fuente de iconos. */
+    padding-right: calc(var(--fe-control-padding-x) * 2.5);
+    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+        linear-gradient(135deg, currentColor 50%, transparent 50%);
+    background-position: right var(--fe-control-padding-x) center,
+        calc(100% - var(--fe-control-padding-x) + 5px) center;
+    background-size: 5px 5px, 5px 5px;
+    background-repeat: no-repeat;
+}
+
+.fe-input::placeholder,
+.fe-textarea::placeholder {
+    color: var(--fe-text-subtle);
+}
+
+.fe-input:hover,
+.fe-select:hover,
+.fe-textarea:hover {
+    border-color: var(--fe-border-strong);
+}
+
+.fe-input:focus,
+.fe-select:focus,
+.fe-textarea:focus,
+.fe-file:focus {
+    outline: none;
+    border-color: var(--fe-focus);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fe-focus) 22%, transparent);
+}
+
+.fe-input:disabled,
+.fe-select:disabled,
+.fe-textarea:disabled {
+    background: var(--fe-surface-sunk);
+    color: var(--fe-text-subtle);
+    cursor: not-allowed;
+}
+
+/* El componente de validación marca el campo inválido con esta clase. */
+.fe-input-error,
+.fe-input[aria-invalid='true'],
+.fe-select[aria-invalid='true'],
+.fe-textarea[aria-invalid='true'] {
+    border-color: var(--fe-danger);
+}
+
+.fe-checkbox,
+.fe-radio {
+    width: 1rem;
+    height: 1rem;
+    accent-color: var(--fe-primary);
+    border: 1px solid var(--fe-border-strong);
+    cursor: pointer;
+}
+
+.fe-radio {
+    border-radius: var(--fe-radius-full);
+}
+
+.fe-checkbox {
+    border-radius: var(--fe-radius-sm);
+}
+
+.fe-checkbox:focus-visible,
+.fe-radio:focus-visible {
+    outline: 2px solid var(--fe-focus);
+    outline-offset: 2px;
+}
+
+/* ============================================================
+   BOTONES
+   ============================================================ */
+
+.fe-button,
+.fe-button-secondary,
+.fe-button-danger,
+.fe-button-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--fe-space-2);
+    min-height: var(--fe-control-height);
+    padding: 0 calc(var(--fe-control-padding-x) * 1.25);
+    font-family: var(--fe-font);
+    font-size: var(--fe-text-base);
+    font-weight: 500;
+    line-height: 1;
+    border: 1px solid transparent;
+    border-radius: var(--fe-radius);
+    cursor: pointer;
+    transition: background var(--fe-transition), border-color var(--fe-transition), color var(--fe-transition);
+}
+
+.fe-button {
+    color: var(--fe-primary-text);
+    background: var(--fe-primary);
+}
+
+.fe-button:hover:not(:disabled) {
+    background: var(--fe-primary-hover);
+}
+
+.fe-button-secondary {
+    color: var(--fe-text);
+    background: var(--fe-surface);
+    border-color: var(--fe-border);
+}
+
+.fe-button-secondary:hover:not(:disabled) {
+    background: var(--fe-surface-hover);
+    border-color: var(--fe-border-strong);
+}
+
+.fe-button-danger {
+    color: var(--fe-danger-text);
+    background: var(--fe-danger);
+}
+
+.fe-button-danger:hover:not(:disabled) {
+    background: var(--fe-danger-hover);
+}
+
+.fe-button-link {
+    min-height: 0;
+    padding: 0;
+    color: var(--fe-primary);
+    background: none;
+}
+
+.fe-button-sm {
+    min-height: calc(1.75rem * var(--fe-density));
+    padding: 0 var(--fe-space-2);
+    font-size: var(--fe-text-sm);
+}
+
+/* El icono que va dentro del control, a la izquierda. Sustituye a
+   `uk-form-icon`, que además de la clase traía el componente de iconos de
+   UIkit. */
+.fe-field-icon {
+    position: absolute;
+    top: 50%;
+    left: var(--fe-space-3);
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    color: var(--fe-text-subtle);
+    pointer-events: none;
+}
+
+.fe-field-icon ~ .fe-input,
+.fe-field-icon ~ * .fe-input {
+    padding-left: calc(var(--fe-control-padding-x) * 2.5);
+}
+
+.fe-button-link:hover:not(:disabled) {
+    text-decoration: underline;
+}
+
+.fe-button:focus-visible,
+.fe-button-secondary:focus-visible,
+.fe-button-danger:focus-visible,
+.fe-button-link:focus-visible {
+    outline: 2px solid var(--fe-focus);
+    outline-offset: 2px;
+}
+
+.fe-button:disabled,
+.fe-button-secondary:disabled,
+.fe-button-danger:disabled,
+.fe-button-link:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+/* ============================================================
+   NAVEGACION Y ACCIONES
+   ============================================================ */
+
+.fe-breadcrumb {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--fe-space-2);
+    margin-bottom: var(--fe-space-4);
+    font-size: var(--fe-text-sm);
+}
+
+.fe-breadcrumb-link {
+    color: var(--fe-text-muted);
+    text-decoration: none;
+}
+
+.fe-breadcrumb-link:hover {
+    color: var(--fe-text);
+    text-decoration: underline;
+}
+
+.fe-breadcrumb-current {
+    font-weight: 500;
+    color: var(--fe-text);
+}
+
+.fe-breadcrumb-separator {
+    color: var(--fe-text-subtle);
+    user-select: none;
+}
+
+.fe-action-menu {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fe-space-3);
+}
+
+.fe-action-item {
+    font-size: var(--fe-text-sm);
+    color: var(--fe-primary);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+}
+
+.fe-action-item:hover {
+    text-decoration: underline;
+}
+
+.fe-action-danger {
+    font-size: var(--fe-text-sm);
+    color: var(--fe-danger);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+}
+
+.fe-action-danger:hover {
+    text-decoration: underline;
+}
+
+/* ============================================================
+   SUPERFICIES
+   ============================================================ */
+
+.fe-surface {
+    background: var(--fe-surface);
+    border: 1px solid var(--fe-border);
+    border-radius: var(--fe-radius-lg);
+}
+
+.fe-surface-raised {
+    background: var(--fe-surface-raised);
+    border: 1px solid var(--fe-border);
+    border-radius: var(--fe-radius-lg);
+    box-shadow: var(--fe-shadow);
+}
+
+/* ============================================================
+   PIEZAS DE APLICACION
+   ============================================================ */
+
+.fe-toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--fe-space-3);
+    padding: var(--fe-space-3) var(--fe-space-4);
+    border-bottom: 1px solid var(--fe-border);
+}
+
+.fe-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 var(--fe-space-2);
+    height: 1.375rem;
+    font-size: var(--fe-text-xs);
+    font-weight: 500;
+    border-radius: var(--fe-radius-full);
+    background: var(--fe-surface-sunk);
+    color: var(--fe-text-muted);
+}
+
+/* Un esqueleto en vez de un spinner: mantiene la forma de lo que va a
+   llegar, así que la página no salta al cargar. */
+.fe-skeleton {
+    background: linear-gradient(
+        90deg,
+        var(--fe-surface-sunk) 25%,
+        var(--fe-surface-hover) 37%,
+        var(--fe-surface-sunk) 63%
+    );
+    background-size: 400% 100%;
+    border-radius: var(--fe-radius-sm);
+    animation: fe-skeleton 1.4s ease infinite;
+}
+
+@keyframes fe-skeleton {
+    0% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0 50%;
+    }
+}
+
+.fe-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(16, 18, 27, 0.45);
+}
+
+.fe-dialog {
+    background: var(--fe-surface-raised);
+    border: 1px solid var(--fe-border);
+    border-radius: var(--fe-radius-lg);
+    box-shadow: var(--fe-shadow-lg);
+    max-height: 85vh;
+    overflow: auto;
+}
+
+.fe-drawer {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: min(32rem, 100vw);
+    background: var(--fe-surface);
+    border-left: 1px solid var(--fe-border);
+    box-shadow: var(--fe-shadow-lg);
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.fe-menu {
+    min-width: 11rem;
+    padding: var(--fe-space-1);
+    background: var(--fe-surface-raised);
+    border: 1px solid var(--fe-border);
+    border-radius: var(--fe-radius);
+    box-shadow: var(--fe-shadow);
+}
+
+.fe-menu-item {
+    display: flex;
+    align-items: center;
+    gap: var(--fe-space-2);
+    width: 100%;
+    padding: var(--fe-space-2) var(--fe-space-3);
+    font-size: var(--fe-text-sm);
+    color: var(--fe-text);
+    text-align: left;
+    background: none;
+    border: none;
+    border-radius: var(--fe-radius-sm);
+    cursor: pointer;
+}
+
+.fe-menu-item:hover,
+.fe-menu-item[data-highlighted] {
+    background: var(--fe-surface-hover);
+}
+
+.fe-toast {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--fe-space-3);
+    padding: var(--fe-space-3) var(--fe-space-4);
+    font-size: var(--fe-text-sm);
+    background: var(--fe-surface-raised);
+    border: 1px solid var(--fe-border);
+    border-left: 3px solid var(--fe-primary);
+    border-radius: var(--fe-radius);
+    box-shadow: var(--fe-shadow);
+}
+
+.fe-toast-danger {
+    border-left-color: var(--fe-danger);
+}
+
+.fe-toast-success {
+    border-left-color: var(--fe-success);
+}
+
+/* ============================================================
+   TABLA
+   ============================================================ */
+
+.fe-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--fe-text-base);
+}
+
+.fe-table th {
+    padding: var(--fe-space-2) var(--fe-space-3);
+    font-size: var(--fe-text-xs);
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--fe-text-subtle);
+    text-align: left;
+    white-space: nowrap;
+    border-bottom: 1px solid var(--fe-border);
+}
+
+.fe-table td {
+    padding: var(--fe-space-3);
+    color: var(--fe-text);
+    border-bottom: 1px solid var(--fe-border);
+}
+
+.fe-table tbody tr:hover {
+    background: var(--fe-surface-hover);
+}
+
+.fe-table tbody tr[data-selected='true'] {
+    background: var(--fe-primary-soft);
+}
+
+/* Las columnas de números se leen mucho peor si los dígitos no se alinean. */
+.fe-table .fe-numeric {
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .fe-skeleton {
+        animation: none;
+    }
+
+    .fe-input,
+    .fe-select,
+    .fe-textarea,
+    .fe-button,
+    .fe-button-secondary,
+    .fe-button-danger,
+    .fe-button-link {
+        transition: none;
+    }
+}

package/src/layout.css

@@ -0,0 +1,250 @@
+/**
+ * Las utilidades de maquetación que los componentes tomaban prestadas de
+ * UIkit.
+ *
+ * Eran 280 usos de 68 clases distintas —`uk-margin`, `uk-grid`, `uk-flex`,
+ * `uk-width-expand`…— repartidos por form-elements, react-form-elements y los
+ * dos datatables, y **UIkit no estaba declarado como dependencia en ninguno**.
+ * Se consumía como CSS global del anfitrión: el paquete solo se veía bien
+ * dentro de una aplicación que ya lo trajera.
+ *
+ * Esto es deliberadamente pequeño. No es un framework de utilidades: es
+ * exactamente lo que los componentes usaban, y nada más. Si hace falta algo
+ * nuevo, se añade aquí y así queda a la vista lo que el ecosistema necesita
+ * de verdad.
+ */
+
+/* ---------- ESPACIO ---------- */
+
+.fe-mb { margin-bottom: var(--fe-space-4); }
+.fe-mb-sm { margin-bottom: var(--fe-space-2); }
+.fe-mt { margin-top: var(--fe-space-4); }
+.fe-mt-sm { margin-top: var(--fe-space-2); }
+.fe-mt-md { margin-top: var(--fe-space-5); }
+.fe-mr-sm { margin-right: var(--fe-space-2); }
+
+.fe-p-sm { padding: var(--fe-space-3); }
+.fe-p-0 { padding: 0; }
+.fe-pt-0 { padding-top: 0; }
+
+/* ---------- CAJA ---------- */
+
+.fe-inline {
+    position: relative;
+    display: inline-block;
+}
+
+.fe-inline-clip {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+}
+
+.fe-relative { position: relative; }
+
+.fe-center-abs {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+/* ---------- ANCHO ---------- */
+
+.fe-w-full { width: 100%; }
+.fe-w-auto { width: auto; }
+.fe-w-expand { flex: 1 1 0; min-width: 0; }
+
+@media (min-width: 960px) {
+    .fe-w-quarter { width: 25%; }
+}
+
+/* ---------- FLEX Y REJILLA ---------- */
+
+.fe-flex { display: flex; }
+.fe-items-center { align-items: center; }
+.fe-justify-start { justify-content: flex-start; }
+.fe-justify-center { justify-content: center; }
+.fe-justify-end { justify-content: flex-end; }
+
+.fe-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--fe-space-4);
+}
+
+.fe-grid-sm {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--fe-space-2);
+}
+
+.fe-grid-divider > * + * {
+    border-left: 1px solid var(--fe-border);
+    padding-left: var(--fe-space-4);
+}
+
+.fe-children-expand > * { flex: 1 1 0; min-width: 0; }
+
+/* ---------- TEXTO ---------- */
+
+.fe-text-center { text-align: center; }
+.fe-text-right { text-align: right; }
+.fe-text-sm { font-size: var(--fe-text-sm); }
+.fe-text-muted { font-size: var(--fe-text-sm); color: var(--fe-text-muted); }
+.fe-text-success { color: var(--fe-success); }
+
+/* ---------- CONTENEDOR ---------- */
+
+.fe-container {
+    width: 100%;
+    max-width: 72rem;
+    margin: 0 auto;
+    padding: 0 var(--fe-space-4);
+}
+
+.fe-container-wide {
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 var(--fe-space-4);
+}
+
+/* ---------- TARJETA ---------- */
+
+.fe-card {
+    background: var(--fe-surface);
+    border: 1px solid var(--fe-border);
+    border-radius: var(--fe-radius-lg);
+}
+
+.fe-card-body { padding: var(--fe-space-5); }
+.fe-card-sm .fe-card-body { padding: var(--fe-space-3); }
+
+/* ---------- MAQUETACION DE LAS VISTAS GENERADAS ---------- */
+
+/*
+ * Estas tres no son utilidades sueltas: son la forma que tienen las vistas que
+ * genera larapack. Antes se componian con la rejilla fraccionaria de UIkit
+ * —`uk-width-1-3@m uk-width-1-1@s`— repetida en cada stub. Nombrar la
+ * intencion en vez de las fracciones deja que la maquetacion cambie en un
+ * sitio.
+ */
+
+.fe-section {
+    padding: var(--fe-space-5) 0;
+}
+
+.fe-section-sm {
+    padding: var(--fe-space-3) 0;
+}
+
+/* La vista de detalle: ficha a un lado, contenido al otro. */
+.fe-split {
+    display: grid;
+    gap: var(--fe-space-4);
+    grid-template-columns: 1fr;
+}
+
+@media (min-width: 960px) {
+    .fe-split {
+        grid-template-columns: minmax(16rem, 1fr) 2fr;
+        align-items: start;
+    }
+}
+
+/* Los filtros: tantas columnas como quepan, sin decidir un numero fijo. */
+.fe-filter-grid {
+    display: grid;
+    gap: var(--fe-space-3);
+    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+}
+
+.fe-filter-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--fe-space-2);
+    margin-top: var(--fe-space-3);
+}
+
+/* ---------- LISTAS ---------- */
+
+.fe-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.fe-list > li + li { margin-top: var(--fe-space-2); }
+
+/* ---------- PAGINACION ---------- */
+
+.fe-pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--fe-space-1);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.fe-pagination a,
+.fe-pagination button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    height: 2rem;
+    padding: 0 var(--fe-space-2);
+    font-size: var(--fe-text-sm);
+    color: var(--fe-text-muted);
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--fe-radius-sm);
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.fe-pagination a:hover,
+.fe-pagination button:hover:not(:disabled) {
+    background: var(--fe-surface-hover);
+    color: var(--fe-text);
+}
+
+.fe-pagination .fe-active {
+    color: var(--fe-primary-text);
+    background: var(--fe-primary);
+}
+
+/* Las flechas se dibujan, para no depender de la fuente de iconos de UIkit
+   (`uk-pagination-previous` es un `uk-icon`, es decir JS de UIkit). */
+.fe-page-prev::before { content: '‹'; font-size: 1.125rem; line-height: 1; }
+.fe-page-next::before { content: '›'; font-size: 1.125rem; line-height: 1; }
+
+/* ---------- ESTADOS ---------- */
+
+.fe-disabled,
+.fe-disabled a {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.fe-shrink { width: 1px; white-space: nowrap; }
+
+/* ---------- APARICION ---------- */
+
+.fe-fade-in { animation: fe-fade-in 160ms ease; }
+
+@keyframes fe-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.fe-reveal > .fe-reveal-target { opacity: 0; transition: opacity var(--fe-transition); }
+.fe-reveal:hover > .fe-reveal-target,
+.fe-reveal:focus-within > .fe-reveal-target { opacity: 1; }
+
+@media (prefers-reduced-motion: reduce) {
+    .fe-fade-in { animation: none; }
+    .fe-reveal > .fe-reveal-target { transition: none; }
+}

package/src/theme.js

@@ -1,13 +1,6 @@
 /**
- * Las clases CSS de los formularios, en un solo sitio.
- *
- * Antes cada componente llevaba su cadena incrustada como valor por defecto de
- * `customClass`, repetida en los dos paquetes; y el codigo generado por
- * larapack esperaba `inputClass` y `buttonClass` de un mixin global que la
- * aplicacion anfitriona tenia que registrar sin que nada lo dijera.
- *
- * Ahora hay un tema: un mapa de tokens que la aplicacion ajusta una vez, al
- * arrancar, y que leen los dos paquetes de componentes.
+ * El tema del ecosistema innoboxrr: un mapa de tokens que la aplicacion
+ * ajusta una vez, al arrancar, y que leen los dos paquetes de componentes.
  *
  *     import { setTheme } from 'innoboxrr-form-core'
  *
@@ -21,46 +14,72 @@
  * @typedef {Record<string, string>} Theme
  */
 
-/** @type {Theme} */
+/**
+ * Los tokens apuntan a las clases del sistema de diseno propio, no a las de
+ * un framework ajeno.
+ *
+ * Antes cada valor era una cadena que mezclaba UIkit, Tailwind y Font Awesome
+ * —`uk-input uk-form-large uk-border-rounded`— y ninguno de esos frameworks
+ * estaba declarado como dependencia: el paquete solo funcionaba dentro de una
+ * aplicacion que ya los trajera cargados, y nada lo decia. Ademas el modo
+ * oscuro iba incrustado en cada cadena, repetido treinta veces.
+ *
+ * Ahora las clases son nuestras y su aspecto sale de las variables de
+ * `tokens.css`, donde el modo oscuro se define una sola vez. Cambiar el color
+ * principal del ecosistema vuelve a ser editar una linea.
+ *
+ * @type {Theme}
+ */
 export const defaultTheme = {
     // ENVOLTORIOS
-    field: 'uk-margin',
-    fieldInner: 'uk-inline uk-width-1-1',
-    label: 'ml-2 text-sm font-medium text-gray-900 dark:text-white',
-    help: 'cursor-pointer',
-    helpIcon: 'fa-solid fa-circle-question',
-    error: 'fe-input-error text-red-600 font-bold',
+    field: 'fe-field',
+    fieldInner: 'fe-field-inner',
+    label: 'fe-label',
+    help: 'fe-help',
+    helpIcon: 'fe-help-icon',
+    error: 'fe-error',
 
     // CONTROLES
-    input: 'uk-input uk-form-large uk-border-rounded',
-    select: 'uk-select uk-form-large uk-border-rounded',
-    textarea: 'uk-textarea uk-form-large uk-border-rounded',
-    checkbox: 'uk-checkbox',
-    radio: 'uk-radio',
-    file: 'uk-input uk-form-large uk-border-rounded',
+    input: 'fe-input',
+    select: 'fe-select',
+    textarea: 'fe-textarea',
+    checkbox: 'fe-checkbox',
+    radio: 'fe-radio',
+    file: 'fe-file',
 
     // BOTONES
-    button: 'uk-button uk-width-1-1 button',
-    buttonSecondary: 'uk-button uk-button-default',
-    buttonDanger: 'uk-button uk-button-danger',
-    buttonLink: 'uk-button uk-button-link',
-
-    // NAVEGACION
-    //
-    // Estos no vienen de UIkit a proposito. El codigo generado por larapack
-    // pintaba las migas con un <BreadcrumbsComponent> que no existe en ningun
-    // paquete del ecosistema: cada aplicacion tenia que registrarlo
-    // globalmente sin que nada lo declarara, y la rama React directamente no
-    // tenia migas. Con estos tokens el componente se genera dentro del modulo
-    // y se estiliza desde aqui, como todo lo demas.
-    actionMenu: 'flex items-center gap-3',
-    actionMenuItem: 'text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300',
-    actionMenuDanger: 'text-sm text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300',
-
-    breadcrumb: 'flex items-center flex-wrap gap-2 text-sm mb-4',
-    breadcrumbLink: 'text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100',
-    breadcrumbCurrent: 'font-medium text-slate-900 dark:text-slate-100',
-    breadcrumbSeparator: 'text-slate-300 dark:text-slate-600 select-none',
+    button: 'fe-button',
+    buttonSecondary: 'fe-button-secondary',
+    buttonDanger: 'fe-button-danger',
+    buttonLink: 'fe-button-link',
+
+    // NAVEGACION Y ACCIONES
+    breadcrumb: 'fe-breadcrumb',
+    breadcrumbLink: 'fe-breadcrumb-link',
+    breadcrumbCurrent: 'fe-breadcrumb-current',
+    breadcrumbSeparator: 'fe-breadcrumb-separator',
+    actionMenu: 'fe-action-menu',
+    actionMenuItem: 'fe-action-item',
+    actionMenuDanger: 'fe-action-danger',
+
+    // SUPERFICIES Y PIEZAS DE APLICACION
+    surface: 'fe-surface',
+    surfaceRaised: 'fe-surface-raised',
+    toolbar: 'fe-toolbar',
+    badge: 'fe-badge',
+    skeleton: 'fe-skeleton',
+    overlay: 'fe-overlay',
+    dialog: 'fe-dialog',
+    drawer: 'fe-drawer',
+    menu: 'fe-menu',
+    menuItem: 'fe-menu-item',
+    toast: 'fe-toast',
+    toastDanger: 'fe-toast-danger',
+    toastSuccess: 'fe-toast-success',
+
+    // TABLA
+    table: 'fe-table',
+    tableNumeric: 'fe-numeric',
 }
 
 /** @type {Theme} */

package/src/tokens.css

@@ -0,0 +1,187 @@
+/**
+ * Las primitivas del sistema de diseño innoboxrr.
+ *
+ * Antes no había primitivas: el tema eran 23 cadenas de clases sueltas que
+ * mezclaban UIkit, Tailwind y Font Awesome, con el modo oscuro incrustado en
+ * cada una (`dark:text-white` repetido treinta veces). Cambiar el color
+ * principal del ecosistema no era una edición, era una búsqueda.
+ *
+ * Aquí cada decisión vive una vez. El modo oscuro redefine solo los colores,
+ * y en tres estados, porque el visitante tiene tres:
+ *
+ *   - `:root`                      → el tema claro completo
+ *   - `prefers-color-scheme: dark` → lo que ve quien no ha elegido nada
+ *   - `[data-theme="dark"]`        → la elección explícita, que manda sobre el SO
+ *
+ * La densidad es una variable, no un conjunto de clases: `--fe-density: 0.875`
+ * en un contenedor compacta todo lo que hay dentro sin tocar un componente.
+ */
+
+:root {
+    /* ---------- COLOR ---------- */
+
+    /* Neutros con sesgo frío: un gris puro se lee como falta de decisión. */
+    --fe-bg: #f7f8fa;
+    --fe-surface: #ffffff;
+    --fe-surface-raised: #ffffff;
+    --fe-surface-sunk: #f1f2f6;
+    --fe-surface-hover: #f1f2f6;
+
+    --fe-border: #e3e5eb;
+    --fe-border-strong: #c8cbd4;
+
+    --fe-text: #1b1c22;
+    --fe-text-muted: #5c5f6b;
+    --fe-text-subtle: #8b8e9a;
+    --fe-text-inverse: #ffffff;
+
+    --fe-primary: #4b5bd7;
+    --fe-primary-hover: #3f4dc0;
+    --fe-primary-text: #ffffff;
+    --fe-primary-soft: #eceefb;
+
+    --fe-danger: #c0392f;
+    --fe-danger-hover: #a32e26;
+    --fe-danger-text: #ffffff;
+    --fe-danger-soft: #fbeceb;
+
+    --fe-success: #17714d;
+    --fe-success-soft: #e6f2ec;
+
+    --fe-warning: #8a6212;
+    --fe-warning-soft: #f8f0dd;
+
+    --fe-focus: #4b5bd7;
+
+    /* ---------- FORMA ---------- */
+
+    --fe-radius-sm: 4px;
+    --fe-radius: 6px;
+    --fe-radius-lg: 10px;
+    --fe-radius-full: 9999px;
+
+    /* ---------- ESPACIO ---------- */
+
+    --fe-space-1: 0.25rem;
+    --fe-space-2: 0.5rem;
+    --fe-space-3: 0.75rem;
+    --fe-space-4: 1rem;
+    --fe-space-5: 1.5rem;
+    --fe-space-6: 2rem;
+
+    /* ---------- TIPOGRAFIA ---------- */
+
+    --fe-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+    --fe-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+    --fe-text-xs: 0.75rem;
+    --fe-text-sm: 0.8125rem;
+    --fe-text-base: 0.875rem;
+    --fe-text-lg: 1rem;
+    --fe-text-xl: 1.25rem;
+
+    /* ---------- ELEVACION ---------- */
+
+    --fe-shadow-sm: 0 1px 2px rgba(16, 18, 27, 0.06);
+    --fe-shadow: 0 4px 12px rgba(16, 18, 27, 0.08);
+    --fe-shadow-lg: 0 16px 40px rgba(16, 18, 27, 0.16);
+
+    /* ---------- DENSIDAD ---------- */
+
+    /* Multiplica alturas y padding de los controles. 1 es cómodo; 0.875
+       compacta una tabla sin que sus celdas dejen de ser pulsables. */
+    --fe-density: 1;
+    --fe-control-height: calc(2.25rem * var(--fe-density));
+    --fe-control-padding-x: calc(0.75rem * var(--fe-density));
+
+    /* ---------- MOVIMIENTO ---------- */
+
+    --fe-transition: 120ms ease;
+}
+
+/* La elección explícita de claro gana sobre un sistema en oscuro, de ahí el
+   :not(). Sin él, un usuario que pide claro seguiría viendo oscuro. */
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        --fe-bg: #101116;
+        --fe-surface: #181a21;
+        --fe-surface-raised: #1f222b;
+        --fe-surface-sunk: #14161c;
+        --fe-surface-hover: #22252f;
+
+        --fe-border: #2b2e39;
+        --fe-border-strong: #3d4150;
+
+        --fe-text: #e8e9ef;
+        --fe-text-muted: #a7aab8;
+        --fe-text-subtle: #767a89;
+        --fe-text-inverse: #101116;
+
+        --fe-primary: #8b95f0;
+        --fe-primary-hover: #a0a8f5;
+        --fe-primary-text: #101116;
+        --fe-primary-soft: #21243a;
+
+        --fe-danger: #e08b83;
+        --fe-danger-hover: #eda29a;
+        --fe-danger-text: #101116;
+        --fe-danger-soft: #2c1d1c;
+
+        --fe-success: #5ec79c;
+        --fe-success-soft: #142b23;
+
+        --fe-warning: #d9ac53;
+        --fe-warning-soft: #2a2417;
+
+        --fe-focus: #8b95f0;
+
+        --fe-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+        --fe-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
+        --fe-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
+    }
+}
+
+/* Y el interruptor manda en las dos direcciones. */
+:root[data-theme='dark'] {
+    --fe-bg: #101116;
+    --fe-surface: #181a21;
+    --fe-surface-raised: #1f222b;
+    --fe-surface-sunk: #14161c;
+    --fe-surface-hover: #22252f;
+
+    --fe-border: #2b2e39;
+    --fe-border-strong: #3d4150;
+
+    --fe-text: #e8e9ef;
+    --fe-text-muted: #a7aab8;
+    --fe-text-subtle: #767a89;
+    --fe-text-inverse: #101116;
+
+    --fe-primary: #8b95f0;
+    --fe-primary-hover: #a0a8f5;
+    --fe-primary-text: #101116;
+    --fe-primary-soft: #21243a;
+
+    --fe-danger: #e08b83;
+    --fe-danger-hover: #eda29a;
+    --fe-danger-text: #101116;
+    --fe-danger-soft: #2c1d1c;
+
+    --fe-success: #5ec79c;
+    --fe-success-soft: #142b23;
+
+    --fe-warning: #d9ac53;
+    --fe-warning-soft: #2a2417;
+
+    --fe-focus: #8b95f0;
+
+    --fe-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+    --fe-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
+    --fe-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
+}
+
+/* Una variante compacta lista para usar: se pone en un contenedor y todo lo
+   de dentro encoge, sin que ningún componente sepa nada. */
+.fe-dense {
+    --fe-density: 0.875;
+}

package/styles.css

@@ -0,0 +1,16 @@
+/**
+ * La hoja de estilos del ecosistema innoboxrr.
+ *
+ *     import 'innoboxrr-form-core/styles'
+ *
+ * Una sola linea en el arranque de la aplicacion, y los componentes de
+ * innoboxrr-form-elements, innoboxrr-react-form-elements y todo lo que genera
+ * larapack tienen aspecto sin depender de UIkit, Tailwind ni Font Awesome.
+ *
+ * Si la aplicacion ya tiene su propio sistema visual, puede no importar esto y
+ * apuntar los tokens a sus clases con `setTheme`.
+ */
+
+@import './src/tokens.css';
+@import './src/layout.css';
+@import './src/components.css';