@producteca/producteca-ui-kit 1.82.2 → 1.83.0

package/dist/components/inputs/formField/formField.d.ts

@@ -1,10 +1,6 @@
 import { default as React } from 'react';
-import { TextInputProps } from './textInput';
+import { FormFieldProps } from './formField.types';
 
-export interface FormFieldProps extends TextInputProps {
-    label?: string;
-    children?: React.ReactNode;
-    rightAdornment?: React.ReactNode;
-}
 export declare const FormField: React.FC<FormFieldProps>;
 export default FormField;
+export type { FormFieldProps };

package/dist/components/inputs/formField/formField.types.d.js

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

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

@@ -0,0 +1,34 @@
+import { default as React, ChangeEvent } from 'react';
+import { Meta, InputValue } from '../../../validators';
+import { ReduxFormInput } from '../../../hooks/useReduxFormField';
+
+export interface TextInputProps {
+    meta?: Meta;
+    max?: number;
+    min?: number;
+    name: string;
+    noErrors?: boolean;
+    value?: InputValue;
+    disabled?: boolean;
+    required?: boolean;
+    placeholder?: string;
+    isClearable?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'fullwidth';
+    sx?: React.CSSProperties;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    isValid?: (value: InputValue) => boolean;
+    type?: 'text' | 'number' | 'password' | 'date' | 'dateRange' | undefined;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    input?: ReduxFormInput;
+    inputRef?: React.RefObject<HTMLInputElement>;
+}
+export interface FormFieldProps extends TextInputProps {
+    label?: string;
+    children?: React.ReactNode;
+    rightAdornment?: React.ReactNode;
+}
+export interface VisibilityIconProps {
+    showPassword: boolean;
+    setShowPassword: React.Dispatch<React.SetStateAction<boolean>>;
+}

package/dist/components/inputs/formField/passwordInput.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
-import { FormFieldProps } from './formField';
+import { FormFieldProps } from './formField.types';
 
 export declare const PasswordInput: React.FC<FormFieldProps>;

package/dist/components/inputs/formField/textInput.d.ts

@@ -1,25 +1,5 @@
-import { default as React, ChangeEvent } from 'react';
-import { Meta, InputValue } from '../../../validators';
-import { ReduxFormInput } from '../../../hooks/useReduxFormField';
+import { default as React } from 'react';
+import { TextInputProps } from './formField.types';
 
-export interface TextInputProps {
-    meta?: Meta;
-    max?: number;
-    min?: number;
-    name: string;
-    noErrors?: boolean;
-    value?: InputValue;
-    disabled?: boolean;
-    required?: boolean;
-    placeholder?: string;
-    isClearable?: boolean;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'fullwidth';
-    leftIcon?: React.ReactNode;
-    rightIcon?: React.ReactNode;
-    isValid?: (value: InputValue) => boolean;
-    type?: 'text' | 'number' | 'password' | 'date' | 'dateRange' | undefined;
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-    input?: ReduxFormInput;
-    inputRef?: React.RefObject<HTMLInputElement>;
-}
 export declare const TextInput: React.FC<TextInputProps>;
+export type { TextInputProps };

package/dist/locales/description.d.ts

@@ -6,6 +6,7 @@ export declare const onChangeInput = "\n    Callback que se dispara cuando cambi
 export declare const isOptionDisabled = " \n    Funcion que recibe un valor de tipo SelectOption y deberia devolver un valor booleano\n    Si la opci\u00F3n tiene definida un tooltipMessage se va a mostrar al hacer hover.\n    \n#### Ejemplo\n  ``` typescript\n    const isOptionDisabled = (option: SelectOption) => option.value === 2;\n  ```\n    \n  #### Interfaz\n  ```typescript\n    interface SelectOption {\n      label: string;\n      value: string | number;\n      tooltipMessage?: string;\n      [key: string]: any;\n    }\n  ```\n";
 export declare const selectFieldDescription = "\n## Uso del componente\n\nEl componente `SelectField` permite seleccionar una o varias opciones de una lista con soporte para b\u00FAsqueda, opciones deshabilitadas y modificadores.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<SelectField\n  name=\"productId\"\n  label=\"Producto\"\n  placeholder=\"Seleccionar...\"\n  options={[\n    { label: 'Opci\u00F3n 1', value: 1 },\n    { label: 'Opci\u00F3n 2', value: 2 },\n    { label: 'Opci\u00F3n 3', value: 3, tooltipMessage: 'No disponible' },\n  ]}\n  onChange={(event) => handleChange(event.target.name, event.target.value)}\n  isSearchable\n  isClearable\n/>\n```\n\n### Ejemplo con m\u00FAltiple selecci\u00F3n y loader:\n\n```tsx\n<SelectField\n  name=\"productIds\"\n  label=\"Productos\"\n  isMultiple\n  options={options}\n  rightModifier={isLoading && <Spinner size=\"sm\" />}\n  isOptionDisabled={(option) => option.value === 2}\n  onChange={(event) => setValue(event.target.value)}\n/>\n```\n";
 export declare const formFieldExample = "\n## Uso del componente\n\nEl componente `FormField` es un input de formulario con label, mensajes de error y soporte para iconos y adornos.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<FormField\n  label=\"T\u00EDtulo\"\n  name=\"textInput\"\n  placeholder=\"Placeholder\"\n  size=\"md\"\n  type=\"text\"\n  onChange={(event) => handleChange(event.target.name, event.target.value)}\n/>\n```\n\n### Ejemplo con validaci\u00F3n personalizada:\n\n```tsx\n<FormField\n  label=\"Solo n\u00FAmeros\"\n  name=\"numberInput\"\n  type=\"number\"\n  isValid={(inputValue) => _.isNumber(inputValue)}\n  onChange={(event) => setValue(event.target.value)}\n/>\n```\n";
+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";

package/dist/locales/es.d.ts

@@ -125,6 +125,7 @@ declare const _default: {
         formField: {
             example: string;
             isValid: string;
+            sx: string;
         };
         checkboxInput: {
             example: string;