@adamosuiteservices/ui 2.15.0 → 2.15.1

package/dist/components/ui/file-upload/file-upload.d.ts

@@ -20,5 +20,6 @@ export type FileUploadProps = ComponentProps<"div"> & Readonly<{
     disabled?: boolean;
     "aria-invalid"?: boolean;
     labels?: FileUploadLabels;
+    input?: ComponentProps<"input">;
 }>;
-export declare function FileUpload({ className, selectedFile, selectedFiles, onFileSelect, onFilesSelect, onInvalidFile, acceptedExtensions, maxSizeInMB, maxFiles, multiple, filesPosition, invalid, disabled, "aria-invalid": ariaInvalid, labels, ...props }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
+export declare function FileUpload({ className, selectedFile, selectedFiles, onFileSelect, onFilesSelect, onInvalidFile, acceptedExtensions, maxSizeInMB, maxFiles, multiple, filesPosition, invalid, disabled, "aria-invalid": ariaInvalid, labels, input, ...props }: FileUploadProps): import("react/jsx-runtime").JSX.Element;

package/dist/file-upload.cjs

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-BB_1_6y_.cjs"),z=require("./button-DVrteFz9.cjs"),k=require("./icon-DPMQJBkA.cjs"),v=require("./typography-Bj8oEDuE.cjs"),h=require("./index-DoxiiusW.cjs"),D=require("react");function K({isDragging:a,isMultiple:o,invalid:r,disabled:t,accept:d,acceptedExtensions:l,maxSizeInMB:c,maxFiles:u,labels:x,onDragOver:N,onDragLeave:R,onDrop:C,onFileChange:w}){return e.jsxRuntimeExports.jsxs("div",{onDragOver:t?void 0:N,onDragLeave:t?void 0:R,onDrop:t?void 0:C,className:h.cn(`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-BB_1_6y_.cjs"),I=require("./button-DVrteFz9.cjs"),z=require("./icon-DPMQJBkA.cjs"),R=require("./typography-Bj8oEDuE.cjs"),g=require("./index-DoxiiusW.cjs"),N=require("react");function Q({isDragging:a,isMultiple:i,invalid:s,disabled:t,accept:m,acceptedExtensions:l,maxSizeInMB:c,maxFiles:f,labels:u,input:y,onDragOver:b,onDragLeave:$,onDrop:w,onFileChange:C}){const p=y?.id||`file-upload-${Math.random().toString(36).substring(2,11)}`;return e.jsxRuntimeExports.jsxs("div",{onDragOver:t?void 0:b,onDragLeave:t?void 0:$,onDrop:t?void 0:w,className:g.cn(`
           adm:flex adm:flex-col adm:items-center adm:gap-6 adm:rounded-2xl
           adm:border-2
-        `,"adm:border-dashed adm:bg-background adm:p-6 adm:transition-colors",{"adm:border-primary":a&&!r&&!t,"adm:border-destructive":r&&!t,"adm:border-input":!a&&!r,"adm:cursor-not-allowed adm:opacity-50":t}),children:[e.jsxRuntimeExports.jsx("div",{className:h.cn("adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",r&&!t?"adm:bg-destructive/10":"adm:bg-primary-50"),children:e.jsxRuntimeExports.jsx(k.Icon,{symbol:"text_snippet",className:r&&!t?"adm:text-destructive":"adm:text-primary"})}),e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:flex-col adm:items-center adm:gap-2",children:[e.jsxRuntimeExports.jsx(v.Typography,{color:r&&!t?"destructive":void 0,children:x?.dragDrop||(o?"Drag and drop your files here or":"Drag and drop your file here or")}),e.jsxRuntimeExports.jsxs("label",{htmlFor:"file-upload",children:[e.jsxRuntimeExports.jsx("input",{id:"file-upload",type:"file",accept:d,multiple:o,onChange:w,disabled:t,className:"adm:hidden"}),e.jsxRuntimeExports.jsx(z.Button,{asChild:!0,type:"button",variant:"link",className:h.cn("adm:cursor-pointer",t&&`
+        `,"adm:border-dashed adm:bg-background adm:p-6 adm:transition-colors",{"adm:border-primary":a&&!s&&!t,"adm:border-destructive":s&&!t,"adm:border-input":!a&&!s,"adm:cursor-not-allowed adm:opacity-50":t}),children:[e.jsxRuntimeExports.jsx("div",{className:g.cn("adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",s&&!t?"adm:bg-destructive/10":"adm:bg-primary-50"),children:e.jsxRuntimeExports.jsx(z.Icon,{symbol:"text_snippet",className:s&&!t?"adm:text-destructive":"adm:text-primary"})}),e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:flex-col adm:items-center adm:gap-2",children:[e.jsxRuntimeExports.jsx(R.Typography,{color:s&&!t?"destructive":void 0,children:u?.dragDrop||(i?"Drag and drop your files here or":"Drag and drop your file here or")}),e.jsxRuntimeExports.jsxs("label",{htmlFor:p,children:[e.jsxRuntimeExports.jsx("input",{...y,id:p,type:"file",accept:m,multiple:i,onChange:C,disabled:t,className:"adm:hidden"}),e.jsxRuntimeExports.jsx(I.Button,{asChild:!0,type:"button",variant:"link",className:g.cn("adm:cursor-pointer",t&&`
               adm:pointer-events-none
-            `),disabled:t,children:e.jsxRuntimeExports.jsx("span",{children:x?.selectFile||(o?"Select files":"Select the file")})})]})]}),e.jsxRuntimeExports.jsx(v.Typography,{className:"adm:text-center",color:r&&!t?"destructive":"muted",children:x?.fileRequirements||`Allowed files: ${l.join(", ")}. Maximum size ${c} MB${o?`. Up to ${u} files`:""}.`})]})}function P({file:a,invalid:o,onRemove:r}){return e.jsxRuntimeExports.jsxs("div",{className:h.cn("adm:flex adm:items-center adm:gap-4 adm:rounded-2xl adm:border adm:p-6",o?"adm:border-destructive adm:bg-destructive/5":"adm:border-input adm:bg-muted"),children:[e.jsxRuntimeExports.jsx("div",{className:h.cn("adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",o?"adm:bg-destructive/10":"adm:bg-primary-50"),children:e.jsxRuntimeExports.jsx(k.Icon,{symbol:"text_snippet",className:o?"adm:text-destructive":"adm:text-primary"})}),e.jsxRuntimeExports.jsxs("div",{className:`
+            `),disabled:t,children:e.jsxRuntimeExports.jsx("span",{children:u?.selectFile||(i?"Select files":"Select the file")})})]})]}),e.jsxRuntimeExports.jsx(R.Typography,{className:"adm:text-center",color:s&&!t?"destructive":"muted",children:u?.fileRequirements||(l&&l.length>0?`Allowed files: ${l.join(", ")}. Maximum size ${c} MB${i?`. Up to ${f} files`:""}.`:`Maximum size ${c} MB${i?`. Up to ${f} files`:""}.`)})]})}function W({file:a,invalid:i,disabled:s,onRemove:t}){return e.jsxRuntimeExports.jsxs("div",{className:g.cn("adm:flex adm:items-center adm:gap-4 adm:rounded-2xl adm:border adm:p-6",i&&!s?"adm:border-destructive adm:bg-destructive/5":"adm:border-input adm:bg-muted",s&&"adm:cursor-not-allowed adm:opacity-50"),children:[e.jsxRuntimeExports.jsx("div",{className:g.cn("adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",i&&!s?"adm:bg-destructive/10":"adm:bg-primary-50"),children:e.jsxRuntimeExports.jsx(z.Icon,{symbol:"text_snippet",className:i&&!s?"adm:text-destructive":"adm:text-primary"})}),e.jsxRuntimeExports.jsxs("div",{className:`
         adm:flex adm:min-w-0 adm:flex-1 adm:items-start adm:gap-3
-      `,children:[e.jsxRuntimeExports.jsx("div",{className:"adm:min-w-0 adm:flex-1",children:e.jsxRuntimeExports.jsx(v.Typography,{className:"adm:truncate adm:font-semibold",children:a.name})}),e.jsxRuntimeExports.jsxs(v.Typography,{className:"adm:shrink-0",color:"muted",children:[(a.size/1024/1024).toFixed(1)," MB"]})]}),e.jsxRuntimeExports.jsx(z.Button,{variant:"destructive-medium",onClick:r,type:"button",children:e.jsxRuntimeExports.jsx(k.Icon,{symbol:"delete",className:"adm:text-destructive"})})]})}function q({files:a,isMultiple:o,invalid:r,labels:t,onRemoveFile:d,onClearAll:l}){return a.length===0?null:e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:flex-col adm:gap-3",children:[o&&a.length>1&&e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:items-center adm:justify-between",children:[e.jsxRuntimeExports.jsx(v.Typography,{className:"adm:text-sm adm:font-medium",color:r?"destructive":void 0,children:t?.filesSelected?.(a.length)||`${a.length} file${a.length!==1?"s":""} selected`}),e.jsxRuntimeExports.jsx(z.Button,{variant:"ghost",size:"sm",onClick:l,type:"button",children:"Clear all"})]}),a.map((c,u)=>e.jsxRuntimeExports.jsx(P,{file:c,invalid:r,onRemove:()=>d(u)},`${c.name}-${u}`))]})}function Q({className:a,selectedFile:o,selectedFiles:r,onFileSelect:t,onFilesSelect:d,onInvalidFile:l,acceptedExtensions:c=[".xls",".xlsx",".numbers"],maxSizeInMB:u=50,maxFiles:x=10,multiple:N=!1,filesPosition:R="below",invalid:C=!1,disabled:w=!1,"aria-invalid":I,labels:y,...O}){const[B,A]=D.useState(!1),[L,U]=D.useState(!1),g=D.useRef(null);D.useEffect(()=>{const s=()=>{if(g.current){const i=g.current.closest("fieldset");U(i?.disabled??!1)}};s();const n=new MutationObserver(s);if(g.current){const i=g.current.closest("fieldset");i&&n.observe(i,{attributes:!0,attributeFilter:["disabled"]})}return()=>n.disconnect()},[]);const V=c.join(","),_=u*1024*1024,m=N||r!==void 0||d!==void 0,f=m?r||[]:o?[o]:[],E=C||I,p=w||L,M=s=>{p||(s.preventDefault(),A(!0))},G=s=>{p||(s.preventDefault(),A(!1))},H=s=>{if(!p)if(s.preventDefault(),A(!1),m){const i=Array.from(s.dataTransfer.files).filter(b);if(i.length>0){const $=[...r||[],...i].slice(0,x);d&&d($)}}else{const n=s.dataTransfer.files[0];n&&b(n)&&t&&t(n)}},J=s=>{if(!p){if(m){const i=(s.target.files?Array.from(s.target.files):[]).filter(b);if(i.length>0){const $=[...r||[],...i].slice(0,x);d&&d($)}}else{const n=s.target.files?.[0];n&&b(n)&&t&&t(n)}s.target.value=""}},F=s=>{if(!p)if(m){const n=f.filter((i,j)=>j!==s);d&&d(n)}else t&&t(null)},b=s=>{const n=s.name.substring(s.name.lastIndexOf(".")),i=c.includes(n.toLowerCase()),j=s.size<=_;return!i&&l?l(s,"extension"):!j&&l&&l(s,"size"),i&&j},T=()=>{p||(m?d&&d([]):t&&t(null))};return e.jsxRuntimeExports.jsxs("div",{ref:g,className:h.cn("adm:flex adm:flex-col adm:gap-4",a),...O,children:[m&&R==="above"&&e.jsxRuntimeExports.jsx(q,{files:f,isMultiple:m,invalid:E,labels:y,onRemoveFile:F,onClearAll:T}),(m||f.length===0)&&e.jsxRuntimeExports.jsx(K,{isDragging:B,isMultiple:m,invalid:E,disabled:p,accept:V,acceptedExtensions:c,maxSizeInMB:u,maxFiles:x,labels:y,onDragOver:M,onDragLeave:G,onDrop:H,onFileChange:J}),!m&&f.length>0&&e.jsxRuntimeExports.jsx(q,{files:f,isMultiple:m,invalid:E,labels:y,onRemoveFile:F,onClearAll:T}),m&&R==="below"&&e.jsxRuntimeExports.jsx(q,{files:f,isMultiple:m,invalid:E,labels:y,onRemoveFile:F,onClearAll:T})]})}exports.FileUpload=Q;
+      `,children:[e.jsxRuntimeExports.jsx("div",{className:"adm:min-w-0 adm:flex-1",children:e.jsxRuntimeExports.jsx(R.Typography,{className:"adm:truncate adm:font-semibold",children:a.name})}),e.jsxRuntimeExports.jsxs(R.Typography,{className:"adm:shrink-0",color:"muted",children:[(a.size/1024/1024).toFixed(1)," MB"]})]}),e.jsxRuntimeExports.jsx(I.Button,{variant:"destructive-medium",onClick:t,type:"button",disabled:s,children:e.jsxRuntimeExports.jsx(z.Icon,{symbol:"delete",className:"adm:text-destructive"})})]})}function k({files:a,isMultiple:i,invalid:s,disabled:t,labels:m,onRemoveFile:l,onClearAll:c}){return a.length===0?null:e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:flex-col adm:gap-3",children:[i&&a.length>1&&e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:items-center adm:justify-between",children:[e.jsxRuntimeExports.jsx(R.Typography,{className:"adm:text-sm adm:font-medium",color:s&&!t?"destructive":void 0,children:m?.filesSelected?.(a.length)||`${a.length} file${a.length!==1?"s":""} selected`}),e.jsxRuntimeExports.jsx(I.Button,{variant:"ghost",size:"sm",onClick:c,type:"button",disabled:t,children:"Clear all"})]}),a.map((f,u)=>e.jsxRuntimeExports.jsx(W,{file:f,invalid:s,disabled:t,onRemove:()=>l(u)},`${f.name}-${u}`))]})}function X({className:a,selectedFile:i,selectedFiles:s,onFileSelect:t,onFilesSelect:m,onInvalidFile:l,acceptedExtensions:c,maxSizeInMB:f=50,maxFiles:u=10,multiple:y=!1,filesPosition:b="below",invalid:$=!1,disabled:w=!1,"aria-invalid":C,labels:p,input:O,...B}){const[L,A]=N.useState(!1),[U,M]=N.useState(!1),v=N.useRef(null);N.useEffect(()=>{const r=()=>{if(v.current){const o=v.current.closest("fieldset");M(o?.disabled??!1)}};r();const n=new MutationObserver(r);if(v.current){const o=v.current.closest("fieldset");o&&n.observe(o,{attributes:!0,attributeFilter:["disabled"]})}return()=>n.disconnect()},[]);const V=c?.join(",")||"",_=f*1024*1024,d=y||s!==void 0||m!==void 0,j=d?s||[]:i?[i]:[],E=$||C,x=w||U,G=r=>{x||(r.preventDefault(),A(!0))},H=r=>{x||(r.preventDefault(),A(!1))},J=r=>{if(!x)if(r.preventDefault(),A(!1),d){const o=Array.from(r.dataTransfer.files).filter(D);if(o.length>0){const F=[...s||[],...o].slice(0,u);m&&m(F)}}else{const n=r.dataTransfer.files[0];n&&D(n)&&t&&t(n)}},K=r=>{if(!x){if(d){const o=(r.target.files?Array.from(r.target.files):[]).filter(D);if(o.length>0){const F=[...s||[],...o].slice(0,u);m&&m(F)}}else{const n=r.target.files?.[0];n&&D(n)&&t&&t(n)}r.target.value=""}},T=r=>{if(!x)if(d){const n=j.filter((o,h)=>h!==r);m&&m(n)}else t&&t(null)},D=r=>{const n=r.name.substring(r.name.lastIndexOf(".")),o=!c||c.length===0||c.includes(n.toLowerCase()),h=r.size<=_;return!o&&l?l(r,"extension"):!h&&l&&l(r,"size"),o&&h},q=()=>{x||(d?m&&m([]):t&&t(null))};return e.jsxRuntimeExports.jsxs("div",{ref:v,className:g.cn("adm:flex adm:flex-col adm:gap-4",a),...B,children:[d&&b==="above"&&e.jsxRuntimeExports.jsx(k,{files:j,isMultiple:d,invalid:E,disabled:x,labels:p,onRemoveFile:T,onClearAll:q}),(d||j.length===0)&&e.jsxRuntimeExports.jsx(Q,{isDragging:L,isMultiple:d,invalid:E,disabled:x,accept:V,acceptedExtensions:c,maxSizeInMB:f,maxFiles:u,labels:p,input:O,onDragOver:G,onDragLeave:H,onDrop:J,onFileChange:K}),!d&&j.length>0&&e.jsxRuntimeExports.jsx(k,{files:j,isMultiple:d,invalid:E,disabled:x,labels:p,onRemoveFile:T,onClearAll:q}),d&&b==="below"&&e.jsxRuntimeExports.jsx(k,{files:j,isMultiple:d,invalid:E,disabled:x,labels:p,onRemoveFile:T,onClearAll:q})]})}exports.FileUpload=X;

package/dist/file-upload.js

@@ -1,30 +1,32 @@
 import { j as e } from "./jsx-runtime-BzflLqGi.js";
-import { B as L } from "./button-B0lWuG-D.js";
-import { I } from "./icon-DKAhvlX_.js";
-import { T as j } from "./typography-MnY0LQoZ.js";
+import { B as O } from "./button-B0lWuG-D.js";
+import { I as L } from "./icon-DKAhvlX_.js";
+import { T as y } from "./typography-MnY0LQoZ.js";
 import { c as v } from "./index-CRiPKpXj.js";
-import { useState as O, useRef as K, useEffect as Q } from "react";
-function W({
+import { useState as B, useRef as W, useEffect as X } from "react";
+function Y({
   isDragging: n,
-  isMultiple: i,
-  invalid: s,
-  disabled: t,
+  isMultiple: d,
+  invalid: a,
+  disabled: r,
   accept: m,
   acceptedExtensions: l,
   maxSizeInMB: c,
-  maxFiles: f,
-  labels: u,
-  onDragOver: C,
-  onDragLeave: b,
-  onDrop: w,
+  maxFiles: x,
+  labels: f,
+  input: b,
+  onDragOver: D,
+  onDragLeave: w,
+  onDrop: C,
   onFileChange: A
 }) {
+  const p = b?.id || `file-upload-${Math.random().toString(36).substring(2, 11)}`;
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      onDragOver: t ? void 0 : C,
-      onDragLeave: t ? void 0 : b,
-      onDrop: t ? void 0 : w,
+      onDragOver: r ? void 0 : D,
+      onDragLeave: r ? void 0 : w,
+      onDrop: r ? void 0 : C,
       className: v(
         `
           adm:flex adm:flex-col adm:items-center adm:gap-6 adm:rounded-2xl
@@ -32,10 +34,10 @@ function W({
         `,
         "adm:border-dashed adm:bg-background adm:p-6 adm:transition-colors",
         {
-          "adm:border-primary": n && !s && !t,
-          "adm:border-destructive": s && !t,
-          "adm:border-input": !n && !s,
-          "adm:cursor-not-allowed adm:opacity-50": t
+          "adm:border-primary": n && !a && !r,
+          "adm:border-destructive": a && !r,
+          "adm:border-input": !n && !a,
+          "adm:cursor-not-allowed adm:opacity-50": r
         }
       ),
       children: [
@@ -44,59 +46,61 @@ function W({
           {
             className: v(
               "adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",
-              s && !t ? "adm:bg-destructive/10" : "adm:bg-primary-50"
+              a && !r ? "adm:bg-destructive/10" : "adm:bg-primary-50"
             ),
             children: /* @__PURE__ */ e.jsx(
-              I,
+              L,
               {
                 symbol: "text_snippet",
-                className: s && !t ? "adm:text-destructive" : "adm:text-primary"
+                className: a && !r ? "adm:text-destructive" : "adm:text-primary"
               }
             )
           }
         ),
         /* @__PURE__ */ e.jsxs("div", { className: "adm:flex adm:flex-col adm:items-center adm:gap-2", children: [
-          /* @__PURE__ */ e.jsx(j, { color: s && !t ? "destructive" : void 0, children: u?.dragDrop || (i ? "Drag and drop your files here or" : "Drag and drop your file here or") }),
-          /* @__PURE__ */ e.jsxs("label", { htmlFor: "file-upload", children: [
+          /* @__PURE__ */ e.jsx(y, { color: a && !r ? "destructive" : void 0, children: f?.dragDrop || (d ? "Drag and drop your files here or" : "Drag and drop your file here or") }),
+          /* @__PURE__ */ e.jsxs("label", { htmlFor: p, children: [
             /* @__PURE__ */ e.jsx(
               "input",
               {
-                id: "file-upload",
+                ...b,
+                id: p,
                 type: "file",
                 accept: m,
-                multiple: i,
+                multiple: d,
                 onChange: A,
-                disabled: t,
+                disabled: r,
                 className: "adm:hidden"
               }
             ),
             /* @__PURE__ */ e.jsx(
-              L,
+              O,
               {
                 asChild: !0,
                 type: "button",
                 variant: "link",
-                className: v("adm:cursor-pointer", t && `
+                className: v("adm:cursor-pointer", r && `
               adm:pointer-events-none
             `),
-                disabled: t,
-                children: /* @__PURE__ */ e.jsx("span", { children: u?.selectFile || (i ? "Select files" : "Select the file") })
+                disabled: r,
+                children: /* @__PURE__ */ e.jsx("span", { children: f?.selectFile || (d ? "Select files" : "Select the file") })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ e.jsx(j, { className: "adm:text-center", color: s && !t ? "destructive" : "muted", children: u?.fileRequirements || `Allowed files: ${l.join(", ")}. Maximum size ${c} MB${i ? `. Up to ${f} files` : ""}.` })
+        /* @__PURE__ */ e.jsx(y, { className: "adm:text-center", color: a && !r ? "destructive" : "muted", children: f?.fileRequirements || (l && l.length > 0 ? `Allowed files: ${l.join(", ")}. Maximum size ${c} MB${d ? `. Up to ${x} files` : ""}.` : `Maximum size ${c} MB${d ? `. Up to ${x} files` : ""}.`) })
       ]
     }
   );
 }
-function X({ file: n, invalid: i, onRemove: s }) {
+function Z({ file: n, invalid: d, disabled: a, onRemove: r }) {
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
       className: v(
         "adm:flex adm:items-center adm:gap-4 adm:rounded-2xl adm:border adm:p-6",
-        i ? "adm:border-destructive adm:bg-destructive/5" : "adm:border-input adm:bg-muted"
+        d && !a ? "adm:border-destructive adm:bg-destructive/5" : "adm:border-input adm:bg-muted",
+        a && "adm:cursor-not-allowed adm:opacity-50"
       ),
       children: [
         /* @__PURE__ */ e.jsx(
@@ -104,13 +108,13 @@ function X({ file: n, invalid: i, onRemove: s }) {
           {
             className: v(
               "adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",
-              i ? "adm:bg-destructive/10" : "adm:bg-primary-50"
+              d && !a ? "adm:bg-destructive/10" : "adm:bg-primary-50"
             ),
             children: /* @__PURE__ */ e.jsx(
-              I,
+              L,
               {
                 symbol: "text_snippet",
-                className: i ? "adm:text-destructive" : "adm:text-primary"
+                className: d && !a ? "adm:text-destructive" : "adm:text-primary"
               }
             )
           }
@@ -122,8 +126,8 @@ function X({ file: n, invalid: i, onRemove: s }) {
         adm:flex adm:min-w-0 adm:flex-1 adm:items-start adm:gap-3
       `,
             children: [
-              /* @__PURE__ */ e.jsx("div", { className: "adm:min-w-0 adm:flex-1", children: /* @__PURE__ */ e.jsx(j, { className: "adm:truncate adm:font-semibold", children: n.name }) }),
-              /* @__PURE__ */ e.jsxs(j, { className: "adm:shrink-0", color: "muted", children: [
+              /* @__PURE__ */ e.jsx("div", { className: "adm:min-w-0 adm:flex-1", children: /* @__PURE__ */ e.jsx(y, { className: "adm:truncate adm:font-semibold", children: n.name }) }),
+              /* @__PURE__ */ e.jsxs(y, { className: "adm:shrink-0", color: "muted", children: [
                 (n.size / 1024 / 1024).toFixed(1),
                 " MB"
               ] })
@@ -131,175 +135,183 @@ function X({ file: n, invalid: i, onRemove: s }) {
           }
         ),
         /* @__PURE__ */ e.jsx(
-          L,
+          O,
           {
             variant: "destructive-medium",
-            onClick: s,
+            onClick: r,
             type: "button",
-            children: /* @__PURE__ */ e.jsx(I, { symbol: "delete", className: "adm:text-destructive" })
+            disabled: a,
+            children: /* @__PURE__ */ e.jsx(L, { symbol: "delete", className: "adm:text-destructive" })
           }
         )
       ]
     }
   );
 }
-function z({ files: n, isMultiple: i, invalid: s, labels: t, onRemoveFile: m, onClearAll: l }) {
+function I({ files: n, isMultiple: d, invalid: a, disabled: r, labels: m, onRemoveFile: l, onClearAll: c }) {
   return n.length === 0 ? null : /* @__PURE__ */ e.jsxs("div", { className: "adm:flex adm:flex-col adm:gap-3", children: [
-    i && n.length > 1 && /* @__PURE__ */ e.jsxs("div", { className: "adm:flex adm:items-center adm:justify-between", children: [
-      /* @__PURE__ */ e.jsx(j, { className: "adm:text-sm adm:font-medium", color: s ? "destructive" : void 0, children: t?.filesSelected?.(n.length) || `${n.length} file${n.length !== 1 ? "s" : ""} selected` }),
+    d && n.length > 1 && /* @__PURE__ */ e.jsxs("div", { className: "adm:flex adm:items-center adm:justify-between", children: [
+      /* @__PURE__ */ e.jsx(y, { className: "adm:text-sm adm:font-medium", color: a && !r ? "destructive" : void 0, children: m?.filesSelected?.(n.length) || `${n.length} file${n.length !== 1 ? "s" : ""} selected` }),
       /* @__PURE__ */ e.jsx(
-        L,
+        O,
         {
           variant: "ghost",
           size: "sm",
-          onClick: l,
+          onClick: c,
           type: "button",
+          disabled: r,
           children: "Clear all"
         }
       )
     ] }),
-    n.map((c, f) => /* @__PURE__ */ e.jsx(
-      X,
+    n.map((x, f) => /* @__PURE__ */ e.jsx(
+      Z,
       {
-        file: c,
-        invalid: s,
-        onRemove: () => m(f)
+        file: x,
+        invalid: a,
+        disabled: r,
+        onRemove: () => l(f)
       },
-      `${c.name}-${f}`
+      `${x.name}-${f}`
     ))
   ] });
 }
-function re({
+function ae({
   className: n,
-  selectedFile: i,
-  selectedFiles: s,
-  onFileSelect: t,
+  selectedFile: d,
+  selectedFiles: a,
+  onFileSelect: r,
   onFilesSelect: m,
   onInvalidFile: l,
-  acceptedExtensions: c = [".xls", ".xlsx", ".numbers"],
-  maxSizeInMB: f = 50,
-  maxFiles: u = 10,
-  multiple: C = !1,
-  filesPosition: b = "below",
+  acceptedExtensions: c,
+  maxSizeInMB: x = 50,
+  maxFiles: f = 10,
+  multiple: b = !1,
+  filesPosition: D = "below",
   invalid: w = !1,
-  disabled: A = !1,
-  "aria-invalid": B,
-  labels: y,
-  ...T
+  disabled: C = !1,
+  "aria-invalid": A,
+  labels: p,
+  input: T,
+  ...U
 }) {
-  const [V, R] = O(!1), [_, E] = O(!1), g = K(null);
-  Q(() => {
-    const r = () => {
-      if (g.current) {
-        const d = g.current.closest("fieldset");
-        E(d?.disabled ?? !1);
+  const [V, R] = B(!1), [_, M] = B(!1), j = W(null);
+  X(() => {
+    const t = () => {
+      if (j.current) {
+        const i = j.current.closest("fieldset");
+        M(i?.disabled ?? !1);
       }
     };
-    r();
-    const a = new MutationObserver(r);
-    if (g.current) {
-      const d = g.current.closest("fieldset");
-      d && a.observe(d, { attributes: !0, attributeFilter: ["disabled"] });
+    t();
+    const s = new MutationObserver(t);
+    if (j.current) {
+      const i = j.current.closest("fieldset");
+      i && s.observe(i, { attributes: !0, attributeFilter: ["disabled"] });
     }
-    return () => a.disconnect();
+    return () => s.disconnect();
   }, []);
-  const U = c.join(","), q = f * 1024 * 1024, o = C || s !== void 0 || m !== void 0, p = o ? s || [] : i ? [i] : [], D = w || B, x = A || _, M = (r) => {
-    x || (r.preventDefault(), R(!0));
-  }, G = (r) => {
-    x || (r.preventDefault(), R(!1));
-  }, H = (r) => {
-    if (!x)
-      if (r.preventDefault(), R(!1), o) {
-        const d = Array.from(r.dataTransfer.files).filter(N);
-        if (d.length > 0) {
-          const k = [...s || [], ...d].slice(0, u);
-          m && m(k);
+  const q = c?.join(",") || "", G = x * 1024 * 1024, o = b || a !== void 0 || m !== void 0, h = o ? a || [] : d ? [d] : [], N = w || A, u = C || _, H = (t) => {
+    u || (t.preventDefault(), R(!0));
+  }, J = (t) => {
+    u || (t.preventDefault(), R(!1));
+  }, K = (t) => {
+    if (!u)
+      if (t.preventDefault(), R(!1), o) {
+        const i = Array.from(t.dataTransfer.files).filter($);
+        if (i.length > 0) {
+          const F = [...a || [], ...i].slice(0, f);
+          m && m(F);
         }
       } else {
-        const a = r.dataTransfer.files[0];
-        a && N(a) && t && t(a);
+        const s = t.dataTransfer.files[0];
+        s && $(s) && r && r(s);
       }
-  }, J = (r) => {
-    if (!x) {
+  }, Q = (t) => {
+    if (!u) {
       if (o) {
-        const d = (r.target.files ? Array.from(r.target.files) : []).filter(N);
-        if (d.length > 0) {
-          const k = [...s || [], ...d].slice(0, u);
-          m && m(k);
+        const i = (t.target.files ? Array.from(t.target.files) : []).filter($);
+        if (i.length > 0) {
+          const F = [...a || [], ...i].slice(0, f);
+          m && m(F);
         }
       } else {
-        const a = r.target.files?.[0];
-        a && N(a) && t && t(a);
+        const s = t.target.files?.[0];
+        s && $(s) && r && r(s);
       }
-      r.target.value = "";
+      t.target.value = "";
     }
-  }, $ = (r) => {
-    if (!x)
+  }, k = (t) => {
+    if (!u)
       if (o) {
-        const a = p.filter((d, h) => h !== r);
-        m && m(a);
+        const s = h.filter((i, g) => g !== t);
+        m && m(s);
       } else
-        t && t(null);
-  }, N = (r) => {
-    const a = r.name.substring(r.name.lastIndexOf(".")), d = c.includes(a.toLowerCase()), h = r.size <= q;
-    return !d && l ? l(r, "extension") : !h && l && l(r, "size"), d && h;
-  }, F = () => {
-    x || (o ? m && m([]) : t && t(null));
+        r && r(null);
+  }, $ = (t) => {
+    const s = t.name.substring(t.name.lastIndexOf(".")), i = !c || c.length === 0 || c.includes(s.toLowerCase()), g = t.size <= G;
+    return !i && l ? l(t, "extension") : !g && l && l(t, "size"), i && g;
+  }, z = () => {
+    u || (o ? m && m([]) : r && r(null));
   };
-  return /* @__PURE__ */ e.jsxs("div", { ref: g, className: v("adm:flex adm:flex-col adm:gap-4", n), ...T, children: [
-    o && b === "above" && /* @__PURE__ */ e.jsx(
-      z,
+  return /* @__PURE__ */ e.jsxs("div", { ref: j, className: v("adm:flex adm:flex-col adm:gap-4", n), ...U, children: [
+    o && D === "above" && /* @__PURE__ */ e.jsx(
+      I,
       {
-        files: p,
+        files: h,
         isMultiple: o,
-        invalid: D,
-        labels: y,
-        onRemoveFile: $,
-        onClearAll: F
+        invalid: N,
+        disabled: u,
+        labels: p,
+        onRemoveFile: k,
+        onClearAll: z
       }
     ),
-    (o || p.length === 0) && /* @__PURE__ */ e.jsx(
-      W,
+    (o || h.length === 0) && /* @__PURE__ */ e.jsx(
+      Y,
       {
         isDragging: V,
         isMultiple: o,
-        invalid: D,
-        disabled: x,
-        accept: U,
+        invalid: N,
+        disabled: u,
+        accept: q,
         acceptedExtensions: c,
-        maxSizeInMB: f,
-        maxFiles: u,
-        labels: y,
-        onDragOver: M,
-        onDragLeave: G,
-        onDrop: H,
-        onFileChange: J
+        maxSizeInMB: x,
+        maxFiles: f,
+        labels: p,
+        input: T,
+        onDragOver: H,
+        onDragLeave: J,
+        onDrop: K,
+        onFileChange: Q
       }
     ),
-    !o && p.length > 0 && /* @__PURE__ */ e.jsx(
-      z,
+    !o && h.length > 0 && /* @__PURE__ */ e.jsx(
+      I,
       {
-        files: p,
+        files: h,
         isMultiple: o,
-        invalid: D,
-        labels: y,
-        onRemoveFile: $,
-        onClearAll: F
+        invalid: N,
+        disabled: u,
+        labels: p,
+        onRemoveFile: k,
+        onClearAll: z
       }
     ),
-    o && b === "below" && /* @__PURE__ */ e.jsx(
-      z,
+    o && D === "below" && /* @__PURE__ */ e.jsx(
+      I,
       {
-        files: p,
+        files: h,
         isMultiple: o,
-        invalid: D,
-        labels: y,
-        onRemoveFile: $,
-        onClearAll: F
+        invalid: N,
+        disabled: u,
+        labels: p,
+        onRemoveFile: k,
+        onClearAll: z
       }
     )
   ] });
 }
 export {
-  re as FileUpload
+  ae as FileUpload
 };

package/docs/components/ui/file-upload.md

@@ -191,6 +191,14 @@ disabled?: boolean
 
 Deshabilita el componente, impidiendo toda interacción del usuario. Por defecto: `false`
 
+**Comportamiento**:
+
+- El área de drag & drop se muestra deshabilitada con opacidad reducida
+- Los archivos seleccionados también se muestran deshabilitados
+- Los botones de eliminar archivos individuales están deshabilitados
+- El botón "Clear all" (en modo múltiple) está deshabilitado
+- Los estados de error visual no se muestran cuando está deshabilitado
+
 **Ejemplo**:
 
 ```tsx
@@ -199,6 +207,42 @@ Deshabilita el componente, impidiendo toda interacción del usuario. Por defecto
 
 **Nota**: El componente también detecta automáticamente si está dentro de un `<fieldset disabled>` y se deshabilitará automáticamente.
 
+#### input
+
+```tsx
+input?: ComponentProps<"input">
+```
+
+Props personalizadas para el elemento `<input type="file">` interno. Útil para personalizar el ID, name, data attributes, y otros atributos HTML.
+
+**Comportamiento**:
+- Si no se proporciona un `id`, se genera automáticamente con formato `file-upload-{random}`
+- Las props críticas (`type`, `accept`, `multiple`, `onChange`, `disabled`, `className`) siempre se mantienen para garantizar el funcionamiento correcto
+- Puedes sobrescribir cualquier otra prop HTML del input
+
+**Ejemplo**:
+
+```tsx
+// ID personalizado para asociar con label
+<FileUpload
+  selectedFile={file}
+  onFileSelect={setFile}
+  input={{ id: "document-upload" }}
+/>
+
+// Con múltiples atributos para integración con formularios
+<FileUpload
+  selectedFile={file}
+  onFileSelect={setFile}
+  input={{
+    id: "invoice-file",
+    name: "invoice",
+    "data-testid": "invoice-input",
+    "aria-describedby": "invoice-help",
+  }}
+/>
+```
+
 #### onInvalidFile
 
 ```tsx
@@ -458,6 +502,26 @@ function DisabledExample() {
     </FieldGroup>
   );
 }
+
+// Con archivo ya seleccionado
+function DisabledWithFileExample() {
+  const mockFile = new File(["content"], "report.xlsx", {
+    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  });
+  const [file, setFile] = useState<File | null>(mockFile);
+
+  return (
+    <FieldGroup className="adm:max-w-xl">
+      <Field>
+        <FieldLabel>Upload document (Disabled)</FieldLabel>
+        <FileUpload selectedFile={file} onFileSelect={setFile} disabled />
+        <FieldDescription>
+          File is selected but cannot be removed while disabled
+        </FieldDescription>
+      </Field>
+    </FieldGroup>
+  );
+}
 ```
 
 ### Dentro de Fieldset Disabled
@@ -494,6 +558,44 @@ function FieldsetExample() {
 
 **Nota**: El componente detecta automáticamente cuando está dentro de un `<fieldset disabled>` o `<FieldSet disabled>` y se deshabilita automáticamente.
 
+### Con Props de Input Personalizadas
+
+```tsx
+import {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldGroup,
+} from "@adamosuiteservices/ui/field";
+
+function CustomInputPropsExample() {
+  const [file, setFile] = useState<File | null>(null);
+
+  return (
+    <FieldGroup className="adm:max-w-xl">
+      <Field>
+        <FieldLabel htmlFor="custom-document-upload">
+          Upload document
+        </FieldLabel>
+        <FileUpload
+          selectedFile={file}
+          onFileSelect={setFile}
+          input={{
+            id: "custom-document-upload",
+            name: "document",
+            "data-testid": "file-input",
+            "aria-describedby": "upload-description",
+          }}
+        />
+        <FieldDescription id="upload-description">
+          Custom input props allow you to set ID, name, and other attributes
+        </FieldDescription>
+      </Field>
+    </FieldGroup>
+  );
+}
+```
+
 ### Archivos de Excel (Por Defecto)
 
 ````tsx
@@ -598,7 +700,7 @@ Cuando el usuario arrastra archivos sobre el área:
 
 ### Estado Inválido
 
-Cuando `invalid={true}`:
+Cuando `invalid={true}` o `aria-invalid={true}`:
 - Borde: `border-destructive`
 - Fondo: `bg-destructive/5`
 - Icono de documento: `text-destructive` con fondo `bg-destructive/10`
@@ -606,6 +708,22 @@ Cuando `invalid={true}`:
 - Contador de archivos: `text-destructive`
 - Tarjetas de archivos: borde y fondo con colores destructivos
 
+### Estado Deshabilitado
+
+Cuando `disabled={true}` o está dentro de `<fieldset disabled>`:
+
+**Área de drag & drop**:
+- Opacidad: `opacity-50`
+- Cursor: `cursor-not-allowed`
+- Los estados de error visual no se aplican
+
+**Archivos seleccionados**:
+- Opacidad: `opacity-50`
+- Cursor: `cursor-not-allowed`
+- Botón de eliminar deshabilitado
+- Botón "Clear all" deshabilitado (modo múltiple)
+- Los colores destructivos no se muestran aunque `invalid={true}`
+
 ## Validación
 
 El componente valida automáticamente:
@@ -861,6 +979,7 @@ export type FileUploadProps = ComponentProps<"div"> & Readonly<{
   acceptedExtensions?: string[]
   maxSizeInMB?: number
   labels?: FileUploadLabels
+  input?: ComponentProps<"input">
 }>
 ### FormData para Upload
 
@@ -942,7 +1061,7 @@ const uploadFile = async (file: File) => {
     "metadata",
     JSON.stringify({
       uploadedAt: new Date().toISOString(),
-    })
+    }),
   );
 
   const response = await fetch("/api/upload", {
@@ -978,6 +1097,7 @@ const uploadWithProgress = async (file: File) => {
 | Labels customizables | ❌ No | ✅ Sí (i18n friendly) |
 | aria-invalid | ⚠️ Manual | ✅ Integrado |
 | Fieldset disabled | ⚠️ Nativo pero sin estilos | ✅ Detectado automáticamente |
+| Archivos deshabilitados | ❌ No soportado | ✅ Visual feedback completo |
 
 ## Notas
 
@@ -988,7 +1108,9 @@ const uploadWithProgress = async (file: File) => {
 - Los archivos no se almacenan automáticamente - manejar el upload con los callbacks
 - El componente es completamente controlado - el padre maneja el estado de los archivos
 - El input file es reutilizable: después de seleccionar, se resetea para permitir seleccionar el mismo archivo de nuevo
+- **Generación automática de ID**: Si no se proporciona un `id` en la prop `input`, se genera automáticamente con formato `file-upload-{random}` para garantizar accesibilidad
 - **Detección automática de fieldset**: El componente detecta cuando está dentro de un `<fieldset disabled>` usando MutationObserver y se deshabilita automáticamente
+- **Archivos seleccionados y disabled**: Cuando el componente está deshabilitado, los archivos seleccionados se muestran visualmente deshabilitados y no pueden ser removidos
 - Usar con los componentes Field (`Field`, `FieldLabel`, `FieldError`, etc.) para una mejor experiencia de formulario
 ```tsx
 <FileUpload

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamosuiteservices/ui",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",