@spark-ui/components 11.5.0 → 11.6.0

package/dist/file-upload/index.js

@@ -20,15 +20,47 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/file-upload/index.ts
 var file_upload_exports = {};
 __export(file_upload_exports, {
+  FILE_UPLOAD_ERRORS: () => FILE_UPLOAD_ERRORS,
   FileUpload: () => FileUpload2
 });
 module.exports = __toCommonJS(file_upload_exports);
 
 // src/file-upload/FileUpload.tsx
 var import_form_field = require("@spark-ui/components/form-field");
+var import_react3 = require("react");
+
+// src/file-upload/useFileUploadState.tsx
 var import_use_combined_state = require("@spark-ui/hooks/use-combined-state");
 var import_react2 = require("react");
 
+// src/file-upload/constants.ts
+var FILE_UPLOAD_ERRORS = {
+  /**
+   * Exceeds the maxFiles limit
+   */
+  TOO_MANY_FILES: "TOO_MANY_FILES",
+  /**
+   * File type not in the accept list
+   */
+  FILE_INVALID_TYPE: "FILE_INVALID_TYPE",
+  /**
+   * File size exceeds maxFileSize
+   */
+  FILE_TOO_LARGE: "FILE_TOO_LARGE",
+  /**
+   * File size below minFileSize
+   */
+  FILE_TOO_SMALL: "FILE_TOO_SMALL",
+  /**
+   * Generic validation failure
+   */
+  FILE_INVALID: "FILE_INVALID",
+  /**
+   * Duplicate file detected
+   */
+  FILE_EXISTS: "FILE_EXISTS"
+};
+
 // src/file-upload/utils.ts
 var import_CvOutline = require("@spark-ui/icons/CvOutline");
 var import_FilePdfOutline = require("@spark-ui/icons/FilePdfOutline");
@@ -128,13 +160,8 @@ function getFileIcon(file) {
   return (0, import_react.createElement)(import_CvOutline.CvOutline);
 }
 
-// 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,
+// src/file-upload/useFileUploadState.tsx
+function useFileUploadState({
   defaultValue = [],
   value: controlledValue,
   onFileAccept,
@@ -145,31 +172,12 @@ var FileUpload = ({
   maxFiles,
   maxFileSize,
   minFileSize,
-  disabled: disabledProp = false,
-  readOnly: readOnlyProp = false,
+  disabled = false,
+  readOnly = 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 disabled = fieldDisabled ?? disabledProp;
-  const readOnly = fieldReadOnly ?? readOnlyProp;
-  const [filesState, setFilesState, ,] = (0, import_use_combined_state.useCombinedState)(controlledValue, defaultValue);
+  const [filesState, setFilesState] = (0, import_use_combined_state.useCombinedState)(controlledValue, defaultValue);
   const files = filesState ?? [];
   const setFiles = setFilesState;
   const [rejectedFiles, setRejectedFiles] = (0, import_react2.useState)([]);
@@ -201,20 +209,17 @@ var FileUpload = ({
     };
     setFiles((prev) => {
       const currentFiles = prev ?? [];
-      if (maxFiles !== void 0) {
-        const currentCount = currentFiles.length;
-        const remainingSlots = maxFiles - currentCount;
-        if (remainingSlots <= 0) {
-          newFiles.forEach((file) => {
-            addRejectedFile(file, "TOO_MANY_FILES");
-          });
-        }
+      const remainingSlots = maxFiles !== void 0 ? maxFiles - currentFiles.length : void 0;
+      if (remainingSlots !== void 0 && remainingSlots <= 0) {
+        newFiles.forEach((file) => {
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.TOO_MANY_FILES);
+        });
       }
       let filteredFiles = newFiles;
       if (accept) {
         const rejectedByAccept = newFiles.filter((file) => !validateFileAccept(file, accept));
         rejectedByAccept.forEach((file) => {
-          addRejectedFile(file, "FILE_INVALID_TYPE");
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_INVALID_TYPE);
         });
         filteredFiles = newFiles.filter((file) => validateFileAccept(file, accept));
       }
@@ -224,11 +229,11 @@ var FileUpload = ({
           const validation = validateFileSize(file, minFileSize, maxFileSize, defaultLocale);
           if (!validation.valid) {
             if (maxFileSize !== void 0 && file.size > maxFileSize) {
-              addRejectedFile(file, "FILE_TOO_LARGE");
+              addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_TOO_LARGE);
             } else if (minFileSize !== void 0 && file.size < minFileSize) {
-              addRejectedFile(file, "FILE_TOO_SMALL");
+              addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_TOO_SMALL);
             } else {
-              addRejectedFile(file, "FILE_INVALID");
+              addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_INVALID);
             }
             return false;
           }
@@ -236,35 +241,27 @@ var FileUpload = ({
         });
       }
       const seenFiles = /* @__PURE__ */ new Map();
-      const duplicateFiles = [];
       const uniqueFiles = validSizeFiles.filter((file) => {
         const fileKey = `${file.name}-${file.size}`;
         const existsInPrev = fileExists(file, currentFiles);
         if (existsInPrev) {
-          duplicateFiles.push(file);
-          addRejectedFile(file, "FILE_EXISTS");
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_EXISTS);
           return false;
         }
         if (seenFiles.has(fileKey)) {
-          duplicateFiles.push(file);
-          addRejectedFile(file, "FILE_EXISTS");
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_EXISTS);
           return false;
         }
         seenFiles.set(fileKey, file);
         return true;
       });
       let filesToAdd = multiple ? uniqueFiles : uniqueFiles.slice(0, 1);
-      if (maxFiles !== void 0) {
-        const currentCount = currentFiles.length;
-        const remainingSlots = maxFiles - currentCount;
+      if (remainingSlots !== void 0) {
         if (remainingSlots <= 0) {
-          filesToAdd.forEach((file) => {
-            addRejectedFile(file, "TOO_MANY_FILES");
-          });
           filesToAdd = [];
         } else if (filesToAdd.length > remainingSlots) {
           filesToAdd.forEach((file) => {
-            addRejectedFile(file, "TOO_MANY_FILES");
+            addRejectedFile(file, FILE_UPLOAD_ERRORS.TOO_MANY_FILES);
           });
           filesToAdd = [];
         }
@@ -297,7 +294,7 @@ var FileUpload = ({
       let updatedRejectedFiles = rejectedFiles;
       if (maxFiles !== void 0 && updated.length < maxFiles) {
         updatedRejectedFiles = rejectedFiles.filter(
-          (rejected) => !rejected.errors.includes("TOO_MANY_FILES")
+          (rejected) => !rejected.errors.includes(FILE_UPLOAD_ERRORS.TOO_MANY_FILES)
         );
         setRejectedFiles(updatedRejectedFiles);
       }
@@ -316,7 +313,6 @@ var FileUpload = ({
     }
     setFiles([]);
     setRejectedFiles([]);
-    deleteButtonRefs.current = [];
     if (onFileChange) {
       onFileChange({
         acceptedFiles: [],
@@ -334,6 +330,77 @@ var FileUpload = ({
     setRejectedFiles([]);
   };
   const maxFilesReached = maxFiles !== void 0 && files.length >= maxFiles;
+  return {
+    files,
+    rejectedFiles,
+    addFiles,
+    removeFile,
+    removeRejectedFile,
+    clearFiles,
+    clearRejectedFiles,
+    maxFilesReached
+  };
+}
+
+// src/file-upload/FileUpload.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FileUploadContext = (0, import_react3.createContext)(null);
+var ID_PREFIX = ":file-upload";
+var FileUpload = ({
+  asChild: _asChild = false,
+  children,
+  defaultValue = [],
+  value: controlledValue,
+  onFileAccept,
+  onFileReject,
+  onFileChange,
+  multiple = true,
+  accept,
+  maxFiles,
+  maxFileSize,
+  minFileSize,
+  disabled: disabledProp = false,
+  readOnly: readOnlyProp = false,
+  locale
+}) => {
+  const field = (0, import_form_field.useFormFieldControl)();
+  const internalId = (0, import_react3.useId)();
+  const inputId = field.id || `${ID_PREFIX}-${internalId}`;
+  const inputName = field.name;
+  const inputRef = (0, import_react3.useRef)(null);
+  const triggerRef = (0, import_react3.useRef)(null);
+  const dropzoneRef = (0, import_react3.useRef)(null);
+  const deleteButtonRefs = (0, import_react3.useRef)([]);
+  const disabled = field.disabled ?? disabledProp;
+  const readOnly = field.readOnly ?? readOnlyProp;
+  const {
+    files,
+    rejectedFiles,
+    addFiles,
+    removeFile,
+    removeRejectedFile,
+    clearFiles: clearFilesFromHook,
+    clearRejectedFiles,
+    maxFilesReached
+  } = useFileUploadState({
+    defaultValue,
+    value: controlledValue,
+    onFileAccept,
+    onFileReject,
+    onFileChange,
+    multiple,
+    accept,
+    maxFiles,
+    maxFileSize,
+    minFileSize,
+    disabled,
+    readOnly,
+    locale
+  });
+  const clearFiles = () => {
+    clearFilesFromHook();
+    deleteButtonRefs.current = [];
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     FileUploadContext.Provider,
     {
@@ -354,10 +421,10 @@ var FileUpload = ({
         maxFilesReached,
         disabled,
         readOnly,
-        locale: defaultLocale,
-        description,
-        isInvalid,
-        isRequired
+        locale: locale || (typeof navigator !== "undefined" && navigator.language ? navigator.language : "en"),
+        description: field.description,
+        isInvalid: field.isInvalid,
+        isRequired: field.isRequired
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
         children,
@@ -373,9 +440,10 @@ var FileUpload = ({
             accept,
             disabled,
             readOnly: readOnly && !disabled,
-            required: isRequired,
-            "aria-invalid": isInvalid,
-            "aria-describedby": description,
+            required: field.isRequired,
+            "aria-invalid": field.isInvalid,
+            "aria-describedby": field.description,
+            "aria-label": !field.labelId ? "Upload files" : void 0,
             className: "sr-only",
             onChange: (e) => {
               if (e.target.files && !disabled && !readOnly) {
@@ -394,7 +462,7 @@ var FileUpload = ({
 };
 FileUpload.displayName = "FileUpload";
 var useFileUploadContext = () => {
-  const context = (0, import_react2.useContext)(FileUploadContext);
+  const context = (0, import_react3.useContext)(FileUploadContext);
   if (!context) {
     throw Error("useFileUploadContext must be used within a FileUpload provider");
   }
@@ -403,13 +471,14 @@ var useFileUploadContext = () => {
 
 // src/file-upload/FileUploadAcceptedFile.tsx
 var import_class_variance_authority10 = require("class-variance-authority");
+var import_react11 = require("react");
 
 // src/icon/Icon.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/slot/Slot.tsx
 var import_radix_ui = require("radix-ui");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Slottable = import_radix_ui.Slot.Slottable;
 var Slot = ({ ref, ...props }) => {
@@ -417,7 +486,7 @@ var Slot = ({ ref, ...props }) => {
 };
 var wrapPolymorphicSlot = (asChild, children, callback) => {
   if (!asChild) return callback(children);
-  return (0, import_react3.isValidElement)(children) ? (0, import_react3.cloneElement)(
+  return (0, import_react4.isValidElement)(children) ? (0, import_react4.cloneElement)(
     children,
     void 0,
     callback(children.props.children)
@@ -495,9 +564,9 @@ var Icon = ({
   children,
   ...others
 }) => {
-  const child = import_react4.Children.only(children);
+  const child = import_react5.Children.only(children);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    (0, import_react4.cloneElement)(child, {
+    (0, import_react5.cloneElement)(child, {
       className: iconStyles({ className, size, intent }),
       "data-spark-component": "icon",
       "aria-hidden": "true",
@@ -512,7 +581,7 @@ Icon.displayName = "Icon";
 // src/progress/Progress.tsx
 var import_class_variance_authority4 = require("class-variance-authority");
 var import_radix_ui3 = require("radix-ui");
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/progress/ProgressBar.styles.ts
 var import_class_variance_authority2 = require("class-variance-authority");
@@ -529,11 +598,11 @@ 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 import_react6 = require("react");
+var ProgressContext = (0, import_react6.createContext)(null);
 var ID_PREFIX2 = ":progress";
 var useProgress = () => {
-  const context = (0, import_react5.useContext)(ProgressContext);
+  const context = (0, import_react6.useContext)(ProgressContext);
   if (!context) {
     throw new Error("useProgress must be used within a Progress provider");
   }
@@ -584,10 +653,17 @@ var ProgressIndicator = ({
   className,
   style,
   ref,
+  onTransitionEnd,
   ...others
 }) => {
-  const { value, max, intent, shape, isIndeterminate } = useProgress();
+  const { value, max, intent, shape, isIndeterminate, onComplete } = useProgress();
   const x = (max - value) / max * 100;
+  const handleTransitionEnd = (event) => {
+    onTransitionEnd?.(event);
+    if (value >= max && onComplete && !isIndeterminate) {
+      onComplete();
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_radix_ui2.Progress.ProgressIndicator,
     {
@@ -595,6 +671,7 @@ var ProgressIndicator = ({
       className: progressIndicatorStyles({ className, intent, shape, isIndeterminate }),
       style: { ...style, ...!isIndeterminate && { transform: `translateX(-${x}%)` } },
       ref,
+      onTransitionEnd: handleTransitionEnd,
       ...others
     }
   );
@@ -632,14 +709,23 @@ var Progress = ({
   shape = "square",
   intent = "basic",
   isIndeterminate = false,
+  onComplete,
   children = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProgressBar, {}),
   ref,
   ...others
 }) => {
-  const [labelId, setLabelId] = (0, import_react6.useState)();
-  const value = (0, import_react6.useMemo)(() => {
-    return { value: valueProp ?? 0, max, intent, shape, isIndeterminate, onLabelId: setLabelId };
-  }, [max, valueProp, intent, shape, isIndeterminate, setLabelId]);
+  const [labelId, setLabelId] = (0, import_react7.useState)();
+  const value = (0, import_react7.useMemo)(() => {
+    return {
+      value: valueProp ?? 0,
+      max,
+      intent,
+      shape,
+      isIndeterminate,
+      onLabelId: setLabelId,
+      onComplete
+    };
+  }, [max, valueProp, intent, shape, isIndeterminate, setLabelId, onComplete]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProgressContext.Provider, { "data-spark-component": "progress", value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_radix_ui3.Progress.Progress,
     {
@@ -659,7 +745,7 @@ Progress.displayName = "Progress";
 
 // src/progress/ProgressLabel.tsx
 var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var ProgressLabel = ({
   id: idProp,
@@ -667,10 +753,10 @@ var ProgressLabel = ({
   ref: forwardedRef,
   ...others
 }) => {
-  const internalID = `${ID_PREFIX2}-label-${(0, import_react7.useId)()}`;
+  const internalID = `${ID_PREFIX2}-label-${(0, import_react8.useId)()}`;
   const id = idProp || internalID;
   const { onLabelId } = useProgress();
-  const rootRef = (0, import_react7.useCallback)(
+  const rootRef = (0, import_react8.useCallback)(
     (el) => {
       onLabelId(el ? id : void 0);
     },
@@ -705,11 +791,11 @@ ProgressLabel.displayName = "Progress.Label";
 // src/file-upload/FileUploadItemDeleteTrigger.tsx
 var import_Close = require("@spark-ui/icons/Close");
 var import_class_variance_authority9 = require("class-variance-authority");
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/button/Button.tsx
 var import_class_variance_authority7 = require("class-variance-authority");
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/spinner/Spinner.styles.tsx
 var import_internal_utils2 = require("@spark-ui/internal-utils");
@@ -1514,7 +1600,7 @@ var Button = ({
 }) => {
   const Component = asChild ? Slot : "button";
   const shouldNotInteract = !!disabled || isLoading;
-  const disabledEventHandlers = (0, import_react8.useMemo)(() => {
+  const disabledEventHandlers = (0, import_react9.useMemo)(() => {
     const result = {};
     if (shouldNotInteract) {
       blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
@@ -1621,14 +1707,14 @@ var ItemDeleteTrigger = ({
   ...props
 }) => {
   const { removeFile, triggerRef, dropzoneRef, deleteButtonRefs, disabled, readOnly, files } = useFileUploadContext();
-  const buttonRef = (0, import_react9.useRef)(null);
+  const buttonRef = (0, import_react10.useRef)(null);
   const fileIndex = files.findIndex((f) => f.name === file.name && f.size === file.size);
   const handleClick = (e) => {
     if (disabled || readOnly) {
       return;
     }
     removeFile(fileIndex);
-    setTimeout(() => {
+    requestAnimationFrame(() => {
       const remainingButtons = deleteButtonRefs.current.filter(Boolean);
       if (remainingButtons.length > 0) {
         const targetIndex = Math.min(fileIndex, remainingButtons.length - 1);
@@ -1642,7 +1728,7 @@ var ItemDeleteTrigger = ({
           focusTarget.focus();
         }
       }
-    }, 0);
+    });
     onClick?.(e);
   };
   const setRef = (node) => {
@@ -1679,7 +1765,6 @@ ItemDeleteTrigger.displayName = "FileUpload.ItemDeleteTrigger";
 // src/file-upload/FileUploadAcceptedFile.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var AcceptedFile = ({
-  asChild: _asChild = false,
   className,
   file,
   uploadProgress,
@@ -1688,6 +1773,17 @@ var AcceptedFile = ({
   ...props
 }) => {
   const { locale } = useFileUploadContext();
+  const [showProgress, setShowProgress] = (0, import_react11.useState)(uploadProgress !== void 0);
+  (0, import_react11.useEffect)(() => {
+    if (uploadProgress !== void 0) {
+      setShowProgress(true);
+    } else {
+      setShowProgress(false);
+    }
+  }, [uploadProgress]);
+  const handleProgressComplete = (0, import_react11.useCallback)(() => {
+    setShowProgress(false);
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "li",
     {
@@ -1700,13 +1796,19 @@ var AcceptedFile = ({
       ),
       ...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)("div", { className: "size-sz-36 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: "gap-md relative flex min-w-0 flex-1 flex-row items-center justify-between self-stretch", 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) }),
+          showProgress && uploadProgress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute bottom-0 left-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            Progress2,
+            {
+              value: uploadProgress,
+              max: 100,
+              "aria-label": progressAriaLabel,
+              onComplete: handleProgressComplete
+            }
+          ) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ItemDeleteTrigger, { "aria-label": deleteButtonAriaLabel, file })
       ]
@@ -1730,15 +1832,17 @@ Context.displayName = "FileUpload.Context";
 
 // src/file-upload/FileUploadDropzone.tsx
 var import_class_variance_authority11 = require("class-variance-authority");
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
+var DropzoneContext = (0, import_react12.createContext)(false);
+var useDropzoneContext = () => (0, import_react12.useContext)(DropzoneContext);
 function Dropzone({
   children,
   className,
   unstyled = false
 }) {
   const ctx = useFileUploadContext();
-  const dropzoneRef = (0, import_react10.useRef)(null);
+  const dropzoneRef = (0, import_react12.useRef)(null);
   if (!ctx) throw new Error("FileUploadDropzone must be used inside <FileUpload>");
   const handleDrop = (e) => {
     e.preventDefault();
@@ -1770,7 +1874,7 @@ function Dropzone({
     }
   };
   const isDisabled = ctx.disabled || ctx.readOnly;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropzoneContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       ref: (node) => {
@@ -1814,26 +1918,25 @@ function Dropzone({
       },
       children
     }
-  );
+  ) });
 }
 Dropzone.displayName = "FileUploadDropzone";
 
 // src/file-upload/FileUploadPreviewImage.tsx
 var import_class_variance_authority12 = require("class-variance-authority");
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var PreviewImage = ({
-  asChild: _asChild = false,
   className,
   file,
   fallback = "\u{1F4C4}",
   ...props
 }) => {
-  const [imageError, setImageError] = (0, import_react11.useState)(false);
-  const [imageLoaded, setImageLoaded] = (0, import_react11.useState)(false);
+  const [imageError, setImageError] = (0, import_react13.useState)(false);
+  const [imageLoaded, setImageLoaded] = (0, import_react13.useState)(false);
   const isImage = file.type.startsWith("image/");
   const imageUrl = isImage ? URL.createObjectURL(file) : null;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     return () => {
       if (imageUrl) {
         URL.revokeObjectURL(imageUrl);
@@ -1885,7 +1988,7 @@ 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_authority13 = require("class-variance-authority");
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var RejectedFileDeleteTrigger = ({
   className,
@@ -1894,7 +1997,7 @@ var RejectedFileDeleteTrigger = ({
   ...props
 }) => {
   const { removeRejectedFile, triggerRef, dropzoneRef, disabled, readOnly, rejectedFiles } = useFileUploadContext();
-  const buttonRef = (0, import_react12.useRef)(null);
+  const buttonRef = (0, import_react14.useRef)(null);
   const rejectedFileIndex = rejectedFiles.findIndex(
     (rf) => rf.file.name === rejectedFile.file.name && rf.file.size === rejectedFile.file.size
   );
@@ -1932,7 +2035,6 @@ RejectedFileDeleteTrigger.displayName = "FileUpload.RejectedFileDeleteTrigger";
 // src/file-upload/FileUploadRejectedFile.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var RejectedFile = ({
-  asChild: _asChild = false,
   className,
   rejectedFile,
   renderError,
@@ -1953,7 +2055,7 @@ var RejectedFile = ({
       ),
       ...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: "size-sz-36 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 }),
@@ -1978,10 +2080,13 @@ var Trigger = ({
   unstyled = false,
   design = "filled",
   intent = "basic",
+  size = "md",
+  shape = "rounded",
   ref,
   ...props
 }) => {
   const { inputRef, triggerRef, disabled, readOnly, description, isInvalid, isRequired } = useFileUploadContext();
+  const isInsideDropzone = useDropzoneContext();
   const handleClick = (e) => {
     e.stopPropagation();
     e.preventDefault();
@@ -1989,26 +2094,47 @@ var Trigger = ({
       inputRef.current?.click();
     }
   };
-  const buttonComponent = unstyled ? "button" : Button;
-  const Comp = asChild ? Slot : buttonComponent;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    Comp,
-    {
+  const handleRef = (node) => {
+    if (triggerRef) {
+      triggerRef.current = node;
+    }
+    if (ref) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+  let Component;
+  let componentProps;
+  if (isInsideDropzone) {
+    Component = "span";
+    const spanStyles = unstyled ? className : buttonStyles({
+      design,
+      intent,
+      size,
+      shape,
+      disabled: disabled || readOnly,
+      className
+    });
+    componentProps = {
+      ref: handleRef,
+      "data-spark-component": "file-upload-trigger",
+      className: spanStyles
+      // No onClick, no role, no tabIndex - Dropzone handles interaction
+      // No aria attributes here - they're on the Dropzone
+    };
+  } else {
+    const buttonComponent = unstyled ? "button" : Button;
+    Component = asChild ? Slot : buttonComponent;
+    componentProps = {
+      ref: handleRef,
       type: "button",
-      ref: (node) => {
-        if (triggerRef) {
-          triggerRef.current = node;
-        }
-        if (ref) {
-          if (typeof ref === "function") {
-            ref(node);
-          } else {
-            ref.current = node;
-          }
-        }
-      },
       design,
       intent,
+      size,
+      shape,
       "data-spark-component": "file-upload-trigger",
       className: (0, import_class_variance_authority15.cx)(className),
       disabled: disabled || readOnly,
@@ -2016,10 +2142,10 @@ var Trigger = ({
       "aria-describedby": description,
       "aria-invalid": isInvalid,
       "aria-required": isRequired,
-      ...props,
-      children
-    }
-  );
+      ...props
+    };
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Component, { ...componentProps, children });
 };
 Trigger.displayName = "FileUpload.Trigger";
 
@@ -2048,6 +2174,7 @@ RejectedFile.displayName = "FileUpload.RejectedFile";
 RejectedFileDeleteTrigger.displayName = "FileUpload.RejectedFileDeleteTrigger";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FILE_UPLOAD_ERRORS,
   FileUpload
 });
 //# sourceMappingURL=index.js.map