@sfperusacdev/sf-ui 0.3.1 → 0.3.2

package/dist/theme/densidad.css

@@ -82,7 +82,6 @@
 
 :root[data-density='compacta'] .sf-metric-row--tile .sf-metric-row__label {
   font-size: 0.8125rem;
-  white-space: nowrap;
 }
 
 :root[data-density='compacta'] .sf-metric-row--tile .sf-metric-row__description {

package/dist/theme/temas.css

@@ -155,6 +155,17 @@
   color: color-mix(in srgb, var(--sf-donut-label-color) 48%, #0b1f29);
 }
 
+/* Íconos de baldosa (procesados, en espera, validadas…): el centrado se oscurece como el texto; en el «leading», el
+   círculo de color lleva el ícono en blanco, así que es el círculo el que se oscurece. */
+:root[data-skin]:not([data-theme='dark']) .sf-metric-tile--centered .sf-metric-tile__icon {
+  color: color-mix(in srgb, var(--sf-metric-tile-color) 50%, #0b1f29);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-metric-tile--leading .sf-metric-tile__icon {
+  background: color-mix(in srgb, var(--sf-metric-tile-color) 55%, #0b1f29);
+  color: #ffffff;
+}
+
 :root[data-skin]:not([data-theme='dark']) .sf-metric-row__tile-icon {
   border-color: color-mix(in srgb, var(--sf-metric-color, var(--sf-accent)) 60%, #0b1f29);
   color: color-mix(in srgb, var(--sf-metric-color, var(--sf-accent)) 48%, #0b1f29);
@@ -192,6 +203,111 @@
   color: var(--sf-accent-text);
 }
 
+/* Página activa del paginador en claro: en classic, soft y neon el número va en blanco sobre el acento, y el de ERP
+   (#ec7211) o Neón (#0d9488) no llega a 4,5:1. premium y matrix tienen sus propios colores y no se tocan. */
+:root[data-skin='erp']:not([data-theme='dark']) .sf-pagination--classic .sf-pagination__page--active,
+:root[data-skin='erp']:not([data-theme='dark']) .sf-pagination--classic .sf-pagination__page--active:hover,
+:root[data-skin='erp']:not([data-theme='dark']) .sf-pagination--soft .sf-pagination__page--active,
+:root[data-skin='erp']:not([data-theme='dark']) .sf-pagination--soft .sf-pagination__page--active:hover,
+:root[data-skin='erp']:not([data-theme='dark']) .sf-pagination--neon .sf-pagination__page--active,
+:root[data-skin='erp']:not([data-theme='dark']) .sf-pagination--neon .sf-pagination__page--active:hover {
+  background: #b35400;
+  border-color: #b35400;
+}
+
+:root[data-skin='neon']:not([data-theme='dark']) .sf-pagination--classic .sf-pagination__page--active,
+:root[data-skin='neon']:not([data-theme='dark']) .sf-pagination--classic .sf-pagination__page--active:hover,
+:root[data-skin='neon']:not([data-theme='dark']) .sf-pagination--soft .sf-pagination__page--active,
+:root[data-skin='neon']:not([data-theme='dark']) .sf-pagination--soft .sf-pagination__page--active:hover,
+:root[data-skin='neon']:not([data-theme='dark']) .sf-pagination--neon .sf-pagination__page--active,
+:root[data-skin='neon']:not([data-theme='dark']) .sf-pagination--neon .sf-pagination__page--active:hover {
+  background: #0f766e;
+  border-color: #0f766e;
+}
+
+/* —— Detalles y capas (medido en el prototipo ADN con capas-temas, 6 temas) ——
+   Botones de estado: el texto no sale de --sf-btn-primary-text, que en los oscuros es casi negro. */
+:root[data-skin] .sf-btn--success {
+  background: #15803d;
+  color: #ffffff;
+}
+
+:root[data-skin] .sf-btn--success:hover:not(:disabled) {
+  background: #166534;
+}
+
+:root[data-skin] .sf-btn--danger-solid {
+  background: #b91c1c;
+  color: #ffffff;
+}
+
+:root[data-skin] .sf-btn--danger-solid:hover:not(:disabled) {
+  background: #991b1b;
+}
+
+/* Claro: rojo, acentos de aviso, asterisco y cierre de los avisos a 4,5:1 sobre blanco o su tinte. */
+:root[data-skin]:not([data-theme='dark']) {
+  --sf-alert-info-accent: #1d4ed8;
+  --sf-alert-success-accent: #15803d;
+  --sf-alert-warning-accent: #b45309;
+  --sf-alert-danger-accent: #b91c1c;
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-btn--danger {
+  background: #ffffff;
+  color: #b91c1c;
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-field-required {
+  color: #b91c1c;
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-table thead th:not([class*='sf-table__th--']) {
+  color: #475569;
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-toast__close {
+  color: #475569;
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-toast--warning .sf-toast__icon {
+  color: #b45309;
+}
+
+/* El encabezado sin variante no tiene fondo propio: el subtítulo va sobre el blanco del modal, no sobre el marino. */
+:root[data-skin]:not([data-theme='dark']) .sf-modal-header:not(.sf-modal-header--dark):not(.sf-modal-header--brand) .sf-modal-header__subtitle {
+  color: var(--sf-text-muted);
+}
+
+/* Oscuro: los mismos elementos con los tonos claros de su color, sobre el fondo pizarra o negro. */
+:root[data-skin][data-theme='dark'] {
+  --sf-alert-info-accent: #60a5fa;
+  --sf-alert-success-accent: #4ade80;
+  --sf-alert-warning-accent: #fbbf24;
+  --sf-alert-danger-accent: #f87171;
+}
+
+:root[data-skin][data-theme='dark'] .sf-btn--danger {
+  background: transparent;
+  color: #f87171;
+}
+
+:root[data-skin][data-theme='dark'] .sf-field-required {
+  color: #f87171;
+}
+
+:root[data-skin][data-theme='dark'] .sf-table thead th:not([class*='sf-table__th--']) {
+  color: var(--sf-text-muted);
+}
+
+:root[data-skin][data-theme='dark'] .sf-badge--info:not(.sf-badge--solid) {
+  color: #93c5fd;
+}
+
+:root[data-skin][data-theme='dark'] .sf-toast__close {
+  color: var(--sf-text-muted);
+}
+
 /* Modo oscuro con cualquier tema: el texto pintado con un color de categoría se aclara para leerse sobre el fondo
    pizarra o negro; el amarillo de advertencia suave y los rellenos de barra también suben de luz. */
 :root[data-skin][data-theme='dark'] .sf-relation-graph--orbit .sf-relation-graph__relation {

package/dist/types/src/components/dashboard/MetricTile.sinDesborde.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/display/CheckList.srOnly.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/visualization/IntegrationFlow.sinRecorte.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/utils/exportTableXlsx.d.ts

@@ -1,5 +1,11 @@
 import { ExportTableColumn, ExportTableCsvOptions } from './exportTableCsv';
-export type ExportTableXlsxOptions<T> = ExportTableCsvOptions<T>;
+export type ExportTableXlsxOptions<T> = ExportTableCsvOptions<T> & {
+    /**
+     * Líneas que van antes del encabezado, una por fila (alcance, filtros, fecha). Sin `notes` el archivo no cambia.
+     * Sirve para que el archivo diga qué conjunto exporta cuando la pantalla muestra solo una parte.
+     */
+    notes?: string[];
+};
 /** Exporta filas a Excel (.xls SpreadsheetML) sin peer externo. */
 export declare const exportTableXlsx: <T>(rows: T[], options: ExportTableXlsxOptions<T>) => void;
 export type { ExportTableColumn };

package/dist/types/src/utils/exportTableXlsx.notas.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfperusacdev/sf-ui",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "SF UI — librería de componentes React (inputs, tablas, hooks) para aplicaciones SF Perú.",
   "type": "module",
   "main": "./dist/sf-ui.umd.cjs",