@spark-ui/components 11.4.1 → 11.4.3

package/dist/file-upload/index.mjs

@@ -127,14 +127,14 @@ var FileUpload = ({
   children,
   defaultValue = [],
   value: controlledValue,
-  onFilesChange,
+  onFileAccept,
+  onFileReject,
+  onFileChange,
   multiple = true,
   accept,
   maxFiles,
-  onMaxFilesReached,
   maxFileSize,
   minFileSize,
-  onFileSizeError,
   disabled = false,
   readOnly = false,
   locale
@@ -144,11 +144,7 @@ var FileUpload = ({
   const triggerRef = useRef(null);
   const dropzoneRef = useRef(null);
   const deleteButtonRefs = useRef([]);
-  const [filesState, setFilesState, ,] = useCombinedState(
-    controlledValue,
-    defaultValue,
-    onFilesChange
-  );
+  const [filesState, setFilesState, ,] = useCombinedState(controlledValue, defaultValue);
   const files = filesState ?? [];
   const setFiles = setFilesState;
   const [rejectedFiles, setRejectedFiles] = useState([]);
@@ -177,9 +173,6 @@ var FileUpload = ({
           errors: [error]
         });
       }
-      if (onFileSizeError) {
-        onFileSizeError(file, error);
-      }
     };
     setFiles((prev) => {
       const currentFiles = prev ?? [];
@@ -243,19 +236,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 +269,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 +292,12 @@ var FileUpload = ({
     setFiles([]);
     setRejectedFiles([]);
     deleteButtonRefs.current = [];
+    if (onFileChange) {
+      onFileChange({
+        acceptedFiles: [],
+        rejectedFiles: []
+      });
+    }
   };
   const removeRejectedFile = (index) => {
     if (disabled || readOnly) {
@@ -353,45 +370,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,103 +422,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": `Upload progress: ${uploadProgress}%`
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx6(ItemDeleteTrigger, { "aria-label": "Delete file", 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,
@@ -533,12 +493,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
 }) {
@@ -553,7 +512,6 @@ function Dropzone({
       return;
     }
     const files = e.dataTransfer.files;
-    onFiles?.(files);
     let filesArray = [];
     if (files) {
       filesArray = Array.isArray(files) ? [...files] : Array.from(files);
@@ -576,7 +534,7 @@ function Dropzone({
     }
   };
   const isDisabled = ctx.disabled || ctx.readOnly;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       ref: (node) => {
@@ -594,12 +552,12 @@ function Dropzone({
       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",
@@ -622,9 +580,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,
@@ -644,11 +602,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
         ),
@@ -661,20 +619,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 })
       ]
     }
   );
@@ -683,21 +641,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;
@@ -711,58 +672,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": `Remove ${rejectedFile.file.name} error`,
-        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,
@@ -783,7 +752,7 @@ var Trigger = ({
   };
   const buttonComponent = unstyled ? "button" : Button;
   const Comp = asChild ? Slot : buttonComponent;
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx9(
     Comp,
     {
       type: "button",
@@ -802,7 +771,7 @@ var Trigger = ({
       design,
       intent,
       "data-spark-component": "file-upload-trigger",
-      className: cx9(className),
+      className: cx7(className),
       disabled: disabled || readOnly,
       onClick: handleClick,
       ...props,
@@ -814,25 +783,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";