@spark-ui/components 13.1.3 → 13.1.4

package/dist/file-upload/index.mjs

@@ -1,20 +1,32 @@
-import { jsx as s, jsxs as M, Fragment as Fe } from "react/jsx-runtime";
-import { useFormFieldControl as be } from "../form-field/index.mjs";
-import { createElement as X, useState as G, createContext as se, useId as he, useRef as z, useContext as le, useEffect as de, useCallback as ye } from "react";
-import { useCombinedState as Ie } from "@spark-ui/hooks/use-combined-state";
-import { CvOutline as Re } from "@spark-ui/icons/CvOutline";
-import { FilePdfOutline as Le } from "@spark-ui/icons/FilePdfOutline";
-import { ImageOutline as Ne } from "@spark-ui/icons/ImageOutline";
-import { PlayOutline as xe } from "@spark-ui/icons/PlayOutline";
-import { a as _ } from "../index-BmAFn37q.mjs";
-import { I as K } from "../Icon-D1RueiPY.mjs";
-import { Progress as Ee } from "../progress/index.mjs";
-import { Close as ce } from "@spark-ui/icons/Close";
-import { I as ue } from "../IconButton-BY3gYXtU.mjs";
-import { WarningOutline as je } from "@spark-ui/icons/WarningOutline";
-import { b as Te, B as De } from "../Button-D32Avk2j.mjs";
-import { a as Oe } from "../Slot-C98rL4yy.mjs";
-const O = {
+import {
+  Progress
+} from "../chunk-7EWSMIZU.mjs";
+import {
+  IconButton
+} from "../chunk-DCXWGQVZ.mjs";
+import {
+  Icon
+} from "../chunk-UMUMFMFB.mjs";
+import {
+  Button,
+  buttonStyles
+} from "../chunk-2YM6GKWW.mjs";
+import "../chunk-GAK4SC2F.mjs";
+import "../chunk-KEGAAGJW.mjs";
+import {
+  Slot
+} from "../chunk-6QCEPQ3U.mjs";
+
+// 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 { useState } from "react";
+
+// src/file-upload/constants.ts
+var FILE_UPLOAD_ERRORS = {
   /**
    * Exceeds the maxFiles limit
    */
@@ -40,256 +52,425 @@ const O = {
    */
   FILE_EXISTS: "FILE_EXISTS"
 };
-function oe(t, r) {
-  return r ? r.split(",").map((e) => e.trim()).some((e) => {
-    if (e.includes("/")) {
-      if (e.endsWith("/*")) {
-        const d = e.slice(0, -2);
-        return t.type.startsWith(d + "/");
+
+// src/file-upload/utils.ts
+import { CvOutline } from "@spark-ui/icons/CvOutline";
+import { FilePdfOutline } from "@spark-ui/icons/FilePdfOutline";
+import { ImageOutline } from "@spark-ui/icons/ImageOutline";
+import { PlayOutline } from "@spark-ui/icons/PlayOutline";
+import { createElement } from "react";
+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 t.type === e;
+      return file.type === pattern;
     }
-    if (e.startsWith(".")) {
-      const d = e.toLowerCase();
-      return t.name.toLowerCase().endsWith(d);
+    if (pattern.startsWith(".")) {
+      const extension2 = pattern.toLowerCase();
+      const fileName2 = file.name.toLowerCase();
+      return fileName2.endsWith(extension2);
     }
-    const o = "." + e.toLowerCase();
-    return t.name.toLowerCase().endsWith(o);
-  }) : !0;
+    const extension = "." + pattern.toLowerCase();
+    const fileName = file.name.toLowerCase();
+    return fileName.endsWith(extension);
+  });
 }
-function _e(t, r, i, e) {
-  const o = e || fe();
-  return r !== void 0 && t.size < r ? {
-    valid: !1,
-    error: `File "${t.name}" is too small. Minimum size is ${W(r, o)}.`
-  } : i !== void 0 && t.size > i ? {
-    valid: !1,
-    error: `File "${t.name}" is too large. Maximum size is ${W(i, o)}.`
-  } : { valid: !0 };
+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 fe() {
-  return typeof navigator < "u" && navigator.language ? navigator.language : "en";
+function getDefaultLocale() {
+  if (typeof navigator !== "undefined" && navigator.language) {
+    return navigator.language;
+  }
+  return "en";
 }
-function W(t, r) {
-  const i = r || fe();
-  let e = i;
-  if (i.length === 2 && (e = i === "fr" ? "fr-FR" : "en-US"), t === 0)
-    return new Intl.NumberFormat(e, {
+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
-    }).format(0);
-  const o = 1024, c = Math.floor(Math.log(t) / Math.log(o)), a = ["byte", "kilobyte", "megabyte", "gigabyte"][c] || "byte", l = t / Math.pow(o, c), n = c === 0 ? "long" : "short";
-  return new Intl.NumberFormat(e, {
+    });
+    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: a,
-    unitDisplay: n,
+    unit,
+    unitDisplay,
     minimumFractionDigits: 0,
     maximumFractionDigits: 2
-  }).format(l);
+  });
+  return formatter.format(size);
 }
-function we(t) {
-  const r = t.type.toLowerCase(), i = t.name.toLowerCase();
-  return r.startsWith("image/") || /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(i) ? X(Ne) : r === "application/pdf" || i.endsWith(".pdf") ? X(Le) : r.startsWith("video/") || /\.(mp4|avi|mov|wmv|flv|webm|mkv)$/i.test(i) ? X(xe) : X(Re);
+function getFileIcon(file) {
+  const fileType = file.type.toLowerCase();
+  const fileName = file.name.toLowerCase();
+  if (fileType.startsWith("image/") || /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(fileName)) {
+    return createElement(ImageOutline);
+  }
+  if (fileType === "application/pdf" || fileName.endsWith(".pdf")) {
+    return createElement(FilePdfOutline);
+  }
+  if (fileType.startsWith("video/") || /\.(mp4|avi|mov|wmv|flv|webm|mkv)$/i.test(fileName)) {
+    return createElement(PlayOutline);
+  }
+  return createElement(CvOutline);
 }
-function Ae(t) {
-  if (!t)
-    return !1;
-  if (t.tabIndex >= 0)
-    return !0;
-  const i = String(t.contentEditable) === "true";
-  return t instanceof HTMLInputElement || t instanceof HTMLButtonElement || t instanceof HTMLSelectElement || t instanceof HTMLTextAreaElement || t instanceof HTMLAnchorElement && !!t.href || i;
+function isFocusable(element) {
+  if (!element) {
+    return false;
+  }
+  const tabIndex = element.tabIndex;
+  if (tabIndex >= 0) {
+    return true;
+  }
+  const isContentEditable = String(element.contentEditable) === "true";
+  const naturallyFocusable = element instanceof HTMLInputElement || element instanceof HTMLButtonElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || element instanceof HTMLAnchorElement && Boolean(element.href) || isContentEditable;
+  return naturallyFocusable;
 }
-function me(t, r) {
-  for (const i of t)
-    if (Ae(i))
-      return i;
-  return r.current ? r.current : null;
+function findFocusableElement(candidates, inputRef) {
+  for (const candidate of candidates) {
+    if (isFocusable(candidate)) {
+      return candidate;
+    }
+  }
+  if (inputRef.current) {
+    return inputRef.current;
+  }
+  return null;
 }
-function ze({
-  defaultValue: t = [],
-  value: r,
-  onFileAccept: i,
-  onFileReject: e,
-  onFileChange: o,
-  multiple: c = !0,
-  accept: d,
-  maxFiles: a,
-  maxFileSize: l,
-  minFileSize: n,
-  disabled: m = !1,
-  readOnly: p = !1,
-  locale: x
+
+// src/file-upload/useFileUploadState.tsx
+function useFileUploadState({
+  defaultValue = [],
+  value: controlledValue,
+  onFileAccept,
+  onFileReject,
+  onFileChange,
+  multiple = true,
+  accept,
+  maxFiles,
+  maxFileSize,
+  minFileSize,
+  disabled = false,
+  readOnly = false,
+  locale
 }) {
-  const f = x || (typeof navigator < "u" && navigator.language ? navigator.language : "en"), [E, F] = Ie(r, t), u = E ?? [], I = F, [b, g] = G([]), U = (j) => {
-    if (m || p)
+  const defaultLocale = locale || (typeof navigator !== "undefined" && navigator.language ? navigator.language : "en");
+  const [filesState, setFilesState] = useCombinedState(controlledValue, defaultValue);
+  const files = filesState ?? [];
+  const setFiles = setFilesState;
+  const [rejectedFiles, setRejectedFiles] = useState([]);
+  const addFiles = (newFiles) => {
+    if (disabled || readOnly) {
       return;
-    g([]);
-    const T = [], P = (L, N) => N.some(
-      (y) => y.name === L.name && y.size === L.size
-    ), h = (L, N) => {
-      const y = T.find(
-        (w) => w.file.name === L.name && w.file.size === L.size
+    }
+    setRejectedFiles([]);
+    const newRejectedFiles = [];
+    const fileExists = (file, existingFiles) => {
+      return existingFiles.some(
+        (existingFile) => existingFile.name === file.name && existingFile.size === file.size
       );
-      y ? y.errors.includes(N) || y.errors.push(N) : T.push({
-        file: L,
-        errors: [N]
-      });
     };
-    I((L) => {
-      const N = L ?? [], y = a !== void 0 ? a - N.length : void 0;
-      y !== void 0 && y <= 0 && j.forEach((v) => {
-        h(v, O.TOO_MANY_FILES);
-      });
-      let w = j;
-      d && (j.filter((D) => !oe(D, d)).forEach((D) => {
-        h(D, O.FILE_INVALID_TYPE);
-      }), w = j.filter((D) => oe(D, d)));
-      let Y = w;
-      (n !== void 0 || l !== void 0) && (Y = w.filter((v) => _e(v, n, l, f).valid ? !0 : (l !== void 0 && v.size > l ? h(v, O.FILE_TOO_LARGE) : n !== void 0 && v.size < n ? h(v, O.FILE_TOO_SMALL) : h(v, O.FILE_INVALID), !1)));
-      const H = /* @__PURE__ */ new Map(), q = Y.filter((v) => {
-        const D = `${v.name}-${v.size}`;
-        return P(v, N) || H.has(D) ? (h(v, O.FILE_EXISTS), !1) : (H.set(D, v), !0);
+    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]
+        });
+      }
+    };
+    setFiles((prev) => {
+      const currentFiles = prev ?? [];
+      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_UPLOAD_ERRORS.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_UPLOAD_ERRORS.FILE_TOO_LARGE);
+            } else if (minFileSize !== void 0 && file.size < minFileSize) {
+              addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_TOO_SMALL);
+            } else {
+              addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_INVALID);
+            }
+            return false;
+          }
+          return true;
+        });
+      }
+      const seenFiles = /* @__PURE__ */ new Map();
+      const uniqueFiles = validSizeFiles.filter((file) => {
+        const fileKey = `${file.name}-${file.size}`;
+        const existsInPrev = fileExists(file, currentFiles);
+        if (existsInPrev) {
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_EXISTS);
+          return false;
+        }
+        if (seenFiles.has(fileKey)) {
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_EXISTS);
+          return false;
+        }
+        seenFiles.set(fileKey, file);
+        return true;
       });
-      let A = c ? q : q.slice(0, 1);
-      y !== void 0 && (y <= 0 ? A = [] : A.length > y && (A.forEach((v) => {
-        h(v, O.TOO_MANY_FILES);
-      }), A = []));
-      const ae = c ? [...N, ...A] : A, V = [...T];
-      return g(V), A.length > 0 && i && i({ files: A }), V.length > 0 && e && e({ files: V }), o && o({
-        acceptedFiles: ae,
-        rejectedFiles: V
-      }), ae;
+      let filesToAdd = multiple ? uniqueFiles : uniqueFiles.slice(0, 1);
+      if (remainingSlots !== void 0) {
+        if (remainingSlots <= 0) {
+          filesToAdd = [];
+        } else if (filesToAdd.length > remainingSlots) {
+          filesToAdd.forEach((file) => {
+            addRejectedFile(file, FILE_UPLOAD_ERRORS.TOO_MANY_FILES);
+          });
+          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;
     });
-  }, C = (j) => {
-    m || p || I((T) => {
-      const h = (T ?? []).filter((N, y) => y !== j);
-      let L = b;
-      return a !== void 0 && h.length < a && (L = b.filter(
-        (N) => !N.errors.includes(O.TOO_MANY_FILES)
-      ), g(L)), o && o({
-        acceptedFiles: h,
-        rejectedFiles: L
-      }), h;
+  };
+  const removeFile = (index) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    setFiles((prev) => {
+      const currentFiles = prev ?? [];
+      const updated = currentFiles.filter((_, i) => i !== index);
+      let updatedRejectedFiles = rejectedFiles;
+      if (maxFiles !== void 0 && updated.length < maxFiles) {
+        updatedRejectedFiles = rejectedFiles.filter(
+          (rejected) => !rejected.errors.includes(FILE_UPLOAD_ERRORS.TOO_MANY_FILES)
+        );
+        setRejectedFiles(updatedRejectedFiles);
+      }
+      if (onFileChange) {
+        onFileChange({
+          acceptedFiles: updated,
+          rejectedFiles: updatedRejectedFiles
+        });
+      }
+      return updated;
     });
-  }, R = () => {
-    m || p || (I([]), g([]), o && o({
-      acceptedFiles: [],
-      rejectedFiles: []
-    }));
-  }, $ = (j) => {
-    m || p || g((T) => T.filter((P, h) => h !== j));
-  }, k = () => {
-    g([]);
-  }, B = a !== void 0 && u.length >= a;
+  };
+  const clearFiles = () => {
+    if (disabled || readOnly) {
+      return;
+    }
+    setFiles([]);
+    setRejectedFiles([]);
+    if (onFileChange) {
+      onFileChange({
+        acceptedFiles: [],
+        rejectedFiles: []
+      });
+    }
+  };
+  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 {
-    files: u,
-    rejectedFiles: b,
-    addFiles: U,
-    removeFile: C,
-    removeRejectedFile: $,
-    clearFiles: R,
-    clearRejectedFiles: k,
-    maxFilesReached: B
+    files,
+    rejectedFiles,
+    addFiles,
+    removeFile,
+    removeRejectedFile,
+    clearFiles,
+    clearRejectedFiles,
+    maxFilesReached
   };
 }
-const pe = se(null), Ue = ":file-upload", ge = ({
-  asChild: t = !1,
-  children: r,
-  defaultValue: i = [],
-  value: e,
-  onFileAccept: o,
-  onFileReject: c,
-  onFileChange: d,
-  multiple: a = !0,
-  accept: l,
-  maxFiles: n,
-  maxFileSize: m,
-  minFileSize: p,
-  disabled: x = !1,
-  readOnly: f = !1,
-  locale: E
+
+// 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 F = be(), u = he(), I = F.id || `${Ue}-${u}`, b = F.name, g = z(null), U = z(null), C = z(null), R = z([]), $ = z([]), k = F.disabled ?? x, B = F.readOnly ?? f, {
-    files: j,
-    rejectedFiles: T,
-    addFiles: P,
-    removeFile: h,
-    removeRejectedFile: L,
-    clearFiles: N,
-    clearRejectedFiles: y,
-    maxFilesReached: w
-  } = ze({
-    defaultValue: i,
-    value: e,
-    onFileAccept: o,
-    onFileReject: c,
-    onFileChange: d,
-    multiple: a,
-    accept: l,
-    maxFiles: n,
-    maxFileSize: m,
-    minFileSize: p,
-    disabled: k,
-    readOnly: B,
-    locale: E
-  }), Y = () => {
-    N(), R.current = [];
-  }, H = () => {
-    y(), $.current = [];
+  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 rejectedFileDeleteButtonRefs = 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 = [];
+  };
+  const clearRejectedFilesWithRefs = () => {
+    clearRejectedFiles();
+    rejectedFileDeleteButtonRefs.current = [];
   };
-  return /* @__PURE__ */ s(
-    pe.Provider,
+  return /* @__PURE__ */ jsx(
+    FileUploadContext.Provider,
     {
       value: {
-        inputRef: g,
-        files: j,
-        rejectedFiles: T,
-        addFiles: P,
-        removeFile: h,
-        removeRejectedFile: L,
-        clearFiles: Y,
-        clearRejectedFiles: H,
-        triggerRef: U,
-        dropzoneRef: C,
-        deleteButtonRefs: R,
-        rejectedFileDeleteButtonRefs: $,
-        multiple: a,
-        maxFiles: n,
-        maxFilesReached: w,
-        disabled: k,
-        readOnly: B,
-        locale: E || (typeof navigator < "u" && navigator.language ? navigator.language : "en"),
-        description: F.description,
-        isInvalid: F.isInvalid,
-        isRequired: F.isRequired
+        inputRef,
+        files,
+        rejectedFiles,
+        addFiles,
+        removeFile,
+        removeRejectedFile,
+        clearFiles,
+        clearRejectedFiles: clearRejectedFilesWithRefs,
+        triggerRef,
+        dropzoneRef,
+        deleteButtonRefs,
+        rejectedFileDeleteButtonRefs,
+        multiple,
+        maxFiles,
+        maxFilesReached,
+        disabled,
+        readOnly,
+        locale: locale || (typeof navigator !== "undefined" && navigator.language ? navigator.language : "en"),
+        description: field.description,
+        isInvalid: field.isInvalid,
+        isRequired: field.isRequired
       },
-      children: /* @__PURE__ */ M("div", { className: "relative", children: [
-        r,
-        /* @__PURE__ */ s(
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        children,
+        /* @__PURE__ */ jsx(
           "input",
           {
-            ref: g,
+            ref: inputRef,
             type: "file",
             tabIndex: -1,
-            id: I,
-            multiple: a,
-            name: b,
-            accept: l,
-            disabled: k,
-            readOnly: B && !k,
-            required: F.isRequired,
-            "aria-invalid": F.isInvalid,
-            "aria-describedby": F.description,
-            "aria-label": F.labelId ? void 0 : "Upload files",
+            id: inputId,
+            multiple,
+            name: inputName,
+            accept,
+            disabled,
+            readOnly: readOnly && !disabled,
+            required: field.isRequired,
+            "aria-invalid": field.isInvalid,
+            "aria-describedby": field.description,
+            "aria-label": !field.labelId ? "Upload files" : void 0,
             className: "sr-only",
-            onChange: (q) => {
-              if (q.target.files && !k && !B) {
-                P(Array.from(q.target.files));
+            onChange: (e) => {
+              if (e.target.files && !disabled && !readOnly) {
+                addFiles(Array.from(e.target.files));
                 try {
-                  q.target.value = "";
+                  e.target.value = "";
                 } catch {
                 }
               }
@@ -300,397 +481,544 @@ const pe = se(null), Ue = ":file-upload", ge = ({
     }
   );
 };
-ge.displayName = "FileUpload";
-const S = () => {
-  const t = le(pe);
-  if (!t)
+FileUpload.displayName = "FileUpload";
+var useFileUploadContext = () => {
+  const context = useContext(FileUploadContext);
+  if (!context) {
     throw Error("useFileUploadContext must be used within a FileUpload provider");
-  return t;
-}, J = ({
-  className: t,
-  file: r,
-  onClick: i,
-  ...e
+  }
+  return context;
+};
+
+// 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";
+import { cx } from "class-variance-authority";
+import { useRef as useRef2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ItemDeleteTrigger = ({
+  className,
+  file,
+  onClick,
+  ...props
 }) => {
   const {
-    removeFile: o,
-    triggerRef: c,
-    dropzoneRef: d,
-    deleteButtonRefs: a,
-    inputRef: l,
-    disabled: n,
-    readOnly: m,
-    files: p
-  } = S(), x = z(null), f = p.findIndex((u) => u.name === r.name && u.size === r.size), E = (u) => {
-    n || m || (o(f), requestAnimationFrame(() => {
-      const I = a.current.filter(Boolean);
-      if (I.length > 0) {
-        const b = Math.min(f, I.length - 1), g = I[b];
-        g && g.focus();
+    removeFile,
+    triggerRef,
+    dropzoneRef,
+    deleteButtonRefs,
+    inputRef,
+    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;
+    }
+    removeFile(fileIndex);
+    requestAnimationFrame(() => {
+      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 b = me(
-          [c.current, d.current],
-          l
+        const focusTarget = findFocusableElement(
+          [triggerRef.current, dropzoneRef.current],
+          inputRef
         );
-        b && b.focus();
+        if (focusTarget) {
+          focusTarget.focus();
+        }
       }
-    }), i?.(u));
+    });
+    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__ */ s(
-    ue,
+  return /* @__PURE__ */ jsx2(
+    IconButton,
     {
-      ref: (u) => {
-        if (x.current = u, u) {
-          for (; a.current.length <= f; )
-            a.current.push(null);
-          a.current[f] = u;
-        } else
-          a.current[f] && (a.current[f] = null);
-      },
+      ref: setRef,
       "data-spark-component": "file-upload-item-delete-trigger",
-      className: _(t),
-      onClick: E,
-      disabled: n || m,
+      className: cx(className),
+      onClick: handleClick,
+      disabled: disabled || readOnly,
       size: "sm",
       design: "contrast",
       intent: "surface",
-      ...e,
-      children: /* @__PURE__ */ s(K, { size: "sm", children: /* @__PURE__ */ s(ce, {}) })
+      ...props,
+      children: /* @__PURE__ */ jsx2(Icon, { size: "sm", children: /* @__PURE__ */ jsx2(Close, {}) })
     }
   );
 };
-J.displayName = "FileUpload.ItemDeleteTrigger";
-const Z = ({
-  className: t,
-  file: r,
-  uploadProgress: i,
-  deleteButtonAriaLabel: e,
-  progressAriaLabel: o,
-  ...c
+ItemDeleteTrigger.displayName = "FileUpload.ItemDeleteTrigger";
+
+// src/file-upload/FileUploadAcceptedFile.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var AcceptedFile = ({
+  className,
+  file,
+  uploadProgress,
+  deleteButtonAriaLabel,
+  progressAriaLabel,
+  ...props
 }) => {
-  const { locale: d } = S(), [a, l] = G(i !== void 0);
-  de(() => {
-    l(i !== void 0);
-  }, [i]);
-  const n = ye(() => {
-    l(!1);
+  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__ */ M(
+  return /* @__PURE__ */ jsxs2(
     "li",
     {
       "data-spark-component": "file-upload-accepted-file",
-      className: _(
+      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",
-        t
+        className
       ),
-      ...c,
+      ...props,
       children: [
-        /* @__PURE__ */ s("div", { className: "size-sz-36 bg-support-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ s(K, { size: "md", children: we(r) }) }),
-        /* @__PURE__ */ M("div", { className: "gap-md relative flex min-w-0 flex-1 flex-row items-center justify-between self-stretch", children: [
-          /* @__PURE__ */ s("p", { className: "text-body-2 truncate font-medium", children: r.name }),
-          /* @__PURE__ */ s("p", { className: "text-caption opacity-dim-1", children: W(r.size, d) }),
-          a && i !== void 0 && /* @__PURE__ */ s("div", { className: "absolute bottom-0 left-0 w-full", children: /* @__PURE__ */ s(
-            Ee,
+        /* @__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: i,
+              value: uploadProgress,
               max: 100,
-              "aria-label": o,
-              onComplete: n
+              "aria-label": progressAriaLabel,
+              onComplete: handleProgressComplete
             }
           ) })
         ] }),
-        /* @__PURE__ */ s(J, { "aria-label": e, file: r })
+        /* @__PURE__ */ jsx3(ItemDeleteTrigger, { "aria-label": deleteButtonAriaLabel, file })
       ]
     }
   );
 };
-Z.displayName = "FileUpload.AcceptedFile";
-const ee = ({ children: t }) => {
-  const { files: r = [], rejectedFiles: i = [], locale: e } = S();
-  return /* @__PURE__ */ s(Fe, { children: t({
-    acceptedFiles: r,
-    rejectedFiles: i,
-    formatFileSize: W,
-    locale: e
+AcceptedFile.displayName = "FileUpload.AcceptedFile";
+
+// src/file-upload/FileUploadContext.tsx
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+var Context = ({ children }) => {
+  const { files = [], rejectedFiles = [], locale } = useFileUploadContext();
+  return /* @__PURE__ */ jsx4(Fragment, { children: children({
+    acceptedFiles: files,
+    rejectedFiles,
+    formatFileSize,
+    locale
   }) });
 };
-ee.displayName = "FileUpload.Context";
-const ve = se(!1), Ce = () => le(ve);
-function te({
-  children: t,
-  className: r,
-  unstyled: i = !1
+Context.displayName = "FileUpload.Context";
+
+// src/file-upload/FileUploadDropzone.tsx
+import { cx as cx3 } from "class-variance-authority";
+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,
+  unstyled = false
 }) {
-  const e = S(), o = z(null);
-  if (!e) throw new Error("FileUploadDropzone must be used inside <FileUpload>");
-  const c = (n) => {
-    if (n.preventDefault(), n.stopPropagation(), n.currentTarget.setAttribute("data-drag-over", "false"), e.disabled || e.readOnly)
+  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 m = n.dataTransfer.files;
-    let p = [];
-    m && (p = Array.isArray(m) ? [...m] : Array.from(m)), p.length > 0 && e.addFiles(p);
-  }, d = () => {
-    !e.disabled && !e.readOnly && e.inputRef.current?.click();
-  }, a = (n) => {
-    (n.key === "Enter" || n.key === " ") && (n.preventDefault(), !e.disabled && !e.readOnly && e.inputRef.current?.click());
-  }, l = e.disabled || e.readOnly;
-  return /* @__PURE__ */ s(ve.Provider, { value: !0, children: /* @__PURE__ */ s(
+    }
+    const files = e.dataTransfer.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__ */ jsx5(DropzoneContext.Provider, { value: true, children: /* @__PURE__ */ jsx5(
     "div",
     {
-      ref: (n) => {
-        o.current = n, e.dropzoneRef && (e.dropzoneRef.current = n);
+      ref: (node) => {
+        dropzoneRef.current = node;
+        if (ctx.dropzoneRef) {
+          ctx.dropzoneRef.current = node;
+        }
       },
       role: "button",
-      tabIndex: l ? -1 : 0,
-      "aria-disabled": e.disabled ? !0 : void 0,
-      "aria-describedby": e.description,
-      "aria-invalid": e.isInvalid,
-      "aria-required": e.isRequired,
-      onClick: d,
-      onKeyDown: a,
-      onDrop: c,
-      onDragOver: (n) => {
-        n.preventDefault();
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-disabled": ctx.disabled ? true : void 0,
+      "aria-describedby": ctx.description,
+      "aria-invalid": ctx.isInvalid,
+      "aria-required": ctx.isRequired,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onDrop: handleDrop,
+      onDragOver: (e) => {
+        e.preventDefault();
       },
-      className: i ? r : _(
+      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",
-        !l && "default: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)
-        e.disabled && "cursor-not-allowed opacity-50",
+        ctx.disabled && "cursor-not-allowed opacity-50",
         // ReadOnly: less visually disabled (just cursor, no opacity)
-        e.readOnly && !e.disabled && "cursor-default",
-        r
+        ctx.readOnly && !ctx.disabled && "cursor-default",
+        className
       ),
-      onDragEnter: (n) => {
-        l || n.currentTarget.setAttribute("data-drag-over", "true");
+      onDragEnter: (e) => {
+        if (!isDisabled) {
+          e.currentTarget.setAttribute("data-drag-over", "true");
+        }
       },
-      onDragLeave: (n) => {
-        n.currentTarget.setAttribute("data-drag-over", "false");
+      onDragLeave: (e) => {
+        e.currentTarget.setAttribute("data-drag-over", "false");
       },
-      children: t
+      children
     }
   ) });
 }
-te.displayName = "FileUploadDropzone";
-const re = ({
-  className: t,
-  file: r,
-  fallback: i = "📄",
-  ...e
+Dropzone.displayName = "FileUploadDropzone";
+
+// src/file-upload/FileUploadPreviewImage.tsx
+import { cx as cx4 } from "class-variance-authority";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var PreviewImage = ({
+  className,
+  file,
+  fallback = "\u{1F4C4}",
+  ...props
 }) => {
-  const [o, c] = G(!1), [d, a] = G(!1), l = r.type.startsWith("image/"), n = l ? URL.createObjectURL(r) : null;
-  return de(() => () => {
-    n && URL.revokeObjectURL(n);
-  }, [n]), !l || o ? /* @__PURE__ */ s(
-    "div",
-    {
-      "data-spark-component": "file-upload-preview-image",
-      className: _(
-        "bg-neutral-container flex items-center justify-center rounded-md",
-        t
-      ),
-      ...e,
-      children: i
-    }
-  ) : /* @__PURE__ */ M(
+  const [imageError, setImageError] = useState3(false);
+  const [imageLoaded, setImageLoaded] = useState3(false);
+  const isImage = file.type.startsWith("image/");
+  const imageUrl = isImage ? URL.createObjectURL(file) : null;
+  useEffect2(() => {
+    return () => {
+      if (imageUrl) {
+        URL.revokeObjectURL(imageUrl);
+      }
+    };
+  }, [imageUrl]);
+  if (!isImage || imageError) {
+    return /* @__PURE__ */ jsx6(
+      "div",
+      {
+        "data-spark-component": "file-upload-preview-image",
+        className: cx4(
+          "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: _("bg-neutral-container overflow-hidden", t),
-      ...e,
+      className: cx4("bg-neutral-container overflow-hidden", className),
+      ...props,
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ jsx6(
           "img",
           {
-            src: n,
-            alt: r.name,
-            className: _("size-full object-cover", !d && "opacity-0"),
-            onLoad: () => a(!0),
-            onError: () => c(!0)
+            src: imageUrl,
+            alt: file.name,
+            className: cx4("size-full object-cover", !imageLoaded && "opacity-0"),
+            onLoad: () => setImageLoaded(true),
+            onError: () => setImageError(true)
           }
         ),
-        !d && /* @__PURE__ */ s("div", { className: "absolute inset-0 flex items-center justify-center", children: i })
+        !imageLoaded && /* @__PURE__ */ jsx6("div", { className: "absolute inset-0 flex items-center justify-center", children: fallback })
       ]
     }
   );
 };
-re.displayName = "FileUpload.PreviewImage";
-const Q = ({
-  className: t,
-  rejectedFile: r,
-  onClick: i,
-  ...e
+PreviewImage.displayName = "FileUpload.PreviewImage";
+
+// src/file-upload/FileUploadRejectedFile.tsx
+import { WarningOutline } from "@spark-ui/icons/WarningOutline";
+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 cx5 } from "class-variance-authority";
+import { useRef as useRef4 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var RejectedFileDeleteTrigger = ({
+  className,
+  rejectedFile,
+  onClick,
+  ...props
 }) => {
   const {
-    removeRejectedFile: o,
-    triggerRef: c,
-    dropzoneRef: d,
-    rejectedFileDeleteButtonRefs: a,
-    inputRef: l,
-    disabled: n,
-    readOnly: m,
-    rejectedFiles: p
-  } = S(), x = z(null), f = p.findIndex(
-    (u) => u.file.name === r.file.name && u.file.size === r.file.size
-  ), E = (u) => {
-    n || m || (o(f), requestAnimationFrame(() => {
-      const I = a.current.filter(Boolean);
-      if (I.length > 0) {
-        const b = Math.min(f, I.length - 1), g = I[b];
-        g && g.focus();
+    removeRejectedFile,
+    triggerRef,
+    dropzoneRef,
+    rejectedFileDeleteButtonRefs,
+    inputRef,
+    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;
+    }
+    removeRejectedFile(rejectedFileIndex);
+    requestAnimationFrame(() => {
+      const remainingButtons = rejectedFileDeleteButtonRefs.current.filter(Boolean);
+      if (remainingButtons.length > 0) {
+        const targetIndex = Math.min(rejectedFileIndex, remainingButtons.length - 1);
+        const nextButton = remainingButtons[targetIndex];
+        if (nextButton) {
+          nextButton.focus();
+        }
       } else {
-        const b = me(
-          [c.current, d.current],
-          l
+        const focusTarget = findFocusableElement(
+          [triggerRef.current, dropzoneRef.current],
+          inputRef
         );
-        b && b.focus();
+        if (focusTarget) {
+          focusTarget.focus();
+        }
+      }
+    });
+    onClick?.(e);
+  };
+  const setRef = (node) => {
+    buttonRef.current = node;
+    if (node) {
+      while (rejectedFileDeleteButtonRefs.current.length <= rejectedFileIndex) {
+        rejectedFileDeleteButtonRefs.current.push(null);
+      }
+      rejectedFileDeleteButtonRefs.current[rejectedFileIndex] = node;
+    } else {
+      if (rejectedFileDeleteButtonRefs.current[rejectedFileIndex]) {
+        rejectedFileDeleteButtonRefs.current[rejectedFileIndex] = null;
       }
-    }), i?.(u));
+    }
   };
-  return /* @__PURE__ */ s(
-    ue,
+  return /* @__PURE__ */ jsx7(
+    IconButton,
     {
-      ref: (u) => {
-        if (x.current = u, u) {
-          for (; a.current.length <= f; )
-            a.current.push(null);
-          a.current[f] = u;
-        } else
-          a.current[f] && (a.current[f] = null);
-      },
+      ref: setRef,
       "data-spark-component": "file-upload-rejected-file-delete-trigger",
-      className: _(t),
-      onClick: E,
-      disabled: n || m,
+      className: cx5(className),
+      onClick: handleClick,
+      disabled: disabled || readOnly,
       size: "sm",
       design: "contrast",
       intent: "surface",
-      ...e,
-      children: /* @__PURE__ */ s(K, { size: "sm", children: /* @__PURE__ */ s(ce, {}) })
+      ...props,
+      children: /* @__PURE__ */ jsx7(Icon, { size: "sm", children: /* @__PURE__ */ jsx7(Close2, {}) })
     }
   );
 };
-Q.displayName = "FileUpload.RejectedFileDeleteTrigger";
-const ie = ({
-  className: t,
-  rejectedFile: r,
-  renderError: i,
-  deleteButtonAriaLabel: e,
-  ...o
+RejectedFileDeleteTrigger.displayName = "FileUpload.RejectedFileDeleteTrigger";
+
+// src/file-upload/FileUploadRejectedFile.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var RejectedFile = ({
+  className,
+  rejectedFile,
+  renderError,
+  deleteButtonAriaLabel,
+  ...props
 }) => {
-  const { locale: c } = S();
-  return /* @__PURE__ */ M(
+  const { locale } = useFileUploadContext();
+  return /* @__PURE__ */ jsxs4(
     "li",
     {
       "data-spark-component": "file-upload-rejected-file",
-      className: _(
+      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",
-        t
+        className
       ),
-      ...o,
+      ...props,
       children: [
-        /* @__PURE__ */ s("div", { className: "size-sz-36 bg-error-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ s(K, { size: "md", className: "text-error", children: /* @__PURE__ */ s(je, {}) }) }),
-        /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ M("div", { className: "gap-md flex flex-col", children: [
-          /* @__PURE__ */ M("div", { className: "gap-md flex flex-row items-center justify-between", children: [
-            /* @__PURE__ */ s("p", { className: "text-body-2 truncate font-medium", children: r.file.name }),
-            /* @__PURE__ */ s("p", { className: "text-caption opacity-dim-1", children: W(r.file.size, c) })
+        /* @__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 }),
+            /* @__PURE__ */ jsx8("p", { className: "text-caption opacity-dim-1", children: formatFileSize(rejectedFile.file.size, locale) })
           ] }),
-          /* @__PURE__ */ s("div", { className: "gap-xs flex flex-col", children: r.errors.map((d, a) => /* @__PURE__ */ s("div", { className: "text-caption text-error", "data-error-code": d, children: i(d) }, a)) })
+          /* @__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__ */ s(Q, { "aria-label": e, rejectedFile: r })
+        /* @__PURE__ */ jsx8(RejectedFileDeleteTrigger, { "aria-label": deleteButtonAriaLabel, rejectedFile })
       ]
     }
   );
 };
-ie.displayName = "FileUpload.RejectedFile";
-const ne = ({
-  className: t,
-  children: r,
-  asChild: i = !1,
-  unstyled: e = !1,
-  design: o = "filled",
-  intent: c = "basic",
-  size: d = "md",
-  shape: a = "rounded",
-  ref: l,
-  ...n
+RejectedFile.displayName = "FileUpload.RejectedFile";
+
+// src/file-upload/FileUploadTrigger.tsx
+import { cx as cx7 } from "class-variance-authority";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Trigger = ({
+  className,
+  children,
+  asChild = false,
+  unstyled = false,
+  design = "filled",
+  intent = "basic",
+  size = "md",
+  shape = "rounded",
+  ref,
+  ...props
 }) => {
-  const { inputRef: m, triggerRef: p, disabled: x, readOnly: f, description: E, isInvalid: F, isRequired: u } = S(), I = Ce(), b = (R) => {
-    R.stopPropagation(), R.preventDefault(), !x && !f && m.current?.click();
-  }, g = (R) => {
-    p && (p.current = R), l && (typeof l == "function" ? l(R) : l.current = R);
+  const { inputRef, triggerRef, disabled, readOnly, description, isInvalid, isRequired } = useFileUploadContext();
+  const isInsideDropzone = useDropzoneContext();
+  const handleClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!disabled && !readOnly) {
+      inputRef.current?.click();
+    }
+  };
+  const handleRef = (node) => {
+    if (triggerRef) {
+      triggerRef.current = node;
+    }
+    if (ref) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
   };
-  let U, C;
-  if (I) {
-    U = "span";
-    const R = e ? t : Te({
-      design: o,
-      intent: c,
-      size: d,
-      shape: a,
-      disabled: x || f,
-      className: t
+  let Component;
+  let componentProps;
+  if (isInsideDropzone) {
+    Component = "span";
+    const spanStyles = unstyled ? className : buttonStyles({
+      design,
+      intent,
+      size,
+      shape,
+      disabled: disabled || readOnly,
+      className
     });
-    C = {
-      ref: g,
+    componentProps = {
+      ref: handleRef,
       "data-spark-component": "file-upload-trigger",
-      className: R
+      className: spanStyles
       // No onClick, no role, no tabIndex - Dropzone handles interaction
       // No aria attributes here - they're on the Dropzone
     };
-  } else
-    U = i ? Oe : e ? "button" : De, C = {
-      ref: g,
+  } else {
+    const buttonComponent = unstyled ? "button" : Button;
+    Component = asChild ? Slot : buttonComponent;
+    componentProps = {
+      ref: handleRef,
       type: "button",
-      design: o,
-      intent: c,
-      size: d,
-      shape: a,
+      design,
+      intent,
+      size,
+      shape,
       "data-spark-component": "file-upload-trigger",
-      className: _(t),
-      disabled: x || f,
-      onClick: b,
-      "aria-describedby": E,
-      "aria-invalid": F,
-      "aria-required": u,
-      ...n
+      className: cx7(className),
+      disabled: disabled || readOnly,
+      onClick: handleClick,
+      "aria-describedby": description,
+      "aria-invalid": isInvalid,
+      "aria-required": isRequired,
+      ...props
     };
-  return /* @__PURE__ */ s(U, { ...C, children: r });
+  }
+  return /* @__PURE__ */ jsx9(Component, { ...componentProps, children });
 };
-ne.displayName = "FileUpload.Trigger";
-const ke = Object.assign(ge, {
+Trigger.displayName = "FileUpload.Trigger";
+
+// src/file-upload/index.ts
+var FileUpload2 = Object.assign(FileUpload, {
   // Main input components
-  Trigger: ne,
-  Dropzone: te,
+  Trigger,
+  Dropzone,
   // Context components
-  Context: ee,
-  AcceptedFile: Z,
-  RejectedFile: ie,
+  Context,
+  AcceptedFile,
+  RejectedFile,
   // Helpers for custom renders
-  PreviewImage: re,
-  ItemDeleteTrigger: J,
-  RejectedFileDeleteTrigger: Q
+  PreviewImage,
+  ItemDeleteTrigger,
+  RejectedFileDeleteTrigger
 });
-ke.displayName = "FileUpload";
-ne.displayName = "FileUpload.Trigger";
-te.displayName = "FileUpload.Dropzone";
-ee.displayName = "FileUpload.Context";
-J.displayName = "FileUpload.ItemDeleteTrigger";
-re.displayName = "FileUpload.PreviewImage";
-Z.displayName = "FileUpload.AcceptedFile";
-ie.displayName = "FileUpload.RejectedFile";
-Q.displayName = "FileUpload.RejectedFileDeleteTrigger";
+FileUpload2.displayName = "FileUpload";
+Trigger.displayName = "FileUpload.Trigger";
+Dropzone.displayName = "FileUpload.Dropzone";
+Context.displayName = "FileUpload.Context";
+ItemDeleteTrigger.displayName = "FileUpload.ItemDeleteTrigger";
+PreviewImage.displayName = "FileUpload.PreviewImage";
+AcceptedFile.displayName = "FileUpload.AcceptedFile";
+RejectedFile.displayName = "FileUpload.RejectedFile";
+RejectedFileDeleteTrigger.displayName = "FileUpload.RejectedFileDeleteTrigger";
 export {
-  O as FILE_UPLOAD_ERRORS,
-  ke as FileUpload
+  FILE_UPLOAD_ERRORS,
+  FileUpload2 as FileUpload
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map