@producteca/producteca-ui-kit 1.101.0 → 1.102.1

package/dist/components/inputs/checkboxInput/checkboxInput.examples.d.js

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

package/dist/components/inputs/checkboxInput/checkboxInput.examples.d.ts

@@ -0,0 +1,5 @@
+export declare const selectAllOptions: {
+    name: string;
+    label: string;
+}[];
+export declare const CheckboxWithSelectAll: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/checkboxInput/checkboxInput.types.d.ts

@@ -4,29 +4,30 @@ import { InputValue, Meta } from '../../../validators';
 
 export interface CheckboxItem {
     id?: string;
+    value?: any;
     name?: string;
     label?: string;
-    value?: any;
     checked?: boolean;
     disabled?: boolean;
     [key: string]: any;
 }
 export interface CheckboxInputProps {
     id?: string;
+    meta?: Meta;
     name: string;
-    items: CheckboxItem[];
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     title?: string;
-    type?: 'checkbox' | 'radio';
-    size?: 'sm' | 'md' | 'lg';
-    input?: ReduxFormInput;
-    meta?: Meta;
-    isValid?: (value: InputValue) => boolean;
     noErrors?: boolean;
     required?: boolean;
+    items: CheckboxItem[];
+    input?: ReduxFormInput;
+    size?: 'sm' | 'md' | 'lg';
+    type?: 'checkbox' | 'radio';
+    isValid?: (value: InputValue) => boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export type CheckboxInputSingleProps = Omit<CheckboxInputProps, 'items'> & {
     checked?: boolean;
     label: string;
     disabled?: boolean;
+    indeterminate?: boolean;
 };

package/dist/locales/description.d.ts

@@ -9,7 +9,8 @@ export declare const formFieldExample = "\n## Uso del componente\n\nEl component
 export declare const inputSx = "\n    Estilos inline aplicados al `<input>`. \u00DAtil para pisar los estilos del tama\u00F1o elegido,\n    por ejemplo la alineaci\u00F3n del texto.\n\n    ``` typescript\n        <FormField name=\"quantity\" size=\"xs\" sx={{ textAlign: 'right' }} />\n    ```\n";
 export declare const isValidInput = "\n    Funcion que recibe un valor de tipo inputValue y deberia devolver un valor booleano.\n    \n    #### Por ejemplo: (inputValue) => _.isNumber(inputValue)\n    \n    ``` typescript\n         type inputValue = string | number; \n    ```\n";
 export declare const checkboxInputGroupExample = "\n  #### Ejemplo de uso\n  \n  ``` typescript\n      <CheckboxInput\n        items={[\n          {\n            id: '1',\n            label: 'Opci\u00F3n 1'\n          },\n          {\n            id: '2',\n            label: 'Opci\u00F3n 2'\n          },\n          {\n            disabled: true,\n            id: '3',\n            label: 'Opci\u00F3n 3'\n          }\n        ]}\n        name=\"CheckboxList\"\n        onChange={(event) => handleChange(event.target.name, event.target.value)}\n        size=\"lg\"\n        title=\"Selecciona una opci\u00F3n\"\n        type=\"checkbox\"\n      />\n  ```\n";
-export declare const checkboxInputExample = "\n## Uso del componente\n\nEl componente `CheckboxInput` / `CheckboxInputGroup` permite mostrar uno o varios checkboxes o radios con label y soporte para Redux Form.\n\n### Ejemplo b\u00E1sico (un solo checkbox):\n\n```tsx\nconst [checked, setChecked] = React.useState(false)\n\n<CheckboxInput\n  name=\"Toggle\"\n  checked={checked}\n  onChange={(e) => setChecked(e.target.checked)}\n  label=\"Amazon\"\n  title=\"Selecciona qu\u00E9 sincronizar\"\n/>\n```\n\n### Ejemplo con grupo de opciones:\n\n```tsx\n<CheckboxInputGroup\n  name=\"options\"\n  title=\"Selecciona opciones\"\n  type=\"checkbox\"\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";
+export declare const checkboxInputExample = "\n## Uso del componente\n\nEl componente `CheckboxInput` / `CheckboxInputGroup` permite mostrar uno o varios checkboxes o radios con label y soporte para Redux Form.\n\n### Ejemplo b\u00E1sico (un solo checkbox):\n\n```tsx\nconst [checked, setChecked] = React.useState(false)\n\n<CheckboxInput\n  name=\"Toggle\"\n  checked={checked}\n  onChange={(e) => setChecked(e.target.checked)}\n  label=\"Amazon\"\n  title=\"Selecciona qu\u00E9 sincronizar\"\n/>\n```\n\n### Ejemplo con grupo de opciones:\n\n```tsx\n<CheckboxInputGroup\n  name=\"options\"\n  title=\"Selecciona opciones\"\n  type=\"checkbox\"\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### Estado indeterminado:\n\n`indeterminate` muestra un guion en lugar del check. Se usa en el checkbox de \"Seleccionar todo\" cuando s\u00F3lo algunas opciones est\u00E1n tildadas. Va junto con `checked={false}`: al hacer click el browser lo limpia y dispara `onChange` con `checked: true`. S\u00F3lo existe en `CheckboxInput`, no en `CheckboxInputGroup`. No aplica a `type=\"radio\"`.\n\n```tsx\n<CheckboxInput\n  name=\"selectAll\"\n  label=\"Seleccionar todo\"\n  checked={areAllSelected}\n  indeterminate={isPartiallySelected}\n  onChange={(event) => onSelectAll(event.target.checked)}\n/>\n```\n";
+export declare const checkboxInputIndeterminateExample = "\nCheckbox de \"Seleccionar todo\" que queda en `indeterminate` mientras s\u00F3lo algunas opciones est\u00E1n tildadas. Al hacer click tilda todas; con todas tildadas, las destilda.\n";
 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";

package/dist/locales/es.d.ts

@@ -133,6 +133,7 @@ declare const _default: {
             example: string;
             checkboxInputExample: string;
             checkboxInputGroupExample: string;
+            indeterminateExample: string;
         };
         switchInput: {
             example: string;