@producteca/producteca-ui-kit 1.71.2 → 1.72.0

package/README.md

@@ -211,6 +211,6 @@ To bypass the linter in exceptional cases:
 
 ```bash
 git push --no-verify
-```
+```  
 
 > Only use `--no-verify` if absolutely necessary and with team consensus.

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/inputs/datePicker/datePickerUtils.d.ts

@@ -25,10 +25,11 @@ export declare const getPickerTypeFromFormat: (format?: string) => PickerType;
 export declare const getFinalFormat: (format?: string) => string;
 export declare const getPlaceholderByFormat: (format?: string, customPlaceholder?: string) => string;
 export declare const convertToDate: (val: InputValue, format: string) => Dayjs | null;
-export declare const getPickerProps: ({ currentValue, finalFormat, onChange, disabled, minDate, maxDate, placeholder, name, otherProps, onClear, onOpen, onClose, open, }: {
+export declare const getPickerProps: ({ currentValue, finalFormat, onChange, onDraftChange, disabled, minDate, maxDate, placeholder, name, otherProps, onClear, onOpen, onClose, open, }: {
     currentValue: InputValue;
     finalFormat: string;
     onChange: (date: Dayjs | null) => void;
+    onDraftChange: (date: Dayjs | null) => void;
     open: boolean;
     disabled: boolean;
     minDate?: InputValue;
@@ -42,6 +43,7 @@ export declare const getPickerProps: ({ currentValue, finalFormat, onChange, dis
 }) => {
     open: boolean;
     value: dayjs.Dayjs | null;
+    onChange: (date: Dayjs | null) => void;
     onAccept: (date: Dayjs | null) => void;
     onClose: (() => void) | undefined;
     disabled: boolean;

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;