@m4l/components 9.4.5 → 9.4.6-BE20260105-beta.1

package/components/datagrids/helpers/shared/getViewSpecificConfig/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Configuración específica retornada por getViewSpecificConfig
+ */
+export interface ViewSpecificConfig {
+    /** Valores por defecto para propiedades específicas de la vista */
+    defaults: Record<string, unknown>;
+    /** Valores originales por defecto para tracking de cambios */
+    originalDefaults: Record<string, unknown>;
+    /** Función para obtener propiedades originales dinámicas de un item */
+    dynamicOriginalProperty: (item: unknown) => Record<string, unknown>;
+}

package/components/{DataGrid/helpers → datagrids/helpers/shared}/getViewSuffix/getViewSuffix.d.ts

@@ -1,4 +1,4 @@
-import { ViewMode } from '../../contexts/DataGridContext/types';
+import { ViewMode } from '../../../contexts/DataGridContext/types';
 /**
  * Genera el sufijo de localStorage basado en el viewMode.
  *

package/components/datagrids/helpers/shared/getViewSuffix/getViewSuffix.test.d.ts

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

package/components/datagrids/hooks/index.d.ts

@@ -0,0 +1,8 @@
+export { useDataGrid } from './shared/useDataGrid';
+export { useFilters } from './shared/useFilters';
+export { useViewMode } from './useViewMode';
+export { useRowHeight } from './useRowHeight';
+export { useColumnsWidth } from './useColumnsWidth';
+export { useViewConfig } from './useViewConfig';
+export { useChangeColumnsConfig } from './useChangeColumnsConfig';
+export { useChangeColumnsOrder } from './useChangeColumnsOrder';

package/components/datagrids/hooks/shared/useDataGrid/index.d.ts

@@ -0,0 +1 @@
+export * from './useDataGrid';

package/components/datagrids/hooks/shared/useDataGrid/useDataGrid.d.ts

@@ -0,0 +1,9 @@
+import { DataGridContextProps } from '../../../contexts/DataGridContext';
+/**
+ * Hook para obtener el contexto de DataGrid.
+ * Debe ser usado dentro de un DataGridProvider.
+ * @returns DataGridContextProps con todas las propiedades del contexto
+ * @throws Error si se usa fuera del DataGridProvider
+ */
+export declare function useDataGrid<TRow, TSummaryRow>(): DataGridContextProps<TRow, TSummaryRow>;
+export default useDataGrid;

package/components/{DataGrid/hooks → datagrids/hooks/shared/useDataGrid}/useDataGrid.js

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { a as DataGridContext } from "../contexts/DataGridContext/index.js";
+import { a as DataGridContext } from "../../../contexts/DataGridContext/DataGridContext.js";
 function useDataGrid() {
   const context = useContext(DataGridContext);
   if (!context) {

package/components/datagrids/hooks/shared/useDataGrid/useDataGrid.test.d.ts

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

package/components/datagrids/hooks/shared/useFilters/index.d.ts

@@ -0,0 +1 @@
+export * from './useFilters';

package/components/datagrids/hooks/shared/useFilters/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/hooks/shared/useFilters/useFilters.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook para obtener el contexto de filtros del DataGrid.
+ * @returns FilterContext con las funciones y estado de filtros
+ */
+export declare const useFilters: () => import('../../../contexts/FilterContext').FilterContextProps;

package/components/{DataGrid/hooks → datagrids/hooks/shared/useFilters}/useFilters.js

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { a as FilterContext } from "../contexts/FilterContext/index.js";
+import { a as FilterContext } from "../../../contexts/FilterContext/FilterContext.js";
 const useFilters = () => useContext(FilterContext);
 export {
   useFilters as u

package/components/datagrids/hooks/useChangeColumnsConfig/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/hooks/useChangeColumnsConfig/types.d.ts

@@ -0,0 +1,14 @@
+import { RowKey, OnChangeConfig } from '../../types';
+import { IViewConfig, ViewMode } from '../../contexts/DataGridContext/types';
+export interface UseChangeColumnsConfigParams {
+    /** Identificador único del DataGrid */
+    id: RowKey;
+    /** Callback para persistir cambios */
+    onChangeConfig?: OnChangeConfig;
+    /** Función para actualizar la configuración de columnas */
+    updateConfigColumns: (viewMode: ViewMode, config: IViewConfig<any, any>[]) => void;
+}
+export interface UseChangeColumnsConfigReturn {
+    /** Función para cambiar la configuración de columnas de una vista */
+    onChangeColumnsConfig: (viewMode: ViewMode, newConfig: IViewConfig<any, any>[]) => void;
+}

package/components/{DataGrid → datagrids}/hooks/useChangeColumnsConfig/useChangeColumnsConfig.d.ts

@@ -1,4 +1,4 @@
-import { UseChangeColumnsConfigParams, UseChangeColumnsConfigReturn } from '../../types.hooks';
+import { UseChangeColumnsConfigParams, UseChangeColumnsConfigReturn } from './types';
 /**
  * Hook para manejar el cambio de configuración de columnas.
  *

package/components/{DataGrid → datagrids}/hooks/useChangeColumnsConfig/useChangeColumnsConfig.js

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
-import { s as saveViewConfig } from "../../helpers/saveViewConfig/saveViewConfig.js";
-import { g as getViewSuffix } from "../../helpers/getViewSuffix/getViewSuffix.js";
+import { s as saveViewConfig } from "../../helpers/persistence/saveViewConfig/saveViewConfig.js";
+import { g as getViewSuffix } from "../../helpers/shared/getViewSuffix/getViewSuffix.js";
 const useChangeColumnsConfig = ({
   id,
   onChangeConfig,

package/components/datagrids/hooks/useChangeColumnsConfig/useChangeColumnsConfig.test.d.ts

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

package/components/datagrids/hooks/useChangeColumnsOrder/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/hooks/useChangeColumnsOrder/types.d.ts

@@ -0,0 +1,11 @@
+import { IViewConfig, ViewMode } from '../../contexts/DataGridContext/types';
+export interface UseChangeColumnsOrderParams {
+    /** Función para obtener la configuración de columnas de una vista */
+    getConfigColumns: (viewMode: ViewMode) => IViewConfig<any, any>[];
+    /** Función para cambiar la configuración de columnas */
+    onChangeColumnsConfig: (viewMode: ViewMode, newConfig: IViewConfig<any, any>[]) => void;
+}
+export interface UseChangeColumnsOrderReturn {
+    /** Función para cambiar el orden de columnas de una vista */
+    onChangeColumnsOrder: (viewMode: ViewMode, sourceKey: string, targetKey: string) => void;
+}

package/components/{DataGrid → datagrids}/hooks/useChangeColumnsOrder/useChangeColumnsOrder.d.ts

@@ -1,4 +1,4 @@
-import { UseChangeColumnsOrderParams, UseChangeColumnsOrderReturn } from '../../types.hooks';
+import { UseChangeColumnsOrderParams, UseChangeColumnsOrderReturn } from './types';
 /**
  * Hook para manejar el cambio de orden de columnas.
  *

package/components/datagrids/hooks/useChangeColumnsOrder/useChangeColumnsOrder.test.d.ts

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

package/components/datagrids/hooks/useColumnsWidth/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/hooks/useColumnsWidth/types.d.ts

@@ -0,0 +1,16 @@
+import { Maybe } from '@m4l/core';
+import { RowKey, OnChangeConfig } from '../../types';
+export interface UseColumnsWidthParams {
+    /** Identificador único del DataGrid */
+    id: RowKey;
+    /** Callback para persistir cambios */
+    onChangeConfig?: OnChangeConfig;
+}
+export interface UseColumnsWidthReturn {
+    /** Mapa con el ancho de cada columna */
+    columnsWidths: Map<string, Maybe<string | number>>;
+    /** Función para establecer el mapa de anchos */
+    setColumnsWidths: React.Dispatch<React.SetStateAction<Map<string, Maybe<string | number>>>>;
+    /** Función para cambiar el ancho de una columna */
+    onChangeColumnWidth: (columnKey: string, width: number) => void;
+}

package/components/{DataGrid → datagrids}/hooks/useColumnsWidth/useColumnsWidth.d.ts

@@ -1,4 +1,4 @@
-import { UseColumnsWidthParams, UseColumnsWidthReturn } from '../../types.hooks';
+import { UseColumnsWidthParams, UseColumnsWidthReturn } from './types';
 /**
  * Hook para manejar el estado del ancho de las columnas del DataGrid.
  *

package/components/{DataGrid → datagrids}/hooks/useColumnsWidth/useColumnsWidth.js

@@ -1,5 +1,5 @@
 import { useState, useRef, useCallback } from "react";
-import { s as saveColumnsWidth } from "../../helpers/saveColumnsWidth/saveColumnsWidth.js";
+import { s as saveColumnsWidth } from "../../helpers/persistence/saveColumnsWidth/saveColumnsWidth.js";
 const useColumnsWidth = ({
   id,
   onChangeConfig

package/components/datagrids/hooks/useColumnsWidth/useColumnsWidth.test.d.ts

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

package/components/datagrids/hooks/useRowHeight/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/hooks/useRowHeight/types.d.ts

@@ -0,0 +1,16 @@
+import { RowHeightVariants, RowHeights } from '../../types';
+import { RowHeightState } from '../../contexts/DataGridContext/types';
+export interface UseRowHeightParams {
+    /** Alturas de las filas (número fijo o array de 3 elementos) */
+    rowHeights: RowHeights;
+    /** Alturas de los headers (número fijo o array de 3 elementos) */
+    rowHeaderHeights: RowHeights;
+    /** Variant inicial de altura */
+    initialRowHeightVariant: RowHeightVariants;
+}
+export interface UseRowHeightReturn {
+    /** Estado actual de la altura de filas */
+    currentRowHeightVariant: RowHeightState;
+    /** Función para cambiar el variant de altura */
+    setRowHeightVariant: (newVariant: RowHeightVariants) => void;
+}

package/components/datagrids/hooks/useRowHeight/useRowHeight.d.ts

@@ -0,0 +1,11 @@
+import { UseRowHeightParams, UseRowHeightReturn } from './types';
+/**
+ * Hook para manejar el estado de la altura de las filas del DataGrid.
+ *
+ * Soporta dos modos:
+ * - **Modo fijo**: rowHeights y rowHeaderHeights son números fijos
+ * - **Modo variable**: rowHeights y rowHeaderHeights son arrays de 3 elementos [compact, standard, confortable]
+ * @param params - Parámetros del hook
+ * @returns Estado actual y función para cambiar el variant
+ */
+export declare const useRowHeight: ({ rowHeights, rowHeaderHeights, initialRowHeightVariant, }: UseRowHeightParams) => UseRowHeightReturn;

package/components/{DataGrid → datagrids}/hooks/useRowHeight/useRowHeight.js

@@ -1,5 +1,5 @@
 import { useState, useCallback } from "react";
-import { g as getIndexRowHeightVariant } from "../../helpers/getIndexRowHeightVariant/getIndexRowHeightVariant.js";
+import { g as getIndexRowHeightVariant } from "../../helpers/shared/getIndexRowHeightVariant/getIndexRowHeightVariant.js";
 const useRowHeight = ({
   rowHeights,
   rowHeaderHeights,

package/components/datagrids/hooks/useRowHeight/useRowHeight.test.d.ts

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

package/components/datagrids/hooks/useViewConfig/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/hooks/useViewConfig/types.d.ts

@@ -0,0 +1,9 @@
+import { IViewConfig, ViewMode } from '../../contexts/DataGridContext/types';
+export interface UseViewConfigReturn {
+    /** Estado de configuración por vista */
+    viewConfig: Record<ViewMode, IViewConfig<any, any>[]>;
+    /** Obtiene la configuración de columnas para una vista */
+    getConfigColumns: (viewMode: ViewMode) => IViewConfig<any, any>[];
+    /** Actualiza la configuración de columnas para una vista */
+    updateConfigColumns: (viewMode: ViewMode, config: IViewConfig<any, any>[]) => void;
+}

package/components/{DataGrid → datagrids}/hooks/useViewConfig/useViewConfig.d.ts

@@ -1,4 +1,4 @@
-import { UseViewConfigReturn } from '../../types.hooks';
+import { UseViewConfigReturn } from './types';
 /**
  * Hook para manejar el estado de la configuración de columnas por vista.
  *

package/components/datagrids/hooks/useViewConfig/useViewConfig.test.d.ts

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

package/components/datagrids/hooks/useViewMode/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/hooks/useViewMode/types.d.ts

@@ -0,0 +1,22 @@
+import { RowKey, OnChangeConfig } from '../../types';
+import { ViewMode } from '../../contexts/DataGridContext/types';
+export interface UseViewModeParams {
+    /** Identificador único del DataGrid */
+    id: RowKey;
+    /** ViewMode controlado por el padre */
+    viewMode?: ViewMode;
+    /** ViewMode por defecto cuando no hay valor guardado */
+    defaultViewMode?: ViewMode;
+    /** Callback cuando cambia el viewMode */
+    onViewModeChange?: (viewMode: ViewMode) => void;
+    /** Callback para persistir cambios */
+    onChangeConfig?: OnChangeConfig;
+}
+export interface UseViewModeReturn {
+    /** Estado actual del viewMode */
+    viewModeState: ViewMode;
+    /** Función para establecer el viewMode */
+    setViewModeState: React.Dispatch<React.SetStateAction<ViewMode>>;
+    /** Función para cambiar el viewMode y persistirlo */
+    handleViewModeChange: (newViewMode: ViewMode) => void;
+}

package/components/{DataGrid → datagrids}/hooks/useViewMode/useViewMode.d.ts

@@ -1,4 +1,4 @@
-import { UseViewModeParams, UseViewModeReturn } from '../../types.hooks';
+import { UseViewModeParams, UseViewModeReturn } from './types';
 /**
  * Hook para manejar el estado del modo de visualización (table/cards).
  *
@@ -19,13 +19,5 @@ import { UseViewModeParams, UseViewModeReturn } from '../../types.hooks';
  *
  * - **Controlado**: Cuando se pasa `viewMode` prop, el padre controla el estado
  * - **No controlado**: El hook maneja internamente el estado y persiste
- * @param id - Identificador único del DataGrid
- * @param viewMode - ViewMode controlado por el padre (opcional)
- * @param defaultViewMode - ViewMode por defecto cuando no hay valor guardado
- * @param onViewModeChange - Callback cuando cambia el viewMode (opcional)
- * @param onChangeConfig - Callback para guardar en cookies de red (opcional)
- * @returns viewModeState - Estado actual del viewMode
- * @returns setViewModeState - Función para establecer el viewMode
- * @returns handleViewModeChange - Función para cambiar el viewMode y persistirlo
  */
 export declare const useViewMode: ({ id, viewMode, defaultViewMode, onViewModeChange, onChangeConfig, }: UseViewModeParams) => UseViewModeReturn;

package/components/{DataGrid → datagrids}/hooks/useViewMode/useViewMode.js

@@ -1,7 +1,7 @@
 import { useState, useCallback, useEffect } from "react";
 import { useIsMobile } from "@m4l/graphics";
-import { g as getViewMode } from "../../helpers/getViewMode/getViewMode.js";
-import { s as saveViewMode } from "../../helpers/saveViewMode/saveViewMode.js";
+import { g as getViewMode } from "../../helpers/persistence/getViewMode/getViewMode.js";
+import { s as saveViewMode } from "../../helpers/persistence/saveViewMode/saveViewMode.js";
 const useViewMode = ({
   id,
   viewMode,

package/components/datagrids/hooks/useViewMode/useViewMode.test.d.ts

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

package/components/{DataGrid → datagrids}/icons.d.ts

@@ -27,4 +27,5 @@ export declare const pathIcons: {
     mail: string;
     smartphone: string;
     internet: string;
+    edit: string;
 };

package/components/{DataGrid → datagrids}/icons.js

@@ -23,7 +23,8 @@ const pathIcons = {
   viewTable: "frontend/components/data_grid/assets/icons/table.svg",
   viewCards: "frontend/components/data_grid/assets/icons/card.svg",
   info: "frontend/components/data_grid/assets/icons/info.svg",
-  expanded: "frontend/components/data_grid/assets/icons/expanded.svg"
+  expanded: "frontend/components/data_grid/assets/icons/expanded.svg",
+  edit: "frontend/components/EditLabel/assets/icons/pencil.svg"
 };
 export {
   pathIcons as p

package/components/{DataGrid → datagrids}/index.d.ts

@@ -1,10 +1,10 @@
-export { DataGrid } from './DataGrid';
+export { DataGrid } from './components/DataGridMain';
 export * from './formatters';
 export type { Column, RenderEditCellProps, RenderCellProps, } from 'react-data-grid';
 export type { RowKey, ChangeConfig, ChangeUserColumn, RowActionsGetter, RowKeyGetter, } from './types';
+export type { IGridConfigExtended, BaseConfigColumn, } from './contexts/DataGridContext/types';
+export type { IGridConfig } from './helpers/persistence/getColumnsWidth/types';
 export { getDataGridComponentsDictionary } from './dictionary';
 export { TextEditor, NumberEditor } from './subcomponents/editors/TextEditor';
-export { getDataGridRowsFromSet } from './utils/getDataGridRowsFromSet';
-export type { IGridConfigExtended, BaseConfigColumn, } from './contexts/DataGridContext/types';
+export { getDataGridRowsFromSet } from './helpers';
 export { DATAGRID_SEMANTIC_WIDTHS, DATAGRID_ROW_HEADER_HEIGHTS, DATAGRID_ROW_HEIGHTS, } from './constants';
-export * from './types.helpers';

package/components/datagrids/index.js

@@ -0,0 +1 @@
+

package/components/{DataGrid → datagrids}/slots/DataGridEnum.d.ts

@@ -50,7 +50,10 @@ export declare enum TableSlots {
     customCardFieldContent = "customCardFieldContent",
     customCardIconContainer = "customCardIconContainer",
     checkboxCellWrapper = "checkboxCellWrapper",
-    editorCellWrapper = "editorCellWrapper"
+    editorCellWrapper = "editorCellWrapper",
+    editablePlaceholder = "editablePlaceholder",
+    editLabel = "editLabel",
+    iconButtonEdit = "iconButtonEdit"
 }
 export declare enum TextEditorSlots {
     inputTexEditor = "inputTexEditor"

package/components/{DataGrid → datagrids}/slots/DataGridEnum.js

@@ -54,6 +54,9 @@ var TableSlots = /* @__PURE__ */ ((TableSlots2) => {
   TableSlots2["customCardIconContainer"] = "customCardIconContainer";
   TableSlots2["checkboxCellWrapper"] = "checkboxCellWrapper";
   TableSlots2["editorCellWrapper"] = "editorCellWrapper";
+  TableSlots2["editablePlaceholder"] = "editablePlaceholder";
+  TableSlots2["editLabel"] = "editLabel";
+  TableSlots2["iconButtonEdit"] = "iconButtonEdit";
   return TableSlots2;
 })(TableSlots || {});
 var TextEditorSlots = /* @__PURE__ */ ((TextEditorSlots2) => {

package/components/{DataGrid → datagrids}/slots/DataGridSlot.d.ts

@@ -76,6 +76,9 @@ export declare const ButtonHeaderActionsStyled: import('@emotion/styled').Styled
 export declare const NameColumnIconStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const IconColumnStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const NameColumnStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const EditablePlaceholderStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const EditLabelStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
+export declare const IconButtonEditStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
 /**
  * ****************
  * Slots TextEditor

package/components/{DataGrid → datagrids}/slots/DataGridSlot.js

@@ -6,6 +6,7 @@ import { d as dataGridStyles } from "../Datagrid.styles.js";
 import { I as Icon } from "../../Icon/Icon.js";
 import { C as Card } from "../../Card/Card.js";
 import { T as Typography } from "../../mui_extended/Typography/Typography.js";
+import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
 const DataGridRootStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: DataGridSlots.datagridRoot
@@ -206,6 +207,18 @@ const NameColumnStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: TableSlots.nameColumn
 })(dataGridStyles.nameColumn);
+const EditablePlaceholderStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.editablePlaceholder
+})(dataGridStyles.editablePlaceholder);
+styled(Typography, {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.editLabel
+})(dataGridStyles.editLabel);
+const IconButtonEditStyled = styled(IconButton, {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.iconButtonEdit
+})(dataGridStyles.iconButtonEdit);
 const InputTextEditorStyled = styled("input", {
   name: DATAGRID_PREFIX_NAME,
   slot: TextEditorSlots.inputTexEditor
@@ -220,49 +233,51 @@ styled("div", {
 })(dataGridStyles.columnIconFormatter);
 export {
   ActionsRootStyled as A,
-  NameColumnStyled as B,
+  TableContainerStyled as B,
   CustomHeaderStyled as C,
   DataGridRootStyled as D,
   EditorCellWrapperStyled as E,
-  DraggableHeaderRootStyled as F,
-  ButtonHeaderActionsStyled as G,
-  DraggableWrapperInputBaseStyled as H,
-  IconColumnStyled as I,
-  IconSearchStyled as J,
-  HeaderInputBaseStyled as K,
+  NameColumnStyled as F,
+  IconColumnStyled as G,
+  DraggableHeaderRootStyled as H,
+  InputTextEditorStyled as I,
+  ButtonHeaderActionsStyled as J,
+  DraggableWrapperInputBaseStyled as K,
   LabelHeaderColumnStyled as L,
-  MenuListStyled as M,
+  IconSearchStyled as M,
   NameColumnIconStyled as N,
-  HeaderRenderClickStyled as O,
-  InputTextEditorStyled as P,
+  HeaderInputBaseStyled as O,
+  MenuListStyled as P,
+  HeaderRenderClickStyled as Q,
   RowsCountRootStyled as R,
-  TableWrapperDataGridStyled as T,
+  CheckboxCellWrapperStyled as S,
+  TextToggleCardButtonStyled as T,
   ValueColumnStyled as V,
   WrapperSkeletonStyled as W,
-  ContentModalSettingStyled as a,
-  ContainerLabelValueColumnStyled as b,
-  ContentWrapperColumnStyled as c,
-  CardsContainerStyled as d,
-  CardDetailContainerStyled as e,
-  CardHeaderStyled as f,
-  CardHeaderLeftStyled as g,
-  CardHeaderRightStyled as h,
-  CardContentWrapperStyled as i,
-  CardContentStyled as j,
-  CardStyled as k,
-  CheckboxCellWrapperStyled as l,
-  ControlNavigateStyled as m,
-  ActionsConfigContainerStyled as n,
-  ContainerLeftActionsStyled as o,
-  ContainerRightActionsStyled as p,
-  RowsCountLabelStyled as q,
-  RowsCountValueStyled as r,
-  ColumnsConfigWrapperStyled as s,
-  ColumnsConfigDataGridStyled as t,
-  ColumnsConfigSelColumnsStyled as u,
-  ColumnsConfigActiosStyled as v,
-  ContainerToggleCardsStyled as w,
-  CardToggleButtonStyled as x,
-  TextToggleCardButtonStyled as y,
-  TableContainerStyled as z
+  ControlNavigateStyled as a,
+  RowsCountLabelStyled as b,
+  RowsCountValueStyled as c,
+  ActionsConfigContainerStyled as d,
+  ContainerLeftActionsStyled as e,
+  ContainerRightActionsStyled as f,
+  ContainerToggleCardsStyled as g,
+  CardToggleButtonStyled as h,
+  CardsContainerStyled as i,
+  ContainerLabelValueColumnStyled as j,
+  ContentWrapperColumnStyled as k,
+  EditablePlaceholderStyled as l,
+  IconButtonEditStyled as m,
+  ContentModalSettingStyled as n,
+  CardDetailContainerStyled as o,
+  CardContentWrapperStyled as p,
+  CardContentStyled as q,
+  CardStyled as r,
+  CardHeaderStyled as s,
+  CardHeaderLeftStyled as t,
+  CardHeaderRightStyled as u,
+  ColumnsConfigWrapperStyled as v,
+  ColumnsConfigDataGridStyled as w,
+  ColumnsConfigSelColumnsStyled as x,
+  TableWrapperDataGridStyled as y,
+  ColumnsConfigActiosStyled as z
 };

package/components/datagrids/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DataGridEnum';
+export * from './DataGridSlot';

package/components/datagrids/subcomponents/ControlNavigate/ControlNavigate.d.ts

@@ -0,0 +1,25 @@
+import { ControlNavigateProps } from './types';
+/**
+ * Componente que renderiza el control de navegación del DataGrid.
+ *
+ * Muestra opciones de navegación y conteo de filas:
+ * - **RowsCount**: Muestra el total de filas (solo cuando no hay pager y no es móvil)
+ * - **Pager**: Componente de paginación con navegación entre páginas
+ * @param props.withRowsCount - Si muestra el contador de filas (default: true)
+ * @param props.withPager - Si muestra el paginador (default: true)
+ * @param props.pagerOptions - Opciones de configuración del paginador
+ * @param props.size - Tamaño del componente
+ * @example
+ * ```tsx
+ * <ControlNavigate
+ *   withPager
+ *   pagerOptions={{
+ *     totalRecords: 100,
+ *     pageSize: 10,
+ *     currentPage: 1,
+ *     onPageChange: (page) => setPage(page)
+ *   }}
+ * />
+ * ```
+ */
+export declare const ControlNavigate: (props: ControlNavigateProps) => import("react/jsx-runtime").JSX.Element;

package/components/{DataGrid → datagrids}/subcomponents/ControlNavigate/ControlNavigate.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useIsMobile } from "@m4l/graphics";
-import { m as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
-import { R as RowsCount } from "../HeaderActions/subcomponents/RowsCount/index.js";
+import { a as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
+import { R as RowsCount } from "./subcomponents/RowsCount/RowsCount.js";
 import { P as Pager } from "../../../Pager/Pager.js";
 const ControlNavigate = (props) => {
   const {

package/components/datagrids/subcomponents/ControlNavigate/ControlNavigate.test.d.ts

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

package/components/{DataGrid → datagrids}/subcomponents/ControlNavigate/index.d.ts

@@ -1,2 +1,2 @@
 export { ControlNavigate } from './ControlNavigate';
-export type { ControlNavigateProps } from './types';
+export * from './types';

package/components/datagrids/subcomponents/ControlNavigate/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/subcomponents/ControlNavigate/subcomponents/RowsCount/RowsCount.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Componente que muestra el contador de filas del DataGrid.
+ *
+ * Muestra una etiqueta con el total de filas visibles en formato:
+ * "Filas: {count}"
+ *
+ * Características:
+ * - Muestra skeleton mientras se cargan los datos
+ * - Se adapta al tamaño configurado del DataGrid
+ * - Usa el diccionario para internacionalización
+ * @example
+ * ```tsx
+ * // Se usa internamente en ControlNavigate
+ * {withRowsCount && !withPager && !isMobile && <RowsCount />}
+ * ```
+ */
+export declare function RowsCount(): import("react/jsx-runtime").JSX.Element;

package/components/{DataGrid/subcomponents/HeaderActions/subcomponents/RowsCount/index.js → datagrids/subcomponents/ControlNavigate/subcomponents/RowsCount/RowsCount.js}

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
-import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { R as RowsCountRootStyled, q as RowsCountLabelStyled, r as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
+import { R as RowsCountRootStyled, b as RowsCountLabelStyled, c as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function RowsCount() {
   const { rowsCount, size } = useDataGrid();
   const { getLabel } = useModuleDictionary();

package/components/datagrids/subcomponents/ControlNavigate/subcomponents/RowsCount/RowsCount.test.d.ts

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

package/components/datagrids/subcomponents/ControlNavigate/subcomponents/RowsCount/index.d.ts

@@ -0,0 +1 @@
+export { RowsCount } from './RowsCount';

package/components/datagrids/subcomponents/ControlNavigate/subcomponents/RowsCount/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/subcomponents/ControlNavigate/types.js

@@ -0,0 +1 @@
+