@producteca/producteca-ui-kit 1.54.0 → 1.56.0

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

@@ -17,7 +17,10 @@ export interface DraggableProps {
     label?: string;
     value?: DraggableListValue;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-    canRemove?: () => boolean;
+    /** Si se define, se evalúa por cada item para permitir o no eliminar. Recibe el item. */
+    canRemove?: (item: DraggableItem) => boolean;
+    /** Si es false, no se muestra el botón de eliminar. Por defecto true. */
+    showRemoveAction?: boolean;
     itemComponent?: ComponentType<DraggableComponentProps & Record<string, unknown>>;
     componentProps?: Record<string, unknown>;
     input?: ReduxFormInput;

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

@@ -6,10 +6,11 @@ interface DraggableRowProps {
     item: DraggableItem;
     isRemoving?: boolean;
     onRemove: (id: string) => void;
-    canRemove?: () => boolean;
+    canRemove?: (item: DraggableItem) => boolean;
+    showRemoveAction?: boolean;
     component?: DraggableProps['itemComponent'];
     componentProps?: Record<string, unknown>;
     onSelectValue: (id: string, value: string) => void;
 }
-export declare const DraggableRow: React.MemoExoticComponent<({ item, isAdding, onRemove, canRemove, component, isRemoving, onSelectValue, componentProps, }: DraggableRowProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const DraggableRow: React.MemoExoticComponent<({ item, isAdding, onRemove, canRemove, showRemoveAction, component, isRemoving, onSelectValue, componentProps, }: DraggableRowProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

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**`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 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";
 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";

package/dist/locales/es.d.ts

@@ -100,6 +100,8 @@ declare const _default: {
             addLabel: string;
             label: string;
             componentProps: string;
+            canRemove: string;
+            showRemoveAction: string;
         };
         formField: {
             example: string;

package/dist/playground/ComponentDemos.d.js

@@ -0,0 +1 @@
+export {};

package/dist/playground/ComponentDemos.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+
+type DemoComponent = () => React.ReactElement;
+export declare const DemoButton: DemoComponent;
+export declare const DemoLink: DemoComponent;
+export declare const DemoCard: DemoComponent;
+export declare const DemoAlert: DemoComponent;
+export declare const DemoChip: DemoComponent;
+export declare const DemoFormField: DemoComponent;
+export declare const DemoSelectField: DemoComponent;
+export declare const DemoCheckboxInput: DemoComponent;
+export declare const DemoSwitchInput: DemoComponent;
+export declare const DemoSearcher: DemoComponent;
+export declare const DemoDatePicker: DemoComponent;
+export declare const DemoDateRangePicker: DemoComponent;
+export declare const DemoTabs: DemoComponent;
+export declare const DemoBreadcrumb: DemoComponent;
+export declare const DemoImage: DemoComponent;
+export declare const DemoDropdown: DemoComponent;
+export declare const DemoTooltip: DemoComponent;
+export declare const DemoSpinner: DemoComponent;
+export declare const DemoProgressbar: DemoComponent;
+export declare const DemoEmptyState: DemoComponent;
+export declare const DemoActionBar: DemoComponent;
+export declare const DemoHeaderSection: DemoComponent;
+export declare const DemoCopyButton: DemoComponent;
+export declare const DemoConditionalOperator: DemoComponent;
+export declare const DemoLinkWithIcon: DemoComponent;
+export declare const DemoIconWithIdentifier: DemoComponent;
+export declare const DemoSidebar: DemoComponent;
+export declare const DemoDraggableList: DemoComponent;
+export declare const DemoWarningModal: DemoComponent;
+export declare const DemoMenuAction: DemoComponent;
+export declare const ComponentDemos: Record<string, DemoComponent>;
+export {};

package/dist/playground/PlaygroundSidebar.d.js

@@ -0,0 +1 @@
+export {};

package/dist/playground/PlaygroundSidebar.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+
+export declare const PlaygroundSidebar: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/playground/PlaygroundView.d.js

@@ -0,0 +1 @@
+export {};

package/dist/playground/PlaygroundView.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+
+export declare const PlaygroundView: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/playground/playgroundConfig.d.js

@@ -0,0 +1 @@
+export {};

package/dist/playground/playgroundConfig.d.ts

@@ -0,0 +1,10 @@
+export interface PlaygroundSection {
+    id: string;
+    title: string;
+    category: string;
+}
+export declare const PLAYGROUND_SECTIONS: PlaygroundSection[];
+export declare const _getCategoriesWithSections: () => {
+    category: string;
+    sections: PlaygroundSection[];
+}[];