@sfperusacdev/sf-ui 0.1.39 → 0.2.0

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

@@ -3,7 +3,13 @@ import { IconType } from 'react-icons';
 import { AggregationFn } from '@tanstack/react-table';
 import { AsyncStateStore } from './asyncStateStore';
 import { CustomTableController } from './customTableController';
-export type TableHeaderVariant = "default" | "brand";
+/**
+ * Skin del `<thead>` del CustomTable. Los 4 variants nuevos (`soft`, `neon`,
+ * `premium`, `matrix`) hacen match visual 1:1 con los variants del
+ * `Pagination`, así toda la tabla queda coherente arriba y abajo.
+ * Todos se apoyan en tokens `--sf-*` para reaccionar al tema activo.
+ */
+export type TableHeaderVariant = "default" | "brand" | "soft" | "neon" | "premium" | "matrix";
 type BuiltInAggregation = "sum" | "min" | "max" | "mean" | "median" | "unique" | "uniqueCount" | "count";
 type TableAggregation = BuiltInAggregation | AggregationFn<unknown>;
 type CustomColumn<TData> = {

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

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+/**
+ * Piel visual del paginador. Todas usan los tokens del ecosistema (`--sf-*`),
+ * así que reaccionan al cambio de tema (Referencia / Agro / ERP / Dark).
+ *
+ * - `classic`  outlines definidos, look enterprise clásico.
+ * - `soft`     sin borders duros, chips flotantes con sombra y glow suave en el activo.
+ * - `neon`     fondo oscuro, outlines luminosos y glow del acento en el activo.
+ * - `premium`  degradado (--sf-accent + --sf-navy) con backdrop-blur; look "IA".
+ * - `matrix`   fondo oscuro con acento verde saturado; look operacional/dashboard.
+ */
+export type PaginationVariant = "classic" | "soft" | "neon" | "premium" | "matrix";
+export interface PaginationProps {
+    /** Total de registros sin paginar. */
+    totalItems: number;
+    /** Página actual (base 1). */
+    page: number;
+    /** Cantidad de registros por página. */
+    pageSize: number;
+    /** Opciones para el selector "Mostrar N registros por página". */
+    pageSizeOptions?: number[];
+    /** Callback cuando cambia la página (base 1). */
+    onPageChange: (page: number) => void;
+    /** Callback cuando cambia el tamaño de página. */
+    onPageSizeChange: (size: number) => void;
+    /**
+     * Cuántos números de página mostrar a cada lado del actual antes de
+     * poner elipsis. Default: 1 (ej: `1 … 4 [5] 6 … 20`).
+     */
+    siblingCount?: number;
+    /** Muestra u oculta el input "Ir a la página". Default: true. */
+    showGoToPage?: boolean;
+    /** Muestra u oculta los botones « / ». Default: true. */
+    showFirstLast?: boolean;
+    /** Piel visual. Default: "classic". */
+    variant?: PaginationVariant;
+    /** Traducciones (en caso de reusar fuera de es). */
+    labels?: Partial<PaginationLabels>;
+    /** id opcional para tests / a11y. */
+    id?: string;
+}
+export interface PaginationLabels {
+    showing: (from: number, to: number, total: number) => string;
+    previous: string;
+    next: string;
+    showPerPage: (size: number) => string;
+    goToPage: string;
+    go: string;
+    first: string;
+    last: string;
+}
+export declare const Pagination: React.FC<PaginationProps>;

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

@@ -4,6 +4,8 @@ export { AsyncCustomTable } from './AsyncCustomTable';
 export type { AsyncCustomTableProps } from './AsyncCustomTable';
 export { PaginationRangeInput } from './PaginationRangeInput';
 export type { PaginationRangeData } from './PaginationRangeInput';
+export { Pagination } from './Pagination';
+export type { PaginationProps, PaginationLabels } from './Pagination';
 export { TableFiltersPanel } from './TableFiltersPanel';
 export { TableSortingPanel } from './TableSortingPanel';
 export { createLocalStorageAsyncStateStore } from './asyncStateStore';

package/package.json

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