@yunuenm23/react-file-uploader 0.1.0 → 0.1.2

package/README.md

@@ -2,6 +2,12 @@
 
 Reusable React file uploader component without Ant Design or Next.js dependencies.
 
+## Documentation
+
+- Live docs and playground: https://moncadayunuen.github.io/react_fileuploader/
+- GitHub repository: https://github.com/moncadayunuen/react_fileuploader
+- npm package: https://www.npmjs.com/package/@yunuenm23/react-file-uploader
+
 ## Install locally
 
 ```bash
@@ -17,6 +23,8 @@ npm run dev
 
 Open `http://127.0.0.1:5173/`.
 
+Public docs: https://moncadayunuen.github.io/react_fileuploader/
+
 ## Publish package
 
 ```bash
@@ -51,6 +59,7 @@ export function Example() {
       acceptFiles={["image/*", "video/*", "audio/*", "application/pdf"]}
       maxFiles={3}
       maxSizeFile={2}
+      imageCompression={{ enabled: true, mode: "lossless" }}
       multipleFiles
       theme={{
         accent: "#7c3aed",
@@ -70,6 +79,7 @@ export function Example() {
 
 - `acceptFiles`: MIME types or extensions, for example `["image/*", "video/*", "audio/*", ".pdf"]`.
 - `maxSizeFile`: max size in MB.
+- `imageCompression`: optimizes supported images before validation and selection.
 - `multipleFiles`: enables multi-file selection.
 - `maxFiles`: approved file limit.
 - `validateDimensions`: validates image width and height.
@@ -82,3 +92,5 @@ export function Example() {
 Images, videos, and audio files render compact clickable thumbnails that open a larger preview. Document-like files render as downloadable items. The package also exports `useFileUploader` if you want to build a fully custom UI with the same validation logic.
 
 You can theme the component with the `theme` prop or by overriding CSS variables such as `--file-uploader-accent`, `--file-uploader-surface`, and `--file-uploader-border`.
+
+`imageCompression={{ enabled: true, mode: "lossless" }}` optimizes SVG and PNG only when the optimized file is smaller. JPEG and WebP are kept unchanged in lossless mode. Use `mode: "balanced"` with a `quality` value only when you accept browser re-encoding.

package/dist/fileuploader.d.ts

@@ -1,2 +1,2 @@
 export { ReactFileUploader as default, ReactFileUploader, FileUploader } from './src';
-export type { FileUploaderHandle, FileUploaderItem, FileUploaderLabels, FileUploaderProps, } from './src';
+export type { FileUploaderHandle, FileUploaderItem, FileUploaderLabels, FileUploaderProps, ImageCompressionMode, ImageCompressionOptions, } from './src';

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),n=require("react"),z=["png","webp","jpeg","jpg","svg"],Z=["mp3","wav","ogg","mpeg","aac","flac"],G=["mp4","webm","ogg","mov","quicktime"],ee={audio:"MP3, WAV, OGG, AAC, FLAC",image:"PNG, JPG, JPEG, WEBP, SVG",video:"MP4, WEBM, OGG, MOV"},O=(e,s=" ")=>{const l=["Bytes","KB","MB","GB","TB"];if(e===0)return"n/a";const r=Math.floor(Math.log(e)/Math.log(1024));return`${r===0?e:(e/1024**r).toFixed(1)}${s}${l[r]}`},D=e=>{var r,o;const s=(r=e.name.split(".").pop())==null?void 0:r.toLowerCase();return((o=e.type.split("/")[1])==null?void 0:o.toLowerCase())||s||""},H=e=>e.map(s=>{const[l,r]=s.split("/");return r?r==="*"?ee[l]??`Cualquier ${l}`:r.toUpperCase():s.replace(".","").toUpperCase()}),N=e=>{const s=D(e);return e.type.startsWith("image/")||z.includes(s)},R=e=>{const s=D(e);return e.type.startsWith("audio/")||Z.includes(s)},T=e=>{const s=D(e);return e.type.startsWith("video/")||G.includes(s)},B=e=>N(e)||R(e)||T(e),W=e=>!B(e),q=(e,s)=>{if(s.length===0)return!0;const l=D(e);return s.some(r=>{const o=r.trim().toLowerCase();return o.startsWith(".")?o.slice(1)===l:o.endsWith("/*")?e.type.startsWith(o.replace("*","")):e.type.toLowerCase()===o||l===o})},ae=(e,s)=>new Promise(l=>{const r=URL.createObjectURL(e),o=new window.Image;o.onload=()=>{URL.revokeObjectURL(r),l(o.width<=s.width&&o.height<=s.height)},o.onerror=()=>{URL.revokeObjectURL(r),l(!1)},o.src=r}),P=async(e,s)=>{const l=[],r=s.maxSizeFile>0?s.maxSizeFile*1024*1024:0;r>0&&e.size>r&&l.push("file-size"),q(e,s.acceptFiles)||l.push("file-type"),s.validateDimensions&&N(e)&&(await ae(e,s.dimensions)||l.push("image-dimensions"));const o=l.length===0;return{id:`${e.name}-${e.size}-${e.lastModified}-${crypto.randomUUID()}`,file:e,status:o?"approved":"rejected",approve:o,reasons:l,previewUrl:B(e)?URL.createObjectURL(e):void 0}},S=e=>{e.forEach(s=>{s.previewUrl&&URL.revokeObjectURL(s.previewUrl)})},se=[],re={width:0,height:0},le=[],ie=e=>"dataTransfer"in e?Array.from(e.dataTransfer.files):Array.from(e.target.files??[]),J=({acceptFiles:e=se,dimensions:s=re,maxFiles:l=1,maxSizeFile:r=0,multipleFiles:o=!1,updateFiles:b=le,validateDimensions:g=!1,onFilesChange:m,onFilesSelected:v})=>{const x=n.useRef(null),U=n.useRef([]),[h,k]=n.useState([]),[y,L]=n.useState(!1),w=n.useMemo(()=>h.filter(d=>d.approve),[h]),C=n.useMemo(()=>H(e),[e]),u=o?w.length<l:h.length===0,j=n.useCallback(()=>{x.current&&(x.current.value="")},[]),c=n.useCallback(d=>{const f=d.filter(_=>_.approve).map(_=>_.file);if(m==null||m(d),o){v==null||v(f);return}f[0]&&(v==null||v(f[0]))},[o,m,v]),p=n.useCallback(d=>{k(f=>{const _=d(f),M=f.filter(E=>!_.some(Y=>Y.id===E.id));return S(M),U.current=_,_})},[]),t=n.useCallback(async d=>{d.preventDefault(),L(!1);const f=ie(d),_=await Promise.all(f.map(E=>P(E,{acceptFiles:e,dimensions:s,maxSizeFile:r,validateDimensions:g}))),M=o?[...h,..._.filter(E=>E.approve).slice(0,Math.max(l-w.length,0))]:_.slice(0,1);p(()=>M),c(M),j()},[e,w.length,j,s,c,h,l,r,o,p,g]),i=n.useCallback(d=>{const f=h.filter(_=>_.id!==d.id);p(()=>f),c(f),j()},[j,c,h,p]),A=n.useCallback(()=>{p(()=>[]),j(),m==null||m([])},[j,m,p]),I=n.useCallback(()=>{var d;(d=x.current)==null||d.click()},[]),K=n.useCallback(d=>{d.preventDefault(),L(!0)},[]),Q=n.useCallback(d=>{d.preventDefault(),L(!1)},[]),X=n.useCallback(d=>{if(u){t(d);return}d.preventDefault(),L(!1)},[u,t]);return n.useEffect(()=>{if(b.length===0)return;let d=!1;return Promise.all(b.map(f=>P(f,{acceptFiles:e,dimensions:s,maxSizeFile:r,validateDimensions:g}))).then(f=>{d||p(()=>f)}),()=>{d=!0}},[e,s,r,p,b,g]),n.useEffect(()=>{U.current=h},[h]),n.useEffect(()=>()=>{S(U.current)},[]),{acceptedFormats:C,approvedItems:w,canAddFiles:u,clear:A,handleFiles:t,inputRef:x,isDragging:y,items:h,onDragLeave:Q,onDragOver:K,onDrop:X,open:I,removeFile:i}},oe=[],te={width:0,height:0},ce=[],ne={idleTitle:a.jsxs(a.Fragment,{children:[a.jsx("span",{children:"Arrastra y suelta"})," tus archivos aqui"]}),idleHint:"Selecciona archivos desde tu equipo.",browseFile:"Buscar archivo",browseFiles:"Buscar archivos",limitReached:"Limite de archivos alcanzado",maxSize:e=>`Limite de ${e}MB por archivo.`,allowedFormats:e=>a.jsxs(a.Fragment,{children:["Archivos permitidos: ",a.jsx("span",{className:"file-uploader__format",children:e.join(", ")})]}),imageDimensions:(e,s)=>`Dimensiones de imagen: ${e}x${s}`,selectedCount:(e,s)=>`${e} / ${s} ${e===1?"archivo seleccionado":"archivos seleccionados"}`,removeFile:"Eliminar archivo",downloadFile:"Descargar archivo",previewFile:"Vista previa del archivo",closePreview:"Cerrar vista previa"},de=e=>{if(!e)return;const s={"--file-uploader-accent":e.accent,"--file-uploader-accent-soft":e.accentSoft,"--file-uploader-border":e.border,"--file-uploader-danger":e.danger,"--file-uploader-ink":e.ink,"--file-uploader-muted":e.muted,"--file-uploader-success":e.success,"--file-uploader-surface":e.surface,"--file-uploader-item-surface":e.itemSurface,"--file-uploader-modal-backdrop":e.modalBackdrop,"--file-uploader-modal-surface":e.modalSurface};return Object.keys(s).forEach(l=>{const r=l;s[r]===void 0&&delete s[r]}),s},ue=()=>a.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 640 512",children:a.jsx("path",{d:"M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9C96.1 197.4 96 194.7 96 192c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144Zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80Z"})}),pe=()=>a.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 384 512",children:a.jsx("path",{d:"M0 64C0 28.7 28.7 0 64 0h160v128c0 17.7 14.3 32 32 32h128v288c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64Zm384 64H256V0l128 128Z"})}),$=({approved:e})=>a.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 512 512",children:e?a.jsx("path",{d:"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512Zm113-303L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9Z"}):a.jsx("path",{d:"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512ZM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9Z"})}),fe=()=>a.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 512 512",children:a.jsx("path",{d:"M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32v242.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32ZM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64v-32c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64Z"})}),me=()=>a.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 384 512",children:a.jsx("path",{d:"M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80v352c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9l288-176c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39Z"})}),V=()=>a.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 512 512",children:a.jsx("path",{d:"M499.1 6.3c8.1 6 12.9 15.6 12.9 25.7v320c0 53-43 96-96 96s-96-43-96-96s43-96 96-96c11.2 0 22 1.9 32 5.5V111.9L192 160v224c0 53-43 96-96 96S0 437 0 384s43-96 96-96c11.2 0 22 1.9 32 5.5V128c0-15.4 10.9-28.6 26.1-31.5l320-60c9.9-1.9 20.1 .4 28.2 6.4Z"})}),ve=()=>a.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 384 512",children:a.jsx("path",{d:"M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6Z"})}),he=()=>a.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 448 512",children:a.jsx("path",{d:"m135.2 17.7L128 32H32C14.3 32 0 46.3 0 64s14.3 32 32 32h384c17.7 0 32-14.3 32-32s-14.3-32-32-32h-96l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7ZM416 128H32l21.2 339c1.6 25.3 22.6 45 47.9 45h245.8c25.3 0 46.3-19.7 47.9-45L416 128Z"})}),_e=e=>{const s=URL.createObjectURL(e),l=document.createElement("a");l.href=s,l.download=e.name||"archivo_descarga",document.body.appendChild(l),l.click(),document.body.removeChild(l),URL.revokeObjectURL(s)},F=n.forwardRef(({acceptFiles:e=oe,className:s="",dimensions:l=te,disabled:r=!1,fieldName:o="file-uploader",labels:b,maxFiles:g=1,maxSizeFile:m=0,multipleFiles:v=!1,onDeleteFiles:x,onFilesChange:U,onFilesSelected:h,showDownloadButton:k=!0,theme:y,updateFiles:L=ce,validateDimensions:w=!1},C)=>{const u={...ne,...b},j=de(y),[c,p]=n.useState(null),t=J({acceptFiles:e,dimensions:l,maxFiles:g,maxSizeFile:m,multipleFiles:v,onFilesChange:U,onFilesSelected:h,updateFiles:L,validateDimensions:w});return n.useImperativeHandle(C,()=>({clear:t.clear,open:t.open,files:()=>t.items}),[t.clear,t.items,t.open]),n.useEffect(()=>{if(!c)return;const i=A=>{A.key==="Escape"&&p(null)};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[c]),n.useEffect(()=>{c&&!t.items.some(i=>i.id===c.id)&&p(null)},[c,t.items]),a.jsxs("section",{className:`file-uploader ${s}`.trim(),style:j,children:[a.jsxs("div",{className:["file-uploader__dropzone",t.items.length>0?"file-uploader__dropzone--active":"",t.isDragging?"file-uploader__dropzone--dragging":"",r?"file-uploader__dropzone--disabled":""].filter(Boolean).join(" "),onDrop:r?void 0:t.onDrop,onDragOver:r?void 0:t.onDragOver,onDragLeave:r?void 0:t.onDragLeave,children:[a.jsx("div",{className:"file-uploader__info",children:t.canAddFiles?a.jsxs(a.Fragment,{children:[a.jsx("span",{className:"file-uploader__main-icon",children:a.jsx(ue,{})}),a.jsxs("div",{children:[a.jsx("p",{className:"file-uploader__title",children:u.idleTitle}),a.jsx("p",{className:"file-uploader__hint",children:u.idleHint}),m>0&&a.jsx("p",{children:u.maxSize(m)}),e.length>0&&a.jsx("p",{children:u.allowedFormats(t.acceptedFormats)}),w&&a.jsx("p",{children:u.imageDimensions(l.width,l.height)})]})]}):a.jsxs("div",{children:[a.jsx("span",{className:"file-uploader__success-mark",children:a.jsx($,{approved:!0})}),a.jsx("p",{className:"file-uploader__title",children:u.limitReached})]})}),a.jsx("input",{ref:t.inputRef,type:"file",id:o,name:o,className:"file-uploader__input",onChange:t.handleFiles,accept:e.join(","),multiple:v,disabled:r}),t.canAddFiles&&a.jsx("button",{type:"button",className:"file-uploader__browse",onClick:t.open,disabled:r,children:v?u.browseFiles:u.browseFile}),t.items.length>0&&a.jsx("div",{className:"file-uploader__list",children:t.items.map(i=>{const A=k&&i.approve&&W(i.file);return a.jsx(n.Fragment,{children:a.jsxs("div",{className:["file-uploader__item",i.approve?"file-uploader__item--success":"file-uploader__item--failed"].join(" "),children:[a.jsx("span",{className:"file-uploader__status",children:a.jsx($,{approved:i.approve})}),i.previewUrl&&a.jsxs("button",{type:"button",className:"file-uploader__preview-trigger",onClick:()=>p(i),"aria-label":`${u.previewFile}: ${i.file.name}`,title:u.previewFile,children:[N(i.file)&&a.jsx("img",{className:"file-uploader__thumbnail file-uploader__thumbnail--image",src:i.previewUrl,alt:""}),T(i.file)&&a.jsxs(a.Fragment,{children:[a.jsx("video",{className:"file-uploader__thumbnail file-uploader__thumbnail--video",src:i.previewUrl,preload:"metadata",muted:!0}),a.jsx("span",{className:"file-uploader__preview-badge",children:a.jsx(me,{})})]}),R(i.file)&&a.jsx("span",{className:"file-uploader__media-placeholder",children:a.jsx(V,{})})]}),!i.previewUrl&&a.jsx("span",{className:"file-uploader__file-icon",children:a.jsx(pe,{})}),a.jsxs("div",{className:"file-uploader__file-info",children:[a.jsx("p",{className:"file-uploader__name",children:i.file.name}),a.jsx("p",{className:"file-uploader__size",children:O(i.file.size)})]}),a.jsxs("div",{className:"file-uploader__actions",children:[A&&a.jsx("button",{type:"button",className:"file-uploader__icon-button",onClick:()=>_e(i.file),"aria-label":u.downloadFile,title:u.downloadFile,children:a.jsx(fe,{})}),a.jsx("button",{type:"button",className:"file-uploader__icon-button file-uploader__icon-button--danger",onClick:()=>{(c==null?void 0:c.id)===i.id&&p(null),t.removeFile(i),x==null||x(t.items.filter(I=>I.id!==i.id&&I.approve),i)},"aria-label":u.removeFile,title:u.removeFile,children:a.jsx(he,{})})]})]})},i.id)})}),v&&a.jsx("p",{className:"file-uploader__counter",children:u.selectedCount(t.approvedItems.length,g)})]}),(c==null?void 0:c.previewUrl)&&a.jsx("div",{className:"file-uploader__modal",role:"dialog","aria-modal":"true","aria-label":`${u.previewFile}: ${c.file.name}`,onMouseDown:i=>{i.currentTarget===i.target&&p(null)},children:a.jsxs("div",{className:"file-uploader__modal-panel",children:[a.jsxs("div",{className:"file-uploader__modal-header",children:[a.jsxs("div",{children:[a.jsx("p",{className:"file-uploader__modal-title",children:c.file.name}),a.jsx("p",{className:"file-uploader__modal-meta",children:O(c.file.size)})]}),a.jsx("button",{type:"button",className:"file-uploader__icon-button",onClick:()=>p(null),"aria-label":u.closePreview,title:u.closePreview,children:a.jsx(ve,{})})]}),a.jsxs("div",{className:"file-uploader__modal-content",children:[N(c.file)&&a.jsx("img",{className:"file-uploader__modal-image",src:c.previewUrl,alt:c.file.name}),T(c.file)&&a.jsx("video",{className:"file-uploader__modal-video",src:c.previewUrl,controls:!0,preload:"metadata"}),R(c.file)&&a.jsxs("div",{className:"file-uploader__modal-audio",children:[a.jsx(V,{}),a.jsx("audio",{src:c.previewUrl,controls:!0,preload:"metadata"})]})]})]})})]})});F.displayName="ReactFileUploader";const xe=F;exports.DEFAULT_AUDIO_FORMATS=Z;exports.DEFAULT_IMAGE_FORMATS=z;exports.DEFAULT_VIDEO_FORMATS=G;exports.FileUploader=xe;exports.ReactFileUploader=F;exports.bytesToSize=O;exports.default=F;exports.getFileExtension=D;exports.getReadableAcceptedFormats=H;exports.isAudioFile=R;exports.isDocumentFile=W;exports.isImageFile=N;exports.isPreviewableFile=B;exports.isVideoFile=T;exports.matchesAcceptedType=q;exports.useFileUploader=J;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),n=require("react"),Z=["png","webp","jpeg","jpg","svg"],H=["mp3","wav","ogg","mpeg","aac","flac"],q=["mp4","webm","ogg","mov","quicktime"],re={audio:"MP3, WAV, OGG, AAC, FLAC",image:"PNG, JPG, JPEG, WEBP, SVG",video:"MP4, WEBM, OGG, MOV"},B=(e,s=" ")=>{const l=["Bytes","KB","MB","GB","TB"];if(e===0)return"n/a";const r=Math.floor(Math.log(e)/Math.log(1024));return`${r===0?e:(e/1024**r).toFixed(1)}${s}${l[r]}`},F=e=>{var r,t;const s=(r=e.name.split(".").pop())==null?void 0:r.toLowerCase();return((t=e.type.split("/")[1])==null?void 0:t.toLowerCase())||s||""},G=e=>e.map(s=>{const[l,r]=s.split("/");return r?r==="*"?re[l]??`Cualquier ${l}`:r.toUpperCase():s.replace(".","").toUpperCase()}),A=e=>{const s=F(e);return e.type.startsWith("image/")||Z.includes(s)},R=e=>{const s=F(e);return e.type.startsWith("audio/")||H.includes(s)},T=e=>{const s=F(e);return e.type.startsWith("video/")||q.includes(s)},S=e=>A(e)||R(e)||T(e),W=e=>!S(e),le=e=>e===!0?{enabled:!0,mode:"lossless",quality:.92}:e?{enabled:(e==null?void 0:e.enabled)??!1,mode:(e==null?void 0:e.mode)??"lossless",quality:(e==null?void 0:e.quality)??.92}:{enabled:!1,mode:"lossless",quality:.92},J=(e,s)=>new File([e],s.name,{lastModified:s.lastModified,type:e.type||s.type}),te=async e=>{const l=(await e.text()).replace(/<!--[\s\S]*?-->/g,"").replace(/>\s+</g,"><").replace(/\s{2,}/g," ").trim(),r=new Blob([l],{type:e.type||"image/svg+xml"});return r.size<e.size?J(r,e):e},ie=(e,s,l)=>new Promise(r=>{const t=URL.createObjectURL(e),u=new window.Image;u.onload=()=>{const h=document.createElement("canvas");h.width=u.naturalWidth||u.width,h.height=u.naturalHeight||u.height;const m=h.getContext("2d");m==null||m.drawImage(u,0,0),URL.revokeObjectURL(t),h.toBlob(r,s,l)},u.onerror=()=>{URL.revokeObjectURL(t),r(null)},u.src=t}),K=async(e,s)=>{const l=le(s),r=F(e);if(!l.enabled||!A(e))return{file:e,originalFile:e,compressed:!1,mode:l.mode};if(r==="svg"||e.type==="image/svg+xml"){const m=await te(e);return{file:m,originalFile:e,compressed:m.size<e.size,mode:l.mode}}if(l.mode==="lossless"&&r!=="png")return{file:e,originalFile:e,compressed:!1,mode:l.mode};const t=l.mode==="lossless"?"image/png":e.type||"image/jpeg",u=await ie(e,t,l.mode==="balanced"?l.quality:void 0);return!u||u.size>=e.size?{file:e,originalFile:e,compressed:!1,mode:l.mode}:{file:J(u,e),originalFile:e,compressed:!0,mode:l.mode}},Q=(e,s)=>{if(s.length===0)return!0;const l=F(e);return s.some(r=>{const t=r.trim().toLowerCase();return t.startsWith(".")?t.slice(1)===l:t.endsWith("/*")?e.type.startsWith(t.replace("*","")):e.type.toLowerCase()===t||l===t})},oe=(e,s)=>new Promise(l=>{const r=URL.createObjectURL(e),t=new window.Image;t.onload=()=>{URL.revokeObjectURL(r),l(t.width<=s.width&&t.height<=s.height)},t.onerror=()=>{URL.revokeObjectURL(r),l(!1)},t.src=r}),P=async(e,s)=>{const l=await K(e,s.imageCompression),r=l.file,t=[],u=s.maxSizeFile>0?s.maxSizeFile*1024*1024:0;u>0&&r.size>u&&t.push("file-size"),Q(r,s.acceptFiles)||t.push("file-type"),s.validateDimensions&&A(r)&&(await oe(r,s.dimensions)||t.push("image-dimensions"));const h=t.length===0;return{id:`${r.name}-${r.size}-${r.lastModified}-${crypto.randomUUID()}`,file:r,originalFile:l.originalFile,status:h?"approved":"rejected",approve:h,reasons:t,previewUrl:S(r)?URL.createObjectURL(r):void 0,compression:{compressed:l.compressed,originalSize:l.originalFile.size,compressedSize:r.size,mode:l.mode}}},$=e=>{e.forEach(s=>{s.previewUrl&&URL.revokeObjectURL(s.previewUrl)})},ce=[],ne={width:0,height:0},de=[],ue=e=>"dataTransfer"in e?Array.from(e.dataTransfer.files):Array.from(e.target.files??[]),X=({acceptFiles:e=ce,dimensions:s=ne,imageCompression:l,maxFiles:r=1,maxSizeFile:t=0,multipleFiles:u=!1,updateFiles:h=de,validateDimensions:m=!1,onFilesChange:_,onFilesSelected:x})=>{const w=n.useRef(null),E=n.useRef([]),[g,z]=n.useState([]),[k,U]=n.useState(!1),L=n.useMemo(()=>g.filter(d=>d.approve),[g]),O=n.useMemo(()=>G(e),[e]),p=u?L.length<r:g.length===0,b=n.useCallback(()=>{w.current&&(w.current.value="")},[]),c=n.useCallback(d=>{const v=d.filter(j=>j.approve).map(j=>j.file);if(_==null||_(d),u){x==null||x(v);return}v[0]&&(x==null||x(v[0]))},[u,_,x]),f=n.useCallback(d=>{z(v=>{const j=d(v),D=v.filter(I=>!j.some(se=>se.id===I.id));return $(D),E.current=j,j})},[]),o=n.useCallback(async d=>{d.preventDefault(),U(!1);const v=ue(d),j=await Promise.all(v.map(I=>P(I,{acceptFiles:e,dimensions:s,imageCompression:l,maxSizeFile:t,validateDimensions:m}))),D=u?[...g,...j.filter(I=>I.approve).slice(0,Math.max(r-L.length,0))]:j.slice(0,1);f(()=>D),c(D),b()},[e,L.length,b,s,c,l,g,r,t,u,f,m]),i=n.useCallback(d=>{const v=g.filter(j=>j.id!==d.id);f(()=>v),c(v),b()},[b,c,g,f]),y=n.useCallback(()=>{f(()=>[]),b(),_==null||_([])},[b,_,f]),N=n.useCallback(()=>{var d;(d=w.current)==null||d.click()},[]),Y=n.useCallback(d=>{d.preventDefault(),U(!0)},[]),ee=n.useCallback(d=>{d.preventDefault(),U(!1)},[]),ae=n.useCallback(d=>{if(p){o(d);return}d.preventDefault(),U(!1)},[p,o]);return n.useEffect(()=>{if(h.length===0)return;let d=!1;return Promise.all(h.map(v=>P(v,{acceptFiles:e,dimensions:s,imageCompression:l,maxSizeFile:t,validateDimensions:m}))).then(v=>{d||f(()=>v)}),()=>{d=!0}},[e,s,l,t,f,h,m]),n.useEffect(()=>{E.current=g},[g]),n.useEffect(()=>()=>{$(E.current)},[]),{acceptedFormats:O,approvedItems:L,canAddFiles:p,clear:y,handleFiles:o,inputRef:w,isDragging:k,items:g,onDragLeave:ee,onDragOver:Y,onDrop:ae,open:N,removeFile:i}},pe=[],me={width:0,height:0},fe=[],ve={idleTitle:a.jsxs(a.Fragment,{children:[a.jsx("span",{children:"Arrastra y suelta"})," tus archivos aqui"]}),idleHint:"Selecciona archivos desde tu equipo.",browseFile:"Buscar archivo",browseFiles:"Buscar archivos",limitReached:"Limite de archivos alcanzado",maxSize:e=>`Limite de ${e}MB por archivo.`,allowedFormats:e=>a.jsxs(a.Fragment,{children:["Archivos permitidos: ",a.jsx("span",{className:"file-uploader__format",children:e.join(", ")})]}),imageDimensions:(e,s)=>`Dimensiones de imagen: ${e}x${s}`,selectedCount:(e,s)=>`${e} / ${s} ${e===1?"archivo seleccionado":"archivos seleccionados"}`,removeFile:"Eliminar archivo",downloadFile:"Descargar archivo",previewFile:"Vista previa del archivo",closePreview:"Cerrar vista previa"},he=e=>{if(!e)return;const s={"--file-uploader-accent":e.accent,"--file-uploader-accent-soft":e.accentSoft,"--file-uploader-border":e.border,"--file-uploader-danger":e.danger,"--file-uploader-ink":e.ink,"--file-uploader-muted":e.muted,"--file-uploader-success":e.success,"--file-uploader-surface":e.surface,"--file-uploader-item-surface":e.itemSurface,"--file-uploader-modal-backdrop":e.modalBackdrop,"--file-uploader-modal-surface":e.modalSurface};return Object.keys(s).forEach(l=>{const r=l;s[r]===void 0&&delete s[r]}),s},_e=()=>a.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 640 512",children:a.jsx("path",{d:"M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9C96.1 197.4 96 194.7 96 192c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144Zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80Z"})}),xe=()=>a.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 384 512",children:a.jsx("path",{d:"M0 64C0 28.7 28.7 0 64 0h160v128c0 17.7 14.3 32 32 32h128v288c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64Zm384 64H256V0l128 128Z"})}),V=({approved:e})=>a.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 512 512",children:e?a.jsx("path",{d:"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512Zm113-303L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9Z"}):a.jsx("path",{d:"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512ZM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9Z"})}),ge=()=>a.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 512 512",children:a.jsx("path",{d:"M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32v242.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32ZM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64v-32c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64Z"})}),je=()=>a.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 384 512",children:a.jsx("path",{d:"M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80v352c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9l288-176c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39Z"})}),C=()=>a.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 512 512",children:a.jsx("path",{d:"M499.1 6.3c8.1 6 12.9 15.6 12.9 25.7v320c0 53-43 96-96 96s-96-43-96-96s43-96 96-96c11.2 0 22 1.9 32 5.5V111.9L192 160v224c0 53-43 96-96 96S0 437 0 384s43-96 96-96c11.2 0 22 1.9 32 5.5V128c0-15.4 10.9-28.6 26.1-31.5l320-60c9.9-1.9 20.1 .4 28.2 6.4Z"})}),we=()=>a.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 384 512",children:a.jsx("path",{d:"M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6Z"})}),be=()=>a.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 448 512",children:a.jsx("path",{d:"m135.2 17.7L128 32H32C14.3 32 0 46.3 0 64s14.3 32 32 32h384c17.7 0 32-14.3 32-32s-14.3-32-32-32h-96l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7ZM416 128H32l21.2 339c1.6 25.3 22.6 45 47.9 45h245.8c25.3 0 46.3-19.7 47.9-45L416 128Z"})}),Le=e=>{const s=URL.createObjectURL(e),l=document.createElement("a");l.href=s,l.download=e.name||"archivo_descarga",document.body.appendChild(l),l.click(),document.body.removeChild(l),URL.revokeObjectURL(s)},M=n.forwardRef(({acceptFiles:e=pe,className:s="",dimensions:l=me,disabled:r=!1,fieldName:t="file-uploader",imageCompression:u,labels:h,maxFiles:m=1,maxSizeFile:_=0,multipleFiles:x=!1,onDeleteFiles:w,onFilesChange:E,onFilesSelected:g,showDownloadButton:z=!0,theme:k,updateFiles:U=fe,validateDimensions:L=!1},O)=>{const p={...ve,...h},b=he(k),[c,f]=n.useState(null),o=X({acceptFiles:e,dimensions:l,imageCompression:u,maxFiles:m,maxSizeFile:_,multipleFiles:x,onFilesChange:E,onFilesSelected:g,updateFiles:U,validateDimensions:L});return n.useImperativeHandle(O,()=>({clear:o.clear,open:o.open,files:()=>o.items}),[o.clear,o.items,o.open]),n.useEffect(()=>{if(!c)return;const i=y=>{y.key==="Escape"&&f(null)};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[c]),n.useEffect(()=>{c&&!o.items.some(i=>i.id===c.id)&&f(null)},[c,o.items]),a.jsxs("section",{className:`file-uploader ${s}`.trim(),style:b,children:[a.jsxs("div",{className:["file-uploader__dropzone",o.items.length>0?"file-uploader__dropzone--active":"",o.isDragging?"file-uploader__dropzone--dragging":"",r?"file-uploader__dropzone--disabled":""].filter(Boolean).join(" "),onDrop:r?void 0:o.onDrop,onDragOver:r?void 0:o.onDragOver,onDragLeave:r?void 0:o.onDragLeave,children:[a.jsx("div",{className:"file-uploader__info",children:o.canAddFiles?a.jsxs(a.Fragment,{children:[a.jsx("span",{className:"file-uploader__main-icon",children:a.jsx(_e,{})}),a.jsxs("div",{children:[a.jsx("p",{className:"file-uploader__title",children:p.idleTitle}),a.jsx("p",{className:"file-uploader__hint",children:p.idleHint}),_>0&&a.jsx("p",{children:p.maxSize(_)}),e.length>0&&a.jsx("p",{children:p.allowedFormats(o.acceptedFormats)}),L&&a.jsx("p",{children:p.imageDimensions(l.width,l.height)})]})]}):a.jsxs("div",{children:[a.jsx("span",{className:"file-uploader__success-mark",children:a.jsx(V,{approved:!0})}),a.jsx("p",{className:"file-uploader__title",children:p.limitReached})]})}),a.jsx("input",{ref:o.inputRef,type:"file",id:t,name:t,className:"file-uploader__input",onChange:o.handleFiles,accept:e.join(","),multiple:x,disabled:r}),o.canAddFiles&&a.jsx("button",{type:"button",className:"file-uploader__browse",onClick:o.open,disabled:r,children:x?p.browseFiles:p.browseFile}),o.items.length>0&&a.jsx("div",{className:"file-uploader__list",children:o.items.map(i=>{const y=z&&i.approve&&W(i.file);return a.jsx(n.Fragment,{children:a.jsxs("div",{className:["file-uploader__item",i.approve?"file-uploader__item--success":"file-uploader__item--failed"].join(" "),children:[a.jsx("span",{className:"file-uploader__status",children:a.jsx(V,{approved:i.approve})}),i.previewUrl&&a.jsxs("button",{type:"button",className:"file-uploader__preview-trigger",onClick:()=>f(i),"aria-label":`${p.previewFile}: ${i.file.name}`,title:p.previewFile,children:[A(i.file)&&a.jsx("img",{className:"file-uploader__thumbnail file-uploader__thumbnail--image",src:i.previewUrl,alt:""}),T(i.file)&&a.jsxs(a.Fragment,{children:[a.jsx("video",{className:"file-uploader__thumbnail file-uploader__thumbnail--video",src:i.previewUrl,preload:"metadata",muted:!0}),a.jsx("span",{className:"file-uploader__preview-badge",children:a.jsx(je,{})})]}),R(i.file)&&a.jsx("span",{className:"file-uploader__media-placeholder",children:a.jsx(C,{})})]}),!i.previewUrl&&a.jsx("span",{className:"file-uploader__file-icon",children:a.jsx(xe,{})}),a.jsxs("div",{className:"file-uploader__file-info",children:[a.jsx("p",{className:"file-uploader__name",children:i.file.name}),a.jsx("p",{className:"file-uploader__size",children:B(i.file.size)})]}),a.jsxs("div",{className:"file-uploader__actions",children:[y&&a.jsx("button",{type:"button",className:"file-uploader__icon-button",onClick:()=>Le(i.file),"aria-label":p.downloadFile,title:p.downloadFile,children:a.jsx(ge,{})}),a.jsx("button",{type:"button",className:"file-uploader__icon-button file-uploader__icon-button--danger",onClick:()=>{(c==null?void 0:c.id)===i.id&&f(null),o.removeFile(i),w==null||w(o.items.filter(N=>N.id!==i.id&&N.approve),i)},"aria-label":p.removeFile,title:p.removeFile,children:a.jsx(be,{})})]})]})},i.id)})}),x&&a.jsx("p",{className:"file-uploader__counter",children:p.selectedCount(o.approvedItems.length,m)})]}),(c==null?void 0:c.previewUrl)&&a.jsx("div",{className:"file-uploader__modal",role:"dialog","aria-modal":"true","aria-label":`${p.previewFile}: ${c.file.name}`,onMouseDown:i=>{i.currentTarget===i.target&&f(null)},children:a.jsxs("div",{className:"file-uploader__modal-panel",children:[a.jsxs("div",{className:"file-uploader__modal-header",children:[a.jsxs("div",{children:[a.jsx("p",{className:"file-uploader__modal-title",children:c.file.name}),a.jsx("p",{className:"file-uploader__modal-meta",children:B(c.file.size)})]}),a.jsx("button",{type:"button",className:"file-uploader__icon-button",onClick:()=>f(null),"aria-label":p.closePreview,title:p.closePreview,children:a.jsx(we,{})})]}),a.jsxs("div",{className:"file-uploader__modal-content",children:[A(c.file)&&a.jsx("img",{className:"file-uploader__modal-image",src:c.previewUrl,alt:c.file.name}),T(c.file)&&a.jsx("video",{className:"file-uploader__modal-video",src:c.previewUrl,controls:!0,preload:"metadata"}),R(c.file)&&a.jsxs("div",{className:"file-uploader__modal-audio",children:[a.jsx(C,{}),a.jsx("audio",{src:c.previewUrl,controls:!0,preload:"metadata"})]})]})]})})]})});M.displayName="ReactFileUploader";const Ue=M;exports.DEFAULT_AUDIO_FORMATS=H;exports.DEFAULT_IMAGE_FORMATS=Z;exports.DEFAULT_VIDEO_FORMATS=q;exports.FileUploader=Ue;exports.ReactFileUploader=M;exports.bytesToSize=B;exports.default=M;exports.getFileExtension=F;exports.getReadableAcceptedFormats=G;exports.isAudioFile=R;exports.isDocumentFile=W;exports.isImageFile=A;exports.isPreviewableFile=S;exports.isVideoFile=T;exports.matchesAcceptedType=Q;exports.optimizeImageFile=K;exports.useFileUploader=X;

package/dist/index.js

@@ -1,182 +1,262 @@
-import { jsxs as p, jsx as r, Fragment as T } from "react/jsx-runtime";
-import { useRef as j, useState as B, useMemo as F, useCallback as g, useEffect as M, forwardRef as Y, useImperativeHandle as ee, Fragment as re } from "react";
-const ae = ["png", "webp", "jpeg", "jpg", "svg"], le = ["mp3", "wav", "ogg", "mpeg", "aac", "flac"], oe = ["mp4", "webm", "ogg", "mov", "quicktime"], ie = {
+import { jsxs as p, jsx as r, Fragment as x } from "react/jsx-runtime";
+import { useRef as S, useState as $, useMemo as V, useCallback as b, useEffect as z, forwardRef as re, useImperativeHandle as ae, Fragment as te } from "react";
+const le = ["png", "webp", "jpeg", "jpg", "svg"], oe = ["mp3", "wav", "ogg", "mpeg", "aac", "flac"], ie = ["mp4", "webm", "ogg", "mov", "quicktime"], se = {
   audio: "MP3, WAV, OGG, AAC, FLAC",
   image: "PNG, JPG, JPEG, WEBP, SVG",
   video: "MP4, WEBM, OGG, MOV"
-}, z = (e, a = " ") => {
-  const o = ["Bytes", "KB", "MB", "GB", "TB"];
+}, Z = (e, a = " ") => {
+  const l = ["Bytes", "KB", "MB", "GB", "TB"];
   if (e === 0)
     return "n/a";
-  const l = Math.floor(Math.log(e) / Math.log(1024));
-  return `${l === 0 ? e : (e / 1024 ** l).toFixed(1)}${a}${o[l]}`;
-}, x = (e) => {
-  var l, t;
-  const a = (l = e.name.split(".").pop()) == null ? void 0 : l.toLowerCase();
-  return ((t = e.type.split("/")[1]) == null ? void 0 : t.toLowerCase()) || a || "";
-}, te = (e) => e.map((a) => {
-  const [o, l] = a.split("/");
-  return l ? l === "*" ? ie[o] ?? `Cualquier ${o}` : l.toUpperCase() : a.replace(".", "").toUpperCase();
-}), k = (e) => {
-  const a = x(e);
-  return e.type.startsWith("image/") || ae.includes(a);
+  const t = Math.floor(Math.log(e) / Math.log(1024));
+  return `${t === 0 ? e : (e / 1024 ** t).toFixed(1)}${a}${l[t]}`;
+}, F = (e) => {
+  var t, o;
+  const a = (t = e.name.split(".").pop()) == null ? void 0 : t.toLowerCase();
+  return ((o = e.type.split("/")[1]) == null ? void 0 : o.toLowerCase()) || a || "";
+}, ne = (e) => e.map((a) => {
+  const [l, t] = a.split("/");
+  return t ? t === "*" ? se[l] ?? `Cualquier ${l}` : t.toUpperCase() : a.replace(".", "").toUpperCase();
+}), R = (e) => {
+  const a = F(e);
+  return e.type.startsWith("image/") || le.includes(a);
+}, j = (e) => {
+  const a = F(e);
+  return e.type.startsWith("audio/") || oe.includes(a);
 }, P = (e) => {
-  const a = x(e);
-  return e.type.startsWith("audio/") || le.includes(a);
-}, V = (e) => {
-  const a = x(e);
-  return e.type.startsWith("video/") || oe.includes(a);
-}, W = (e) => k(e) || P(e) || V(e), ce = (e) => !W(e), ne = (e, a) => {
+  const a = F(e);
+  return e.type.startsWith("video/") || ie.includes(a);
+}, C = (e) => R(e) || j(e) || P(e), ce = (e) => !C(e), de = (e) => e === !0 ? {
+  enabled: !0,
+  mode: "lossless",
+  quality: 0.92
+} : e ? {
+  enabled: (e == null ? void 0 : e.enabled) ?? !1,
+  mode: (e == null ? void 0 : e.mode) ?? "lossless",
+  quality: (e == null ? void 0 : e.quality) ?? 0.92
+} : {
+  enabled: !1,
+  mode: "lossless",
+  quality: 0.92
+}, J = (e, a) => new File([e], a.name, {
+  lastModified: a.lastModified,
+  type: e.type || a.type
+}), ue = async (e) => {
+  const l = (await e.text()).replace(/<!--[\s\S]*?-->/g, "").replace(/>\s+</g, "><").replace(/\s{2,}/g, " ").trim(), t = new Blob([l], { type: e.type || "image/svg+xml" });
+  return t.size < e.size ? J(t, e) : e;
+}, pe = (e, a, l) => new Promise((t) => {
+  const o = URL.createObjectURL(e), d = new window.Image();
+  d.onload = () => {
+    const h = document.createElement("canvas");
+    h.width = d.naturalWidth || d.width, h.height = d.naturalHeight || d.height;
+    const m = h.getContext("2d");
+    m == null || m.drawImage(d, 0, 0), URL.revokeObjectURL(o), h.toBlob(t, a, l);
+  }, d.onerror = () => {
+    URL.revokeObjectURL(o), t(null);
+  }, d.src = o;
+}), me = async (e, a) => {
+  const l = de(a), t = F(e);
+  if (!l.enabled || !R(e))
+    return {
+      file: e,
+      originalFile: e,
+      compressed: !1,
+      mode: l.mode
+    };
+  if (t === "svg" || e.type === "image/svg+xml") {
+    const m = await ue(e);
+    return {
+      file: m,
+      originalFile: e,
+      compressed: m.size < e.size,
+      mode: l.mode
+    };
+  }
+  if (l.mode === "lossless" && t !== "png")
+    return {
+      file: e,
+      originalFile: e,
+      compressed: !1,
+      mode: l.mode
+    };
+  const o = l.mode === "lossless" ? "image/png" : e.type || "image/jpeg", d = await pe(
+    e,
+    o,
+    l.mode === "balanced" ? l.quality : void 0
+  );
+  return !d || d.size >= e.size ? {
+    file: e,
+    originalFile: e,
+    compressed: !1,
+    mode: l.mode
+  } : {
+    file: J(d, e),
+    originalFile: e,
+    compressed: !0,
+    mode: l.mode
+  };
+}, fe = (e, a) => {
   if (a.length === 0)
     return !0;
-  const o = x(e);
-  return a.some((l) => {
-    const t = l.trim().toLowerCase();
-    return t.startsWith(".") ? t.slice(1) === o : t.endsWith("/*") ? e.type.startsWith(t.replace("*", "")) : e.type.toLowerCase() === t || o === t;
+  const l = F(e);
+  return a.some((t) => {
+    const o = t.trim().toLowerCase();
+    return o.startsWith(".") ? o.slice(1) === l : o.endsWith("/*") ? e.type.startsWith(o.replace("*", "")) : e.type.toLowerCase() === o || l === o;
   });
-}, se = (e, a) => new Promise((o) => {
-  const l = URL.createObjectURL(e), t = new window.Image();
-  t.onload = () => {
-    URL.revokeObjectURL(l), o(t.width <= a.width && t.height <= a.height);
-  }, t.onerror = () => {
-    URL.revokeObjectURL(l), o(!1);
-  }, t.src = l;
-}), Z = async (e, a) => {
-  const o = [], l = a.maxSizeFile > 0 ? a.maxSizeFile * 1024 * 1024 : 0;
-  l > 0 && e.size > l && o.push("file-size"), ne(e, a.acceptFiles) || o.push("file-type"), a.validateDimensions && k(e) && (await se(e, a.dimensions) || o.push("image-dimensions"));
-  const t = o.length === 0;
+}, ve = (e, a) => new Promise((l) => {
+  const t = URL.createObjectURL(e), o = new window.Image();
+  o.onload = () => {
+    URL.revokeObjectURL(t), l(o.width <= a.width && o.height <= a.height);
+  }, o.onerror = () => {
+    URL.revokeObjectURL(t), l(!1);
+  }, o.src = t;
+}), H = async (e, a) => {
+  const l = await me(e, a.imageCompression), t = l.file, o = [], d = a.maxSizeFile > 0 ? a.maxSizeFile * 1024 * 1024 : 0;
+  d > 0 && t.size > d && o.push("file-size"), fe(t, a.acceptFiles) || o.push("file-type"), a.validateDimensions && R(t) && (await ve(t, a.dimensions) || o.push("image-dimensions"));
+  const h = o.length === 0;
   return {
-    id: `${e.name}-${e.size}-${e.lastModified}-${crypto.randomUUID()}`,
-    file: e,
-    status: t ? "approved" : "rejected",
-    approve: t,
+    id: `${t.name}-${t.size}-${t.lastModified}-${crypto.randomUUID()}`,
+    file: t,
+    originalFile: l.originalFile,
+    status: h ? "approved" : "rejected",
+    approve: h,
     reasons: o,
-    previewUrl: W(e) ? URL.createObjectURL(e) : void 0
+    previewUrl: C(t) ? URL.createObjectURL(t) : void 0,
+    compression: {
+      compressed: l.compressed,
+      originalSize: l.originalFile.size,
+      compressedSize: t.size,
+      mode: l.mode
+    }
   };
-}, S = (e) => {
+}, W = (e) => {
   e.forEach((a) => {
     a.previewUrl && URL.revokeObjectURL(a.previewUrl);
   });
-}, de = [], pe = { width: 0, height: 0 }, ue = [], me = (e) => "dataTransfer" in e ? Array.from(e.dataTransfer.files) : Array.from(e.target.files ?? []), fe = ({
-  acceptFiles: e = de,
-  dimensions: a = pe,
-  maxFiles: o = 1,
-  maxSizeFile: l = 0,
-  multipleFiles: t = !1,
-  updateFiles: N = ue,
-  validateDimensions: U = !1,
-  onFilesChange: f,
-  onFilesSelected: h
+}, he = [], _e = { width: 0, height: 0 }, ge = [], we = (e) => "dataTransfer" in e ? Array.from(e.dataTransfer.files) : Array.from(e.target.files ?? []), Le = ({
+  acceptFiles: e = he,
+  dimensions: a = _e,
+  imageCompression: l,
+  maxFiles: t = 1,
+  maxSizeFile: o = 0,
+  multipleFiles: d = !1,
+  updateFiles: h = ge,
+  validateDimensions: m = !1,
+  onFilesChange: _,
+  onFilesSelected: g
 }) => {
-  const w = j(null), E = j([]), [v, C] = B([]), [O, A] = B(!1), b = F(() => v.filter((s) => s.approve), [v]), $ = F(() => te(e), [e]), d = t ? b.length < o : v.length === 0, L = g(() => {
-    w.current && (w.current.value = "");
-  }, []), n = g(
-    (s) => {
-      const m = s.filter((_) => _.approve).map((_) => _.file);
-      if (f == null || f(s), t) {
-        h == null || h(m);
+  const U = S(null), E = S([]), [w, B] = $([]), [O, A] = $(!1), N = V(() => w.filter((c) => c.approve), [w]), k = V(() => ne(e), [e]), u = d ? N.length < t : w.length === 0, y = b(() => {
+    U.current && (U.current.value = "");
+  }, []), n = b(
+    (c) => {
+      const v = c.filter((L) => L.approve).map((L) => L.file);
+      if (_ == null || _(c), d) {
+        g == null || g(v);
         return;
       }
-      m[0] && (h == null || h(m[0]));
+      v[0] && (g == null || g(v[0]));
     },
-    [t, f, h]
-  ), u = g((s) => {
-    C((m) => {
-      const _ = s(m), R = m.filter((I) => !_.some((X) => X.id === I.id));
-      return S(R), E.current = _, _;
+    [d, _, g]
+  ), f = b((c) => {
+    B((v) => {
+      const L = c(v), T = v.filter((D) => !L.some((ee) => ee.id === D.id));
+      return W(T), E.current = L, L;
     });
-  }, []), c = g(
-    async (s) => {
-      s.preventDefault(), A(!1);
-      const m = me(s), _ = await Promise.all(
-        m.map(
-          (I) => Z(I, {
+  }, []), s = b(
+    async (c) => {
+      c.preventDefault(), A(!1);
+      const v = we(c), L = await Promise.all(
+        v.map(
+          (D) => H(D, {
             acceptFiles: e,
             dimensions: a,
-            maxSizeFile: l,
-            validateDimensions: U
+            imageCompression: l,
+            maxSizeFile: o,
+            validateDimensions: m
           })
         )
-      ), R = t ? [...v, ..._.filter((I) => I.approve).slice(0, Math.max(o - b.length, 0))] : _.slice(0, 1);
-      u(() => R), n(R), L();
+      ), T = d ? [...w, ...L.filter((D) => D.approve).slice(0, Math.max(t - N.length, 0))] : L.slice(0, 1);
+      f(() => T), n(T), y();
     },
     [
       e,
-      b.length,
-      L,
+      N.length,
+      y,
       a,
       n,
-      v,
-      o,
       l,
+      w,
       t,
-      u,
-      U
+      o,
+      d,
+      f,
+      m
     ]
-  ), i = g(
-    (s) => {
-      const m = v.filter((_) => _.id !== s.id);
-      u(() => m), n(m), L();
+  ), i = b(
+    (c) => {
+      const v = w.filter((L) => L.id !== c.id);
+      f(() => v), n(v), y();
     },
-    [L, n, v, u]
-  ), D = g(() => {
-    u(() => []), L(), f == null || f([]);
-  }, [L, f, u]), y = g(() => {
-    var s;
-    (s = w.current) == null || s.click();
-  }, []), J = g((s) => {
-    s.preventDefault(), A(!0);
-  }, []), K = g((s) => {
-    s.preventDefault(), A(!1);
-  }, []), Q = g(
-    (s) => {
-      if (d) {
-        c(s);
+    [y, n, w, f]
+  ), I = b(() => {
+    f(() => []), y(), _ == null || _([]);
+  }, [y, _, f]), M = b(() => {
+    var c;
+    (c = U.current) == null || c.click();
+  }, []), Q = b((c) => {
+    c.preventDefault(), A(!0);
+  }, []), X = b((c) => {
+    c.preventDefault(), A(!1);
+  }, []), Y = b(
+    (c) => {
+      if (u) {
+        s(c);
         return;
       }
-      s.preventDefault(), A(!1);
+      c.preventDefault(), A(!1);
     },
-    [d, c]
+    [u, s]
   );
-  return M(() => {
-    if (N.length === 0)
+  return z(() => {
+    if (h.length === 0)
       return;
-    let s = !1;
+    let c = !1;
     return Promise.all(
-      N.map(
-        (m) => Z(m, {
+      h.map(
+        (v) => H(v, {
           acceptFiles: e,
           dimensions: a,
-          maxSizeFile: l,
-          validateDimensions: U
+          imageCompression: l,
+          maxSizeFile: o,
+          validateDimensions: m
         })
       )
-    ).then((m) => {
-      s || u(() => m);
+    ).then((v) => {
+      c || f(() => v);
     }), () => {
-      s = !0;
+      c = !0;
     };
-  }, [e, a, l, u, N, U]), M(() => {
-    E.current = v;
-  }, [v]), M(() => () => {
-    S(E.current);
+  }, [e, a, l, o, f, h, m]), z(() => {
+    E.current = w;
+  }, [w]), z(() => () => {
+    W(E.current);
   }, []), {
-    acceptedFormats: $,
-    approvedItems: b,
-    canAddFiles: d,
-    clear: D,
-    handleFiles: c,
-    inputRef: w,
+    acceptedFormats: k,
+    approvedItems: N,
+    canAddFiles: u,
+    clear: I,
+    handleFiles: s,
+    inputRef: U,
     isDragging: O,
-    items: v,
-    onDragLeave: K,
-    onDragOver: J,
-    onDrop: Q,
-    open: y,
+    items: w,
+    onDragLeave: X,
+    onDragOver: Q,
+    onDrop: Y,
+    open: M,
     removeFile: i
   };
-}, he = [], ve = { width: 0, height: 0 }, _e = [], ge = {
-  idleTitle: /* @__PURE__ */ p(T, { children: [
+}, be = [], Ue = { width: 0, height: 0 }, ye = [], Ne = {
+  idleTitle: /* @__PURE__ */ p(x, { children: [
     /* @__PURE__ */ r("span", { children: "Arrastra y suelta" }),
     " tus archivos aqui"
   ] }),
@@ -185,7 +265,7 @@ const ae = ["png", "webp", "jpeg", "jpg", "svg"], le = ["mp3", "wav", "ogg", "mp
   browseFiles: "Buscar archivos",
   limitReached: "Limite de archivos alcanzado",
   maxSize: (e) => `Limite de ${e}MB por archivo.`,
-  allowedFormats: (e) => /* @__PURE__ */ p(T, { children: [
+  allowedFormats: (e) => /* @__PURE__ */ p(x, { children: [
     "Archivos permitidos: ",
     /* @__PURE__ */ r("span", { className: "file-uploader__format", children: e.join(", ") })
   ] }),
@@ -195,7 +275,7 @@ const ae = ["png", "webp", "jpeg", "jpg", "svg"], le = ["mp3", "wav", "ogg", "mp
   downloadFile: "Descargar archivo",
   previewFile: "Vista previa del archivo",
   closePreview: "Cerrar vista previa"
-}, we = (e) => {
+}, Ae = (e) => {
   if (!e)
     return;
   const a = {
@@ -211,114 +291,116 @@ const ae = ["png", "webp", "jpeg", "jpg", "svg"], le = ["mp3", "wav", "ogg", "mp
     "--file-uploader-modal-backdrop": e.modalBackdrop,
     "--file-uploader-modal-surface": e.modalSurface
   };
-  return Object.keys(a).forEach((o) => {
-    const l = o;
-    a[l] === void 0 && delete a[l];
+  return Object.keys(a).forEach((l) => {
+    const t = l;
+    a[t] === void 0 && delete a[t];
   }), a;
-}, Le = () => /* @__PURE__ */ r("svg", { "aria-hidden": "true", viewBox: "0 0 640 512", children: /* @__PURE__ */ r("path", { d: "M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9C96.1 197.4 96 194.7 96 192c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144Zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80Z" }) }), Ue = () => /* @__PURE__ */ r("svg", { "aria-hidden": "true", viewBox: "0 0 384 512", children: /* @__PURE__ */ r("path", { d: "M0 64C0 28.7 28.7 0 64 0h160v128c0 17.7 14.3 32 32 32h128v288c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64Zm384 64H256V0l128 128Z" }) }), H = ({ approved: e }) => /* @__PURE__ */ r("svg", { "aria-hidden": "true", viewBox: "0 0 512 512", children: e ? /* @__PURE__ */ r("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512Zm113-303L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9Z" }) : /* @__PURE__ */ r("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512ZM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9Z" }) }), be = () => /* @__PURE__ */ r("svg", { "aria-hidden": "true", viewBox: "0 0 512 512", children: /* @__PURE__ */ r("path", { d: "M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32v242.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32ZM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64v-32c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64Z" }) }), Ne = () => /* @__PURE__ */ r("svg", { "aria-hidden": "true", viewBox: "0 0 384 512", children: /* @__PURE__ */ r("path", { d: "M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80v352c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9l288-176c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39Z" }) }), G = () => /* @__PURE__ */ r("svg", { "aria-hidden": "true", viewBox: "0 0 512 512", children: /* @__PURE__ */ r("path", { d: "M499.1 6.3c8.1 6 12.9 15.6 12.9 25.7v320c0 53-43 96-96 96s-96-43-96-96s43-96 96-96c11.2 0 22 1.9 32 5.5V111.9L192 160v224c0 53-43 96-96 96S0 437 0 384s43-96 96-96c11.2 0 22 1.9 32 5.5V128c0-15.4 10.9-28.6 26.1-31.5l320-60c9.9-1.9 20.1 .4 28.2 6.4Z" }) }), Ae = () => /* @__PURE__ */ r("svg", { "aria-hidden": "true", viewBox: "0 0 384 512", children: /* @__PURE__ */ r("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6Z" }) }), Ee = () => /* @__PURE__ */ r("svg", { "aria-hidden": "true", viewBox: "0 0 448 512", children: /* @__PURE__ */ r("path", { d: "m135.2 17.7L128 32H32C14.3 32 0 46.3 0 64s14.3 32 32 32h384c17.7 0 32-14.3 32-32s-14.3-32-32-32h-96l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7ZM416 128H32l21.2 339c1.6 25.3 22.6 45 47.9 45h245.8c25.3 0 46.3-19.7 47.9-45L416 128Z" }) }), De = (e) => {
-  const a = URL.createObjectURL(e), o = document.createElement("a");
-  o.href = a, o.download = e.name || "archivo_descarga", document.body.appendChild(o), o.click(), document.body.removeChild(o), URL.revokeObjectURL(a);
-}, q = Y(
+}, Ee = () => /* @__PURE__ */ r("svg", { "aria-hidden": "true", viewBox: "0 0 640 512", children: /* @__PURE__ */ r("path", { d: "M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9C96.1 197.4 96 194.7 96 192c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144Zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80Z" }) }), Ie = () => /* @__PURE__ */ r("svg", { "aria-hidden": "true", viewBox: "0 0 384 512", children: /* @__PURE__ */ r("path", { d: "M0 64C0 28.7 28.7 0 64 0h160v128c0 17.7 14.3 32 32 32h128v288c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64Zm384 64H256V0l128 128Z" }) }), G = ({ approved: e }) => /* @__PURE__ */ r("svg", { "aria-hidden": "true", viewBox: "0 0 512 512", children: e ? /* @__PURE__ */ r("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512Zm113-303L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9Z" }) : /* @__PURE__ */ r("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512ZM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9Z" }) }), De = () => /* @__PURE__ */ r("svg", { "aria-hidden": "true", viewBox: "0 0 512 512", children: /* @__PURE__ */ r("path", { d: "M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32v242.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32ZM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64v-32c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64Z" }) }), ze = () => /* @__PURE__ */ r("svg", { "aria-hidden": "true", viewBox: "0 0 384 512", children: /* @__PURE__ */ r("path", { d: "M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80v352c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9l288-176c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39Z" }) }), q = () => /* @__PURE__ */ r("svg", { "aria-hidden": "true", viewBox: "0 0 512 512", children: /* @__PURE__ */ r("path", { d: "M499.1 6.3c8.1 6 12.9 15.6 12.9 25.7v320c0 53-43 96-96 96s-96-43-96-96s43-96 96-96c11.2 0 22 1.9 32 5.5V111.9L192 160v224c0 53-43 96-96 96S0 437 0 384s43-96 96-96c11.2 0 22 1.9 32 5.5V128c0-15.4 10.9-28.6 26.1-31.5l320-60c9.9-1.9 20.1 .4 28.2 6.4Z" }) }), Re = () => /* @__PURE__ */ r("svg", { "aria-hidden": "true", viewBox: "0 0 384 512", children: /* @__PURE__ */ r("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6Z" }) }), Fe = () => /* @__PURE__ */ r("svg", { "aria-hidden": "true", viewBox: "0 0 448 512", children: /* @__PURE__ */ r("path", { d: "m135.2 17.7L128 32H32C14.3 32 0 46.3 0 64s14.3 32 32 32h384c17.7 0 32-14.3 32-32s-14.3-32-32-32h-96l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7ZM416 128H32l21.2 339c1.6 25.3 22.6 45 47.9 45h245.8c25.3 0 46.3-19.7 47.9-45L416 128Z" }) }), Me = (e) => {
+  const a = URL.createObjectURL(e), l = document.createElement("a");
+  l.href = a, l.download = e.name || "archivo_descarga", document.body.appendChild(l), l.click(), document.body.removeChild(l), URL.revokeObjectURL(a);
+}, K = re(
   ({
-    acceptFiles: e = he,
+    acceptFiles: e = be,
     className: a = "",
-    dimensions: o = ve,
-    disabled: l = !1,
-    fieldName: t = "file-uploader",
-    labels: N,
-    maxFiles: U = 1,
-    maxSizeFile: f = 0,
-    multipleFiles: h = !1,
-    onDeleteFiles: w,
+    dimensions: l = Ue,
+    disabled: t = !1,
+    fieldName: o = "file-uploader",
+    imageCompression: d,
+    labels: h,
+    maxFiles: m = 1,
+    maxSizeFile: _ = 0,
+    multipleFiles: g = !1,
+    onDeleteFiles: U,
     onFilesChange: E,
-    onFilesSelected: v,
-    showDownloadButton: C = !0,
+    onFilesSelected: w,
+    showDownloadButton: B = !0,
     theme: O,
-    updateFiles: A = _e,
-    validateDimensions: b = !1
-  }, $) => {
-    const d = { ...ge, ...N }, L = we(O), [n, u] = B(null), c = fe({
+    updateFiles: A = ye,
+    validateDimensions: N = !1
+  }, k) => {
+    const u = { ...Ne, ...h }, y = Ae(O), [n, f] = $(null), s = Le({
       acceptFiles: e,
-      dimensions: o,
-      maxFiles: U,
-      maxSizeFile: f,
-      multipleFiles: h,
+      dimensions: l,
+      imageCompression: d,
+      maxFiles: m,
+      maxSizeFile: _,
+      multipleFiles: g,
       onFilesChange: E,
-      onFilesSelected: v,
+      onFilesSelected: w,
       updateFiles: A,
-      validateDimensions: b
+      validateDimensions: N
     });
-    return ee(
-      $,
+    return ae(
+      k,
       () => ({
-        clear: c.clear,
-        open: c.open,
-        files: () => c.items
+        clear: s.clear,
+        open: s.open,
+        files: () => s.items
       }),
-      [c.clear, c.items, c.open]
-    ), M(() => {
+      [s.clear, s.items, s.open]
+    ), z(() => {
       if (!n)
         return;
-      const i = (D) => {
-        D.key === "Escape" && u(null);
+      const i = (I) => {
+        I.key === "Escape" && f(null);
       };
       return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
-    }, [n]), M(() => {
-      n && !c.items.some((i) => i.id === n.id) && u(null);
-    }, [n, c.items]), /* @__PURE__ */ p("section", { className: `file-uploader ${a}`.trim(), style: L, children: [
+    }, [n]), z(() => {
+      n && !s.items.some((i) => i.id === n.id) && f(null);
+    }, [n, s.items]), /* @__PURE__ */ p("section", { className: `file-uploader ${a}`.trim(), style: y, children: [
       /* @__PURE__ */ p(
         "div",
         {
           className: [
             "file-uploader__dropzone",
-            c.items.length > 0 ? "file-uploader__dropzone--active" : "",
-            c.isDragging ? "file-uploader__dropzone--dragging" : "",
-            l ? "file-uploader__dropzone--disabled" : ""
+            s.items.length > 0 ? "file-uploader__dropzone--active" : "",
+            s.isDragging ? "file-uploader__dropzone--dragging" : "",
+            t ? "file-uploader__dropzone--disabled" : ""
           ].filter(Boolean).join(" "),
-          onDrop: l ? void 0 : c.onDrop,
-          onDragOver: l ? void 0 : c.onDragOver,
-          onDragLeave: l ? void 0 : c.onDragLeave,
+          onDrop: t ? void 0 : s.onDrop,
+          onDragOver: t ? void 0 : s.onDragOver,
+          onDragLeave: t ? void 0 : s.onDragLeave,
           children: [
-            /* @__PURE__ */ r("div", { className: "file-uploader__info", children: c.canAddFiles ? /* @__PURE__ */ p(T, { children: [
-              /* @__PURE__ */ r("span", { className: "file-uploader__main-icon", children: /* @__PURE__ */ r(Le, {}) }),
+            /* @__PURE__ */ r("div", { className: "file-uploader__info", children: s.canAddFiles ? /* @__PURE__ */ p(x, { children: [
+              /* @__PURE__ */ r("span", { className: "file-uploader__main-icon", children: /* @__PURE__ */ r(Ee, {}) }),
               /* @__PURE__ */ p("div", { children: [
-                /* @__PURE__ */ r("p", { className: "file-uploader__title", children: d.idleTitle }),
-                /* @__PURE__ */ r("p", { className: "file-uploader__hint", children: d.idleHint }),
-                f > 0 && /* @__PURE__ */ r("p", { children: d.maxSize(f) }),
-                e.length > 0 && /* @__PURE__ */ r("p", { children: d.allowedFormats(c.acceptedFormats) }),
-                b && /* @__PURE__ */ r("p", { children: d.imageDimensions(o.width, o.height) })
+                /* @__PURE__ */ r("p", { className: "file-uploader__title", children: u.idleTitle }),
+                /* @__PURE__ */ r("p", { className: "file-uploader__hint", children: u.idleHint }),
+                _ > 0 && /* @__PURE__ */ r("p", { children: u.maxSize(_) }),
+                e.length > 0 && /* @__PURE__ */ r("p", { children: u.allowedFormats(s.acceptedFormats) }),
+                N && /* @__PURE__ */ r("p", { children: u.imageDimensions(l.width, l.height) })
               ] })
             ] }) : /* @__PURE__ */ p("div", { children: [
-              /* @__PURE__ */ r("span", { className: "file-uploader__success-mark", children: /* @__PURE__ */ r(H, { approved: !0 }) }),
-              /* @__PURE__ */ r("p", { className: "file-uploader__title", children: d.limitReached })
+              /* @__PURE__ */ r("span", { className: "file-uploader__success-mark", children: /* @__PURE__ */ r(G, { approved: !0 }) }),
+              /* @__PURE__ */ r("p", { className: "file-uploader__title", children: u.limitReached })
             ] }) }),
             /* @__PURE__ */ r(
               "input",
               {
-                ref: c.inputRef,
+                ref: s.inputRef,
                 type: "file",
-                id: t,
-                name: t,
+                id: o,
+                name: o,
                 className: "file-uploader__input",
-                onChange: c.handleFiles,
+                onChange: s.handleFiles,
                 accept: e.join(","),
-                multiple: h,
-                disabled: l
+                multiple: g,
+                disabled: t
               }
             ),
-            c.canAddFiles && /* @__PURE__ */ r(
+            s.canAddFiles && /* @__PURE__ */ r(
               "button",
               {
                 type: "button",
                 className: "file-uploader__browse",
-                onClick: c.open,
-                disabled: l,
-                children: h ? d.browseFiles : d.browseFile
+                onClick: s.open,
+                disabled: t,
+                children: g ? u.browseFiles : u.browseFile
               }
             ),
-            c.items.length > 0 && /* @__PURE__ */ r("div", { className: "file-uploader__list", children: c.items.map((i) => {
-              const D = C && i.approve && ce(i.file);
-              return /* @__PURE__ */ r(re, { children: /* @__PURE__ */ p(
+            s.items.length > 0 && /* @__PURE__ */ r("div", { className: "file-uploader__list", children: s.items.map((i) => {
+              const I = B && i.approve && ce(i.file);
+              return /* @__PURE__ */ r(te, { children: /* @__PURE__ */ p(
                 "div",
                 {
                   className: [
@@ -326,17 +408,17 @@ const ae = ["png", "webp", "jpeg", "jpg", "svg"], le = ["mp3", "wav", "ogg", "mp
                     i.approve ? "file-uploader__item--success" : "file-uploader__item--failed"
                   ].join(" "),
                   children: [
-                    /* @__PURE__ */ r("span", { className: "file-uploader__status", children: /* @__PURE__ */ r(H, { approved: i.approve }) }),
+                    /* @__PURE__ */ r("span", { className: "file-uploader__status", children: /* @__PURE__ */ r(G, { approved: i.approve }) }),
                     i.previewUrl && /* @__PURE__ */ p(
                       "button",
                       {
                         type: "button",
                         className: "file-uploader__preview-trigger",
-                        onClick: () => u(i),
-                        "aria-label": `${d.previewFile}: ${i.file.name}`,
-                        title: d.previewFile,
+                        onClick: () => f(i),
+                        "aria-label": `${u.previewFile}: ${i.file.name}`,
+                        title: u.previewFile,
                         children: [
-                          k(i.file) && /* @__PURE__ */ r(
+                          R(i.file) && /* @__PURE__ */ r(
                             "img",
                             {
                               className: "file-uploader__thumbnail file-uploader__thumbnail--image",
@@ -344,7 +426,7 @@ const ae = ["png", "webp", "jpeg", "jpg", "svg"], le = ["mp3", "wav", "ogg", "mp
                               alt: ""
                             }
                           ),
-                          V(i.file) && /* @__PURE__ */ p(T, { children: [
+                          P(i.file) && /* @__PURE__ */ p(x, { children: [
                             /* @__PURE__ */ r(
                               "video",
                               {
@@ -354,27 +436,27 @@ const ae = ["png", "webp", "jpeg", "jpg", "svg"], le = ["mp3", "wav", "ogg", "mp
                                 muted: !0
                               }
                             ),
-                            /* @__PURE__ */ r("span", { className: "file-uploader__preview-badge", children: /* @__PURE__ */ r(Ne, {}) })
+                            /* @__PURE__ */ r("span", { className: "file-uploader__preview-badge", children: /* @__PURE__ */ r(ze, {}) })
                           ] }),
-                          P(i.file) && /* @__PURE__ */ r("span", { className: "file-uploader__media-placeholder", children: /* @__PURE__ */ r(G, {}) })
+                          j(i.file) && /* @__PURE__ */ r("span", { className: "file-uploader__media-placeholder", children: /* @__PURE__ */ r(q, {}) })
                         ]
                       }
                     ),
-                    !i.previewUrl && /* @__PURE__ */ r("span", { className: "file-uploader__file-icon", children: /* @__PURE__ */ r(Ue, {}) }),
+                    !i.previewUrl && /* @__PURE__ */ r("span", { className: "file-uploader__file-icon", children: /* @__PURE__ */ r(Ie, {}) }),
                     /* @__PURE__ */ p("div", { className: "file-uploader__file-info", children: [
                       /* @__PURE__ */ r("p", { className: "file-uploader__name", children: i.file.name }),
-                      /* @__PURE__ */ r("p", { className: "file-uploader__size", children: z(i.file.size) })
+                      /* @__PURE__ */ r("p", { className: "file-uploader__size", children: Z(i.file.size) })
                     ] }),
                     /* @__PURE__ */ p("div", { className: "file-uploader__actions", children: [
-                      D && /* @__PURE__ */ r(
+                      I && /* @__PURE__ */ r(
                         "button",
                         {
                           type: "button",
                           className: "file-uploader__icon-button",
-                          onClick: () => De(i.file),
-                          "aria-label": d.downloadFile,
-                          title: d.downloadFile,
-                          children: /* @__PURE__ */ r(be, {})
+                          onClick: () => Me(i.file),
+                          "aria-label": u.downloadFile,
+                          title: u.downloadFile,
+                          children: /* @__PURE__ */ r(De, {})
                         }
                       ),
                       /* @__PURE__ */ r(
@@ -383,14 +465,14 @@ const ae = ["png", "webp", "jpeg", "jpg", "svg"], le = ["mp3", "wav", "ogg", "mp
                           type: "button",
                           className: "file-uploader__icon-button file-uploader__icon-button--danger",
                           onClick: () => {
-                            (n == null ? void 0 : n.id) === i.id && u(null), c.removeFile(i), w == null || w(
-                              c.items.filter((y) => y.id !== i.id && y.approve),
+                            (n == null ? void 0 : n.id) === i.id && f(null), s.removeFile(i), U == null || U(
+                              s.items.filter((M) => M.id !== i.id && M.approve),
                               i
                             );
                           },
-                          "aria-label": d.removeFile,
-                          title: d.removeFile,
-                          children: /* @__PURE__ */ r(Ee, {})
+                          "aria-label": u.removeFile,
+                          title: u.removeFile,
+                          children: /* @__PURE__ */ r(Fe, {})
                         }
                       )
                     ] })
@@ -398,7 +480,7 @@ const ae = ["png", "webp", "jpeg", "jpg", "svg"], le = ["mp3", "wav", "ogg", "mp
                 }
               ) }, i.id);
             }) }),
-            h && /* @__PURE__ */ r("p", { className: "file-uploader__counter", children: d.selectedCount(c.approvedItems.length, U) })
+            g && /* @__PURE__ */ r("p", { className: "file-uploader__counter", children: u.selectedCount(s.approvedItems.length, m) })
           ]
         }
       ),
@@ -408,30 +490,30 @@ const ae = ["png", "webp", "jpeg", "jpg", "svg"], le = ["mp3", "wav", "ogg", "mp
           className: "file-uploader__modal",
           role: "dialog",
           "aria-modal": "true",
-          "aria-label": `${d.previewFile}: ${n.file.name}`,
+          "aria-label": `${u.previewFile}: ${n.file.name}`,
           onMouseDown: (i) => {
-            i.currentTarget === i.target && u(null);
+            i.currentTarget === i.target && f(null);
           },
           children: /* @__PURE__ */ p("div", { className: "file-uploader__modal-panel", children: [
             /* @__PURE__ */ p("div", { className: "file-uploader__modal-header", children: [
               /* @__PURE__ */ p("div", { children: [
                 /* @__PURE__ */ r("p", { className: "file-uploader__modal-title", children: n.file.name }),
-                /* @__PURE__ */ r("p", { className: "file-uploader__modal-meta", children: z(n.file.size) })
+                /* @__PURE__ */ r("p", { className: "file-uploader__modal-meta", children: Z(n.file.size) })
               ] }),
               /* @__PURE__ */ r(
                 "button",
                 {
                   type: "button",
                   className: "file-uploader__icon-button",
-                  onClick: () => u(null),
-                  "aria-label": d.closePreview,
-                  title: d.closePreview,
-                  children: /* @__PURE__ */ r(Ae, {})
+                  onClick: () => f(null),
+                  "aria-label": u.closePreview,
+                  title: u.closePreview,
+                  children: /* @__PURE__ */ r(Re, {})
                 }
               )
             ] }),
             /* @__PURE__ */ p("div", { className: "file-uploader__modal-content", children: [
-              k(n.file) && /* @__PURE__ */ r(
+              R(n.file) && /* @__PURE__ */ r(
                 "img",
                 {
                   className: "file-uploader__modal-image",
@@ -439,7 +521,7 @@ const ae = ["png", "webp", "jpeg", "jpg", "svg"], le = ["mp3", "wav", "ogg", "mp
                   alt: n.file.name
                 }
               ),
-              V(n.file) && /* @__PURE__ */ r(
+              P(n.file) && /* @__PURE__ */ r(
                 "video",
                 {
                   className: "file-uploader__modal-video",
@@ -448,8 +530,8 @@ const ae = ["png", "webp", "jpeg", "jpg", "svg"], le = ["mp3", "wav", "ogg", "mp
                   preload: "metadata"
                 }
               ),
-              P(n.file) && /* @__PURE__ */ p("div", { className: "file-uploader__modal-audio", children: [
-                /* @__PURE__ */ r(G, {}),
+              j(n.file) && /* @__PURE__ */ p("div", { className: "file-uploader__modal-audio", children: [
+                /* @__PURE__ */ r(q, {}),
                 /* @__PURE__ */ r("audio", { src: n.previewUrl, controls: !0, preload: "metadata" })
               ] })
             ] })
@@ -459,23 +541,24 @@ const ae = ["png", "webp", "jpeg", "jpg", "svg"], le = ["mp3", "wav", "ogg", "mp
     ] });
   }
 );
-q.displayName = "ReactFileUploader";
-const ye = q;
+K.displayName = "ReactFileUploader";
+const Be = K;
 export {
-  le as DEFAULT_AUDIO_FORMATS,
-  ae as DEFAULT_IMAGE_FORMATS,
-  oe as DEFAULT_VIDEO_FORMATS,
-  ye as FileUploader,
-  q as ReactFileUploader,
-  z as bytesToSize,
-  q as default,
-  x as getFileExtension,
-  te as getReadableAcceptedFormats,
-  P as isAudioFile,
+  oe as DEFAULT_AUDIO_FORMATS,
+  le as DEFAULT_IMAGE_FORMATS,
+  ie as DEFAULT_VIDEO_FORMATS,
+  Be as FileUploader,
+  K as ReactFileUploader,
+  Z as bytesToSize,
+  K as default,
+  F as getFileExtension,
+  ne as getReadableAcceptedFormats,
+  j as isAudioFile,
   ce as isDocumentFile,
-  k as isImageFile,
-  W as isPreviewableFile,
-  V as isVideoFile,
-  ne as matchesAcceptedType,
-  fe as useFileUploader
+  R as isImageFile,
+  C as isPreviewableFile,
+  P as isVideoFile,
+  fe as matchesAcceptedType,
+  me as optimizeImageFile,
+  Le as useFileUploader
 };

package/dist/src/index.d.ts

@@ -1,4 +1,4 @@
 export { FileUploader, ReactFileUploader, ReactFileUploader as default } from './FileUploader';
 export { useFileUploader } from './useFileUploader';
-export { DEFAULT_IMAGE_FORMATS, DEFAULT_AUDIO_FORMATS, DEFAULT_VIDEO_FORMATS, bytesToSize, getFileExtension, getReadableAcceptedFormats, isAudioFile, isDocumentFile, isImageFile, isPreviewableFile, isVideoFile, matchesAcceptedType, } from './utils';
-export type { FileUploaderHandle, FileUploaderItem, FileUploaderLabels, FileUploaderProps, FileUploaderRejectionReason, FileUploaderStatus, } from './types';
+export { DEFAULT_IMAGE_FORMATS, DEFAULT_AUDIO_FORMATS, DEFAULT_VIDEO_FORMATS, bytesToSize, getFileExtension, getReadableAcceptedFormats, isAudioFile, isDocumentFile, isImageFile, isPreviewableFile, isVideoFile, matchesAcceptedType, optimizeImageFile, } from './utils';
+export type { FileUploaderHandle, FileUploaderItem, FileUploaderLabels, FileUploaderProps, FileUploaderRejectionReason, FileUploaderStatus, ImageCompressionMode, ImageCompressionOptions, } from './types';

package/dist/src/types.d.ts

@@ -1,6 +1,12 @@
 import { ChangeEvent, CSSProperties, DragEvent, ReactNode } from 'react';
 export type FileUploaderStatus = "approved" | "rejected";
 export type FileUploaderRejectionReason = "file-size" | "file-type" | "image-dimensions";
+export type ImageCompressionMode = "lossless" | "balanced";
+export type ImageCompressionOptions = {
+    enabled?: boolean;
+    mode?: ImageCompressionMode;
+    quality?: number;
+};
 export type FileUploaderLabels = {
     idleTitle: ReactNode;
     idleHint: ReactNode;
@@ -19,10 +25,17 @@ export type FileUploaderLabels = {
 export type FileUploaderItem = {
     id: string;
     file: File;
+    originalFile?: File;
     status: FileUploaderStatus;
     approve: boolean;
     reasons: FileUploaderRejectionReason[];
     previewUrl?: string;
+    compression?: {
+        compressed: boolean;
+        originalSize: number;
+        compressedSize: number;
+        mode: ImageCompressionMode;
+    };
 };
 export type FileUploaderTheme = {
     accent?: string;
@@ -64,6 +77,7 @@ export type FileUploaderProps = {
     };
     disabled?: boolean;
     fieldName?: string;
+    imageCompression?: boolean | ImageCompressionOptions;
     labels?: Partial<FileUploaderLabels>;
     maxFiles?: number;
     maxSizeFile?: number;

package/dist/src/useFileUploader.d.ts

@@ -1,6 +1,6 @@
 import { ChangeEvent, DragEvent } from 'react';
 import { FileUploaderItem, FileUploaderProps } from './types';
-export declare const useFileUploader: ({ acceptFiles, dimensions, maxFiles, maxSizeFile, multipleFiles, updateFiles, validateDimensions, onFilesChange, onFilesSelected, }: Pick<FileUploaderProps, "acceptFiles" | "dimensions" | "maxFiles" | "maxSizeFile" | "multipleFiles" | "onFilesChange" | "onFilesSelected" | "updateFiles" | "validateDimensions">) => {
+export declare const useFileUploader: ({ acceptFiles, dimensions, imageCompression, maxFiles, maxSizeFile, multipleFiles, updateFiles, validateDimensions, onFilesChange, onFilesSelected, }: Pick<FileUploaderProps, "acceptFiles" | "dimensions" | "imageCompression" | "maxFiles" | "maxSizeFile" | "multipleFiles" | "onFilesChange" | "onFilesSelected" | "updateFiles" | "validateDimensions">) => {
     acceptedFormats: string[];
     approvedItems: FileUploaderItem[];
     canAddFiles: boolean;

package/dist/src/utils.d.ts

@@ -1,4 +1,4 @@
-import { FileUploaderItem } from './types';
+import { FileUploaderItem, ImageCompressionMode, ImageCompressionOptions } from './types';
 export declare const DEFAULT_IMAGE_FORMATS: string[];
 export declare const DEFAULT_AUDIO_FORMATS: string[];
 export declare const DEFAULT_VIDEO_FORMATS: string[];
@@ -10,6 +10,12 @@ export declare const isAudioFile: (file: File) => boolean;
 export declare const isVideoFile: (file: File) => boolean;
 export declare const isPreviewableFile: (file: File) => boolean;
 export declare const isDocumentFile: (file: File) => boolean;
+export declare const optimizeImageFile: (file: File, imageCompression?: boolean | ImageCompressionOptions) => Promise<{
+    file: File;
+    originalFile: File;
+    compressed: boolean;
+    mode: ImageCompressionMode;
+}>;
 export declare const matchesAcceptedType: (file: File, acceptFiles: string[]) => boolean;
 export declare const validateImageDimensions: (file: File, dimensions: {
     width: number;
@@ -21,6 +27,7 @@ export declare const createUploaderItem: (file: File, options: {
         width: number;
         height: number;
     };
+    imageCompression?: boolean | ImageCompressionOptions;
     maxSizeFile: number;
     validateDimensions: boolean;
 }) => Promise<FileUploaderItem>;

package/package.json

@@ -1,7 +1,15 @@
 {
   "name": "@yunuenm23/react-file-uploader",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Advanced React file uploader component with media previews, document downloads, and no UI framework dependency.",
+  "homepage": "https://moncadayunuen.github.io/react_fileuploader/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/moncadayunuen/react_fileuploader.git"
+  },
+  "bugs": {
+    "url": "https://github.com/moncadayunuen/react_fileuploader/issues"
+  },
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",