@sfperusacdev/sf-ui 0.1.23 → 0.1.25

package/dist/theme/dark.css

@@ -169,7 +169,14 @@
      ese mismo valor para que el oscuro se vea EXACTAMENTE igual que antes: al
      quitar el import las heredaría del tema base (sark) y cambiarían de color. */
   --sf-app-shell-accent: #2e9e5b;
+  --sf-app-shell-topbar-bg: #0c2131;
+  --sf-app-shell-topbar-text: #ffffff;
   --sf-app-shell-topbar-muted: #9fb6c4;
+  --sf-app-shell-user-chip-bg: color-mix(in srgb, var(--sf-app-shell-topbar-bg) 86%, #f5f7f9);
+  --sf-app-shell-user-chip-bg-hover: color-mix(in srgb, var(--sf-app-shell-topbar-bg) 80%, #f5f7f9);
+  --sf-app-shell-user-chip-border: color-mix(in srgb, var(--sf-app-shell-topbar-text) 18%, transparent);
+  --sf-app-shell-user-chip-border-hover: color-mix(in srgb, var(--sf-app-shell-topbar-text) 28%, transparent);
+  --sf-app-shell-user-chip-name: var(--sf-app-shell-topbar-text);
   --sf-badge-primary-dot: #334155;
   --sf-btn-primary-shadow-hover: none;
   --sf-danger: #dc2626;

package/dist/theme/sark.css

@@ -99,6 +99,8 @@
   --sf-modal-header-bg: var(--sf-primary);
   --sf-modal-header-text: var(--sf-white);
   --sf-app-shell-accent: var(--sf-accent);
+  --sf-app-shell-topbar-bg: #0c2131;
+  --sf-app-shell-topbar-text: #ffffff;
   --sf-app-shell-topbar-muted: #9fb6c4;
   --sf-modal-header-subtitle: var(--sf-app-shell-topbar-muted);
   --sf-modal-header-icon-bg: var(--sf-app-shell-accent);

package/dist/theme/sf-tokens.css

@@ -158,14 +158,18 @@
   --sf-page-header-border: var(--sf-border);
   --sf-page-header-shadow: var(--sf-shadow-2);
 
+  /* AppShell topbar — fondo/texto fijos al togglear oscuro (no usar --sf-primary/--sf-white) */
+  --sf-app-shell-topbar-bg: var(--sf-primary);
+  --sf-app-shell-topbar-text: #ffffff;
+  --sf-app-shell-topbar-muted: #9fb6c4;
+
   /* AppShell topbar user chip */
-  --sf-app-shell-user-chip-bg: color-mix(in srgb, var(--sf-primary) 86%, var(--sf-surface-alt));
-  --sf-app-shell-user-chip-bg-hover: color-mix(in srgb, var(--sf-primary) 80%, var(--sf-surface-alt));
-  --sf-app-shell-user-chip-border: color-mix(in srgb, var(--sf-white) 22%, transparent);
-  --sf-app-shell-user-chip-border-hover: color-mix(in srgb, var(--sf-white) 34%, transparent);
+  --sf-app-shell-user-chip-bg: color-mix(in srgb, var(--sf-app-shell-topbar-bg) 86%, var(--sf-surface-alt));
+  --sf-app-shell-user-chip-bg-hover: color-mix(in srgb, var(--sf-app-shell-topbar-bg) 80%, var(--sf-surface-alt));
+  --sf-app-shell-user-chip-border: color-mix(in srgb, var(--sf-app-shell-topbar-text) 22%, transparent);
+  --sf-app-shell-user-chip-border-hover: color-mix(in srgb, var(--sf-app-shell-topbar-text) 34%, transparent);
   --sf-app-shell-user-chip-radius: 0.5rem;
-  --sf-app-shell-topbar-muted: #9fb6c4;
-  --sf-app-shell-user-chip-name: var(--sf-white);
+  --sf-app-shell-user-chip-name: var(--sf-app-shell-topbar-text);
   --sf-app-shell-user-chip-subtitle: var(--sf-app-shell-topbar-muted);
   --sf-app-shell-user-avatar-bg: var(--sf-app-shell-accent);
   --sf-app-shell-user-avatar-text: var(--sf-white);

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/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';

package/dist/types/src/hooks/useCustomForm.d.ts

@@ -1,26 +1,10 @@
-import { DefaultValues, FieldValues } from 'react-hook-form';
+import { DefaultValues, FieldValues, UseFormReturn } from 'react-hook-form';
 import type * as yup from "yup";
 type UseCustomFormProps<TValues extends FieldValues> = {
     defaultValues?: DefaultValues<TValues>;
 };
-export declare const useCustomForm: <TSchema extends yup.ObjectSchema<FieldValues>>(schema: TSchema, props?: UseCustomFormProps<yup.Asserts<TSchema>>) => {
-    handleSubmit: import('react-hook-form').UseFormHandleSubmit<yup.Asserts<TSchema>, yup.Asserts<TSchema>>;
-    watch: import('react-hook-form').UseFormWatch<yup.Asserts<TSchema>>;
-    getValues: import('react-hook-form').UseFormGetValues<yup.Asserts<TSchema>>;
-    getFieldState: import('react-hook-form').UseFormGetFieldState<yup.Asserts<TSchema>>;
-    setError: import('react-hook-form').UseFormSetError<yup.Asserts<TSchema>>;
-    clearErrors: import('react-hook-form').UseFormClearErrors<yup.Asserts<TSchema>>;
-    setValue: import('react-hook-form').UseFormSetValue<yup.Asserts<TSchema>>;
-    setValues: import('react-hook-form').UseFormSetValues<yup.Asserts<TSchema>>;
-    trigger: import('react-hook-form').UseFormTrigger<yup.Asserts<TSchema>>;
-    formState: import('react-hook-form').FormState<yup.Asserts<TSchema>>;
-    resetField: import('react-hook-form').UseFormResetField<yup.Asserts<TSchema>>;
-    reset: import('react-hook-form').UseFormReset<yup.Asserts<TSchema>>;
-    resetDefaultValues: import('react-hook-form').UseFormResetDefaultValues<yup.Asserts<TSchema>>;
-    unregister: import('react-hook-form').UseFormUnregister<yup.Asserts<TSchema>>;
-    control: import('react-hook-form').Control<yup.Asserts<TSchema>, any, yup.Asserts<TSchema>>;
-    register: import('react-hook-form').UseFormRegister<yup.Asserts<TSchema>>;
-    setFocus: import('react-hook-form').UseFormSetFocus<yup.Asserts<TSchema>>;
-    subscribe: import('react-hook-form').UseFormSubscribe<yup.Asserts<TSchema>>;
+type UseCustomFormReturn<TValues extends FieldValues> = UseFormReturn<TValues> & {
+    handleSubmit: UseFormReturn<TValues>["handleSubmit"];
 };
+export declare const useCustomForm: <TSchema extends yup.ObjectSchema<FieldValues>>(schema: TSchema, props?: UseCustomFormProps<yup.Asserts<TSchema>>) => UseCustomFormReturn<yup.Asserts<TSchema>>;
 export type { UseCustomFormProps };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sfperusacdev/sf-ui",
-  "version": "0.1.23",
-  "description": "SF UI — librería de componentes React (inputs, tablas, hooks) para aplicaciones SF Perú.",
+  "version": "0.1.25",
+  "description": "SF UI \u2014 librer\u00eda de componentes React (inputs, tablas, hooks) para aplicaciones SF Per\u00fa.",
   "type": "module",
   "main": "./dist/sf-ui.umd.cjs",
   "module": "./dist/sf-ui.js",
@@ -55,7 +55,8 @@
     "perf:phase5": "cross-env PERF_SCALE=1 vitest run src/performance/catalogPhases.performance.test.tsx --reporter=verbose --silent=false --testNamePattern=\"Phase 5\"",
     "perf:phase6": "cross-env PERF_SCALE=1 vitest run src/performance/catalogPhases.performance.test.tsx --reporter=verbose --silent=false --testNamePattern=\"Phase 6\"",
     "lint": "eslint .",
-    "dev": "npm run dev -w playground"
+    "dev": "npm run dev -w playground",
+    "postinstall": "node scripts/ensure-rolldown-binding.mjs"
   },
   "workspaces": [
     "playground"
@@ -107,6 +108,7 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.6.0",
+    "jsdom": "^26.1.0",
     "leaflet": "^1.9.4",
     "react": "^19.2.6",
     "react-day-picker": "^10.0.1",
@@ -116,7 +118,6 @@
     "react-leaflet": "^5.0.0",
     "react-qr-code": "^2.2.0",
     "recharts": "^3.9.0",
-    "jsdom": "^26.1.0",
     "tailwindcss": "^4.3.0",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.59.2",