@spark-ui/components 11.4.2 → 11.5.0

package/dist/file-upload/index.js

@@ -25,6 +25,7 @@ __export(file_upload_exports, {
 module.exports = __toCommonJS(file_upload_exports);
 
 // src/file-upload/FileUpload.tsx
+var import_form_field = require("@spark-ui/components/form-field");
 var import_use_combined_state = require("@spark-ui/hooks/use-combined-state");
 var import_react2 = require("react");
 
@@ -130,33 +131,45 @@ function getFileIcon(file) {
 // src/file-upload/FileUpload.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var FileUploadContext = (0, import_react2.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 = (0, import_form_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 = (0, import_react2.useId)();
+  const inputId = fieldId || `${ID_PREFIX}-${internalId}`;
+  const inputName = fieldName;
   const inputRef = (0, import_react2.useRef)(null);
   const triggerRef = (0, import_react2.useRef)(null);
   const dropzoneRef = (0, import_react2.useRef)(null);
   const deleteButtonRefs = (0, import_react2.useRef)([]);
-  const [filesState, setFilesState, ,] = (0, import_use_combined_state.useCombinedState)(
-    controlledValue,
-    defaultValue,
-    onFilesChange
-  );
+  const disabled = fieldDisabled ?? disabledProp;
+  const readOnly = fieldReadOnly ?? readOnlyProp;
+  const [filesState, setFilesState, ,] = (0, import_use_combined_state.useCombinedState)(controlledValue, defaultValue);
   const files = filesState ?? [];
   const setFiles = setFilesState;
   const [rejectedFiles, setRejectedFiles] = (0, import_react2.useState)([]);
@@ -185,9 +198,6 @@ var FileUpload = ({
           errors: [error]
         });
       }
-      if (onFileSizeError) {
-        onFileSizeError(file, error);
-      }
     };
     setFiles((prev) => {
       const currentFiles = prev ?? [];
@@ -251,19 +261,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;
     });
   };
@@ -274,10 +294,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;
     });
@@ -289,6 +317,12 @@ var FileUpload = ({
     setFiles([]);
     setRejectedFiles([]);
     deleteButtonRefs.current = [];
+    if (onFileChange) {
+      onFileChange({
+        acceptedFiles: [],
+        rejectedFiles: []
+      });
+    }
   };
   const removeRejectedFile = (index) => {
     if (disabled || readOnly) {
@@ -320,7 +354,10 @@ var FileUpload = ({
         maxFilesReached,
         disabled,
         readOnly,
-        locale: defaultLocale
+        locale: defaultLocale,
+        description,
+        isInvalid,
+        isRequired
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
         children,
@@ -330,12 +367,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) {
@@ -361,6 +401,9 @@ var useFileUploadContext = () => {
   return context;
 };
 
+// src/file-upload/FileUploadAcceptedFile.tsx
+var import_class_variance_authority10 = require("class-variance-authority");
+
 // src/icon/Icon.tsx
 var import_react4 = require("react");
 
@@ -488,7 +531,7 @@ var progressBarStyles = (0, import_class_variance_authority2.cva)(
 // src/progress/ProgressContext.tsx
 var import_react5 = require("react");
 var ProgressContext = (0, import_react5.createContext)(null);
-var ID_PREFIX = ":progress";
+var ID_PREFIX2 = ":progress";
 var useProgress = () => {
   const context = (0, import_react5.useContext)(ProgressContext);
   if (!context) {
@@ -624,7 +667,7 @@ var ProgressLabel = ({
   ref: forwardedRef,
   ...others
 }) => {
-  const internalID = `${ID_PREFIX}-label-${(0, import_react7.useId)()}`;
+  const internalID = `${ID_PREFIX2}-label-${(0, import_react7.useId)()}`;
   const id = idProp || internalID;
   const { onLabelId } = useProgress();
   const rootRef = (0, import_react7.useCallback)(
@@ -659,50 +702,24 @@ ProgressBar.displayName = "Progress.Bar";
 ProgressIndicator.displayName = "Progress.Indicator";
 ProgressLabel.displayName = "Progress.Label";
 
-// src/file-upload/FileUploadItem.tsx
-var import_class_variance_authority5 = require("class-variance-authority");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Item = ({
-  asChild: _asChild = false,
-  className,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    "li",
-    {
-      "data-spark-component": "file-upload-item",
-      className: (0, import_class_variance_authority5.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/FileUploadItemDeleteTrigger.tsx
 var import_Close = require("@spark-ui/icons/Close");
-var import_class_variance_authority10 = require("class-variance-authority");
+var import_class_variance_authority9 = require("class-variance-authority");
 var import_react9 = require("react");
 
 // src/button/Button.tsx
-var import_class_variance_authority8 = require("class-variance-authority");
+var import_class_variance_authority7 = require("class-variance-authority");
 var import_react8 = require("react");
 
 // src/spinner/Spinner.styles.tsx
 var import_internal_utils2 = require("@spark-ui/internal-utils");
-var import_class_variance_authority6 = require("class-variance-authority");
+var import_class_variance_authority5 = require("class-variance-authority");
 var defaultVariants = {
   intent: "current",
   size: "current",
   isBackgroundVisible: false
 };
-var spinnerStyles = (0, import_class_variance_authority6.cva)(
+var spinnerStyles = (0, import_class_variance_authority5.cva)(
   ["inline-block", "border-solid", "rounded-full", "border-md", "animate-spin"],
   {
     variants: {
@@ -743,7 +760,7 @@ var spinnerStyles = (0, import_class_variance_authority6.cva)(
 );
 
 // src/spinner/Spinner.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Spinner = ({
   className,
   size = "current",
@@ -753,7 +770,7 @@ var Spinner = ({
   ref,
   ...others
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "span",
     {
       role: "status",
@@ -761,14 +778,14 @@ var Spinner = ({
       ref,
       className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
       ...others,
-      children: label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(VisuallyHidden, { children: label })
+      children: label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(VisuallyHidden, { children: label })
     }
   );
 };
 
 // src/button/Button.styles.tsx
 var import_internal_utils8 = require("@spark-ui/internal-utils");
-var import_class_variance_authority7 = require("class-variance-authority");
+var import_class_variance_authority6 = require("class-variance-authority");
 
 // src/button/variants/filled.ts
 var import_internal_utils3 = require("@spark-ui/internal-utils");
@@ -1374,7 +1391,7 @@ var contrastVariants = [
 ];
 
 // src/button/Button.styles.tsx
-var buttonStyles = (0, import_class_variance_authority7.cva)(
+var buttonStyles = (0, import_class_variance_authority6.cva)(
   [
     "u-shadow-border-transition",
     "box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
@@ -1465,7 +1482,7 @@ var buttonStyles = (0, import_class_variance_authority7.cva)(
 );
 
 // src/button/Button.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var blockedEventHandlers = [
   "onClick",
   "onMouseDown",
@@ -1509,7 +1526,7 @@ var Button = ({
     className: loadingText ? "inline-block" : "absolute",
     ...loadingLabel && { "aria-label": loadingLabel }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Component,
     {
       "data-spark-component": "button",
@@ -1532,14 +1549,14 @@ var Button = ({
       children: wrapPolymorphicSlot(
         asChild,
         children,
-        (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner, { ...spinnerProps }),
+        (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Spinner, { ...spinnerProps }),
           loadingText && loadingText,
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "div",
             {
               "aria-hidden": true,
-              className: (0, import_class_variance_authority8.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
+              className: (0, import_class_variance_authority7.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
               children: slotted
             }
           )
@@ -1552,8 +1569,8 @@ Button.displayName = "Button";
 
 // src/icon-button/IconButton.styles.tsx
 var import_internal_utils9 = require("@spark-ui/internal-utils");
-var import_class_variance_authority9 = require("class-variance-authority");
-var iconButtonStyles = (0, import_class_variance_authority9.cva)(["pl-0 pr-0"], {
+var import_class_variance_authority8 = require("class-variance-authority");
+var iconButtonStyles = (0, import_class_variance_authority8.cva)(["pl-0 pr-0"], {
   variants: {
     /**
      * Sets the size of the icon.
@@ -1567,7 +1584,7 @@ var iconButtonStyles = (0, import_class_variance_authority9.cva)(["pl-0 pr-0"],
 });
 
 // src/icon-button/IconButton.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var IconButton = ({
   design = "filled",
   disabled = false,
@@ -1578,7 +1595,7 @@ var IconButton = ({
   ref,
   ...others
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Button,
     {
       "data-spark-component": "icon-button",
@@ -1596,15 +1613,16 @@ var IconButton = ({
 IconButton.displayName = "IconButton";
 
 // src/file-upload/FileUploadItemDeleteTrigger.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("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 = (0, import_react9.useRef)(null);
+  const fileIndex = files.findIndex((f) => f.name === file.name && f.size === file.size);
   const handleClick = (e) => {
     if (disabled || readOnly) {
       return;
@@ -1640,98 +1658,68 @@ var ItemDeleteTrigger = ({
       }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     IconButton,
     {
       ref: setRef,
       "data-spark-component": "file-upload-item-delete-trigger",
-      className: (0, import_class_variance_authority10.cx)(className),
+      className: (0, import_class_variance_authority9.cx)(className),
       onClick: handleClick,
       disabled: disabled || readOnly,
       size: "sm",
       design: "contrast",
       intent: "surface",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Close.Close, {}) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Close.Close, {}) })
     }
   );
 };
 ItemDeleteTrigger.displayName = "FileUpload.ItemDeleteTrigger";
 
-// src/file-upload/FileUploadItemFileName.tsx
-var import_class_variance_authority11 = require("class-variance-authority");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var ItemFileName = ({
-  asChild: _asChild = false,
-  className,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "p",
-    {
-      "data-spark-component": "file-upload-item-file-name",
-      className: (0, import_class_variance_authority11.cx)("text-body-2 truncate font-medium", className),
-      ...props,
-      children
-    }
-  );
-};
-ItemFileName.displayName = "FileUpload.ItemFileName";
-
-// src/file-upload/FileUploadItemSizeText.tsx
-var import_class_variance_authority12 = require("class-variance-authority");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var ItemSizeText = ({
-  asChild: _asChild = false,
-  className,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    "p",
-    {
-      "data-spark-component": "file-upload-item-size-text",
-      className: (0, import_class_variance_authority12.cx)("text-caption", className),
-      ...props,
-      children
-    }
-  );
-};
-ItemSizeText.displayName = "FileUpload.ItemSizeText";
-
 // src/file-upload/FileUploadAcceptedFile.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var AcceptedFile = ({
   asChild: _asChild = false,
   className,
   file,
-  fileIndex,
   uploadProgress,
   deleteButtonAriaLabel,
   progressAriaLabel,
   ...props
 }) => {
   const { locale } = useFileUploadContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Item, { className, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "size-sz-40 bg-support-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { size: "md", children: getFileIcon(file) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "gap-md flex flex-row items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ItemFileName, { children: file.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ItemSizeText, { className: "opacity-dim-1", children: formatFileSize(file.size, locale) })
-      ] }),
-      uploadProgress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mt-md", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Progress2, { value: uploadProgress, max: 100, "aria-label": progressAriaLabel }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ItemDeleteTrigger, { "aria-label": deleteButtonAriaLabel, fileIndex })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "li",
+    {
+      "data-spark-component": "file-upload-accepted-file",
+      className: (0, import_class_variance_authority10.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: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "size-sz-40 bg-support-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { size: "md", children: getFileIcon(file) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "gap-md flex flex-row items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-body-2 truncate font-medium", children: file.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-caption opacity-dim-1", children: formatFileSize(file.size, locale) })
+          ] }),
+          uploadProgress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mt-md", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Progress2, { value: uploadProgress, max: 100, "aria-label": progressAriaLabel }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ItemDeleteTrigger, { "aria-label": deleteButtonAriaLabel, file })
+      ]
+    }
+  );
 };
 AcceptedFile.displayName = "FileUpload.AcceptedFile";
 
 // src/file-upload/FileUploadContext.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Context = ({ children }) => {
   const { files = [], rejectedFiles = [], locale } = useFileUploadContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: children({
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: children({
     acceptedFiles: files,
     rejectedFiles,
     formatFileSize,
@@ -1741,12 +1729,11 @@ var Context = ({ children }) => {
 Context.displayName = "FileUpload.Context";
 
 // src/file-upload/FileUploadDropzone.tsx
-var import_class_variance_authority13 = require("class-variance-authority");
+var import_class_variance_authority11 = require("class-variance-authority");
 var import_react10 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function Dropzone({
   children,
-  onFiles,
   className,
   unstyled = false
 }) {
@@ -1761,7 +1748,6 @@ function Dropzone({
       return;
     }
     const files = e.dataTransfer.files;
-    onFiles?.(files);
     let filesArray = [];
     if (files) {
       filesArray = Array.isArray(files) ? [...files] : Array.from(files);
@@ -1784,7 +1770,7 @@ function Dropzone({
     }
   };
   const isDisabled = ctx.disabled || ctx.readOnly;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       ref: (node) => {
@@ -1796,18 +1782,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 : (0, import_class_variance_authority13.cx)(
-        "default:bg-surface default:border-sm default:border-outline default:rounded-lg default:border-dashed",
+      className: unstyled ? className : (0, import_class_variance_authority11.cx)(
+        "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",
@@ -1830,9 +1819,9 @@ function Dropzone({
 Dropzone.displayName = "FileUploadDropzone";
 
 // src/file-upload/FileUploadPreviewImage.tsx
-var import_class_variance_authority14 = require("class-variance-authority");
+var import_class_variance_authority12 = require("class-variance-authority");
 var import_react11 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var PreviewImage = ({
   asChild: _asChild = false,
   className,
@@ -1852,11 +1841,11 @@ var PreviewImage = ({
     };
   }, [imageUrl]);
   if (!isImage || imageError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "div",
       {
         "data-spark-component": "file-upload-preview-image",
-        className: (0, import_class_variance_authority14.cx)(
+        className: (0, import_class_variance_authority12.cx)(
           "bg-neutral-container flex items-center justify-center rounded-md",
           className
         ),
@@ -1865,24 +1854,24 @@ var PreviewImage = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       "data-spark-component": "file-upload-preview-image",
-      className: (0, import_class_variance_authority14.cx)("bg-neutral-container overflow-hidden", className),
+      className: (0, import_class_variance_authority12.cx)("bg-neutral-container overflow-hidden", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "img",
           {
             src: imageUrl,
             alt: file.name,
-            className: (0, import_class_variance_authority14.cx)("size-full object-cover", !imageLoaded && "opacity-0"),
+            className: (0, import_class_variance_authority12.cx)("size-full object-cover", !imageLoaded && "opacity-0"),
             onLoad: () => setImageLoaded(true),
             onError: () => setImageError(true)
           }
         ),
-        !imageLoaded && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: fallback })
+        !imageLoaded && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: fallback })
       ]
     }
   );
@@ -1891,21 +1880,24 @@ PreviewImage.displayName = "FileUpload.PreviewImage";
 
 // src/file-upload/FileUploadRejectedFile.tsx
 var import_WarningOutline = require("@spark-ui/icons/WarningOutline");
-var import_class_variance_authority16 = require("class-variance-authority");
+var import_class_variance_authority14 = require("class-variance-authority");
 
 // src/file-upload/FileUploadRejectedFileDeleteTrigger.tsx
 var import_Close2 = require("@spark-ui/icons/Close");
-var import_class_variance_authority15 = require("class-variance-authority");
+var import_class_variance_authority13 = require("class-variance-authority");
 var import_react12 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("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 = (0, import_react12.useRef)(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;
@@ -1919,59 +1911,66 @@ var RejectedFileDeleteTrigger = ({
     }, 0);
     onClick?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     IconButton,
     {
       ref: buttonRef,
       "data-spark-component": "file-upload-rejected-file-delete-trigger",
-      className: (0, import_class_variance_authority15.cx)(className),
+      className: (0, import_class_variance_authority13.cx)(className),
       onClick: handleClick,
       disabled: disabled || readOnly,
       size: "sm",
       design: "contrast",
       intent: "surface",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Close2.Close, {}) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Close2.Close, {}) })
     }
   );
 };
 RejectedFileDeleteTrigger.displayName = "FileUpload.RejectedFileDeleteTrigger";
 
 // src/file-upload/FileUploadRejectedFile.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var RejectedFile = ({
   asChild: _asChild = false,
   className,
   rejectedFile,
-  rejectedFileIndex,
   renderError,
   deleteButtonAriaLabel,
   ...props
 }) => {
   const { locale } = useFileUploadContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Item, { className: (0, import_class_variance_authority16.cx)("border-error border-md", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "size-sz-40 bg-error-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { size: "md", className: "text-error", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_WarningOutline.WarningOutline, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "gap-md flex flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "gap-md flex flex-row items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ItemFileName, { children: rejectedFile.file.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ItemSizeText, { className: "opacity-dim-1", children: formatFileSize(rejectedFile.file.size, locale) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "gap-xs flex flex-col", children: rejectedFile.errors.map((error, errorIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-caption text-error", "data-error-code": error, children: renderError(error) }, errorIndex)) })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      RejectedFileDeleteTrigger,
-      {
-        "aria-label": deleteButtonAriaLabel,
-        rejectedFileIndex
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "li",
+    {
+      "data-spark-component": "file-upload-rejected-file",
+      className: (0, import_class_variance_authority14.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",
+        "border-error border-md",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "size-sz-40 bg-error-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { size: "md", className: "text-error", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_WarningOutline.WarningOutline, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "gap-md flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "gap-md flex flex-row items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-body-2 truncate font-medium", children: rejectedFile.file.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-caption opacity-dim-1", children: formatFileSize(rejectedFile.file.size, locale) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "gap-xs flex flex-col", children: rejectedFile.errors.map((error, errorIndex) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-caption text-error", "data-error-code": error, children: renderError(error) }, errorIndex)) })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RejectedFileDeleteTrigger, { "aria-label": deleteButtonAriaLabel, rejectedFile })
+      ]
+    }
+  );
 };
 RejectedFile.displayName = "FileUpload.RejectedFile";
 
 // src/file-upload/FileUploadTrigger.tsx
-var import_class_variance_authority17 = require("class-variance-authority");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_class_variance_authority15 = require("class-variance-authority");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var Trigger = ({
   className,
   children,
@@ -1982,7 +1981,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();
@@ -1992,7 +1991,7 @@ var Trigger = ({
   };
   const buttonComponent = unstyled ? "button" : Button;
   const Comp = asChild ? Slot : buttonComponent;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     Comp,
     {
       type: "button",
@@ -2011,9 +2010,12 @@ var Trigger = ({
       design,
       intent,
       "data-spark-component": "file-upload-trigger",
-      className: (0, import_class_variance_authority17.cx)(className),
+      className: (0, import_class_variance_authority15.cx)(className),
       disabled: disabled || readOnly,
       onClick: handleClick,
+      "aria-describedby": description,
+      "aria-invalid": isInvalid,
+      "aria-required": isRequired,
       ...props,
       children
     }
@@ -2023,25 +2025,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";