@spark-ui/components 13.1.4 → 13.2.0

package/dist/file-upload/index.mjs

@@ -1,32 +1,20 @@
-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 = {
+import { jsx as s, jsxs as M, Fragment as Fe } from "react/jsx-runtime";
+import { useFormFieldControl as be } from "@spark-ui/components/form-field";
+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 { cx as _ } from "class-variance-authority";
+import { I as K } from "../Icon-Ck-dhfLd.mjs";
+import { Progress as Ee } from "../progress/index.mjs";
+import { Close as ce } from "@spark-ui/icons/Close";
+import { I as ue } from "../IconButton-C62-axzv.mjs";
+import { WarningOutline as je } from "@spark-ui/icons/WarningOutline";
+import { b as Te, B as De } from "../Button-C3C0aixy.mjs";
+import { a as Oe } from "../Slot-D2Bbf8Gw.mjs";
+const O = {
   /**
    * Exceeds the maxFiles limit
    */
@@ -52,425 +40,256 @@ var FILE_UPLOAD_ERRORS = {
    */
   FILE_EXISTS: "FILE_EXISTS"
 };
-
-// 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 + "/");
+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 + "/");
       }
-      return file.type === pattern;
+      return t.type === e;
     }
-    if (pattern.startsWith(".")) {
-      const extension2 = pattern.toLowerCase();
-      const fileName2 = file.name.toLowerCase();
-      return fileName2.endsWith(extension2);
+    if (e.startsWith(".")) {
+      const d = e.toLowerCase();
+      return t.name.toLowerCase().endsWith(d);
     }
-    const extension = "." + pattern.toLowerCase();
-    const fileName = file.name.toLowerCase();
-    return fileName.endsWith(extension);
-  });
+    const o = "." + e.toLowerCase();
+    return t.name.toLowerCase().endsWith(o);
+  }) : !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 _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 getDefaultLocale() {
-  if (typeof navigator !== "undefined" && navigator.language) {
-    return navigator.language;
-  }
-  return "en";
+function fe() {
+  return typeof navigator < "u" && navigator.language ? navigator.language : "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, {
+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, {
       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, {
+    }).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, {
     style: "unit",
-    unit,
-    unitDisplay,
+    unit: a,
+    unitDisplay: n,
     minimumFractionDigits: 0,
     maximumFractionDigits: 2
-  });
-  return formatter.format(size);
+  }).format(l);
 }
-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 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 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 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 findFocusableElement(candidates, inputRef) {
-  for (const candidate of candidates) {
-    if (isFocusable(candidate)) {
-      return candidate;
-    }
-  }
-  if (inputRef.current) {
-    return inputRef.current;
-  }
-  return null;
+function me(t, r) {
+  for (const i of t)
+    if (Ae(i))
+      return i;
+  return r.current ? r.current : null;
 }
-
-// src/file-upload/useFileUploadState.tsx
-function useFileUploadState({
-  defaultValue = [],
-  value: controlledValue,
-  onFileAccept,
-  onFileReject,
-  onFileChange,
-  multiple = true,
-  accept,
-  maxFiles,
-  maxFileSize,
-  minFileSize,
-  disabled = false,
-  readOnly = false,
-  locale
+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
 }) {
-  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) {
+  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)
       return;
-    }
-    setRejectedFiles([]);
-    const newRejectedFiles = [];
-    const fileExists = (file, existingFiles) => {
-      return existingFiles.some(
-        (existingFile) => existingFile.name === file.name && existingFile.size === file.size
+    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
       );
+      y ? y.errors.includes(N) || y.errors.push(N) : T.push({
+        file: L,
+        errors: [N]
+      });
     };
-    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;
+    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 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;
+      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);
+      });
+      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;
     });
-  };
-  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;
+  }, 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 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;
+  }, 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;
   return {
-    files,
-    rejectedFiles,
-    addFiles,
-    removeFile,
-    removeRejectedFile,
-    clearFiles,
-    clearRejectedFiles,
-    maxFilesReached
+    files: u,
+    rejectedFiles: b,
+    addFiles: U,
+    removeFile: C,
+    removeRejectedFile: $,
+    clearFiles: R,
+    clearRejectedFiles: k,
+    maxFilesReached: B
   };
 }
-
-// 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 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
 }) => {
-  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 = [];
+  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 = [];
   };
-  return /* @__PURE__ */ jsx(
-    FileUploadContext.Provider,
+  return /* @__PURE__ */ s(
+    pe.Provider,
     {
       value: {
-        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
+        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
       },
-      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        children,
-        /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ M("div", { className: "relative", children: [
+        r,
+        /* @__PURE__ */ s(
           "input",
           {
-            ref: inputRef,
+            ref: g,
             type: "file",
             tabIndex: -1,
-            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,
+            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",
             className: "sr-only",
-            onChange: (e) => {
-              if (e.target.files && !disabled && !readOnly) {
-                addFiles(Array.from(e.target.files));
+            onChange: (q) => {
+              if (q.target.files && !k && !B) {
+                P(Array.from(q.target.files));
                 try {
-                  e.target.value = "";
+                  q.target.value = "";
                 } catch {
                 }
               }
@@ -481,544 +300,397 @@ var FileUpload = ({
     }
   );
 };
-FileUpload.displayName = "FileUpload";
-var useFileUploadContext = () => {
-  const context = useContext(FileUploadContext);
-  if (!context) {
+ge.displayName = "FileUpload";
+const S = () => {
+  const t = le(pe);
+  if (!t)
     throw Error("useFileUploadContext must be used within a FileUpload provider");
-  }
-  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
+  return t;
+}, J = ({
+  className: t,
+  file: r,
+  onClick: i,
+  ...e
 }) => {
   const {
-    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();
-        }
+    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();
       } else {
-        const focusTarget = findFocusableElement(
-          [triggerRef.current, dropzoneRef.current],
-          inputRef
+        const b = me(
+          [c.current, d.current],
+          l
         );
-        if (focusTarget) {
-          focusTarget.focus();
-        }
+        b && b.focus();
       }
-    });
-    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;
-      }
-    }
+    }), i?.(u));
   };
-  return /* @__PURE__ */ jsx2(
-    IconButton,
+  return /* @__PURE__ */ s(
+    ue,
     {
-      ref: setRef,
+      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);
+      },
       "data-spark-component": "file-upload-item-delete-trigger",
-      className: cx(className),
-      onClick: handleClick,
-      disabled: disabled || readOnly,
+      className: _(t),
+      onClick: E,
+      disabled: n || m,
       size: "sm",
       design: "contrast",
       intent: "surface",
-      ...props,
-      children: /* @__PURE__ */ jsx2(Icon, { size: "sm", children: /* @__PURE__ */ jsx2(Close, {}) })
+      ...e,
+      children: /* @__PURE__ */ s(K, { size: "sm", children: /* @__PURE__ */ s(ce, {}) })
     }
   );
 };
-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
+J.displayName = "FileUpload.ItemDeleteTrigger";
+const Z = ({
+  className: t,
+  file: r,
+  uploadProgress: i,
+  deleteButtonAriaLabel: e,
+  progressAriaLabel: o,
+  ...c
 }) => {
-  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);
+  const { locale: d } = S(), [a, l] = G(i !== void 0);
+  de(() => {
+    l(i !== void 0);
+  }, [i]);
+  const n = ye(() => {
+    l(!1);
   }, []);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ M(
     "li",
     {
       "data-spark-component": "file-upload-accepted-file",
-      className: cx2(
+      className: _(
         "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
+        t
       ),
-      ...props,
+      ...c,
       children: [
-        /* @__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,
+        /* @__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,
             {
-              value: uploadProgress,
+              value: i,
               max: 100,
-              "aria-label": progressAriaLabel,
-              onComplete: handleProgressComplete
+              "aria-label": o,
+              onComplete: n
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsx3(ItemDeleteTrigger, { "aria-label": deleteButtonAriaLabel, file })
+        /* @__PURE__ */ s(J, { "aria-label": e, file: r })
       ]
     }
   );
 };
-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
+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
   }) });
 };
-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
+ee.displayName = "FileUpload.Context";
+const ve = se(!1), Ce = () => le(ve);
+function te({
+  children: t,
+  className: r,
+  unstyled: i = !1
 }) {
-  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) {
+  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)
       return;
-    }
-    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(
+    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(
     "div",
     {
-      ref: (node) => {
-        dropzoneRef.current = node;
-        if (ctx.dropzoneRef) {
-          ctx.dropzoneRef.current = node;
-        }
+      ref: (n) => {
+        o.current = n, e.dropzoneRef && (e.dropzoneRef.current = n);
       },
       role: "button",
-      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();
+      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();
       },
-      className: unstyled ? className : cx3(
+      className: i ? r : _(
         "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 && "default:hover:bg-surface-hovered",
+        !l && "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",
+        e.disabled && "cursor-not-allowed opacity-50",
         // ReadOnly: less visually disabled (just cursor, no opacity)
-        ctx.readOnly && !ctx.disabled && "cursor-default",
-        className
+        e.readOnly && !e.disabled && "cursor-default",
+        r
       ),
-      onDragEnter: (e) => {
-        if (!isDisabled) {
-          e.currentTarget.setAttribute("data-drag-over", "true");
-        }
+      onDragEnter: (n) => {
+        l || n.currentTarget.setAttribute("data-drag-over", "true");
       },
-      onDragLeave: (e) => {
-        e.currentTarget.setAttribute("data-drag-over", "false");
+      onDragLeave: (n) => {
+        n.currentTarget.setAttribute("data-drag-over", "false");
       },
-      children
+      children: t
     }
   ) });
 }
-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
+te.displayName = "FileUploadDropzone";
+const re = ({
+  className: t,
+  file: r,
+  fallback: i = "📄",
+  ...e
 }) => {
-  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(
+  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: cx4("bg-neutral-container overflow-hidden", className),
-      ...props,
+      className: _(
+        "bg-neutral-container flex items-center justify-center rounded-md",
+        t
+      ),
+      ...e,
+      children: i
+    }
+  ) : /* @__PURE__ */ M(
+    "div",
+    {
+      "data-spark-component": "file-upload-preview-image",
+      className: _("bg-neutral-container overflow-hidden", t),
+      ...e,
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ s(
           "img",
           {
-            src: imageUrl,
-            alt: file.name,
-            className: cx4("size-full object-cover", !imageLoaded && "opacity-0"),
-            onLoad: () => setImageLoaded(true),
-            onError: () => setImageError(true)
+            src: n,
+            alt: r.name,
+            className: _("size-full object-cover", !d && "opacity-0"),
+            onLoad: () => a(!0),
+            onError: () => c(!0)
           }
         ),
-        !imageLoaded && /* @__PURE__ */ jsx6("div", { className: "absolute inset-0 flex items-center justify-center", children: fallback })
+        !d && /* @__PURE__ */ s("div", { className: "absolute inset-0 flex items-center justify-center", children: i })
       ]
     }
   );
 };
-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
+re.displayName = "FileUpload.PreviewImage";
+const Q = ({
+  className: t,
+  rejectedFile: r,
+  onClick: i,
+  ...e
 }) => {
   const {
-    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();
-        }
+    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();
       } else {
-        const focusTarget = findFocusableElement(
-          [triggerRef.current, dropzoneRef.current],
-          inputRef
+        const b = me(
+          [c.current, d.current],
+          l
         );
-        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;
+        b && b.focus();
       }
-    }
+    }), i?.(u));
   };
-  return /* @__PURE__ */ jsx7(
-    IconButton,
+  return /* @__PURE__ */ s(
+    ue,
     {
-      ref: setRef,
+      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);
+      },
       "data-spark-component": "file-upload-rejected-file-delete-trigger",
-      className: cx5(className),
-      onClick: handleClick,
-      disabled: disabled || readOnly,
+      className: _(t),
+      onClick: E,
+      disabled: n || m,
       size: "sm",
       design: "contrast",
       intent: "surface",
-      ...props,
-      children: /* @__PURE__ */ jsx7(Icon, { size: "sm", children: /* @__PURE__ */ jsx7(Close2, {}) })
+      ...e,
+      children: /* @__PURE__ */ s(K, { size: "sm", children: /* @__PURE__ */ s(ce, {}) })
     }
   );
 };
-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
+Q.displayName = "FileUpload.RejectedFileDeleteTrigger";
+const ie = ({
+  className: t,
+  rejectedFile: r,
+  renderError: i,
+  deleteButtonAriaLabel: e,
+  ...o
 }) => {
-  const { locale } = useFileUploadContext();
-  return /* @__PURE__ */ jsxs4(
+  const { locale: c } = S();
+  return /* @__PURE__ */ M(
     "li",
     {
       "data-spark-component": "file-upload-rejected-file",
-      className: cx6(
+      className: _(
         "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
+        t
       ),
-      ...props,
+      ...o,
       children: [
-        /* @__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: "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: "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("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(RejectedFileDeleteTrigger, { "aria-label": deleteButtonAriaLabel, rejectedFile })
+        /* @__PURE__ */ s(Q, { "aria-label": e, rejectedFile: r })
       ]
     }
   );
 };
-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
+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
 }) => {
-  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;
-      }
-    }
+  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);
   };
-  let Component;
-  let componentProps;
-  if (isInsideDropzone) {
-    Component = "span";
-    const spanStyles = unstyled ? className : buttonStyles({
-      design,
-      intent,
-      size,
-      shape,
-      disabled: disabled || readOnly,
-      className
+  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
     });
-    componentProps = {
-      ref: handleRef,
+    C = {
+      ref: g,
       "data-spark-component": "file-upload-trigger",
-      className: spanStyles
+      className: R
       // No onClick, no role, no tabIndex - Dropzone handles interaction
       // No aria attributes here - they're on the Dropzone
     };
-  } else {
-    const buttonComponent = unstyled ? "button" : Button;
-    Component = asChild ? Slot : buttonComponent;
-    componentProps = {
-      ref: handleRef,
+  } else
+    U = i ? Oe : e ? "button" : De, C = {
+      ref: g,
       type: "button",
-      design,
-      intent,
-      size,
-      shape,
+      design: o,
+      intent: c,
+      size: d,
+      shape: a,
       "data-spark-component": "file-upload-trigger",
-      className: cx7(className),
-      disabled: disabled || readOnly,
-      onClick: handleClick,
-      "aria-describedby": description,
-      "aria-invalid": isInvalid,
-      "aria-required": isRequired,
-      ...props
+      className: _(t),
+      disabled: x || f,
+      onClick: b,
+      "aria-describedby": E,
+      "aria-invalid": F,
+      "aria-required": u,
+      ...n
     };
-  }
-  return /* @__PURE__ */ jsx9(Component, { ...componentProps, children });
+  return /* @__PURE__ */ s(U, { ...C, children: r });
 };
-Trigger.displayName = "FileUpload.Trigger";
-
-// src/file-upload/index.ts
-var FileUpload2 = Object.assign(FileUpload, {
+ne.displayName = "FileUpload.Trigger";
+const ke = Object.assign(ge, {
   // Main input components
-  Trigger,
-  Dropzone,
+  Trigger: ne,
+  Dropzone: te,
   // Context components
-  Context,
-  AcceptedFile,
-  RejectedFile,
+  Context: ee,
+  AcceptedFile: Z,
+  RejectedFile: ie,
   // Helpers for custom renders
-  PreviewImage,
-  ItemDeleteTrigger,
-  RejectedFileDeleteTrigger
+  PreviewImage: re,
+  ItemDeleteTrigger: J,
+  RejectedFileDeleteTrigger: Q
 });
-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";
+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";
 export {
-  FILE_UPLOAD_ERRORS,
-  FileUpload2 as FileUpload
+  O as FILE_UPLOAD_ERRORS,
+  ke as FileUpload
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map