@producteca/producteca-ui-kit 1.69.0 → 1.70.0

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

@@ -9,4 +9,5 @@ interface SampleRow {
 }
 export declare const sampleData: SampleRow[];
 export declare const TableDefaultExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const TableWithAsyncContentExample: () => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -1,4 +1,9 @@
+import { AsyncContentErrorProps, AsyncContentEmptyProps, AsyncContentSuccessProps } from '../../patterns/asyncContent';
+
 export interface TableBodyProps<T> {
     data: T[];
-    emptyMessage?: string;
+    isLoading?: boolean;
+    error?: AsyncContentErrorProps;
+    empty?: Omit<AsyncContentEmptyProps, 'items'>;
+    success?: AsyncContentSuccessProps;
 }

package/dist/locales/description.d.ts

@@ -48,7 +48,8 @@ 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`. Cuando `data` est\u00E1 vac\u00EDo muestra un `EmptyState` con `emptyMessage`.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Table columns={columns}>\n  <Table.Body data={rows} />\n</Table>\n```\n\n### Estado vac\u00EDo personalizado:\n\n```tsx\n<Table columns={columns}>\n  <Table.Body\n    data={[]}\n    emptyMessage=\"No encontramos resultados para tu b\u00FAsqueda\"\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";
 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";
 export declare const maintenanceExample = "\n## Uso del componente\n\nEl componente `Maintenance` muestra una vista de p\u00E1gina completa para indicar que el sistema est\u00E1 en mantenimiento. Acepta `title`, `description` y `subtitle` opcionales con valores por defecto en espa\u00F1ol.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Maintenance />\n```\n\n### Con contenido personalizado:\n\n```tsx\n<Maintenance\n  title=\"Estamos mejorando\"\n  description=\"Estamos haciendo algunos ajustes para brindarte una mejor experiencia.\"\n  subtitle=\"Volvemos en unos minutos.\"\n/>\n```\n";

package/dist/locales/es.d.ts

@@ -245,6 +245,7 @@ declare const _default: {
         };
         table: {
             example: string;
+            asyncContent: string;
         };
         tableHeader: {
             example: string;

package/dist/producteca-ui-kit.es.js

@@ -19807,7 +19807,7 @@ const columns: TableColumn<MyRow>[] = [
 const tableBodyExample = `
 ## Uso del componente
 
-\`Table.Body\` renderiza las filas de datos. Lee las columnas del contexto provisto por \`Table\`. Cuando \`data\` está vacío muestra un \`EmptyState\` con \`emptyMessage\`.
+\`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ío dentro de la tabla.
 
 ### Ejemplo básico:
 
@@ -19817,13 +19817,15 @@ const tableBodyExample = `
 </Table>
 \`\`\`
 
-### Estado vacío personalizado:
+### Con estados asíncronos:
 
 \`\`\`tsx
 <Table columns={columns}>
+  <Table.Header />
   <Table.Body
-    data={[]}
-    emptyMessage="No encontramos resultados para tu búsqueda"
+    data={rows}
+    isLoading={isLoading}
+    empty={{ text: 'No hay datos', actionText: 'Cargar', onClick: loadData }}
   />
 </Table>
 \`\`\`
@@ -19857,6 +19859,28 @@ const columns: TableColumn<MyRow>[] = [
 ]
 \`\`\`
 `;
+const tableAsyncContentExample = `
+\`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ío **dentro** de la tabla, sin desmontar el \`Table.Header\`.
+
+El estado vacío se deriva de \`data\` (no hace falta pasar \`items\`). Cuando hay filas y no hay carga/error, se renderizan las filas normalmente.
+
+### Ejemplo:
+
+\`\`\`tsx
+<Table columns={columns}>
+  <Table.Header />
+  <Table.Body
+    data={rows}
+    isLoading={isLoading}
+    empty={{
+      text: 'No hay datos disponibles',
+      actionText: 'Cargar datos',
+      onClick: loadData,
+    }}
+  />
+</Table>
+\`\`\`
+`;
 const spinnerExample = `
 ## Uso del componente
 
@@ -20135,7 +20159,8 @@ const es$3 = {
       example: spinnerExample
     },
     table: {
-      example: tableExample
+      example: tableExample,
+      asyncContent: tableAsyncContentExample
     },
     tableHeader: {
       example: tableHeaderExample
@@ -77199,12 +77224,23 @@ const styles = {
   "header-row": "table-module_header-row_ry6Lv",
   "body-row": "table-module_body-row_OMOX0",
   "header-cell": "table-module_header-cell_0FEWz",
-  "body-cell": "table-module_body-cell_p4019"
+  "body-cell": "table-module_body-cell_p4019",
+  "body-async": "table-module_body-async_21Z7L"
 };
-const TableBody = ({ data, emptyMessage }) => {
+const TableBody = ({ data, isLoading, error: error2, empty, success: success2 }) => {
   const columns = useContext(TableContext);
-  if (data.length === 0) {
-    return /* @__PURE__ */ jsx$1("tbody", { children: /* @__PURE__ */ jsx$1("tr", { children: /* @__PURE__ */ jsx$1("td", { colSpan: columns.length, children: /* @__PURE__ */ jsx$1(EmptyState, { text: emptyMessage }) }) }) });
+  const showContent = !isLoading && !error2?.value && !success2?.value && data.length > 0;
+  if (!showContent) {
+    return /* @__PURE__ */ jsx$1("tbody", { children: /* @__PURE__ */ jsx$1("tr", { children: /* @__PURE__ */ jsx$1("td", { colSpan: columns.length, className: styles["body-async"], children: /* @__PURE__ */ jsx$1(
+      AsyncContent,
+      {
+        isLoading,
+        error: error2,
+        success: success2,
+        empty: { ...empty, items: data },
+        children: /* @__PURE__ */ jsx$1(Fragment$1, {})
+      }
+    ) }) }) });
   }
   return /* @__PURE__ */ jsx$1("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx$1("tr", { className: styles["body-row"], children: columns.map((col) => {
     const value = row[col.key];