@producteca/producteca-ui-kit 1.70.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/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";

package/dist/locales/es.d.ts

@@ -373,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} />
@@ -20288,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)"
@@ -30861,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"],
@@ -30883,7 +30901,7 @@ const ChipRoot = styled("div", {
     } = props;
     const {
       color: color2,
-      clickable,
+      clickable: clickable2,
       onDelete,
       size: size2,
       variant
@@ -30894,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
@@ -31232,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,
@@ -31242,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);
@@ -31300,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
     },
@@ -68246,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: [
     " ",
@@ -68534,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) {
@@ -77136,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");