@producteca/producteca-ui-kit 1.85.0 → 1.87.0

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/link/index.d.ts

@@ -1,2 +1,3 @@
-export { Link, type LinkProps, type LinkSize, type LinkDecoration, type LinkWeight } from './link';
+export { Link } from './link';
+export type { LinkProps, LinkSize, LinkDecoration, LinkVariant, LinkWeight } from './link.types';
 export { Link as default } from './link';

package/dist/components/link/link.d.ts

@@ -1,17 +1,6 @@
 import { default as React } from 'react';
+import { LinkProps } from './link.types';
 
-type LinkSize = 'sm' | 'md' | 'lg';
-type LinkDecoration = 'none' | 'underline';
-type LinkWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    size?: LinkSize;
-    decoration?: LinkDecoration;
-    weight?: LinkWeight;
-    disabled?: boolean;
-    href: string;
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
-    children: React.ReactNode;
-}
 export declare const Link: React.MemoExoticComponent<React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>>;
-export type { LinkSize, LinkDecoration, LinkWeight };
+export type { LinkProps, LinkSize, LinkDecoration, LinkVariant, LinkWeight } from './link.types';
 export default Link;

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

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

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

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+
+export type LinkSize = 'sm' | 'md' | 'lg';
+export type LinkDecoration = 'none' | 'underline';
+export type LinkVariant = 'default' | 'tooltip-link';
+export type LinkWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    size?: LinkSize;
+    decoration?: LinkDecoration;
+    variant?: LinkVariant;
+    weight?: LinkWeight;
+    disabled?: boolean;
+    href?: string;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    children: React.ReactNode;
+}

package/dist/components/menu/menuItem/menuItem.types.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { ButtonProps } from '../../button/button';
-import { BaseTooltipProps } from '../../tooltip/tooltip';
+import { BaseTooltipProps } from '../../tooltip/tooltip.types';
 
 export interface MenuItemTooltipProps extends Omit<BaseTooltipProps, 'trigger'> {
     content: string | React.ReactNode;

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/components/tooltip/index.d.ts

@@ -1,3 +1,3 @@
 export { OverflowChecker } from './overflowChecker';
 export { WithTooltip, WithOverflowTooltip } from './tooltip';
-export type { WithTooltipProps, CombinedTooltipProps, TooltipPlacement, BaseTooltipProps, TooltipTrigger, } from './tooltip';
+export type { WithTooltipProps, CombinedTooltipProps, TooltipPlacement, BaseTooltipProps, TooltipTrigger, } from './tooltip.types';

package/dist/components/tooltip/tooltip.d.ts

@@ -1,21 +1,5 @@
-import { default as React } from 'react';
+import { CombinedTooltipProps, WithTooltipProps } from './tooltip.types';
 
-export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
-export type TooltipTrigger = 'hover' | 'click';
-export interface BaseTooltipProps {
-    content?: string | React.ReactNode;
-    placement?: TooltipPlacement;
-    arrow?: boolean;
-    maxWidth?: number | string;
-    trigger?: TooltipTrigger;
-    shouldShowTooltip?: boolean;
-}
-export interface WithTooltipProps extends BaseTooltipProps {
-    children: React.ReactElement;
-    slotProps?: any;
-}
 export declare const WithTooltip: ({ children, content, placement, arrow, maxWidth, trigger, shouldShowTooltip, slotProps: customSlotProps, ...otherProps }: WithTooltipProps) => import("react/jsx-runtime").JSX.Element;
-export interface CombinedTooltipProps extends BaseTooltipProps {
-    children: React.ReactElement;
-}
 export declare const WithOverflowTooltip: ({ content, children, ...tooltipProps }: CombinedTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export type { TooltipPlacement, TooltipTrigger, BaseTooltipProps, WithTooltipProps, CombinedTooltipProps, } from './tooltip.types';

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

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

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

@@ -0,0 +1,9 @@
+import { BaseTooltipProps } from './index';
+
+export type TooltipStoryArgs = BaseTooltipProps;
+export declare const bulletListContent: import("react/jsx-runtime").JSX.Element;
+export declare const renderHoverLabelTooltip: (args: TooltipStoryArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const renderClickLabelTooltip: (args: TooltipStoryArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const renderOverflowLabelTooltip: (args: TooltipStoryArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const renderButtonTooltip: (args: TooltipStoryArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const renderDisabledButtonTooltip: (args: TooltipStoryArgs) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { TooltipProps } from '@mui/material/Tooltip';
+
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+export type TooltipTrigger = 'hover' | 'click';
+export interface BaseTooltipProps {
+    content?: string | React.ReactNode;
+    placement?: TooltipPlacement;
+    arrow?: boolean;
+    maxWidth?: number | string;
+    trigger?: TooltipTrigger;
+    shouldShowTooltip?: boolean;
+}
+export interface WithTooltipProps extends BaseTooltipProps {
+    children: React.ReactElement;
+    slotProps?: TooltipProps['slotProps'];
+}
+export interface CombinedTooltipProps extends BaseTooltipProps {
+    children: React.ReactElement;
+}

package/dist/locales/description.d.ts

@@ -17,7 +17,7 @@ export declare const breadcrumbItemFormat = "\n  ## Formato de BreadcrumbItem\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**`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 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`), variantes (`default`, `tooltip-link`) y estado `disabled`. El prop `href` es opcional: si se omite, el link se renderiza como una acci\u00F3n con `role=\"button\"` y activable por teclado.\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\n### Dentro de un tooltip (fondo oscuro, sin href):\n\n```tsx\n<Link variant=\"tooltip-link\" size=\"sm\" onClick={handleClick}>\n  Ver detalle\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";
 export declare const buttonExample = "\n## Uso del componente\n\nEl componente `Button` renderiza un bot\u00F3n con variantes (`primary`, `secondary`, `success`, `error`, `link`, `tooltip-link`), tama\u00F1os y soporte para iconos.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Button\n  variant=\"primary\"\n  size=\"lg\"\n  label=\"Continuar\"\n  onClick={() => handleSubmit()}\n/>\n```\n\n### Con \u00EDcono:\n\n```tsx\n<Button\n  variant=\"secondary\"\n  label=\"Agregar\"\n  rightAdornment={<Add />}\n  onClick={() => openModal()}\n/>\n```\n";
 export declare const cardExample = "\n## Uso del componente\n\nEl componente `Card` muestra una tarjeta con t\u00EDtulo, descripci\u00F3n, \u00EDcono opcional y acci\u00F3n al hacer click.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Card\n  title=\"T\u00EDtulo\"\n  description=\"Descripci\u00F3n de la tarjeta.\"\n  icon={<CustomIcon><ShareIcon /></CustomIcon>}\n  onClick={() => navigate('/detalle')}\n  isActive={false}\n/>\n```\n";
@@ -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.ts

@@ -34,6 +34,14 @@ declare const _default: {
         selectTime: string;
         selectYear: string;
     };
+    dropzone: {
+        clickHere: string;
+        dropFiles: string;
+        maxSize: string;
+        percentage: string;
+        removeFile: string;
+        uploadingFile: string;
+    };
     guide: string;
     maintenance: {
         description: string;

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;
         };
@@ -503,6 +509,9 @@ declare const _default: {
         large: string;
         withUnderline: string;
         exampleIntegrationName: string;
+        variant: string;
+        tooltipLink: string;
+        tooltipLinkDescription: string;
     };
     theme: {
         colorPalettes: string;
@@ -582,6 +591,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/pt-BR.d.ts

@@ -34,6 +34,14 @@ declare const _default: {
         selectTime: string;
         selectYear: string;
     };
+    dropzone: {
+        clickHere: string;
+        dropFiles: string;
+        maxSize: string;
+        percentage: string;
+        removeFile: string;
+        uploadingFile: string;
+    };
     guide: string;
     maintenance: {
         description: string;

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 {};