@spark-ui/components 11.4.2 → 11.5.0

package/dist/file-upload/index.mjs

@@ -17,8 +17,9 @@ import {
 } from "../chunk-6QCEPQ3U.mjs";
 
 // src/file-upload/FileUpload.tsx
+import { useFormFieldControl } from "@spark-ui/components/form-field";
 import { useCombinedState } from "@spark-ui/hooks/use-combined-state";
-import { createContext, useContext, useRef, useState } from "react";
+import { createContext, useContext, useId, useRef, useState } from "react";
 
 // src/file-upload/utils.ts
 import { CvOutline } from "@spark-ui/icons/CvOutline";
@@ -122,33 +123,45 @@ function getFileIcon(file) {
 // src/file-upload/FileUpload.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var FileUploadContext = createContext(null);
+var ID_PREFIX = ":file-upload";
 var FileUpload = ({
   asChild: _asChild = false,
   children,
   defaultValue = [],
   value: controlledValue,
-  onFilesChange,
+  onFileAccept,
+  onFileReject,
+  onFileChange,
   multiple = true,
   accept,
   maxFiles,
-  onMaxFilesReached,
   maxFileSize,
   minFileSize,
-  onFileSizeError,
-  disabled = false,
-  readOnly = false,
+  disabled: disabledProp = false,
+  readOnly: readOnlyProp = false,
   locale
 }) => {
+  const field = useFormFieldControl();
+  const {
+    id: fieldId,
+    name: fieldName,
+    isInvalid,
+    isRequired,
+    description,
+    disabled: fieldDisabled,
+    readOnly: fieldReadOnly
+  } = field;
   const defaultLocale = locale || (typeof navigator !== "undefined" && navigator.language ? navigator.language : "en");
+  const internalId = useId();
+  const inputId = fieldId || `${ID_PREFIX}-${internalId}`;
+  const inputName = fieldName;
   const inputRef = useRef(null);
   const triggerRef = useRef(null);
   const dropzoneRef = useRef(null);
   const deleteButtonRefs = useRef([]);
-  const [filesState, setFilesState, ,] = useCombinedState(
-    controlledValue,
-    defaultValue,
-    onFilesChange
-  );
+  const disabled = fieldDisabled ?? disabledProp;
+  const readOnly = fieldReadOnly ?? readOnlyProp;
+  const [filesState, setFilesState, ,] = useCombinedState(controlledValue, defaultValue);
   const files = filesState ?? [];
   const setFiles = setFilesState;
   const [rejectedFiles, setRejectedFiles] = useState([]);
@@ -177,9 +190,6 @@ var FileUpload = ({
           errors: [error]
         });
       }
-      if (onFileSizeError) {
-        onFileSizeError(file, error);
-      }
     };
     setFiles((prev) => {
       const currentFiles = prev ?? [];
@@ -243,19 +253,29 @@ var FileUpload = ({
           filesToAdd.forEach((file) => {
             addRejectedFile(file, "TOO_MANY_FILES");
           });
-          onMaxFilesReached?.(maxFiles, filesToAdd.length);
           filesToAdd = [];
         } else if (filesToAdd.length > remainingSlots) {
           filesToAdd.forEach((file) => {
             addRejectedFile(file, "TOO_MANY_FILES");
           });
-          onMaxFilesReached?.(maxFiles, filesToAdd.length);
           filesToAdd = [];
         }
       }
       const updated = multiple ? [...currentFiles, ...filesToAdd] : filesToAdd;
       const rejectedFilesToAdd = [...newRejectedFiles];
       setRejectedFiles(rejectedFilesToAdd);
+      if (filesToAdd.length > 0 && onFileAccept) {
+        onFileAccept({ files: filesToAdd });
+      }
+      if (rejectedFilesToAdd.length > 0 && onFileReject) {
+        onFileReject({ files: rejectedFilesToAdd });
+      }
+      if (onFileChange) {
+        onFileChange({
+          acceptedFiles: updated,
+          rejectedFiles: rejectedFilesToAdd
+        });
+      }
       return updated;
     });
   };
@@ -266,10 +286,18 @@ var FileUpload = ({
     setFiles((prev) => {
       const currentFiles = prev ?? [];
       const updated = currentFiles.filter((_, i) => i !== index);
+      let updatedRejectedFiles = rejectedFiles;
       if (maxFiles !== void 0 && updated.length < maxFiles) {
-        setRejectedFiles(
-          (prevRejected) => prevRejected.filter((rejected) => !rejected.errors.includes("TOO_MANY_FILES"))
+        updatedRejectedFiles = rejectedFiles.filter(
+          (rejected) => !rejected.errors.includes("TOO_MANY_FILES")
         );
+        setRejectedFiles(updatedRejectedFiles);
+      }
+      if (onFileChange) {
+        onFileChange({
+          acceptedFiles: updated,
+          rejectedFiles: updatedRejectedFiles
+        });
       }
       return updated;
     });
@@ -281,6 +309,12 @@ var FileUpload = ({
     setFiles([]);
     setRejectedFiles([]);
     deleteButtonRefs.current = [];
+    if (onFileChange) {
+      onFileChange({
+        acceptedFiles: [],
+        rejectedFiles: []
+      });
+    }
   };
   const removeRejectedFile = (index) => {
     if (disabled || readOnly) {
@@ -312,7 +346,10 @@ var FileUpload = ({
         maxFilesReached,
         disabled,
         readOnly,
-        locale: defaultLocale
+        locale: defaultLocale,
+        description,
+        isInvalid,
+        isRequired
       },
       children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         children,
@@ -322,12 +359,15 @@ var FileUpload = ({
             ref: inputRef,
             type: "file",
             tabIndex: -1,
-            id: "image_uploads",
+            id: inputId,
             multiple,
-            name: "image_uploads",
+            name: inputName,
             accept,
             disabled,
             readOnly: readOnly && !disabled,
+            required: isRequired,
+            "aria-invalid": isInvalid,
+            "aria-describedby": description,
             className: "sr-only",
             onChange: (e) => {
               if (e.target.files && !disabled && !readOnly) {
@@ -353,45 +393,23 @@ var useFileUploadContext = () => {
   return context;
 };
 
-// src/file-upload/FileUploadItem.tsx
-import { cx } from "class-variance-authority";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Item = ({
-  asChild: _asChild = false,
-  className,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx2(
-    "li",
-    {
-      "data-spark-component": "file-upload-item",
-      className: cx(
-        "relative",
-        "default:bg-surface default:border-sm default:border-outline default:p-md default:rounded-md",
-        "gap-md flex items-center justify-between default:w-full",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-};
-Item.displayName = "FileUpload.Item";
+// src/file-upload/FileUploadAcceptedFile.tsx
+import { cx as cx2 } from "class-variance-authority";
 
 // src/file-upload/FileUploadItemDeleteTrigger.tsx
 import { Close } from "@spark-ui/icons/Close";
-import { cx as cx2 } from "class-variance-authority";
+import { cx } from "class-variance-authority";
 import { useRef as useRef2 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var ItemDeleteTrigger = ({
   className,
-  fileIndex,
+  file,
   onClick,
   ...props
 }) => {
-  const { removeFile, triggerRef, dropzoneRef, deleteButtonRefs, disabled, readOnly } = useFileUploadContext();
+  const { removeFile, triggerRef, dropzoneRef, deleteButtonRefs, disabled, readOnly, files } = useFileUploadContext();
   const buttonRef = useRef2(null);
+  const fileIndex = files.findIndex((f) => f.name === file.name && f.size === file.size);
   const handleClick = (e) => {
     if (disabled || readOnly) {
       return;
@@ -427,98 +445,68 @@ var ItemDeleteTrigger = ({
       }
     }
   };
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     IconButton,
     {
       ref: setRef,
       "data-spark-component": "file-upload-item-delete-trigger",
-      className: cx2(className),
+      className: cx(className),
       onClick: handleClick,
       disabled: disabled || readOnly,
       size: "sm",
       design: "contrast",
       intent: "surface",
       ...props,
-      children: /* @__PURE__ */ jsx3(Icon, { size: "sm", children: /* @__PURE__ */ jsx3(Close, {}) })
+      children: /* @__PURE__ */ jsx2(Icon, { size: "sm", children: /* @__PURE__ */ jsx2(Close, {}) })
     }
   );
 };
 ItemDeleteTrigger.displayName = "FileUpload.ItemDeleteTrigger";
 
-// src/file-upload/FileUploadItemFileName.tsx
-import { cx as cx3 } from "class-variance-authority";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var ItemFileName = ({
-  asChild: _asChild = false,
-  className,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx4(
-    "p",
-    {
-      "data-spark-component": "file-upload-item-file-name",
-      className: cx3("text-body-2 truncate font-medium", className),
-      ...props,
-      children
-    }
-  );
-};
-ItemFileName.displayName = "FileUpload.ItemFileName";
-
-// src/file-upload/FileUploadItemSizeText.tsx
-import { cx as cx4 } from "class-variance-authority";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var ItemSizeText = ({
-  asChild: _asChild = false,
-  className,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx5(
-    "p",
-    {
-      "data-spark-component": "file-upload-item-size-text",
-      className: cx4("text-caption", className),
-      ...props,
-      children
-    }
-  );
-};
-ItemSizeText.displayName = "FileUpload.ItemSizeText";
-
 // src/file-upload/FileUploadAcceptedFile.tsx
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var AcceptedFile = ({
   asChild: _asChild = false,
   className,
   file,
-  fileIndex,
   uploadProgress,
   deleteButtonAriaLabel,
   progressAriaLabel,
   ...props
 }) => {
   const { locale } = useFileUploadContext();
-  return /* @__PURE__ */ jsxs2(Item, { className, ...props, children: [
-    /* @__PURE__ */ jsx6("div", { className: "size-sz-40 bg-support-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ jsx6(Icon, { size: "md", children: getFileIcon(file) }) }),
-    /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "gap-md flex flex-row items-center justify-between", children: [
-        /* @__PURE__ */ jsx6(ItemFileName, { children: file.name }),
-        /* @__PURE__ */ jsx6(ItemSizeText, { className: "opacity-dim-1", children: formatFileSize(file.size, locale) })
-      ] }),
-      uploadProgress !== void 0 && /* @__PURE__ */ jsx6("div", { className: "mt-md", children: /* @__PURE__ */ jsx6(Progress, { value: uploadProgress, max: 100, "aria-label": progressAriaLabel }) })
-    ] }),
-    /* @__PURE__ */ jsx6(ItemDeleteTrigger, { "aria-label": deleteButtonAriaLabel, fileIndex })
-  ] });
+  return /* @__PURE__ */ jsxs2(
+    "li",
+    {
+      "data-spark-component": "file-upload-accepted-file",
+      className: cx2(
+        "relative",
+        "default:bg-surface default:border-sm default:border-outline default:p-md default:rounded-md",
+        "gap-md flex items-center justify-between default:w-full",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx3("div", { className: "size-sz-40 bg-support-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ jsx3(Icon, { size: "md", children: getFileIcon(file) }) }),
+        /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "gap-md flex flex-row items-center justify-between", children: [
+            /* @__PURE__ */ jsx3("p", { className: "text-body-2 truncate font-medium", children: file.name }),
+            /* @__PURE__ */ jsx3("p", { className: "text-caption opacity-dim-1", children: formatFileSize(file.size, locale) })
+          ] }),
+          uploadProgress !== void 0 && /* @__PURE__ */ jsx3("div", { className: "mt-md", children: /* @__PURE__ */ jsx3(Progress, { value: uploadProgress, max: 100, "aria-label": progressAriaLabel }) })
+        ] }),
+        /* @__PURE__ */ jsx3(ItemDeleteTrigger, { "aria-label": deleteButtonAriaLabel, file })
+      ]
+    }
+  );
 };
 AcceptedFile.displayName = "FileUpload.AcceptedFile";
 
 // src/file-upload/FileUploadContext.tsx
-import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
 var Context = ({ children }) => {
   const { files = [], rejectedFiles = [], locale } = useFileUploadContext();
-  return /* @__PURE__ */ jsx7(Fragment, { children: children({
+  return /* @__PURE__ */ jsx4(Fragment, { children: children({
     acceptedFiles: files,
     rejectedFiles,
     formatFileSize,
@@ -528,12 +516,11 @@ var Context = ({ children }) => {
 Context.displayName = "FileUpload.Context";
 
 // src/file-upload/FileUploadDropzone.tsx
-import { cx as cx5 } from "class-variance-authority";
+import { cx as cx3 } from "class-variance-authority";
 import { useRef as useRef3 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function Dropzone({
   children,
-  onFiles,
   className,
   unstyled = false
 }) {
@@ -548,7 +535,6 @@ function Dropzone({
       return;
     }
     const files = e.dataTransfer.files;
-    onFiles?.(files);
     let filesArray = [];
     if (files) {
       filesArray = Array.isArray(files) ? [...files] : Array.from(files);
@@ -571,7 +557,7 @@ function Dropzone({
     }
   };
   const isDisabled = ctx.disabled || ctx.readOnly;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       ref: (node) => {
@@ -583,18 +569,21 @@ function Dropzone({
       role: "button",
       tabIndex: isDisabled ? -1 : 0,
       "aria-disabled": ctx.disabled ? true : void 0,
+      "aria-describedby": ctx.description,
+      "aria-invalid": ctx.isInvalid,
+      "aria-required": ctx.isRequired,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       onDrop: handleDrop,
       onDragOver: (e) => {
         e.preventDefault();
       },
-      className: unstyled ? className : cx5(
-        "default:bg-surface default:border-sm default:border-outline default:rounded-lg default:border-dashed",
+      className: unstyled ? className : cx3(
+        "default:bg-surface default:border-sm default:border-outline default:relative default:rounded-lg default:border-dashed",
         "gap-lg flex flex-col items-center justify-center text-center",
         "default:p-xl",
         "transition-colors duration-200",
-        !isDisabled && "hover:bg-surface-hovered",
+        !isDisabled && "default:hover:bg-surface-hovered",
         "data-[drag-over=true]:border-outline-high data-[drag-over=true]:bg-surface-hovered data-[drag-over=true]:border-solid",
         // Disabled: more visually disabled (opacity + cursor)
         ctx.disabled && "cursor-not-allowed opacity-50",
@@ -617,9 +606,9 @@ function Dropzone({
 Dropzone.displayName = "FileUploadDropzone";
 
 // src/file-upload/FileUploadPreviewImage.tsx
-import { cx as cx6 } from "class-variance-authority";
+import { cx as cx4 } from "class-variance-authority";
 import { useEffect, useState as useState2 } from "react";
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var PreviewImage = ({
   asChild: _asChild = false,
   className,
@@ -639,11 +628,11 @@ var PreviewImage = ({
     };
   }, [imageUrl]);
   if (!isImage || imageError) {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx6(
       "div",
       {
         "data-spark-component": "file-upload-preview-image",
-        className: cx6(
+        className: cx4(
           "bg-neutral-container flex items-center justify-center rounded-md",
           className
         ),
@@ -656,20 +645,20 @@ var PreviewImage = ({
     "div",
     {
       "data-spark-component": "file-upload-preview-image",
-      className: cx6("bg-neutral-container overflow-hidden", className),
+      className: cx4("bg-neutral-container overflow-hidden", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx6(
           "img",
           {
             src: imageUrl,
             alt: file.name,
-            className: cx6("size-full object-cover", !imageLoaded && "opacity-0"),
+            className: cx4("size-full object-cover", !imageLoaded && "opacity-0"),
             onLoad: () => setImageLoaded(true),
             onError: () => setImageError(true)
           }
         ),
-        !imageLoaded && /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 flex items-center justify-center", children: fallback })
+        !imageLoaded && /* @__PURE__ */ jsx6("div", { className: "absolute inset-0 flex items-center justify-center", children: fallback })
       ]
     }
   );
@@ -678,21 +667,24 @@ PreviewImage.displayName = "FileUpload.PreviewImage";
 
 // src/file-upload/FileUploadRejectedFile.tsx
 import { WarningOutline } from "@spark-ui/icons/WarningOutline";
-import { cx as cx8 } from "class-variance-authority";
+import { cx as cx6 } from "class-variance-authority";
 
 // src/file-upload/FileUploadRejectedFileDeleteTrigger.tsx
 import { Close as Close2 } from "@spark-ui/icons/Close";
-import { cx as cx7 } from "class-variance-authority";
+import { cx as cx5 } from "class-variance-authority";
 import { useRef as useRef4 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var RejectedFileDeleteTrigger = ({
   className,
-  rejectedFileIndex,
+  rejectedFile,
   onClick,
   ...props
 }) => {
-  const { removeRejectedFile, triggerRef, dropzoneRef, disabled, readOnly } = useFileUploadContext();
+  const { removeRejectedFile, triggerRef, dropzoneRef, disabled, readOnly, rejectedFiles } = useFileUploadContext();
   const buttonRef = useRef4(null);
+  const rejectedFileIndex = rejectedFiles.findIndex(
+    (rf) => rf.file.name === rejectedFile.file.name && rf.file.size === rejectedFile.file.size
+  );
   const handleClick = (e) => {
     if (disabled || readOnly) {
       return;
@@ -706,59 +698,66 @@ var RejectedFileDeleteTrigger = ({
     }, 0);
     onClick?.(e);
   };
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx7(
     IconButton,
     {
       ref: buttonRef,
       "data-spark-component": "file-upload-rejected-file-delete-trigger",
-      className: cx7(className),
+      className: cx5(className),
       onClick: handleClick,
       disabled: disabled || readOnly,
       size: "sm",
       design: "contrast",
       intent: "surface",
       ...props,
-      children: /* @__PURE__ */ jsx10(Icon, { size: "sm", children: /* @__PURE__ */ jsx10(Close2, {}) })
+      children: /* @__PURE__ */ jsx7(Icon, { size: "sm", children: /* @__PURE__ */ jsx7(Close2, {}) })
     }
   );
 };
 RejectedFileDeleteTrigger.displayName = "FileUpload.RejectedFileDeleteTrigger";
 
 // src/file-upload/FileUploadRejectedFile.tsx
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var RejectedFile = ({
   asChild: _asChild = false,
   className,
   rejectedFile,
-  rejectedFileIndex,
   renderError,
   deleteButtonAriaLabel,
   ...props
 }) => {
   const { locale } = useFileUploadContext();
-  return /* @__PURE__ */ jsxs4(Item, { className: cx8("border-error border-md", className), ...props, children: [
-    /* @__PURE__ */ jsx11("div", { className: "size-sz-40 bg-error-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ jsx11(Icon, { size: "md", className: "text-error", children: /* @__PURE__ */ jsx11(WarningOutline, {}) }) }),
-    /* @__PURE__ */ jsx11("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs4("div", { className: "gap-md flex flex-col", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "gap-md flex flex-row items-center justify-between", children: [
-        /* @__PURE__ */ jsx11(ItemFileName, { children: rejectedFile.file.name }),
-        /* @__PURE__ */ jsx11(ItemSizeText, { className: "opacity-dim-1", children: formatFileSize(rejectedFile.file.size, locale) })
-      ] }),
-      /* @__PURE__ */ jsx11("div", { className: "gap-xs flex flex-col", children: rejectedFile.errors.map((error, errorIndex) => /* @__PURE__ */ jsx11("div", { className: "text-caption text-error", "data-error-code": error, children: renderError(error) }, errorIndex)) })
-    ] }) }),
-    /* @__PURE__ */ jsx11(
-      RejectedFileDeleteTrigger,
-      {
-        "aria-label": deleteButtonAriaLabel,
-        rejectedFileIndex
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs4(
+    "li",
+    {
+      "data-spark-component": "file-upload-rejected-file",
+      className: cx6(
+        "relative",
+        "default:bg-surface default:border-sm default:border-outline default:p-md default:rounded-md",
+        "gap-md flex items-center justify-between default:w-full",
+        "border-error border-md",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx8("div", { className: "size-sz-40 bg-error-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ jsx8(Icon, { size: "md", className: "text-error", children: /* @__PURE__ */ jsx8(WarningOutline, {}) }) }),
+        /* @__PURE__ */ jsx8("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs4("div", { className: "gap-md flex flex-col", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "gap-md flex flex-row items-center justify-between", children: [
+            /* @__PURE__ */ jsx8("p", { className: "text-body-2 truncate font-medium", children: rejectedFile.file.name }),
+            /* @__PURE__ */ jsx8("p", { className: "text-caption opacity-dim-1", children: formatFileSize(rejectedFile.file.size, locale) })
+          ] }),
+          /* @__PURE__ */ jsx8("div", { className: "gap-xs flex flex-col", children: rejectedFile.errors.map((error, errorIndex) => /* @__PURE__ */ jsx8("div", { className: "text-caption text-error", "data-error-code": error, children: renderError(error) }, errorIndex)) })
+        ] }) }),
+        /* @__PURE__ */ jsx8(RejectedFileDeleteTrigger, { "aria-label": deleteButtonAriaLabel, rejectedFile })
+      ]
+    }
+  );
 };
 RejectedFile.displayName = "FileUpload.RejectedFile";
 
 // src/file-upload/FileUploadTrigger.tsx
-import { cx as cx9 } from "class-variance-authority";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { cx as cx7 } from "class-variance-authority";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Trigger = ({
   className,
   children,
@@ -769,7 +768,7 @@ var Trigger = ({
   ref,
   ...props
 }) => {
-  const { inputRef, triggerRef, disabled, readOnly } = useFileUploadContext();
+  const { inputRef, triggerRef, disabled, readOnly, description, isInvalid, isRequired } = useFileUploadContext();
   const handleClick = (e) => {
     e.stopPropagation();
     e.preventDefault();
@@ -779,7 +778,7 @@ var Trigger = ({
   };
   const buttonComponent = unstyled ? "button" : Button;
   const Comp = asChild ? Slot : buttonComponent;
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx9(
     Comp,
     {
       type: "button",
@@ -798,9 +797,12 @@ var Trigger = ({
       design,
       intent,
       "data-spark-component": "file-upload-trigger",
-      className: cx9(className),
+      className: cx7(className),
       disabled: disabled || readOnly,
       onClick: handleClick,
+      "aria-describedby": description,
+      "aria-invalid": isInvalid,
+      "aria-required": isRequired,
       ...props,
       children
     }
@@ -810,25 +812,22 @@ Trigger.displayName = "FileUpload.Trigger";
 
 // src/file-upload/index.ts
 var FileUpload2 = Object.assign(FileUpload, {
+  // Main input components
   Trigger,
   Dropzone,
+  // Context components
   Context,
-  Item,
-  ItemFileName,
-  ItemSizeText,
-  ItemDeleteTrigger,
-  PreviewImage,
   AcceptedFile,
   RejectedFile,
+  // Helpers for custom renders
+  PreviewImage,
+  ItemDeleteTrigger,
   RejectedFileDeleteTrigger
 });
 FileUpload2.displayName = "FileUpload";
 Trigger.displayName = "FileUpload.Trigger";
 Dropzone.displayName = "FileUpload.Dropzone";
 Context.displayName = "FileUpload.Context";
-Item.displayName = "FileUpload.Item";
-ItemFileName.displayName = "FileUpload.ItemFileName";
-ItemSizeText.displayName = "FileUpload.ItemSizeText";
 ItemDeleteTrigger.displayName = "FileUpload.ItemDeleteTrigger";
 PreviewImage.displayName = "FileUpload.PreviewImage";
 AcceptedFile.displayName = "FileUpload.AcceptedFile";