impact-nova 2.1.0-alpha.9 → 2.2.1

package/dist/components/forms/file-upload/file-upload.js

@@ -1,276 +1,414 @@
-import { jsx as e, jsxs as c, Fragment as L } from "react/jsx-runtime";
-import * as y from "react";
-import { createComponent as v } from "../../../lib/primitives/create-component.js";
-import { createCompoundPart as j } from "../../../lib/primitives/create-compound.js";
-import { cn as F } from "../../../lib/utils.js";
-import { Cross as E, Eye as M, Delete as B, Document as P } from "impact-nova-icons";
-import { FileUpload as S, Text as A, Csv as O, Excel as R } from "../../ui/local-raster-icons/rasterIcons.js";
-import { Tooltip as w, TooltipTrigger as D, TooltipContent as z } from "../../feedback/tooltip/tooltip.js";
-import { useImpactNovaI18n as T } from "../../../i18n/use-impact-nova-i18n.js";
-const k = y.createContext(void 0), H = [], I = () => {
-  const a = y.useContext(k);
-  if (!a)
+import { jsx as e, jsxs as c, Fragment as K } from "react/jsx-runtime";
+import * as g from "react";
+import { createComponent as j } from "../../../lib/primitives/create-component.js";
+import { createCompoundPart as A } from "../../../lib/primitives/create-compound.js";
+import { cn as y } from "../../../lib/utils.js";
+import { Cross as P, Delete as Y, Reset as _, Download as q, Document as H } from "impact-nova-icons";
+import { FileUploadError as J, FileUpload as Q, ExcelErrorIcon as V, Text as W, Csv as X, Excel as ee } from "../../ui/local-raster-icons/rasterIcons.js";
+import { Tooltip as z, TooltipTrigger as D, TooltipContent as T } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as M } from "../../../i18n/use-impact-nova-i18n.js";
+import { Progress as te } from "../../primitives/progress/progress.js";
+import { Show as f } from "../../ui/show.js";
+function Z(i, l) {
+  const r = i.name.split(".").pop()?.toLowerCase();
+  return !!(r && l.includes(r));
+}
+const $ = g.createContext(void 0), le = [], G = () => {
+  const i = g.useContext($);
+  if (!i)
     throw new Error("useFileUpload must be used within a FileUpload component");
-  return a;
-}, J = v(
+  return i;
+}, ue = j(
   "FileUpload",
   ({
-    className: a,
-    children: t,
-    onFilesChange: l,
-    maxFiles: o = 1,
-    accept: s = [],
-    disabled: p = !1,
-    value: m = H,
-    ...d
-  }, U) => {
-    const [f, u] = y.useState(m);
-    y.useEffect(() => {
-      u(m);
-    }, [m]);
-    const x = (n) => {
-      if (p) return;
-      let r = n;
-      s.length > 0 && (r = r.filter((N) => {
-        const C = N.name.split(".").pop()?.toLowerCase();
-        return C && s.includes(C);
-      }));
-      const h = o - f.length;
-      if (h <= 0) return;
-      const g = r.slice(0, h);
-      if (g.length > 0) {
-        const N = [...f, ...g];
-        u(N), l?.(N);
+    className: i,
+    children: l,
+    onFilesChange: r,
+    maxFiles: p = 1,
+    accept: d = [],
+    disabled: u = !1,
+    value: h = le,
+    ...b
+  }, m) => {
+    const [U, s] = g.useState(h);
+    g.useEffect(() => {
+      s(h);
+    }, [h]);
+    const x = (t) => {
+      if (u) return;
+      let o = t;
+      if (d.length > 0 && (o = o.filter(
+        (N) => Z(N, d)
+      )), o.length === 0) return;
+      const F = p - U.length;
+      if (F <= 0) return;
+      const C = o.slice(0, F);
+      if (C.length > 0) {
+        const N = [...U, ...C];
+        s(N), r?.(N);
       }
-    }, b = (n) => {
-      if (p) return;
-      const r = f.filter((h) => h !== n);
-      u(r), l?.(r);
+    }, w = (t) => {
+      if (u) return;
+      const o = U.filter((F) => F !== t);
+      s(o), r?.(o);
     };
     return /* @__PURE__ */ e(
-      k.Provider,
+      $.Provider,
       {
-        value: { files: f, addFiles: x, removeFile: b, maxFiles: o, accept: s, disabled: p },
+        value: { files: U, addFiles: x, removeFile: w, maxFiles: p, accept: d, disabled: u },
         children: /* @__PURE__ */ e(
           "div",
           {
-            ref: U,
-            className: F("w-full max-w-[550px]", a),
+            ref: m,
+            className: y("w-full max-w-[550px]", i),
             "data-component": "file-upload",
-            "data-disabled": p || void 0,
-            ...d,
-            children: t
+            "data-disabled": u || void 0,
+            ...b,
+            children: l
           }
         )
       }
     );
   }
-), Q = j("file-upload", {
+), he = A("file-upload", {
   part: "content",
   displayName: "FileUploadContent",
   className: "flex flex-col gap-4 p-4 min-h-[274px] bg-canvas-elevated rounded-2xl shadow-elevation-header"
-}), W = v("FileUploadHeader", ({ className: a, children: t, ...l }, o) => /* @__PURE__ */ e(
+}), me = j("FileUploadHeader", ({ className: i, children: l, ...r }, p) => /* @__PURE__ */ e(
   "div",
   {
-    ref: o,
-    className: F("flex justify-between items-center w-full", a),
-    ...l,
-    children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-[2px] w-full", children: t })
+    ref: p,
+    className: y("flex justify-between items-center w-full", i),
+    ...r,
+    children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-[2px] w-full", children: l })
   }
-)), X = v("FileUploadTitle", ({ className: a, children: t, ...l }, o) => /* @__PURE__ */ e(
+)), xe = j("FileUploadTitle", ({ className: i, children: l, ...r }, p) => /* @__PURE__ */ e(
   "h3",
   {
-    ref: o,
-    className: F("text-base font-extrabold text-content leading-6", a),
-    ...l,
-    children: t
+    ref: p,
+    className: y("text-base font-extrabold text-content leading-6", i),
+    ...r,
+    children: l
   }
-)), ee = v("FileUploadDescription", ({ className: a, children: t, ...l }, o) => /* @__PURE__ */ e(
+)), ve = j("FileUploadDescription", ({ className: i, children: l, ...r }, p) => /* @__PURE__ */ e(
   "p",
   {
-    ref: o,
-    className: F(
+    ref: p,
+    className: y(
       "text-sm font-medium text-navigation-muted leading-5",
-      a
+      i
     ),
-    ...l,
-    children: t
+    ...r,
+    children: l
   }
-)), te = v("FileUploadClose", ({ className: a, ...t }, l) => {
-  const { t: o } = T(), s = o("aria.close");
-  return /* @__PURE__ */ c(w, { children: [
+)), ge = j("FileUploadClose", ({ className: i, ...l }, r) => {
+  const { t: p } = M(), d = p("aria.close");
+  return /* @__PURE__ */ c(z, { children: [
     /* @__PURE__ */ e(D, { asChild: !0, children: /* @__PURE__ */ e(
       "button",
       {
-        ref: l,
-        className: F(
+        ref: r,
+        className: y(
           "text-content-tertiary hover:text-content transition-colors",
-          a
+          i
         ),
         type: "button",
-        "aria-label": s,
-        ...t,
-        children: /* @__PURE__ */ e(E, { size: 16 })
+        "aria-label": d,
+        ...l,
+        children: /* @__PURE__ */ e(P, { size: 16 })
       }
     ) }),
-    /* @__PURE__ */ e(z, { side: "top", variant: "tertiary", children: s })
+    /* @__PURE__ */ e(T, { side: "top", variant: "tertiary", children: d })
   ] });
-}), ae = v("FileUploadDropZone", ({ className: a, label: t, subLabel: l, ...o }, s) => {
-  const { addFiles: p, accept: m, disabled: d, files: U, maxFiles: f } = I(), [u, x] = y.useState(!1), b = y.useRef(null);
-  if (U.length >= f)
+}), be = g.forwardRef(({ className: i, label: l, subLabel: r, ...p }, d) => {
+  const { t: u } = M(), { addFiles: h, accept: b, disabled: m, files: U, maxFiles: s } = G(), [x, w] = g.useState(!1), [t, o] = g.useState(!1), F = g.useRef(null);
+  if (U.length >= s)
     return null;
-  const n = (i) => {
-    i.preventDefault(), d || x(!0);
-  }, r = (i) => {
-    i.preventDefault(), x(!1);
-  }, h = (i) => {
-    i.preventDefault(), x(!1), !d && i.dataTransfer.files?.length && p(Array.from(i.dataTransfer.files));
-  }, g = () => {
-    d || b.current?.click();
-  }, N = (i) => {
-    i.target.files?.length && (p(Array.from(i.target.files)), i.target.value = "");
-  }, C = m.length > 0 ? m.map((i) => `.${i}`).join(",") : void 0;
+  const C = (n) => {
+    if (!(m || n.length === 0)) {
+      if (b.length > 0) {
+        const a = n.filter(
+          (R) => Z(R, b)
+        ), v = a.length < n.length;
+        if (a.length === 0) {
+          o(!0);
+          return;
+        }
+        o(v), h(a);
+        return;
+      }
+      o(!1), h(n);
+    }
+  }, N = (n) => {
+    n.preventDefault(), m || (w(!0), o(!1));
+  }, k = (n) => {
+    n.preventDefault(), !n.currentTarget.contains(n.relatedTarget) && w(!1);
+  }, B = (n) => {
+    n.preventDefault(), w(!1), !m && n.dataTransfer.files?.length && C(Array.from(n.dataTransfer.files));
+  }, L = () => {
+    m || (o(!1), F.current?.click());
+  }, S = (n) => {
+    n.target.files?.length && (h(Array.from(n.target.files)), n.target.value = "");
+  }, I = b.length > 0 ? b.map((n) => `.${n}`).join(",") : void 0, E = x ? "drag-over" : t ? "invalid-type" : "idle";
   return /* @__PURE__ */ c(
     "div",
     {
-      ref: s,
-      onClick: g,
-      onDragOver: n,
-      onDragLeave: r,
-      onDrop: h,
-      className: F(
-        "relative flex flex-col items-center justify-end p-4 pt-6 pb-6 gap-2 h-[148px] rounded-lg border border-dashed border-stroke-accent bg-transparent cursor-pointer transition-colors",
-        u && "border-brand bg-brand/5",
-        d && "opacity-50 cursor-not-allowed",
-        a
+      ref: d,
+      onClick: L,
+      onDragOver: N,
+      onDragLeave: k,
+      onDrop: B,
+      className: y(
+        "relative flex flex-col items-center p-4 pt-6 pb-6 gap-2 h-[148px] cursor-pointer transition-colors",
+        x && "justify-center rounded-lg border border-solid border-brand shadow-file-upload-drag bg-file-upload-drag",
+        !x && t && "justify-end rounded-2xl border border-solid border-destructive shadow-file-upload-error bg-file-upload-error",
+        !x && !t && "justify-end rounded-lg border border-dashed border-stroke-accent bg-transparent",
+        m && "opacity-50 cursor-not-allowed",
+        i
       ),
       "data-component": "file-upload-dropzone",
-      "data-state": u ? "drag-over" : "idle",
-      ...o,
+      "data-state": E,
+      ...p,
       children: [
         /* @__PURE__ */ e(
           "input",
           {
-            ref: b,
+            ref: F,
             type: "file",
-            multiple: !0,
+            multiple: s > 1,
             className: "hidden",
-            accept: C,
-            onChange: N,
-            disabled: d
+            accept: I,
+            onChange: S,
+            disabled: m
           }
         ),
-        /* @__PURE__ */ e("div", { className: "absolute top-[24px] left-1/2 -translate-x-1/2 pointer-events-none", children: /* @__PURE__ */ e(S, { size: 56 }) }),
-        /* @__PURE__ */ c("div", { className: "text-center space-y-1 z-10 mt-auto", children: [
-          /* @__PURE__ */ e("p", { className: "text-sm font-medium text-content leading-5", children: t || /* @__PURE__ */ c(L, { children: [
-            "Drag your files here or",
-            " ",
-            /* @__PURE__ */ e("span", { className: "text-brand text-sm font-medium hover:underline", children: "Choose File" })
-          ] }) }),
-          l && /* @__PURE__ */ e("p", { className: "text-xs font-medium text-navigation-muted", children: l })
+        /* @__PURE__ */ e(f, { when: x, children: /* @__PURE__ */ e("p", { className: "absolute inset-0 flex items-center justify-center text-center text-sm font-bold leading-[21px] text-content z-10 pointer-events-none", children: u("fileUpload.dropInProgress") }) }),
+        /* @__PURE__ */ c(f, { when: !x, children: [
+          /* @__PURE__ */ c("div", { className: "absolute top-[24px] left-1/2 -translate-x-1/2 pointer-events-none size-14", children: [
+            /* @__PURE__ */ e(f, { when: t, children: /* @__PURE__ */ e(J, { size: 56 }) }),
+            /* @__PURE__ */ e(f, { when: !t, children: /* @__PURE__ */ e(Q, { size: 56 }) })
+          ] }),
+          /* @__PURE__ */ c("div", { className: "text-center space-y-1 z-10 mt-auto", children: [
+            /* @__PURE__ */ c(
+              "p",
+              {
+                className: y(
+                  "text-sm font-medium leading-5",
+                  t && "text-destructive",
+                  !t && "text-content"
+                ),
+                ...t ? { role: "alert", "aria-live": "assertive" } : {},
+                children: [
+                  /* @__PURE__ */ c(f, { when: t, children: [
+                    u("fileUpload.fileTypeNotSupported"),
+                    " ",
+                    /* @__PURE__ */ e("span", { className: "text-brand text-sm font-medium hover:underline", children: u("fileUpload.chooseFile") })
+                  ] }),
+                  /* @__PURE__ */ e(f, { when: !t, children: l || /* @__PURE__ */ c(K, { children: [
+                    u("fileUpload.dragDropLabel"),
+                    " ",
+                    /* @__PURE__ */ e("span", { className: "text-brand text-sm font-medium hover:underline", children: u("fileUpload.chooseFile") })
+                  ] }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(f, { when: !!r, children: /* @__PURE__ */ e("p", { className: "text-xs font-medium text-navigation-muted", children: r }) })
+          ] })
         ] })
       ]
     }
   );
-}), le = j("file-upload", {
+}), we = A("file-upload", {
   part: "list",
   displayName: "FileUploadList",
   className: "flex flex-col gap-3"
-}), oe = v(
-  "FileUploadItem",
-  ({ className: a, file: t, onRemove: l, onView: o, onClick: s, ...p }, m) => {
-    const { t: d } = T(), { removeFile: U, disabled: f } = I(), u = (n) => {
-      n.stopPropagation(), l ? l() : U(t);
-    }, x = (n) => {
-      if (n === 0) return "0 B";
-      const r = 1024, h = ["B", "KB", "MB", "GB"], g = Math.floor(Math.log(n) / Math.log(r));
-      return parseFloat((n / Math.pow(r, g)).toFixed(2)) + " " + h[g];
-    }, b = (n) => {
-      switch (n.split(".").pop()?.toLowerCase()) {
+}), Fe = g.forwardRef(
+  ({
+    className: i,
+    file: l,
+    onRemove: r,
+    onClick: p,
+    loadingProgress: d,
+    errorMessage: u,
+    onReset: h,
+    onDownload: b,
+    ...m
+  }, U) => {
+    const { t: s } = M(), { removeFile: x, disabled: w } = G(), t = !!d, o = !!u, F = !w && !t && o && !!h, C = !w && !t && !o && !!b, N = (a) => {
+      a.stopPropagation(), r ? r() : x(l);
+    }, k = (a) => {
+      a.stopPropagation(), d?.onAbort?.();
+    }, B = (a) => {
+      a.stopPropagation(), h?.();
+    }, L = (a) => {
+      a.stopPropagation(), b?.();
+    }, S = (a) => {
+      if (a === 0) return "0 B";
+      const v = 1024, R = ["B", "KB", "MB", "GB"], O = Math.floor(Math.log(a) / Math.log(v));
+      return parseFloat((a / Math.pow(v, O)).toFixed(2)) + " " + R[O];
+    }, I = g.useMemo(() => {
+      if (!d) return null;
+      const a = Math.round(d.value), v = d.timeRemainingSeconds;
+      return v == null ? s("fileUpload.progressPercent", { percent: a }) : s(
+        v === 1 ? "fileUpload.progressTimeRemainingSingular" : "fileUpload.progressTimeRemaining",
+        { percent: a, count: v }
+      );
+    }, [d, s]), E = (a) => {
+      switch (a.split(".").pop()?.toLowerCase()) {
         case "xls":
         case "xlsx":
-          return /* @__PURE__ */ e(R, { size: 36 });
+          return /* @__PURE__ */ e(ee, { size: 36 });
         case "csv":
-          return /* @__PURE__ */ e(O, { size: 36 });
+          return /* @__PURE__ */ e(X, { size: 36 });
         case "txt":
-          return /* @__PURE__ */ e(A, { size: 36 });
+          return /* @__PURE__ */ e(W, { size: 36 });
+        default:
+          return /* @__PURE__ */ e(H, { size: 36, className: "text-content-icon" });
+      }
+    }, n = (a) => {
+      switch (a.split(".").pop()?.toLowerCase()) {
+        case "xls":
+        case "xlsx":
+          return /* @__PURE__ */ e(V, { size: 36 });
         default:
-          return /* @__PURE__ */ e(P, { size: 36, className: "text-content-icon" });
+          return /* @__PURE__ */ e(H, { size: 36 });
       }
     };
     return /* @__PURE__ */ e(
       "div",
       {
-        ref: m,
-        onClick: s,
-        className: F(
+        ref: U,
+        onClick: p,
+        className: y(
           "flex flex-col justify-between items-stretch gap-2 p-4 border border-stroke-hairline rounded-xl bg-canvas-elevated",
-          s && "cursor-pointer",
-          a
+          p && "cursor-pointer",
+          i
         ),
         "data-component": "file-upload-item",
-        "data-file-name": t.name,
-        "data-file-size": t.size,
-        ...p,
+        "data-file-name": l.name,
+        "data-file-size": l.size,
+        "data-loading": t || void 0,
+        ...m,
         children: /* @__PURE__ */ c("div", { className: "flex justify-between items-center gap-2 z-10", children: [
-          /* @__PURE__ */ c("div", { className: "flex gap-2 min-w-0", children: [
-            /* @__PURE__ */ e("div", { className: "w-9 h-9 shrink-0", children: b(t.name) }),
-            /* @__PURE__ */ c("div", { className: "flex flex-col justify-between gap-[2px] min-w-0", children: [
-              /* @__PURE__ */ c(w, { children: [
-                /* @__PURE__ */ e(D, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "text-xs font-bold text-content leading-[18px] line-clamp-1 break-all cursor-default", children: t.name }) }),
-                /* @__PURE__ */ e(z, { side: "top", variant: "tertiary", children: t.name })
+          /* @__PURE__ */ c("div", { className: "flex gap-2 min-w-0 flex-1", children: [
+            /* @__PURE__ */ e("div", { className: "w-9 h-9 shrink-0", children: o ? n(l.name) : E(l.name) }),
+            /* @__PURE__ */ c("div", { className: "flex flex-col justify-between gap-[2px] min-w-0 flex-1", children: [
+              /* @__PURE__ */ c(z, { children: [
+                /* @__PURE__ */ e(D, { asChild: !0, children: /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: y(
+                      "text-xs font-bold leading-[18px] line-clamp-1 break-all cursor-default",
+                      o ? "text-content-icon" : "text-content"
+                    ),
+                    children: l.name
+                  }
+                ) }),
+                /* @__PURE__ */ e(T, { side: "top", variant: "tertiary", children: l.name })
               ] }),
-              /* @__PURE__ */ e("span", { className: "text-xs font-medium text-secondary-foreground leading-[16px]", children: x(t.size) })
+              /* @__PURE__ */ e(f, { when: t, children: /* @__PURE__ */ c("div", { className: "flex flex-col gap-1 w-full min-w-0", children: [
+                /* @__PURE__ */ e(
+                  te,
+                  {
+                    value: d?.value ?? 0,
+                    label: !1,
+                    className: "h-1.5"
+                  }
+                ),
+                /* @__PURE__ */ e(f, { when: !!I, children: /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: "text-xs font-medium text-content-tertiary leading-[16px]",
+                    "data-component": "file-upload-item-progress-label",
+                    children: I
+                  }
+                ) })
+              ] }) }),
+              /* @__PURE__ */ e(f, { when: !t && o, children: /* @__PURE__ */ e(
+                "span",
+                {
+                  className: "text-xs font-medium text-destructive leading-[16px]",
+                  "data-component": "file-upload-item-error",
+                  role: "alert",
+                  "aria-live": "polite",
+                  children: u
+                }
+              ) }),
+              /* @__PURE__ */ e(f, { when: !t && !o, children: /* @__PURE__ */ e("span", { className: "text-xs font-medium text-secondary-foreground leading-[16px]", children: S(l.size) }) })
             ] })
           ] }),
           /* @__PURE__ */ c("div", { className: "flex items-center gap-4 shrink-0", children: [
-            o && /* @__PURE__ */ c(w, { children: [
+            /* @__PURE__ */ e(f, { when: t && !!d?.onAbort, children: /* @__PURE__ */ c(z, { children: [
               /* @__PURE__ */ e(D, { asChild: !0, children: /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: (n) => {
-                    n.stopPropagation(), o();
-                  },
-                  className: "flex items-center justify-center text-content-tertiary hover:text-content transition-colors",
+                  onClick: k,
+                  className: "flex items-center justify-center text-content-tertiary hover:text-destructive transition-colors",
                   type: "button",
-                  "aria-label": "View file data",
-                  children: /* @__PURE__ */ e(M, { size: 18 })
+                  "aria-label": s("fileUpload.cancelUpload"),
+                  children: /* @__PURE__ */ e(P, { size: 16 })
                 }
               ) }),
-              /* @__PURE__ */ e(z, { side: "top", variant: "tertiary", children: "View" })
-            ] }),
-            !f && /* @__PURE__ */ c(w, { children: [
+              /* @__PURE__ */ e(T, { side: "top", variant: "tertiary", children: s("fileUpload.cancelUpload") })
+            ] }) }),
+            /* @__PURE__ */ e(f, { when: !w && !t, children: /* @__PURE__ */ c(z, { children: [
               /* @__PURE__ */ e(D, { asChild: !0, children: /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: u,
+                  onClick: N,
                   className: "flex items-center justify-center text-content-tertiary hover:text-destructive transition-colors",
                   type: "button",
-                  "aria-label": d("aria.removeFile"),
-                  children: /* @__PURE__ */ e(B, { size: 14 })
+                  "aria-label": s("aria.removeFile"),
+                  children: /* @__PURE__ */ e(Y, { size: 14 })
                 }
               ) }),
-              /* @__PURE__ */ e(z, { side: "top", variant: "tertiary", children: d("aria.removeFile") })
-            ] })
+              /* @__PURE__ */ e(T, { side: "top", variant: "tertiary", children: s("aria.removeFile") })
+            ] }) }),
+            /* @__PURE__ */ e(f, { when: F, children: /* @__PURE__ */ c(z, { children: [
+              /* @__PURE__ */ e(D, { asChild: !0, children: /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: B,
+                  className: "flex items-center justify-center text-content-tertiary hover:text-content transition-colors",
+                  type: "button",
+                  "aria-label": s("fileUpload.retryUpload"),
+                  children: /* @__PURE__ */ e(_, { size: 14 })
+                }
+              ) }),
+              /* @__PURE__ */ e(T, { side: "top", variant: "tertiary", children: s("fileUpload.retryUpload") })
+            ] }) }),
+            /* @__PURE__ */ e(f, { when: C, children: /* @__PURE__ */ c(z, { children: [
+              /* @__PURE__ */ e(D, { asChild: !0, children: /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: L,
+                  className: "flex items-center justify-center text-content-tertiary hover:text-content transition-colors",
+                  type: "button",
+                  "aria-label": s("fileUpload.downloadFile"),
+                  children: /* @__PURE__ */ e(q, { size: 14 })
+                }
+              ) }),
+              /* @__PURE__ */ e(T, { side: "top", variant: "tertiary", children: s("fileUpload.downloadFile") })
+            ] }) })
           ] })
         ] })
       }
     );
   }
-), ne = j("file-upload", {
+), ye = A("file-upload", {
   part: "footer",
   displayName: "FileUploadFooter",
   className: "flex items-center justify-end gap-4 mt-auto"
 });
 export {
-  J as FileUpload,
-  te as FileUploadClose,
-  Q as FileUploadContent,
-  ee as FileUploadDescription,
-  ae as FileUploadDropZone,
-  ne as FileUploadFooter,
-  W as FileUploadHeader,
-  oe as FileUploadItem,
-  le as FileUploadList,
-  X as FileUploadTitle
+  ue as FileUpload,
+  ge as FileUploadClose,
+  he as FileUploadContent,
+  ve as FileUploadDescription,
+  be as FileUploadDropZone,
+  ye as FileUploadFooter,
+  me as FileUploadHeader,
+  Fe as FileUploadItem,
+  we as FileUploadList,
+  xe as FileUploadTitle
 };

package/dist/components/forms/file-upload/file-upload.types.d.ts

@@ -18,9 +18,24 @@ export interface FileUploadDropZoneProps extends React.HTMLAttributes<HTMLDivEle
     label?: string;
     subLabel?: string;
 }
-export interface FileUploadItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface FileUploadItemLoadingProgress {
+    /** Progress percentage, 0-100. */
+    value: number;
+    /** Estimated seconds remaining; omit to show percent only. */
+    timeRemainingSeconds?: number;
+    /** Called when the user aborts the in-flight upload. */
+    onAbort?: () => void;
+}
+export interface FileUploadItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onReset"> {
     file: File;
     onRemove?: () => void;
-    onView?: () => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /** When set, renders upload progress UI for this item. */
+    loadingProgress?: FileUploadItemLoadingProgress;
+    /** Error text shown for a failed upload. */
+    errorMessage?: string;
+    /** Retry a failed upload. */
+    onReset?: () => void;
+    /** Download the uploaded/processed file. */
+    onDownload?: () => void;
 }

package/dist/components/layout/dynamic-layout/dynamic-layout.variants.d.ts

@@ -1,5 +1,5 @@
 export declare const dynamicLayoutVariants: (props?: ({
     layout?: "grid" | "flex" | "stack" | null | undefined;
-    columns?: 1 | 2 | 4 | 3 | 6 | 12 | null | undefined;
+    columns?: 1 | 2 | 3 | 4 | 6 | 12 | null | undefined;
     gap?: "sm" | "md" | "lg" | "none" | "xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;