laif-ds 1.1.4 → 1.1.5

package/dist/CHANGELOG.md

@@ -5,6 +5,13 @@ All notable technical changes to the laif-ds core will be documented in this fil
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [laif-ds@1.1.5]
+
+### 🚀 Added
+
+- **FilePreview**: Added a `loading` prop that replaces the thumbnail with a same-size spinner, sets `aria-busy`, and disables container activation and the action menu, while keeping the inline remove button active so an in-progress upload can still be cancelled
+- **FilePreview**: Image thumbnails now show a spinner until the image has loaded, then fade in
+
 ## [laif-ds@1.1.4]
 
 ### 🚀 Added

package/dist/agent-docs/adoption-report.json

@@ -1,9 +1,9 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-10-20T20:53:04.357Z",
+  "generatedAt": "2026-10-21T07:11:32.035Z",
   "package": {
     "name": "laif-ds",
-    "version": "1.1.4"
+    "version": "1.1.5"
   },
   "summary": {
     "scannedFiles": 504,
@@ -647,6 +647,16 @@
           "src/components/stories/tabs.stories.tsx"
         ]
       },
+      {
+        "className": "flex flex-wrap gap-2",
+        "occurrences": 8,
+        "files": [
+          "src/components/stories/app-card.stories.tsx",
+          "src/components/stories/app-data-grid-filtri-custom.stories.tsx",
+          "src/components/stories/file-preview.stories.tsx",
+          "src/components/stories/toaster.stories.tsx"
+        ]
+      },
       {
         "className": "text-muted-foreground text-xs",
         "occurrences": 8,
@@ -711,16 +721,6 @@
           "src/components/ui/weekly-calendar/appointment-card.tsx"
         ]
       },
-      {
-        "className": "flex flex-wrap gap-2",
-        "occurrences": 6,
-        "files": [
-          "src/components/stories/app-card.stories.tsx",
-          "src/components/stories/app-data-grid-filtri-custom.stories.tsx",
-          "src/components/stories/file-preview.stories.tsx",
-          "src/components/stories/toaster.stories.tsx"
-        ]
-      },
       {
         "className": "text-lg font-semibold",
         "occurrences": 6,

package/dist/agent-docs/components/FilePreview.md

@@ -18,6 +18,7 @@ Compact file chip with name, format/size info, optional remove button, and optio
 | `onDownload`     | `(url: string) => void \| Promise<void>`                                             | `undefined`  | Called when user clicks Download from the action menu.                                                          |
 | `showActionMenu` | `boolean`                                                                            | `false`      | Show overflow menu (Preview/Download/Delete if provided).                                                       |
 | `showThumbnail`  | `boolean`                                                                            | `true`       | Controls whether a thumbnail/text preview is rendered when available.                                           |
+| `loading`        | `boolean`                                                                            | `false`      | Shows a spinner in place of the thumbnail; disables container click and the action menu (e.g. uploads).         |
 | `variant`        | `"default" \| "outline" \| "ghost"`                                                  | `"default"`  | Visual style of the chip container.                                                                             |
 | `size`           | `"default" \| "sm"`                                                                  | `"default"`  | Visual size of the chip container and its internal elements.                                                    |
 | `className`      | `string`                                                                             | `""`         | Additional classes for the wrapper.                                                                             |
@@ -42,6 +43,11 @@ Compact file chip with name, format/size info, optional remove button, and optio
 - **Thumbnails**:
   - Images: if `showThumbnail` is `false`, an icon is shown instead of the image.
   - Text: if `showThumbnail` is `false` (or a preview can't be extracted), an icon is shown instead of the text snippet.
+- **Loading**:
+  - `loading` replaces the thumbnail with a spinner of the same size (the chip does not change size) and sets `aria-busy` on the container.
+  - While loading, container click/keyboard activation and the action menu trigger are disabled; the inline remove button stays active, so removing the file can cancel an upload.
+  - Image thumbnails show the same spinner automatically until the image has loaded, then fade the image in; if it fails to load, the format icon is shown.
+  - When `onClick`, `onPreview` or the inline `onRemove` return a Promise, the chip shows the same loading state until it settles and ignores repeated activations; the remove button is disabled meanwhile. Action-menu items keep their own per-item spinner.
 
 ---
 
@@ -110,6 +116,24 @@ export function WithMenu() {
 }
 ```
 
+### Upload in Progress
+
+```tsx
+import { FilePreview } from "laif-ds";
+
+export function UploadingPreview({
+  file,
+  isUploading,
+  onCancel,
+}: {
+  file: File;
+  isUploading: boolean;
+  onCancel: () => void;
+}) {
+  return <FilePreview file={file} loading={isUploading} onRemove={onCancel} />;
+}
+```
+
 ### With Custom Click Handler
 
 ```tsx

package/dist/agent-docs/manifest.json

@@ -1,9 +1,9 @@
 {
   "schemaVersion": "1.1.0",
-  "generatedAt": "2026-10-20T20:53:03.846Z",
+  "generatedAt": "2026-10-21T07:11:31.501Z",
   "package": {
     "name": "laif-ds",
-    "version": "1.1.4"
+    "version": "1.1.5"
   },
   "stats": {
     "documentedComponentCount": 97,
@@ -3280,6 +3280,7 @@
           "Image",
           "With Remove Button",
           "With Action Menu",
+          "Upload in Progress",
           "With Custom Click Handler"
         ],
         "controlledPattern": "not-specified",
@@ -3287,17 +3288,20 @@
       },
       "metadata": {
         "props": {
-          "totalProps": 11,
+          "totalProps": 12,
           "requiredPropsCount": 0,
-          "typedPropsCount": 11,
-          "describedPropsCount": 11
+          "typedPropsCount": 12,
+          "describedPropsCount": 12
         },
         "accessibility": {
           "hasCoverage": true
         },
         "states": {
-          "coveredStates": [],
-          "coveredStateCount": 0
+          "coveredStates": [
+            "disabled",
+            "loading"
+          ],
+          "coveredStateCount": 2
         }
       },
       "aiReadiness": {
@@ -6552,5 +6556,5 @@
       ]
     }
   ],
-  "checksum": "34fc8ab2b8cfb6421c8b1c4cfbe8a792ee0a1bc846c62fc266a58d4b3a158fc2"
+  "checksum": "acf523f850e6553b7e6ee468f3246be9dd5b9c624ff99c56260dc3c475afa1c3"
 }

package/dist/components/ui/file-preview/index.js

@@ -1,20 +1,20 @@
 "use client";
-import { jsx as r, jsxs as m, Fragment as T } from "react/jsx-runtime";
-import { cva as v } from "../../../node_modules/class-variance-authority/dist/index.js";
-import { motion as K } from "framer-motion";
-import f, { useEffect as $, Fragment as B } from "react";
-import { getNameOrUrl as z, getExt as F, getMimeFromFile as U, imageExts as W, isFile as D, getFileMetadata as q, getFormatIcon as G, formatMetadata as X } from "../../../lib/file-preview.js";
-import { Button as H } from "../button.js";
-import { DropdownMenu as J, DropdownMenuTrigger as Q, DropdownMenuContent as Y, DropdownMenuSeparator as Z, DropdownMenuItem as ee } from "../dropdown-menu.js";
-import { Icon as P } from "../icon.js";
-import { Spinner as te } from "../spinner.js";
-import { cn as x } from "../../../lib/utils.js";
-const re = {
+import { jsx as t, jsxs as f, Fragment as O } from "react/jsx-runtime";
+import { cva as y } from "../../../node_modules/class-variance-authority/dist/index.js";
+import { motion as Q } from "framer-motion";
+import d, { useEffect as K, Fragment as Y } from "react";
+import { getNameOrUrl as N, getExt as C, getMimeFromFile as B, imageExts as Z, isFile as V, getFileMetadata as ee, getFormatIcon as te, formatMetadata as ae } from "../../../lib/file-preview.js";
+import { Button as ne } from "../button.js";
+import { DropdownMenu as re, DropdownMenuTrigger as ie, DropdownMenuContent as oe, DropdownMenuSeparator as se, DropdownMenuItem as le } from "../dropdown-menu.js";
+import { Icon as S } from "../icon.js";
+import { Spinner as W } from "../spinner.js";
+import { cn as g } from "../../../lib/utils.js";
+const ce = {
   layout: !0,
   initial: { opacity: 0, y: "100%" },
   animate: { opacity: 1, y: 0 },
   exit: { opacity: 0, y: "100%" }
-}, ae = v(
+}, de = y(
   "group/file ring-d-ring focus-visible:ring-d-accent relative flex items-center gap-1.5 overflow-hidden rounded-md transition-colors focus-within:ring focus-visible:ring focus-visible:outline-none",
   {
     variants: {
@@ -33,7 +33,7 @@ const re = {
       size: "default"
     }
   }
-), V = v(
+), T = y(
   "aspect-square h-full shrink-0 rounded-sm",
   {
     variants: {
@@ -46,7 +46,7 @@ const re = {
       size: "default"
     }
   }
-), ne = v("", {
+), fe = y("", {
   variants: {
     size: {
       default: "h-5 w-5",
@@ -56,7 +56,7 @@ const re = {
   defaultVariants: {
     size: "default"
   }
-}), ie = v(
+}), ue = y(
   "flex max-w-full overflow-hidden whitespace-nowrap",
   {
     variants: {
@@ -69,7 +69,7 @@ const re = {
       size: "default"
     }
   }
-), oe = v("text-d-muted-foreground", {
+), me = y("text-d-muted-foreground", {
   variants: {
     size: {
       default: "text-sm",
@@ -79,7 +79,7 @@ const re = {
   defaultVariants: {
     size: "default"
   }
-}), se = v(
+}), he = y(
   "hover:bg-d-accent hover:text-d-accent-foreground data-[state=open]:bg-d-accent data-[state=open]:text-d-accent-foreground  cursor-pointer focus-visible:bg-d-accent rounded-r-sm focus-visible:outline-none",
   {
     variants: {
@@ -92,7 +92,7 @@ const re = {
       size: "default"
     }
   }
-), le = v(
+), ge = y(
   "absolute flex self-start overflow-visible rounded-sm p-0.5 text-xs opacity-0 group-hover/file:opacity-100 before:absolute before:top-0 before:right-1/2 before:-z-10 before:h-[400%] before:w-[300%] before:translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-radial before:from-50% before:to-transparent before:to-80% before:blur-xs before:content-[''] focus-visible:opacity-100",
   {
     variants: {
@@ -111,84 +111,122 @@ const re = {
       size: "default"
     }
   }
-), j = f.createContext({ variant: "default", size: "default" }), N = () => f.useContext(j), I = ({
+), q = d.createContext({ variant: "default", size: "default", loading: !1 }), b = () => d.useContext(q), R = ({
   sizeLabel: e,
-  formatLabel: a
+  formatLabel: n
 }) => {
-  const { size: o } = N(), t = X(e, a);
-  return t ? /* @__PURE__ */ r(
+  const { size: o } = b(), a = ae(e, n);
+  return a ? /* @__PURE__ */ t(
     "div",
     {
-      className: oe({ size: o }),
-      "aria-label": `${e ? `Size: ${e}` : ""}${e && a ? ", " : ""}${a ? `Format: ${a}` : ""}`,
-      children: t
+      className: me({ size: o }),
+      "aria-label": `${e ? `Size: ${e}` : ""}${e && n ? ", " : ""}${n ? `Format: ${n}` : ""}`,
+      children: a
     }
   ) : null;
-}, ce = ({
+}, G = ({ className: e }) => {
+  const { size: n } = b();
+  return /* @__PURE__ */ t(
+    W,
+    {
+      size: n === "sm" ? "sm" : "md",
+      className: g("text-d-muted-foreground", e),
+      "aria-hidden": "true"
+    }
+  );
+}, be = () => {
+  const { size: e } = b();
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: g(
+        T({ size: e }),
+        "flex items-center justify-center"
+      ),
+      children: /* @__PURE__ */ t(G, {})
+    }
+  );
+}, M = ({ children: e }) => {
+  const { loading: n } = b();
+  return n ? /* @__PURE__ */ t(be, {}) : e;
+}, pe = ({
   fileUrl: e,
-  fileName: a
+  fileName: n
 }) => {
-  const { size: o } = N(), [t, n] = f.useState(e), s = F(a);
-  f.useEffect(() => {
-    n(e);
-  }, [e]);
-  const c = () => {
-    n(void 0);
-  };
-  return t ? /* @__PURE__ */ r(
-    "img",
+  const { size: o } = b(), [a, r] = d.useState("loading"), s = d.useCallback((c) => {
+    c?.complete && c.naturalWidth > 0 && r("loaded");
+  }, []);
+  return !e || a === "error" ? /* @__PURE__ */ t(D, { ext: C(n), mimeType: "image/*" }) : /* @__PURE__ */ f(
+    "div",
     {
-      alt: a,
-      className: x(V({ size: o }), "object-cover"),
-      width: 40,
-      height: 40,
-      loading: "lazy",
-      onError: c,
-      decoding: "async",
-      src: t
+      className: g(
+        T({ size: o }),
+        "relative overflow-hidden"
+      ),
+      children: [
+        a === "loading" && /* @__PURE__ */ t(G, { className: "absolute inset-0 m-auto" }),
+        /* @__PURE__ */ t(
+          "img",
+          {
+            ref: s,
+            alt: n,
+            className: g(
+              "size-full object-cover transition-opacity",
+              a === "loaded" ? "opacity-100" : "opacity-0"
+            ),
+            width: 40,
+            height: 40,
+            loading: "lazy",
+            onLoad: () => r("loaded"),
+            onError: () => r("error"),
+            decoding: "async",
+            src: e
+          }
+        )
+      ]
     }
-  ) : /* @__PURE__ */ r(k, { ext: s, mimeType: "image/*" });
-}, k = ({
+  );
+}, D = ({
   className: e,
-  ext: a,
+  ext: n,
   mimeType: o
 }) => {
-  const { size: t } = N(), { iconName: n, colorClass: s } = G(a ?? "", o);
-  return /* @__PURE__ */ r(
+  const { size: a } = b(), { iconName: r, colorClass: s } = te(n ?? "", o);
+  return /* @__PURE__ */ t(
     "div",
     {
-      className: x(
-        V({ size: t }),
+      className: g(
+        T({ size: a }),
         "flex items-center justify-center",
         e
       ),
       "aria-hidden": "true",
-      children: /* @__PURE__ */ r(
-        P,
+      children: /* @__PURE__ */ t(
+        S,
         {
-          name: n,
-          className: x(ne({ size: t }), s),
+          name: r,
+          className: g(fe({ size: a }), s),
           "aria-hidden": "true"
         }
       )
     }
   );
-}, de = ({
+}, xe = ({
   url: e,
-  onPreview: a,
+  onPreview: n,
   onDownload: o,
-  onRemove: t,
-  disabled: n = !1
+  onRemove: a,
+  disabled: r = !1
 }) => {
-  const { size: s } = N(), [c, h] = f.useState(!1), [b, g] = f.useState(
+  const { size: s } = b(), [c, p] = d.useState(!1), [x, m] = d.useState(
     null
   ), u = [
     {
       key: "preview",
-      cond: !!a,
+      cond: !!n,
       icon: "Presentation",
       label: "Anteprima",
-      onSelect: a
+      onSelect: n
     },
     {
       key: "download",
@@ -199,61 +237,61 @@ const re = {
     },
     {
       key: "remove",
-      cond: !!t,
+      cond: !!a,
       icon: "Trash",
       label: "Elimina",
-      onSelect: t,
+      onSelect: a,
       danger: !0
     }
-  ], w = async (i) => {
-    if (i.onSelect && !b)
+  ], z = async (i) => {
+    if (i.onSelect && !x)
       try {
-        const d = i.onSelect(e);
-        typeof d?.then == "function" && (g(i.key), await d);
-      } catch (d) {
-        console.error(d);
+        const v = i.onSelect(e);
+        typeof v?.then == "function" && (m(i.key), await v);
+      } catch (v) {
+        console.error(v);
       } finally {
-        g(null), h(!1);
+        m(null), p(!1);
       }
   };
-  return /* @__PURE__ */ m(J, { onOpenChange: (i) => h(i), open: c, children: [
-    /* @__PURE__ */ r(
-      Q,
+  return /* @__PURE__ */ f(re, { onOpenChange: (i) => p(i), open: c, children: [
+    /* @__PURE__ */ t(
+      ie,
       {
-        disabled: n || !e,
-        className: se({ size: s }),
+        disabled: r || !e,
+        className: he({ size: s }),
         "aria-label": "File actions",
         onClick: (i) => i.stopPropagation(),
         onKeyDown: (i) => i.stopPropagation(),
-        children: /* @__PURE__ */ r(
-          P,
+        children: /* @__PURE__ */ t(
+          S,
           {
             name: "ChevronDown",
-            className: x(s === "sm" ? "size-3" : "size-4"),
+            className: g(s === "sm" ? "size-3" : "size-4"),
             "aria-hidden": "true"
           }
         )
       }
     ),
-    /* @__PURE__ */ r(
-      Y,
+    /* @__PURE__ */ t(
+      oe,
       {
         align: "end",
         onClick: (i) => i.stopPropagation(),
         onPointerDown: (i) => i.stopPropagation(),
-        children: u.filter((i) => i.cond).map((i, d, y) => /* @__PURE__ */ m(B, { children: [
-          i.danger && y.length > 1 && /* @__PURE__ */ r(Z, {}),
-          /* @__PURE__ */ m(
-            ee,
+        children: u.filter((i) => i.cond).map((i, v, h) => /* @__PURE__ */ f(Y, { children: [
+          i.danger && h.length > 1 && /* @__PURE__ */ t(se, {}),
+          /* @__PURE__ */ f(
+            le,
             {
-              onSelect: (S) => {
-                S.preventDefault(), w(i);
+              onSelect: (P) => {
+                P.preventDefault(), z(i);
               },
               variant: i.danger ? "destructive" : "default",
-              disabled: !!b,
+              disabled: !!x,
               children: [
-                b === i.key ? /* @__PURE__ */ r(te, { size: "sm" }) : /* @__PURE__ */ r(P, { name: i.icon, size: "sm" }),
-                /* @__PURE__ */ r("span", { children: i.label })
+                x === i.key ? /* @__PURE__ */ t(W, { size: "sm" }) : /* @__PURE__ */ t(S, { name: i.icon, size: "sm" }),
+                /* @__PURE__ */ t("span", { children: i.label })
               ]
             }
           )
@@ -261,132 +299,138 @@ const re = {
       }
     )
   ] });
-}, O = ({
+}, $ = ({
   name: e,
-  className: a
+  className: n
 }) => {
-  const { size: o } = N(), t = e.lastIndexOf("."), n = t > 0 && t < e.length - 1, s = n ? e.slice(0, t) : e, c = n ? e.slice(t + 1) : "";
-  return /* @__PURE__ */ m(
+  const { size: o } = b(), a = e.lastIndexOf("."), r = a > 0 && a < e.length - 1, s = r ? e.slice(0, a) : e, c = r ? e.slice(a + 1) : "";
+  return /* @__PURE__ */ f(
     "span",
     {
-      className: x(ie({ size: o }), a),
+      className: g(ue({ size: o }), n),
       title: e,
       children: [
-        /* @__PURE__ */ r("span", { className: "shrink-1 truncate", children: s }),
-        c && /* @__PURE__ */ r("span", { className: "w-fit", children: `.${c}` })
+        /* @__PURE__ */ t("span", { className: "shrink-1 truncate", children: s }),
+        c && /* @__PURE__ */ t("span", { className: "w-fit", children: `.${c}` })
       ]
     }
   );
-}, Pe = f.forwardRef(
-  (e, a) => {
-    const o = z(e.file), t = F(o), n = U(e.file), s = t === "csv" || n === "text/csv";
-    return n && n.startsWith("image/") || t && W.has(t) ? /* @__PURE__ */ r(fe, { ...e, ref: a }) : !s && (t === "txt" || t === "md" || n && n.startsWith("text/")) ? /* @__PURE__ */ r(ue, { ...e, ref: a }) : /* @__PURE__ */ r(me, { ...e, ref: a });
+}, Le = d.forwardRef(
+  (e, n) => {
+    const o = N(e.file), a = C(o), r = B(e.file), s = a === "csv" || r === "text/csv";
+    return r && r.startsWith("image/") || a && Z.has(a) ? /* @__PURE__ */ t(ve, { ...e, ref: n }) : !s && (a === "txt" || a === "md" || r && r.startsWith("text/")) ? /* @__PURE__ */ t(we, { ...e, ref: n }) : /* @__PURE__ */ t(ye, { ...e, ref: n });
   }
-), L = f.forwardRef(
+), j = d.forwardRef(
   ({
     file: e,
-    clickable: a = !0,
+    clickable: n = !0,
     onRemove: o,
-    onPreview: t,
-    onDownload: n,
+    onPreview: a,
+    onDownload: r,
     showActionMenu: s = !1,
     className: c,
-    defaultClassName: h,
-    children: b,
-    onClick: g,
+    defaultClassName: p,
+    children: x,
+    onClick: m,
     variant: u = "default",
-    size: w = "default"
-  }, i) => {
-    const [d, y] = f.useState(
-      () => D(e) ? "" : e.url
-    );
-    $(() => {
-      if (D(e)) {
+    size: z = "default",
+    loading: i = !1
+  }, v) => {
+    const [h, P] = d.useState(
+      () => V(e) ? "" : e.url
+    ), [I, U] = d.useState(!1), F = i || I;
+    K(() => {
+      if (V(e)) {
         const l = URL.createObjectURL(e);
-        return y(l), () => {
+        return P(l), () => {
           URL.revokeObjectURL(l);
         };
       } else
-        y(e.url);
+        P(e.url);
     }, [e]);
-    const S = q(e), R = z(e), M = !s && !!g, p = a && (!!t || M), E = async (l) => {
-      if (M) {
-        try {
-          await g(l);
-        } catch (C) {
-          console.error(C);
-        }
-        return;
-      }
-      if (t) {
+    const X = ee(e), E = N(e), A = !s && !!m, w = n && !F && (!!a || A), L = async (l) => {
+      if (!I)
         try {
-          await t(d);
-        } catch (C) {
-          console.error(C);
+          const k = l();
+          typeof k?.then == "function" && (U(!0), await k);
+        } catch (k) {
+          console.error(k);
+        } finally {
+          U(!1);
         }
-        return;
-      }
-    }, A = (l) => {
-      p && (l.stopPropagation(), E(l));
     }, _ = (l) => {
-      p && (l.stopPropagation(), (l.key === "Enter" || l.key === " ") && (l.preventDefault(), E(l)));
+      if (A)
+        return L(() => m(l));
+      if (a)
+        return L(() => a(h));
+    }, H = (l) => {
+      w && (l.stopPropagation(), _(l));
+    }, J = (l) => {
+      w && (l.stopPropagation(), (l.key === "Enter" || l.key === " ") && (l.preventDefault(), _(l)));
     };
-    return /* @__PURE__ */ r(
-      K.div,
+    return /* @__PURE__ */ t(
+      Q.div,
       {
-        ref: i,
-        role: p ? "button" : "group",
-        tabIndex: p ? 0 : -1,
-        "aria-label": `File: ${R}`,
-        className: x(
-          ae({ variant: u, size: w }),
-          p && "cursor-pointer",
-          h,
+        ref: v,
+        role: w ? "button" : "group",
+        tabIndex: w ? 0 : -1,
+        "aria-label": `File: ${E}`,
+        "aria-busy": F || void 0,
+        className: g(
+          de({ variant: u, size: z }),
+          w && "cursor-pointer",
+          p,
           c
         ),
-        onClick: p ? A : void 0,
-        onKeyDown: p ? _ : void 0,
-        ...re,
-        children: /* @__PURE__ */ m(j.Provider, { value: { variant: u, size: w }, children: [
-          /* @__PURE__ */ m("div", { className: "flex h-full w-full min-w-0 items-center gap-1", children: [
-            b(d, S),
-            s && /* @__PURE__ */ r(
-              de,
-              {
-                url: d,
-                onPreview: t,
-                onDownload: n,
-                onRemove: o,
-                disabled: !d
-              }
-            )
-          ] }),
-          !s && o ? /* @__PURE__ */ r(
-            H,
-            {
-              className: le({ variant: u, size: w }),
-              variant: "ghost",
-              size: "icon",
-              "aria-label": `Remove ${R}`,
-              disabled: !d,
-              onClick: (l) => {
-                l.stopPropagation(), d && o(d);
-              },
-              children: /* @__PURE__ */ r(P, { name: "X", className: "size-full", "aria-hidden": "true" })
-            }
-          ) : null
-        ] })
+        onClick: w ? H : void 0,
+        onKeyDown: w ? J : void 0,
+        ...ce,
+        children: /* @__PURE__ */ f(
+          q.Provider,
+          {
+            value: { variant: u, size: z, loading: F },
+            children: [
+              /* @__PURE__ */ f("div", { className: "flex h-full w-full min-w-0 items-center gap-1", children: [
+                x(h, X),
+                s && /* @__PURE__ */ t(
+                  xe,
+                  {
+                    url: h,
+                    onPreview: a,
+                    onDownload: r,
+                    onRemove: o,
+                    disabled: !h || F
+                  }
+                )
+              ] }),
+              !s && o ? /* @__PURE__ */ t(
+                ne,
+                {
+                  className: ge({ variant: u, size: z }),
+                  variant: "ghost",
+                  size: "icon",
+                  "aria-label": `Remove ${E}`,
+                  disabled: !h || I,
+                  onClick: (l) => {
+                    l.stopPropagation(), h && L(() => o(h));
+                  },
+                  children: /* @__PURE__ */ t(S, { name: "X", className: "size-full", "aria-hidden": "true" })
+                }
+              ) : null
+            ]
+          }
+        )
       }
     );
   }
-), fe = f.forwardRef(({ showThumbnail: e = !0, ...a }, o) => {
-  const t = z(a.file);
-  return /* @__PURE__ */ r(L, { ...a, ref: o, children: (n, s) => /* @__PURE__ */ m(T, { children: [
-    e ? /* @__PURE__ */ r(ce, { fileUrl: n, fileName: t }) : /* @__PURE__ */ r(k, { ext: F(t), mimeType: "image/*" }),
-    /* @__PURE__ */ m("div", { className: "mr-1 flex min-w-0 flex-1 flex-col gap-0.5", children: [
-      /* @__PURE__ */ r(O, { name: t, className: "inline-flex min-w-0 flex-1" }),
-      /* @__PURE__ */ r(
-        I,
+), ve = d.forwardRef(({ showThumbnail: e = !0, ...n }, o) => {
+  const a = N(n.file);
+  return /* @__PURE__ */ t(j, { ...n, ref: o, children: (r, s) => /* @__PURE__ */ f(O, { children: [
+    /* @__PURE__ */ t(M, { children: e ? /* @__PURE__ */ t(pe, { fileUrl: r, fileName: a }, r) : /* @__PURE__ */ t(D, { ext: C(a), mimeType: "image/*" }) }),
+    /* @__PURE__ */ f("div", { className: "mr-1 flex min-w-0 flex-1 flex-col gap-0.5", children: [
+      /* @__PURE__ */ t($, { name: a, className: "inline-flex min-w-0 flex-1" }),
+      /* @__PURE__ */ t(
+        R,
         {
           sizeLabel: s.sizeLabel,
           formatLabel: s.formatLabel
@@ -394,41 +438,41 @@ const re = {
       )
     ] })
   ] }) });
-}), ue = f.forwardRef(({ file: e, showThumbnail: a = !0, ...o }, t) => {
-  const [n, s] = f.useState(null), c = z(e), h = o.size ?? "default";
-  $(() => {
-    if (D(e)) {
-      const g = new FileReader();
-      return g.onload = (u) => {
+}), we = d.forwardRef(({ file: e, showThumbnail: n = !0, ...o }, a) => {
+  const [r, s] = d.useState(null), c = N(e), p = o.size ?? "default";
+  K(() => {
+    if (V(e)) {
+      const m = new FileReader();
+      return m.onload = (u) => {
         u.target?.result && s(
           typeof u.target.result == "string" ? u.target.result.slice(0, 100) : ""
         );
-      }, g.readAsText(e), () => {
-        g.abort();
+      }, m.readAsText(e), () => {
+        m.abort();
       };
     } else
       s(null);
   }, [e]);
-  const b = "text/plain";
-  return /* @__PURE__ */ r(L, { ...o, ref: t, file: e, children: (g, u) => /* @__PURE__ */ m(T, { children: [
-    n && a ? /* @__PURE__ */ r(
+  const x = "text/plain";
+  return /* @__PURE__ */ t(j, { ...o, ref: a, file: e, children: (m, u) => /* @__PURE__ */ f(O, { children: [
+    /* @__PURE__ */ t(M, { children: r && n ? /* @__PURE__ */ t(
       "div",
       {
-        className: x(
-          V({ size: h }),
+        className: g(
+          T({ size: p }),
           "flex items-start justify-start overflow-hidden p-0.5 leading-tight",
-          h === "sm" ? "text-[7px]" : "text-[8px]"
+          p === "sm" ? "text-[7px]" : "text-[8px]"
         ),
-        title: n,
+        title: r,
         "aria-label": "Text preview",
         role: "img",
-        children: n
+        children: r
       }
-    ) : /* @__PURE__ */ r(k, { mimeType: b }),
-    /* @__PURE__ */ m("div", { className: "mr-1 min-w-0 flex-1", children: [
-      /* @__PURE__ */ r(O, { name: c, className: "inline-flex min-w-0 flex-1" }),
-      /* @__PURE__ */ r(
-        I,
+    ) : /* @__PURE__ */ t(D, { mimeType: x }) }),
+    /* @__PURE__ */ f("div", { className: "mr-1 min-w-0 flex-1", children: [
+      /* @__PURE__ */ t($, { name: c, className: "inline-flex min-w-0 flex-1" }),
+      /* @__PURE__ */ t(
+        R,
         {
           sizeLabel: u.sizeLabel,
           formatLabel: u.formatLabel
@@ -436,14 +480,14 @@ const re = {
       )
     ] })
   ] }) });
-}), me = f.forwardRef((e, a) => {
-  const o = z(e.file), t = F(o), n = U(e.file);
-  return /* @__PURE__ */ r(L, { ...e, ref: a, children: (s, c) => /* @__PURE__ */ m(T, { children: [
-    /* @__PURE__ */ r(k, { ext: t, mimeType: n }),
-    /* @__PURE__ */ m("div", { className: "mr-1 flex min-w-0 flex-1 flex-col gap-0.5", children: [
-      /* @__PURE__ */ r(O, { name: o, className: "inline-flex min-w-0 flex-1" }),
-      /* @__PURE__ */ r(
-        I,
+}), ye = d.forwardRef((e, n) => {
+  const o = N(e.file), a = C(o), r = B(e.file);
+  return /* @__PURE__ */ t(j, { ...e, ref: n, children: (s, c) => /* @__PURE__ */ f(O, { children: [
+    /* @__PURE__ */ t(M, { children: /* @__PURE__ */ t(D, { ext: a, mimeType: r }) }),
+    /* @__PURE__ */ f("div", { className: "mr-1 flex min-w-0 flex-1 flex-col gap-0.5", children: [
+      /* @__PURE__ */ t($, { name: o, className: "inline-flex min-w-0 flex-1" }),
+      /* @__PURE__ */ t(
+        R,
         {
           sizeLabel: c.sizeLabel,
           formatLabel: c.formatLabel
@@ -453,8 +497,8 @@ const re = {
   ] }) });
 });
 export {
-  Pe as FilePreview,
-  me as GenericFilePreview,
-  fe as ImageFilePreview,
-  ue as TextFilePreview
+  Le as FilePreview,
+  ye as GenericFilePreview,
+  ve as ImageFilePreview,
+  we as TextFilePreview
 };

package/dist/index.d.ts

@@ -2462,6 +2462,18 @@ declare type FilePreviewBaseProps = {
      * @default true
      */
     showThumbnail?: boolean;
+    /**
+     * Shows a spinner in place of the thumbnail (e.g. while the file is uploading).
+     *
+     * While loading, container click/keyboard activation and the action menu are disabled.
+     * The inline remove button stays active, so the upload can be cancelled.
+     *
+     * The same spinner is also shown automatically while an async `onClick`, `onPreview`
+     * or `onRemove` is pending, and while an image thumbnail is still loading.
+     *
+     * @default false
+     */
+    loading?: boolean;
     /** Optional additional className applied to the root container. */
     className?: string;
     variant?: FilePreviewVariant;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "laif-ds",
   "private": false,
-  "version": "1.1.4",
+  "version": "1.1.5",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",