@sfperusacdev/sf-ui 0.2.9 → 0.3.1

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

@@ -1,5 +1,5 @@
 export { CustomTable } from './CustomTable';
-export type { CustomColumn, CustomTableDetail, CustomTableProps, CustomTableServerPagination, TableHeaderVariant, } from './CustomTable';
+export type { CustomColumn, CustomTableDensity, CustomTableDetail, CustomTableExport, CustomTableExportCriteria, CustomTableExportRequest, CustomTableExportScope, CustomTableFooterContext, CustomTableProps, CustomTableRemote, CustomTableRowActionsDisplay, CustomTableRowMenuItem, CustomTableServerPagination, CustomTableSort, TableHeaderVariant, } from './CustomTable';
 export { AsyncCustomTable } from './AsyncCustomTable';
 export type { AsyncCustomTableProps } from './AsyncCustomTable';
 export { PaginationRangeInput } from './PaginationRangeInput';
@@ -11,7 +11,7 @@ export { TableSortingPanel } from './TableSortingPanel';
 export { createLocalStorageAsyncStateStore } from './asyncStateStore';
 export type { AsyncStateStore } from './asyncStateStore';
 export { useCustomTableController } from './customTableController';
-export type { CustomTableController } from './customTableController';
+export type { CustomTableController, CustomTableKeyedController } from './customTableController';
 export { columnFilterFn, inferInitialFilterValue, isColumnFilterValue, STRING_FILTER_OPS, NUMBER_FILTER_OPS, } from './tableFilters';
 export type { ColumnFilterValue, StringFilterOp, NumberFilterOp } from './tableFilters';
 export { useTableColumnSettings } from './useTableColumnSettings';

package/dist/types/src/components/table/tableDevWarning.d.ts

@@ -0,0 +1,2 @@
+export declare const warnTableConfig: (message: string) => void;
+export declare const resetTableConfigWarnings: () => void;

package/dist/types/src/components/table/tableRowNumbers.d.ts

@@ -0,0 +1,8 @@
+import { Table } from '@tanstack/react-table';
+export declare const ROW_NUMBER_COLUMN_ID = "__rownumber";
+/**
+ * Posición (desde 1) de una fila raíz de los datos en el conjunto filtrado y ordenado completo, antes de paginar.
+ * Raíz es una fila de primer nivel de `data`: con agrupación queda debajo de grupos sintéticos, así que `depth` no
+ * sirve para reconocerla. Grupos e hijas de `subRows` no tienen número. Sin desplazamiento de servidor.
+ */
+export declare function rowNumberOf<TData>(table: Table<TData>, rowId: string): number | undefined;

package/dist/types/src/components/visualization/DnaHelix.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+export type DnaHelixItem = {
+    key: string;
+    label: string;
+    /** Valor 0-100. Se muestra como porcentaje junto a la etiqueta (`showLabels`) y en el nombre accesible. */
+    value?: number;
+    /** Color CSS del tramo, el peldaño y el nodo. Por defecto, la paleta de categorías en orden. */
+    color?: string;
+    /** Contenido del nodo. Por defecto, el número de orden («01», «02»…). */
+    icon?: ReactNode;
+};
+export type DnaHelixProps = {
+    items: DnaHelixItem[];
+    /** Nodo resaltado con halo. */
+    selectedKey?: string;
+    /** Si viene, cada nodo es un botón (clic, Enter, Espacio). Sin él la hélice es solo una imagen. */
+    onSelect?: (key: string) => void;
+    /** Escribe nombre y valor al costado de cada nodo: para usar la hélice sola o en pantalla angosta. */
+    showLabels?: boolean;
+    /** Alto por elemento, en unidades del lienzo (el dibujo escala con el ancho del contenedor). Por defecto 64. */
+    rowHeight?: number;
+    /** Ancho máximo en píxeles. Por defecto 220, o 520 con `showLabels`. */
+    maxWidth?: number;
+    ariaLabel?: string;
+    emptyMessage?: string;
+    className?: string;
+};
+/**
+ * Doble hélice vertical: un tramo, un peldaño y un nodo por elemento, alternando el lado. Es un índice visual de
+ * hasta unas 12 dimensiones; los datos van en las tarjetas o el panel que la acompañan. SVG puro, colores por
+ * tokens, escala con su contenedor.
+ */
+export declare const DnaHelix: ({ items, selectedKey, onSelect, showLabels, rowHeight, maxWidth, ariaLabel, emptyMessage, className, }: DnaHelixProps) => import('react').JSX.Element;

package/dist/types/src/components/visualization/DnaHelix.test.d.ts

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

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

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

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

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+import { BadgeVariant } from '../cards/types';
+export type IntegrationFlowNode = {
+    /** Única dentro de su colección (`sources` o `targets`). */
+    key: string;
+    label: string;
+    sublabel?: string;
+    icon?: ReactNode;
+    /** Color de categoría del nodo (identifica, no indica estado). Por defecto, la paleta de categorías en orden. */
+    color?: string;
+    /** Estado con el texto del host (ej. "Activo"); se pinta con `Badge`. */
+    status?: {
+        label: string;
+        variant?: BadgeVariant;
+    };
+};
+export type IntegrationFlowStep = {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+};
+export type IntegrationFlowHub = {
+    title: string;
+    icon?: ReactNode;
+    /** Imagen o ilustración grande del centro (decorativa), bajo el título. */
+    media?: ReactNode;
+    /** Texto bajo `media` (ej. el nombre del modelo de datos). */
+    subtitle?: string;
+    steps?: IntegrationFlowStep[];
+};
+/** `compact`: tres columnas desde 560px y espaciado menor. */
+export type IntegrationFlowDensity = "default" | "compact";
+/** `neutral`: líneas grises de CSS (publicado). `per-node`: una curva por nodo con su color, medida sobre el DOM. */
+export type IntegrationFlowLinks = "neutral" | "per-node";
+/** `panels`: cada columna en su propio panel con el título dentro, destinos sin tarjeta y estados rellenos. */
+export type IntegrationFlowAppearance = "default" | "panels";
+export type IntegrationFlowProps = {
+    sources: IntegrationFlowNode[];
+    hub: IntegrationFlowHub;
+    targets: IntegrationFlowNode[];
+    /** Títulos de las columnas de los extremos. Por defecto «Origen» y «Destino». */
+    labels?: {
+        sources?: string;
+        targets?: string;
+    };
+    ariaLabel?: string;
+    emptySourcesMessage?: string;
+    emptyTargetsMessage?: string;
+    density?: IntegrationFlowDensity;
+    links?: IntegrationFlowLinks;
+    appearance?: IntegrationFlowAppearance;
+    /** Con `onNodeClick` cada origen y destino es pulsable (botón superpuesto con el nombre del nodo). */
+    onNodeClick?: (collection: "sources" | "targets", key: string) => void;
+    className?: string;
+};
+/**
+ * Visualización estática de una integración: todos los orígenes van a un centro y el centro a todos los destinos. Las
+ * líneas son decorativas (CSS) y de color neutro; la información está en los tres grupos. No hay enlaces individuales,
+ * estados por enlace ni interacción. Tres columnas si el contenedor tiene al menos 720px; si no, bloques apilados.
+ */
+export declare const IntegrationFlow: ({ sources, hub, targets, labels, ariaLabel, emptySourcesMessage, emptyTargetsMessage, density, links, appearance, onNodeClick, className, }: IntegrationFlowProps) => import('react').JSX.Element;

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

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

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

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

package/dist/types/src/components/visualization/NetworkLegend.d.ts

@@ -5,4 +5,4 @@ export type NetworkLegendProps = {
     placement?: "bottom-left" | "bottom-right";
     className?: string;
 };
-export declare const NetworkLegend: ({ nodes, edges, placement, className, }: NetworkLegendProps) => import("react").JSX.Element;
+export declare const NetworkLegend: ({ nodes, edges, placement, className, }: NetworkLegendProps) => import('react').JSX.Element;

package/dist/types/src/components/visualization/NetworkMap.d.ts

@@ -16,4 +16,4 @@ export type NetworkMapProps = {
     ariaLabel?: string;
     className?: string;
 };
-export declare const NetworkMap: ({ nodes, edges, center, zoom, height, selectedNodeId, onNodeClick, showLegend, fitBoundsToNodes, basemap: controlledBasemap, onBasemapChange, showBasemapSwitcher, ariaLabel, className, }: NetworkMapProps) => import("react").JSX.Element;
+export declare const NetworkMap: ({ nodes, edges, center, zoom, height, selectedNodeId, onNodeClick, showLegend, fitBoundsToNodes, basemap: controlledBasemap, onBasemapChange, showBasemapSwitcher, ariaLabel, className, }: NetworkMapProps) => import('react').JSX.Element;

package/dist/types/src/components/visualization/OrgTree.d.ts

@@ -17,4 +17,4 @@ export type OrgTreeProps<T extends OrgTreeNode = OrgTreeNode> = {
     maxHeight?: number | string;
     className?: string;
 };
-export declare const OrgTree: <T extends OrgTreeNode = OrgTreeNode>({ nodes, title, subtitle, loading, error, onRefresh, canEdit, onAddNode, onEditNode, onDeleteNode, showLegend, themes, onRenderNode, maxHeight, className, }: OrgTreeProps<T>) => import("react").JSX.Element;
+export declare const OrgTree: <T extends OrgTreeNode = OrgTreeNode>({ nodes, title, subtitle, loading, error, onRefresh, canEdit, onAddNode, onEditNode, onDeleteNode, showLegend, themes, onRenderNode, maxHeight, className, }: OrgTreeProps<T>) => import('react').JSX.Element;

package/dist/types/src/components/visualization/RelationGraph.caracterizacion.test.d.ts

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

package/dist/types/src/components/visualization/RelationGraph.d.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+export type RelationGraphItem = {
+    /** Única dentro de su grupo. */
+    key: string;
+    label: string;
+    sublabel?: string;
+    /** Decorativo, antes del nombre. Se monta dos veces (una en el medidor oculto): sin efectos ni `id`. */
+    icon?: ReactNode;
+};
+export type RelationGraphGroup = {
+    /** Única en `groups`. Es la que reciben `onSelect` y `onShowMore`. */
+    key: string;
+    label: string;
+    /** Verbo de la relación del centro con el grupo (ej. "trabaja con", "opera"). Se lee como texto. */
+    relation: string;
+    /** Decorativo. Se monta dos veces (una en el medidor oculto): sin efectos ni `id`. */
+    icon?: ReactNode;
+    /** Color de categoría del grupo (borde, ícono y línea). Por defecto, la paleta de categorías en orden. */
+    color?: string;
+    items: RelationGraphItem[];
+    /** Total real del grupo si el host no entregó todos los elementos. */
+    total?: number;
+};
+/**
+ * `auto` elige radial o lista según el espacio. `list` pinta siempre la lista: es la salida segura cuando el host sabe
+ * que la radial no le conviene, o en los casos que el freno de `auto` no cubre (CHANGELOG, «Conocido»).
+ */
+export type RelationGraphLayout = "auto" | "list";
+/**
+ * `default`: grupos en tarjetas alrededor del centro (radial desde 720px). `orbit`: retrato grande en el centro, cada
+ * grupo como un círculo con su lista al costado y el verbo sobre la línea; cabe desde unos 600px. Con `layout="list"`,
+ * o si no cabe, las dos se pintan como lista.
+ */
+export type RelationGraphVariant = "default" | "orbit";
+export type RelationGraphProps = {
+    /** `media` es decorativo y se monta dos veces (una en el medidor oculto): sin efectos ni `id`. */
+    center: {
+        label: string;
+        sublabel?: string;
+        media?: ReactNode;
+    };
+    groups: RelationGraphGroup[];
+    /** Grupo seleccionado, controlado por el host. Una clave que no existe no marca nada. */
+    selectedKey?: string;
+    /** Pide seleccionar un grupo (no significa abrirlo). Sin él no hay botones de selección. */
+    onSelect?: (groupKey: string) => void;
+    /** Elementos visibles por grupo en la disposición radial; el resto se despliega con «+N más». Por defecto 3. */
+    maxItemsPerGroup?: number;
+    /** Pide al host los elementos que no entregó (`total` mayor que `items`). Sin él, se informa como texto. */
+    onShowMore?: (groupKey: string) => void;
+    /** Por defecto `auto`. */
+    layout?: RelationGraphLayout;
+    /** Por defecto `default`. */
+    variant?: RelationGraphVariant;
+    ariaLabel?: string;
+    emptyMessage?: string;
+    className?: string;
+};
+/**
+ * Una entidad central y sus grupos de relaciones (no un grafo arbitrario: sin enlaces entre grupos). Primero se pinta como
+ * lista, que siempre cabe; con `layout="auto"` (por defecto) pasa a radial solo si el contenedor tiene al menos 720px,
+ * hay hasta 8 grupos y las cajas medidas no se solapan; con `layout="list"` se queda en lista. Distinto de `OrgTree`
+ * (jerarquía) y de `NetworkMap` (geográfico).
+ */
+export declare const RelationGraph: ({ center, groups, selectedKey, onSelect, maxItemsPerGroup, onShowMore, layout, variant, ariaLabel, emptyMessage, className, }: RelationGraphProps) => import('react').JSX.Element;

package/dist/types/src/components/visualization/RelationGraph.orbita.test.d.ts

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

package/dist/types/src/components/visualization/RelationGraph.test.d.ts

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

package/dist/types/src/components/visualization/SeleccionNodos.test.d.ts

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

package/dist/types/src/components/visualization/disponerOrbita.d.ts

@@ -0,0 +1,29 @@
+import { Punto } from './disponerRadial';
+export type LadoOrbita = "arriba" | "derecha" | "abajo" | "izquierda";
+export type NodoOrbita = Punto & {
+    /** Hacia dónde va la lista del grupo, fuera del nodo. */
+    lado: LadoOrbita;
+    /** Ancho máximo de la lista sin salirse del lienzo. */
+    anchoLista: number;
+    /** Borde superior de la lista respecto del centro del nodo. */
+    listaY: number;
+    /** Dónde va el verbo: un punto de la línea y la normal (unitaria) hacia la que se aparta de ella. */
+    verbo: Punto & {
+        nx: number;
+        ny: number;
+    };
+};
+export type DisposicionOrbita = {
+    alto: number;
+    centro: Punto;
+    grupos: NodoOrbita[];
+};
+export declare const RADIO_NODO_ORBITA = 38;
+export declare const RADIO_CENTRO_ORBITA = 50;
+/**
+ * Centros del retrato y de los grupos en órbita (sentido horario desde arriba) dentro de `ancho`. Solo depende del
+ * ancho y del número de grupos, no del contenido. Lo horizontal se encoge para dejar a las listas laterales al menos
+ * 108px si se puede. Devuelve `null` sin grupos, con más de 8, con menos de 600px o si alguna lista lateral quedaría
+ * con menos de 90px: entonces el componente usa la lista.
+ */
+export declare const disponerOrbita: (cantidad: number, ancho: number) => DisposicionOrbita | null;

package/dist/types/src/components/visualization/disponerRadial.d.ts

@@ -0,0 +1,19 @@
+export type CajaMedida = {
+    ancho: number;
+    alto: number;
+};
+export type Punto = {
+    x: number;
+    y: number;
+};
+export type DisposicionRadial = {
+    alto: number;
+    centro: Punto;
+    grupos: Punto[];
+};
+/**
+ * Posiciones (esquina superior izquierda) del centro y de los grupos alrededor, en sentido horario desde arriba, dentro
+ * de `ancho`. Devuelve `null` si no hay grupos, si son más de 8 o si con estos tamaños alguna caja se solaparía o se
+ * saldría: entonces el componente usa la lista.
+ */
+export declare const disponerRadial: (centro: CajaMedida, grupos: CajaMedida[], ancho: number, separacion?: number) => DisposicionRadial | null;

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

@@ -1,3 +1,5 @@
+export { DnaHelix } from './DnaHelix';
+export type { DnaHelixProps, DnaHelixItem } from './DnaHelix';
 export { OrgTree } from './OrgTree';
 export type { OrgTreeProps } from './OrgTree';
 export { NetworkMap } from './NetworkMap';
@@ -7,3 +9,7 @@ export type { NetworkLegendProps } from './NetworkLegend';
 export { ORG_TREE_DEFAULT_THEMES, buildOrgTreeRows, resolveOrgTreeTheme, countOrgTreeNodes, orgTreeRootNodes, } from './orgTreeUtils';
 export { NETWORK_STATUS_COLORS, NETWORK_STATUS_LABELS, NETWORK_EDGE_STYLES, NETWORK_BASEMAPS, NETWORK_KIND_LABELS, NETWORK_KIND_COLORS, normalizeNetworkNodes, normalizeNetworkEdges, countNetworkStatus, networkMapBounds, networkNodePositions, networkEdgeLines, } from './networkMapUtils';
 export type { OrgTreeNode, OrgTreeNodeRow, OrgTreeTheme, NetworkNode, NetworkEdge, NetworkNodeStatus, NetworkNodeKind, NetworkBasemap, NetworkEdgeType, } from './types';
+export { RelationGraph } from './RelationGraph';
+export type { RelationGraphGroup, RelationGraphItem, RelationGraphLayout, RelationGraphProps, RelationGraphVariant } from './RelationGraph';
+export { IntegrationFlow } from './IntegrationFlow';
+export type { IntegrationFlowAppearance, IntegrationFlowDensity, IntegrationFlowHub, IntegrationFlowLinks, IntegrationFlowNode, IntegrationFlowProps, IntegrationFlowStep, } from './IntegrationFlow';

package/dist/types/src/providers/SfProvider.d.ts

@@ -15,7 +15,7 @@ export type SfMapsRuntime = {
 type SfProviderValue = {
     maps?: SfMapsRuntime;
 };
-export declare const SfProvider: ({ maps, children }: SfProviderProps) => import("react").JSX.Element;
+export declare const SfProvider: ({ maps, children }: SfProviderProps) => import('react').JSX.Element;
 export declare const useSf: () => SfProviderValue;
 export declare const useSfMaps: () => SfMapsRuntime;
 export {};

package/dist/types/src/theme/paletaCategorias.test.d.ts

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

package/dist/types/src/theme/temas.test.d.ts

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

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

@@ -0,0 +1,2 @@
+export declare const avisarEnDesarrollo: (componente: string, mensaje: string) => void;
+export declare const reiniciarAvisosEnDesarrollo: () => void;

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

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

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

@@ -0,0 +1,9 @@
+/** Puede tener el foco: tabulable o con `tabindex` (incluido -1), conectado, habilitado, visible y fuera de `inert`. */
+export declare const esEnfocableValido: (elemento: Element | null) => elemento is HTMLElement;
+export declare const tabulables: (contenedor: Element) => HTMLElement[];
+/**
+ * Destino de Tab dentro de `contenedor`: el primero o el último si el foco está fuera, la vuelta en los extremos y
+ * `null` cuando el navegador puede seguir solo. Desde un elemento de dentro que no es tabulable (un `tabindex="-1"`),
+ * el siguiente o el anterior en el orden del documento. `"vacio"` si no hay nada tabulable.
+ */
+export declare const siguienteEnContencion: (contenedor: Element, activo: Element | null, atras: boolean) => HTMLElement | "vacio" | null;

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

@@ -0,0 +1,11 @@
+export type ElementoIdentificado<T> = {
+    elemento: T;
+    /** Clave del host, tal como llegó: es la que reciben los callbacks. */
+    clave: string;
+    /** Clave de React. Las válidas van en el espacio "k:" y las repetidas en "d:<n>:", sin índice, para que
+     * reordenar datos válidos no remonte nodos y ninguna clave del host colisione con una generada. */
+    claveReact: string;
+    /** Solo la primera aparición de una clave tiene identidad e interacción. */
+    esPrimera: boolean;
+};
+export declare const identificarColeccion: <T>(elementos: readonly T[], obtenerClave: (elemento: T) => string, componente: string, coleccion: string) => ElementoIdentificado<T>[];

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

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

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

@@ -0,0 +1,22 @@
+/**
+ * Suma de las barras de desplazamiento verticales de los ancestros con desbordamiento propio (incluido `body` cuando
+ * desplaza él y no la ventana) y de la ventana, en píxeles. Si un elemento pierde ancho y esta suma crece en al menos
+ * lo perdido, lo explica una barra; si pierde más, alguien redimensionó.
+ */
+export declare const barrasVerticalesDeAncestros: (nodo: Element) => number;
+export declare const BARRA_MINIMA = 3;
+export declare const TOLERANCIA_BARRA = 2;
+/**
+ * ¿Una barra que apareció (o desapareció) explica un cambio de ancho? Sí si la barra mide al menos BARRA_MINIMA y el
+ * ancho cambió en sentido contrario y como mucho lo que ella mide, más TOLERANCIA_BARRA por el redondeo del zoom
+ * fraccionario. Una barra no le quita a un elemento más que su grosor, aunque reparta el resto en columnas.
+ */
+export declare const explicadoPorBarra: (anchoCambiado: number, barra: number) => boolean;
+/**
+ * Ancho del contenedor en píxeles, o `null` si no se puede medir (sin `ResizeObserver`: jsdom, SSR) o todavía no se
+ * midió. Quien lo usa pinta su disposición estrecha con `null`: es la que nunca desborda. Con `conBarras`, el tercer
+ * valor son las barras verticales de los ancestros medidas en el mismo aviso (`barrasVerticalesDeAncestros`).
+ */
+export declare const useAnchoContenedor: <T extends HTMLElement>(conBarras?: boolean) => [(nodo: T | null) => void, number | null, number | null];
+/** Píxeles de un tamaño en rem, con la fuente raíz real del documento (respeta el zoom de texto del usuario). */
+export declare const remAPixeles: (rem: number, documento?: Document | undefined) => number;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfperusacdev/sf-ui",
-  "version": "0.2.9",
+  "version": "0.3.1",
   "description": "SF UI — librería de componentes React (inputs, tablas, hooks) para aplicaciones SF Perú.",
   "type": "module",
   "main": "./dist/sf-ui.umd.cjs",
@@ -22,7 +22,10 @@
     "./theme/sf-tokens.css": "./dist/theme/sf-tokens.css",
     "./theme/erp.css": "./dist/theme/erp.css",
     "./theme/sark.css": "./dist/theme/sark.css",
-    "./theme/dark.css": "./dist/theme/dark.css"
+    "./theme/dark.css": "./dist/theme/dark.css",
+    "./theme/neon.css": "./dist/theme/neon.css",
+    "./theme/temas.css": "./dist/theme/temas.css",
+    "./theme/densidad.css": "./dist/theme/densidad.css"
   },
   "files": [
     "dist"
@@ -120,9 +123,9 @@
     "tailwindcss": "^4.3.0",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.59.2",
-    "vite": "^8.0.12",
-    "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.1.9",
+    "vite": "^8.2.4",
+    "vite-plugin-dts": "^5.1.2",
+    "vitest": "^4.1.12",
     "yup": "^1.7.1"
   }
 }