@sfperusacdev/sf-ui 0.3.1 → 0.3.3

package/dist/theme/dark.css

@@ -195,6 +195,14 @@
   --sf-success: #16a34a;
   --sf-warning: #d97706;
 
+  /* Título e icono de la cabecera de DetailSection con tono. Los tonos de base dan de 2,5:1 a 3,8:1 sobre la tarjeta
+   * con el fondo tenue del tono; estos, de 4,9:1 a 7,2:1. No se aclaran --sf-info y compañía: también son fondo de
+   * botones y barras con texto blanco. */
+  --sf-detail-section-info-text: #60a5fa;
+  --sf-detail-section-danger-text: #f87171;
+  --sf-detail-section-warning-text: #fbbf24;
+  --sf-detail-section-success-text: #4ade80;
+
   /* Paleta de categorías sobre fondo oscuro: los mismos 10 tonos de sf-tokens.css, aclarados para dar al menos
    * 3:1 sobre la tarjeta (#1e293b) y sobre la superficie alterna (#0f172a). */
   --sf-cat-1: #7aa2f0;

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/inputs/SearchSelect.escape.test.d.ts

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

package/dist/types/src/components/layout/InPageDetail.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+export type InPageDetailState<T> = {
+    origin: string;
+    value: T;
+};
+export type InPageDetailController<T> = {
+    current: InPageDetailState<T> | null;
+    /** Abre el detalle de `value`, originado en `origin` (la tarjeta o cifra). Si el abierto tiene cambios, pregunta. */
+    open: (origin: string, value: T) => void;
+    /** Cierra y devuelve el foco al control que abrió el detalle (o a su tarjeta). Si hay cambios, pregunta. */
+    close: () => void;
+    /** Cambia el detalle sin preguntar: para pasar a la ficha de lo que se acaba de guardar. */
+    replace: (origin: string, value: T) => void;
+    /** El valor abierto si su origen es `origin`; si no, `null`. */
+    valueFor: (origin: string) => T | null;
+};
+/**
+ * Estado de un detalle que se abre en la página, bajo la tarjeta que lo originó (regla de ventanas §6). Abrir otro o
+ * cerrar pasa por `useProtectedExit` con el ámbito `scope`; la captura del detalle se registra en ese mismo ámbito con
+ * `useUnsavedChanges`.
+ */
+export declare const useInPageDetail: <T>(scope?: string) => InPageDetailController<T>;
+export type InPageDetailZoneProps = {
+    /** Cambia cuando cambia lo que se muestra: la zona vuelve a recibir el foco. */
+    zoneKey: string;
+    /** Nombre accesible de la región («Evento Lote 12»). */
+    label: string;
+    onClose: () => void;
+    children: ReactNode;
+    className?: string;
+};
+/**
+ * Contenedor del detalle: se desplaza a la vista, recibe el foco con su nombre y Escape lo cierra. Si el control
+ * enfocado dentro desaparece o se deshabilita (Reprocesar, Validar), el foco vuelve a la zona en vez de caer a <body>.
+ */
+export declare const InPageDetailZone: ({ zoneKey, label, onClose, children, className }: InPageDetailZoneProps) => import('react').JSX.Element;

package/dist/types/src/components/layout/InPageDetail.test.d.ts

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

package/dist/types/src/components/layout/index.d.ts

@@ -44,3 +44,5 @@ export type { WeekdayToggleStripProps, WeekdayOption } from './WeekdayToggleStri
 export type { UnitSelectorOption, UnitSelectorProps } from './UnitSelector';
 export { AppShell, AppBarContainer } from './AppShell';
 export type { AppShellCategory, AppShellNavItem, AppShellProps, AppShellBranchSelector, AppShellExitToModulesAction, AppShellHelpAction, AppShellLayout, AppShellModuleLauncher, AppShellModuleLauncherItem, AppShellThemeToggle, AppShellTopBarContext, AppShellUserMenu, AppBarContainerProps, } from './AppShell';
+export { InPageDetailZone, useInPageDetail } from './InPageDetail';
+export type { InPageDetailController, InPageDetailState, InPageDetailZoneProps } from './InPageDetail';

package/dist/types/src/components/overlays/UnsavedChanges.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+export type UnsavedChangesEntry = {
+    /** Qué se pierde, en palabras del usuario: «la edición del conductor». */
+    description: string;
+    /** Deja la captura como estaba antes de editar. */
+    discard: () => void;
+};
+export type ProtectedExit = {
+    /**
+     * Ejecuta `action`, o pregunta antes si el ámbito (`null`: cualquiera) tiene cambios sin guardar. «Descartar
+     * cambios» descarta esos ámbitos y ejecuta `action`; «Seguir editando», Escape o el fondo llaman a `onCancel` y dejan
+     * la captura como está. Mientras la pregunta está abierta, otra petición se rechaza (su `onCancel`).
+     */
+    protect: (scope: string | null, action: () => void, onCancel?: () => void) => void;
+    /** Hay cambios sin guardar en el ámbito (`null` o sin argumento: en cualquiera). */
+    hasChanges: (scope?: string | null) => boolean;
+};
+export type UnsavedChangesProviderProps = {
+    children: ReactNode;
+};
+/**
+ * Un solo lugar que sabe qué capturas tienen cambios sin guardar y una sola pregunta para salir de ellas. Las
+ * pantallas registran su captura con `useUnsavedChanges`; los cierres, cambios de registro y el adaptador del
+ * enrutador de la app piden salir con `useProtectedExit().protect`. Mientras haya cambios, recargar o cerrar la
+ * pestaña muestra el aviso nativo del navegador.
+ */
+export declare const UnsavedChangesProvider: ({ children }: UnsavedChangesProviderProps) => import('react').JSX.Element;
+/**
+ * Registra una captura mientras `dirty` sea verdadero; al guardar, descartar o desmontar se borra sola. Un ámbito por
+ * captura visible (la ficha, una edición en línea, un paso): dos capturas abiertas son dos ámbitos.
+ */
+export declare const useUnsavedChanges: (scope: string, { dirty, description, discard }: UnsavedChangesEntry & {
+    dirty: boolean;
+}) => void;
+export declare const useProtectedExit: () => ProtectedExit;

package/dist/types/src/components/overlays/UnsavedChanges.test.d.ts

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

package/dist/types/src/components/overlays/index.d.ts

@@ -25,3 +25,5 @@ export { CommandPalette } from './CommandPalette';
 export type { CommandPaletteItem, CommandPaletteProps } from './CommandPalette';
 export { ProductTour } from './ProductTour';
 export type { ProductTourProps, ProductTourStep } from './ProductTour';
+export { UnsavedChangesProvider, useProtectedExit, useUnsavedChanges } from './UnsavedChanges';
+export type { ProtectedExit, UnsavedChangesEntry, UnsavedChangesProviderProps } from './UnsavedChanges';

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

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

package/dist/types/src/theme/detailSectionOscuro.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/dist/types/src/utils/index.d.ts

@@ -1,4 +1,5 @@
 export { toStringArray } from './toStringArray';
+export { restoreFocus } from './restoreFocus';
 export { readQueryValue, updateQueryValue, removeQueryValue } from './queryParams';
 export { exportTableCsv } from './exportTableCsv';
 export type { ExportTableColumn, ExportTableCsvOptions } from './exportTableCsv';

package/dist/types/src/utils/queryParams.test.d.ts

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

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

@@ -0,0 +1,8 @@
+/**
+ * Devuelve el foco al cerrar un detalle o un panel: al control que lo abrió si sigue usable; si no, a otro control de
+ * su tarjeta (`context`), al encabezado de esa tarjeta y, por último, al `h1` de la página. Nunca mueve el foco a
+ * `<body>`; si no encuentra destino, no lo mueve (y si ya estaba en `<body>`, ahí sigue). El encabezado que recibe el
+ * foco queda con `tabindex="-1"`. Ignora lo que esté dentro de una zona de detalle, que se cierra.
+ * Devuelve el elemento enfocado, o `null`.
+ */
+export declare const restoreFocus: (trigger: HTMLElement | null, context?: HTMLElement | null) => HTMLElement | null;

package/dist/types/src/utils/restoreFocus.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.3",
   "description": "SF UI — librería de componentes React (inputs, tablas, hooks) para aplicaciones SF Perú.",
   "type": "module",
   "main": "./dist/sf-ui.umd.cjs",