@spark-ui/components 11.5.0 → 11.6.0

package/dist/file-upload/index.mjs

@@ -1,15 +1,16 @@
 import {
   Progress
-} from "../chunk-TKAU6SMC.mjs";
+} from "../chunk-7EWSMIZU.mjs";
 import {
   IconButton
-} from "../chunk-XYK6V3JF.mjs";
+} from "../chunk-DCXWGQVZ.mjs";
 import {
   Icon
 } from "../chunk-UMUMFMFB.mjs";
 import {
-  Button
-} from "../chunk-HEKSVWYW.mjs";
+  Button,
+  buttonStyles
+} from "../chunk-2YM6GKWW.mjs";
 import "../chunk-GAK4SC2F.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import {
@@ -18,8 +19,39 @@ import {
 
 // src/file-upload/FileUpload.tsx
 import { useFormFieldControl } from "@spark-ui/components/form-field";
+import { createContext, useContext, useId, useRef } from "react";
+
+// src/file-upload/useFileUploadState.tsx
 import { useCombinedState } from "@spark-ui/hooks/use-combined-state";
-import { createContext, useContext, useId, useRef, useState } from "react";
+import { useState } from "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
 import { CvOutline } from "@spark-ui/icons/CvOutline";
@@ -120,13 +152,8 @@ function getFileIcon(file) {
   return createElement(CvOutline);
 }
 
-// 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,
+// src/file-upload/useFileUploadState.tsx
+function useFileUploadState({
   defaultValue = [],
   value: controlledValue,
   onFileAccept,
@@ -137,31 +164,12 @@ var FileUpload = ({
   maxFiles,
   maxFileSize,
   minFileSize,
-  disabled: disabledProp = false,
-  readOnly: readOnlyProp = false,
+  disabled = false,
+  readOnly = 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 disabled = fieldDisabled ?? disabledProp;
-  const readOnly = fieldReadOnly ?? readOnlyProp;
-  const [filesState, setFilesState, ,] = useCombinedState(controlledValue, defaultValue);
+  const [filesState, setFilesState] = useCombinedState(controlledValue, defaultValue);
   const files = filesState ?? [];
   const setFiles = setFilesState;
   const [rejectedFiles, setRejectedFiles] = useState([]);
@@ -193,20 +201,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));
       }
@@ -216,11 +221,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;
           }
@@ -228,35 +233,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 = [];
         }
@@ -289,7 +286,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);
       }
@@ -308,7 +305,6 @@ var FileUpload = ({
     }
     setFiles([]);
     setRejectedFiles([]);
-    deleteButtonRefs.current = [];
     if (onFileChange) {
       onFileChange({
         acceptedFiles: [],
@@ -326,6 +322,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
+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,
+  onFileAccept,
+  onFileReject,
+  onFileChange,
+  multiple = true,
+  accept,
+  maxFiles,
+  maxFileSize,
+  minFileSize,
+  disabled: disabledProp = false,
+  readOnly: readOnlyProp = false,
+  locale
+}) => {
+  const field = useFormFieldControl();
+  const internalId = useId();
+  const inputId = field.id || `${ID_PREFIX}-${internalId}`;
+  const inputName = field.name;
+  const inputRef = useRef(null);
+  const triggerRef = useRef(null);
+  const dropzoneRef = useRef(null);
+  const deleteButtonRefs = 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__ */ jsx(
     FileUploadContext.Provider,
     {
@@ -346,10 +413,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__ */ jsxs("div", { className: "relative", children: [
         children,
@@ -365,9 +432,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) {
@@ -395,6 +463,7 @@ var useFileUploadContext = () => {
 
 // src/file-upload/FileUploadAcceptedFile.tsx
 import { cx as cx2 } from "class-variance-authority";
+import { useCallback, useEffect, useState as useState2 } from "react";
 
 // src/file-upload/FileUploadItemDeleteTrigger.tsx
 import { Close } from "@spark-ui/icons/Close";
@@ -415,7 +484,7 @@ var ItemDeleteTrigger = ({
       return;
     }
     removeFile(fileIndex);
-    setTimeout(() => {
+    requestAnimationFrame(() => {
       const remainingButtons = deleteButtonRefs.current.filter(Boolean);
       if (remainingButtons.length > 0) {
         const targetIndex = Math.min(fileIndex, remainingButtons.length - 1);
@@ -429,7 +498,7 @@ var ItemDeleteTrigger = ({
           focusTarget.focus();
         }
       }
-    }, 0);
+    });
     onClick?.(e);
   };
   const setRef = (node) => {
@@ -466,7 +535,6 @@ ItemDeleteTrigger.displayName = "FileUpload.ItemDeleteTrigger";
 // src/file-upload/FileUploadAcceptedFile.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var AcceptedFile = ({
-  asChild: _asChild = false,
   className,
   file,
   uploadProgress,
@@ -475,6 +543,17 @@ var AcceptedFile = ({
   ...props
 }) => {
   const { locale } = useFileUploadContext();
+  const [showProgress, setShowProgress] = useState2(uploadProgress !== void 0);
+  useEffect(() => {
+    if (uploadProgress !== void 0) {
+      setShowProgress(true);
+    } else {
+      setShowProgress(false);
+    }
+  }, [uploadProgress]);
+  const handleProgressComplete = useCallback(() => {
+    setShowProgress(false);
+  }, []);
   return /* @__PURE__ */ jsxs2(
     "li",
     {
@@ -487,13 +566,19 @@ var AcceptedFile = ({
       ),
       ...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("div", { className: "size-sz-36 bg-support-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ jsx3(Icon, { size: "md", children: getFileIcon(file) }) }),
+        /* @__PURE__ */ jsxs2("div", { className: "gap-md relative flex min-w-0 flex-1 flex-row items-center justify-between self-stretch", 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) }),
+          showProgress && uploadProgress !== void 0 && /* @__PURE__ */ jsx3("div", { className: "absolute bottom-0 left-0 w-full", children: /* @__PURE__ */ jsx3(
+            Progress,
+            {
+              value: uploadProgress,
+              max: 100,
+              "aria-label": progressAriaLabel,
+              onComplete: handleProgressComplete
+            }
+          ) })
         ] }),
         /* @__PURE__ */ jsx3(ItemDeleteTrigger, { "aria-label": deleteButtonAriaLabel, file })
       ]
@@ -517,8 +602,10 @@ Context.displayName = "FileUpload.Context";
 
 // src/file-upload/FileUploadDropzone.tsx
 import { cx as cx3 } from "class-variance-authority";
-import { useRef as useRef3 } from "react";
+import { createContext as createContext2, useContext as useContext2, useRef as useRef3 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
+var DropzoneContext = createContext2(false);
+var useDropzoneContext = () => useContext2(DropzoneContext);
 function Dropzone({
   children,
   className,
@@ -557,7 +644,7 @@ function Dropzone({
     }
   };
   const isDisabled = ctx.disabled || ctx.readOnly;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx5(DropzoneContext.Provider, { value: true, children: /* @__PURE__ */ jsx5(
     "div",
     {
       ref: (node) => {
@@ -601,26 +688,25 @@ function Dropzone({
       },
       children
     }
-  );
+  ) });
 }
 Dropzone.displayName = "FileUploadDropzone";
 
 // src/file-upload/FileUploadPreviewImage.tsx
 import { cx as cx4 } from "class-variance-authority";
-import { useEffect, useState as useState2 } from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var PreviewImage = ({
-  asChild: _asChild = false,
   className,
   file,
   fallback = "\u{1F4C4}",
   ...props
 }) => {
-  const [imageError, setImageError] = useState2(false);
-  const [imageLoaded, setImageLoaded] = useState2(false);
+  const [imageError, setImageError] = useState3(false);
+  const [imageLoaded, setImageLoaded] = useState3(false);
   const isImage = file.type.startsWith("image/");
   const imageUrl = isImage ? URL.createObjectURL(file) : null;
-  useEffect(() => {
+  useEffect2(() => {
     return () => {
       if (imageUrl) {
         URL.revokeObjectURL(imageUrl);
@@ -719,7 +805,6 @@ RejectedFileDeleteTrigger.displayName = "FileUpload.RejectedFileDeleteTrigger";
 // src/file-upload/FileUploadRejectedFile.tsx
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var RejectedFile = ({
-  asChild: _asChild = false,
   className,
   rejectedFile,
   renderError,
@@ -740,7 +825,7 @@ var RejectedFile = ({
       ),
       ...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: "size-sz-36 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 }),
@@ -765,10 +850,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();
@@ -776,26 +864,47 @@ var Trigger = ({
       inputRef.current?.click();
     }
   };
-  const buttonComponent = unstyled ? "button" : Button;
-  const Comp = asChild ? Slot : buttonComponent;
-  return /* @__PURE__ */ jsx9(
-    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: cx7(className),
       disabled: disabled || readOnly,
@@ -803,10 +912,10 @@ var Trigger = ({
       "aria-describedby": description,
       "aria-invalid": isInvalid,
       "aria-required": isRequired,
-      ...props,
-      children
-    }
-  );
+      ...props
+    };
+  }
+  return /* @__PURE__ */ jsx9(Component, { ...componentProps, children });
 };
 Trigger.displayName = "FileUpload.Trigger";
 
@@ -834,6 +943,7 @@ AcceptedFile.displayName = "FileUpload.AcceptedFile";
 RejectedFile.displayName = "FileUpload.RejectedFile";
 RejectedFileDeleteTrigger.displayName = "FileUpload.RejectedFileDeleteTrigger";
 export {
+  FILE_UPLOAD_ERRORS,
   FileUpload2 as FileUpload
 };
 //# sourceMappingURL=index.mjs.map