@yunuenm23/react-file-uploader 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yun
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,84 @@
+# ReactFileUploader
+
+Reusable React file uploader component without Ant Design or Next.js dependencies.
+
+## Install locally
+
+```bash
+npm install
+npm run build
+```
+
+## Local documentation
+
+```bash
+npm run dev
+```
+
+Open `http://127.0.0.1:5173/`.
+
+## Publish package
+
+```bash
+npm login
+npm run typecheck
+npm run build
+npm publish --access public
+```
+
+## Deploy docs
+
+Vercel:
+
+- Build command: `npm run build:docs`
+- Output directory: `docs-dist`
+
+GitHub Pages:
+
+- Push to `main`.
+- Enable Pages with GitHub Actions as the source.
+- The included workflow deploys `docs-dist`.
+
+## Usage
+
+```tsx
+import { ReactFileUploader } from "@yunuenm23/react-file-uploader";
+import "@yunuenm23/react-file-uploader/styles.css";
+
+export function Example() {
+  return (
+    <ReactFileUploader
+      acceptFiles={["image/*", "video/*", "audio/*", "application/pdf"]}
+      maxFiles={3}
+      maxSizeFile={2}
+      multipleFiles
+      theme={{
+        accent: "#7c3aed",
+        accentSoft: "#ede9fe",
+        success: "#059669",
+        danger: "#e11d48",
+      }}
+      onFilesSelected={(files) => {
+        console.log(files);
+      }}
+    />
+  );
+}
+```
+
+## Main props
+
+- `acceptFiles`: MIME types or extensions, for example `["image/*", "video/*", "audio/*", ".pdf"]`.
+- `maxSizeFile`: max size in MB.
+- `multipleFiles`: enables multi-file selection.
+- `maxFiles`: approved file limit.
+- `validateDimensions`: validates image width and height.
+- `dimensions`: max image dimensions.
+- `onFilesSelected`: receives one `File` or a `File[]`.
+- `onFilesChange`: receives the full validated item list.
+- `labels`: overrides the visible copy.
+- `theme`: overrides the default colors.
+
+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`.

package/dist/fileuploader.d.ts

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

package/dist/index.cjs

@@ -0,0 +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;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from './src/index'
+export {}
+import ReactFileUploader from './src/index'
+export default ReactFileUploader
+export * from './src/index'
+export {}

package/dist/index.js

@@ -0,0 +1,481 @@
+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 = {
+  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"];
+  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);
+}, 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) => {
+  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;
+  });
+}, 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;
+  return {
+    id: `${e.name}-${e.size}-${e.lastModified}-${crypto.randomUUID()}`,
+    file: e,
+    status: t ? "approved" : "rejected",
+    approve: t,
+    reasons: o,
+    previewUrl: W(e) ? URL.createObjectURL(e) : void 0
+  };
+}, S = (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
+}) => {
+  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);
+        return;
+      }
+      m[0] && (h == null || h(m[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 = _, _;
+    });
+  }, []), c = g(
+    async (s) => {
+      s.preventDefault(), A(!1);
+      const m = me(s), _ = await Promise.all(
+        m.map(
+          (I) => Z(I, {
+            acceptFiles: e,
+            dimensions: a,
+            maxSizeFile: l,
+            validateDimensions: U
+          })
+        )
+      ), R = t ? [...v, ..._.filter((I) => I.approve).slice(0, Math.max(o - b.length, 0))] : _.slice(0, 1);
+      u(() => R), n(R), L();
+    },
+    [
+      e,
+      b.length,
+      L,
+      a,
+      n,
+      v,
+      o,
+      l,
+      t,
+      u,
+      U
+    ]
+  ), i = g(
+    (s) => {
+      const m = v.filter((_) => _.id !== s.id);
+      u(() => m), n(m), L();
+    },
+    [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);
+        return;
+      }
+      s.preventDefault(), A(!1);
+    },
+    [d, c]
+  );
+  return M(() => {
+    if (N.length === 0)
+      return;
+    let s = !1;
+    return Promise.all(
+      N.map(
+        (m) => Z(m, {
+          acceptFiles: e,
+          dimensions: a,
+          maxSizeFile: l,
+          validateDimensions: U
+        })
+      )
+    ).then((m) => {
+      s || u(() => m);
+    }), () => {
+      s = !0;
+    };
+  }, [e, a, l, u, N, U]), M(() => {
+    E.current = v;
+  }, [v]), M(() => () => {
+    S(E.current);
+  }, []), {
+    acceptedFormats: $,
+    approvedItems: b,
+    canAddFiles: d,
+    clear: D,
+    handleFiles: c,
+    inputRef: w,
+    isDragging: O,
+    items: v,
+    onDragLeave: K,
+    onDragOver: J,
+    onDrop: Q,
+    open: y,
+    removeFile: i
+  };
+}, he = [], ve = { width: 0, height: 0 }, _e = [], ge = {
+  idleTitle: /* @__PURE__ */ p(T, { children: [
+    /* @__PURE__ */ r("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) => /* @__PURE__ */ p(T, { children: [
+    "Archivos permitidos: ",
+    /* @__PURE__ */ r("span", { className: "file-uploader__format", children: e.join(", ") })
+  ] }),
+  imageDimensions: (e, a) => `Dimensiones de imagen: ${e}x${a}`,
+  selectedCount: (e, a) => `${e} / ${a} ${e === 1 ? "archivo seleccionado" : "archivos seleccionados"}`,
+  removeFile: "Eliminar archivo",
+  downloadFile: "Descargar archivo",
+  previewFile: "Vista previa del archivo",
+  closePreview: "Cerrar vista previa"
+}, we = (e) => {
+  if (!e)
+    return;
+  const a = {
+    "--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(a).forEach((o) => {
+    const l = o;
+    a[l] === void 0 && delete a[l];
+  }), 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(
+  ({
+    acceptFiles: e = he,
+    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,
+    onFilesChange: E,
+    onFilesSelected: v,
+    showDownloadButton: C = !0,
+    theme: O,
+    updateFiles: A = _e,
+    validateDimensions: b = !1
+  }, $) => {
+    const d = { ...ge, ...N }, L = we(O), [n, u] = B(null), c = fe({
+      acceptFiles: e,
+      dimensions: o,
+      maxFiles: U,
+      maxSizeFile: f,
+      multipleFiles: h,
+      onFilesChange: E,
+      onFilesSelected: v,
+      updateFiles: A,
+      validateDimensions: b
+    });
+    return ee(
+      $,
+      () => ({
+        clear: c.clear,
+        open: c.open,
+        files: () => c.items
+      }),
+      [c.clear, c.items, c.open]
+    ), M(() => {
+      if (!n)
+        return;
+      const i = (D) => {
+        D.key === "Escape" && u(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: [
+      /* @__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" : ""
+          ].filter(Boolean).join(" "),
+          onDrop: l ? void 0 : c.onDrop,
+          onDragOver: l ? void 0 : c.onDragOver,
+          onDragLeave: l ? void 0 : c.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__ */ 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__ */ 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(
+              "input",
+              {
+                ref: c.inputRef,
+                type: "file",
+                id: t,
+                name: t,
+                className: "file-uploader__input",
+                onChange: c.handleFiles,
+                accept: e.join(","),
+                multiple: h,
+                disabled: l
+              }
+            ),
+            c.canAddFiles && /* @__PURE__ */ r(
+              "button",
+              {
+                type: "button",
+                className: "file-uploader__browse",
+                onClick: c.open,
+                disabled: l,
+                children: h ? d.browseFiles : d.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(
+                "div",
+                {
+                  className: [
+                    "file-uploader__item",
+                    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 }) }),
+                    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,
+                        children: [
+                          k(i.file) && /* @__PURE__ */ r(
+                            "img",
+                            {
+                              className: "file-uploader__thumbnail file-uploader__thumbnail--image",
+                              src: i.previewUrl,
+                              alt: ""
+                            }
+                          ),
+                          V(i.file) && /* @__PURE__ */ p(T, { children: [
+                            /* @__PURE__ */ r(
+                              "video",
+                              {
+                                className: "file-uploader__thumbnail file-uploader__thumbnail--video",
+                                src: i.previewUrl,
+                                preload: "metadata",
+                                muted: !0
+                              }
+                            ),
+                            /* @__PURE__ */ r("span", { className: "file-uploader__preview-badge", children: /* @__PURE__ */ r(Ne, {}) })
+                          ] }),
+                          P(i.file) && /* @__PURE__ */ r("span", { className: "file-uploader__media-placeholder", children: /* @__PURE__ */ r(G, {}) })
+                        ]
+                      }
+                    ),
+                    !i.previewUrl && /* @__PURE__ */ r("span", { className: "file-uploader__file-icon", children: /* @__PURE__ */ r(Ue, {}) }),
+                    /* @__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__ */ p("div", { className: "file-uploader__actions", children: [
+                      D && /* @__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, {})
+                        }
+                      ),
+                      /* @__PURE__ */ r(
+                        "button",
+                        {
+                          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),
+                              i
+                            );
+                          },
+                          "aria-label": d.removeFile,
+                          title: d.removeFile,
+                          children: /* @__PURE__ */ r(Ee, {})
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ) }, i.id);
+            }) }),
+            h && /* @__PURE__ */ r("p", { className: "file-uploader__counter", children: d.selectedCount(c.approvedItems.length, U) })
+          ]
+        }
+      ),
+      (n == null ? void 0 : n.previewUrl) && /* @__PURE__ */ r(
+        "div",
+        {
+          className: "file-uploader__modal",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": `${d.previewFile}: ${n.file.name}`,
+          onMouseDown: (i) => {
+            i.currentTarget === i.target && u(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(
+                "button",
+                {
+                  type: "button",
+                  className: "file-uploader__icon-button",
+                  onClick: () => u(null),
+                  "aria-label": d.closePreview,
+                  title: d.closePreview,
+                  children: /* @__PURE__ */ r(Ae, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ p("div", { className: "file-uploader__modal-content", children: [
+              k(n.file) && /* @__PURE__ */ r(
+                "img",
+                {
+                  className: "file-uploader__modal-image",
+                  src: n.previewUrl,
+                  alt: n.file.name
+                }
+              ),
+              V(n.file) && /* @__PURE__ */ r(
+                "video",
+                {
+                  className: "file-uploader__modal-video",
+                  src: n.previewUrl,
+                  controls: !0,
+                  preload: "metadata"
+                }
+              ),
+              P(n.file) && /* @__PURE__ */ p("div", { className: "file-uploader__modal-audio", children: [
+                /* @__PURE__ */ r(G, {}),
+                /* @__PURE__ */ r("audio", { src: n.previewUrl, controls: !0, preload: "metadata" })
+              ] })
+            ] })
+          ] })
+        }
+      )
+    ] });
+  }
+);
+q.displayName = "ReactFileUploader";
+const ye = q;
+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,
+  ce as isDocumentFile,
+  k as isImageFile,
+  W as isPreviewableFile,
+  V as isVideoFile,
+  ne as matchesAcceptedType,
+  fe as useFileUploader
+};

package/dist/react-file-uploader.css

@@ -0,0 +1 @@
+.file-uploader{--file-uploader-accent: #2563eb;--file-uploader-accent-soft: #dbeafe;--file-uploader-border: #cbd5e1;--file-uploader-danger: #dc2626;--file-uploader-ink: #0f172a;--file-uploader-muted: #64748b;--file-uploader-success: #16a34a;--file-uploader-surface: #ffffff;--file-uploader-item-surface: #f8fafc;--file-uploader-modal-backdrop: color-mix(in srgb, #0f172a 72%, transparent);--file-uploader-modal-surface: #ffffff;color:var(--file-uploader-ink);font-family:inherit}.file-uploader *,.file-uploader *:before,.file-uploader *:after{box-sizing:border-box}.file-uploader__dropzone{align-items:center;background:var(--file-uploader-surface);border:1px dashed var(--file-uploader-border);border-radius:8px;display:flex;flex-direction:column;gap:16px;min-height:240px;padding:24px;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.file-uploader__dropzone--active{border-style:solid}.file-uploader__dropzone--dragging{background:var(--file-uploader-accent-soft);border-color:var(--file-uploader-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--file-uploader-accent) 16%,transparent)}.file-uploader__dropzone--disabled{cursor:not-allowed;opacity:.62}.file-uploader__info{align-items:center;display:flex;gap:16px;justify-content:center;text-align:left;width:100%}.file-uploader__main-icon,.file-uploader__success-mark{align-items:center;background:var(--file-uploader-accent-soft);border-radius:8px;color:var(--file-uploader-accent);display:inline-flex;flex:0 0 56px;height:56px;justify-content:center;width:56px}.file-uploader__main-icon svg,.file-uploader__success-mark svg,.file-uploader__status svg,.file-uploader__file-icon svg,.file-uploader__media-placeholder svg,.file-uploader__preview-badge svg,.file-uploader__icon-button svg{fill:currentColor;height:1em;width:1em}.file-uploader__main-icon svg,.file-uploader__success-mark svg{font-size:28px}.file-uploader__title,.file-uploader__hint,.file-uploader__info p,.file-uploader__counter,.file-uploader__name,.file-uploader__size{margin:0}.file-uploader__title{font-size:16px;font-weight:600;line-height:1.35}.file-uploader__title span,.file-uploader__format{color:var(--file-uploader-accent)}.file-uploader__hint,.file-uploader__info p,.file-uploader__counter,.file-uploader__size{color:var(--file-uploader-muted);font-size:13px;line-height:1.45}.file-uploader__input{display:none}.file-uploader__browse{background:var(--file-uploader-accent);border:0;border-radius:6px;color:#fff;cursor:pointer;font:inherit;font-weight:600;min-height:40px;padding:0 16px}.file-uploader__browse:disabled{cursor:not-allowed}.file-uploader__list{display:grid;gap:10px;width:100%}.file-uploader__item{align-items:center;background:var(--file-uploader-item-surface);border:1px solid #e2e8f0;border-radius:8px;display:grid;gap:12px;grid-template-columns:20px 72px minmax(0,1fr) auto;min-height:76px;padding:12px}.file-uploader__item--success .file-uploader__status{color:var(--file-uploader-success)}.file-uploader__item--failed .file-uploader__status{color:var(--file-uploader-danger)}.file-uploader__preview-trigger,.file-uploader__thumbnail,.file-uploader__file-icon{border-radius:6px}.file-uploader__preview-trigger{background:#e2e8f0;border:1px solid #cbd5e1;color:#334155;cursor:pointer;display:block;height:56px;overflow:hidden;padding:0;position:relative;width:72px}.file-uploader__thumbnail{background:#e2e8f0;display:block;height:100%;object-fit:cover;width:100%}.file-uploader__thumbnail--video{object-fit:contain}.file-uploader__preview-badge{align-items:center;background:var(--file-uploader-modal-backdrop);border-radius:999px;color:#fff;display:inline-flex;font-size:12px;height:26px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:26px}.file-uploader__media-placeholder{align-items:center;display:flex;font-size:24px;height:100%;justify-content:center;width:100%}.file-uploader__file-icon{align-items:center;background:#e2e8f0;color:#475569;display:inline-flex;font-size:20px;height:56px;justify-content:center;width:56px}.file-uploader__file-info{min-width:0}.file-uploader__name{font-size:14px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-uploader__actions{display:flex;gap:6px}.file-uploader__icon-button{align-items:center;background:var(--file-uploader-modal-surface);border:1px solid #cbd5e1;border-radius:6px;color:#334155;cursor:pointer;display:inline-flex;font-size:14px;height:32px;justify-content:center;width:32px}.file-uploader__icon-button--danger{color:var(--file-uploader-danger)}.file-uploader__modal{align-items:center;background:color-mix(in srgb,#0f172a 72%,transparent);display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;padding:20px;position:fixed;z-index:999}.file-uploader__modal-panel{background:#fff;border-radius:8px;box-shadow:0 24px 80px color-mix(in srgb,#0f172a 32%,transparent);display:grid;gap:14px;max-height:min(760px,calc(100vh - 40px));max-width:min(920px,calc(100vw - 40px));overflow:hidden;padding:14px;width:100%}.file-uploader__modal-header{align-items:center;display:flex;gap:16px;justify-content:space-between}.file-uploader__modal-title,.file-uploader__modal-meta{margin:0}.file-uploader__modal-title{font-size:15px;font-weight:700;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-uploader__modal-meta{color:var(--file-uploader-muted);font-size:13px}.file-uploader__modal-content{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;display:flex;justify-content:center;min-height:240px;overflow:hidden}.file-uploader__modal-image,.file-uploader__modal-video{display:block;max-height:min(620px,calc(100vh - 180px));max-width:100%}.file-uploader__modal-video{width:100%}.file-uploader__modal-audio{align-items:center;color:#334155;display:grid;gap:18px;justify-items:center;padding:28px;width:min(520px,100%)}.file-uploader__modal-audio svg{fill:currentColor;height:46px;width:46px}.file-uploader__modal-audio audio{width:100%}@media(max-width:520px){.file-uploader__dropzone{padding:18px}.file-uploader__info{align-items:flex-start;flex-direction:column}.file-uploader__item{align-items:start;grid-template-columns:20px minmax(0,1fr)}.file-uploader__preview-trigger,.file-uploader__file-icon,.file-uploader__file-info,.file-uploader__actions{grid-column:2}}

package/dist/src/FileUploader.d.ts

@@ -0,0 +1,3 @@
+import { FileUploaderHandle, FileUploaderProps } from './types';
+export declare const ReactFileUploader: import('react').ForwardRefExoticComponent<FileUploaderProps & import('react').RefAttributes<FileUploaderHandle>>;
+export declare const FileUploader: import('react').ForwardRefExoticComponent<FileUploaderProps & import('react').RefAttributes<FileUploaderHandle>>;

package/dist/src/index.d.ts

@@ -0,0 +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';

package/dist/src/types.d.ts

@@ -0,0 +1,79 @@
+import { ChangeEvent, CSSProperties, DragEvent, ReactNode } from 'react';
+export type FileUploaderStatus = "approved" | "rejected";
+export type FileUploaderRejectionReason = "file-size" | "file-type" | "image-dimensions";
+export type FileUploaderLabels = {
+    idleTitle: ReactNode;
+    idleHint: ReactNode;
+    browseFile: ReactNode;
+    browseFiles: ReactNode;
+    limitReached: ReactNode;
+    maxSize: (maxSizeMb: number) => ReactNode;
+    allowedFormats: (formats: string[]) => ReactNode;
+    imageDimensions: (width: number, height: number) => ReactNode;
+    selectedCount: (count: number, maxFiles: number) => ReactNode;
+    removeFile: string;
+    downloadFile: string;
+    previewFile: string;
+    closePreview: string;
+};
+export type FileUploaderItem = {
+    id: string;
+    file: File;
+    status: FileUploaderStatus;
+    approve: boolean;
+    reasons: FileUploaderRejectionReason[];
+    previewUrl?: string;
+};
+export type FileUploaderTheme = {
+    accent?: string;
+    accentSoft?: string;
+    border?: string;
+    danger?: string;
+    ink?: string;
+    muted?: string;
+    success?: string;
+    surface?: string;
+    itemSurface?: string;
+    modalBackdrop?: string;
+    modalSurface?: string;
+};
+export type FileUploaderThemeVars = CSSProperties & {
+    "--file-uploader-accent"?: string;
+    "--file-uploader-accent-soft"?: string;
+    "--file-uploader-border"?: string;
+    "--file-uploader-danger"?: string;
+    "--file-uploader-ink"?: string;
+    "--file-uploader-muted"?: string;
+    "--file-uploader-success"?: string;
+    "--file-uploader-surface"?: string;
+    "--file-uploader-item-surface"?: string;
+    "--file-uploader-modal-backdrop"?: string;
+    "--file-uploader-modal-surface"?: string;
+};
+export type FileUploaderHandle = {
+    clear: () => void;
+    open: () => void;
+    files: () => FileUploaderItem[];
+};
+export type FileUploaderProps = {
+    acceptFiles?: string[];
+    className?: string;
+    dimensions?: {
+        width: number;
+        height: number;
+    };
+    disabled?: boolean;
+    fieldName?: string;
+    labels?: Partial<FileUploaderLabels>;
+    maxFiles?: number;
+    maxSizeFile?: number;
+    multipleFiles?: boolean;
+    showDownloadButton?: boolean;
+    theme?: FileUploaderTheme;
+    updateFiles?: File[];
+    validateDimensions?: boolean;
+    onDeleteFiles?: (approvedFiles: FileUploaderItem[], removedFile: FileUploaderItem) => void;
+    onFilesChange?: (items: FileUploaderItem[]) => void;
+    onFilesSelected?: (files: File | File[]) => void;
+};
+export type FileInputEvent = ChangeEvent<HTMLInputElement> | DragEvent<HTMLElement>;

package/dist/src/useFileUploader.d.ts

@@ -0,0 +1,17 @@
+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">) => {
+    acceptedFormats: string[];
+    approvedItems: FileUploaderItem[];
+    canAddFiles: boolean;
+    clear: () => void;
+    handleFiles: (event: ChangeEvent<HTMLInputElement>) => void;
+    inputRef: import('react').RefObject<HTMLInputElement | null>;
+    isDragging: boolean;
+    items: FileUploaderItem[];
+    onDragLeave: (event: DragEvent<HTMLElement>) => void;
+    onDragOver: (event: DragEvent<HTMLElement>) => void;
+    onDrop: (event: DragEvent<HTMLElement>) => void;
+    open: () => void;
+    removeFile: (itemToRemove: FileUploaderItem) => void;
+};

package/dist/src/utils.d.ts

@@ -0,0 +1,27 @@
+import { FileUploaderItem } from './types';
+export declare const DEFAULT_IMAGE_FORMATS: string[];
+export declare const DEFAULT_AUDIO_FORMATS: string[];
+export declare const DEFAULT_VIDEO_FORMATS: string[];
+export declare const bytesToSize: (bytes: number, separator?: string) => string;
+export declare const getFileExtension: (file: File) => string;
+export declare const getReadableAcceptedFormats: (acceptFiles: string[]) => string[];
+export declare const isImageFile: (file: File) => boolean;
+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 matchesAcceptedType: (file: File, acceptFiles: string[]) => boolean;
+export declare const validateImageDimensions: (file: File, dimensions: {
+    width: number;
+    height: number;
+}) => Promise<boolean>;
+export declare const createUploaderItem: (file: File, options: {
+    acceptFiles: string[];
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    maxSizeFile: number;
+    validateDimensions: boolean;
+}) => Promise<FileUploaderItem>;
+export declare const revokePreviewUrls: (items: FileUploaderItem[]) => void;

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@yunuenm23/react-file-uploader",
+  "version": "0.1.0",
+  "description": "Advanced React file uploader component with media previews, document downloads, and no UI framework dependency.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/react-file-uploader.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite --config vite.docs.config.ts --host 127.0.0.1",
+    "dev:docs": "vite --config vite.docs.config.ts --host 127.0.0.1",
+    "build": "vite build",
+    "build:docs": "vite build --config vite.docs.config.ts",
+    "build:all": "npm run build && npm run build:docs",
+    "pack:check": "npm pack --dry-run",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.7",
+    "vite-plugin-dts": "^4.4.0"
+  }
+}