@spark-ui/components 11.2.4 → 11.3.0

package/dist/file-upload/index.mjs

@@ -0,0 +1,828 @@
+import {
+  Progress
+} from "../chunk-TKAU6SMC.mjs";
+import {
+  IconButton
+} from "../chunk-XYK6V3JF.mjs";
+import {
+  Icon
+} from "../chunk-UMUMFMFB.mjs";
+import {
+  Button
+} from "../chunk-HEKSVWYW.mjs";
+import "../chunk-GAK4SC2F.mjs";
+import "../chunk-KEGAAGJW.mjs";
+import {
+  Slot
+} from "../chunk-6QCEPQ3U.mjs";
+
+// src/file-upload/FileUpload.tsx
+import { useCombinedState } from "@spark-ui/hooks/use-combined-state";
+import { createContext, useContext, useRef, useState } from "react";
+
+// src/file-upload/utils.ts
+function validateFileAccept(file, accept) {
+  if (!accept) {
+    return true;
+  }
+  const patterns = accept.split(",").map((pattern) => pattern.trim());
+  return patterns.some((pattern) => {
+    if (pattern.includes("/")) {
+      if (pattern.endsWith("/*")) {
+        const baseType = pattern.slice(0, -2);
+        return file.type.startsWith(baseType + "/");
+      }
+      return file.type === pattern;
+    }
+    if (pattern.startsWith(".")) {
+      const extension2 = pattern.toLowerCase();
+      const fileName2 = file.name.toLowerCase();
+      return fileName2.endsWith(extension2);
+    }
+    const extension = "." + pattern.toLowerCase();
+    const fileName = file.name.toLowerCase();
+    return fileName.endsWith(extension);
+  });
+}
+function validateFileSize(file, minFileSize, maxFileSize, locale) {
+  const defaultLocale = locale || getDefaultLocale();
+  if (minFileSize !== void 0 && file.size < minFileSize) {
+    const errorMessage = `File "${file.name}" is too small. Minimum size is ${formatFileSize(minFileSize, defaultLocale)}.`;
+    return {
+      valid: false,
+      error: errorMessage
+    };
+  }
+  if (maxFileSize !== void 0 && file.size > maxFileSize) {
+    const errorMessage = `File "${file.name}" is too large. Maximum size is ${formatFileSize(maxFileSize, defaultLocale)}.`;
+    return {
+      valid: false,
+      error: errorMessage
+    };
+  }
+  return { valid: true };
+}
+function getDefaultLocale() {
+  if (typeof navigator !== "undefined" && navigator.language) {
+    return navigator.language;
+  }
+  return "en";
+}
+function formatFileSize(bytes, locale) {
+  const defaultLocale = locale || getDefaultLocale();
+  let normalizedLocale = defaultLocale;
+  if (defaultLocale.length === 2) {
+    normalizedLocale = defaultLocale === "fr" ? "fr-FR" : "en-US";
+  }
+  if (bytes === 0) {
+    const formatter2 = new Intl.NumberFormat(normalizedLocale, {
+      style: "unit",
+      unit: "byte",
+      unitDisplay: "long",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    });
+    return formatter2.format(0);
+  }
+  const k = 1024;
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const units = ["byte", "kilobyte", "megabyte", "gigabyte"];
+  const unit = units[i] || "byte";
+  const size = bytes / Math.pow(k, i);
+  const unitDisplay = i === 0 ? "long" : "short";
+  const formatter = new Intl.NumberFormat(normalizedLocale, {
+    style: "unit",
+    unit,
+    unitDisplay,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2
+  });
+  return formatter.format(size);
+}
+
+// src/file-upload/FileUpload.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var FileUploadContext = createContext(null);
+var FileUpload = ({
+  asChild: _asChild = false,
+  children,
+  defaultValue = [],
+  value: controlledValue,
+  onFilesChange,
+  multiple = true,
+  accept,
+  maxFiles,
+  onMaxFilesReached,
+  maxFileSize,
+  minFileSize,
+  onFileSizeError,
+  disabled = false,
+  readOnly = false,
+  locale
+}) => {
+  const defaultLocale = locale || (typeof navigator !== "undefined" && navigator.language ? navigator.language : "en");
+  const inputRef = useRef(null);
+  const triggerRef = useRef(null);
+  const dropzoneRef = useRef(null);
+  const deleteButtonRefs = useRef([]);
+  const [filesState, setFilesState, ,] = useCombinedState(
+    controlledValue,
+    defaultValue,
+    onFilesChange
+  );
+  const files = filesState ?? [];
+  const setFiles = setFilesState;
+  const [rejectedFiles, setRejectedFiles] = useState([]);
+  const addFiles = (newFiles) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    setRejectedFiles([]);
+    const newRejectedFiles = [];
+    const fileExists = (file, existingFiles) => {
+      return existingFiles.some(
+        (existingFile) => existingFile.name === file.name && existingFile.size === file.size
+      );
+    };
+    const addRejectedFile = (file, error) => {
+      const existingRejection = newRejectedFiles.find(
+        (rejected) => rejected.file.name === file.name && rejected.file.size === file.size
+      );
+      if (existingRejection) {
+        if (!existingRejection.errors.includes(error)) {
+          existingRejection.errors.push(error);
+        }
+      } else {
+        newRejectedFiles.push({
+          file,
+          errors: [error]
+        });
+      }
+      if (onFileSizeError) {
+        onFileSizeError(file, error);
+      }
+    };
+    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");
+          });
+        }
+      }
+      let filteredFiles = newFiles;
+      if (accept) {
+        const rejectedByAccept = newFiles.filter((file) => !validateFileAccept(file, accept));
+        rejectedByAccept.forEach((file) => {
+          addRejectedFile(file, "FILE_INVALID_TYPE");
+        });
+        filteredFiles = newFiles.filter((file) => validateFileAccept(file, accept));
+      }
+      let validSizeFiles = filteredFiles;
+      if (minFileSize !== void 0 || maxFileSize !== void 0) {
+        validSizeFiles = filteredFiles.filter((file) => {
+          const validation = validateFileSize(file, minFileSize, maxFileSize, defaultLocale);
+          if (!validation.valid) {
+            if (maxFileSize !== void 0 && file.size > maxFileSize) {
+              addRejectedFile(file, "FILE_TOO_LARGE");
+            } else if (minFileSize !== void 0 && file.size < minFileSize) {
+              addRejectedFile(file, "FILE_TOO_SMALL");
+            } else {
+              addRejectedFile(file, "FILE_INVALID");
+            }
+            return false;
+          }
+          return true;
+        });
+      }
+      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");
+          return false;
+        }
+        if (seenFiles.has(fileKey)) {
+          duplicateFiles.push(file);
+          addRejectedFile(file, "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 <= 0) {
+          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);
+      return updated;
+    });
+  };
+  const removeFile = (index) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    setFiles((prev) => {
+      const currentFiles = prev ?? [];
+      const updated = currentFiles.filter((_, i) => i !== index);
+      if (maxFiles !== void 0 && updated.length < maxFiles) {
+        setRejectedFiles(
+          (prevRejected) => prevRejected.filter((rejected) => !rejected.errors.includes("TOO_MANY_FILES"))
+        );
+      }
+      return updated;
+    });
+  };
+  const clearFiles = () => {
+    if (disabled || readOnly) {
+      return;
+    }
+    setFiles([]);
+    setRejectedFiles([]);
+    deleteButtonRefs.current = [];
+  };
+  const removeRejectedFile = (index) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    setRejectedFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+  const clearRejectedFiles = () => {
+    setRejectedFiles([]);
+  };
+  const maxFilesReached = maxFiles !== void 0 && files.length >= maxFiles;
+  return /* @__PURE__ */ jsx(
+    FileUploadContext.Provider,
+    {
+      value: {
+        inputRef,
+        files,
+        rejectedFiles,
+        addFiles,
+        removeFile,
+        removeRejectedFile,
+        clearFiles,
+        clearRejectedFiles,
+        triggerRef,
+        dropzoneRef,
+        deleteButtonRefs,
+        multiple,
+        maxFiles,
+        maxFilesReached,
+        disabled,
+        readOnly,
+        locale: defaultLocale
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            tabIndex: -1,
+            id: "image_uploads",
+            multiple,
+            name: "image_uploads",
+            accept,
+            disabled,
+            readOnly: readOnly && !disabled,
+            className: "sr-only",
+            onChange: (e) => {
+              if (e.target.files && !disabled && !readOnly) {
+                addFiles(Array.from(e.target.files));
+                try {
+                  e.target.value = "";
+                } catch {
+                }
+              }
+            }
+          }
+        )
+      ] })
+    }
+  );
+};
+FileUpload.displayName = "FileUpload";
+var useFileUploadContext = () => {
+  const context = useContext(FileUploadContext);
+  if (!context) {
+    throw Error("useFileUploadContext must be used within a FileUpload provider");
+  }
+  return context;
+};
+
+// src/file-upload/FileUploadAcceptedFile.tsx
+import { CvOutline } from "@spark-ui/icons/CvOutline";
+
+// 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/FileUploadItemDeleteTrigger.tsx
+import { Close } from "@spark-ui/icons/Close";
+import { cx as cx2 } from "class-variance-authority";
+import { useRef as useRef2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ItemDeleteTrigger = ({
+  className,
+  fileIndex,
+  onClick,
+  ...props
+}) => {
+  const { removeFile, triggerRef, dropzoneRef, deleteButtonRefs, disabled, readOnly } = useFileUploadContext();
+  const buttonRef = useRef2(null);
+  const handleClick = (e) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    removeFile(fileIndex);
+    setTimeout(() => {
+      const remainingButtons = deleteButtonRefs.current.filter(Boolean);
+      if (remainingButtons.length > 0) {
+        const targetIndex = Math.min(fileIndex, remainingButtons.length - 1);
+        const nextButton = remainingButtons[targetIndex];
+        if (nextButton) {
+          nextButton.focus();
+        }
+      } else {
+        const focusTarget = triggerRef.current || dropzoneRef.current;
+        if (focusTarget) {
+          focusTarget.focus();
+        }
+      }
+    }, 0);
+    onClick?.(e);
+  };
+  const setRef = (node) => {
+    buttonRef.current = node;
+    if (node) {
+      while (deleteButtonRefs.current.length <= fileIndex) {
+        deleteButtonRefs.current.push(null);
+      }
+      deleteButtonRefs.current[fileIndex] = node;
+    } else {
+      if (deleteButtonRefs.current[fileIndex]) {
+        deleteButtonRefs.current[fileIndex] = null;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx3(
+    IconButton,
+    {
+      ref: setRef,
+      "data-spark-component": "file-upload-item-delete-trigger",
+      className: cx2(className),
+      onClick: handleClick,
+      disabled: disabled || readOnly,
+      size: "sm",
+      design: "contrast",
+      intent: "surface",
+      ...props,
+      children: /* @__PURE__ */ jsx3(Icon, { size: "sm", children: /* @__PURE__ */ jsx3(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";
+var AcceptedFile = ({
+  asChild: _asChild = false,
+  className,
+  file,
+  fileIndex,
+  uploadProgress,
+  ...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: /* @__PURE__ */ jsx6(CvOutline, {}) }) }),
+    /* @__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 })
+  ] });
+};
+AcceptedFile.displayName = "FileUpload.AcceptedFile";
+
+// src/file-upload/FileUploadContext.tsx
+import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
+var Context = ({ children }) => {
+  const { files = [], rejectedFiles = [], locale } = useFileUploadContext();
+  return /* @__PURE__ */ jsx7(Fragment, { children: children({
+    acceptedFiles: files,
+    rejectedFiles,
+    formatFileSize,
+    locale
+  }) });
+};
+Context.displayName = "FileUpload.Context";
+
+// src/file-upload/FileUploadDropzone.tsx
+import { cx as cx5 } from "class-variance-authority";
+import { useRef as useRef3 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Dropzone({
+  children,
+  onFiles,
+  className,
+  unstyled = false
+}) {
+  const ctx = useFileUploadContext();
+  const dropzoneRef = useRef3(null);
+  if (!ctx) throw new Error("FileUploadDropzone must be used inside <FileUpload>");
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.currentTarget.setAttribute("data-drag-over", "false");
+    if (ctx.disabled || ctx.readOnly) {
+      return;
+    }
+    const files = e.dataTransfer.files;
+    onFiles?.(files);
+    let filesArray = [];
+    if (files) {
+      filesArray = Array.isArray(files) ? [...files] : Array.from(files);
+    }
+    if (filesArray.length > 0) {
+      ctx.addFiles(filesArray);
+    }
+  };
+  const handleClick = () => {
+    if (!ctx.disabled && !ctx.readOnly) {
+      ctx.inputRef.current?.click();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (!ctx.disabled && !ctx.readOnly) {
+        ctx.inputRef.current?.click();
+      }
+    }
+  };
+  const isDisabled = ctx.disabled || ctx.readOnly;
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ref: (node) => {
+        dropzoneRef.current = node;
+        if (ctx.dropzoneRef) {
+          ctx.dropzoneRef.current = node;
+        }
+      },
+      role: "button",
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-disabled": ctx.disabled ? true : void 0,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onDrop: handleDrop,
+      onDragOver: (e) => {
+        e.preventDefault();
+      },
+      className: unstyled ? className : cx5(
+        "default:bg-surface default:border-sm default:border-outline default:rounded-lg default:border-dashed",
+        "gap-lg flex flex-col items-center justify-center text-center",
+        "default:p-xl",
+        "transition-colors duration-200",
+        !isDisabled && "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",
+        // ReadOnly: less visually disabled (just cursor, no opacity)
+        ctx.readOnly && !ctx.disabled && "cursor-default",
+        className
+      ),
+      onDragEnter: (e) => {
+        if (!isDisabled) {
+          e.currentTarget.setAttribute("data-drag-over", "true");
+        }
+      },
+      onDragLeave: (e) => {
+        e.currentTarget.setAttribute("data-drag-over", "false");
+      },
+      children
+    }
+  );
+}
+Dropzone.displayName = "FileUploadDropzone";
+
+// src/file-upload/FileUploadPreviewImage.tsx
+import { cx as cx6 } from "class-variance-authority";
+import { useEffect, useState as useState2 } from "react";
+import { jsx as jsx9, 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 isImage = file.type.startsWith("image/");
+  const imageUrl = isImage ? URL.createObjectURL(file) : null;
+  useEffect(() => {
+    return () => {
+      if (imageUrl) {
+        URL.revokeObjectURL(imageUrl);
+      }
+    };
+  }, [imageUrl]);
+  if (!isImage || imageError) {
+    return /* @__PURE__ */ jsx9(
+      "div",
+      {
+        "data-spark-component": "file-upload-preview-image",
+        className: cx6(
+          "bg-neutral-container flex items-center justify-center rounded-md",
+          className
+        ),
+        ...props,
+        children: fallback
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-spark-component": "file-upload-preview-image",
+      className: cx6("bg-neutral-container overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx9(
+          "img",
+          {
+            src: imageUrl,
+            alt: file.name,
+            className: cx6("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 })
+      ]
+    }
+  );
+};
+PreviewImage.displayName = "FileUpload.PreviewImage";
+
+// src/file-upload/FileUploadRejectedFile.tsx
+import { WarningOutline } from "@spark-ui/icons/WarningOutline";
+import { cx as cx8 } 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 { useRef as useRef4 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var RejectedFileDeleteTrigger = ({
+  className,
+  rejectedFileIndex,
+  onClick,
+  ...props
+}) => {
+  const { removeRejectedFile, triggerRef, dropzoneRef, disabled, readOnly } = useFileUploadContext();
+  const buttonRef = useRef4(null);
+  const handleClick = (e) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    removeRejectedFile(rejectedFileIndex);
+    setTimeout(() => {
+      const focusTarget = triggerRef.current || dropzoneRef.current;
+      if (focusTarget) {
+        focusTarget.focus();
+      }
+    }, 0);
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsx10(
+    IconButton,
+    {
+      ref: buttonRef,
+      "data-spark-component": "file-upload-rejected-file-delete-trigger",
+      className: cx7(className),
+      onClick: handleClick,
+      disabled: disabled || readOnly,
+      size: "sm",
+      design: "contrast",
+      intent: "surface",
+      ...props,
+      children: /* @__PURE__ */ jsx10(Icon, { size: "sm", children: /* @__PURE__ */ jsx10(Close2, {}) })
+    }
+  );
+};
+RejectedFileDeleteTrigger.displayName = "FileUpload.RejectedFileDeleteTrigger";
+
+// src/file-upload/FileUploadRejectedFile.tsx
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+var RejectedFile = ({
+  asChild: _asChild = false,
+  className,
+  rejectedFile,
+  rejectedFileIndex,
+  renderError,
+  ...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
+      }
+    )
+  ] });
+};
+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";
+var Trigger = ({
+  className,
+  children,
+  asChild = false,
+  unstyled = false,
+  design = "filled",
+  intent = "basic",
+  ref,
+  ...props
+}) => {
+  const { inputRef, triggerRef, disabled, readOnly } = useFileUploadContext();
+  const handleClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!disabled && !readOnly) {
+      inputRef.current?.click();
+    }
+  };
+  const buttonComponent = unstyled ? "button" : Button;
+  const Comp = asChild ? Slot : buttonComponent;
+  return /* @__PURE__ */ jsx12(
+    Comp,
+    {
+      type: "button",
+      ref: (node) => {
+        if (triggerRef) {
+          triggerRef.current = node;
+        }
+        if (ref) {
+          if (typeof ref === "function") {
+            ref(node);
+          } else {
+            ref.current = node;
+          }
+        }
+      },
+      design,
+      intent,
+      "data-spark-component": "file-upload-trigger",
+      className: cx9(className),
+      disabled: disabled || readOnly,
+      onClick: handleClick,
+      ...props,
+      children
+    }
+  );
+};
+Trigger.displayName = "FileUpload.Trigger";
+
+// src/file-upload/index.ts
+var FileUpload2 = Object.assign(FileUpload, {
+  Trigger,
+  Dropzone,
+  Context,
+  Item,
+  ItemFileName,
+  ItemSizeText,
+  ItemDeleteTrigger,
+  PreviewImage,
+  AcceptedFile,
+  RejectedFile,
+  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";
+RejectedFile.displayName = "FileUpload.RejectedFile";
+RejectedFileDeleteTrigger.displayName = "FileUpload.RejectedFileDeleteTrigger";
+export {
+  FileUpload2 as FileUpload
+};
+//# sourceMappingURL=index.mjs.map