@sfperusacdev/sf-ui 0.1.22 → 0.1.24

package/dist/types/src/components/dashboard/StatCard.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+type StatCardProps = {
+    value: ReactNode;
+    label: ReactNode;
+    /** color CSS del acento superior (y del icono); default var(--sf-success) */
+    accent?: string;
+    /** icono opcional; se pinta dentro de un halo del color del acento */
+    icon?: ReactNode;
+    className?: string;
+};
+/**
+ * Tarjeta KPI de los reportes (mockup transporte): franja superior de color,
+ * icono con halo, valor grande y label. El halo se deriva del acento con
+ * color-mix para no pedir dos colores.
+ */
+export declare const StatCard: ({ value, label, accent, icon, className }: StatCardProps) => import("react").JSX.Element;
+export {};

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

@@ -2,6 +2,7 @@ export { Stepper } from './Stepper';
 export type { StepperVariant } from './Stepper';
 export { TramoCard } from './TramoCard';
 export type { TramoCardTipo } from './TramoCard';
+export { StatCard } from './StatCard';
 export { Calendar } from './Calendar';
 export { MONTH_NAMES, WEEKDAY_LABELS, toLocalYMD, parseYMD, buildMonthGrid } from './calendarUtils';
 export { DonutGauge, DonutGaugeRow } from './DonutGauge';

package/dist/types/src/components/icons/AppsGridIcon.d.ts

@@ -0,0 +1,9 @@
+export type AppsGridIconProps = {
+    className?: string;
+};
+/**
+ * Lanzador de aplicaciones: cuadrícula de 9 puntos (3×3), el patrón que la
+ * gente reconoce como "ver todos los módulos". No usar `FiGrid` para esto:
+ * es una cuadrícula de 2×2 y se lee como "cambiar de vista", no como launcher.
+ */
+export declare const AppsGridIcon: ({ className }: AppsGridIconProps) => import("react").JSX.Element;

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

@@ -1,2 +1,4 @@
+export { AppsGridIcon } from './AppsGridIcon';
+export type { AppsGridIconProps } from './AppsGridIcon';
 export { SyncIcon } from './SyncIcon';
 export type { SyncIconProps } from './SyncIcon';

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

@@ -10,6 +10,11 @@ export type AppShellNavItem = {
      * submenú largo sin cabeceras de sección. Se ignora en el primer item.
      */
     dividerBefore?: boolean;
+    /**
+     * Oculta el item sin sacarlo del árbol de navegación: útil para features
+     * detrás de bandera o permiso, donde la definición del menú es estática.
+     */
+    hidden?: boolean;
 };
 export type AppShellCategory = {
     id: string;
@@ -44,6 +49,9 @@ export type AppShellModuleLauncher = {
     items: AppShellModuleLauncherItem[];
     title?: string;
     subtitle?: string;
+    /** Ícono del botón que abre el lanzador. Por defecto, la cuadrícula de 9 puntos. */
+    triggerIcon?: ReactNode;
+    ariaLabel?: string;
 };
 export type AppShellUserMenu = {
     fullName: string;

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

@@ -19,7 +19,28 @@ type CustomColumn<TData> = {
     enableHiding?: boolean;
     size?: number;
 };
-type CustomTableProps<TData extends Record<string, unknown>> = {
+/**
+ * Configuración de las filas de detalle expandibles (master-detail).
+ *
+ * Se puede usar de dos maneras excluyentes:
+ * - `render`: contenido libre bajo la fila padre (tiene prioridad si se define).
+ * - `getRows` + `columns`: sub-tabla renderizada con el propio `CustomTable` en modo `embedded`.
+ */
+type CustomTableDetail<TData, TDetail extends Record<string, unknown> = Record<string, unknown>> = {
+    /** Render libre del detalle. Si se define, ignora `getRows`/`columns`. */
+    render?: (row: TData) => ReactNode;
+    /** Filas hijas de la fila padre; se muestran en una sub-tabla. */
+    getRows?: (row: TData) => TDetail[];
+    /** Columnas de la sub-tabla de detalle. Requerido cuando se usa `getRows`. */
+    columns?: CustomColumn<TDetail>[];
+    /** Estado inicial del detalle: booleano global o predicado por fila. Por defecto `false`. */
+    defaultExpanded?: boolean | ((row: TData) => boolean);
+    /** Deshabilita el chevron para filas sin detalle. Por defecto todas son expandibles. */
+    isExpandable?: (row: TData) => boolean;
+    /** Mensaje de la sub-tabla cuando no hay filas hijas. */
+    emptyMessage?: string;
+};
+type CustomTableProps<TData extends Record<string, unknown>, TDetail extends Record<string, unknown> = Record<string, unknown>> = {
     id?: string;
     stateStore?: AsyncStateStore;
     data: TData[];
@@ -77,7 +98,12 @@ type CustomTableProps<TData extends Record<string, unknown>> = {
     headerVariant?: TableHeaderVariant;
     /** Oculta título, toolbar y chrome exterior — para uso dentro de ExpandableTableSection u otros contenedores. */
     embedded?: boolean;
+    /**
+     * Filas de detalle expandibles (master-detail). Agrega una columna de chevron al inicio
+     * y, al expandir, inserta una fila con el detalle debajo de la fila padre.
+     */
+    detail?: CustomTableDetail<TData, TDetail>;
     controller?: CustomTableController<TData>;
 };
-export declare function CustomTable<TData extends Record<string, unknown>>({ id, stateStore, data, columns, grouping, defaultGrouping, enableGrouping, enableSorting, enableFiltering, enablePagination, pageSize, fillParentHeight, maxBodyHeightPx, className, emptyMessage, title, subtitle, sidePanel, onGroupingChange, toolbarSlot, belowToolbarSlot, loading, loadingMessage, isFetching, error, onRetry, onRefresh, onRowClick, enableRowSelection, getRowActions, getBulkActions, bulkActionsSlot, onSelectionChange, headerVariant, embedded, controller, }: CustomTableProps<TData>): import("react").JSX.Element;
-export type { CustomColumn, CustomTableProps, TableAggregation };
+export declare function CustomTable<TData extends Record<string, unknown>, TDetail extends Record<string, unknown> = Record<string, unknown>>({ id, stateStore, data, columns, grouping, defaultGrouping, enableGrouping, enableSorting, enableFiltering, enablePagination, pageSize, fillParentHeight, maxBodyHeightPx, className, emptyMessage, title, subtitle, sidePanel, onGroupingChange, toolbarSlot, belowToolbarSlot, loading, loadingMessage, isFetching, error, onRetry, onRefresh, onRowClick, enableRowSelection, getRowActions, getBulkActions, bulkActionsSlot, onSelectionChange, headerVariant, embedded, detail, controller, }: CustomTableProps<TData, TDetail>): import("react").JSX.Element;
+export type { CustomColumn, CustomTableDetail, CustomTableProps, TableAggregation };

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

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

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

@@ -1,9 +1,17 @@
+import { ReactNode } from 'react';
 export type EditableColumn<T extends Record<string, unknown>> = {
     id: keyof T & string;
     header: string;
     editable?: boolean;
     sortable?: boolean;
     align?: "left" | "right";
+    /** tipo del input en modo form (default "text") */
+    type?: "text" | "date" | "number";
+    placeholder?: string;
+    /** ancho CSS de la columna (p.ej. "2fr" no aplica: usar "220px" o "20%") */
+    width?: string;
+    /** celda custom en modo form (p.ej. botón PDF); recibe la fila y su índice real */
+    render?: (row: T, originalIndex: number) => ReactNode;
 };
 export type EditableDataGridProps<T extends Record<string, unknown>> = {
     data: T[];
@@ -11,5 +19,26 @@ export type EditableDataGridProps<T extends Record<string, unknown>> = {
     rowKey: keyof T & string;
     onChange?: (next: T[]) => void;
     className?: string;
+    /**
+     * - "cell" (default): la tabla se ve como texto y se edita celda a celda
+     *   (doble clic / Enter), comportamiento histórico.
+     * - "form": grilla del mockup transporte — inputs siempre visibles por
+     *   celda, columna #, botón para agregar fila en blanco y ✕ para quitar.
+     */
+    mode?: "cell" | "form";
+    /** modo form: muestra la columna # con el número de fila */
+    showIndex?: boolean;
+    /** modo form: agrega una fila en blanco (el consumidor la fabrica) */
+    onAddRow?: () => void;
+    addLabel?: string;
+    /** modo form: quita la fila (el consumidor decide si es delete o descarte) */
+    onRemoveRow?: (row: T, originalIndex: number) => void;
+    /** título del toolbar (p.ej. "Contactos · 8") */
+    title?: ReactNode;
+    /** paginación en cliente (mockup: "Mostrar 5 por página") */
+    pageSize?: number;
+    emptyMessage?: string;
 };
-export declare const EditableDataGrid: <T extends Record<string, unknown>>({ data, columns, rowKey, onChange, className, }: EditableDataGridProps<T>) => import("react").JSX.Element;
+/** true si TODOS los campos indicados están vacíos ("" / null / undefined / 0 no cuenta como vacío) */
+export declare const isBlankRow: <T extends object>(row: T, keys: Array<keyof T & string>) => boolean;
+export declare const EditableDataGrid: <T extends Record<string, unknown>>({ data, columns, rowKey, onChange, className, mode, showIndex, onAddRow, addLabel, onRemoveRow, title, pageSize, emptyMessage, }: EditableDataGridProps<T>) => import("react").JSX.Element;

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

@@ -1,5 +1,5 @@
 export { CustomTable } from './CustomTable';
-export type { CustomColumn, CustomTableProps, TableHeaderVariant } from './CustomTable';
+export type { CustomColumn, CustomTableDetail, CustomTableProps, TableHeaderVariant } from './CustomTable';
 export { AsyncCustomTable } from './AsyncCustomTable';
 export type { AsyncCustomTableProps } from './AsyncCustomTable';
 export { PaginationRangeInput } from './PaginationRangeInput';
@@ -20,7 +20,7 @@ export { ActiveFiltersBar } from './ActiveFiltersBar';
 export type { ActiveFiltersBarProps } from './ActiveFiltersBar';
 export { buildActiveFilterChips, formatColumnFilterValue } from './activeFilterUtils';
 export type { ActiveFilterChip } from './activeFilterUtils';
-export { EditableDataGrid } from './EditableDataGrid';
+export { EditableDataGrid, isBlankRow } from './EditableDataGrid';
 export type { EditableColumn, EditableDataGridProps } from './EditableDataGrid';
 export { ExpandableTableSection } from './ExpandableTableSection';
 export type { ExpandableTableSectionItem, ExpandableTableSectionProps, ExpandableTableSectionTableConfig, } from './ExpandableTableSection';

package/package.json

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