@adamosuiteservices/ui 2.15.0 → 2.16.0

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.16.0",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",