@producteca/producteca-ui-kit 1.98.2 → 1.99.1

package/dist/components/table/tableBody/tableBody.d.ts

@@ -1,3 +1,3 @@
 import { TableBodyProps } from './tableBody.types';
 
-export declare const TableBody: <T>({ data, isLoading, error, empty, success, ...props }: TableBodyProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableBody: <T>({ data, isLoading, error, empty, success, onClickRow, ...props }: TableBodyProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/table/tableBody/tableBody.types.d.ts

@@ -6,4 +6,5 @@ export interface TableBodyProps<T> {
     error?: AsyncContentErrorProps;
     empty?: Omit<AsyncContentEmptyProps, 'items'>;
     success?: AsyncContentSuccessProps;
+    onClickRow?: (row: T, rowIndex: number) => void;
 }

package/dist/locales/description.d.ts

@@ -53,7 +53,7 @@ export declare const emptyStateExample = "\n## Uso del componente\n\nEl componen
 export declare const asyncContentExample = "\n## Uso del componente\n\nEl componente `AsyncContent` maneja los estados de una operaci\u00F3n as\u00EDncrona deriv\u00E1ndolos de las props `isLoading`, `error` y `empty`. La prioridad es: `isLoading` \u2192 `error.value` \u2192 `empty.items` vac\u00EDo \u2192 `success`. Muestra el contenido solo en `success`.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<AsyncContent\n  isLoading={isLoading}\n  error={{\n    value: hasError,\n    text: 'Ocurri\u00F3 un error',\n    actionText: 'Reintentar',\n    onClick: () => refetch(),\n  }}\n  empty={{\n    items,\n    text: 'No hay datos',\n  }}\n>\n  <div>Contenido cuando hay datos disponibles</div>\n</AsyncContent>\n```\n";
 export declare const tooltipExample = "\n## Uso del componente\n\nLos componentes de tooltip (`WithTooltip`, `WithOverflowTooltip`) muestran un mensaje al hacer hover o click. `WithOverflowTooltip` solo muestra el tooltip cuando el contenido se desborda.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<WithTooltip content=\"Texto del tooltip\" placement=\"top\">\n  <span>Hover sobre m\u00ED</span>\n</WithTooltip>\n```\n\n### Solo si hay overflow:\n\n```tsx\n<WithOverflowTooltip maxWidth=\"200px\">\n  <span>Texto que puede truncarse...</span>\n</WithOverflowTooltip>\n```\n";
 export declare const tableHeaderExample = "\n## Uso del componente\n\n`Table.Header` renderiza el encabezado de la tabla. Lee las columnas del contexto provisto por `Table`. Opcionalmente acepta `columns` como prop para sobrescribir el contexto.\n\n### Usando el contexto de Table (recomendado):\n\n```tsx\nconst columns: TableColumn<MyRow>[] = [\n  { key: 'name', header: 'Nombre' },\n  { key: 'status', header: 'Estado', sx: { textAlign: 'center' } },\n  { key: 'price', header: 'Precio', sx: { textAlign: 'right', width: 100 } },\n]\n\n<Table columns={columns}>\n  <Table.Header />\n</Table>\n```\n\n### Pasando columns directamente como prop:\n\n```tsx\n<Table columns={columns}>\n  <Table.Header columns={customColumns} />\n</Table>\n```\n";
-export declare const tableBodyExample = "\n## Uso del componente\n\n`Table.Body` renderiza las filas de datos. Lee las columnas del contexto provisto por `Table`. Integra `AsyncContent` internamente, por lo que acepta las props de estado (`isLoading`, `error`, `empty`, `success`) para mostrar el loader, el error o el estado vac\u00EDo dentro de la tabla.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Table columns={columns}>\n  <Table.Body data={rows} />\n</Table>\n```\n\n### Con estados as\u00EDncronos:\n\n```tsx\n<Table columns={columns}>\n  <Table.Header />\n  <Table.Body\n    data={rows}\n    isLoading={isLoading}\n    empty={{ text: 'No hay datos', actionText: 'Cargar', onClick: loadData }}\n  />\n</Table>\n```\n";
+export declare const tableBodyExample = "\n## Uso del componente\n\n`Table.Body` renderiza las filas de datos. Lee las columnas del contexto provisto por `Table`. Integra `AsyncContent` internamente, por lo que acepta las props de estado (`isLoading`, `error`, `empty`, `success`) para mostrar el loader, el error o el estado vac\u00EDo dentro de la tabla.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Table columns={columns}>\n  <Table.Body data={rows} />\n</Table>\n```\n\n### Con estados as\u00EDncronos:\n\n```tsx\n<Table columns={columns}>\n  <Table.Header />\n  <Table.Body\n    data={rows}\n    isLoading={isLoading}\n    empty={{ text: 'No hay datos', actionText: 'Cargar', onClick: loadData }}\n  />\n</Table>\n```\n\n### Filas clickeables:\n\nPasando `onClickRow` la fila queda clickeable: recibe el objeto de la fila y su \u00EDndice. Adem\u00E1s agrega el cursor, el foco por teclado y responde a `Enter` y `Espacio`.\n\n```tsx\n<Table columns={columns}>\n  <Table.Header />\n  <Table.Body data={rows} onClickRow={(row) => navigate(`/products/${row.id}`)} />\n</Table>\n```\n\n### Contenido interactivo dentro de las celdas:\n\nEl click de la fila escucha en el `<tr>`, as\u00ED que un link o un bot\u00F3n dentro de una celda tambi\u00E9n lo dispara. Cuando la celda tiene sus propias acciones, cort\u00E1 la propagaci\u00F3n en el handler de la acci\u00F3n (o en un wrapper que las agrupe):\n\n```tsx\nconst columns = [\n  { key: 'name', header: 'Nombre' },\n  {\n    key: 'actions',\n    header: 'Acciones',\n    render: (row) => (\n      <div onClick={(event) => event.stopPropagation()}>\n        <Button variant=\"link\" label=\"Editar\" onClick={() => edit(row)} />\n      </div>\n    ),\n  },\n]\n```\n";
 export declare const tableExample = "\n## Uso del componente\n\nEl componente `Table` es un contenedor compuesto. Recibe `columns` y los distribuye por contexto a `Table.Header` y `Table.Body`, accesibles por dot-notation.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Table columns={columns}>\n  <Table.Header />\n  <Table.Body data={rows} />\n</Table>\n```\n\n### Definici\u00F3n de columnas:\n\n```tsx\nconst columns: TableColumn<MyRow>[] = [\n  { key: 'name', header: 'Nombre' },\n  { key: 'status', header: 'Estado', sx: { textAlign: 'center' } },\n  {\n    key: 'actions',\n    header: 'Acciones',\n    sx: { width: 80 },\n    render: (row) => <Button label=\"Editar\" onClick={() => edit(row)} />,\n  },\n]\n```\n";
 export declare const tableAsyncContentExample = "\n`Table.Body` integra `AsyncContent` internamente: recibe las mismas props de estado (`isLoading`, `error`, `empty`, `success`) y resuelve el loader, el error y el estado vac\u00EDo **dentro** de la tabla, sin desmontar el `Table.Header`.\n\nEl estado vac\u00EDo se deriva de `data` (no hace falta pasar `items`). Cuando hay filas y no hay carga/error, se renderizan las filas normalmente.\n\n### Ejemplo:\n\n```tsx\n<Table columns={columns}>\n  <Table.Header />\n  <Table.Body\n    data={rows}\n    isLoading={isLoading}\n    empty={{\n      text: 'No hay datos disponibles',\n      actionText: 'Cargar datos',\n      onClick: loadData,\n    }}\n  />\n</Table>\n```\n";
 export declare const spinnerExample = "\n## Uso del componente\n\nEl componente `Spinner` muestra un indicador de carga. Acepta `size` (`xs`, `sm`, `md`, `lg`).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Spinner size=\"md\" />\n```\n";

package/dist/locales/es.d.ts

@@ -293,6 +293,10 @@ declare const _default: {
         duplicate: string;
         delete: string;
     };
+    tableBody: {
+        actions: string;
+        edit: string;
+    };
     error: {
         required: string;
         notValid: string;