@producteca/producteca-ui-kit 1.52.4 → 1.53.0

package/dist/components/draggableList/draggableList.types.d.ts

@@ -11,10 +11,11 @@ export interface DraggableItem {
     value?: string;
     [key: string]: any;
 }
+export type DraggableListValue = DraggableItem[] | string[];
 export interface DraggableProps {
     addLabel?: string;
     label?: string;
-    value?: DraggableItem[];
+    value?: DraggableListValue;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     canRemove?: () => boolean;
     itemComponent?: ComponentType<DraggableComponentProps & Record<string, unknown>>;

package/dist/components/draggableList/index.d.ts

@@ -1,3 +1,3 @@
 export { DraggableList } from './draggableList';
 export { DraggableList as default } from './draggableList';
-export type { DraggableProps, DraggableItem, DraggableComponentProps } from './draggableList.types';
+export type { DraggableProps, DraggableItem, DraggableListValue, DraggableComponentProps } from './draggableList.types';

package/dist/locales/description.d.ts

@@ -14,7 +14,7 @@ export declare const saveBarExample = "\n## Uso del componente\n\nEl componente
 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 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### Ejemplo b\u00E1sico:\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 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 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### 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";
 export declare const linkExample = "\n## Uso del componente\n\nEl componente `Link` renderiza un enlace con estilos del design system. Soporta tama\u00F1os (`sm`, `md`, `lg`), decoraci\u00F3n (`none`, `underline`) y estado `disabled`.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Link href=\"/productos\" size=\"md\">\n  Ver productos\n</Link>\n```\n\n### Con underline y tama\u00F1o:\n\n```tsx\n<Link href=\"/historial\" decoration=\"underline\" size=\"lg\">\n  Historial de cambios\n</Link>\n```\n";
 export declare const alertExample = "\n## Uso del componente\n\nEl componente `Alert` muestra mensajes de feedback con variantes `success`, `error`, `warning` e `info`. Soporta \u00EDcono personalizado y link de acci\u00F3n.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Alert\n  variant=\"success\"\n  message=\"Operaci\u00F3n completada correctamente.\"\n/>\n```\n\n### Con link:\n\n```tsx\n<Alert\n  variant=\"info\"\n  message=\"Revis\u00E1 tu bandeja de entrada.\"\n  link={{\n    text: 'No volver a mostrar',\n    href: '#',\n  }}\n/>\n```\n";