@producteca/producteca-ui-kit 1.84.0 → 1.86.0

package/README.md

@@ -120,6 +120,21 @@ Follow these steps to integrate and configure the `@producteca/producteca-ui-kit
      import { SelectField, CheckboxInput /* other components */ } from '@producteca/producteca-ui-kit'
      ```
 
+4. **Configure the locale (optional)**
+   The kit ships in Spanish by default. To render it in another language, call `configureLocale` **once, during your app bootstrap**, before rendering any component:
+
+   ```typescript
+   import { configureLocale } from '@producteca/producteca-ui-kit'
+
+   configureLocale('en')
+   ```
+
+   Supported locales: `'es'` (default), `'pt-BR'` and `'en'`.
+
+   This single call covers the kit's own strings, the day and month names of both date pickers, and the internal labels of the MUI pickers.
+
+   **The locale is read at render time and is not reactive.** Calling `configureLocale` after components have mounted will not update them — it is meant for bootstrap, not for a runtime language switcher. Keys that are missing from a non-Spanish bundle fall back to Spanish rather than showing the raw key.
+
 ## 📦 Publishing a New Version
 
 Package publishing is now handled automatically via a GitHub Action triggered on `push` to the `main` or `master` branches.

package/dist/components/dropzone/dropzone.d.js

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

package/dist/components/dropzone/dropzone.d.ts

@@ -0,0 +1,4 @@
+import { DropzoneProps } from './dropzone.types';
+
+export declare const Dropzone: ({ onDrop, onReject, accept, maxSize, maxFiles, label, error, isLoading, loadingText, disabled, name, }: DropzoneProps) => import("react/jsx-runtime").JSX.Element;
+export default Dropzone;

package/dist/components/dropzone/dropzone.examples.d.js

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

package/dist/components/dropzone/dropzone.examples.d.ts

@@ -0,0 +1,4 @@
+import { DropzoneProps } from './dropzone.types';
+
+export declare const renderControlledDropzone: (args: DropzoneProps) => import("react/jsx-runtime").JSX.Element;
+export declare const renderWithFileList: (args: DropzoneProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/dropzone/dropzone.types.d.js

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

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

@@ -0,0 +1,27 @@
+export type DropzoneFileType = 'PDF' | 'XML' | 'XLSX' | 'XLS' | 'CSV' | 'PNG' | 'JPEG' | 'IMAGE';
+export type DropRejectionReason = 'invalidType' | 'tooLarge' | 'tooManyFiles';
+export interface DropRejection {
+    file: File;
+    reason: DropRejectionReason;
+}
+export interface DropzoneProps {
+    onDrop: (files: File[]) => void;
+    onReject?: (rejections: DropRejection[]) => void;
+    accept?: DropzoneFileType[];
+    maxSize?: number;
+    maxFiles?: number;
+    label?: string;
+    error?: string;
+    isLoading?: boolean;
+    loadingText?: string;
+    disabled?: boolean;
+    name?: string;
+}
+export interface UseDropzoneOptions {
+    onDrop: (files: File[]) => void;
+    onReject?: (rejections: DropRejection[]) => void;
+    accept?: DropzoneFileType[];
+    maxSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+}

package/dist/components/dropzone/dropzone.utils.d.js

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

package/dist/components/dropzone/dropzone.utils.d.ts

@@ -0,0 +1,20 @@
+import { DropRejection, DropzoneFileType } from './dropzone.types';
+
+interface FileTypeDefinition {
+    mime: string;
+    extensions: string[];
+}
+export declare const fileTypes: Record<DropzoneFileType, FileTypeDefinition>;
+export declare const buildAcceptAttribute: (accept?: DropzoneFileType[]) => string | undefined;
+export declare const buildAcceptLabel: (accept?: DropzoneFileType[]) => string;
+export declare const isAcceptedType: (file: File, accept?: DropzoneFileType[]) => boolean;
+interface PartitionOptions {
+    accept?: DropzoneFileType[];
+    maxSize?: number;
+    maxFiles: number;
+}
+export declare const partitionFiles: (files: File[], { accept, maxSize, maxFiles }: PartitionOptions) => {
+    accepted: File[];
+    rejected: DropRejection[];
+};
+export {};

package/dist/components/dropzone/index.d.js

@@ -0,0 +1,2 @@
+export { Dropzone } from './dropzone';
+export { useDropzone } from './useDropzone';

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

@@ -0,0 +1,3 @@
+export { Dropzone } from './dropzone';
+export { useDropzone } from './useDropzone';
+export type { DropzoneProps, DropzoneFileType, DropRejection, DropRejectionReason, UseDropzoneOptions, } from './dropzone.types';

package/dist/components/dropzone/useDropzone.d.js

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

package/dist/components/dropzone/useDropzone.d.ts

@@ -0,0 +1,16 @@
+import { ChangeEvent, DragEvent } from 'react';
+import { UseDropzoneOptions } from './dropzone.types';
+
+export declare const useDropzone: ({ onDrop, onReject, accept, maxSize, maxFiles, disabled, }: UseDropzoneOptions) => {
+    isDragActive: boolean;
+    acceptAttribute: string | undefined;
+    dragHandlers: {
+        onDragEnter: (event: DragEvent<HTMLElement>) => void;
+        onDragOver: (event: DragEvent<HTMLElement>) => void;
+        onDragLeave: (event: DragEvent<HTMLElement>) => void;
+        onDrop: (event: DragEvent<HTMLElement>) => void;
+    };
+    handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    isMultiple: boolean;
+};
+export default useDropzone;

package/dist/components/inputs/datePicker/datePickerUtils.d.ts

@@ -20,6 +20,7 @@ interface ReadOnlyDateFieldProps {
     textFieldProps?: Record<string, unknown>;
 }
 export declare const ReadOnlyDateField: React.FC<ReadOnlyDateFieldProps>;
+export declare const formatDayOfWeek: (weekday: Dayjs) => string;
 export type PickerType = 'date' | 'dateTime' | 'time' | 'year';
 export declare const getPickerTypeFromFormat: (format?: string) => PickerType;
 export declare const getFinalFormat: (format?: string) => string;

package/dist/components/inputs/dateRangePicker/dateRangePickerUtils.d.ts

@@ -5,5 +5,4 @@ export type DisabledDays = Matcher | Matcher[] | undefined;
 export declare const fromInputValue: (inputValue: InputValue) => DateRange | undefined;
 export declare const getDisplayRange: (range: DateRange | undefined, format?: string) => string;
 export declare const convertToDate: (val: InputValue | undefined) => Date | undefined;
-export declare const CustomWeekday: (props: any) => import("react/jsx-runtime").JSX.Element;
 export declare const getDisabledDays: (disabled: boolean, minDate?: InputValue, maxDate?: InputValue) => DisabledDays;

package/dist/components/patterns/fileRow/fileRow.d.js

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

package/dist/components/patterns/fileRow/fileRow.d.ts

@@ -0,0 +1,4 @@
+import { FileRowProps } from './fileRow.types';
+
+export declare const FileRow: ({ name, progress, autoload, autoloadDuration, onAutoloadComplete, error, onRemove, showRemoveAction, }: FileRowProps) => import("react/jsx-runtime").JSX.Element;
+export default FileRow;

package/dist/components/patterns/fileRow/fileRow.types.d.js

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

package/dist/components/patterns/fileRow/fileRow.types.d.ts

@@ -0,0 +1,12 @@
+import { MouseEvent } from 'react';
+
+export interface FileRowProps {
+    name: string;
+    progress?: number;
+    autoload?: boolean;
+    autoloadDuration?: number;
+    onAutoloadComplete?: () => void;
+    error?: string;
+    onRemove?: (event: MouseEvent<HTMLButtonElement>) => void;
+    showRemoveAction?: boolean;
+}

package/dist/components/patterns/fileRow/index.d.js

@@ -0,0 +1,2 @@
+export { FileRow } from './fileRow';
+export { useAutoloadProgress } from './useAutoloadProgress';

package/dist/components/patterns/fileRow/index.d.ts

@@ -0,0 +1,3 @@
+export { FileRow } from './fileRow';
+export { useAutoloadProgress } from './useAutoloadProgress';
+export type { FileRowProps } from './fileRow.types';

package/dist/components/patterns/fileRow/useAutoloadProgress.d.js

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

package/dist/components/patterns/fileRow/useAutoloadProgress.d.ts

@@ -0,0 +1,7 @@
+interface UseAutoloadProgressOptions {
+    enabled: boolean;
+    duration?: number;
+    onComplete?: () => void;
+}
+export declare const useAutoloadProgress: ({ enabled, duration, onComplete, }: UseAutoloadProgressOptions) => number;
+export default useAutoloadProgress;

package/dist/components/patterns/index.d.js

@@ -9,4 +9,5 @@ export * from './conditionalOperator';
 export * from './helpArticleLink';
 export * from './maintenance/maintenance';
 export * from './pickChannelModal';
+export * from './fileRow';
 export * from './permissionSelector';

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

@@ -9,4 +9,5 @@ export * from './conditionalOperator';
 export * from './helpArticleLink';
 export * from './maintenance/maintenance';
 export * from './pickChannelModal';
+export * from './fileRow';
 export * from './permissionSelector';

package/dist/index.d.js

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './styles/colors';
-export * from './hooks/useReduxFormField';
+export * from './hooks/useReduxFormField';
+export { configureLocale, getActiveLocale } from './locales/localeConfig';

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export * from './components';
 export * from './styles/colors';
 export * from './hooks/useReduxFormField';
+export { configureLocale, getActiveLocale } from './locales/localeConfig';
+export type { UiKitLocale, LocaleEntry } from './locales/localeRegistry';

package/dist/locales/description.d.ts

@@ -59,3 +59,5 @@ export declare const spinnerExample = "\n## Uso del componente\n\nEl componente
 export declare const maintenanceExample = "\n## Uso del componente\n\nEl componente `Maintenance` muestra una vista de p\u00E1gina completa para indicar que el sistema est\u00E1 en mantenimiento. Acepta `title`, `description` y `subtitle` opcionales con valores por defecto en espa\u00F1ol.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Maintenance />\n```\n\n### Con contenido personalizado:\n\n```tsx\n<Maintenance\n  title=\"Estamos mejorando\"\n  description=\"Estamos haciendo algunos ajustes para brindarte una mejor experiencia.\"\n  subtitle=\"Volvemos en unos minutos.\"\n/>\n```\n";
 export declare const permissionOptionExample = "\n## Uso del componente\n\nEl componente `PermissionOption` muestra un permiso (Lectura, Edici\u00F3n o Sin acceso) con su \u00EDcono y label. Es clickeable/seleccionable: al definir `onClick` se vuelve interactivo (accesible por teclado). `isActive` lo muestra seleccionado (fondo celeste + texto/\u00EDcono azul) y `disabled` lo aten\u00FAa (opacidad 0.5) sin interacci\u00F3n.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<PermissionOption\n  permission=\"read\"\n  isActive\n  onClick={() => setPermission('read')}\n/>\n```\n";
 export declare const permissionSelectorExample = "\n## Uso del componente\n\nEl componente `PermissionSelector` muestra los tres permisos (Sin acceso, Lectura, Edici\u00F3n) en l\u00EDnea como un selector de opci\u00F3n \u00FAnica. Al elegir un permiso, el fondo celeste se desliza desde el permiso actual hacia el seleccionado (misma t\u00E9cnica que `Tabs`).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\nconst [permission, setPermission] = React.useState('noAccess')\n\n<PermissionSelector\n  value={permission}\n  onChange={setPermission}\n/>\n```\n";
+export declare const dropzoneExample = "\n## Uso del componente\n\n`Dropzone` es la zona de carga: soporta drag & drop nativo y click para abrir el explorador de archivos. Es **controlado**: no guarda los archivos, solo valida tipo/tama\u00F1o/cantidad y emite `onDrop` con los aceptados y `onReject` con los rechazados. El padre maneja la subida (progreso, errores del backend) y renderiza las filas con [FileRow](/docs/components-filerow--docs).\n\n### Estados\n\n- **Vac\u00EDo**: borde punteado, \u00EDcono de subida, instrucciones y el tama\u00F1o m\u00E1ximo permitido.\n- **Drag activo**: borde s\u00F3lido y fondo celeste mientras se arrastra un archivo encima.\n- **Cargando** (`isLoading`): spinner + texto, sin interacci\u00F3n.\n- **Error** (`error`): borde rojo y mensaje debajo de la zona.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\nconst [files, setFiles] = useState<UploadedFile[]>([])\n\nconst handleDrop = async (dropped: File[]) => {\n  const [file] = dropped\n  setFiles([{ id: file.name, name: file.name, progress: 0 }])\n  await upload(file, (progress) => setFiles([{ id: file.name, name: file.name, progress }]))\n}\n\nconst handleReject = ([{ reason }]: DropRejection[]) =>\n  setError(localize(\\`dropzone.\\${reason}\\`, { maxSize: 10 }))\n\nreturn (\n  <>\n    <Dropzone\n      accept={['PDF', 'XLSX']}\n      maxSize={10}\n      error={error}\n      onDrop={handleDrop}\n      onReject={handleReject}\n    />\n    {files.map(({ id, name, progress }) => (\n      <FileRow key={id} name={name} progress={progress} onRemove={() => remove(id)} />\n    ))}\n  </>\n)\n```\n";
+export declare const fileRowExample = "\n## Uso del componente\n\n`FileRow` es la tarjeta de un archivo ya adjuntado. Muestra el nombre, un bot\u00F3n de eliminar y, opcionalmente, el progreso de subida y un mensaje de error.\n\n- `progress` (0-100): al definirlo se muestra la barra lineal y el porcentaje. Omitilo para el estado \"subida terminada\".\n- `autoload`: anima la barra de 0 a 100 al montar, sin necesidad de eventos reales de subida. Al terminar, la barra desaparece y la fila queda en su estado final (nombre + eliminar). \u00DAtil cuando la subida es tan r\u00E1pida que no hay progreso que reportar, o para prototipar. Se ignora si se define `progress`, y avisa el final con `onAutoloadComplete`.\n- `error`: pinta el borde de la tarjeta en rojo y muestra el mensaje debajo.\n- `showRemoveAction={false}`: oculta el bot\u00F3n de eliminar.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<FileRow\n  name=\"Nombre_del_archivo.xlm\"\n  progress={75}\n  onRemove={() => removeFile(id)}\n/>\n```\n";

package/dist/locales/en.d.js

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

package/dist/locales/en.d.ts

@@ -0,0 +1,78 @@
+declare const _default: {
+    a11y: {
+        close: string;
+        dialog: string;
+        loading: string;
+        moreActions: string;
+        navigation: string;
+        progress: string;
+        remove: string;
+        reorder: string;
+        search: string;
+        toggleSidebar: string;
+    };
+    addPlus: string;
+    asyncContent: {
+        errorOccurred: string;
+        noResultsFound: string;
+        retry: string;
+        successCompleted: string;
+    };
+    cancel: string;
+    conditionalOperator: {
+        and: string;
+        or: string;
+    };
+    continue: string;
+    copyButton: {
+        copied: string;
+        copy: string;
+    };
+    datePicker: {
+        selectDate: string;
+        selectDateTime: string;
+        selectTime: string;
+        selectYear: string;
+    };
+    dropzone: {
+        clickHere: string;
+        dropFiles: string;
+        maxSize: string;
+        percentage: string;
+        removeFile: string;
+        uploadingFile: string;
+    };
+    guide: string;
+    maintenance: {
+        description: string;
+        subtitle: string;
+        title: string;
+    };
+    modalTitle: {
+        instructive: string;
+    };
+    noFoundOptions: string;
+    noResultsFound: string;
+    permissionSelector: {
+        ariaLabel: string;
+    };
+    permissions: {
+        edit: string;
+        noAccess: string;
+        read: string;
+    };
+    pickChannelModal: {
+        title: string;
+    };
+    previous: string;
+    reloadPage: string;
+    save: string;
+    selectPlaceholder: string;
+    selected: string;
+    selectedPlural: string;
+    warningModal: {
+        dontShowAgain: string;
+        warning: string;
+    };
+};
+export default _default;

package/dist/locales/es.d.ts

@@ -186,6 +186,12 @@ declare const _default: {
         permissionSelector: {
             example: string;
         };
+        dropzone: {
+            example: string;
+        };
+        fileRow: {
+            example: string;
+        };
         dropdown: {
             example: string;
         };
@@ -582,6 +588,40 @@ declare const _default: {
         descriptionDescription: string;
         subtitleDescription: string;
     };
+    dropzone: {
+        dropFiles: string;
+        clickHere: string;
+        maxSize: string;
+        uploadingFile: string;
+        percentage: string;
+        removeFile: string;
+        invalidType: string;
+        tooLarge: string;
+        tooManyFiles: string;
+        label: string;
+        fileName: string;
+        onDrop: string;
+        onReject: string;
+        accept: string;
+        maxSizeProp: string;
+        maxFiles: string;
+        labelProp: string;
+        errorProp: string;
+        isLoading: string;
+        loadingText: string;
+        disabled: string;
+        nameProp: string;
+        fileRow: {
+            name: string;
+            progress: string;
+            autoload: string;
+            autoloadDuration: string;
+            onAutoloadComplete: string;
+            error: string;
+            onRemove: string;
+            showRemoveAction: string;
+        };
+    };
     stepper: {
         done: string;
         cart: string;

package/dist/locales/localeConfig.d.js

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

package/dist/locales/localeConfig.d.ts

@@ -0,0 +1,5 @@
+import { LocaleEntry, UiKitLocale } from './localeRegistry';
+
+export declare const getActiveLocale: () => UiKitLocale;
+export declare const getActiveDateLocale: () => LocaleEntry;
+export declare const configureLocale: (locale: UiKitLocale) => void;

package/dist/locales/localeRegistry.d.js

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

package/dist/locales/localeRegistry.d.ts

@@ -0,0 +1,13 @@
+import { DayPickerLocale } from 'react-day-picker/locale';
+import { PickersInputLocaleText } from '@mui/x-date-pickers';
+
+export type UiKitLocale = 'es' | 'pt-BR' | 'en';
+export interface LocaleEntry {
+    i18n: string;
+    dayjs: string;
+    dateFns: DayPickerLocale;
+    mui: PickersInputLocaleText;
+}
+export declare const DEFAULT_LOCALE: UiKitLocale;
+export declare const LOCALE_REGISTRY: Record<UiKitLocale, LocaleEntry>;
+export declare const isRegisteredLocale: (locale: string) => locale is UiKitLocale;

package/dist/locales/pt-BR.d.js

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

package/dist/locales/pt-BR.d.ts

@@ -0,0 +1,78 @@
+declare const _default: {
+    a11y: {
+        close: string;
+        dialog: string;
+        loading: string;
+        moreActions: string;
+        navigation: string;
+        progress: string;
+        remove: string;
+        reorder: string;
+        search: string;
+        toggleSidebar: string;
+    };
+    addPlus: string;
+    asyncContent: {
+        errorOccurred: string;
+        noResultsFound: string;
+        retry: string;
+        successCompleted: string;
+    };
+    cancel: string;
+    conditionalOperator: {
+        and: string;
+        or: string;
+    };
+    continue: string;
+    copyButton: {
+        copied: string;
+        copy: string;
+    };
+    datePicker: {
+        selectDate: string;
+        selectDateTime: string;
+        selectTime: string;
+        selectYear: string;
+    };
+    dropzone: {
+        clickHere: string;
+        dropFiles: string;
+        maxSize: string;
+        percentage: string;
+        removeFile: string;
+        uploadingFile: string;
+    };
+    guide: string;
+    maintenance: {
+        description: string;
+        subtitle: string;
+        title: string;
+    };
+    modalTitle: {
+        instructive: string;
+    };
+    noFoundOptions: string;
+    noResultsFound: string;
+    permissionSelector: {
+        ariaLabel: string;
+    };
+    permissions: {
+        edit: string;
+        noAccess: string;
+        read: string;
+    };
+    pickChannelModal: {
+        title: string;
+    };
+    previous: string;
+    reloadPage: string;
+    save: string;
+    selectPlaceholder: string;
+    selected: string;
+    selectedPlural: string;
+    warningModal: {
+        dontShowAgain: string;
+        warning: string;
+    };
+};
+export default _default;

package/dist/locales/weekdayFormatter.d.js

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

package/dist/locales/weekdayFormatter.d.ts

@@ -0,0 +1 @@
+export declare const formatWeekdayInitial: (weekday: Date) => string;

package/dist/playground/ComponentDemos.d.ts

@@ -34,5 +34,6 @@ export declare const DemoWarningModal: DemoComponent;
 export declare const DemoMenuAction: DemoComponent;
 export declare const DemoTable: DemoComponent;
 export declare const DemoPermissionSelector: DemoComponent;
+export declare const DemoDropzone: DemoComponent;
 export declare const ComponentDemos: Record<string, DemoComponent>;
 export {};