@producteca/producteca-ui-kit 1.69.0 → 1.71.0

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -4,7 +4,6 @@ interface BreadcrumbItem {
     text: string;
     href?: string;
     onClick?: () => void;
-    isActive?: boolean;
 }
 interface BreadcrumbProps {
     items: BreadcrumbItem[];

package/dist/components/chip/chip.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 
 type ChipVariant = 'primary' | 'success' | 'error' | 'secondary' | 'grey' | 'tab';
 type ChipSize = 'sm' | 'lg';
@@ -11,6 +11,7 @@ export interface ChipProps {
     variant?: ChipVariant;
     size?: ChipSize;
     isActive?: boolean;
+    onClick?: (event: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void;
 }
-export declare const Chip: ({ isActive, title, text, content, onRemove, disabled, variant, size }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Chip: ({ isActive, title, text, content, onRemove, onClick, disabled, variant, size }: ChipProps) => import("react/jsx-runtime").JSX.Element;
 export default Chip;

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

@@ -12,7 +12,7 @@ export declare const checkboxInputExample = "\n## Uso del componente\n\nEl compo
 export declare const searcherExample = "\n## Uso del componente\n\nEl componente `Searcher` permite buscar y seleccionar opciones con soporte para carga as\u00EDncrona (`loadOptions`). `onChange` se dispara al seleccionar una opci\u00F3n; `onInputChange` al escribir (\u00FAtil como onSearch).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Searcher\n  label=\"Buscar opci\u00F3n\"\n  name=\"searcher\"\n  placeholder=\"Escrib\u00ED para buscar...\"\n  options={[\n    { label: 'Opci\u00F3n 1', value: 1 },\n    { label: 'Opci\u00F3n 2', value: 2 },\n  ]}\n  onChange={(event) => onSelectOption(event.target.value)}\n  onInputChange={(event) => handleSearch(event.target.value)}\n/>\n```\n\n### Ejemplo con carga as\u00EDncrona:\n\n```tsx\n<Searcher\n  name=\"api-searcher\"\n  label=\"Buscar\"\n  options={[]}\n  loadOptions={(inputValue, callback) => {\n    fetchOptions(inputValue).then(callback)\n  }}\n  cacheOptions\n  defaultOptions\n  onChange={(event) => setSelected(event.target.value)}\n/>\n```\n";
 export declare const saveBarExample = "\n## Uso del componente\n\nEl componente `ActionBar` (SaveBar) muestra una barra de acciones con botones de guardar, cancelar y opcionalmente anterior. Soporta variantes `page`, `modal` y `fullPage`.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<ActionBar\n  saveProps={{\n    onSave: () => handleSave(),\n    label: 'Guardar',\n  }}\n  cancelProps={{\n    onCancel: () => handleCancel(),\n    label: 'Cancelar',\n  }}\n/>\n```\n\n### Con bot\u00F3n anterior:\n\n```tsx\n<ActionBar\n  saveProps={{\n    onSave: () => handleSave(),\n    label: 'Continuar',\n    variant: 'primary',\n  }}\n  cancelProps={{\n    onCancel: () => handleCancel(),\n    label: 'Cancelar',\n  }}\n  previousProps={{\n    onPrevious: () => handlePrevious(),\n    label: 'Anterior',\n  }}\n/>\n```\n";
 export declare const checkboxInputReduxFormExample = "\n### Ejemplo con Redux Form (Field):\n\n```tsx\n<Field\n  name=\"cancelSales\"\n  component={CheckboxInput}\n  props={{\n    name: 'cancelSales',\n    label: 'Cancelar ventas',\n    title: 'Opciones de sincronizaci\u00F3n',\n  }}\n/>\n```\n";
-export declare const breadcrumbItemFormat = "\n  ## Formato de BreadcrumbItem\n\n  El componente Breadcrumb acepta un array de objetos `BreadcrumbItem` con las siguientes propiedades:\n\n  ### Propiedades disponibles:\n\n  - **`text`** (string, requerido): El texto que se muestra para el item del breadcrumb\n  - **`onClick`** (function, opcional): Funci\u00F3n que se ejecuta al hacer click en el item\n  - **`isActive`** (boolean, opcional): Indica si el item est\u00E1 activo. Por defecto, el \u00FAltimo item se considera activo\n  - **`href`** (string, opcional): URL del enlace (actualmente no implementado en el renderizado)\n\n  ### Comportamiento:\n\n  - Los items con `onClick` se renderizan como botones clickeables\n  - Los items sin `onClick` se renderizan como texto est\u00E1tico\n  - El \u00FAltimo item siempre se considera activo (a menos que se especifique `isActive: true` en otro item)\n  - Cada item se separa autom\u00E1ticamente con el s\u00EDmbolo \">\"\n\n  ### Ejemplo de uso:\n\n  ```tsx\n  const breadcrumbItems = [\n    { text: 'Dashboard' },\n    { text: 'Productos', onClick: () => navigate('/products') },\n    { text: 'Detalles', isActive: true }\n  ]\n\n  <Breadcrumb items={breadcrumbItems} />\n  ```\n";
+export declare const breadcrumbItemFormat = "\n  ## Formato de BreadcrumbItem\n\n  El componente Breadcrumb acepta un array de objetos `BreadcrumbItem` con las siguientes propiedades:\n\n  ### Propiedades disponibles:\n\n  - **`text`** (string, requerido): El texto que se muestra para el item del breadcrumb\n  - **`onClick`** (function, opcional): Funci\u00F3n que se ejecuta al hacer click en el item\n  - **`href`** (string, opcional): URL del enlace (actualmente no implementado en el renderizado)\n\n  ### Comportamiento:\n\n  - Los items con `onClick` se renderizan como botones clickeables\n  - Los items sin `onClick` se renderizan como texto est\u00E1tico\n  - Cada item se separa autom\u00E1ticamente con el s\u00EDmbolo \">\"\n\n  ### Ejemplo de uso:\n\n  ```tsx\n  const breadcrumbItems = [\n    { text: 'Dashboard' },\n    { text: 'Productos', onClick: () => navigate('/products') },\n    { text: 'Detalles' }\n  ]\n\n  <Breadcrumb items={breadcrumbItems} />\n  ```\n";
 export declare const menuItems = "Lista de \u00EDtems que se mostrar\u00E1n en el men\u00FA.\n      \n**Tipo:** `MenuActionItem[]`\n\n```ts\ninterface MenuActionItem {\n  label: React.ReactNode\n  icon?: React.ReactElement\n  onClick?: () => void\n  selected?: boolean\n  disabled?: boolean\n}\n```\n";
 export declare const draggableListExample = "\n## Uso del componente\n\nEl componente `DraggableList` permite crear listas de items arrastrables con un componente personalizado para cada item.\n\n**`value`** acepta dos formatos:\n- **string[]**: `[\"valor1\", \"valor2\"]` \u2014 `onChange` devuelve un array de strings.\n- **{ id, value }[]**: `[{ id: 'item-1', value: 'valor1' }, ...]` \u2014 `onChange` devuelve el mismo formato de objetos.\n\n**`canRemove`**: funci\u00F3n opcional `(item: DraggableItem) => boolean`. Se eval\u00FAa por cada item; si devuelve `false`, el bot\u00F3n de eliminar se muestra deshabilitado para ese item.\n\n**`showRemoveAction`**: si es `false`, no se muestra el bot\u00F3n de eliminar en ninguna fila. Por defecto `true`.\n\n### Ejemplo con objetos (id + value):\n\n```tsx\n<DraggableList\n  label=\"Seleccionar un deposito\"\n  addLabel=\"+ Agregar\"\n  itemComponent={SelectField}\n  componentProps={{\n    placeholder: 'Seleccionar...',\n    options: [\n      { value: 'option1', label: 'Opci\u00F3n 1' },\n      { value: 'option2', label: 'Opci\u00F3n 2' },\n    ],\n    size: 'md',\n  }}\n  value={[\n    { id: 'item-1', value: 'option1' },\n    { id: 'item-2', value: 'option2' },\n  ]}\n  onChange={(event) => console.log('Items actualizados:', event.target.value)}\n/>\n```\n\n### Ejemplo con array de strings:\n\n```tsx\n<DraggableList\n  label=\"Nombres\"\n  addLabel=\"+ Agregar\"\n  itemComponent={FormField}\n  componentProps={{ placeholder: 'Texto', size: 'md', type: 'text' }}\n  value={['Uno', 'Dos']}\n  onChange={(event) => setValues(event.target.value)}\n/>\n```\n\n### Ejemplo con Redux Form (Field):\n\n```tsx\n<Field\n  name=\"warehouses\"\n  component={DraggableList}\n  itemComponent={FormField}\n  label=\"Dep\u00F3sitos\"\n  addLabel=\"+ Agregar\"\n  componentProps={{\n    placeholder: 'Nombre del dep\u00F3sito',\n    size: 'md',\n    type: 'text',\n  }}\n  value={[\n    { id: 'item-1', value: 'Texto 1' },\n    { id: 'item-2', value: 'Texto 2' },\n  ]}\n/>\n```\n";
 export declare const switchInputExample = "\n## Uso del componente\n\nEl componente `SwitchInput` / `SwitchInputGroup` muestra switches (toggle) individuales o en grupo. Soporta tama\u00F1os `sm`, `md`, `lg` e integraci\u00F3n con Redux Form.\n\n### Ejemplo b\u00E1sico (grupo):\n\n```tsx\n<SwitchInputGroup\n  name=\"options\"\n  title=\"Opciones\"\n  size=\"md\"\n  items={[\n    { id: '1', label: 'Opci\u00F3n 1' },\n    { id: '2', label: 'Opci\u00F3n 2' },\n    { id: '3', label: 'Opci\u00F3n 3', disabled: true },\n  ]}\n  onChange={(event) => handleChange(event.target.value)}\n/>\n```\n\n### Ejemplo (un solo switch):\n\n```tsx\nconst [checked, setChecked] = React.useState(false)\n\n<SwitchInput\n  name=\"toggle\"\n  checked={checked}\n  onChange={(e) => setChecked(e.target.checked)}\n  label=\"Activar\"\n  title=\"Configuraci\u00F3n\"\n/>\n```\n";
@@ -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;
@@ -372,6 +373,7 @@ declare const _default: {
         text: string;
         title: string;
         onRemove: string;
+        onClick: string;
         disabled: string;
         variant: string;
         size: string;

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

@@ -10083,6 +10083,7 @@ const tab$1 = "chip-module_tab_TQ-ke";
 const grey = "chip-module_grey_M9U8T";
 const active$3 = "chip-module_active_uJfiq";
 const disabled$8 = "chip-module_disabled_21ZO5";
+const clickable = "chip-module_clickable_M0dZ3";
 const success$1 = "chip-module_success_BJKfz";
 const error$3 = "chip-module_error_an-gm";
 const secondary = "chip-module_secondary_3aQ1S";
@@ -10098,26 +10099,44 @@ const styles$H = {
   grey,
   active: active$3,
   disabled: disabled$8,
+  clickable,
   success: success$1,
   error: error$3,
   secondary,
   primary,
   action: action$1
 };
-const ChipBase = ({ isActive, title: title2, text: text2, content: content2, onRemove = void 0, disabled: disabled2 = false, variant = "primary", size: size2 = "lg" }) => {
+const ChipBase = ({ isActive, title: title2, text: text2, content: content2, onRemove = void 0, onClick = void 0, disabled: disabled2 = false, variant = "primary", size: size2 = "lg" }) => {
   const canRemove = onRemove && !disabled2;
-  return /* @__PURE__ */ jsx$1(Grow, { in: !!text2 || !!title2 || !!content2, unmountOnExit: true, children: /* @__PURE__ */ jsxs("span", { className: clsx(styles$H.chip, styles$H[variant], styles$H[size2], { [styles$H.disabled]: disabled2, [styles$H.active]: isActive }), children: [
-    content2,
-    (!!title2 || !!text2) && /* @__PURE__ */ jsxs("span", { children: [
-      !!title2 && /* @__PURE__ */ jsxs("span", { className: styles$H.title, children: [
-        title2,
-        " ",
-        text2 && ": "
-      ] }),
-      !!text2 && /* @__PURE__ */ jsx$1("span", { className: styles$H.text, children: text2 })
-    ] }),
-    canRemove && /* @__PURE__ */ jsx$1(CustomIcon, { className: styles$H.action, size: "8", onClick: canRemove ? onRemove : void 0, color: getColor("grey", "700"), children: /* @__PURE__ */ jsx$1(CloseRoundedIcon, {}) })
-  ] }) });
+  const isClickable = !!onClick && !disabled2;
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onClick?.(event);
+    }
+  };
+  return /* @__PURE__ */ jsx$1(Grow, { in: !!text2 || !!title2 || !!content2, unmountOnExit: true, children: /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: clsx(styles$H.chip, styles$H[variant], styles$H[size2], { [styles$H.disabled]: disabled2, [styles$H.active]: isActive, [styles$H.clickable]: isClickable }),
+      role: isClickable ? "button" : void 0,
+      tabIndex: isClickable ? 0 : void 0,
+      onClick: isClickable ? onClick : void 0,
+      onKeyDown: isClickable ? handleKeyDown : void 0,
+      children: [
+        content2,
+        (!!title2 || !!text2) && /* @__PURE__ */ jsxs("span", { children: [
+          !!title2 && /* @__PURE__ */ jsxs("span", { className: styles$H.title, children: [
+            title2,
+            " ",
+            text2 && ": "
+          ] }),
+          !!text2 && /* @__PURE__ */ jsx$1("span", { className: styles$H.text, children: text2 })
+        ] }),
+        canRemove && /* @__PURE__ */ jsx$1(CustomIcon, { className: styles$H.action, size: "8", onClick: canRemove ? onRemove : void 0, color: getColor("grey", "700"), children: /* @__PURE__ */ jsx$1(CloseRoundedIcon, {}) })
+      ]
+    }
+  ) });
 };
 const Chip$1 = withDebugHandlers(ChipBase, "Chip");
 const defaultColor$c = getColor("grey", "500");
@@ -19086,14 +19105,12 @@ const breadcrumbItemFormat = `
 
   - **\`text\`** (string, requerido): El texto que se muestra para el item del breadcrumb
   - **\`onClick\`** (function, opcional): Función que se ejecuta al hacer click en el item
-  - **\`isActive\`** (boolean, opcional): Indica si el item está activo. Por defecto, el último item se considera activo
   - **\`href\`** (string, opcional): URL del enlace (actualmente no implementado en el renderizado)
 
   ### Comportamiento:
 
   - Los items con \`onClick\` se renderizan como botones clickeables
   - Los items sin \`onClick\` se renderizan como texto estático
-  - El último item siempre se considera activo (a menos que se especifique \`isActive: true\` en otro item)
   - Cada item se separa automáticamente con el símbolo ">"
 
   ### Ejemplo de uso:
@@ -19102,7 +19119,7 @@ const breadcrumbItemFormat = `
   const breadcrumbItems = [
     { text: 'Dashboard' },
     { text: 'Productos', onClick: () => navigate('/products') },
-    { text: 'Detalles', isActive: true }
+    { text: 'Detalles' }
   ]
 
   <Breadcrumb items={breadcrumbItems} />
@@ -19807,7 +19824,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 +19834,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 +19876,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 +20176,8 @@ const es$3 = {
       example: spinnerExample
     },
     table: {
-      example: tableExample
+      example: tableExample,
+      asyncContent: tableAsyncContentExample
     },
     tableHeader: {
       example: tableHeaderExample
@@ -20263,6 +20305,7 @@ const es$3 = {
     text: "Texto",
     title: "Título",
     onRemove: "Función que se ejecuta al hacer clic en el ícono de cerrar",
+    onClick: "Callback que se ejecuta al hacer clic en el chip. Cuando se define, el chip se vuelve interactivo (clickable, accesible por teclado)",
     disabled: "Deshabilita el chip y oculta el ícono de cerrar",
     variant: "Variante visual del chip que cambia el color de fondo (default, success, error, warning, info)",
     size: "Tamaño del chip (sm: pequeño, lg: grande, undefined: tamaño por defecto)"
@@ -30836,11 +30879,11 @@ const useUtilityClasses$W = (ownerState) => {
     size: size2,
     color: color2,
     onDelete,
-    clickable,
+    clickable: clickable2,
     variant
   } = ownerState;
   const slots = {
-    root: ["root", variant, disabled2 && "disabled", `size${capitalize$1(size2)}`, `color${capitalize$1(color2)}`, clickable && "clickable", onDelete && "deletable"],
+    root: ["root", variant, disabled2 && "disabled", `size${capitalize$1(size2)}`, `color${capitalize$1(color2)}`, clickable2 && "clickable", onDelete && "deletable"],
     label: ["label"],
     avatar: ["avatar"],
     icon: ["icon"],
@@ -30858,7 +30901,7 @@ const ChipRoot = styled("div", {
     } = props;
     const {
       color: color2,
-      clickable,
+      clickable: clickable2,
       onDelete,
       size: size2,
       variant
@@ -30869,7 +30912,7 @@ const ChipRoot = styled("div", {
       [`& .${chipClasses.icon}`]: styles2.icon
     }, {
       [`& .${chipClasses.deleteIcon}`]: styles2.deleteIcon
-    }, styles2.root, styles2[`size${capitalize$1(size2)}`], styles2[`color${capitalize$1(color2)}`], clickable && styles2.clickable, onDelete && styles2.deletable, styles2[variant]];
+    }, styles2.root, styles2[`size${capitalize$1(size2)}`], styles2[`color${capitalize$1(color2)}`], clickable2 && styles2.clickable, onDelete && styles2.deletable, styles2[variant]];
   }
 })(memoTheme(({
   theme
@@ -31207,8 +31250,8 @@ const Chip = /* @__PURE__ */ React.forwardRef(function Chip2(inProps, ref) {
       onKeyUp(event);
     }
   };
-  const clickable = clickableProp !== false && onClick ? true : clickableProp;
-  const component = clickable || onDelete ? ButtonBase : ComponentProp || "div";
+  const clickable2 = clickableProp !== false && onClick ? true : clickableProp;
+  const component = clickable2 || onDelete ? ButtonBase : ComponentProp || "div";
   const ownerState = {
     ...props,
     component,
@@ -31217,7 +31260,7 @@ const Chip = /* @__PURE__ */ React.forwardRef(function Chip2(inProps, ref) {
     color: color2,
     iconColor: /* @__PURE__ */ React.isValidElement(iconProp) ? iconProp.props.color || color2 : color2,
     onDelete: !!onDelete,
-    clickable,
+    clickable: clickable2,
     variant
   };
   const classes = useUtilityClasses$W(ownerState);
@@ -31275,7 +31318,7 @@ const Chip = /* @__PURE__ */ React.forwardRef(function Chip2(inProps, ref) {
     ref: handleRef,
     className: clsx(classes.root, className),
     additionalProps: {
-      disabled: clickable && disabled2 ? true : void 0,
+      disabled: clickable2 && disabled2 ? true : void 0,
       tabIndex: skipFocusWhenDisabled && disabled2 ? -1 : tabIndex,
       ...moreProps
     },
@@ -68221,38 +68264,19 @@ const AlertBase = ({
   );
 };
 const Alert = withDebugHandlers(AlertBase, "Alert");
-var baseKeys = _baseKeys, getTag = _getTag, isArrayLike$1 = isArrayLike_1, isString = isString_1, stringSize = _stringSize;
-var mapTag = "[object Map]", setTag = "[object Set]";
-function size(collection) {
-  if (collection == null) {
-    return 0;
-  }
-  if (isArrayLike$1(collection)) {
-    return isString(collection) ? stringSize(collection) : collection.length;
-  }
-  var tag = getTag(collection);
-  if (tag == mapTag || tag == setTag) {
-    return collection.size;
-  }
-  return baseKeys(collection).length;
-}
-var size_1 = size;
-const size$1 = /* @__PURE__ */ getDefaultExportFromCjs(size_1);
 const breadcrumb = "breadcrumb-module_breadcrumb_r-ILp";
 const styles$8 = {
   breadcrumb,
   "breadcrumb-item": "breadcrumb-module_breadcrumb-item_suTUF"
 };
 const BreadcrumbItemComponent = ({ item: item2, index: index2, items }) => {
-  const isLast = index2 === size$1(items) - 1;
   const text2 = `${item2.text} >`;
-  return item2.isActive || isLast ? /* @__PURE__ */ jsx$1(
-    Button$2,
+  return item2?.onClick || item2?.href ? /* @__PURE__ */ jsx$1(
+    Link,
     {
-      variant: "link",
-      size: "sm",
-      label: text2,
-      onClick: item2.onClick
+      href: `${item2?.href}`,
+      onClick: item2?.onClick,
+      children: text2
     }
   ) : /* @__PURE__ */ jsxs("div", { className: styles$8["breadcrumb-item"], children: [
     " ",
@@ -68509,11 +68533,11 @@ const WarningModalBase = ({
   }
 );
 const WarningModal = withDebugHandlers(WarningModalBase, "WarningModal");
-var baseIteratee$1 = _baseIteratee, isArrayLike = isArrayLike_1, keys = keys_1;
+var baseIteratee$1 = _baseIteratee, isArrayLike$1 = isArrayLike_1, keys = keys_1;
 function createFind$1(findIndexFunc) {
   return function(collection, predicate, fromIndex) {
     var iterable = Object(collection);
-    if (!isArrayLike(collection)) {
+    if (!isArrayLike$1(collection)) {
       var iteratee = baseIteratee$1(predicate);
       collection = keys(collection);
       predicate = function(key) {
@@ -77111,6 +77135,23 @@ const DraggableListBase = ({
   ] });
 };
 const DraggableList = withDebugHandlers(DraggableListBase, "DraggableList");
+var baseKeys = _baseKeys, getTag = _getTag, isArrayLike = isArrayLike_1, isString = isString_1, stringSize = _stringSize;
+var mapTag = "[object Map]", setTag = "[object Set]";
+function size(collection) {
+  if (collection == null) {
+    return 0;
+  }
+  if (isArrayLike(collection)) {
+    return isString(collection) ? stringSize(collection) : collection.length;
+  }
+  var tag = getTag(collection);
+  if (tag == mapTag || tag == setTag) {
+    return collection.size;
+  }
+  return baseKeys(collection).length;
+}
+var size_1 = size;
+const size$1 = /* @__PURE__ */ getDefaultExportFromCjs(size_1);
 const CheckRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
   d: "M9 16.17 5.53 12.7a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0z"
 }), "CheckRounded");
@@ -77199,12 +77240,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];